/* fonts */
@font-face {
  font-family: avenirBlack;
  src: url(../assets/fonts/Avenir-Black-03.ttf);
}
@font-face {
  font-family: avenir;
  src: url(../assets/fonts/Avenir-Book-01.ttf);
}
@font-face {
  font-family: avenirLight;
  src: url(../assets/fonts/Avenir-Light-07.ttf);
}
@font-face {
  font-family: avenirMedium;
  src: url(../assets/fonts/Avenir-Medium-09.ttf);
}
@font-face {
  font-family: avenirHeavy;
  src: url(../assets/fonts/Avenir-Heavy-05.ttf);
}

@font-face {
  font-family: LoraSemiBold;
  src: url(../assets/fonts/Lora-SemiBold.ttf);
}

:root {
  font-family: avenirMedium, 'Segoe UI', sans-serif;
}

.avenirBlack {
  font-family: avenirBlack, 'Segoe UI', sans-serif;
}

.LoraSemiBold {
  font-family: LoraSemiBold, 'Segoe UI', sans-serif;
}
.avenirMedium {
  font-family: avenirMedium, 'Segoe UI', sans-serif;
}
.avenirHeavy {
  font-family: avenirHeavy, 'Segoe UI', sans-serif;
}

.f40 {
  font-size: 17px;
}

.f30 {
  font-size: 15px;
}

.f29 {
  font-size: 29px !important;
}

.f24 {
  font-size: 14px;
}

.f25 {
  font-size: 20px;
}

.f35 {
  font-size: 35px;
}

.f17 {
  font-size: 12px !important;
}

.f20 {
  font-size: 20px !important;
}

.f19 {
  font-size: 19px !important;
}

.f18 {
  font-size: 18px !important;
}

.f30 {
  font-size: 18px !important;
}

.f15 {
  font-size: 15px !important;
}

.f14 {
  font-size: 14px !important;
}

.f13 {
  font-size: 13px !important;
}

.f12 {
  font-size: 12px !important;
}

.f11 {
  font-size: 11px !important;
}

.f10 {
  font-size: 10px !important;
}

.f7 {
  font-size: 7px;
}

body {
  min-width: 320px;
  min-height: 100vh;
}

.btn:focus {
  outline: 0;
  box-shadow: none !important;
}

/* sizes */
.inheritWidth {
  width: inherit;
}

.imgIcons {
  height: 100px;
}

.productSvgImg {
  height: 15px;
}

.py-8rem {
  padding-top: 8rem;
  padding-bottom: 8rem;
}


.starIcon {
  width: 1rem;
  display: inline-block;
}

.storeImg {
  width: 90px;
  height: 90px;
}

.px-6 {
  padding: 1.5rem;
}

.orderImgs {
  width: 73px;
  height: 35px;
}

.smallLogo {
  width: 160px;
  height: 50px;
}

/* colors */
.mainColor {
  color: #114446 !important;
}

.redColor {
  color: #ef6d6b;
}

.greenColor {
  color: #09847a !important;
}

.lightGreenColor {
  color: #62B37C !important;
}

.bestseller {
  color: #B37574
}

.bestSellerContainer {
  background: rgb(179 117 116 / 15%) 0% 0% no-repeat padding-box;
  border-radius: 11px;
}

.black,
.black:hover {
  color: #01100f !important;
}

.blackColor {
  color: #000;
}

.greyColor {
  color: #738987;
}

.whiteColor {
  color: #eaf2f1;
}

.whiterColor {
  color: #fff !important;
}

.policyImg {
  width: 168px;
}

.darkGreen {
  color: #043d38;
}

/* buttons */
.moreBtn {
  background-color: #09847a;
  border-radius: 4px !important;
  opacity: 1;
  font-family: avenirHeavy, 'Segoe UI', sans-serif;
  color: #ffffff;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.noteBtn {
  border-radius: 50% !important;
}

.shareBtn {
  border: 1px solid #09847a !important;
  border-radius: 20px !important;
  opacity: 1 !important;
}

