.flex_layout.products{

}

.flex_layout.products .content_wrapper{
    margin-bottom: 20px;
    display: inline-block
}

.flex_layout.products .products_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0px;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.dark .flex_layout.products .products_grid {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.flex_layout.products .product_card > div {
    padding: 34px 25px 40px 25px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    height: 100%;
}

.flex_layout.products .product_card > div:hover{
    background-color: rgba(0, 0, 0, 0.2);
}

.dark .flex_layout.products .product_card > div {
    border: 0.5px solid rgba(255, 255, 255, 0.2);
}

.dark .flex_layout.products .product_card > div:hover{
    background-color: rgba(255, 255, 255, 0.2);
}

.flex_layout.products .product_icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.flex_layout.products .product_card span{
    font-size: 20px;
}









dialog.product_dialog.dialog_icon {
  height: 65px;
  width: 65px;
  object-fit: contain;
}

dialog.product_dialog .dialog-wrapper .top-row {
  display: flex;
  background:#003042;
  color:#fff;
}

dialog.product_dialog .dialog-wrapper .top-row *{
  color:#fff;
}

dialog.product_dialog .dialog-wrapper .top-row .left-col{
    width:50%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

dialog.product_dialog .dialog-wrapper .top-row .left-col .image{
  background-color: rgb(26,109,117);
  width: 4rem; height: 4rem;
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
}

dialog.product_dialog .dialog-wrapper .top-row .left-col .image span{
  /* background-color: white; */
  width: 3.5rem; height: 3.5rem;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  filter: brightness(0) invert(1);
}

dialog.product_dialog .dialog-wrapper .top-row .left-col .button_text{
  color: var(--charcoal);
}

dialog.product_dialog .dialog-wrapper .top-row .left-col .button:hover .button_text,
dialog.product_dialog .dialog-wrapper .top-row .left-col .button:active .button_text,
dialog.product_dialog .dialog-wrapper .top-row .left-col .button:focus .button_text{
  color: var(--pure-white);
}

dialog.product_dialog .dialog-wrapper .top-row .right-col{
  width:50%;
  position: relative;
}

#pk_flex_content dialog.product_dialog .dialog-wrapper .top-row .right-col .key_fact_container{
  background: rgba(0,0,0,0.4);
  bottom: 1.75rem; right: 1.75rem;
}
dialog.product_dialog .dialog-wrapper .top-row .right-col .key_fact_text{
  font-size: var(--body-s);
}
dialog.product_dialog .dialog-wrapper .top-row .right-col .key_fact_text::before{
  content: '';
  width: .75rem; height: .75rem;
  border-radius: 50%;
  background-color: var(--tech-green);
  flex-shrink: 0;
  margin-top: 0.3em;
}

dialog.product_dialog .dialog-wrapper .dialog_image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}


dialog.product_dialog .dialog-wrapper .download_button{
  margin-top: 20px;
}

#pk_flex_content dialog.product_dialog .dialog-wrapper .download_button:hover span{
  color: white !important;
}

