body,
.card,
.card-header,
.hero {
  background-color: var(--skin-background-color-1);
  font-family: var(--skin-body-font);
  color: var(--skin-main-text-color-1);
}

.hero {
  border-bottom-color: var(--skin-background-color-1);
}

.main-menu {
  background-color: var(--skin-banner-background-color-1);
}

.banner-color {
  background-color: var(--skin-banner-background-color-1);
}

.header-banner {
  background-color: var(--skin-banner-background-color-2);
  color: var(--skin-banner-text-color-1);
}

.header-banner .close-button .close {
  background-color: var(--skin-primary-color-1);
}

h1.header.page-title,
h1.header.page-title::before {
  background-color: var(--skin-heading-color-1);
  color: var(--skin-heading-color-1-invert);
}

.product-tile {
  background-color: var(--skin-background-color-1);
  border: 10px solid var(--skin-border-color-1);
}

.refinements ul li button {
  color: var(--skin-primary-color-1);
}

.custom-select {
  background-color: var(--skin-selectbox-background-color-1);
  color: var(--skin-selectbox-text-color-1);
}

a {
  color: var(--skin-link-color-1);
}

.price {
  color: var(--skin-price-1);
}

.dropdown-menu,
.dropdown-menu a,
.navbar,
.navbar .nav-item,
.navbar .nav-item a,
.navbar .nav-item.dropdown,
.navbar .nav-item.dropdown a {
  color: var(--skin-menu-color-1);
}
@media (min-width: 769px) {
  .dropdown-menu,
  .dropdown-menu a,
  .navbar,
  .navbar .nav-item,
  .navbar .nav-item a,
  .navbar .nav-item.dropdown,
  .navbar .nav-item.dropdown a {
    color: var(--skin-menu-color-1-invert);
  }
}

.navbar .nav-item.dropdown,
.navbar .nav-item.dropdown .dropdown-menu.show {
  color: var(--skin-selectbox-text-color-1);
}

.navbar .nav-item.dropdown .dropdown-menu.show {
  background-color: var(--skin-selectbox-background-color-1);
}
.navbar .nav-item.dropdown .dropdown-menu.show a,
.navbar .nav-item.dropdown .dropdown-menu.show .nav-item {
  color: var(--skin-selectbox-text-color-1);
}

.nav-item .nav-link:hover,
.nav-item .nav-link:focus,
.nav-item.show .nav-link {
  background-color: var(--skin-menu-color-1-invert);
  color: var(--skin-menu-color-1) !important;
}

.btn-primary {
  background-color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
  color: var(--skin-primary-color-invert-1);
}

.btn-primary:hover {
  color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
  background-color: var(--skin-primary-color-invert-1);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color);
  color: var(--skin-primary-color-invert-1);
  opacity: 0.5;
}

.btn-outline-primary {
  color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
}

.btn-outline-primary:hover {
  color: var(--skin-primary-color-invert-1);
  background-color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--skin-header-font), sans-serif;
}

header ~ #maincontent .container a:not(.btn-primary, .btn-outline-primary) {
  color: var(--skin-primary-color-1);
}

