/*------------------------------------*\
  #Root
\*------------------------------------*/

:root{
  --Primary-color:  #68177F;
  --Primary-dark-color:  #531266;
  --Primary-light-color:  #EBE5FD;
  --Secondary-color:  #0092C7;
  --Secondary-dark-color:  #004964;
  --Secondary-light-color:  #e6f4f9;

  /* Background & Other Colors */
  --Accent-color-1: #B2F0F1;
  --Accent-color-2: #f1d8f8;
  --Accent-color-3: #eff1f5;
  --Accent-color-4: #e6ff78;

  /* Linear Gradient */
  --Primary-linear-color: linear-gradient(120deg,rgba(104, 23, 127, 1) 0%, rgba(241, 216, 248, 0.5) 80%);
  --Secondary-linear-color: linear-gradient(120deg,rgba(0, 146, 199, 1) 0%, rgba(178, 240, 241, 0.8) 80%);

  
  --Text-color: #3B455C;

  /* Neutral Colors */
  --White-color: #fff;
  --Black-color: #333;
  --Grey-color: #F2F2F3;
  --Grey-light-color:#f7f3f9;

  /* Alert Colors */
  --Danger-color: #C91D2B;
  --Danger-hover-color: #be1b29;
  --Warning-color: #E8B130;
  --Success-color: #29BC42;
  --Info-color: #1C8EC9;

  /* Utilities Variables*/
  --Border-default: 1px solid var(--Grey-light-color);
  --Box-shadow-default: rgba(104, 23, 127, .1) 0px 1px 3px 0px, rgba(104, 23, 127, 0.06) 0px 1px 2px 0px;
  --Linear-gradient-default: linear-gradient(to right, rgba(0, 146, 199, .1), rgba(104, 23, 127, .1));
  --Linear-gradient-hover: linear-gradient(to right, rgba(0, 146, 199, 1), rgba(104, 23, 127, 1));
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/
/* Base */
html,
body{
  scroll-behavior: smooth;
}
/* Buttons */
.catfish-button,
.button,
a {
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}

html:not(.page-dynamicproduct-editor) .catfish-button,
html:not(.page-dynamicproduct-editor)  .button:not(.is-ghost):not(.accordion-title) {
  font-weight: 600;
  border-radius: 50px;

  &:hover,
  &:focus,
  &:active{
    color: var(--White-color);
  }
}

.catfish-button,
.button {
  font-weight: 600;
  border-radius: 50px;
}

.button.is-primary{

  &:hover,
  &:focus,
  &:active{
    background-color: var(--Primary-dark-color);
    color: var(--White-color);
  }
}

.button.is-secondary{

  &:hover,
  &:focus,
  &:active{
    background-color: var(--Secondary-dark-color);
    color: var(--White-color);
  }
}

.catfish-button:focus{
  outline-offset: none;
}

.catfish-button.is-primary:focus:not(:active), .catfish-button.is-primary.is-focused:not(:active), .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active), .catfish-button.is-secondary:focus:not(:active), .catfish-button.is-secondary.is-focused:not(:active), .button.is-secondary:focus:not(:active), .button.is-secondary.is-focused:not(:active),
.catfish-button:focus:not(:active), .catfish-button.is-focused:not(:active), .button:focus:not(:active), .button.is-focused:not(:active){
  box-shadow: none;
}


.catfish-button.is-focused{
  outline-offset: .8rem;
  outline-color: inherit;
}

.button:focus , .button.is-focused{
  outline-offset: .5rem;
  outline-color: inherit;
}

p:not(.back-link) a{
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: .3s;
  text-underline-offset: 0.25rem;

  &:hover{
    text-decoration: underline;
    text-decoration-color: inherit;
    -moz-text-decoration-color: inherit;
    color: var(--Primary-dark-color);
  }
}

.has-background-custom-1 p:not(.back-link) a,
.has-background-custom-2 p:not(.back-link) a{
  
  &:hover{
    color: var(--Primary-dark-color);
  }
}

p.back-link a {
  background-color: transparent;
  border: 1px solid var(--Secondary-color);
  color: var(--Secondary-color);

  &:hover {
    background-color: var(--Secondary-color);
    color: var(--White-color) !important;
  }
}

#deleteall {
  background-color: transparent;
  font-weight: 600;
  color: var(--Danger-color);
  text-decoration: underline;

  &:hover {
    color: var(--Danger-hover-color);
  }
}

#continueshoppingDummy,
#updatecart,
.catfish-button.is-outlined {
  background-color: transparent;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  border-color: var(--Secondary-color);
  color: var(--Secondary-color);

  &:focus,
  &:hover,
  &:active {
    border: 1px solid var(--Secondary-color);
    background-color: var(--Secondary-color);
    color: #fff;
  }
}

.is-outlined.button.is-primary:hover,
.is-outlined.button.is-primary:focus,
.is-outlined.button.is-primary:active{
  background-color: var(--Primary-color);
}

/* Typography */
.page-title h1,
.step-title h2,
.orders_v2_title.title{
  font-family: CoHeadlineCorpRegular;
  color: var(--Primary-color);
}


@media screen and (max-width: 767px) {
  .title.is-1 {
    font-size: 2em;
  }

  .title.is-2,
  .subtitle.is-2  {
    font-size: 1.5em;
  }
}
/* Background */
/* .has-background-light{
  background-color: var(--Accent-color-3) !important;
} */

.has-columns-background-light > .container > .columns{
  background-color: var(--Accent-color-1) !important;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  padding: 1rem;
  padding-bottom: 2rem;
}

.has-columns-background-primary > .container > .columns{
    background-color: var(--Accent-color-2) !important;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  padding: 1rem;
  padding-bottom: 2rem;
}

/* Table */
.content table td{
  padding: 1em 0.75em;
}

.content table th{
  padding-bottom: 1rem;
}

/* Image */
.image.is-250x250{
  height: 250px;
  width: 250px;
}

.has-object-fit-cover img{
  height: 100%;
  object-fit: cover;
}
/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/
/* Section background */
.section.has-background-custom-1{
    background: var(--Primary-linear-color);
}

.section.has-background-custom-2{
    background: var(--Secondary-linear-color);
}

/* Block background */
.box.has-background-custom-1,
.column:has(.bespoke-table) .has-background-custom-1{
  background-color: var(--Accent-color-1);
}

.box.has-background-custom-2,
.column:has(.bespoke-table) .has-background-custom-2{
  background-color: var(--Accent-color-2);
}

