@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("/public/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-display: swap;
  src: url("/public/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-display: swap;
  src: url("/public/fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Casual";
  font-weight: 400;
  font-display: swap;
  src: url("/public/fonts/casual-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Casual";
  font-weight: 500;
  font-display: swap;
  src: url("/public/fonts/casual-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Casual";
  font-weight: 700;
  font-display: swap;
  src: url("/public/fonts/casual-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "AdigianaUI";
  font-display: swap;
  src: url("/public/fonts/AdigianaUI.ttf") format("truetype");
}
@font-face {
  font-family: "Anothershabby";
  font-display: swap;
  src: url("/public/fonts/Anothershabby_trial.ttf") format("truetype");
}
@font-face {
  font-family: "ArchitectsDaughter";
  font-display: swap;
  src: url("/public/fonts/ArchitectsDaughter-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Atma";
  font-display: swap;
  src: url("/public/fonts/Atma-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Caveat";
  font-display: swap;
  src: url("/public/fonts/Caveat-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Fontfabric";
  font-display: swap;
  src: url("/public/fonts/Fontfabric-Nexa-Script.otf") format("opentype");
}
@font-face {
  font-family: "Gagalin";
  font-display: swap;
  src: url("/public/fonts/Gagalin-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Quicksand";
  font-display: swap;
  src: url("/public/fonts/Quicksand-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IntroHeadR";
  font-display: swap;
  src: url("/public/fonts/IntroHeadR-Base.otf") format("opentype");
}
@font-face {
  font-family: "AppleColorEmoji";
  font-display: swap;
  src: url("/public/fonts/AppleColorEmoji.ttf") format("truetype");
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

.icon-logo {
  -webkit-mask: url("/public/images/logo.svg") no-repeat center/contain;
  mask: url("/public/images/logo.svg") no-repeat center/contain;
}

.icon-facebook {
  -webkit-mask: url("/public/images/facebook.svg") no-repeat center/contain;
  mask: url("/public/images/facebook.svg") no-repeat center/contain;
}

.icon-instagram {
  -webkit-mask: url("/public/images/instagram.svg") no-repeat center/contain;
  mask: url("/public/images/instagram.svg") no-repeat center/contain;
}

.icon-youtube {
  -webkit-mask: url("/public/images/youtube.svg") no-repeat center/contain;
  mask: url("/public/images/youtube.svg") no-repeat center/contain;
}

.icon-user {
  -webkit-mask: url("/public/images/user.svg") no-repeat center/contain;
  mask: url("/public/images/user.svg") no-repeat center/contain;
}

.icon-cart {
  -webkit-mask: url("/public/images/cart.svg") no-repeat center/contain;
  mask: url("/public/images/cart.svg") no-repeat center/contain;
}

.icon-light {
  -webkit-mask: url("/public/images/light.svg") no-repeat center/contain;
  mask: url("/public/images/light.svg") no-repeat center/contain;
}

.icon-home {
  -webkit-mask: url("/public/images/home.svg") no-repeat center/contain;
  mask: url("/public/images/home.svg") no-repeat center/contain;
}

.icon-circle {
  -webkit-mask: url("/public/images/circle.svg") no-repeat center/contain;
  mask: url("/public/images/circle.svg") no-repeat center/contain;
}

.icon-triangle {
  -webkit-mask: url("/public/images/triangle.svg") no-repeat center/contain;
  mask: url("/public/images/triangle.svg") no-repeat center/contain;
}

.icon-valid {
  -webkit-mask: url("/public/images/valid.svg") no-repeat center/contain;
  mask: url("/public/images/valid.svg") no-repeat center/contain;
}

.icon-cross {
  -webkit-mask: url("/public/images/cross.svg") no-repeat center/contain;
  mask: url("/public/images/cross.svg") no-repeat center/contain;
}

.icon-secure {
  -webkit-mask: url("/public/images/secure.svg") no-repeat center/contain;
  mask: url("/public/images/secure.svg") no-repeat center/contain;
}

.icon-account_home {
  -webkit-mask: url("/public/images/account_home.svg") no-repeat center/contain;
  mask: url("/public/images/account_home.svg") no-repeat center/contain;
}

.icon-account_information {
  -webkit-mask: url("/public/images/account_information.svg") no-repeat center/contain;
  mask: url("/public/images/account_information.svg") no-repeat center/contain;
}

.icon-account_order {
  -webkit-mask: url("/public/images/account_order.svg") no-repeat center/contain;
  mask: url("/public/images/account_order.svg") no-repeat center/contain;
}

.icon-account_address {
  -webkit-mask: url("/public/images/account_address.svg") no-repeat center/contain;
  mask: url("/public/images/account_address.svg") no-repeat center/contain;
}

.icon-account_contact {
  -webkit-mask: url("/public/images/account_contact.svg") no-repeat center/contain;
  mask: url("/public/images/account_contact.svg") no-repeat center/contain;
}

.icon-error {
  -webkit-mask: url("/public/images/error.svg") no-repeat center/contain;
  mask: url("/public/images/error.svg") no-repeat center/contain;
}

.icon-share_link {
  -webkit-mask: url("/public/images/share_link.svg") no-repeat center/contain;
  mask: url("/public/images/share_link.svg") no-repeat center/contain;
}

.icon-share_mail {
  -webkit-mask: url("/public/images/share_mail.svg") no-repeat center/contain;
  mask: url("/public/images/share_mail.svg") no-repeat center/contain;
}

.icon-share_facebook {
  -webkit-mask: url("/public/images/share_facebook.svg") no-repeat center/contain;
  mask: url("/public/images/share_facebook.svg") no-repeat center/contain;
}

.icon-share_messenger {
  -webkit-mask: url("/public/images/share_messenger.svg") no-repeat center/contain;
  mask: url("/public/images/share_messenger.svg") no-repeat center/contain;
}

.icon-share_whatsapp {
  -webkit-mask: url("/public/images/share_whatsapp.svg") no-repeat center/contain;
  mask: url("/public/images/share_whatsapp.svg") no-repeat center/contain;
}

.icon-admin {
  -webkit-mask: url("/public/images/admin.svg") no-repeat center/contain;
  mask: url("/public/images/admin.svg") no-repeat center/contain;
}

.icon-items {
  -webkit-mask: url("/public/images/items.svg") no-repeat center/contain;
  mask: url("/public/images/items.svg") no-repeat center/contain;
}

.icon-users {
  -webkit-mask: url("/public/images/users.svg") no-repeat center/contain;
  mask: url("/public/images/users.svg") no-repeat center/contain;
}

.icon {
  display: inline-block;
  mask-size: cover;
}

.icon.icon-logo {
  height: 24px;
  width: 208px;
}

.icon.icon-size-25 {
  width: 25px;
  height: 25px;
}

.icon.icon-size-20 {
  width: 20px;
  height: 20px;
}

.icon.icon-size-12 {
  width: 12px;
  height: 12px;
}

.icon.icon-size-80 {
  width: 80px;
  height: 80px;
}

.icon.icon-size-15 {
  width: 15px;
  height: 15px;
}

.icon.icon-size-10 {
  width: 10px;
  height: 10px;
}

.icon.icon-size-40 {
  width: 40px;
  height: 40px;
}

.icon.icon-size-60 {
  width: 60px;
  height: 60px;
}

.icon.icon-color-white {
  background-color: #FFFFFF;
}

.icon.icon-color-white-second {
  background-color: #FFFFFF;
}

.icon.icon-color-blue {
  background-color: #007CBA;
}

.icon.icon-color-blue-second {
  background-color: #007CBA;
}

.icon.icon-color-black {
  background-color: #000000;
}

.icon.icon-color-orange {
  background-color: #F3A832;
}

.icon.icon-color-red {
  background-color: #EB5353;
}

.icon.icon-color-green {
  background-color: #70bf42;
}

.icon.icon-color-orange-secondary {
  background-color: rgba(243, 168, 50, 0.6);
}

.circle {
  height: 50px;
  width: 50px;
  min-height: 50px;
  min-width: 50px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle.circle-size-100 {
  height: 100px;
  width: 100px;
  min-height: 100px;
  min-width: 100px;
}
.circle.background-white {
  background-color: #FFFFFF;
}
.circle.background-black {
  background-color: #094eb4;
}
.circle.background-orange {
  background-color: #F3A832;
}
.circle.background-blue {
  background-color: #007CBA;
}

.btn {
  border: 0;
  cursor: pointer;
  margin: 0;
  position: relative;
  white-space: nowrap;
}
.btn:active {
  transform: scale(0.96);
}

.btn-01 {
  font-size: 16px;
  border-radius: 4px;
  background-color: #F3A832;
  color: #FFFFFF;
  height: 40px;
}
.btn-01:disabled {
  background-color: rgba(0, 0, 0, 0.0666666667);
  color: #333333;
  cursor: not-allowed;
}
.btn-01.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-03 {
  font-size: 16px;
  border-radius: 4px;
  background-color: #FFFFFF;
  color: #000000;
  padding: 8px 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 4px;
}
.btn-03.selected {
  background-color: #007CBA !important;
  color: #FFFFFF !important;
}
.btn-03.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.btn-03.icon img {
  height: 14px;
  width: 14px;
}
.btn-03.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.disabled-button {
  z-index: 2;
  max-width: 220px;
  display: none;
  flex-direction: column;
  background-color: white;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  top: 46px;
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
}
.disabled-button .disabled-button-head {
  display: flex;
}
.disabled-button .disabled-button-line {
  width: 100%;
  height: 8px;
  background-color: orange;
  position: relative;
  display: flex;
  justify-content: center;
}
.disabled-button .disabled-button-line-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-right-width: 8px;
  border-left-width: 8px;
  border-bottom: 8px solid white;
}
.disabled-button .disabled-button-information {
  font-size: 14px;
  padding: 6px;
}

.btn-02 {
  font-size: 16px;
  border-radius: 4px;
  background-color: #FFFFFF;
  color: #333333;
  height: 40px;
  border: 1px solid #333333;
}

.modal {
  height: 100dvh;
  width: 100vw;
  display: none;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal.display {
  display: flex;
}
.modal .modal-body {
  padding: 20px 40px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: auto;
  border-radius: 4px;
}
.modal .modal-footer {
  border-top: 1px rgba(0, 0, 0, 0.0666666667) dashed;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.modal .modal-footer-title {
  margin-top: 20px;
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.modal .modal-footer-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  overflow-x: auto;
  margin-top: 20px;
}
.modal .modal-footer-content.pack {
  justify-content: center !important;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  border-radius: 10px;
}
.modal .modal-visuel {
  border-radius: 4px 4px 0px 0px;
  height: 180px;
  width: 180px;
  max-height: 180px;
  max-width: 180px;
  min-width: 180px;
  min-height: 180px;
  position: relative;
  overflow: hidden;
}
.modal .modal-visuel .base, .modal .modal-visuel .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.modal .modal-visuel .drawing {
  position: absolute;
  overflow: hidden;
}
.modal .modal-visuel .drawing-img {
  width: 100%;
}
.modal .modal-content-item {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.0666666667);
}
.modal .modal-content-item-pack {
  background-color: white;
  border-radius: 4px;
}

.footer-default {
  display: flex;
  flex-direction: column;
  background-color: #007CBA;
  color: #FFFFFF;
  width: 100%;
}
.footer-default .back-to-top {
  background-color: #F3A832;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  font-size: 18px;
  color: #FFFFFF;
}
.footer-default .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px 0px 20px;
}
.footer-default .logo-aa {
  height: 30px;
  width: 250px;
}
.footer-default .title {
  padding-bottom: 8px;
  font-size: 20px;
}
.footer-default .languages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid #094eb4;
  text-align: center;
}
.footer-default .others-informations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-default .others-informations > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 300px;
  align-items: center;
  text-align: center;
}
.footer-default .social-network > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
.footer-default .legal-information {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0px 20px 10px 20px;
}
.footer-default .legal-information > * {
  color: #FFFFFF;
  font-size: 14px;
}

@media (max-width: 1200px) {
  .footer-default .others-informations {
    text-align: center;
    justify-content: center;
    margin-bottom: 10px;
    gap: 16px;
  }
  .footer-default .social-network > div {
    justify-content: center;
  }
  .footer-default .logo-aa {
    height: 24px;
    width: 200px;
  }
}
.header-default {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  z-index: 100;
  height: 93px;
  background-color: #007CBA;
  position: sticky;
  top: 0;
  border-bottom: 2px solid #F3A832;
}
.header-default .center {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}
.header-default .home {
  display: flex;
  gap: 10px;
  align-items: center;
}
.header-default .elements {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
}
.header-default .account, .header-default .cart {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  color: #FFFFFF;
  cursor: pointer;
}
.header-default .account:active .icon, .header-default .cart:active .icon {
  transform: scale(0.9);
}
.header-default .text {
  display: flex;
  flex-direction: column;
}
.header-default .title {
  font-size: 18px;
  font-weight: 500;
}
.header-default .account-name {
  text-overflow: ellipsis;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
}
.header-default .cart-name, .header-default .account-name {
  font-size: 14px;
}
.header-default .circle {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.header-default .header-total-items-mobile {
  display: none;
}
.header-default .logo-aa {
  height: 30px;
  width: 250px;
}

.countdown {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
  color: #FFFFFF;
  background-color: #F3A832;
  padding: 4px 20px;
  box-sizing: border-box;
  text-align: center;
}

@media (max-width: 1000px) {
  .header-default .icon.icon-logo {
    height: 18px;
    width: 156px;
  }
  .header-default .logo-aa {
    height: 24px;
    width: 200px;
  }
}
@media (max-width: 800px) {
  .header-default .logo-aa {
    height: 15px;
    width: 125px;
  }
  .header-default {
    height: auto;
  }
  .header-default .text {
    display: none;
  }
  .header-default .elements {
    gap: 6px;
  }
  .header-default .center {
    padding: 4px 4px 4px 10px;
  }
  .header-default .header-total-items-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F3A832;
    padding: 0px 4px;
    box-sizing: border-box;
    font-size: 12px;
    color: #FFFFFF;
    border-radius: 0px 0px 0px 4px;
    position: absolute;
    top: 0px;
    right: 0px;
  }
}
.header-cart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  z-index: 100;
  background-color: #007CBA;
  position: sticky;
  top: 0;
  border-bottom: 2px solid #F3A832;
}
.header-cart .center {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box;
}
.header-cart .header-cart-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  width: 100%;
  padding: 0px 40px;
}
.header-cart .cart-state {
  display: flex;
  position: relative;
  padding-bottom: 30px;
  box-sizing: border-box;
  width: 100%;
  justify-content: space-between;
}
.header-cart .cart-state-line {
  width: 49%;
  border: 2px solid #FFFFFF;
}
.header-cart .cart-state-line.dashed {
  border: 2px dashed #FFFFFF;
}
.header-cart .cart-state-point-content {
  position: absolute;
  top: -10px;
}
.header-cart .cart-state-point-content.start {
  left: -10px;
}
.header-cart .cart-state-point-content.centered {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
.header-cart .cart-state-point-content.end {
  right: -10px;
}
.header-cart .cart-state-point {
  height: 24px;
  width: 24px;
  background-color: #FFFFFF;
  border-radius: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-cart .cart-state-point.target {
  background-color: #F3A832;
}
.header-cart .cart-state-point.target .cart-state-name {
  font-weight: 500;
}
.header-cart .icon-valid {
  margin-top: 3px;
}
.header-cart .cart-state-name {
  position: absolute;
  white-space: nowrap;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 26px;
  color: #FFFFFF;
  font-size: 14px;
}
.header-cart .logo-aa {
  height: 30px;
  width: 250px;
}

@media (max-width: 800px) {
  .header-cart .logo-aa {
    height: 15px;
    width: 125px;
  }
}
@media (max-width: 1000px) {
  .header-cart .logo-aa {
    height: 24px;
    width: 200px;
  }
}
.footer-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #007CBA;
  width: 100%;
}
.footer-cart .footer-cart-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  padding: 20px;
}
.footer-cart .footer-cart-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.footer-cart .footer-cart-logos img {
  height: 36px;
  width: auto;
}

.tips {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  align-items: center;
  padding-top: 10px;
}

.tips .text {
  display: flex;
  flex-direction: column;
}

.tips .title {
  font-size: 17px;
}

.tips .sub-title {
  color: #333333;
  font-size: 14px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0px 0px 0px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: #565959;
  font-size: 12px;
  cursor: pointer;
}

.breadcrumb span {
  color: #565959;
  font-size: 14px;
}

.added-to-cart {
  gap: 20px;
  max-width: 500px;
  justify-content: center;
  align-items: center;
  width: fit-content;
}
.added-to-cart .added-success {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.added-to-cart .description {
  display: flex;
  gap: 12px;
  flex-direction: column;
  padding: 4px;
  color: #000000;
  flex-grow: 1;
  justify-content: space-between;
}
.added-to-cart .description .prices .old-price {
  text-decoration: line-through;
  font-size: 14px;
}
.added-to-cart .description .prices .new-price {
  color: #FF2929;
  font-weight: bold;
  font-size: 20px;
}
.added-to-cart .description-pack {
  display: flex;
  gap: 4px;
  flex-direction: column;
  padding: 10px;
  color: #000000;
  width: -webkit-fill-available;
  background-color: rgba(0, 0, 0, 0.0666666667);
  border-radius: 0 0 10px 10px;
}
.added-to-cart .description-pack .price {
  text-decoration: line-through;
  font-size: 14px;
}
.added-to-cart .description-pack .new-price {
  color: #FF2929;
  font-weight: bold;
  font-size: 20px;
}
.added-to-cart .name {
  text-align: center;
}
.added-to-cart a {
  width: 100%;
  max-width: 300px;
}
.added-to-cart a.additional {
  align-self: stretch;
  height: auto;
}
.added-to-cart .gift {
  height: 180px;
}
.added-to-cart .btn {
  width: 100%;
}
.added-to-cart .modal-content-item {
  max-width: 180px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.added-to-cart .modal-content-item-pack {
  height: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.added-to-cart .modal-footer-title .article-name {
  font-weight: bold;
}

@media (max-width: 500px) {
  .added-to-cart {
    width: 100%;
    max-width: 100%;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 20px;
}

.field-phone {
  display: flex;
  width: 100%;
  gap: 10px;
}

.label {
  font-size: 16px;
}

.asterisk {
  color: #F3A832;
}

.input, select {
  height: 40px;
  background-color: #FFFFFF;
  border: 1px solid #333333;
  color: #333333;
  border-radius: 4px;
  padding: 4px;
  box-sizing: border-box;
  margin: 0;
  font-size: 16px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  flex-grow: 1;
}

select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@{arrow}%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  padding-right: 30px;
  max-width: 120px;
}

.error, .error-center {
  font-size: 14px;
  color: #EB5353;
}

.upper-case {
  text-transform: uppercase;
}

.error-center {
  text-align: center;
}

.field-radio {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.radio {
  display: flex;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 27px;
  justify-content: center;
  align-items: center;
}
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radio input:checked ~ .checkmark:after {
  display: block;
}
.radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 1px solid #333333;
}
.radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.radio .checkmark:after {
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #F3A832;
}

.field-line {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #333333;
  border-radius: 2px;
  display: grid;
  place-content: center;
  cursor: pointer;
  margin-top: 2px;
}

input[type=checkbox]::before {
  content: "";
  width: 13px;
  height: 13px;
  transform: scale(0);
  border-radius: 2px;
  box-shadow: inset 20px 20px #F3A832;
}

input[type=checkbox]:checked::before {
  transform: scale(1);
}

.password-secure {
  font-size: 14px;
}
.password-secure span {
  font-size: 14px;
}

.radio-selector {
  display: flex;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 27px;
  justify-content: center;
  align-items: center;
}
.radio-selector input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radio-selector input:checked ~ .checkmark-selector:after {
  display: block;
}
.radio-selector .checkmark-selector {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 1px solid #333333;
}
.radio-selector .checkmark-selector:after {
  content: "";
  position: absolute;
  display: none;
}
.radio-selector .checkmark-selector:after {
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #F3A832;
}

.summary {
  width: 35%;
}
.summary .summary-div {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 100px;
  gap: 40px;
}
.summary .summary-title {
  text-align: center;
}
.summary .summary-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  padding-top: 12px;
  border-radius: 4px;
}
.summary .summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 8px;
}
.summary .total {
  margin-top: 14px;
}
.summary .total span {
  font-weight: 500;
}
.summary .summary-line-data, .summary .summary-line-title {
  font-size: 14px;
}
.summary .summary-last-line-title, .summary .summary-last-line-data {
  font-size: 18px;
  font-weight: 500;
}
.summary .summary-valid {
  margin: 16px auto;
  width: 80%;
  position: relative;
}
.summary .summary-valid.disabled:hover .disabled-button {
  display: flex;
}
.summary .valid-cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.summary .summary-cart-card-logos {
  display: flex;
  align-items: center;
  gap: 6px;
}
.summary .summary-cart-card-logos img {
  height: 20px;
  width: auto;
}

@media (max-width: 1000px) {
  .summary {
    width: 100%;
  }
  .summary-div {
    top: 0;
  }
}
.modal-edit-address {
  max-width: 500px;
  width: 100%;
  padding: 0px !important;
  overflow-y: auto;
}
.modal-edit-address .modal-edit-address-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.0666666667);
  padding: 10px 18px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1333333333);
}
.modal-edit-address .modal-edit-address-close {
  font-size: 20px;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
}
.modal-edit-address .modal-edit-address-close:hover {
  background-color: rgba(0, 0, 0, 0.0666666667);
}
.modal-edit-address .modal-edit-address-content {
  padding: 10px 18px 24px 18px;
}
.modal-edit-address .label {
  font-size: 14px !important;
}
.modal-edit-address .input, .modal-edit-address select {
  height: 32px !important;
  font-size: 14px !important;
}
.modal-edit-address select {
  max-width: 100% !important;
}
.modal-edit-address .field {
  margin-top: 14px !important;
}
.modal-edit-address .modal-edit-address-group-field {
  display: flex;
  gap: 30px;
}
.modal-edit-address .modal-edit-address-group-field-postal-code {
  max-width: 150px;
}
.modal-edit-address .modal-edit-address-footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.1333333333);
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}
.modal-edit-address .btn {
  padding: 2px 12px;
}
.modal-edit-address .address-autocomplete {
  width: calc(100% - 2px);
  border: 1px solid #333333;
  border-top: 0;
  position: absolute;
  border-radius: 0px 0px 4px 4px;
  top: 100%;
  background-color: white;
  z-index: 500;
}
.modal-edit-address .address-autocomplete.hidden {
  display: none;
}
.modal-edit-address .address-autocomplete .empty {
  padding: 5px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.modal-edit-address .address-autocomplete .empty.hidden {
  display: none;
}
.modal-edit-address .address-autocomplete-child {
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.modal-edit-address .address-autocomplete-child:hover {
  background-color: #DADADA;
}

@media (max-width: 450px) {
  .modal-edit-address {
    width: 100%;
    max-width: 100%;
    margin-bottom: 100px !important;
  }
  .modal-edit-address .field {
    margin-top: 4px !important;
  }
  .modal-edit-address .modal-edit-address-group-field-postal-code {
    max-width: 100%;
  }
  .modal-edit-address .modal-edit-address-group-field {
    flex-direction: column;
    gap: 0px;
  }
}
.modal-choice-address {
  max-width: 600px;
  width: 100%;
  padding: 0px !important;
  overflow-y: auto;
}
.modal-choice-address .modal-choice-address-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.0666666667);
  padding: 10px 18px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1333333333);
}
.modal-choice-address .modal-choice-address-close {
  font-size: 20px;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
}
.modal-choice-address .modal-choice-address-close:hover {
  background-color: rgba(0, 0, 0, 0.0666666667);
}
.modal-choice-address .modal-choice-address-content {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 400px;
  overflow-x: auto;
}
.modal-choice-address .modal-choice-address-footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.1333333333);
  display: flex;
  justify-content: center;
  gap: 30px;
}
.modal-choice-address .btn-01 {
  padding: 2px 12px;
  max-width: 300px;
  width: 100%;
}
.modal-choice-address .btn-02 {
  font-size: 14px;
}
.modal-choice-address .modal-choice-address-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  padding: 8px 16px;
}
.modal-choice-address .modal-choice-address-item-left {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 0px;
  font-size: 14px;
  line-height: normal;
}
@media (max-width: 450px) {
  .modal-choice-address {
    width: 100%;
    max-width: 100%;
    margin-bottom: 100px !important;
  }
}
.blur {
  height: 100vh;
  width: 100vw;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  justify-content: flex-end;
  visibility: hidden;
  overflow: hidden;
}
.blur.display {
  visibility: visible;
  transition: visibility 0.5s;
}
.blur.display .modal-account {
  transition: margin-right 0.5s ease-out;
}