:root {
  /** ==================================================================== **/
  /** Create Custom CSS Variables from "sfra bootstrap override" variables **/
  /** ==================================================================== **/
  --color-white: #fff;
  --color-black: #000;
  --color-blue: #0070d2;
  --color-green: #008827;
  --color-primary: #00a1e0;
  --color-red: #c00;
  --color-success: var(--color-green);
  --color-danger: var(--color-red);
  --color-light-blue: #7ed0ee;
  --color-grey1: #f9f9f9;
  --color-grey2: #eee;
  --color-grey3: #ccc;
  --color-grey4: #999;
  --color-grey5: #666;
  --color-grey6: #444;
  --color-grey7: #222;
  --color-grey8: #333;
  --color-grey-transparent-1: rgba(0, 0, 0, 65%);
  --color-grey-transparent-2: rgba(0, 0, 0, 25%);
  --color-light-gray: var(--color-grey1);
  --color-slightly-darker-gray: var(--color-grey4);
  --color-dark-gray: var(--color-grey6);
  --color-darker-gray: var(--color-grey7);
  --color-horizontal-rule-grey: var(--color-grey3);
  --color-product-number-grey: var(--color-grey3);
  --color-horizontal-border-grey: var(--color-grey4);
  --color-menu-link: var(--color-grey6);
  --color-close-menu-bg: var(--color-grey2);
  --color-link-color: var(--color-dark-gray);
  --color-hr-border-color: var(--color-grey3);
  /** ==================================================================== **/
  /** Define skin named variables here                                    **/
  /** ==================================================================== **/
  --skin-background-color-1: var(--color-gray1);
  --skin-border-color-1: var(--color-white);
  --skin-main-text-color-1: var(--color-gray7);
  --skin-main-text-color-2: var(--color-gray7);
  --skin-menu-color-1: #444;
  --skin-menu-color-1-invert: var(--color-white);
  --skin-menu-color-2: #222;
  --skin-link-color-1: #444;
  --skin-link-color-2: var(--color-blue);
  --skin-primary-color-1: var(--color-primary);
  --skin-primary-color-2: var(--color-primary);
  --skin-primary-color-invert-1: var(--color-white);
  --skin-selectbox-background-color-1: var(--color-white);
  --skin-selectbox-text-color-1: var(--skin-main-text-color-1);
  --skin-banner-background-color-1: #444;
  --skin-banner-background-color-2: #222;
  --skin-banner-text-color-1: var(--color-white);
  --skin-heading-color-1: var(--color-primary);
  --skin-heading-color-1-invert: var(--color-white);
  --skin-price-1: var(--color-gray7);
  --skin-header-font: "Dosis";
  --skin-body-font: var(--font-family-sans-serif);
}

.not-available-color {
  fill: #ED6861;
}

.available-color {
  fill: #18A277;
}

.low-stock-color {
  fill: #ED6861;
}

@font-face {
  font-family: "ubuntu";
  src: url("../../fonts/Ubuntu-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "ubuntuBold";
  src: url("../../fonts/Ubuntu-Bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "ubuntuMedium";
  src: url("../../fonts/Ubuntu-Medium.ttf") format("truetype");
  font-display: swap;
}
:root {
  --skin-body-font: ubuntu;
  --skin-header-font: ubuntuBold;
  --skin-primary-color-1: #1BA2AF;
  --skin-primary-color-2: #1BA2AF;
  --skin-link-color-2: #1BA2AF;
  --skin-main-text-color-1: #333333;
  --skin-main-text-color-2: #333333;
}

#maincontent {
  background-color: white;
  padding-top: 16px;
  padding-bottom: 16px;
  overflow: hidden;
}
#maincontent:has(.cart-main-content) {
  background-color: #F5FAFB;
}
#maincontent:has(.checkout-content) {
  background-color: #F5FAFB;
}
#maincontent .main-container,
#maincontent .main-hero-banner.container {
  padding: 0 16px;
}
#maincontent .banner-content.container {
  padding: 0 16px 16px;
}
#maincontent .main-hero-banner,
#maincontent .category-search-banner {
  border-radius: 24px;
}
#maincontent .main-hero-banner .hero-image,
#maincontent .main-hero-banner.hero-image.default-banner,
#maincontent .card.category-card,
#maincontent .promo-banner-1,
#maincontent .promo-grid-element,
#maincontent .custom-slick-slider .image-container,
#maincontent .img_producto_container,
#maincontent .hub-page-banner,
#maincontent [class$=-contentAssetLinker],
#maincontent figure,
#maincontent picture {
  border-radius: 24px;
}
#maincontent .main-hero-banner .hero-image img,
#maincontent .main-hero-banner.hero-image.default-banner img,
#maincontent .card.category-card img,
#maincontent .promo-banner-1 img,
#maincontent .promo-grid-element img,
#maincontent .custom-slick-slider .image-container img,
#maincontent .img_producto_container img,
#maincontent .hub-page-banner img,
#maincontent [class$=-contentAssetLinker] img,
#maincontent figure img,
#maincontent picture img {
  border-radius: inherit;
}
#maincontent:not(:has(div#shopListingPage)):has(div.no-results) div.listing-categories {
  display: none;
}