.box.has-background-custom-3,
.column:has(.bespoke-table) .has-background-custom-3{
  background-color: var(--Accent-color-3);
}

.box.has-background-custom-4,
.column:has(.bespoke-table) .has-background-custom-4{
  background-color: var(--Accent-color-4);
}

.has-image-custom-block:has(.block.style-custom-1) > .block:has(.image){
  margin-bottom: 0;
  padding: 1rem;
}

.block.style-custom-1{
  padding: 1.5rem;
  padding-top: 0;
}

.is-block-no-margin > .block:first-child{
  margin-bottom: 0;
}

/* Buttons */
.button.is-ghost{
  padding: 0;
  padding-right: 4.5rem;
  background-color: transparent;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  position: relative;
  display: flex;
  justify-content: flex-start;
  text-wrap: wrap;
  text-align: left;

  &::after{
    content: "\f061";
    font-family: "Font Awesome 5 Pro"; 
    font-weight: 400; 
    display: inline-block;
    margin-right: 0.5rem;
    color: inherit; 
    font-size: 1.25rem;
    position: absolute;
    right: 1rem;
    bottom: .75rem;
    transition: right 0.3s ease-in-out;
  }

  &:hover,
  &:focus,
  &:active{
    background-color: transparent;
    border: none;
    box-shadow: none;

    &::after{
      right: .5rem;
    }
  }
}

.is-ghost.button.is-small{

  &::after{
    font-size: 1rem;
    bottom: .5rem;
  }
}

.button.is-ghost.is-primary{
  color: var(--Primary-color);
}

.button.is-ghost.is-secondary{
  color: var(--Secondary-color);
}

.has-text-centered  .button.has-style-custom-1.has-style-white{
  display: flex;
  justify-content: center;  

  &::after{
    right: 2rem;
  }

  &:hover::after{
    right: 1.5rem;
  }
}

.button.has-style-custom-1.has-style-white::after{
  color: var(--White-color); 
}

/* List */
/* Font list */
.ict-list.icon-list {
  list-style: none;
  padding-left: 0;
}

.ict-list.icon-list li {
  position: relative;
  margin-bottom: .75rem;
  padding-left: .5rem;
}

.ict-list.icon-list li::before {
  font-family: "FontAwesome";
  content: "\f058";
  position: absolute;
  color: var(--Primary-color);
  font-weight: 400;
  left: 0;
  top: 0;
  margin-left: -1rem;
}

@media screen and (min-width: 1088px) {
  .block > .block:has(.block-list-50-desktop){
    width: 50%;
  }
}

/* Flexbox */
@media screen and (max-width: 767px) {
  
  .is-flex-wrap-wrap-mobile{
    flex-wrap: wrap !important;
  }
}

/* General utilities */