.downloadBtn {
  border: 2px solid #09847a !important;
  border-radius: 4px !important;
  opacity: 1;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.backBtn {
  border: 2px solid #ffffff !important;
  border-radius: 4px !important;
  opacity: 1;
}

.greyBtn {
  background-color: #738987 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
}

.editBtn {
  background-color: #eaf2f1 !important;
  border-radius: 18px !important;
  opacity: 1;
  padding-right: 1.75rem !important;
  padding-left: 1.75rem !important;
}

.btn-main-color {
  border: 1px solid #09847a !important;
  border-radius: 5px !important;
  background-color: #09847a !important;
}

.backgroundMainColor {
  background-color: #114446 !important;
}

.backgroundSecondColor {
  background-color: #09847A !important;
}

.whiteColorImportant {
  color: #eaf2f1 !important;
}

.backgroundGrey {
  background-color: #738987 !important;
}

.backgroundGreen {
  background-color: #114446;
}

.backgroundLightGreen {
  background-color: #62B37C !important;
}

.footer {
  background-color: #114446;
}

/* background */
.greyBackground {
  background-color: #eaf2f1;
}

/* reset */
.dropdown-toggle::after {
  display: none !important;
}

/* media query  */
@media (min-width: 768px) {
  .f40 {
    font-size: 40px;
  }

  .f24 {
    font-size: 24px;
  }

  .f17 {
    font-size: 17px !important;
  }

  .f117 {
    font-size: 17px !important;
  }

  .f-17 {
    font-size: 17px !important;
  }

  .f30 {
    font-size: 30px !important;
  }

  .f25 {
    font-size: 25px;
  }

  .borderRight {
    border-right: 1px solid #738987;
  }
}

@media (min-width: 576px) {
  .dialog-sm {
    max-width: 396px !important;
  }

  .container-min-width {
    min-width: 320px;
  }
}

@media (max-width: 1439.98px) {
  .main {
    flex-direction: column
  }
}

@media (min-width: 992px) {
  .greenBorderRight {
    border-right: 1px solid #09847a;
  }

  .product-img-height {
    width: 650px;
    height: 650px;
  }
}

@media (max-width: 991.98px) {
  .logo {
    width: 10rem;
  }
}

@media (min-width: 1200px) {
  .contaier-max-width {
    max-width: 1440px;
    margin: auto;
  }

  .px-6 {
    padding-right: 7rem !important;
    padding-left: 7rem !important;
  }
}

@media (max-width: 767.98px) {
  .carousel-caption {
    padding-bottom: unset !important;
  }

  .downloadImgs {
    width: 90px;
  }

  .f19 {
    font-size: 15px !important;
  }

  .steps {
    flex-direction: column;
  }

  .stepperIcon {
    width: 15px !important;
    height: 15px !important;
  }

  .steps .step:last-child svg {
    height: 19px !important;
    width: 19px !important;
  }
}

.borderBottom {
  border-bottom: 1px solid #eaf2f1;
  opacity: 1;
}

.borderTopBottom {
  border-top: 1px solid #eaf2f1;
  border-bottom: 1px solid #eaf2f1;
  opacity: 1;
}

/* general */
.carousel-caption {
  right: unset !important;
  left: 5% !important;
  text-align: justify !important;
}

.py-20 {
  padding-top: 15rem;
  padding-bottom: 15rem;
}

.nav-pills .nav-link {
  border-radius: unset !important;
  transition: box-shadow 0.12s ease-in-out;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
  color: #09847a !important;
  box-shadow: inset 0 -2px 0 0 #09847a;
  background-color: unset !important;
}

.nav-pills .nav-link span {
  display: block;
  transition: transform 0.12s ease-in-out;
}

.nav-pills .nav-link:hover span,
.nav-pills .nav-link.active span {
  transform: scale(0.95);
}

.nav-pills {
  color: #09847a !important;
}

::placeholder,
select.category {
  color: #738987 !important;
}

select.option {
  color: #01100f !important;
}

option {
  color: #01100f;
}

select {
  -webkit-appearance: none !important;
  background-image: url("../assets/images/icons/Downarrowsmall.svg") !important;
  background-repeat: no-repeat !important;
  background-position-x: 98% !important;
  background-position-y: 50% !important;
}

html[dir="rtl"] select,
html[dir="rtl"] input {
  background-position-x: 2% !important;
}


input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #738987;
  border-radius: 4px;
  opacity: 1;
  display: inline-block;
  padding: 10px 18px;
  cursor: pointer;
}

