/* button */
@import url('custom/button.css');

/* textstyles */
@import url('custom/textstyles.css');

/* badge */
@import url('custom/badge.css');

/* alert */
@import url('custom/alert.css');

/* tooltip */
@import url('custom/tooltip.css');


@import url('custom/checkout.css');


@import url('product_page.css');

body {
  overflow-x: hidden !important;
}

.tooltip .tooltip-inner {
    background-color: var(--basic-light-900);
    color: var(--basic-light-100);
    border-radius: 12px;
}

.tooltip.bs-tether-element-attached-bottom .tooltip-inner:before,
.tooltip.tooltip-top .tooltip-inner:before {
    border-top-color: var(--basic-light-900);
}

.tooltip.bs-tether-element-attached-top .tooltip-inner:before,
.tooltip.tooltip-bottom .tooltip-inner:before {
    border-bottom-color: var(--basic-light-900);
}

.tooltip.bs-tether-element-attached-left .tooltip-inner:before,
.tooltip.tooltip-right .tooltip-inner:before {
    border-right-color: var(--basic-light-900);
}
.tooltip.bs-tether-element-attached-right .tooltip-inner:before,
.tooltip.tooltip-left .tooltip-inner:before {
    border-left-color: var(--basic-light-900);
}

body .kuResourceLoader {
  border-radius: unset;
}

body .kuResourceLoader::before,
body .kuResourceLoader::after {
  content: unset;
}

body .kuResourceLoader,
.dots-design-system {
    display: flex;
    width: 50px;
    height: 17px;
    background: radial-gradient(circle closest-side, var(--basic-light-900) 90%, #0000) 0% 50%,
      radial-gradient(circle closest-side, var(--basic-light-900) 90%, #0000) 50% 50%,
      radial-gradient(circle closest-side, var(--basic-light-900) 90%, #0000) 100% 50%;
    background-size: calc(100% / 3) 12px;
    background-repeat: no-repeat;
    animation: dots-design-system 1s infinite linear;
  }

body .kuResourceLoader {
  width: 72px;
  height: 28px;
  background-size: calc(100% / 3) 18px;
  display: none;
}

  @keyframes dots-design-system {
    20% {
      background-position: 0% 0%, 50% 50%, 100% 50%;
    }

    40% {
      background-position: 0% 100%, 50% 0%, 100% 50%;
    }

    60% {
      background-position: 0% 50%, 50% 100%, 100% 0%;
    }

    80% {
      background-position: 0% 50%, 50% 50%, 100% 100%;
    }
  }