.has-image-no-margin > .block{
  margin-bottom: .75rem;

  .is-inline-block{
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .ict-image.image{
    display: flex;
    align-items: center;
    filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(5907%) hue-rotate(276deg) brightness(85%) contrast(100%);
  }
}

.has-image-filter .ict-image.image{
  filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(5907%) hue-rotate(276deg) brightness(85%) contrast(100%);
}

.has-border-bottom .container > .columns{
  border-bottom: 3px solid var(--Grey-light-color);
}

.has-box-shadow{
  box-shadow: var(--Box-shadow-default);
}

.is-fullheight{
  height: 100%;
}

@media screen and (max-width: 767px) {
  .has-image-centered-mobile .block:has(.image){
    display: flex;
    justify-content: center;
  }
}

/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/
/* Custom */
.product-slider.flexslider.infigo-slider{

  @media screen and (min-width: 1440px) {
      .image.is-128x128{
      width: 400px;
      height: 400px;
    }
  }

  @media screen and (max-width: 1439px) and (min-width: 1088px) {
      .image.is-128x128{
      width: 300px;
      height: 300px;
    }
  }
  
  @media screen and (max-width: 1087px) and (min-width: 768px) {
      .image.is-128x128{
      width: 250px;
      height: 250px;
    }
  }

  @media screen and (max-width: 767px) and (min-width: 500px) {
      .image.is-128x128{
      width: 200px;
      height: 200px;
    }
  }

  @media screen and (max-width: 499px) {
      .image.is-128x128{
      width: 150px;
      height: 150px;
    }
  }

  img{
    height: 100% !important;
    border-radius: 99999px;
    -webkit-border-radius: 99999px;
    -moz-border-radius: 99999px;
    -ms-border-radius: 99999px;
    -o-border-radius: 99999px;
    object-fit: cover;
  }
}

.flexslider.infigo-slider .flex-control-paging li a {
  background: var(--Accent-color-2);

  &:hover,
  &:focus,
  &:active{
    background: var(--Accent-color-1);
  }
}

.flexslider.infigo-slider .flex-control-paging li a.flex-active {
  background: var(--Secondary-color);
}

/* Table */
.column:has(.bespoke-table) .columns .column{
  border-radius: 12px;
  padding: 2rem !important;
  margin-bottom: 1.5rem;

  td, th{
    border-color: color-mix(in srgb, currentColor, #fff 30%) !important;
  }

  td{
    vertical-align: middle;
  }

  .bespoke-table {

  a.link{
    display: flex;
    width: 100%;
    margin-bottom: .5rem;
    align-items: flex-start;
    color: inherit !important;
    text-decoration: underline;

    span.icon{
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-start;
      position: relative;

      i{
        position: absolute;
        top: .25rem;
        transition: .4s;
        -webkit-transition: .4s;
        -moz-transition: .4s;
        -ms-transition: .4s;
        -o-transition: .4s;
      }
    }

    &:hover{
    span.icon i{
        top: .5rem;
      }
    }
    
    span{
      font-size: .875rem;
    }
  }
}

  &::-webkit-scrollbar { 
    display: none; 
  }

  @media (max-width: 900px) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    table {
      width: 100%; 
      min-width: 900px; 
    }
  }

  .fas,
  .fa-solid{
    font-size: 1.2rem;
  }

  .fas.fa-star::before{
    color: var(--Warning-color);
  }

  .fa-solid.fa-circle-xmark::before{
    color: var(--Danger-color);
  }

  .fa-solid.fa-circle-check::before{
    color: var(--Success-color);
  }

  .fa-solid.fa-circle-question{
    color: var(--Primary-color);
  }
}

.image-download > a.box {
  background-color: var(--Accent-color-2);

  .image.is-64x64{
    height: 96px;
    width: 96px;
  }

  .image.is-64x64 img{
    height: 100%;
    object-fit: cover;
  }
}

.file-upload a.link{
  display: flex;
  align-items: baseline;

  .icon{
    position: relative;

    i{
      position: absolute;
      top: .5rem;
      transition: .4s;
      -webkit-transition: .4s;
      -moz-transition: .4s;
      -ms-transition: .4s;
      -o-transition: .4s;
    }
  }

  span:last-of-type{
    text-decoration: underline;
  }

  &:hover{

    .icon i{
      top: .7rem;
    }
  }
}

.file-upload.file-upload-right a.link{
  justify-content: right;
}

.file-upload a.link:hover span:last-of-type{
  color: var(--Primary-dark-color);
}

/* Admin Components */

/* Pager */
.pager{
  margin-top: 3rem;

  span{
    background-color: var(--Secondary-color);
    border: 1px solid var(--Secondary-color);
    color: var(--White-color);

    &:hover{
      color: var(--White-color);
    }
  }

  a{
    border-color: var(--Primary-color);
    color: var(--Primary-color);

    &:hover{
      background-color: var(--Primary-color);
      border-color: var(--Primary-color);
      color: var(--White-color);
    }
  }
}

/* Breadcrumbs */
.breadcrumb-section {

  li a{
    color: var(--Text-color);
  }

  li a:hover {
    color: var(--Secondary-color);
  }

  li:last-of-type a {
    text-decoration: underline;
    color: var(--Primary-color);
  }
}

.dialog {
  .modal-card-head {
    border-bottom: none;
    background-color: var(--White-color);

    .modal-card-title {
      color: var(--Primary-color);
    }

    .delete{
      background-color: var(--Danger-color);

      &::before,
      &::after{
        background-color: rgba(255, 255, 255, 0.7);
      }

      &:hover,
      &:focus,
      &:active {
        background-color: var(--Danger-hover-color);
      }
    }
  }

  .modal-card-foot {
    background-color: var(--Primary-light-color);
    border-top: none;

    .button.is-light {
      background-color: transparent;
      border: 2px solid var(--Danger-color);
      color: var(--Danger-color);

      &:hover,
      &:focus,
      &:active {
        background-color: var(--Danger-hover-color);
        color: var(--White-color);
      }
    }

    .button.is-primary{
      background-color: var(--Primary-color);
      color: var(--White-color);
      border: 1px solid var(--Primary-color);

      &:hover,
      &:focus,
      &:active {
        background-color: var(--Primary-dark-color);
      }
    }
  }
}

/* Accordion */

.ict-accordion {

    .button.is-rounded.accordion-title{
    background: transparent;
    color: var(--Text-color);
    border-bottom: 1px solid var(--Text-color);
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    padding-bottom: 1.5rem;
    }

    .accordion-item.is-active .button.is-rounded.accordion-title{
      border-bottom: none;
      padding-bottom: 1rem;
    }

    .accordion-item.is-active .accordion-content{
      border-bottom: 1px solid var(--Text-color);
      padding-bottom: 1rem;
    }
}

  
@media screen and (min-width: 1088px) {
  .ict-accordion .accordion-item.is-active .accordion-content{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
  }
}

/* Category Cards */
.sub-category-grid .listWrapper .listItem,
.homePageCategories .listWrapper .listItem {
  width: 33.333333%;

  @media screen and (max-width: 1087px) and (min-width: 601px) {
    width: 50%;
  }

  @media screen and (max-width: 600px) {
    width: 100%;
  }

  .item-box,
  .small-product-item {
    border-top: none;
    max-height: 350px;
    height: 100%;
    position: relative;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    cursor: pointer;
  }

  .item-box:hover .sub-category-item,
  .small-product-item:hover {
    box-shadow: var(--Box-shadow);
  }

  .item-box .sub-category-item .category-title,
  .small-product-item .category-item .product-title {
    padding: 1rem;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    background-color: var(--Primary-color);
    text-align: center;

    a {
      color: var(--White-color) !important;
      text-align: center;
      font-weight: 600;
      font-size: 1.2rem;
    }
  }

  .small-product-item .category-item:hover .product-title {
    background-color: var(--Primary-color);
  }


  .item-box .sub-category-item .picture::after,
  .small-product-item .category-item .picture::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
  }

  .item-box:hover .sub-category-item .picture::after,
  .small-product-item:hover .category-item .picture::after {
    background-color: rgba(255, 255, 255, 0.3);
    opacity: .7;
    scale: 1;
  }

  @media screen and (min-width: 1088px) {
    .small-product-item .category-item .homepage-category-details-button {
      opacity: 0;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      display: block !important;
      visibility: hidden;
      -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
      -moz-transition: opacity 0.3s ease, visibility 0.3s ease;
      -ms-transition: opacity 0.3s ease, visibility 0.3s ease;
      -o-transition: opacity 0.3s ease, visibility 0.3s ease;
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -45%);
      color: var(--White-color);
      background-color: var(--Primary-color);
      font-size: 0.9375rem;
      padding: 0.625rem 0.625rem;
      width: 50%;
      text-align: center;
      border-radius: 5px;
      -webkit-transform: translate(-50%, -45%);
      -moz-transform: translate(-50%, -45%);
      -ms-transform: translate(-50%, -45%);
      -o-transform: translate(-50%, -45%);
    }
  }
}