.disabled {
  background: #e9ecef;
  pointer-events: none;
}

.greytemplate {
  background-color: #F7F8FA;
}

.md-button {
  max-width: 150px;
}

.button-new-address {
  display: inline-block;
}

.no-address-container {
  padding: 80px 0;
}

.title-noaddress {
  font-size: 24px;
  line-height: 28px;
  padding: 17px 0;
}

.custom-select {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path stroke='black' fill='black' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat right 0.75rem top 0.8rem/14px 14px;
  border-radius: 20px;
  position: relative;
  font-weight: 500;
  padding-left: 25px;
  border-color: #E1E6ED;
  font-family: ubuntuMedium;
}

button:focus {
  outline: none;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle,
.btn-light:hover {
  background: unset;
}

.visually-hidden {
  display: none;
}

strong {
  font-family: ubuntuBold;
}

.slick-container {
  max-width: 1130px;
  margin: 0 auto;
}

.card-color-yellow {
  background-color: #ECD765;
}

.card-color-green {
  background-color: #38ab46;
}

.card-color-blue {
  background-color: #1BA2AF;
}

.card-color-purple {
  background-color: #bf36af;
}

.card-color-orange {
  background-color: #F47324;
}

.container {
  max-width: 1432px !important;
  padding: 0;
  margin: auto;
}
.container .row {
  margin: 0;
}

.general-banner {
  padding: 16px;
}

.brand {
  text-align: left;
}

.custom-select-label {
  color: #6d7078;
  font-weight: 500;
  position: absolute;
  top: -10px;
  left: 35px;
  font-size: 0.83rem;
  z-index: 1;
  background-color: #fff;
  padding: 0 5px;
}

.addressSelector {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path stroke='black' fill='black' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat right 0.75rem top 0.8rem/14px 14px;
  border-radius: 20px;
  position: relative;
  font-weight: 500;
  padding-left: 25px;
  border-color: #E1E6ED;
  font-family: ubuntuMedium;
}

.form-control {
  border-radius: 20px;
  padding: 0 30px 0 26px;
  text-overflow: ellipsis;
}
.form-control.is-invalid {
  border-color: #C55A68;
}
.form-control.is-invalid:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: #C55A68;
}

.form-control-label.custom-address,
.form-control-label.floating-label {
  color: #6d7078;
  font-weight: 500;
  position: absolute;
  top: -10px;
  left: 24px;
  font-size: 0.83rem;
  z-index: 1;
  background-color: white;
  padding: 0 5px;
  font-size: 14px;
}

.form-control.is-invalid ~ div > .invalid-feedback {
  display: block;
}

.example-field {
  font-size: 14px;
}

.select-container {
  position: relative;
}

a:hover {
  text-decoration: none;
}

.btn-primary {
  background-color: #1ba2af;
  color: white !important;
  border-radius: 20px;
  padding: 13px 28px;
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  font-family: ubuntuBold;
  border: none;
}
@media (max-width: 768.98px) {
  .btn-primary {
    padding: 12px 20px;
  }
}
.btn-primary:focus {
  color: white !important;
  border-color: #0D8B9A !important;
  background-color: #0D8B9A !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-primary:hover {
  color: white;
  border-color: #0D8B9A;
  background-color: #0D8B9A;
  text-decoration: none;
}
.btn-primary:active {
  background-color: #1ba2af !important;
}
.btn-primary:not(:disabled):not(.disabled):active:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-primary.disabled {
  color: #58595B !important;
  background-color: #E0E5EC;
}
.btn-primary.disabled:hover {
  cursor: not-allowed;
}

.btn-secondary {
  background-color: #363E54;
  color: #FFFFFF !important;
  border-radius: 20px;
  padding: 12px 28px;
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  font-family: ubuntuBold;
  display: inline-block;
  border: none;
}
@media (max-width: 768.98px) {
  .btn-secondary {
    padding: 12px 20px;
  }
}
.btn-secondary:focus {
  color: #FFFFFF !important;
  border: 1px solid #22283B !important;
  background-color: #22283B !important;
  -webkit-box-shadow: 0 0 transparent !important;
          box-shadow: 0 0 transparent !important;
}
.btn-secondary:hover {
  color: #FFFFFF;
  text-decoration: none;
  border-color: #22283B;
  background-color: #22283B;
}
.btn-secondary:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-secondary:active {
  background-color: #363E54 !important;
}
.btn-secondary.disabled {
  color: #58595B !important;
  background-color: #E0E5EC;
}
.btn-secondary.disabled:hover {
  cursor: not-allowed;
}