.backgrown {
  background-image: url(../assets/images/icons/crown.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

/* checkbox style  */
.customCheckboxContainer {
  display: flex;
  flex-wrap: wrap;
}

.customCheckbox input {
  display: none;
}

.customCheckbox label {
  padding: 6px 25px;
  color: #738987;
  border: 1px solid #738987;
  border-radius: 5px;

  cursor: pointer;
}

.customCheckbox input:checked~label {
  color: #fff;
  background-color: #09847A;
  border-color: #09847A;
}

/*
label.selected:after {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 11px;
  width: 8px;
  height: 16px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

label.selected:before {
  background-color: #09847a;
  border: 1px solid #ffffff !important;
}
*/

.productImg,
.productImgHeight {
  width: 100%;
  height: 100%;
  box-shadow: 1px 1px 3px #00000029;
  border-radius: 20px;
  opacity: 1;
  object-fit: cover;
}

.page-link {
  border: 1px solid #738987 !important;
  color: #738987 !important;
}

.page-item.active .page-link {
  color: #fff !important;
  background-color: #09847a !important;
  border: 1px solid #09847a !important;
}

.borderRadius {
  border-radius: 25px !important;
}

.preview,
.easyzoom-flyout {
  box-shadow: 1px 1px 3px #00000029;
  border-radius: 20px;
  max-height: 900px !important;
}

.easyzoom-flyout>img {
  min-width: 100%;
}

.easyzoom--overlay img {
  cursor: url(../assets/images/icons/cursor-zoom.png), auto !important;
}

.prev {
  top: -4%;
  right: 43%;
  cursor: pointer !important;
}

.next {
  bottom: -4%;
  right: 45%;
  cursor: pointer;
}

.prev,
.next svg {
  fill: #09847a;
}

.arrow {
  display: none !important;
}

.popverText {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 12em;
  white-space: nowrap;
}

/* .translate {
  transform: translate3d(1140px, 260px, 0px);
  background-color: red;
} */

a {
  text-decoration: unset !important;
}

.modal-dialog-style {
  position: fixed !important;
  max-width: 100% !important;
  width: 100% !important;
  bottom: -1px;
  /* right: -1px;
    left: -1px; */
  margin: 0 !important;
}

.modal-content-style {
  border-radius: 20px 20px 0 0 !important;
  border: unset !important;
}

.animate-bottom {
  position: relative;
  animation: animatebottom 1s;
}

.orderCard {
  border: 1px solid #eaf2f1;
  border-radius: 5px;
  opacity: 1;
}

/* animation */
@keyframes animatebottom {
  from {
    bottom: -300px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

/* the stepper  */
.steps {
  overflow-x: unset !important;
}

.step-circle {
  width: 40px !important;
  height: 40px !important;
  border: unset !important;
}

.step-active .step-circle {
  background-color: unset !important;
  border-color: unset !important;
}

.step-active .step-circle::before {
  color: #09847a;
  background-color: #09847a !important;
}

.step-cancelled .step-circle::before {
  background-color: #ef6d6b !important;
}

.step-circle::before {
  height: 4px !important;
  color: #d9eae8;
  width: calc(14rem + 1rem - 1.5rem) !important;
  left: 10px;
}

.step-active .step-text {
  color: #09847a !important;
}

.step-content {
  max-width: unset !important;
  width: 14rem !important;
}

@media (max-width: 991.98px) {
  .step-circle::before {
    width: calc(11rem + 1rem - 1.5rem) !important;
    height: 4px !important;
    left: 10px !important;
  }

  .step-content {
    width: 11rem !important;
  }
}

@media (max-width: 767.98px) {
  .steps .step:first-child {
    margin-left: unset !important;
  }

  .step-circle::before {
    height: calc(5rem + 1rem - 2.5rem) !important;
    width: 4px !important;
    left: 22.5px !important;
    top: -9px !important;
    border-radius: 4px;
  }

  .step-content {
    flex-direction: unset !important;
    min-width: 100% !important;
  }
}

.step-active svg {
  fill: #09847a !important;
}

.step-cancelled svg {
  fill: #ef6d6b !important;
}

.step-content svg {
  fill: #738987;
}

.stepperIcon {
  width: 50px;
  height: 50px;
  z-index: 2;
}

.modal-content {
  border: unset !important;
  border-radius: 5px !important;
}

.dots {
  flex: 1;
  border-bottom: 2px dotted #738987;
}

html {
  scroll-behavior: revert !important;
}

.largeFormControl {
  padding: 1.438rem 1rem !important;
}

.largeSelect {
  height: calc(2em + 1rem + 2px) !important
}

.customOption {
  background-color: #eaf2f1 !important;
}

.page-link.disabled {
  cursor: default !important;
  pointer-events: none !important;
}

.not-connected {
  fill: #738987 !important;
  color: #738987 !important;
}

.connected {
  fill: #09847A !important;
  color: #09847A !important;
}

[type=radio]+svg {
  cursor: pointer;
}

.starSvg {
  stroke: #738987
}

.starSvg path text {
  fill: #738987
}

[type=radio]:checked+svg g {
  stroke: #09847a !important
}

[type=radio]:checked+svg text,
[type=radio]:checked+svg path {
  fill: #09847a !important;
  stroke: #09847a !important
}

.customAlert {
  position: absolute;
  z-index: 1000;
  right: 0;
  left: 0;

  animation: alert-slide-down 0.5s ease-in-out forwards;
}

@keyframes alert-slide-down {
  from {
    opacity: 0;
    top: -130px;
  }

  to {
    opacity: 1;
    top: 0;
  }
}

label.error,
label.is-invalid {
  font-size: 12px !important;
  font-family: avenirMedium !important;
  color: #ef6d6b !important
}

.maxWidth {
  max-width: 100%;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  background-image: url(../assets/images/icons/active.svg) !important
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  background-image: url(../assets/images/icons/inactive.svg) !important
}

.form-control,
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border: 1px solid #D9EAE8 !important;
  box-shadow: unset !important
}

.step-content {
  padding-right: unset !important
}

.steps .step:last-child {
  /* margin-right: unset !important */
}

.removed-item {
  -webkit-animation: removed-item-animation .6s cubic-bezier(.55, -0.04, .91, .94) forwards;
  -o-animation: removed-item-animation .6s cubic-bezier(.55, -0.04, .91, .94) forwards;
  animation: removed-item-animation .6s cubic-bezier(.55, -0.04, .91, .94) forwards;
  display: none !important
}

@keyframes removed-item-animation {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0
  }
}

@-webkit-keyframes removed-item-animation {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0
  }
}

@-o-keyframes removed-item-animation {
  from {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
  }

  to {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0
  }
}

.redBorder {
  border: 1px solid #EF6D6B !important;

}

/* .dropdown-toggle,
.dropdown-menu {
  border: 1px solid #FFFFFF !important;
  opacity: 1;
}

.dropdown-item:active,
.dropdown-item:focus,
.dropdown-menu,
.dropdown-item {
  background-color: #01100f !important
}

.dropdown-item {
  color: #fff !important
}
*/

.text-shadow-small {
  text-shadow: 0 .1rem 1rem;
}

.form-control {
  height: calc(2em + .75rem + 2px) !important;
}

.basket-min-width {
  min-width: 421px;
}

.basketProductImageWidth {
  width: 100px;
  height: 100px;
}

.shoppingbagProductImageWidth {
  width: 150px;
  height: 150px;
}

.w-47 {
  width: 47%;
}

.borderGreenRounded5 {
  border: 1px solid #09847a;
  border-radius: 5px;
}

.mainColorBackground {
  background-color: #09847a;
}

.focusBgNone:focus,
.focusBgNone:active {
  background-color: unset !important;
}

.w-1em {
  width: 1em;
}

.oneLineTextNoWrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-subtitle {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .logo-subtitle {
    font-size: 12px;
  }
}

.veryWhiteColor {
  color: #fff;
}

.productHoverBtn {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.productHoverBtn button {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}

.product-card {
  cursor: pointer;
}

.product-card-link {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.product-card:hover .productHoverBtn {
  opacity: 1;
}

.productBtn {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.storeBtn {
  display: flex !important;
  align-items: center;
  height: 30px;

  border: 1px solid #D9EAE8 !important;
  border-radius: 20px !important;

  box-shadow: none;
}

.storeBtnActive .filled,
.productBtnActive .filled {
  display: block !important;
}

.clear-btn {
  padding: 3px 10px;
  border: 1px solid #EAF2F1;
  border-radius: 5px;
}

.clear-btn:hover {
  background-color: #EAF2F1;
}

/* == double range slider == */
.double-range-slider input[type='range'],
.double-range-slider input[type='range']::-webkit-slider-runnable-track,
.double-range-slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: none;
}

.double-range-slider input[type='range'] {
  position: absolute;
  width: 100%;
  height: 30px;
  cursor: pointer;
  outline: none;
}

.double-range-slider input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: black;
}

.double-range-slider input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-top: -4px;

  background: black;

  z-index: 1;
}

.double-range-slider input[type='range']:nth-child(1)::-webkit-slider-thumb {
  transform: translate3d(0, 0, 5px);
}

/* Firefox */
input[type=range]::-moz-focus-outer {
  border: 0;
}

.double-range-slider input[type='range']::-moz-range-track {
  height: 2px;
  background: black;
}

.double-range-slider input[type='range']::-moz-range-thumb {
  position: relative;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-top: -4px;

  background: black;

  z-index: 1;
}

.double-range-slider input[type='range']:nth-child(1)::-moz-range-thumb {
  transform: translate3d(0, 0, 5px);
}

/* == double range slider END == */

/* account page sidebar */
.user-sidebar .btn:focus {
  box-shadow: none;
}

.user-sidebar .active>a .avenirMedium {
  font-family: avenirHeavy, 'Segoe UI', sans-serif;
}

.user-sidebar .active>a span {
  color: #09847A !important;
}

.user-sidebar .active svg {
  fill: #09847A !important;
}

.fav-links .active {
  border-bottom: 2px solid #09847A;
}

.fav-links .active span {
  color: #09847A !important;
}

.kbg {
  background-image: url('../assets/images/icons/Path3666.svg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;

}

/* ======== Lottiefiles ======== */
.anim-div {
  display: none;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
}

/* ======== Lottiefiles END ======== */
/* social share modal */
#socialShareModal .modal-title {
  font-weight: 900
}

#socialShareModal .modal-content {
  border-radius: 13px
}