.modal-account {
  height: 100%;
  background-color: #FFFFFF;
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-right: -340px;
  transition: margin-right 0.2s ease-out;
}
.modal-account .modal-account-header {
  background-color: #007CBA;
  color: #FFFFFF;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.modal-account .modal-account-header-title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.modal-account .modal-account-header-hello {
  font-weight: 500;
  color: #FFFFFF;
}
.modal-account .modal-account-header-name {
  font-size: 14px;
  text-overflow: ellipsis;
  max-width: 90%;
  overflow: hidden;
  white-space: nowrap;
  color: #FFFFFF;
}
.modal-account .modal-account-header-close {
  background-color: #FFFFFF;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
}
.modal-account .modal-account-header-close:active i {
  transform: scale(0.9);
}
.modal-account .modal-account-content {
  flex-grow: 1;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-account .modal-account-item {
  display: flex;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  padding: 14px 6px;
  box-sizing: border-box;
  color: #000000;
}
.modal-account .modal-account-item:hover .modal-account-item-cross {
  margin-right: 6px;
}
.modal-account .modal-account-item-cross {
  font-size: 18px;
}
.modal-account .modal-account-item-content {
  display: flex;
  align-items: center;
  gap: 16px;
}
.modal-account .modal-account-footer {
  padding: 10px 6px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.0666666667);
}
.modal-account .modal-account-footer-logout {
  max-width: 260px;
  width: 100%;
}
.modal-account .modal-account-footer-logout .btn {
  width: 100%;
}