.btn-outline-primary {
  color: #363E54;
  border: 1px solid #363E54;
  background-color: transparent;
  padding: 13px 28px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 16px;
  line-height: 18px;
}
@media (max-width: 768.98px) {
  .btn-outline-primary {
    font-size: 14px;
    padding: 12px 20px;
  }
}
.btn-outline-primary:disabled {
  color: #58595B;
  opacity: 1;
  background-color: #E0E5EC;
  border: none;
}
.btn-outline-primary:disabled:hover, .btn-outline-primary:disabled:active {
  color: #58595B !important;
  background-color: #E0E5EC !important;
}
.btn-outline-primary:active {
  color: #363E54 !important;
  background-color: transparent !important;
  border-color: #363E54 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.btn-outline-primary:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-outline-primary:hover {
  color: #22283B;
  background-color: transparent;
  border-color: #22283B;
}

.btn-outline-blue {
  border-radius: 20px;
  padding: 13px 28px;
  font-size: 16px;
  line-height: 17px;
  font-weight: bold;
  font-family: ubuntuBold;
  color: #1ba2af !important;
  background-color: transparent !important;
  border: 1px solid #1ba2af;
}
@media (max-width: 768.98px) {
  .btn-outline-blue {
    padding: 12px 20px;
  }
}
.btn-outline-blue:hover {
  color: #0D8B9A !important;
  border: 1px solid #1ba2af;
  text-decoration: none;
}
.btn-outline-blue:focus, .btn-outline-blue :active {
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #0D8B9A !important;
  border: 1px solid #1ba2af;
  background-color: white !important;
}

.container-thankyou .btn-primary {
  max-width: 150px;
  display: inline;
}

.link-primary {
  color: #1ba2af;
}
.link-primary:hover {
  color: #0D8B9A;
  text-decoration: none;
}

.badge-primary {
  background-color: #1ba2af;
}

a.normal {
  text-decoration: none;
}

.action-link {
  color: #1ba2af;
}

.modal-dialog {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 544px) {
  .modal-dialog {
    max-width: 460px;
  }
  #returnModal .modal-dialog, #returnDownloadModal .modal-dialog, #createGiftReturnCardModal .modal-dialog, #giftReturnCardDetailsModal .modal-dialog {
    max-width: 740px;
  }
}
@media (max-width: 768.98px) {
  .modal-dialog {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin: 20px;
  }
}

.modal-header {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: sticky;
  top: 0;
  background-color: white;
  border: none;
  padding: 0 0 20px;
  z-index: 2;
  font-family: ubuntuBold;
  font-size: 20px;
  color: #333333;
}
.modal-header .close:hover {
  cursor: pointer;
}