/* Product Card */
.product-grid,
.homeFeaturedProducts{

  .listWrapper .listItem{
    position: relative;
    overflow: hidden;
    background-image: var(--Linear-gradient-default);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    border-radius: 12px;
    transition: .4s cubic-bezier(.17,.67,1,1.23)s;
    -webkit-transition: .4s cubic-bezier(.17,.67,1,1.23)s;
    -moz-transition: .4s cubic-bezier(.17,.67,1,1.23)s;
    -ms-transition: .4s cubic-bezier(.17,.67,1,1.23)s;
    -o-transition: .4s cubic-bezier(.17,.67,1,1.23)s;
    padding: 2px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;

    &::after{
        content: "";
        border-image-slice: fill 1;
        position: absolute;
        inset: 0;
        transition: opacity .2s;
        opacity: .2;
        z-index: -1;
      }

      &:hover::after{
        background: var(--Linear-gradient-hover);
        opacity: 1;
      }

    .item-box{
      transition: .4s cubic-bezier(.17,.67,1,1.23)s;
      -webkit-transition: .4s cubic-bezier(.17,.67,1,1.23)s;
      -moz-transition: .4s cubic-bezier(.17,.67,1,1.23)s;
      -ms-transition: .4s cubic-bezier(.17,.67,1,1.23)s;
      -o-transition: .4s cubic-bezier(.17,.67,1,1.23)s;
      -webkit-transition: cubic-bezier(.17,.67,1,1.23);

      .catfish-default-product-box{

        .product-item--content{
          padding-bottom: 2rem;
          position: relative;
        }

        .product-item--image .picture{
          background: var(--White-color);
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;

          img{
            object-fit: contain;
          }
        }

        .product-title{
          text-align: center;

          a{
            color: var(--Text-color);
          }
        }

        .product-item--info{
          background: var(--White-color);
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          padding: 1rem;
          padding-top: 0.5rem;
        }

        .alternate--prices .flex-container{
          justify-content: center;
        }
      }

      .productlistproductdetailbutton{
        background-color: transparent;
        border: 2px solid var(--Secondary-color);
        color: var(--Secondary-color);
        font-weight: 700;
        
        &:hover{
          background-color: var(--Secondary-color);
          border: 2px solid var(--Secondary-color);
          color: var(--White-color);
        }
      }

      &:hover{
        .catfish-default-product-box{
          box-shadow: var(--Box-shadow-column);
        }
       
        .product-item--content{
          &::before{
            right: .5rem;
          }
        }
        
        .add-info{
          border-top-right-radius: 5px;
          border-top-left-radius: 5px;
        }
      }

      &:hover{

        .product-item--image .picture img{
          opacity: .5;
        }
      }
    }
  }

  @media screen and (min-width: 1088px) {
    .listWrapper{
      gap: 1rem
    }

    .listItem{
      width: 24%;
    }
  }

  @media screen and (max-width: 1087px) {
    .listWrapper{
      gap: 1rem
    }

    .listItem{
      width: 48%;
    }
  }

  @media screen and (max-width: 601px) {
    .listItem{
      width: 100%;
    }
  }
}

/*------------------------------------*\
  #LAYOUTS
\*------------------------------------*/
/* Header */
.navbar{
  /* Logo Size */
  .is-header-logo {
      height: 2.5rem;
  }

  a.navbar-item, a.navbar-link{
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--Primary-color);    
  }

  .navbar-dropdown{
    padding-bottom: 0rem;
    padding-top: 0rem;

    a.navbar-item{
      font-size: 1rem;
      text-transform: none;
      background-color: transparent;
      color: var(--Text-color);
      transition: .3s;

      &:hover{
        background-color: var(--Primary-light-color);
        color: #8b58d9;
        padding-left: 1.2rem;
      }
    }

    a.navbar-item:hover:last-child{
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }

  .navbar-end{
      
    /* Icons */
    .navbar-item  .button{
      font-size: 1em;
      padding-left: 1.25rem;
      padding-right: 1.25rem;

      &:hover{
        background-color: var(--Secondary-color);
      
        i{
          color: var(--White-color);
        }
      }
    }

    .navbar-item  .button.is-primary{
      background-color: var(--Primary-color);
      
      i{
        color: var(--White-color);
      }

      &:hover,
      &:focus,
      &:active{
        background-color: var(--Primary-dark-color);
        color: var(--White-color);
      }
    }

    .navbar-item  i{
      font-weight: 700;
      color: var(--Primary-color);
    }

    .badge{
      background-color: var(--Primary-color);
    }
  }

  @media screen and (min-width: 1088px) {
    .navbar-link:not(.is-arrowless)::after{
      border-color: var(--Primary-color);
    }
  }

  @media screen and (max-width: 1650px) and (min-width: 1088px) {
    .navbar-dropdown a.navbar-item,
    a.navbar-item, a.navbar-link{
      font-size: 0.8888888888888889rem;
    } 

    a.navbar-item, a.navbar-link,
    .navbar-end .navbar-item:has(.buttons){
      padding: .5rem 1rem;
    }

    .navbar-link:not(.is-arrowless) {
      padding-right: 2em;
    }
  }

  @media screen and (max-width: 1400px) and (min-width: 1088px){
    .navbar-dropdown a.navbar-item,
    a.navbar-item, a.navbar-link{
      font-size: 0.7777777777777778rem;
    } 
    
    .basket-link .icon i{
      font-size: 1rem;
    }
  }

  @media screen and (max-width: 1250px) and (min-width: 1088px){
    a.navbar-item, a.navbar-link,
    .navbar-end .navbar-item:has(.buttons){
      padding: .5rem;
    }
  }

  @media screen and (max-width: 1087px) {
    .navbar-brand {

      .navbar-group i{
        color: var(--Primary-color);
        font-weight: 700;
      }

      .navbar-burger.burger span{
        background-color: var(--Secondary-color);
      }
    }
  }

  @media screen and (max-width: 476px){
    .is-header-logo {
        height: 1.8rem;
    }
  }
}

.nav-search-container{
  background: var(--Secondary-color);

  .search-box .searchbutton{
    background-color: var(--Primary-color);
    width: 100px;
  }
}

/* Footer */
.ict-dedicated-footer{
  padding-top: 3rem;
  padding-bottom: 3rem;

  .image.dedicated-footer-logo img {
    height: 2rem;
    width: auto;
  }
  
  .ict-social-links{
    gap: .75rem;
  
    li{
      background-color: var(--White-color);
      border-radius: 50px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      -ms-border-radius: 50px;
      -o-border-radius: 50px;
      transition: .2s;
      -webkit-transition: .2s;
      -moz-transition: .2s;
      -ms-transition: .2s;
      -o-transition: .2s;

      &:hover{
        background-color: var(--Primary-color);

        i{
          color: var(--White-color);
        }
      }
    }

    li .icon.is-medium{
      height: 2.5rem;
      width: 2.5rem;
    }

    i{
      color: var(--Primary-color);
    }
  }

  .ict-list li{
    padding-top: 1.25rem;
    a{
      text-decoration: underline;
      text-decoration-color: transparent;
      transition: .3s;
      text-underline-offset: 0.25rem;

      &:hover{
        text-decoration: underline;
        text-decoration-color: inherit;
        -moz-text-decoration-color: inherit;
        color: var(--Primary-light-color);
      }
    }
  }

  .ict-list li:first-of-type{
    padding-top: 0rem;
  }

  .footer-copyright{
    margin-top: 3rem;

    h4{
      padding-top: 3rem;
      border-top: 2px solid var(--White-color);
    }
  }
}