.blur {
  height: 100vh;
  width: 100vw;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  justify-content: flex-end;
  visibility: hidden;
  overflow: hidden;
}
.blur.display {
  visibility: visible;
  transition: visibility 0.5s;
}
.blur.display .modal-cart {
  transition: margin-right 0.5s ease-out;
}

.modal-cart {
  height: 100%;
  background-color: #FFFFFF;
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-right: -340px;
  transition: margin-right 0.2s ease-out;
}
.modal-cart .modal-cart-header {
  background-color: #007CBA;
  color: #FFFFFF;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.modal-cart .modal-cart-header-title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.modal-cart .modal-cart-header-hello {
  font-weight: 500;
  color: #FFFFFF;
}
.modal-cart .modal-cart-header-name {
  font-size: 14px;
  text-overflow: ellipsis;
  max-width: 90%;
  overflow: hidden;
  white-space: nowrap;
  color: #FFFFFF;
}
.modal-cart .modal-cart-header-close {
  background-color: #FFFFFF;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
}
.modal-cart .modal-cart-header-close:active i {
  transform: scale(0.9);
}
.modal-cart .modal-cart-content {
  flex-grow: 1;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-cart .modal-cart-content-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
}
.modal-cart .go-to-shop {
  max-width: 260px;
  width: 100%;
}
.modal-cart .go-to-shop .btn {
  width: 100%;
}
.modal-cart .modal-cart-content-children {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-cart .modal-cart-content-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.modal-cart .modal-cart-content-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-cart .modal-cart-content-name {
  font-size: 16px;
  color: #000000;
  font-weight: 500;
}
.modal-cart .modal-cart-content-count-items-div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 8px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
}
.modal-cart .modal-cart-content-item {
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  position: relative;
  justify-content: space-between;
}
.modal-cart .modal-cart-content-article-link {
  display: flex;
  justify-content: center;
}
.modal-cart .modal-cart-content-visuel {
  height: 65px;
  width: 65px;
  max-height: 65px;
  max-width: 65px;
  min-width: 65px;
  min-height: 65px;
  position: relative;
  overflow: hidden;
}
.modal-cart .modal-cart-content-visuel .base, .modal-cart .modal-cart-content-visuel .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.modal-cart .modal-cart-content-visuel .drawing {
  position: absolute;
  overflow: hidden;
}
.modal-cart .modal-cart-content-visuel .drawing-img {
  width: 100%;
}
.modal-cart .modal-cart-content-settings {
  display: flex;
  flex-direction: column;
  padding: 10px 0px;
  box-sizing: border-box;
  font-size: 14px;
}
.modal-cart .modal-cart-content-left {
  display: flex;
  gap: 20px;
}
.modal-cart .modal-cart-content-price {
  font-size: 16px;
}
.modal-cart .modal-cart-content-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: right;
  white-space: nowrap;
}
.modal-cart .modal-cart-content-visuel-div {
  margin: auto;
}
.modal-cart .modal-cart-content-item-title {
  font-size: 16px;
  color: #000000;
  font-weight: normal;
}
.modal-cart .modal-cart-footer {
  padding: 10px 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.0666666667);
}
.modal-cart .modal-cart-footer-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
}
.modal-cart .modal-cart-footer-summary-summary-last-line-title {
  font-size: 12px;
  color: #333333;
}
.modal-cart .modal-cart-footer-summary-summary-last-line-data {
  font-weight: 500;
}
.modal-cart .modal-cart-footer-cart {
  max-width: 260px;
  width: 100%;
}
.modal-cart .modal-cart-footer-cart .btn {
  width: 100%;
}
.modal-cart .modal-cart-pack-prices {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.modal-cart .modal-cart-pack-prices .modal-cart-pack-new {
  color: #FF2929;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}
.modal-cart .modal-cart-pack-prices .modal-cart-pack-old {
  text-decoration: line-through;
  font-size: 12px;
  white-space: nowrap;
}
.modal-cart .modal-cart-pack {
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
}
.modal-cart .modal-cart-pack-visuels {
  position: relative;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal-cart .modal-cart-pack-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-cart .modal-cart-pack-line-title {
  font-size: 13px;
  color: #000000;
}
.modal-cart .modal-cart-pack-line-meta {
  font-size: 12px;
  color: #333333;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-delete-item span {
  text-align: center;
}
.modal-delete-item .modal-delete-footer {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-delete-item button {
  padding: 0px 20px;
}

.shares {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding-top: 10px;
}
.shares .share-title {
  font-family: "ArchitectsDaughter";
}
.shares .share-container {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.shares .share {
  background-color: #F3A832;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
}
.shares .share-copy {
  position: relative;
}
.shares .share-copy-notif {
  position: absolute;
  display: none;
  top: 34px;
  font-size: 14px;
  background-color: #DADADA;
  padding: 4px;
  border-radius: 4px;
  color: black;
  left: 50%;
  transform: translate(-50%, 0);
  width: max-content;
}
.shares .share-copy-notif.show {
  display: flex;
}

.modal-add-stickers {
  max-width: 100%;
  max-height: 100dvh;
  padding: 10px !important;
}
.modal-add-stickers span {
  text-align: center;
}
.modal-add-stickers .drawing-div {
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-add-stickers .drawing-div-abso {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: white;
  border: 2px dashed #EEEEEE;
  flex-direction: column;
}
.modal-add-stickers .title-editor {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.modal-add-stickers .text-perso-top {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-add-stickers .text-perso-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-add-stickers .text-perso-inside {
  background-color: rgb(255, 255, 255);
  padding: 0px 4px;
  border-radius: 0px 0px 4px 4px;
  position: absolute;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: fit-content;
}
.modal-add-stickers .text-perso-top.hidden, .modal-add-stickers .text-perso-bottom.hidden, .modal-add-stickers .text-perso-inside.hidden {
  display: none !important;
}
.modal-add-stickers .drawing {
  max-width: 100%;
  max-height: 600px;
}
@media (max-height: 800px) {
  .modal-add-stickers .drawing {
    max-height: 500px;
  }
}
@media (max-height: 700px) {
  .modal-add-stickers .drawing {
    max-height: 400px;
  }
}
@media (max-height: 600px) {
  .modal-add-stickers .drawing {
    max-height: 300px;
  }
}
@media (max-height: 500px) {
  .modal-add-stickers .drawing {
    max-height: 300px;
  }
}
.modal-add-stickers .emojis {
  width: 100%;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.modal-add-stickers .emoji {
  height: 35px;
  width: 35px;
  cursor: pointer;
}
@media (max-width: 600px) {
  .modal-add-stickers .emoji {
    height: 25px;
    width: 25px;
  }
  .modal-add-stickers .modal-add-stickers-footer {
    flex-direction: column;
    gap: 2px;
  }
}
.modal-add-stickers .emoji-set {
  position: absolute;
  cursor: grab;
}
.modal-add-stickers .modal-add-stickers-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2px;
}
.modal-add-stickers button {
  padding: 0px 20px;
}

.modal-valid-drawing {
  max-width: 100%;
  max-height: 100dvh;
  padding: 10px !important;
}
.modal-valid-drawing span {
  text-align: center;
}
.modal-valid-drawing .drawing-div {
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-valid-drawing .valid-drawing-drawing-div-abso {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: white;
  border: 2px dashed #EEEEEE;
  flex-direction: column;
}
.modal-valid-drawing .title-valid-drawing {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.modal-valid-drawing .text-perso-top {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-valid-drawing .text-perso-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-valid-drawing .text-perso-inside {
  background-color: rgb(255, 255, 255);
  padding: 0px 4px;
  border-radius: 0px 0px 4px 4px;
  position: absolute;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: fit-content;
}
.modal-valid-drawing .text-perso-top.hidden, .modal-valid-drawing .text-perso-bottom.hidden, .modal-valid-drawing .text-perso-inside.hidden {
  display: none !important;
}
.modal-valid-drawing .drawing {
  max-width: 100%;
  max-height: 1000px;
}
@media (max-height: 1100px) {
  .modal-valid-drawing .drawing {
    max-height: 880px;
  }
}
@media (max-height: 1000px) {
  .modal-valid-drawing .drawing {
    max-height: 780px;
  }
}
@media (max-height: 900px) {
  .modal-valid-drawing .drawing {
    max-height: 680px;
  }
}
@media (max-height: 800px) {
  .modal-valid-drawing .drawing {
    max-height: 580px;
  }
}
@media (max-height: 700px) {
  .modal-valid-drawing .drawing {
    max-height: 480px;
  }
}
@media (max-height: 600px) {
  .modal-valid-drawing .drawing {
    max-height: 380px;
  }
}
@media (max-height: 500px) {
  .modal-valid-drawing .drawing {
    max-height: 300px;
  }
}
.modal-valid-drawing .emojis {
  width: 100%;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.modal-valid-drawing .emoji {
  height: 35px;
  width: 35px;
  cursor: pointer;
}
@media (max-width: 600px) {
  .modal-valid-drawing .emoji {
    height: 25px;
    width: 25px;
  }
  .modal-valid-drawing .modal-valid-drawing-footer {
    flex-direction: column;
    gap: 14px;
  }
}
.modal-valid-drawing .emoji-set {
  position: absolute;
}
.modal-valid-drawing .modal-valid-drawing-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 14px;
}
.modal-valid-drawing button {
  padding: 0px 20px;
}

.classroomsChoice .classrooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: space-between;
  gap: 30px;
  margin: 20px 0px;
}
.classroomsChoice .classroom {
  text-align: center;
  height: 210px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color: #FFFFFF;
  font-size: 22px;
}
.classroomsChoice .classroom.DE {
  padding: 32px 38px 32px 36px;
  background-image: url("/public/images/slate.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.classroomsChoice .classroom .classroom-name-AA {
  font-family: "Casual";
  font-weight: bold;
  font-size: 50px;
}
.classroomsChoice .classroom.AA {
  padding: 32px 36px 32px 36px;
  background-color: #F3A832;
  border-radius: 8px;
}
.classroomsChoice .pre-load {
  display: none;
}

@media (max-width: 1200px) {
  .classroomsChoice .classrooms {
    justify-content: space-around;
  }
}
.childrenChoice .children {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  justify-content: space-between;
  gap: 30px;
  margin: 20px 0px;
}

.childrenChoice .child {
  text-align: center;
  height: 220px;
  width: 250px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  background-color: #007CBA;
}

.childrenChoice .drawing {
  width: 230px;
  height: 165px;
  background-color: white;
}

.childrenChoice .drawing-img {
  width: 100%;
  height: 100%;
}

.childrenChoice .child-name {
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: #FFFFFF;
}

@media (max-width: 1200px) {
  .childrenChoice .children {
    justify-content: space-around;
  }
}
.closed section {
  justify-content: center;
  align-items: center;
}

.displayItems .new-price-pack {
  color: #FF2929;
  font-weight: 500;
}
.displayItems .old-price-pack {
  text-decoration: line-through;
  font-size: 14px;
  font-weight: normal;
}

.displayItems .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  justify-content: space-between;
  gap: 30px;
  margin: 20px 0px;
}

.displayItems .item {
  text-align: center;
  width: 250px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  color: #000000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.displayItems .visuel {
  height: 250px;
  width: 250px;
  max-height: 250px;
  max-width: 250px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.displayItems .base, .displayItems .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}

.displayItems .drawing {
  position: absolute;
  overflow: hidden;
}

.displayItems .drawing-img {
  width: 100%;
}

.displayItems .colors {
  position: absolute;
  z-index: 50;
  bottom: 2px;
  display: flex;
  gap: 10px;
}

.displayItems .color {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 2px solid #DADADA;
}

.displayItems .options-soon-out-of-stock {
  justify-content: center;
  background-color: white;
  padding: 2px 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 50;
  bottom: 4px;
  display: flex !important;
  color: #FF2929;
}

.displayItems .option-soon-out-of-stock {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.displayItems .options-soon-out-of-stock .option-soon-out-of-stock-pulse {
  width: 10px;
  height: 10px;
  background-color: #FF2929;
  border-radius: 50%;
  animation: fadeInOut 1s infinite;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.displayItems .sizes {
  position: absolute;
  z-index: 50;
  bottom: 2px;
  right: 2px;
  display: flex !important;
  gap: 10px;
}

.displayItems .categories {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: auto;
  padding: 10px 0;
}

.modal-categories-filter-body {
  gap: 20px;
  min-width: 300px;
  max-width: 480px;
  width: 90%;
}
.modal-categories-filter-body .modal-categories-filter-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.modal-categories-filter-body .modal-categories-filter-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.displayItems .options-chocolate {
  position: absolute;
  z-index: 50;
  bottom: 2px;
  left: 2px;
  display: flex !important;
  height: 50px;
  width: 50px;
}

.displayItems .option-chocolate {
  height: 50px;
  width: 50px;
}

.displayItems .options-banner {
  position: absolute;
  z-index: 50;
  top: 0px;
  left: 0px;
  display: flex !important;
  max-width: 100%;
}

.displayItems .option-banner {
  max-width: 100%;
}

.displayItems .option-banner img {
  max-width: 100%;
}

.displayItems .options-flake {
  position: absolute;
  z-index: 99;
  bottom: 4px;
  left: 4px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border-radius: 100%;
  height: 30px;
  width: 30px;
}

.displayItems .option-flake {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.displayItems .option-flake img {
  max-width: 100%;
}

.displayItems .option-chocolate img {
  height: 50px;
  width: 50px;
}

.displayItems .size {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: 2px solid #FFFFFF;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  color: #000000;
  word-spacing: 10px;
}

.displayItems .description {
  display: flex;
  flex-grow: 2;
  width: 100%;
  padding: 4px 10px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  gap: 16px;
}

.displayItems .name {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.displayItems .contribute {
  font-size: 10px;
}

.displayItems .price {
  text-align: left;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 1200px) {
  .displayItems .items {
    justify-content: space-around;
  }
}
@media (max-width: 600px) {
  .displayItems .options-soon-out-of-stock {
    font-size: 12px;
    width: 92%;
    bottom: 2px;
    padding: 1px 4px;
  }
  .displayItems .items {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .displayItems .item {
    height: 150px;
    flex-direction: row;
    width: 100%;
  }
  .displayItems .visuel {
    height: 150px;
    width: 150px;
    max-height: 150px;
    max-width: 150px;
    min-width: 150px;
    min-height: 150px;
  }
  .displayItems .description {
    width: auto;
    height: 100%;
    gap: 0px;
  }
  .displayItems .colors {
    right: 2px;
    flex-direction: column;
    bottom: auto;
  }
  .displayItems .options-chocolate {
    top: 2px;
    right: 2px;
    left: auto;
    height: 40px;
    width: 40px;
  }
  .displayItems .option-chocolate {
    height: 40px;
    width: 40px;
  }
  .displayItems .option-chocolate img {
    height: 40px;
    width: 40px;
  }
  .displayItems .color {
    height: 12px;
    width: 12px;
  }
}
.displayItem {
  /*style the arrow inside the select element:*/
  /*point the arrow upwards when the select box is open (active):*/
  /*style the items (options), including the selected item:*/
  /*style items (options):*/
  /*hide the items when the select box is closed:*/
}
.displayItem .not-display {
  display: none !important;
}
.displayItem .price-pack {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.displayItem .price-pack .price {
  color: #FF2929;
}
.displayItem .price-pack .last-price {
  text-decoration: line-through;
  font-size: 14px;
  font-weight: normal;
}
.displayItem .top {
  display: flex;
  gap: 30px;
}
.displayItem .visuels {
  width: 55%;
}
.displayItem .name-mobile {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.displayItem .line {
  height: 2px;
  background-color: #007CBA;
  flex-grow: 1;
}
.displayItem .name-mobile h1 {
  font-weight: normal;
  color: #094eb4;
}
.displayItem .visuels-controls {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.displayItem .carousel {
  display: flex;
  align-items: center;
  overflow: auto;
  scroll-snap-type: x mandatory;
  list-style-type: none;
  width: 450px;
  border-radius: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.displayItem .carousel::-webkit-scrollbar {
  display: none;
}
.displayItem .controls {
  gap: 14px;
  justify-content: center;
  align-items: center;
  display: none;
}
.displayItem .controls .icon {
  cursor: pointer;
}
.displayItem .visuel {
  height: 450px;
  width: 450px;
  max-height: 450px;
  max-width: 450px;
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.displayItem .video {
  width: 450px;
  height: 254.2372881356px;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.displayItem .visuel .base, .displayItem .visuel .shadow, .displayItem .thumbnail-visuel .base, .displayItem .thumbnail-visuel .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.displayItem .visuel .drawing, .displayItem .thumbnail-visuel .drawing {
  position: absolute;
  overflow: hidden;
}
.displayItem .visuel .drawing-img, .displayItem .thumbnail-visuel .drawing-img {
  width: 100%;
}
.displayItem .thumbnails {
  display: grid;
  grid-template-columns: repeat(5, 70px);
  justify-content: center;
  gap: 20px;
  width: 100%;
}
.displayItem .thumbnail img {
  width: 100%;
}
.displayItem .thumbnail {
  height: 70px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 2px solid #F6F6F6;
  cursor: pointer;
  position: relative;
}
.displayItem .thumbnail.select {
  border-color: #F3A832;
}
.displayItem .thumbnail .sentence-display * {
  font-size: 2px !important;
}
.displayItem .thumbnail .sentence-display img {
  height: 2px !important;
  width: 2px !important;
}
.displayItem .thumbnail-visuel {
  height: 70px;
  width: 70px;
  max-height: 70px;
  max-width: 70px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
  flex: 0 0 100%;
  border-radius: 4px;
}
.displayItem .thumbnail-video-div {
  background-position: center;
  background-size: auto 100%;
}
.displayItem .thumbnail-video-div span {
  position: absolute;
  bottom: -26px;
  font-size: 14px;
  color: #F3A832;
}
.displayItem .thumbnail-video-div .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  width: 30px;
  opacity: 0.8;
}
.displayItem .section {
  margin: 40px 0px;
}
.displayItem .section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.displayItem .section-name {
  color: #000000;
}
.displayItem .section-line {
  background-color: #DADADA;
  flex-grow: 1;
  height: 2px;
}
.displayItem .section-body {
  margin-top: 30px;
  display: flex;
  gap: 60px;
}
.displayItem .section-part {
  width: 50%;
}
.displayItem .section-part img {
  max-width: 100%;
}
.displayItem .part-title {
  margin-bottom: 16px;
  font-size: 18px;
}
.displayItem .features {
  -webkit-border-vertical-spacing: 10px;
  line-height: 1.8;
  width: 100%;
}
.displayItem .features td {
  padding: 0;
}
.displayItem .features .key {
  white-space: nowrap;
  vertical-align: top;
  line-height: 1;
}
.displayItem .features .value {
  line-height: 1;
  padding-left: 10px;
}
.displayItem .settings {
  display: flex;
  flex-direction: column;
  width: 45%;
  gap: 20px;
}
.displayItem .setting {
  display: flex;
  flex-direction: column;
  padding: 6px 0px;
  box-sizing: border-box;
}
.displayItem .settings-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.displayItem .settings-line {
  height: 1px;
  width: 100%;
  background-color: #DADADA;
}
.displayItem .setting i {
  transform: rotate(90deg);
}
.displayItem .setting.open i {
  transform: rotate(-90deg);
}
.displayItem .setting-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  box-sizing: border-box;
}
.displayItem .setting-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, 102px);
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0px;
}
.displayItem .setting-body-sentence {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0px;
}
.displayItem .setting-sentence, .displayItem .quantity-data {
  height: 40px;
  background-color: #FFFFFF;
  border: 1px solid #333333;
  color: #333333;
  border-radius: 4px;
  padding: 4px;
  box-sizing: border-box;
  margin: 0;
  font-size: 16px;
  outline: none;
}
.displayItem .setting-sentence-other {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.displayItem .setting-sentence-other-item {
  width: 100%;
}
.displayItem .quantity-data {
  width: 100px;
  text-align: center;
}
.displayItem .setting-sentence-price {
  font-size: 14px;
}
.displayItem .setting-data {
  font-weight: 500;
}
.displayItem .name {
  font-size: 28px;
}
.displayItem .sentence-display {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 4px;
}
.displayItem .setting-color {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #DADADA;
  cursor: pointer;
  background-color: #DADADA;
  overflow: hidden;
  width: 100px;
  text-align: center;
}
.displayItem .setting-color.select {
  border-color: #F3A832;
}
.displayItem .setting-color span {
  padding: 4px;
  box-sizing: border-box;
  font-size: 14px;
}
.displayItem .setting-sentence-more-option-title {
  font-weight: bold;
  padding-top: 14px;
}
.displayItem .sentence-color {
  margin-top: 6px;
}
.displayItem .sentence-emoji {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.displayItem .setting-sentence-emojis {
  display: flex;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0;
}
.displayItem .setting-sentence-emoji {
  height: 40px;
  width: 40px;
  cursor: pointer;
  transform: scale(0.8);
}
.displayItem .button-open-add-stickers {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  text-align: center;
  width: fit-content;
}
.displayItem .setting-option {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #DADADA;
  cursor: pointer;
  background-color: #DADADA;
  overflow: hidden;
  width: 100px;
  text-align: center;
}
.displayItem .setting-option.select {
  border-color: #F3A832;
}
.displayItem .setting-option span {
  padding: 4px;
  box-sizing: border-box;
  font-size: 14px;
}
.displayItem .setting-size {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #DADADA;
  cursor: pointer;
}
.displayItem .setting-size.select {
  border-color: #F3A832;
}
.displayItem .setting-size span {
  padding: 4px;
  box-sizing: border-box;
  font-size: 14px;
}
.displayItem .option-visuel-color, .displayItem .option-visuel-size {
  height: 100px;
  width: 100px;
  max-height: 100px;
  max-width: 100px;
  position: relative;
  overflow: hidden;
}
.displayItem .option-visuel-color .base, .displayItem .option-visuel-color .shadow, .displayItem .option-visuel-size .base, .displayItem .option-visuel-size .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.displayItem .option-visuel-color .drawing, .displayItem .option-visuel-size .drawing {
  position: absolute;
  overflow: hidden;
}
.displayItem .option-visuel-color .drawing .drawing-img, .displayItem .option-visuel-size .drawing .drawing-img {
  width: 100%;
}
.displayItem .option-visuel-option {
  height: 100px;
  width: 100px;
  max-height: 100px;
  max-width: 100px;
  position: relative;
  overflow: hidden;
}
.displayItem .option-visuel-option .base, .displayItem .option-visuel-option .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.displayItem .option-visuel-option .drawing {
  position: absolute;
  overflow: hidden;
}
.displayItem .option-visuel-option .drawing .drawing-img {
  width: 100%;
}
.displayItem .option-visuel-option img {
  height: 100%;
  width: 100%;
}
.displayItem .option-visuel-option .french-flag {
  position: absolute;
  height: auto;
  width: 25px;
  top: 2px;
  right: 2px;
  border-radius: 2px;
}
.displayItem .settings-footer {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 10px;
}
.displayItem .quantity {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.displayItem .quantity-div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.displayItem .quantity-less, .displayItem .quantity-more {
  height: 40px;
  width: 60px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 24px;
  cursor: pointer;
}
.displayItem .quantity-less:active, .displayItem .quantity-more:active {
  transform: scale(0.96);
}
.displayItem .quantity-less {
  background-color: #EB5353;
}
.displayItem .quantity-more {
  background-color: #007CBA;
}
.displayItem .form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.displayItem .custom-select {
  position: relative;
  cursor: pointer;
}
.displayItem .custom-select select {
  display: none; /*hide original SELECT element:*/
}
.displayItem .select-selected {
  background-color: white;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 8px 16px;
}
.displayItem .sentence-display-elm {
  display: none;
}
.displayItem .sentence-display-elm.display {
  display: block;
}
.displayItem .sentence-authorisation {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.displayItem .sentence-authorisation-response {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.displayItem .sentence-authorisation-response-yes, .displayItem .sentence-authorisation-response-no {
  width: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.displayItem .sentence-warning {
  display: block;
  color: #EB5353;
}
.displayItem .select-selected:after {
  position: absolute;
  content: "";
  top: 19px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000 transparent transparent transparent;
}
.displayItem .select-selected.select-arrow-active:after {
  border-color: transparent transparent #000 transparent;
  top: 14px;
}
.displayItem .select-items div {
  color: black;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
  cursor: pointer;
  user-select: none;
}
.displayItem .select-items {
  position: absolute;
  background-color: white;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
.displayItem .select-hide {
  display: none;
}
.displayItem .hide {
  display: none !important;
}
.displayItem .select-items div:hover, .displayItem .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
.displayItem .item-options-soon-out-of-stock, .displayItem .item-options-soon-out-of-stock-mobile {
  margin-top: 6px;
  display: flex;
  color: #FF2929;
}
.displayItem .item-option-soon-out-of-stock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.displayItem .item-options-soon-out-of-stock .item-option-soon-out-of-stock-pulse, .displayItem .item-options-soon-out-of-stock-mobile .item-option-soon-out-of-stock-pulse {
  width: 10px;
  height: 10px;
  background-color: #FF2929;
  border-radius: 50%;
  animation: fadeInOut 1s infinite;
}
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.displayItem .item-options-soon-out-of-stock-mobile {
  display: none;
}

@media (max-width: 1080px) {
  .displayItem .visuels-controls {
    top: 140px;
  }
  .displayItem .carousel {
    width: 400px;
  }
  .displayItem .visuel {
    height: 400px;
    width: 400px;
    max-height: 400px;
    max-width: 400px;
  }
  .displayItem .video {
    width: 400px;
    height: 225.988700565px;
    flex: 0 0 100%;
  }
  .setting-sentence-other {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 860px) {
  .displayItem .item-options-soon-out-of-stock {
    display: none;
  }
  .displayItem .item-options-soon-out-of-stock-mobile {
    margin-top: -10px;
    justify-content: center;
    display: flex;
  }
  .displayItem .section-body {
    flex-direction: column;
    gap: 30px;
  }
  .displayItem .section-part {
    width: auto;
  }
  .displayItem .controls {
    display: flex;
  }
  .displayItem .thumbnails {
    display: none;
  }
  .displayItem .top {
    flex-direction: column;
    gap: 20px;
  }
  .displayItem .name-mobile {
    display: flex;
  }
  .displayItem .name {
    display: none;
  }
  .displayItem .visuels-controls {
    align-items: center;
    justify-content: center;
  }
  .displayItem .visuels {
    width: auto;
  }
  .displayItem .settings {
    width: auto;
  }
  .displayItem .carousel {
    width: 400px;
  }
  .displayItem .visuel {
    height: 400px;
    width: 400px;
    max-height: 400px;
    max-width: 400px;
  }
  .displayItem .video {
    width: 400px;
    height: 225.988700565px;
    flex: 0 0 100%;
  }
  .settings-body {
    flex-direction: column-reverse !important;
  }
}
@media (max-width: 430px) {
  .displayItem .carousel {
    width: 300px;
  }
  .displayItem .visuel {
    height: 300px;
    width: 300px;
    max-height: 300px;
    max-width: 300px;
  }
  .displayItem .video {
    width: 300px;
    height: 169.4915254237px;
    flex: 0 0 100%;
  }
}
@media (max-width: 330px) {
  .displayItem .carousel {
    width: 250px;
  }
  .displayItem .visuel {
    height: 250px;
    width: 250px;
    max-height: 250px;
    max-width: 250px;
  }
  .displayItem .video {
    width: 250px;
    height: 141.2429378531px;
    flex: 0 0 100%;
  }
}
.displayDrawing .drawing {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.displayDrawing .drawing img {
  max-height: calc(100dvh - 350px);
  height: auto;
  max-width: 100%;
  box-shadow: rgba(0, 0, 0, 0.25) 0 14px 28px, rgba(0, 0, 0, 0.22) 0 10px 10px;
}
.displayDrawing .div-btn {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}
.displayDrawing .a-btn {
  color: white !important;
  user-select: none;
  text-decoration: none;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.signin section {
  padding-top: 0px;
}
.signin .center {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.signin .header {
  max-width: 1200px;
  width: 100%;
  position: relative;
}
.signin .header img {
  width: 100%;
}
.signin .reset-password {
  margin-top: 20px;
  width: fit-content;
  font-size: 14px;
  margin-bottom: 30px;
}
.signin .back {
  position: absolute;
  right: 0px;
  bottom: 10px;
  font-size: 14px;
  color: #000000;
}
.signin .content {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.signin .title {
  margin: 0;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}
.signin .sub-title {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}
.signin .form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}
.signin .form-other {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
  gap: 14px;
}
.signin .connect {
  margin-top: 10px;
}
.signin .notice {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
}
.signin .signup {
  margin-top: 20px;
  font-size: 14px;
}

.signup section {
  padding-top: 0px;
}
.signup .center {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.signup .header {
  max-width: 1200px;
  width: 100%;
  position: relative;
}
.signup .header img {
  width: 100%;
}
.signup .back {
  position: absolute;
  right: 0px;
  bottom: 10px;
  font-size: 14px;
  color: #000000;
}
.signup .content {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.signup .title {
  margin: 0;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}
.signup .connect {
  margin-top: 10px;
}
.signup .sub-title {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}
.signup .form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}
.signup .form-other {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
  gap: 14px;
}
.signup .register {
  margin-top: 30px;
}
.signup .notice {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
}
.signup .signin, .signup .legal-notice {
  margin-top: 20px;
  font-size: 14px;
}

.forceChangePassword section {
  padding-top: 0px;
}
.forceChangePassword .center {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.forceChangePassword .header {
  max-width: 1200px;
  width: 100%;
  position: relative;
}
.forceChangePassword .header img {
  width: 100%;
}
.forceChangePassword .back {
  position: absolute;
  right: 0px;
  bottom: 10px;
  font-size: 14px;
  color: #000000;
}
.forceChangePassword .content {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.forceChangePassword .title {
  margin: 0;
  font-size: 24px;
  text-align: center;
}
.forceChangePassword .sub-title {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}
.forceChangePassword .form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}
.forceChangePassword .change-password {
  margin-top: 30px;
}
.forceChangePassword .notice {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
}
.forceChangePassword .not-change {
  margin-top: 20px;
  font-size: 14px;
}

.resetPassword section {
  padding-top: 0px;
}
.resetPassword .center {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.resetPassword .header {
  max-width: 1200px;
  width: 100%;
  position: relative;
}
.resetPassword .header img {
  width: 100%;
}
.resetPassword .back {
  position: absolute;
  right: 0px;
  bottom: 10px;
  font-size: 14px;
  color: color-text-primary;
}
.resetPassword .content {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.resetPassword .title {
  margin: 0;
  font-size: 24px;
  text-align: center;
}
.resetPassword .sub-title {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}
.resetPassword .sub-title-alert-first {
  margin: 10px 0px 0px 0px;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  color: #EB5353;
}
.resetPassword .sub-title-alert {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  color: #EB5353;
}
.resetPassword .form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}
.resetPassword .reset-password {
  margin-top: 30px;
}
.resetPassword .notice {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
}
.resetPassword .signin {
  margin-top: 20px;
  font-size: 14px;
}

.resetPasswordSended section {
  padding-top: 0px;
}
.resetPasswordSended b {
  color: #F3A832;
}
.resetPasswordSended .center {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.resetPasswordSended .header {
  max-width: 1200px;
  width: 100%;
  position: relative;
}
.resetPasswordSended .header img {
  width: 100%;
}
.resetPasswordSended .back {
  position: absolute;
  right: 0px;
  bottom: 10px;
  font-size: 14px;
  color: #000000;
}
.resetPasswordSended .content {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.resetPasswordSended .title {
  margin: 0;
  font-size: 24px;
  text-align: center;
}
.resetPasswordSended .body-text {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.resetPasswordSended .connect {
  margin-top: 30px;
}
.resetPasswordSended .connect .btn {
  width: 100%;
}

.recoverPassword section {
  padding-top: 0px;
}
.recoverPassword .center {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.recoverPassword .header {
  max-width: 1200px;
  width: 100%;
  position: relative;
}
.recoverPassword .header img {
  width: 100%;
}
.recoverPassword .back {
  position: absolute;
  right: 0px;
  bottom: 10px;
  font-size: 14px;
  color: #000000;
}
.recoverPassword .content {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.recoverPassword .title {
  margin: 0;
  font-size: 24px;
  text-align: center;
}
.recoverPassword .sub-title {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}
.recoverPassword .form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}
.recoverPassword .change-password {
  margin-top: 30px;
}
.recoverPassword .notice {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
}
.recoverPassword .not-change {
  margin-top: 20px;
  font-size: 14px;
}

.cartEmpty .cart-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  margin-top: 30px;
}
.cartEmpty .go-to-shop {
  max-width: 300px;
  width: 100%;
}
.cartEmpty .btn {
  width: 100%;
}

.cart .cart-content {
  display: flex;
  gap: 40px;
}
.cart .childrens {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 65%;
}
.cart .children {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart .head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cart .body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart .name {
  font-size: 20px;
  color: #000000;
  font-weight: 500;
}
.cart .classroom-name {
  color: #000000;
  font-size: 16px;
}
.cart .count-items-div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 14px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
}
.cart .item {
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  padding: 18px 12px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  position: relative;
  justify-content: space-between;
}
.cart .item .left {
  display: flex;
  gap: 20px;
}
.cart .item .right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
.cart .item .visuel {
  height: 100px;
  width: 100px;
  max-height: 100px;
  max-width: 100px;
  min-width: 100px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
}
.cart .item .visuel .base, .cart .item .visuel .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.cart .item .visuel .drawing {
  position: absolute;
  overflow: hidden;
}
.cart .item .visuel .drawing-img {
  width: 100%;
}
.cart .settings {
  display: flex;
  flex-direction: column;
  padding: 10px 0px;
  box-sizing: border-box;
  font-size: 14px;
}
.cart .price {
  font-size: 20px;
  font-weight: 500;
}
.cart .visuel-div {
  margin: auto;
}
.cart .item-title {
  font-size: 18px;
  color: #000000;
}
.cart .cart-delete {
  position: absolute;
  top: 4px;
  right: 10px;
  cursor: pointer;
}
.cart .cart-delete-name {
  font-size: 13px;
  text-decoration: underline;
  color: #333333;
}
.cart .quantity-data {
  height: 40px;
  background-color: #FFFFFF;
  border: 1px solid #333333;
  color: #333333;
  border-radius: 4px;
  padding: 4px;
  box-sizing: border-box;
  margin: 0;
  font-size: 16px;
  outline: none;
}
.cart .quantity-data {
  width: 60px;
  text-align: center;
}
.cart .quantity {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cart .quantity-div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cart .cart-quantity-less, .cart .cart-quantity-more {
  height: 40px;
  width: 40px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  font-size: 36px;
  cursor: pointer;
}
.cart .cart-quantity-less:active, .cart .cart-quantity-more:active {
  transform: scale(0.96);
}
.cart .total-items {
  font-weight: normal;
}
.cart .cart-quantity-less {
  background-color: #EB5353;
  line-height: 39px;
}
.cart .cart-quantity-more {
  background-color: #007CBA;
  line-height: 36px;
}
.cart .item-pack {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  padding: 18px 12px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.cart .item-pack .left {
  display: flex;
  gap: 10px;
}
.cart .item-pack .left .visuels {
  width: 140px;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
.cart .item-pack .left .visuels .visuel {
  height: 80px;
  width: 80px;
  max-height: 80px;
  max-width: 80px;
  min-width: 80px;
  min-height: 80px;
  position: relative;
  overflow: hidden;
}
.cart .item-pack .left .visuels .visuel .base, .cart .item-pack .left .visuels .visuel .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.cart .item-pack .left .visuels .visuel .drawing {
  position: absolute;
  overflow: hidden;
}
.cart .item-pack .left .visuels .visuel .drawing-img {
  width: 100%;
}
.cart .item-pack .left .visuels .visuel.v-left {
  margin-right: auto;
}
.cart .item-pack .left .visuels .visuel.v-right {
  margin-top: -10px;
  margin-left: auto;
}
.cart .item-pack .left .text .drawings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cart .item-pack .left .text .drawings .drawing-name-name {
  font-weight: bold;
}
.cart .item-pack .left .text .drawings .drawing-others {
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.cart .item-pack .right {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart .item-pack .right .prices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart .item-pack .right .prices .new-price {
  color: #FF2929;
  font-weight: bold;
  font-size: 18px;
}
.cart .item-pack .right .prices .old-price {
  text-decoration: line-through;
  font-size: 14px;
  font-weight: normal;
}
.cart .item-pack .right .delete {
  background-color: #EB5353;
  padding: 6px 12px;
  color: white;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .cart .cart-content {
    flex-direction: column;
  }
  .cart .childrens {
    width: 100%;
  }
  .cart .item {
    flex-direction: column;
  }
  .cart .item .right {
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .cart .visuel-div {
    margin: initial;
  }
}
.delivery .delivery-content {
  display: flex;
  gap: 40px;
}
.delivery .items {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 65%;
}
.delivery .item {
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.delivery .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 28px 18px;
  box-sizing: border-box;
  cursor: pointer;
}
.delivery .item.selected .head {
  cursor: initial;
}
.delivery .item.selected .radio-selector {
  cursor: initial;
}
.delivery .item.selected .radio-selector input {
  cursor: initial;
}
.delivery .item.selected .item-body {
  display: flex;
}
.delivery .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.delivery .description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.delivery .item-title {
  font-weight: 500;
  font-size: 16px;
}
.delivery .item-description {
  font-size: 14px;
}
.delivery .right {
  min-width: 80px;
  display: flex;
  justify-content: flex-end;
}
.delivery .item-right {
  font-weight: 500;
  color: #F3A832;
}
.delivery .add-first-address {
  margin: 0 auto;
}
.delivery .item-body {
  border-top: 1px solid rgba(0, 0, 0, 0.0666666667);
  padding: 18px;
  box-sizing: border-box;
  display: none;
  justify-content: center;
  align-items: center;
}
.delivery .item-body.has-address {
  justify-content: space-between;
  align-items: flex-start;
}
.delivery .body-address {
  display: flex;
  flex-direction: column;
}
.delivery .address-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 2px;
}
.delivery .address-content {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  line-height: normal;
}
.delivery .address-edit {
  margin-top: 10px;
  font-size: 14px;
  color: #F3A832;
  cursor: pointer;
  width: fit-content;
}
.delivery .body-change-address {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-end;
}
.delivery .change-address-btn {
  width: fit-content;
}

@media (max-width: 500px) {
  .delivery .head {
    flex-direction: column;
    align-items: flex-start;
  }
  .delivery .right {
    margin-left: 51px;
    justify-content: flex-start;
  }
  .delivery .item-body {
    flex-direction: column;
  }
}
@media (max-width: 1000px) {
  .delivery .delivery-content {
    flex-direction: column;
  }
  .delivery .items {
    width: 100%;
  }
}
.payment .payment-content {
  display: flex;
  gap: 40px;
}
.payment .items {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 65%;
}
.payment .item {
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.payment .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 28px 18px;
  box-sizing: border-box;
  cursor: pointer;
}
.payment .item.selected .head {
  cursor: initial;
}
.payment .item.selected .radio-selector {
  cursor: initial;
}
.payment .item.selected .radio-selector input {
  cursor: initial;
}
.payment .item.selected .item-body {
  display: flex;
}
.payment .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.payment .description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.payment .item-title {
  font-weight: 500;
  font-size: 16px;
}
.payment .item-description {
  font-size: 14px;
}
.payment .right {
  min-width: 80px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.payment .right img {
  max-height: 60px;
  max-width: 60px;
}
.payment .item-body {
  border-top: 1px solid rgba(0, 0, 0, 0.0666666667);
  padding: 18px;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  gap: 16px;
}
.payment .payment-billing-address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.0666666667);
}
.payment .payment-billing-address-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.payment .full {
  width: 100%;
}
.payment .payment-cb-button, .payment .payment-cheque-button {
  margin: 0px auto;
  width: 80%;
  position: relative;
}
.payment .payment-cb-button.disabled:hover .disabled-button, .payment .payment-cheque-button.disabled:hover .disabled-button {
  display: flex;
}
.payment .payment-cb-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.payment .payment-cb-button img {
  width: 30px;
  height: auto;
}
.payment .payment-cb-button button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.payment .payment-billing-address-right {
  width: fit-content;
}
.payment .address-title {
  font-size: 16px;
  font-weight: 500;
}
.payment .address-content {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  line-height: normal;
}
.payment .payment-cheque-information {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.payment .payment-cheque-information-title {
  font-size: 16px;
  font-weight: 500;
}
.payment .payment-cheque-information-content {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  line-height: normal;
}
.payment .bold {
  font-weight: 500;
}
.payment .label {
  font-size: 15px;
}
.payment .payment-cb-information {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 20px 0px 0px 0px;
  gap: 18px;
  text-align: center;
  align-items: center;
}
.payment .legal-information {
  font-size: 14px;
}
.payment .btn-cheque, .payment .btn-cb {
  max-width: 300px;
  width: 100%;
}
.payment .payment-cb-redirect {
  font-size: 15px;
  font-weight: 500;
}
.payment .body-address-empty {
  display: flex;
  justify-content: center;
}
.payment .payment-cb-button, .payment .payment-cheque-button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 300px;
  align-items: center;
  justify-content: center;
}
.payment .payment-cb-secure {
  font-size: 14px;
  color: color-success;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 500px) {
  .payment .head {
    flex-direction: column;
    align-items: flex-start;
  }
  .payment .right {
    margin-left: 51px;
    justify-content: flex-start;
  }
  .payment .item-body {
    flex-direction: column;
  }
  .payment .payment-billing-address {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .payment .payment-billing-address-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}
@media (max-width: 1000px) {
  .payment .payment-content {
    flex-direction: column;
  }
  .payment .items {
    width: 100%;
  }
}
.paymentAccepted .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.paymentAccepted .success-round {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #70bf42;
  width: fit-content;
  border-radius: 100%;
  height: 90px;
  width: 90px;
}
.paymentAccepted .icon-success-payment {
  margin-top: 16px;
}
.paymentAccepted .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 500px;
  width: 100%;
}
.paymentAccepted .success-title {
  font-size: 20px;
  font-weight: 500;
}
.paymentAccepted .success-reference {
  color: #333333;
}
.paymentAccepted .go-order {
  max-width: 300px;
  width: 100%;
  margin-top: 20px;
}
.paymentAccepted .go-order-button {
  width: 100%;
}

.paymentRefused .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.paymentRefused .error-round {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EB5353;
  width: fit-content;
  border-radius: 100%;
  height: 90px;
  width: 90px;
}
.paymentRefused .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 500px;
  width: 100%;
}
.paymentRefused .error-title {
  font-size: 20px;
  font-weight: 500;
}
.paymentRefused .go-payment {
  max-width: 300px;
  width: 100%;
  margin-top: 20px;
}
.paymentRefused .go-payment-button {
  width: 100%;
}

.account .account-head, .adminIndex .account-head {
  display: flex;
  flex-direction: column;
  padding: 20px 0px 40px 0px;
}
.account .account-title, .adminIndex .account-title {
  font-weight: normal;
}
.account .account-title b, .adminIndex .account-title b {
  color: #F3A832;
}
.account .account-sub-title, .adminIndex .account-sub-title {
  font-size: 14px;
}
.account .account-middle, .account .account-shortcuts, .adminIndex .account-middle, .adminIndex .account-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account .current-orders, .adminIndex .current-orders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account .current-order, .adminIndex .current-order {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  gap: 14px;
}
.account .current-order-top, .adminIndex .current-order-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.account .current-order-top-information, .adminIndex .current-order-top-information {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.account .current-order-top-information b, .adminIndex .current-order-top-information b {
  font-weight: bold;
}
.account .current-order-top-information.start, .adminIndex .current-order-top-information.start {
  align-items: flex-start;
  width: 100%;
}
.account .current-order-top-information.centered, .adminIndex .current-order-top-information.centered {
  align-items: center;
  white-space: nowrap;
}
.account .current-order-top-information.end, .adminIndex .current-order-top-information.end {
  align-items: flex-end;
  width: 100%;
}
.account .account-part-title, .adminIndex .account-part-title {
  font-size: 18px;
}
.account .current-order-bottom, .adminIndex .current-order-bottom {
  display: flex;
  align-items: center;
}
.account .current-order-bottom-left, .account .current-order-bottom-right, .adminIndex .current-order-bottom-left, .adminIndex .current-order-bottom-right {
  width: 50%;
}
.account .current-order-bottom-right, .adminIndex .current-order-bottom-right {
  display: flex;
  justify-content: flex-end;
}
.account .current-order-status, .adminIndex .current-order-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.account .current-order-status-title, .adminIndex .current-order-status-title {
  white-space: nowrap;
}
.account .current-order-status-information, .adminIndex .current-order-status-information {
  text-align: right;
}
.account .meter-content, .adminIndex .meter-content {
  width: 100%;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  overflow: hidden;
}
.account .meter, .adminIndex .meter {
  height: 100%;
  background-color: #70bf42;
  border-radius: 4px;
}
.account .current-order-button, .adminIndex .current-order-button {
  max-width: 200px;
  width: 100%;
}
.account .current-order-button .btn, .adminIndex .current-order-button .btn {
  width: 100%;
}
.account .account-shortcuts, .adminIndex .account-shortcuts {
  margin-top: 40px;
}
.account .account-shortcuts-content, .adminIndex .account-shortcuts-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, 350px);
  justify-content: space-between;
  gap: 30px;
}
.account .account-shortcut, .adminIndex .account-shortcut {
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  padding: 8px 4px;
  color: #000000;
  display: flex;
  flex-direction: column;
}
.account .account-shortcut-title, .adminIndex .account-shortcut-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
}
.account .account-shortcut-sub-title, .adminIndex .account-shortcut-sub-title {
  padding: 0px 10px 0px 50px;
  box-sizing: border-box;
  font-size: 14px;
}

@media (max-width: 800px) {
  .account .current-order-bottom {
    flex-direction: column;
    gap: 18px;
  }
  .account .current-order-bottom-left, .account .current-order-bottom-right {
    width: 100%;
  }
  .account .current-order-bottom-right {
    justify-content: center;
  }
  .account .account-shortcuts-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
@media (max-width: 600px) {
  .account .current-order-top {
    flex-direction: column;
    gap: 4px;
  }
  .account .current-order-top-information {
    width: 100%;
  }
  .account .current-order-top-information.centered {
    align-items: flex-start;
  }
  .account .current-order-top-information.end {
    align-items: flex-start;
  }
}
.order .order-details, .adminOrder .order-details {
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.order .basic-details, .adminOrder .basic-details {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.order .go-to-complaint, .adminOrder .go-to-complaint {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.order .order-content, .adminOrder .order-content {
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  margin-top: 8px;
}
.order .children, .adminOrder .children {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order .head, .adminOrder .head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.order .body, .adminOrder .body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order .name, .adminOrder .name {
  font-size: 20px;
  color: #000000;
  font-weight: 500;
}
.order .count-items-div, .adminOrder .count-items-div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 14px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
}
.order .item, .adminOrder .item {
  border-radius: 4px;
  display: flex;
  gap: 10px;
  position: relative;
  justify-content: space-between;
}
.order .visuel, .adminOrder .visuel {
  height: 100px;
  width: 100px;
  max-height: 100px;
  max-width: 100px;
  min-width: 100px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
}
.order .visuel .base, .order .visuel .shadow, .adminOrder .visuel .base, .adminOrder .visuel .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.order .visuel .drawing, .adminOrder .visuel .drawing {
  position: absolute;
  overflow: hidden;
}
.order .visuel .drawing-img, .adminOrder .visuel .drawing-img {
  width: 100%;
}
.order .settings, .adminOrder .settings {
  display: flex;
  flex-direction: column;
  padding: 10px 0px;
  box-sizing: border-box;
  font-size: 14px;
}
.order .left, .adminOrder .left {
  display: flex;
  gap: 20px;
}
.order .price, .adminOrder .price {
  font-size: 20px;
  font-weight: 500;
}
.order .right, .adminOrder .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.order .visuel-div, .adminOrder .visuel-div {
  margin: auto;
}
.order .item-title, .adminOrder .item-title {
  font-size: 18px;
  color: #000000;
}
.order .order-content-informations, .adminOrder .order-content-informations {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: space-between;
  gap: 20px;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.0666666667);
}
.order .order-content-final, .adminOrder .order-content-final {
  display: flex;
  justify-content: end;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.0666666667);
  flex-direction: column;
}
.order .order-content-final-lines, .adminOrder .order-content-final-lines {
  display: flex;
  gap: 50px;
  justify-content: end;
  align-items: center;
}
.order .order-content-final-left, .adminOrder .order-content-final-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  font-size: 14px;
}
.order .order-content-final-right, .adminOrder .order-content-final-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  font-size: 16px;
}
.order .order-content-information, .adminOrder .order-content-information {
  display: flex;
  flex-direction: column;
}
.order .order-content-information b, .adminOrder .order-content-information b {
  font-weight: bold !important;
}
.order .order-content-body, .adminOrder .order-content-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 700px) {
  .order .order-details {
    flex-direction: column;
    gap: 20px;
  }
}
.welcome section {
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.welcome .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.welcome .container .title-01 {
  font-size: 20px;
  font-weight: bold;
}
.welcome .container .title-02 {
  font-weight: bold;
}
.welcome .redirect-school {
  margin-top: 20px;
  width: 100%;
  margin-bottom: 20px;
  text-decoration: none;
}
.welcome .redirect-school-btn {
  max-width: 250px;
  width: 100%;
  text-decoration: none;
}

.index section {
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.index section a {
  margin-top: 30px;
  max-width: 250px;
  width: 100%;
}
.index section .btn {
  width: 100%;
}

.toOfferChoice .children {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  justify-content: space-between;
  gap: 30px;
  margin: 20px 0px;
}

.toOfferChoice .child {
  text-align: center;
  height: 220px;
  width: 250px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  background-color: #007CBA;
}

.toOfferChoice .drawing {
  width: 230px;
  height: 165px;
  background-color: white;
}

.toOfferChoice .drawing-img {
  width: 100%;
  height: 100%;
}

.toOfferChoice .child-name {
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: #FFFFFF;
}

@media (max-width: 1200px) {
  .toOfferChoice .children {
    justify-content: space-around;
  }
}
.orders .orders-head, .adminOrders .orders-head {
  display: flex;
  flex-direction: column;
  padding: 20px 0px 40px 0px;
}
.orders .orders-title, .adminOrders .orders-title {
  font-weight: normal;
}
.orders .orders-title b, .adminOrders .orders-title b {
  color: #F3A832;
}
.orders .orders-sub-title, .adminOrders .orders-sub-title {
  font-size: 14px;
}
.orders .orders-middle, .adminOrders .orders-middle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orders .current-orders, .adminOrders .current-orders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orders .current-order, .adminOrders .current-order {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  gap: 14px;
}
.orders .current-order-top, .adminOrders .current-order-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.orders .current-order-top-information, .adminOrders .current-order-top-information {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.orders .current-order-top-information b, .adminOrders .current-order-top-information b {
  font-weight: bold;
}
.orders .current-order-top-information.start, .adminOrders .current-order-top-information.start {
  align-items: flex-start;
  width: 100%;
}
.orders .current-order-top-information.centered, .adminOrders .current-order-top-information.centered {
  align-items: center;
  white-space: nowrap;
}
.orders .current-order-top-information.end, .adminOrders .current-order-top-information.end {
  align-items: flex-end;
  width: 100%;
}
.orders .current-order-bottom, .adminOrders .current-order-bottom {
  display: flex;
  align-items: center;
}
.orders .current-order-bottom-left, .orders .current-order-bottom-right, .adminOrders .current-order-bottom-left, .adminOrders .current-order-bottom-right {
  width: 50%;
}
.orders .current-order-bottom-right, .adminOrders .current-order-bottom-right {
  display: flex;
  justify-content: flex-end;
}
.orders .current-order-status, .adminOrders .current-order-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orders .current-order-status-title, .adminOrders .current-order-status-title {
  white-space: nowrap;
}
.orders .current-order-status-information, .adminOrders .current-order-status-information {
  text-align: right;
}
.orders .meter-content, .adminOrders .meter-content {
  width: 100%;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.0666666667);
  border-radius: 4px;
  overflow: hidden;
}
.orders .meter, .adminOrders .meter {
  height: 100%;
  background-color: #70bf42;
  border-radius: 4px;
}
.orders .meter.canceled, .adminOrders .meter.canceled {
  background-color: #EB5353;
}
.orders .current-order-button, .adminOrders .current-order-button {
  max-width: 200px;
  width: 100%;
}
.orders .current-order-button .btn, .adminOrders .current-order-button .btn {
  width: 100%;
}
.orders .orders-search, .adminOrders .orders-search {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0px 10px 0px;
}
.orders .orders-search .orders-search-form, .adminOrders .orders-search .orders-search-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 800px) {
  .orders .current-order-bottom {
    flex-direction: column;
    gap: 18px;
  }
  .orders .current-order-bottom-left, .orders .current-order-bottom-right {
    width: 100%;
  }
  .orders .current-order-bottom-right {
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .orders .current-order-top {
    flex-direction: column;
    gap: 4px;
  }
  .orders .current-order-top-information {
    width: 100%;
  }
  .orders .current-order-top-information.centered {
    align-items: flex-start;
  }
  .orders .current-order-top-information.end {
    align-items: flex-start;
  }
}
.informations .account-head {
  display: flex;
  flex-direction: column;
  padding: 20px 0px 40px 0px;
}
.informations .account-title {
  font-weight: normal;
}
.informations .account-title b {
  color: #F3A832;
}
.informations .account-sub-title {
  font-size: 14px;
}
.informations .informations-content {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.informations .default-information, .informations .secure-information {
  max-width: 500px;
  width: 100%;
}
.informations .secure-information {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
}
.informations .secure-information form {
  max-width: 300px;
  width: 100%;
}
.informations .secure-information .btn {
  width: 100%;
}
.informations .title-section {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.informations .information-save {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30px;
}
.informations .information-save .btn {
  width: 120px;
}

@media (max-width: 1100px) {
  .informations .informations-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .informations .secure-information {
    margin-top: 40px;
  }
}
.changePassword {
  margin-bottom: 30px;
}
.changePassword .account-head {
  display: flex;
  flex-direction: column;
  padding: 20px 0px 40px 0px;
}
.changePassword .account-title {
  font-weight: normal;
}
.changePassword .account-title b {
  color: #F3A832;
}
.changePassword .account-sub-title {
  font-size: 14px;
}
.changePassword .change-password-content {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.changePassword .change-password-save {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.changePassword .change-password-save .btn {
  padding-left: 20px;
  padding-right: 20px;
}

.dDisplayItems .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  justify-content: space-between;
  gap: 30px;
  margin: 40px 0px 20px 0px;
}
.dDisplayItems .item {
  text-align: center;
  width: 250px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  color: #000000;
  border-radius: 4px;
  overflow: hidden;
}
.dDisplayItems .visuel {
  height: 250px;
  width: 250px;
  max-height: 250px;
  max-width: 250px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dDisplayItems .base, .dDisplayItems .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.dDisplayItems .drawing {
  position: absolute;
  overflow: hidden;
}
.dDisplayItems .drawing-img {
  width: 100%;
}
.dDisplayItems .description {
  display: flex;
  flex-grow: 2;
  width: 100%;
  padding: 4px 10px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  background-color: #DADADA;
  gap: 16px;
}
.dDisplayItems .name {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.dDisplayItem .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  justify-content: space-between;
  gap: 30px;
  margin: 40px 0px 20px 0px;
}
.dDisplayItem .item {
  text-align: center;
  width: 250px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  color: #000000;
  border-radius: 4px;
  overflow: hidden;
}
.dDisplayItem .visuel {
  height: 250px;
  width: 250px;
  max-height: 250px;
  max-width: 250px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dDisplayItem .base, .dDisplayItem .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.dDisplayItem .drawing {
  position: absolute;
  overflow: hidden;
}
.dDisplayItem .drawing-img {
  width: 100%;
}

.dDisplayVisuel .item {
  text-align: center;
  width: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  color: #000000;
  border-radius: 4px;
  overflow: hidden;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}
.dDisplayVisuel .visuel {
  height: 400px;
  width: 400px;
  max-height: 400px;
  max-width: 400px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dDisplayVisuel .base, .dDisplayVisuel .shadow {
  position: absolute;
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.dDisplayVisuel .drawing {
  position: absolute;
  overflow: hidden;
}
.dDisplayVisuel .drawing-img {
  width: 100%;
}
.dDisplayVisuel .sentence-display {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 4px;
  color: #333333;
}
.dDisplayVisuel .content-item-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.dDisplayVisuel .controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  width: 100%;
}
.dDisplayVisuel .control {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.dDisplayVisuel .range {
  -webkit-appearance: none;
  width: 300px;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
.dDisplayVisuel .range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}
.dDisplayVisuel .range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}
.dDisplayVisuel .number {
  width: 30px;
}

.search section {
  margin-top: 30px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.search .search-input-container {
  max-width: 450px;
  width: 100%;
  box-sizing: border-box;
  margin: 0px 10px;
  position: relative;
}
.search .search-input {
  width: 100%;
  padding: 0px 30px 0px 10px;
}
.search .search-input-results {
  position: absolute;
  width: 100%;
  max-height: 200px;
  background-color: white;
  left: 0;
  top: 50px;
  z-index: 50;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  overflow: hidden;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}
.search .search-input-results.display {
  display: flex;
}
.search .search-input-result-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.search .search-input-result {
  width: 100%;
  text-align: start;
  padding: 2px 6px;
  box-sizing: border-box;
  font-size: 14px;
  color: #000000;
}
.search .search-input-result:hover {
  background-color: #DADADA;
}
.search .search-input-result-title {
  font-size: 15px;
  font-weight: bold;
}
.search .search-input-btn {
  max-width: 200px;
  width: 100%;
}
.search .search-input-btn .btn {
  width: 100%;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  word-break: break-word;
}
body.fixed {
  overflow: hidden;
}

a {
  text-decoration: none;
  color: #F3A832;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 1200px;
  width: 100%;
  padding: 0px 20px 20px 20px;
  box-sizing: border-box;
}

.hide {
  display: none;
}

.not-selected, .not-selected * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Remove Arrows from input number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

b {
  font-weight: 500;
}

.sizes {
  display: none;
}

.options-chocolate, .options-banner, .options-flake {
  display: none;
}

@media (max-width: 500px) {
  body.fixed {
    position: fixed;
  }
}

/*# sourceMappingURL=styleDE.css.map */