dialog.product_dialog .dialog-wrapper .usp-row{
  padding: 5rem 3rem;
  background-color: var(--pure-white);
  color: var(--charcoal) !important;
  border-radius: 1rem;
  margin-top: -1rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

dialog.product_dialog .dialog-wrapper .usp-row .content{
  display: flex; flex-direction: column;
  gap: 2rem;
}

dialog.product_dialog .dialog-wrapper .usp-row ul {
  padding-left: 0;
}
dialog.product_dialog .dialog-wrapper .usp-row ul li{
  font-size: var(--heading-5);
  font-weight: var(--weight-bold);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  list-style: none;
  display: flex; align-items: center; gap: 1rem;
  padding-block: 1.5rem;
}

dialog.product_dialog .dialog-wrapper .usp-row ul li::before{
  content: '';
  width: 1.25rem; aspect-ratio: 1;
  background-color: var(--tech-green);
  border-radius: 50%;
  flex-shrink: 0;
}

dialog.product_dialog .dialog-wrapper .usp-row *{
  color: inherit !important;
}

dialog.product_dialog .dialog-wrapper .content-row{
  background-color: var(--turquoise-dark);
  color: var(--pure-white);
  border-radius: 1rem;
  margin-top: -1rem;
  padding: 5rem 3rem;

  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;

}

dialog.product_dialog .dialog-wrapper .content-row :is(h1, h2, h3, h4, h5, h6){
  color: inherit;
}

dialog.product_dialog .dialog-wrapper .close-button{
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  /* display: flex; */
  display: grid;
  grid-template-areas: "text icon";
  place-content: center;
  align-items: center;
  gap: 1rem;
  background-color: transparent;
  border: none;
  border-radius: unset;
  color: white;
  font-size: var(--body-m);
  padding: 0;
}

dialog.product_dialog .dialog-wrapper .close-button::before,
dialog.product_dialog .dialog-wrapper .close-button::after{
  grid-area: icon;
}

dialog.product_dialog .dialog-wrapper .close-button::before{
  content: '';
  width: 1.25rem; aspect-ratio: 1;
  margin-inline: auto;
  mask: url(/wp-content/themes/bb-theme-child/assets/images/x.svg) no-repeat center / contain;
  -webkit-mask: url(/wp-content/themes/bb-theme-child/assets/images/x.svg) no-repeat center / contain;
  background-color: currentColor;
}

dialog.product_dialog .dialog-wrapper .close-button::after{
  content: '';
  width: 3rem; aspect-ratio: 1;
  background-color: rgba(255,255,255, 0.05);
  border-radius: .25rem;
}






















dialog.product_dialog .dialog-wrapper:has(.top-row){
  padding:0;
}


dialog.product_dialog .dialog-wrapper .top-row {
  display: flex;
  background:#003042;
  color:#fff;
  padding: 7rem 3rem 5rem 3rem;
  gap:90px;
  align-items: center;
}

dialog.product_dialog .dialog-wrapper .top-row *{
  color:#fff;
}

dialog.product_dialog .dialog-wrapper .top-row .left-col{
    width:50%;
}

dialog.product_dialog .dialog-wrapper .top-row .right-col{
  width:50%;
}

dialog.product_dialog .dialog-wrapper .dialog_image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

dialog.product_dialog .close {
  all: unset;
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 1;
  color: #ffff;
  display: flex;
  gap: 16px;
  align-items: center;
}

dialog.product_dialog .close-dialog {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.20);
  border: 0;
}


dialog.product_dialog .content_file_inner{
  position: sticky;
  top: 20px;
}



dialog.product_dialog .dialog-navigation{
  position: fixed;
  opacity: 0;
  transition: opacity 0.3s ease;
  
  white-space: nowrap;
  z-index: 100;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--off-white);
  pointer-events: none;
  border-radius: 1.5rem;
  padding: .25rem 1rem;
  box-shadow: .25rem .25rem 1rem rgba(0,0,0,0.25);
  display: flex;
  gap: 1rem;
}

dialog.product_dialog .dialog-navigation.visible {
    opacity: 1;
    pointer-events: auto;
}

dialog.product_dialog .dialog-navigation button{
  background-color: var(--off-white);
  color: var(--pure-black);
  flex: 1;
  border: 0px;
  padding: 0.1rem 0;
  display: flex;
  gap: 5px;
  align-items: center;
}


@media screen and (min-width: 993px){

}

@media screen and (min-width: 768px){
  .dark .flex_layout.products .product_card > div{
    min-height: 136px;
  }
}

@media screen and (max-width: 767px){
    .flex_layout.products .content_wrapper{
        margin-bottom: 10px;
    }
    
    dialog.product_dialog .dialog-wrapper .top-row .left-col{
        width:100%;
    }
    
    dialog.product_dialog .dialog-wrapper .top-row .right-col{
      width:100%;
    }
    
    dialog.product_dialog .dialog-wrapper .top-row{
        flex-direction: column;
        gap: 2rem;
        padding: 5rem 1.5rem 2.5rem 1.5rem;
    }

    dialog.product_dialog .dialog-wrapper .usp-row{
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
        padding: 2.5rem 1.5rem;
    }
    dialog.product_dialog .dialog-wrapper .content-row{
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
        padding: 2.5rem 1.5rem;
    }
    
    .flex_layout.products .product_icon {
        width: 30px;
        height: 30px;
    }
    
    .flex_layout.products .product_card > div {
        padding: 14px 20px 20px 20px;
    }
}