/* Sections */
@media screen and (max-width: 1087px){
    section.additional-description-section,
    section.related-products-section,
    .block.block-account-navigation,
    .account-page{
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@media screen and (max-width: 767px){
    section.section.is-large,
    .homeFeaturedProductsWrapper,
    .ict-dedicated-footer{
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    section.additional-description-section,
    section.related-products-section,
    .block.block-account-navigation,
    .account-page{
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/*------------------------------------*\
  #ADMIN PAGES
\*------------------------------------*/
/* Homepage */
.section.homepage-banner {

  @media screen and (max-width: 1024px) {
    background-position: left;
  }
}

.bestsellers{
  margin-bottom: 3rem;
}

/* Basket */
.shoppingcart__wrapper .cartform .cartTableWrapper .cart tr.cart-item-row{
  background-color: var(--Grey-light-color);
  border: var(--Border-default);
}

.rawAttributeInfo .title,
.rawAttributeInfo .separator{
  font-family: 'Comfortaa-VariableFont_wght';
  font-weight: 600;
  font-size: .75rem;
  font-size: .75rem;
  color: hsl(288 11% 40% / 1);
}

@media screen and (min-width: 1472px) {
  .common-buttons-container{
    margin-right: 1rem;
  }
}

@media screen and (max-width: 1471px) {
  .shoppingcart__wrapper .cartform .cartTableWrapper .cart tr.cart-item-row td {
    align-items: center;

    .cart-label-header{
      text-align: center;
      font-size: .75rem;
      color: hsl(288 11% 40% / 1);
      margin-bottom: .5rem;
    }

    .product__quantity{
      justify-content: center;
    }

    .product__title,
    .cart--quantity,
    .productPrice,
    .shoppingcartquantitytext {
      text-align: center;
    }
  }

  .rawAttributeInfo__item{
    text-align: center;
  }
}

.shoppingcart__wrapper .cartform .cartTableWrapper .cart tr.cart-item-row td.cart--actions{

  .cart-label-header{
    text-align: right;
  }

  input{
    padding: 0;
    box-shadow: none;
    outline-width: 1px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    margin-top: .5rem;

     @media screen and (min-width: 1471px) {
      text-align: right;
    }
  }

  .cart--edititem input{
    border: none;
    background-color: transparent;
    color: var(--Text-color);
    text-decoration: underline;
    height: 1.75rem;

    &:hover,
    &:active,
    &:focus{
      background-color: transparent;
      color: var(--Secondary-dark-color);
      
    }
  }

  .cart--deleteitem input.catfish-button.is-danger{
    background-color: transparent;
    color: var(--Danger-color);
    text-decoration: underline;

    &:hover,
    &:active,
    &:focus{
      background-color: transparent;
      color: var(--Danger-hover-color);
    }
  }
}

.shoppingcart__wrapper .cart-footer .cart-footer__container{
  border: unset;
  border-width: 2px;
  padding: 0;

  .deals{
    padding: 1rem;
    background: var(--Accent-color-1);
    border-radius: 12px;

    .coupon-box__wrapper .coupon-box__input .catfish-input{
      margin-right: 0;
    }
  }

  .applycouponcodebutton{
    background-color: transparent;
    color: var(--Primary-color);
    text-decoration: underline;

    &:hover{
      color: var(--Primary-dark-color);
      text-decoration-color: inherit;
      -moz-text-decoration-color: inherit;
    }
  }

  #cartTotals{
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: var(--Border-default);
    border-width: 2px;
    border-radius: 12px;
  }
}

/* Product Pages */
.arone-product-landing-page{
  
  @media screen and (min-width: 1088px) {
    .picture-wrapper {
      height: fit-content;
      position: sticky;
      top: 5rem;
    }
  }

  .details-wrapper{

    h1.title{
      font-size: 1.25rem;
      color: var(--Primary-color);
      font-weight: 500;
      margin-bottom: .75rem;
    }

    .product-variant-list{
      border-top: 2px solid var(--Grey-light-color);
      border-radius: 12px;
      margin-bottom: 1.5rem;
      margin-top: 0;
      padding: 2rem;
      background: var(--Grey-light-color);
      box-shadow: var(--Box-shadow-default);
    }

    .attribute label.button{
      border-width: 2px;
      color: var(--Primary-color);
      border-color: var(--Accent-color-2);
    }

    .attribute input:checked + label.button{
      border-radius: 50px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      -ms-border-radius: 50px;
      -o-border-radius: 50px;
    }

    .productvariantaddtocartbutton{
    background: transparent;
    color: var(--Secondary-color);
    border: 2px solid;

        &:hover,
        &:focus,
        &:active{
            background-color: var(--Secondary-color);
            color: var(--White-color);
        }
    }

    .product-variant-line > .block,
    .custom-product-form{
      margin-bottom: 1.5rem;
    }

    .quantity-wrapper .field.is-grouped{
      flex-direction: column;

      .control:first-child{
        font-weight: 700;
        margin-right: 0;
        margin-bottom: .75rem;
      }

      .control{
        width: 100%;
      }
    }

    .attribute-group:has(.name_Length):has(.name_Width){
      display: flex;
      flex-wrap: wrap;

      .attribute-group-title{
        flex: 1;
        flex-basis: 100%;
        width: 100%;
      }

      .attribute.name_Length{
        flex: 1;
        flex-basis: 50%;
        width: 50%;
      }

      .attribute.name_Width{
        flex: 1;
        flex-basis: 50%;
        width: 50%;
      }
    }
  }

  .name_Number_of_Models{
    padding: .75rem;
  
    .attributeHeader{
      display: flex;
    }

    .attributeHeader .attributeTitle,
    .attributeHeader .attributeDescription{
      flex: 1;
      flex-basis: 50%;
    }

    .attributeHeader .attributeTitle{
      font-weight: 600;
    }

    .attributeHeader .attributeDescription{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      text-align: right;
    }
  }

  
}

.arone-product-landing-page.hide-qty .custom-product-form .field.is-grouped .control{
    display: none;
  }

/*---Megaedit---------- */
.addtoBasketScreenContainer h1::before,
.loadingScreen .loadingLogo::before {
  content: "";
  /* Change the mega edit image here using the same naming structure on CSS  override */
  background: url("/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/3/ME_Logo.png");
  width: 250px;
  height: 150px;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  position: absolute;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.loadingScreen .fa-cog,
.addtoBasketScreen .fa-spinner {
  border: 0.1875rem solid var(--Primary-color);
  border-right-color: var(--Secondary-color);
}

.loadingScreen .ME_loading_hints ul li {
  border-color: var(--Primary-color);
  border-width: 2px;
}

#addToBasketScreenMsg,
.loadingScreen .ME_loading_hints ul li,
.ME_loading_hints ul li::before,
.loadScreenStepIndicator {
  color: var(--Text-color) !important;
}

.addtoBasketScreen .addtoBasketScreenContainer>h1::before {
  top: 0;
  width: 14rem;
  left: 50%;
  height: 150px;
  width: 150px;
  transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
  -moz-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  -o-transform: translate(-50%, 50%);
}

.loadingScreen .loadingSpinner,
.addtoBasketScreen .loadingSpinner {
  position: relative;
  top: 5rem;
}

.loadingScreen .loadingLogo .loadScreenStepIndicator,
.addtoBasketScreen .loadingArea__loadScreenStepIndicator {
  font-size: 1.5rem;
  margin-top: 2rem;
  font-weight: 500;
}

/* Multipart */

.product-part{

  .multipartUi-V2-UploadItem>.multipartUi-V2-Validation>.box{
    color: var(--Text-color);
  }

  .multipartUi-V2-UploadItem>.multipartUi-V2-Validation>.box.is-success{
    color: var(--Success-color);
  }

  .multipartUi-V2-UploadItem>.multipartUi-V2-Validation>.box.is-danger{
    color: var(--Danger-color);
  }

  .multipartUi-V2-UploadItem>.multipartUi-V2-Validation>.box.is-warning{
    color: var(--Warning-color);
  }

  .multipartUi-V2-Validation .fa-exclamation-circle:before{
    content: "\f05e";
  }

  .multipartUi-V2-Validation .is-flex-grow-1:has(.fa-exclamation-triangle){
    color: #ed7117 !important;
  }
}

/* Product - Quote */
.quote-product{

  .price {
    display: none;
  }

  .product-variant-line .block.is-medium{
    margin-bottom: 0;
  }

  .quantity-wrapper{
    display: none;
  }

  .add-to-cart-buttons-wrapper {
    position: relative;
    flex-basis: 100%;

    &::after {
    content: "Submit Quote";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      color: var(--Secondary-color); 
      font-size: 1rem;
    }

    &:hover::after{
      color: var(--White-color);
    }
  }

  .productvariantaddtocartbutton{
    color: transparent !important;
    border: 2px solid var(--Secondary-color) !important;
  }
}

html[lang="en"] .quote-product .add-to-cart-buttons-wrapper::after {
  content: "Submit Quote";
}

html[lang="fr"] .quote-product .add-to-cart-buttons-wrapper::after {
  content: "Soumettre un devis";
  font-size: 0.875rem;
}

/* Multipart */
.multipartUi-V2-wrapper {

  .back-button a {
    background-color: transparent;
    border: 1px solid var(--Secondary-color);
    color: var(--Secondary-color);

    &:hover{
      background-color: var(--Secondary-color);
      color: var(--White-color);
    }
  }

  .product-title {
    color: var(--Primary-color) !important;
  }

  .product-attributes-box {
    background-color: var(--Primary-color);
    color: var(--White-color);

    i {
      color: var(--White-color);
    }

    .is-spacer-line {
      background-color: var(--Tertiary-color);
    }

    .columns.attribute-data{
      justify-content: space-between;
    }
    
    .column.price-value,
    .column.attr-value {
      width: 40% !important; 
      text-align: right;
    }

    .column.price-label,
    .column.attr-name {
      width: 60% !important;
    }
  }

  .multipartUi-V2-UploadsArea .box {
    background: var(--Grey-light-color);

    h2 {
      margin-bottom: .75rem;
    }

    .mb-2 {
      margin-bottom: 1.5rem !important;
    }

    .file.is-boxed .file-cta {
      border: dashed 2px var(--Primary-color);
    }
  }

  .multipartUi-V2-UploadsArea .box.is-warning{
    background-color: #E8B130;
    width: 100%;
  }

  .upload-status-container {

    .button {
      background-color: var(--Primary-color);

      &:hover{
        background-color: var(--Secondary-dark-color);
      }
    }

    i {
      color: var(--Secondary-color);
    }
  }

  .section {

    .button {
      background-color: var(--Secondary-color);
      color: var(--White-color);

      &:hover{
        background-color: var(--Secondary-dark-color);
      }
    }

    #multipart-new-preview {
      background-color: var(--Box-background);
      box-shadow: var(--Box-shadow-default) !important;
    }

    .completed-list {
      .button {
        background-color: var(--Grey-light-color);
      }

      i {
        color: var(--Secondary-color);
      }
    }
  }
}

@media screen and (min-width: 1088px) {
  .multipartUi-V2-UploadItem .multipartUi-V2-Validation{
    
    .columns .column:last-child .button.is-light{
      height: auto;
      text-wrap: wrap;
    }
  }
}

/*------------------------------------*\
 #CHECKOUT STEPS
\*------------------------------------*/
/* Billing and Shipping Address */
.advanced-select {
  .item {
    border-bottom:var(--Border-default);
    border-width: 2px;
  }

  .footer-controls {
    box-shadow: var(--Box-shadow);
  }
}

.advanced-select .selected-item{
  border: 1px solid var(--Primary-color);
}

.advanced-select.is-extended .item-list {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  background-color: var(--White-color);
  border: 1px solid var(--Primary-color);
  border-bottom: 0;
  border-top: 0;

  .column{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  button.button.is-outlined {
    border: none;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;

    &:hover {
      background-color: var(--Primary-color) !important;
      border: none !important;

      span.text {
        color: var(--White-color);
      }
    }
  }

  span.text {
    color: var(--Text-color);
  }
}

.advanced-select .footer-controls{
  border: 1px solid var(--Primary-color);
  border-top: 0;
}

/* Delivery method */
.one-page-checkout #opc-shipping_method .shipping-options {
  background-color: transparent;

  .shipping-options__list .shipping-option-item label {
    box-shadow: var(--Box-shadow-default);
    border: var(--Border-default);
  }

  .shipping-option-item input:checked+label {
    background-color: var(--Primary-color);

    .ui-button-text {
      color: var(--White-color);
    }
  }

  .shipping-options__list .shipping-option-item input:checked+label:before {
    color: var(--White-color);
  }

  .shipping-options__list .shipping-option-item input:checked+label:after {
    color: var(--White-color);
    border: 2px solid var(--Secondary-color);
    background: var(--Secondary-color);
  }
}

/* Confirm Order Page */
#opc-confirm_order{

  .cart-item-row{
    background-color: var(--Grey-light-color);
    border: var(--Border-default);
  }

  .coupon-box{
    padding: 2rem;
    background: var(--Accent-color-1);
    border-radius: 12px;
    
    @media screen and (min-width: 768px) {
      width: 60%;
      max-width: 600px;
    }

    #discountcouponcode{
      width: 250px !important;
    }

    .applycouponcodebutton{
      background-color: transparent;
      color: var(--Primary-color);
      text-decoration: underline;

      &:hover{
        color: var(--Primary-dark-color);
        text-decoration-color: inherit;
        -moz-text-decoration-color: inherit;
      }
    }
  }

  .total-info{
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: var(--Border-default);
    border-width: 2px;
    border-radius: 12px;
  }

  @media screen and (min-width: 1088px){
    .cart-item-row .rawAttributeInfo .rawAttributeInfo__item{
      text-align: left;
    }
  }

  @media screen and (max-width: 1087px) {
    .cart-item-row {

      .shopping-cart__product__images{
        display: flex;
        justify-content: center;
      }

      .cart-label-header{
        text-align: center;
        font-size: .75rem;
        color: hsl(288 11% 40% / 1);
        margin-bottom: .5rem;
      }

      .product__quantity{
        justify-content: center;
      }

      .product__title,
      .cart--quantity,
      .productPrice,
      .shoppingcartquantitytext {
        text-align: center;
      }
    }
  }
}
/*------------------------------------*\
 #MY ACCOUNT PAGES
\*------------------------------------*/
.layout--accountPage {
  .block-account-navigation{
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 2rem;
    border: 1px solid var(--Primary-color);
    border-radius: 5px;

    .title{
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--Primary-color);
    }

    ul a:hover:not(.active){
      background-color: var(--Primary-light-color);
      color: var(--Text-color);
      padding-left: 1.5rem;
    }
  }

  .account-page--myorders .order_page_filters,
  .account-page--customerinfo .customer-info-box,
  .account-page--changepassword .customer-pass-recovery,
  .account-page--albummanagementtwo  .box.is-light {
    border-top: 2px solid var(--Grey-light-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    margin-top: 0;
    padding: 2rem;
    background: var(--Grey-light-color);
  }

  .account-page--customerinfo .customer__section .section-title{
    border-bottom: 2px solid var(--Primary-light-color);
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }

  .account-page--changepassword{

    .page-title .title{
      margin-bottom: 0;
    }

    .password-expired{
      margin-bottom: 1.5rem;
    }
  }

  .address-item table tr.address-item-row {
    background-color: var(--Grey-light-color);

    .buttons{

      .editaddressbutton{
        background-color: transparent;
        color: var(--Text-color);
        text-decoration: underline;

        &:hover{
          color: var(--Primary-dark-color);
          text-decoration-color: inherit;
          -moz-text-decoration-color: inherit;
        }
      }

      .deleteaddressbutton{

        background-color: transparent;
        color: var(--Danger-color);
        text-decoration: underline;

        &:hover{
          color: var(--Danger-hover-color);
          text-decoration-color: inherit;
          -moz-text-decoration-color: inherit;
        }
      }
    }
  }

  .account-page--myorders .orders_v2 #filtered_orders{
    .orders_row>.order_container{
      background-color: var(--Grey-light-color);
    }
    
    .orders_row:not(.order_page_select_container){

      .order_title{
        color: var(--Primary-color);
      }

      .order_show_details_but{
        background-color: var(--Primary-light-color);
        color: var(--Text-color);

        &:hover{
          background-color: var(--Primary-color);
          color: var(--White-color);
        }
      }

      .order_fullinfo .reorderbutton{
        background-color: transparent;
        color: var(--Secondary-color);
        border: 1px solid var(--Secondary-color);

        &:hover{
          background-color: var(--Secondary-dark-color);
          color: var(--White-color);
        }
      }
    }
  }

  .account-page--orderline .section-body {
    .t-grid {
      border-radius: 12px;
      background-color: transparent;
    }

    .t-grid-header .t-last-header{
      text-align: right;
      min-width: 240px;
    }

    .t-grid-toolbar {
      padding: 1.25rem .75rem;
      background-color: transparent;

      @media screen and (max-width: 767px) {
        display: flex;
        flex-wrap: wrap;

        label{
          flex: 1;
          flex-basis: 100%;
          margin-right: 0;
          margin-bottom: .5rem;
        }

        input{
          flex: 1;
        }
      }
    }

    .order-line-items-row .t-last{
      text-align: right;

      a{
        display: flex;
        background-color: var(--Secondary-light-color);
        padding: .1rem .25rem;
        border-radius: 4px;
        color: var(--Text-color);
        align-items: center;
        white-space: normal;
        word-break: break-word;
        display: inline-block;
        

        &:hover,
        &:focus,
        &:active{
          background: var(--Secondary-dark-color);
          color: var(--White-color);
        }
      }
    }

    .searchLabel{
      white-space: wrap !important;
    }
  }

  @media screen and (max-width: 767px) {
   .orderLineItems .order-line-items-row .t-header:nth-child(2){
      text-wrap: wrap;
    }
  } 

  .account-page--order-details{

    .od_row--title .od_title.title{
      font-size: 2.5rem;
      color: var(--Primary-color);
    }

    #order_details_v2 .od_row--title .buttons{

      a{
        background-color: transparent;
      }

      a.od_print_button{
        border: 1px solid var(--Tertiary-color);
        color: var(--Tertiary-color);

        &:hover{
          background-color: var(--Tertiary-color);
          color: var(--White-color);
        }
      }

      a:last-child{
        border: 1px solid var(--Danger-color);
        color: var(--Danger-color);

        &:hover{
          background-color: var(--Danger-hover-color);
          color: var(--White-color);
        }
      }
    }

    #order_details_v2 .od_row.od_row--billing .od_half_row .od_info_title,
    #order_details_v2 .od_products_title,
    #order_details_v2 .od_order_total .od_total_title,
    .od_total_value{
      font-family: 'CoHeadlineCorpRegular';
      font-weight: 600;
    }

    #order_details_v2 .od_row.od_row--billing .od_half_row,
    #order_details_v2 .od_row.od_row--payment,
    #order_details_v2 .od_row.od_row--products,
    #order_details_v2 .od_row.od_row--price{
      border: 2px solid var(--Grey-light-color);
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      -ms-border-radius: 12px;
      -o-border-radius: 12px;
    }
  }
}