.modal-footer {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: sticky;
  bottom: 0;
  background-color: #fff;
  border: none;
  padding: 20px 0 0;
  z-index: 1;
}
.modal-footer .container {
  margin-left: 0;
  width: 100%;
  margin-right: 0;
}
.modal-footer > :not(:first-child) {
  margin-left: 0;
}
.modal-footer > :not(:last-child) {
  margin-right: 0;
}
@media (max-width: 768.98px) {
  .modal-footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
  }
  .modal-footer button {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.modal-content {
  padding: 40px;
  border-radius: 10px;
  border: none;
  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 10px 7px -3px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 10px 7px -3px;
}
@media (max-width: 768.98px) {
  .modal-content {
    padding: 20px;
  }
}

.modal-body {
  padding-left: 0;
  padding-right: 0;
  font-size: 16px;
  line-height: 18px;
}
.modal-body .product-to-remove {
  margin-top: 15px;
}
@media (min-width: 544px) {
  .modal-body {
    padding-bottom: 8px;
  }
}

.modal-header button.close {
  padding: 9px 10px 0;
  font-size: 36px;
  color: black;
  font-weight: normal;
  opacity: 1;
}

.modal-title {
  font-size: 24px;
  line-height: 28px;
}

/*form fields*/
.address-form .save-btn {
  padding-right: 0;
}
.address-form .cancel-btn {
  padding-left: 0;
}
.address-form .cancel-btn:focus {
  border: 1px solid black;
  color: black;
  background-color: white;
}

.form-group {
  position: relative;
  width: 100%;
}
.form-group.required {
  display: inline-block;
}
.form-group.required .form-control-label::before {
  content: "";
}
.form-group.required .form-control-label::after {
  content: "*";
  display: inline;
  padding-right: 10px;
}

.storepage {
  max-width: 100%;
  margin: 0;
}

@media (max-width: 1200px) and (min-width: 1100px) {
  .storepage {
    max-width: 100%;
  }
}
@media (max-width: 1099px) {
  .storepage {
    width: 100%;
  }
}
.form-control-label-top {
  position: absolute;
  display: inline-block;
  top: 8px;
  left: 10px;
  display: inline-block;
}

.label-animate .form-control-label-top {
  top: -6px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  font-size: 12px;
  color: #007C92;
}

.label-animate .form-control-label-top:before {
  content: "";
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 6px;
  border-top: solid 1px;
  border-top-color: #007C92;
  min-width: 10px;
  height: 8px;
  pointer-events: none;
  -webkit-box-shadow: inset 0 1px #007c92;
          box-shadow: inset 0 1px #007c92;
  -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
  margin-right: 4px;
  border-left: solid 1px transparent;
  border-radius: 4px 0;
}

.label-animate .form-control-label-top:after {
  content: "";
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 10px;
  border-top: solid 1px;
  border-top-color: #007C92;
  min-width: 10px;
  height: 8px;
  pointer-events: none;
  -webkit-box-shadow: inset 0 1px #007c92;
          box-shadow: inset 0 1px #007c92;
  -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-left: 4px;
  border-right: solid 1px transparent;
  border-radius: 0 4px;
  border-radius: 0 20px;
}

.label-animate.filled .form-control-label-top {
  color: #666666;
}

.label-animate.filled .form-control-label-top:before {
  border-top-color: #ced4da;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.label-animate.filled .form-control-label-top:after {
  border-top-color: #ced4da;
  -webkit-box-shadow: none;
          box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

.form-input-top {
  border-bottom: 1px solid #EBEBEB;
  padding: 10px 0;
}

.form-label-top {
  position: absolute;
  display: inline-block;
  top: 9px;
  left: 24px;
  display: inline-block;
}

.form-control {
  font-size: 16px;
  line-height: 24px;
  outline: 0;
  width: 100%;
  max-width: 100%;
  text-align: left;
  margin: 0;
  border-radius: 20px;
  color: #333333;
}
@media (max-width: 991.98px) {
  .form-control {
    font-size: 14px;
  }
}

input.form-control {
  padding: 14px 25px;
}

.label-animate .form-label-top {
  top: -6px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  font-size: 12px;
}

.label-animate .form-control {
  border-top: 1px solid transparent;
}

.label-animate .form-control:focus {
  border-top: 1px solid transparent;
}

.form-control:focus {
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: #ced4da;
}

.label-animate .form-label-top:before {
  content: "";
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 6px;
  border-top: solid 1px;
  border-top-color: #E1E6ED;
  min-width: 18px;
  height: 19px;
  pointer-events: none;
  -webkit-box-shadow: inset 0 1px #E1E6ED;
          box-shadow: inset 0 1px #E1E6ED;
  -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
  margin-right: 4px;
  border-left: solid 1px transparent;
  border-radius: 20px 0;
}

.label-animate .form-label-top:after {
  content: "";
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 6px;
  border-top: solid 1px;
  border-top-color: #E1E6ED;
  min-width: 10px;
  height: 19px;
  pointer-events: none;
  -webkit-box-shadow: inset 0 1px #E1E6ED;
          box-shadow: inset 0 1px #E1E6ED;
  -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-left: 4px;
  border-right: solid 1px transparent;
  border-radius: 0 20px;
}

.label-animate.filled .form-label-top {
  color: #5B6A7E;
  line-height: 13px;
}

.label-animate.filled .form-label-top:before {
  border-top-color: #E1E6ED;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.label-animate.filled .form-label-top:after {
  border-top-color: #666666;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-top-color: #E1E6ED;
}

.label-animate.filled #promo-input-text.disabled ~ .form-label-top:before {
  opacity: 0.5;
}

.label-animate.filled #promo-input-text.disabled ~ .form-label-top:after {
  opacity: 0.5;
}