#socialShareModal .modal-body {
  color: #3b3b3b
}

#socialShareModal .modal-body .col-6 {
  display: flex;
  justify-content: center;
}

#socialShareModal .share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;

  box-shadow: none !important;
  outline: none !important;
}

#socialShareModal .share-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 61px;
  height: 61px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  background-color: aliceblue;

  transition: transform 0.2s ease-in-out;
}

#socialShareModal .share-btn:hover .share-btn-icon {
  transform: translateY(-10%);
}

#socialShareModal .share-btn-icon svg {
  width: 26px;
  height: 26px;
}

#socialShareModal .share-btn-text {
  color: #3b3b3b;
  font-size: 13px;
  margin-top: 0.2rem;
  margin-bottom: 1rem;
}

#socialShareModal .share-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;

  background-color: #e6e2e2;
  border-radius: 0.3rem;
  padding-left: 15px;
}

#socialShareModal .share-input input {
  cursor: text;
  flex-grow: 1;
}

#socialShareModal .share-input button {
  align-self: stretch;
  padding: 0 15px;
  border-radius: 0 0.3rem 0.3rem 0;

  fill: #000;
  transition: fill 0.3s ease, background-color 0.3s ease;
}

#socialShareModal .share-input button:hover {
  fill: #fff;
  background-color: #09847a;
}