/*------------------------------------*\
    #TOPIC PAGES
\*------------------------------------*/

/* Markets */
.column:has(.hero-image){
  position: relative;

  &>.block,
  &>.block>.is-inline-block,
  &>.block>.is-inline-block>.hero-image,
  &>.block>.is-inline-block>.hero-image>img{
    height: 100%;
  }

  &>.block>.is-inline-block>.hero-image>img{
    object-fit: cover;
  }

  &>.block>.is-inline-block>.hero-image::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .overlay-text {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -100%);
    text-align: center;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    -o-transform: translate(-50%, -100%);

    @media screen and (min-width: 768px) {
      padding-left: 6rem;
      padding-right: 6rem;
    }

    @media  screen and (max-width: 1087px) {
      width: 75%;
    }

    @media  screen and (max-width: 767px) {
      width: 85%;
    }
  }
}

/* small fix */
.page-dynamicproduct-editor .catfish-button.is-small, .page-dynamicproduct-editor .button.is-small {
    padding: 0.5rem;
}
.page-dynamicproduct-editor .MEUIFormField .control .meuiNonLayout, 
.page-dynamicproduct-editor .MEUIFormField .control .zoom-button   {
    height:100%;
}
.page-dynamicproduct-editor .AddImageToField span.no-image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%,-50%);
}
.Script_DynamicUiGeneration_New .fb-background-color-select .colorSelector  {
    min-width: 100%;
}
/* --- CSS Mobile UX ---*/
.Script_DynamicUiGeneration_New .ItemsListBody .itemDetails {
    padding-left: 1rem;
    padding-right: 1rem;
}
.Script_DynamicUiGeneration_New_MobileUX .DynamicUiGeneration-mobile-ui-global {
    position: fixed;
    bottom: 4.5rem;
    z-index: 5;
    max-height: 0px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    -webkit-transition: max-height 0.15s linear;
    -moz-transition: max-height 0.15s linear;
    -o-transition: max-height 0.15s linear;
    transition: max-height 0.15s linear;
    box-shadow: inset 0px -7px 19px -10px rgba(0,0,0,.2);
}
.Script_DynamicUiGeneration_New_MobileUX .DynamicUiGeneration-mobile-ui-global > .columns {
    padding: 1rem;
    padding-bottom: 2rem;
    margin: 0!important;
}
.Script_DynamicUiGeneration_New_MobileUX .DynamicUiGeneration-mobile-ui-global.is-active {
    max-height:70vh;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 5;
    background: #fff;
    text-align: center;
    padding:0rem;
    box-shadow: rgba(0,0,0,.3) 0px 0px 10px;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns {
    padding: 0px;
    margin: 0px;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns > .column {
    padding: 1rem;
    margin: 0px;
    border-bottom: solid 1px #eee;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux-footer .toggle-fieldlist-button {
    border: none;
    background: transparent!important;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux-footer .progress-bar-container {
    display: block;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux-footer .progress-bar {
    position: relative;
    width: 100%;
    height: 1.5rem;
    border-radius: 0.75rem;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux-footer .progress-bar .progress {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    height: 1.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX .select-step-button .field-name {
    max-width: calc(100vw - 10rem)!important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Script_DynamicUiGeneration_New_MobileUX .select-step-button {
    padding: 1rem;
    margin-bottom: -0.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX .column.actions-list {
    overflow: hidden;
    overflow-x: auto;
    border-right: solid 1px #eee;
    box-shadow: inset -7px 0px 26px -13px rgba(0,0,0,.2);
    min-height: 100%;
}
.Script_DynamicUiGeneration_New_MobileUX .column.actions-list.Variable-Input-Container {
    overflow: visible;
    overflow-x: visible;
    text-align: left;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button {
    padding: 0.5rem;
    height: 4rem;
    width: 4rem!important;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.fill_button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.fill_button .check {

}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon {
    display: block;
    margin: 0px!important;    
    height: 1.8rem;
    line-height: 2rem;
    width: 100%;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon + .text {
    font-size: 0.75em;
    font-weight: bold;
    padding-top: 0.3rem;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon .fa-edit {
    margin-left: 0.2em;
}
.Script_DynamicUiGeneration_New .edit-mode-done-button {
    position: fixed;
    top: calc(50vh - 4rem);
    right: 1rem;
}
.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header {
    position: fixed;
    top: 4rem;
    left: 0px;
    width: 100%;
    z-index: 9;
    padding: 0.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX.EditingMode .column.eds-mobile-ux-header {
    top: 0px;
}
.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header span {
    padding: 0rem 1rem;
    display: inline-block;
}
.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header span.orderNR {
    border-right: solid 1px #fff;
}
.Script_DynamicUiGeneration_New_MobileUX .additionalTargetContainer {
    display: none!important;
}
@media screen and (max-width: 600px) {
    .Script_DynamicUiGeneration_New_MobileUX .meuiDateTimePicker+.dropdown-menu button, 
    .Script_DynamicUiGeneration_New_MobileUX .meuiDateTimePicker+[uib-datepicker-popup-wrap] .uib-datepicker-popup.dropdown-menu button, 
    .Script_DynamicUiGeneration_New_MobileUX [uib-datepicker-popup-wrap] .uib-datepicker-popup.dropdown-menu button {
    border: solid 1px #fff;
    padding: 0.7rem;
    font-size: 1rem;
    min-width: 100%;
    height: 3rem;
    border-radius: 5px;
}
}
.Script_DynamicUiGeneration_New_MobileUX .input.is-danger, 
.Script_DynamicUiGeneration_New_MobileUX .catfish-input.is-danger, 
.Script_DynamicUiGeneration_New_MobileUX .catfish-select.is-danger, 
.Script_DynamicUiGeneration_New_MobileUX .textarea.is-danger, .catfish-textarea.is-danger {
    border-color: #CF4646!important;
    background: #f9dcdc!important;
}
.megaedit-preview #addToBasketButton {
    top: 1rem;
    right: 5rem;
}