.form-card .form-group {
  margin-bottom: 26px;
  width: 100%;
  padding-top: 0px;
  position: relative;
}

.form-card .form-group label {
  color: #6d7078;
  font-weight: 500;
  position: absolute;
  top: 30px;
  left: 20px;
  font-size: 0.83rem;
  z-index: 1;
  background-color: white;
  padding: 0 5px;
  top: -9px;
  height: 13px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.form-card .card-body {
  padding: 40px;
}

.card-body .form-control {
  border: 1px solid #E1E6ED;
}

.form-card .card-main-title {
  padding: 40px 0;
  text-align: center;
  font-size: 30px;
  line-height: 35px;
}

.form-card .card {
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  border-radius: 20px;
  background-color: white;
}

/*form fields*/
.nav-tabs .nav-link.active {
  border-bottom: 0.188em solid #1ba2af;
}

.refinement-category li button {
  text-align: left;
}

.arrow-back {
  content: url("../../images/back_icon.svg");
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 2px;
  height: 12px;
}
@media (max-width: 768.98px) {
  .arrow-back {
    height: 10px;
  }
}

.c-threads__header {
  color: #333 !important;
}

.container-messages .table {
  padding: 20px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  opacity: 1;
  border-radius: 20px;
}

.c-threads__row:not(:last-child) {
  border-bottom: 1px solid #C4CAD3;
}

.c-threads__row {
  padding: 13px 0;
}

/* dropdown UI start */
.custom-select.is-invalid + .select2-container--default .select2-selection {
  border-color: #c00;
}

.checkout-container .select2-container {
  min-width: 100%;
  max-width: 100%;
}

.select2-results__option {
  min-height: 35px;
  font-size: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #333333;
  font-size: 16px;
  line-height: 30px;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
  padding: 6px 15px;
  height: 43px;
  border-radius: 20px;
  border-color: #E1E6ED;
}
@media (max-width: 768.98px) {
  .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    padding: 7px 15px;
    height: 46px;
  }
}
.select2-container--default .select2-selection--single {
  padding: 6px 15px;
  height: 43px;
  border-radius: 20px;
  border-color: #E1E6ED;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 35px;
  right: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #333333 transparent transparent transparent;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  margin-top: 0px;
}
@media (max-width: 768.98px) {
  .select2-container--default .select2-selection--single {
    padding: 7px 15px;
    height: 46px;
  }
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
  border-radius: 20px;
  border-color: #1ba2af;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #333333 transparent;
  border-width: 0 6px 7px 6px;
}
.select2-container--default.select2-container--open .select2-dropdown--below, .select2-container--default.select2-container--open .select2-dropdown--above {
  border-radius: 20px;
  padding: 20px 0;
  border: 1px solid #E1E6ED;
}
.select2-container--default .select2-results__option {
  padding: 6px 20px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #1ba2af;
}
.select2-container--default .select2-results__option--selected {
  background-color: #DCEDED;
}
.select2-container--default .select2-results > .select2-results__options {
  scrollbar-width: thin;
  max-height: 250px;
}

/* custom dropdown selection end*/
/* dropdown UI end */
h1, h2, h3, h4, h5, h6 {
  font-family: ubuntuBold;
}

.container-messages .table {
  padding: 30px;
}

/* error messages UI */
.alert {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 8px;
  font-size: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translate(0%, 50%);
          transform: translate(0%, 50%);
}
.alert img {
  width: 16px;
  height: 16px;
}

.container > .alert, .popover .alert {
  -webkit-transform: none !important;
          transform: none !important;
}