#socialShareModal .share-input input,
#socialShareModal .share-input button {
  background-color: transparent;
  border: 0;
  outline: 0;
}

#orderRatingForm.loading .rating-container,
#orderRatingForm.loading button[type="submit"] {
  display: none !important;
}

#orderRatingForm.loading::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  margin: 2rem auto 1.6rem;
  border-radius: 50%;
  border: 4px solid black;
  border-bottom-color: transparent;
  animation: rotation 1s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(360deg);
  }
}

.rating-block.error .order-rating {
  filter: drop-shadow(0 0 1px #ef6d6b);
}

.rating-block.error textarea[name="comment"] {
  border: 1px solid #ef6d6b !important;
}

.order-rating div.rateit-range {
  background: url('../assets/images/icons/order_rating_star_grey.svg');
}

.order-rating div.rateit-hover,
.order-rating div.rateit-selected {
  background: url('../assets/images/icons/order_rating_star_pink.svg');
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

.product-discount-tag {
  position: absolute;
  right: -1px;
  bottom: 10%;
  display: flex;

  padding: 3px 8px 3px 15px;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 9px 50%);
}

/* Product Badges
.product-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 11px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.product-badge > svg {
  margin-right: 5px;
}
.separate > *:not(:last-child) {
  margin-right: 10px;
}
*/

.box {
  position: relative;
}

.box::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.box>.box-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.modal-backdrop {
  background-color: rgba(17, 68, 70);
}

.modal-backdrop.show {
  opacity: 0.6;
}

main,
header,
footer {
  will-change: filter;
  transition: filter 0.1s ease-in-out;
}

body.modal-open main,
body.modal-open header,
body.modal-open footer {
  filter: blur(10px);
}

.toasts-container {
  position: fixed;
  z-index: 2050;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
}

.toast-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toast {
  background-color: #fff;
  font-weight: 700;
}

.toast {
  background-color: #fff;
  font-weight: 700;
}

.toast.danger {
  color: #fff;
  background-color: #ef6d6b;
}

.toast.success {
  color: #fff;
  background-color: #62B37C;
}

.toast.secondary {
  color: #fff;
  background-color: #ff9b99;
}

.btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

.btn.loading::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: middle;

  border: 2px solid black;
  border-bottom-color: transparent;
  border-radius: 50%;
  margin: 0 5px;

  animation: loaderSpin 0.5s linear infinite;
}

.vue-loading {
  text-align: center;
}

.vue-loading::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;

  border: 2px solid black;
  border-bottom-color: transparent;
  border-radius: 50%;
  margin-right: 5px;

  animation: loaderSpin 0.5s linear infinite;
}

@keyframes loaderSpin {
  from {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(360deg);
  }
}