.alert-danger {
  background-color: #FCE8E7;
  border-radius: 20px;
  color: #C55A68;
  border: none;
}

#CookiebotWidget, .grecaptcha-badge {
  display: none;
}

.not-clickable {
  pointer-events: none;
}

.non-returnable-label {
  font-size: 12px;
  color: #1ba2af;
}

.loader {
  content: url("../../images/custom-loader.svg");
  display: none;
  -ms-flex-item-align: center;
      align-self: center;
  max-width: 50px;
  max-height: 50px;
}
.loader.show {
  display: unset;
}
.loader.show-listing {
  display: unset;
  margin-bottom: 30px;
}

.loader-page-level {
  content: url("../../images/custom-loader.svg");
  position: sticky;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50px;
}

.loader-element-level {
  content: url("../../images/custom-loader.svg");
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50px;
}

html {
  font-size: 0.875rem;
}

@media (min-width: 544px) {
  html {
    font-size: 1rem;
  }
}
@media (min-width: 769px) {
  html {
    font-size: 1.125rem;
  }
}
.non-returnable-label {
  font-size: 12px;
  color: #1ba2af;
}

/* collapsible arrows */
.collapsible-xl .title, .collapsible-xl .shipment-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.collapsible-xl .title::after, .collapsible-xl .shipment-title::after {
  content: unset;
}
.collapsible-xl:hover {
  cursor: pointer;
}
.collapsible-xl .toggle-image {
  background-image: url("../../images/arrow-up-toggle.svg");
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  background-repeat: no-repeat;
  width: 14px;
  background-size: 14px;
  height: 8px;
}
.collapsible-xl.active .title::after {
  content: unset;
}
.collapsible-xl.active .toggle-image {
  background-image: url("../../images/arrow-up-toggle.svg");
  background-repeat: no-repeat;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  width: 14px;
  background-size: 14px;
  height: 8px;
}

/* carousel arrows */
.carousel-control-prev {
  opacity: 1;
}

.carousel-control-next {
  opacity: 1;
}

.experience-component .carousel-control-prev {
  left: 32px;
}
.experience-component .carousel-control-next {
  right: 32px;
}
@media (max-width: 768.98px) {
  .experience-component .carousel-control-prev {
    left: 16px;
  }
  .experience-component .carousel-control-next {
    right: 16px;
  }
}

.carousel-control-prev-icon {
  background-image: url("../../images/arrow-white-left.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 8px;
  height: 14px;
}

.carousel-control-next-icon {
  background-image: url("../../images/arrow-white-right.svg");
  width: 8px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: contain;
}

.slick-prev:not(.slick-disabled) {
  background-image: url("../../images/arrow-strips-left.svg");
  background-repeat: no-repeat;
}
.slick-prev:not(.slick-disabled):hover, .slick-prev:not(.slick-disabled):focus {
  background-image: url("../../images/arrow-strips-left.svg");
  background-repeat: no-repeat;
}
.slick-prev::before {
  content: "";
}
.slick-prev.slick-disabled {
  background-image: url("../../images/arrow-strips-left-disabled.svg");
  background-repeat: no-repeat;
}
.slick-prev.slick-disabled:hover {
  cursor: auto;
}

.slick-next:not(.slick-disabled) {
  background-image: url("../../images/arrow-strips-right.svg");
  background-repeat: no-repeat;
}
.slick-next:not(.slick-disabled):hover, .slick-next:not(.slick-disabled):focus {
  background-image: url("../../images/arrow-strips-right.svg");
  background-repeat: no-repeat;
}
.slick-next::before {
  content: "";
}
.slick-next.slick-disabled {
  background-image: url("../../images/arrow-strips-right-disabled.svg");
  background-repeat: no-repeat;
}
.slick-next.slick-disabled:hover {
  cursor: auto;
}

.carousel-control-prev:focus,
.carousel-control-next:focus {
  outline: none !important;
}
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  outline: none !important;
}

:focus-visible {
  outline: none;
}

@media (min-width: 1432px) {
  .d-xxl-none {
    display: none;
  }
  .d-xxl-block {
    display: block !important;
  }
}
figure {
  height: 100%;
  margin: 0;
}