@charset "UTF-8";

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.animate-heart-beat {
  animation: heart-beat 2s cubic-bezier(0, 0, 0.3, 1) infinite;
}

@keyframes heart-beat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slide-in-from-top {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.animate-tada {
  animation: 1s ease-in-out tada;
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
    20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
  }

  30%,
    50%,
    70%,
    90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
  }

  40%,
    60%,
    80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pointing-left {
  0%,
    100% {
    margin-left: 0;
  }

  50% {
    margin-left: -5px;
  }
}

@keyframes pointing-top {
  0%,
    100% {
    margin-top: 0;
  }

  50% {
    margin-top: -5px;
  }
}

@keyframes pointing-right {
  0%,
    100% {
    margin-right: 0;
  }

  50% {
    margin-right: -5px;
  }
}

@keyframes pointing-bottom {
  0%,
    100% {
    margin-bottom: 0;
  }

  50% {
    margin-bottom: -5px;
  }
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.fixed-inset {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.momentum-scroll {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.container{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 576px){
  .container{
    max-width: 576px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}

@media (min-width: 992px){
  .container{
    max-width: 992px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (min-width: 1200px){
  .container{
    max-width: 1200px;
  }
}

@media (min-width: 1400px){
  .container{
    max-width: 1400px;
  }
}

#book-composer .book-composer-card {
  border: 1px solid var(--color-gray-light);
  display: flex;
  width: 100%;
  cursor: grab;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-blue);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
}

@media (min-width: 576px){
  #book-composer .book-composer-card{
    padding: 0.75rem;
  }
}

#book-composer .book-composer-card .grip{
  margin-right: 0.25rem;
  fill: var(--color-neutral-400);
}

#book-composer .book-composer-card[disabled]{
  cursor: default;
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-400);
}

#book-composer .book-composer-card[disabled] .book-info{
  opacity: .33;
}

#book-composer .book-composer-card[disabled] .grip{
  fill: var(--color-neutral-300);
}

#book-composer .book-composer-card[disabled] .edit-icon{
  padding: 0.25rem !important;
}

#book-composer .book-composer-card[disabled] .edit-icon:hover{
  background-color: var(--color-gray-lighter);
}

#book-composer .book-composer-card[disabled] .edit-icon svg{
  fill: var(--color-neutral-500);
}

.\!border {
  border: 1px solid var(--color-gray-light) !important;
}

.border {
  border: 1px solid var(--color-gray-light);
}

.border-top {
  border-top: 1px solid var(--color-gray-light);
}

.border-bottom {
  border-bottom: 1px solid var(--color-gray-light);
}

.border-left {
  border-left: 1px solid var(--color-gray-light);
}

.divider {
  border-top: 1px solid var(--color-gray-lighter);
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  width: 91.666667%;
}

.divider+.divider{
  display: none;
}

.box-content{
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.box-content__title{
  display: inline-block;
}

.box-content__text{
  color: var(--color-neutral-700);
}

.box-content__text>div:first-of-type{
  display: inline-block;
}

.box-content__text .icons.text-to-speech{
  display: inline;
}

/* color blue */

.box-content.box-content--blue{
  background-color: var(--color-blue-lightest);
}

.box-content.box-content--blue .box-content__title{
  color: var(--color-orange);
}

/* color green */

.box-content.box-content--green{
  background-color: var(--color-green-lightest);
}

.box-content.box-content--green .box-content__title{
  color: var(--color-orange);
}

/* color purple */

.box-content.box-content--purple{
  background-color: var(--color-purple-lightest);
}

.box-content.box-content--purple .box-content__title{
  color: var(--color-purple-dark);
}

/* color gray */

.box-content.box-content--gray {
  border: 1px solid var(--color-gray-light);
  border-width: 1px;
  border-color: var(--color-neutral-300);
  background-color: var(--color-gray-lightest);
}

.box-content.box-content--gray .box-content__title{
  color: var(--color-gray);
}

.box-content.box-content--tts .box-content__text>div:first-of-type{
  display: inline;
  color: var(--color-brand);
}

.primer--tab .primer--button{
  border-radius: 0.5rem;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.primer--tab .primer--button.primary{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: var(--color-blue);
}

.primer--tab .primer--button.primary.active,
        .primer--tab .primer--button.primary:focus,
        .primer--tab .primer--button.primary:hover{
  border-style: none !important;
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--tab .primer--button.primary.\!active{
  border-style: none !important;
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--tab .primer--button.secondary{
  border-width: 0px !important;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: var(--color-blue);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.primer--tab .primer--button.secondary.active,
        .primer--tab .primer--button.secondary:focus,
        .primer--tab .primer--button.secondary:hover{
  border-width: 0px !important;
  border-style: none !important;
  background-color: var(--color-blue-lighter);
  fill: var(--color-blue-dark);
  color: var(--color-blue-dark);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.primer--tab .primer--button.secondary.\!active{
  border-width: 0px !important;
  border-style: none !important;
  background-color: var(--color-blue-lighter);
  fill: var(--color-blue-dark);
  color: var(--color-blue-dark);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

input:checked+.check-button{
  border-bottom-width: 0px !important;
}

.primer--button.check-button{
  border-width: 0px;
  background-color: transparent;
  fill: var(--color-brand);
  color: var(--color-brand);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-brand);
}

.primer--button.check-button:hover{
  background-color: var(--color-brand-light);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.primer--button.check-button:active,
      .primer--button.check-button.active {
  background-color: #c7d8ff;
}

.primer--button.check-button:focus{
  background-color: var(--color-brand-light);
}

.primer--button.check-button.disabled,
      .primer--button.check-button:disabled{
  background-color: var(--color-neutral-200) !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-color: var(--color-neutral-500) !important;
}

.peer:checked ~ .check-button{
  background-color: var(--color-brand-light);
}

.check-button.error{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:checked ~ .check-button.error{
  background-color: var(--color-pink);
}

.check-button.success{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:checked ~ .check-button.success{
  background-color: var(--color-green);
}

.cancel-reasons{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 36rem;
  flex-direction: column;
  gap: 1.5rem;
}

.cancel-reasons .cancel-reason input[type='radio']{
  position: absolute;
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.primer--tab .cancel-reasons .cancel-reason label{
  border-radius: 0.5rem;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.primer--tab .cancel-reasons .cancel-reason label.primary{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: var(--color-blue);
}

.primer--tab .cancel-reasons .cancel-reason label.primary.active,
        .primer--tab .cancel-reasons .cancel-reason label.primary:focus,
        .primer--tab .cancel-reasons .cancel-reason label.primary:hover{
  border-style: none !important;
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--tab .cancel-reasons .cancel-reason label.secondary{
  border-width: 0px !important;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: var(--color-blue);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.primer--tab .cancel-reasons .cancel-reason label.secondary.active,
        .primer--tab .cancel-reasons .cancel-reason label.secondary:focus,
        .primer--tab .cancel-reasons .cancel-reason label.secondary:hover{
  border-width: 0px !important;
  border-style: none !important;
  background-color: var(--color-blue-lighter);
  fill: var(--color-blue-dark);
  color: var(--color-blue-dark);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}


    [data-school-autocomplete-target='form'].disabled .cancel-reasons .cancel-reason label{
  pointer-events: none;
  background-color: var(--color-neutral-200);
}

[data-school-autocomplete-target='form'].disabled [type="radio"]:checked +.cancel-reasons .cancel-reason label:hover{
  background-color: var(--color-blue-lighter);
}

.game-board .cancel-reasons .cancel-reason label.error,
      .game-board .cancel-reasons .cancel-reason label.danger{
  border-style: none;
  border-color: var(--color-pink-dark);
  background-color: var(--color-pink) !important;
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.game-board .cancel-reasons .cancel-reason label.error:hover, .game-board .cancel-reasons .cancel-reason label.danger:hover{
  background-color: var(--color-pink-dark) !important;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.game-board .cancel-reasons .cancel-reason label.error:focus, .game-board .cancel-reasons .cancel-reason label.danger:focus{
  background-color: var(--color-pink) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-pink-dark);
}

.game-board .cancel-reasons .cancel-reason label.error:active,
        .game-board .cancel-reasons .cancel-reason label.error.active,
        .game-board .cancel-reasons .cancel-reason label.danger:active,
        .game-board .cancel-reasons .cancel-reason label.danger.active{
  background-color: var(--color-pink-darker) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.game-board .cancel-reasons .cancel-reason label.success{
  border-style: none;
  border-color: var(--color-green-dark);
  background-color: var(--color-green) !important;
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.game-board .cancel-reasons .cancel-reason label.success:hover{
  background-color: var(--color-green-dark) !important;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.game-board .cancel-reasons .cancel-reason label.success:focus{
  background-color: var(--color-green) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-green-dark);
}

.game-board .cancel-reasons .cancel-reason label.success:active,
        .game-board .cancel-reasons .cancel-reason label.success.active{
  background-color: var(--color-green-darker) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

body.kid-space .cancel-reasons .cancel-reason label:not(.outline):not(.ghost):not(.text):not(.circle){
  border-width: 0px;
  border-bottom-width: 2px;
  border-style: solid !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

body.kid-space .cancel-reasons .cancel-reason label:not(.outline):not(.ghost):not(.text):not(.circle).disabled,
    body.kid-space .cancel-reasons .cancel-reason label:not(.outline):not(.ghost):not(.text):not(.circle)[disabled]{
  border-color: var(--color-neutral-400);
}

.cancel-reasons .cancel-reason label{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-family: var(--main-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 500;
  line-height: 1.5rem;
  text-decoration-line: none !important;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1200px){

  .cancel-reasons .cancel-reason label{
  font-size: 0.875rem;
  }
}

.cancel-reasons .cancel-reason label.sm{
  line-height: 1.5rem;
}

.cancel-reasons .cancel-reason label.lg{
  line-height: 1.75rem;
}

.cancel-reasons .cancel-reason label.disabled,.cancel-reasons .cancel-reason label:disabled{
  border-color: var(--color-neutral-500) !important;
}

.cancel-reasons .cancel-reason label.ghost{
  border-width: 0px !important;
  background-color: transparent;
  fill: var(--color-brand);
  padding: 0px;
  color: var(--color-brand);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.cancel-reasons .cancel-reason label.ghost:hover{
  text-decoration-line: underline !important;
}

.cancel-reasons .cancel-reason label.ghost.disabled,.cancel-reasons .cancel-reason label.ghost:disabled{
  cursor: not-allowed !important;
  background-color: transparent !important;
  fill: var(--color-neutral-500) !important;
  color: var(--color-neutral-500) !important;
  text-decoration-line: none !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.cancel-reasons .cancel-reason label.ghost.disabled:hover,.cancel-reasons .cancel-reason label.ghost.disabled:focus,.cancel-reasons .cancel-reason label.ghost.disabled:active,.cancel-reasons .cancel-reason label.ghost.disabled.active,.cancel-reasons .cancel-reason label.ghost:disabled:hover,.cancel-reasons .cancel-reason label.ghost:disabled:focus,.cancel-reasons .cancel-reason label.ghost:disabled:active,.cancel-reasons .cancel-reason label.ghost:disabled.active{
  background-color: transparent !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.cancel-reasons .cancel-reason label.ghost.number-picker{
  height: 2rem;
  width: 2rem;
  border-radius: 0px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.cancel-reasons .cancel-reason label.ghost.number-picker:hover{
  background-color: var(--color-gray-lightest) !important;
  text-decoration-line: none !important;
}

.cancel-reasons .cancel-reason label.ghost.number-picker:hover span{
  text-decoration-line: none !important;
}

.cancel-reasons .cancel-reason label.disabled,.cancel-reasons .cancel-reason label:disabled{
  cursor: not-allowed !important;
  background-color: var(--color-neutral-200) !important;
  fill: var(--color-neutral-500) !important;
  color: var(--color-neutral-500) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.cancel-reasons .cancel-reason label.disabled:hover,.cancel-reasons .cancel-reason label.disabled:focus,.cancel-reasons .cancel-reason label.disabled:active,.cancel-reasons .cancel-reason label.disabled.active,.cancel-reasons .cancel-reason label:disabled:hover,.cancel-reasons .cancel-reason label:disabled:focus,.cancel-reasons .cancel-reason label:disabled:active,.cancel-reasons .cancel-reason label:disabled.active{
  background-color: var(--color-neutral-200) !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.cancel-reasons .cancel-reason label.primary{
  border-style: none;
  border-color: var(--color-blue-dark);
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cancel-reasons .cancel-reason label.primary:hover{
  background-color: var(--color-blue-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cancel-reasons .cancel-reason label.primary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue-dark);
}

.cancel-reasons .cancel-reason label.primary:active,.cancel-reasons .cancel-reason label.primary.active{
  background-color: var(--color-blue-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.cancel-reasons .cancel-reason label.primary.number-picker{
  height: 2rem;
  width: 2rem;
  border-radius: 0px !important;
  background-color: var(--color-blue);
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.cancel-reasons .cancel-reason label.primary.number-picker:hover{
  background-color: var(--color-blue-dark);
}

.cancel-reasons .cancel-reason label.secondary{
  border-style: none;
  border-color: var(--color-blue);
  background-color: var(--color-blue-lighter);
  fill: var(--color-blue-dark);
  color: var(--color-blue-dark);
}

.cancel-reasons .cancel-reason label.secondary:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background-color: #c3e7f3;
}

.cancel-reasons .cancel-reason label.secondary:active,.cancel-reasons .cancel-reason label.secondary.active{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  background-color: #a1c9d6;
}

.cancel-reasons .cancel-reason label.secondary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue-dark);
}

.cancel-reasons .cancel-reason label.purple{
  border-style: none;
  border-color: var(--color-purple-dark);
  background-color: var(--color-purple);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cancel-reasons .cancel-reason label.purple:hover{
  background-color: var(--color-purple-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cancel-reasons .cancel-reason label.purple:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-purple-dark);
}

.cancel-reasons .cancel-reason label.purple:active,.cancel-reasons .cancel-reason label.purple.active{
  background-color: var(--color-purple-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.cancel-reasons .cancel-reason label.fancy{
  border-style: none;
  border-color: var(--color-purple);
  background-color: var(--color-purple-lightest);
  fill: var(--color-purple-dark);
  color: var(--color-purple-dark);
  box-shadow: 0 0 8px #A35DEA80;
}

.cancel-reasons .cancel-reason label.fancy[disabled] {
  box-shadow: none;
}

.cancel-reasons .cancel-reason label.fancy:hover{
  background-color: var(--color-purple-lightest);
  box-shadow: 0 0 16px var(--color-purple-light);
}

.cancel-reasons .cancel-reason label.fancy:active,.cancel-reasons .cancel-reason label.fancy.active{
  background-color: var(--color-purple-lighter);
  box-shadow: 0 0 8px var(--color-purple);
}

.cancel-reasons .cancel-reason label.fancy:focus {
  box-shadow: 0 0 16px var(--color-purple-light);
}

.cancel-reasons .cancel-reason label.outlined{
  border-width: 0px;
  background-color: transparent;
  fill: var(--color-brand);
  color: var(--color-brand);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-brand);
}

.cancel-reasons .cancel-reason label.outlined:hover{
  background-color: var(--color-brand-light);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cancel-reasons .cancel-reason label.outlined:active,.cancel-reasons .cancel-reason label.outlined.active {
  background-color: #c7d8ff;
}

.cancel-reasons .cancel-reason label.outlined:focus{
  background-color: var(--color-brand-light);
}

.cancel-reasons .cancel-reason label.outlined.disabled,.cancel-reasons .cancel-reason label.outlined:disabled{
  background-color: var(--color-neutral-200) !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-color: var(--color-neutral-500) !important;
}

.cancel-reasons .cancel-reason label.error,.cancel-reasons .cancel-reason label.danger{
  border-style: none;
  border-color: var(--color-pink-dark);
  background-color: var(--color-pink);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cancel-reasons .cancel-reason label.error:hover,.cancel-reasons .cancel-reason label.danger:hover{
  background-color: var(--color-pink-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cancel-reasons .cancel-reason label.error:focus,.cancel-reasons .cancel-reason label.danger:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-pink-dark);
}

.cancel-reasons .cancel-reason label.error:active,.cancel-reasons .cancel-reason label.error.active,.cancel-reasons .cancel-reason label.danger:active,.cancel-reasons .cancel-reason label.danger.active{
  background-color: var(--color-pink-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.cancel-reasons .cancel-reason label.success{
  border-style: none;
  border-color: var(--color-green-dark);
  background-color: var(--color-green);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cancel-reasons .cancel-reason label.success:hover{
  background-color: var(--color-green-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cancel-reasons .cancel-reason label.success:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-green-dark);
}

.cancel-reasons .cancel-reason label.success:active,.cancel-reasons .cancel-reason label.success.active{
  background-color: var(--color-green-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.cancel-reasons .cancel-reason label.text{
  border-style: none !important;
}

.cancel-reasons .cancel-reason label.text.primary{
  fill: var(--color-blue);
  color: var(--color-blue);
}

.cancel-reasons .cancel-reason label.text.primary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue);
}

.cancel-reasons .cancel-reason label.text.primary:hover{
  background-color: var(--color-blue-lighter);
}

.cancel-reasons .cancel-reason label.text.secondary{
  color: var(--color-blue-lighter);
}

.cancel-reasons .cancel-reason label.text.secondary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue-lighter);
}

.cancel-reasons .cancel-reason label.text.secondary:hover{
  background-color: var(--color-blue-light);
}

.cancel-reasons .cancel-reason label.text.success{
  fill: var(--color-green);
  color: var(--color-green);
}

.cancel-reasons .cancel-reason label.text.success:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-green);
}

.cancel-reasons .cancel-reason label.text.success:hover{
  background-color: var(--color-green-lightest);
}

.cancel-reasons .cancel-reason label.text.error,.cancel-reasons .cancel-reason label.text.danger{
  color: var(--color-pink);
}

.cancel-reasons .cancel-reason label.text.error:focus,.cancel-reasons .cancel-reason label.text.danger:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-pink);
}

.cancel-reasons .cancel-reason label.text.error:hover,.cancel-reasons .cancel-reason label.text.danger:hover{
  background-color: var(--color-pink-lighter);
}

.cancel-reasons .cancel-reason label.text:disabled{
  color: var(--color-neutral-500);
}

.cancel-reasons .cancel-reason label.text:disabled:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.cancel-reasons .cancel-reason label.circle{
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-style: none;
  background-color: var(--color-gray-lightest);
  fill: inherit;
  fill: var(--color-brand);
  padding: 0px;
}

.cancel-reasons .cancel-reason label.circle:hover{
  background-color: var(--color-gray-lighter);
}

.cancel-reasons .cancel-reason label.circle:disabled{
  cursor: auto;
  fill: var(--color-gray-lighter);
}

.cancel-reasons .cancel-reason label.circle:hover:disabled{
  background-color: var(--color-gray-lightest);
}

.cancel-reasons .cancel-reason label.circle.danger{
  background-color: var(--color-pink);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cancel-reasons .cancel-reason label.circle.danger:hover{
  background-color: var(--color-pink-dark);
}

.cancel-reasons .cancel-reason label.circle.danger:hover:disabled{
  background-color: var(--color-pink-dark);
}

.cancel-reasons .cancel-reason label.circle.info{
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cancel-reasons .cancel-reason label.circle.info:hover{
  background-color: var(--color-blue-dark);
}

.cancel-reasons .cancel-reason label.circle.info:hover:disabled{
  background-color: var(--color-blue-dark);
}

.cancel-reasons .cancel-reason label.circle.success{
  background-color: var(--color-green);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cancel-reasons .cancel-reason label.circle.success:hover{
  background-color: var(--color-green-dark);
}

.cancel-reasons .cancel-reason label.circle.success:hover:disabled{
  background-color: var(--color-green-dark);
}

.cancel-reasons .cancel-reason label.lpm{
  border-style: none;
  border-color: var(--color-lpm-green);
  background-color: var(--color-lpm-green);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cancel-reasons .cancel-reason label.lpm:hover{
  background-color: var(--color-green-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cancel-reasons .cancel-reason label.lpm:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-green-dark);
}

.cancel-reasons .cancel-reason label.lpm:active,.cancel-reasons .cancel-reason label.lpm.active{
  background-color: var(--color-green-dark);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.cancel-reasons .cancel-reason label[busy][busy\!='false'] .btn-content,.cancel-reasons .cancel-reason label[busy='true'] .btn-content {
  visibility: hidden;
}

.cancel-reasons .cancel-reason label[busy][busy\!='false'] .btn-loader,.cancel-reasons .cancel-reason label[busy='true'] .btn-loader {
  display: flex;
}

.cancel-reasons .cancel-reason label .btn-loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cancel-reasons .cancel-reason label .btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cancel-reasons .cancel-reason label{
  position: relative;
  width: 100%;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  fill: var(--color-brand);
  font-size: 0.75rem;
  color: var(--color-brand);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-brand);
}

.cancel-reasons .cancel-reason input[type='radio']:checked+label{
  background-color: var(--color-brand-light);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[id^="see-my-results-modal"] canvas {
  width: 400px !important;
  height: 400px !important;
}

details[id^="dropdown-component-"] li button.ghost {
  font-size: 1rem !important;
  font-weight: normal !important;
}

details[id^="dropdown-component-"] li button.ghost:hover {
  text-decoration-line: none !important;
}

summary::-webkit-details-marker {
  display: none;
}

.dropdown [data-toggle='open'] {
  display: block;
}

.dropdown [data-toggle='close'] {
  display: none;
}

.dropdown.show [data-toggle='open'] {
  display: none;
}

.dropdown.show [data-toggle='close'] {
  display: block;
}

label{
  margin-bottom: 0.5rem;
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--color-neutral-900);
}

@media (min-width: 1200px){

  label{
  font-size: 0.875rem;
  }
}

label[required]:after {
  content: " *";
}

input,
  select,
  textarea,
  .input {
  border: 1px solid var(--color-gray-light);
  display: block;
  width: 100%;
  border-radius: 0.375rem !important;
  border-width: 1px;
  border-color: var(--color-neutral-300);
  padding: 0.5rem;
  color: var(--color-neutral-900);
}

input::placeholder,
  select::placeholder,
  textarea::placeholder,
  .input::placeholder{
  color: var(--color-gray-lighter);
}

input,
  select,
  textarea,
  .input{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-radio{
  display: flex;
  align-items: center;
}

.form-radio input[type="radio"] {
  border: 1px solid var(--color-gray-light);
  height: 1.5rem;
  width: 1.5rem;
  appearance: none;
  border-radius: 9999px !important;
  border-width: 1px;
  border-color: var(--color-neutral-300);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-radio input[type="radio"]:checked{
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  box-shadow: inset 0 0 0 3px #FFF;
}

.form-radio label{
  margin-bottom: 0px;
  padding-left: 0.5rem;
  font-weight: 400;
  color: var(--color-neutral-800);
}

.form-control {
  border: 1px solid var(--color-gray-light);
  display: block;
  width: 100%;
  border-radius: 0.375rem !important;
  border-width: 1px;
  border-color: var(--color-neutral-300);
  padding: 0.5rem;
  color: var(--color-neutral-900);
}

.form-control::placeholder{
  color: var(--color-gray-lighter);
}

.form-control{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#autocomplete form {
  border: 1px solid var(--color-gray-light) !important;
  display: inline-flex;
  border-radius: 0.375rem !important;
  border-width: 1px !important;
  border-color: var(--color-neutral-300) !important;
}

.inline-checkbox{
  position: relative;
  display: flex;
  align-items: flex-start;
  color: var(--color-neutral-800);
}

.inline-checkbox label{
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 400;
}

@media (min-width: 1200px){

  .inline-checkbox label{
  font-size: 0.875rem;
  }
}

.inline-checkbox a{
  color: var(--color-neutral-800);
  text-decoration-line: underline;
}

label{
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--color-neutral-900);
}

input {
  border: 1px solid var(--color-gray-light);
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--color-neutral-300);
  padding: 0.5rem;
  color: var(--color-neutral-900);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.primer--checkbox,
  input[type='checkbox']{
  appearance: none;
  border: 1px solid var(--color-gray-light);
  position: relative;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--color-gray-lighter);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background-position: center;
  background-repeat: no-repeat;
}

.primer--checkbox.checkbox-lg, input[type='checkbox'].checkbox-lg {
  height: 1.5rem;
  width: 1.5rem;
}

.primer--checkbox.checkbox-sm, input[type='checkbox'].checkbox-sm {
  height: 1rem;
  width: 1rem;
  border-radius: 0.25rem;
}

.primer--checkbox:checked, input[type='checkbox']:checked {
  border: 1px solid var(--color-gray-light);
  border-width: 1px;
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  background-image: url("/assets/icons/ic_check_white-ca105f61.svg");
}

.primer--checkbox:indeterminate, input[type='checkbox']:indeterminate {
  border: 1px solid var(--color-gray-light);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-dark) / var(--tw-border-opacity, 1));
  background-image: url("/assets/icons/ic_intermediate_white-7109a555.svg");
}

input[type='checkbox'].primer--checkbox-plus {
  appearance: none;
  width: 2rem;
  height: 2rem;
  background-image: url("/assets/icons/icn-plus-checkbox-6ef75398.svg");
  background-color: #f5f8fe;
  cursor: pointer;
  border-radius: 100%;
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.1s;
}

input[type='checkbox'].primer--checkbox-plus:hover {
  background-image: url("/assets/icons/icn-plus-checkbox-6ef75398.svg");
  background-color: #cfdefb;
}

input[type='checkbox'].primer--checkbox-plus:hover.has-been-checked {
  background-image: url("/assets/icons/icn-plus-checkbox-6ef75398.svg");
  background-color: #f5f8fe;
}

input[type='checkbox'].primer--checkbox-plus:checked {
  background-image: url("/assets/icons/icn-checkbox-checked-70f914d2.svg");
}

input[type='checkbox'].primer--checkbox-plus:checked:hover {
  background-image: url("/assets/icons/icn-remove-checkbox-27c17753.svg");
}

input[type='checkbox'].primer--checkbox-plus:checked:hover.has-been-checked {
  background-image: url("/assets/icons/icn-checkbox-checked-70f914d2.svg");
}

input[type='checkbox'].primer--checkbox-plus:disabled {
  background-image: url("/assets/icons/icn-locked-checkbox-13b640f2.svg");
  cursor: default;
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus {
  background-image: url("/assets/icons/icn-checkbox-parent-71a2eb7f.svg");
  background-color: #f5f8fe;
  border-radius: 100%;
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus:hover {
  background-image: url("/assets/icons/icn-plus-checkbox-6ef75398.svg");
  background-color: white;
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus:hover.has-been-checked {
  background-image: url("/assets/icons/icn-plus-checkbox-6ef75398.svg");
  background-color: #f5f8fe;
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus:checked {
  background-image: url("/assets/icons/icn-checked-parent-55ff8912.svg");
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus:checked:hover {
  background-image: url("/assets/icons/icn-remove-parent-5a46bc66.svg");
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus:checked:hover.has-been-checked {
  background-image: url("/assets/icons/icn-checked-parent-55ff8912.svg");
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus:indeterminate {
  background-image: url("/assets/icons/icn-remove-parent-5a46bc66.svg");
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus:indeterminate:hover {
  background-image: url("/assets/icons/icn-remove-checkbox-27c17753.svg");
}

input[type='checkbox'].primer--checkbox-plus.checkall-plus:disabled {
  background-image: url("/assets/icons/icn-locked-checkall-3a2e124e.svg");
  cursor: default;
}

[data-school-autocomplete-target='form'].\!disabled input,
    [data-school-autocomplete-target='form'].\!disabled select,
    [data-school-autocomplete-target='form'].\!disabled .primer--button{
  pointer-events: none;
  background-color: var(--color-neutral-200);
}

[data-school-autocomplete-target='form'].disabled input,
    [data-school-autocomplete-target='form'].disabled select,
    [data-school-autocomplete-target='form'].disabled .primer--button{
  pointer-events: none;
  background-color: var(--color-neutral-200);
}

[data-school-autocomplete-target='form'].\!disabled input,
    [data-school-autocomplete-target='form'].\!disabled select,
    [data-school-autocomplete-target='form'].\!disabled .primer--button{
  pointer-events: none;
  background-color: var(--color-neutral-200);
}

[data-school-autocomplete-target='form'].\!disabled [type="radio"]:checked +.primer--button:hover{
  background-color: var(--color-blue-lighter);
}

[data-school-autocomplete-target='form'].disabled [type="radio"]:checked +.primer--button:hover{
  background-color: var(--color-blue-lighter);
}

.game-board{
  position: relative;
  min-height: 100vh;
  overflow-y: hidden;
  background-size: contain;
  background-position: bottom;
  background-repeat: repeat;
}

/* background-image: url("/assets/dojo/tatami-de-noel/board-background-501fed49.svg"); */

.game-board.tatami-de-noel .game-board__title {
  color: var(--color-red);
}

.game-board.tatami-de-noel .dojo-help__gradient--start {
  stop-color: var(--color-red-dark);
}

.game-board.tatami-de-noel .dojo-help__gradient--end {
  stop-color: var(--color-red);
}

/* background-image: url("/assets/dojo/tatami-ete/board-background-5a4ad8fb.svg"); */

.game-board.tatami-ete .game-board__title {
  color: var(--color-orange);
}

.game-board.tatami-ete .dojo-help__gradient--start {
  stop-color: var(--color-orange-dark);
}

.game-board.tatami-ete .dojo-help__gradient--end {
  stop-color: var(--color-orange);
}

/* background-image: url("/assets/dojo/tatami-de-printemps/board-background-971f8de5.svg"); */

.game-board.tatami-de-printemps .progress-area.selected {
  background-color: var(--color-green-light);
}

.game-board.tatami-de-printemps .dojo-help__gradient--start {
  stop-color: var(--color-green-dark);
}

.game-board.tatami-de-printemps .dojo-help__gradient--end {
  stop-color: var(--color-green);
}

.game-board.tatami-de-printemps .game-board__title {
  color: var(--color-green);
}

.game-board .image-top {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.game-board .image-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

.game-board__bird-illustration,
    .game-board__robinson-illustration {
  position: absolute;
  bottom: 4vh;
  right: 5vw;
  height: auto;
  width: 10vw;
}

.game-board__content {
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 6rem 1fr 6rem;
  grid-template-rows: 4rem 1fr;
  gap: 0px 0px;
  grid-template-areas:
        'level progress dismiss'
        'game game game';
}

@media (max-width: 576px) {
  .game-board__content {
    grid-template-columns: 1rem 1fr 1rem;
    grid-template-rows: 3rem 1fr;
    font-size: smaller
  }
}

.game-board .game-area {
  grid-area: game;
  align-self: start;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.game-board .game-area .controls {
  position: sticky;
  bottom: 2rem;
}

.game-board .games-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-board .games-stepper .games-step{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  width: 2.75rem;
}

.game-board .progress-area {
  align-self: center;
  grid-area: progress;
}

.game-board .progress-area .selected {
  transform: scale(1, 1.2);
  background-color: var(--color-orange-light);
}

.game-board .progress-area .bar {
  padding-right: 0.2rem !important;
}

.game-board .game-controls {
  position: fixed;
  text-align: center;
  width: 100%;
  bottom: 2rem;
}

.game-board .dismiss-area {
  align-self: center;
  justify-self: center;
  grid-area: dismiss;
}

.game-board .dismiss-area .dismiss-icon {
  height: 3rem;
  width: 3rem;
}

@media (max-width: 576px) {
  .game-board .dismiss-area .dismiss-icon {
    height: 3rem;
    width: 3rem
  }
}

.game-board .level-area {
  align-self: center;
  grid-area: level;
}

.game-board .footer-area {
  position: absolute;
  bottom: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-board .game-board-notification {
  height: 10rem;
  width: 20rem;
  position: absolute;
  background-color: var(--red-100);
  bottom: 3rem;
  left: 3rem;
  transition: opacity 0.55s ease-in-out;
}

.game-board .game-board-notification .dismiss-icon {
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
}

.game-board .primer--button.error,
      .game-board .primer--button.danger{
  border-style: none;
  border-color: var(--color-pink-dark);
  background-color: var(--color-pink) !important;
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.game-board .primer--button.error:hover, .game-board .primer--button.danger:hover{
  background-color: var(--color-pink-dark) !important;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.game-board .primer--button.error:focus, .game-board .primer--button.danger:focus{
  background-color: var(--color-pink) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-pink-dark);
}

.game-board .primer--button.error:active,
        .game-board .primer--button.error.active,
        .game-board .primer--button.danger:active,
        .game-board .primer--button.danger.active{
  background-color: var(--color-pink-darker) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


        .game-board .primer--button.error.\!active,
        .game-board .primer--button.danger.\!active{
  background-color: var(--color-pink-darker) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.game-board .primer--button.success{
  border-style: none;
  border-color: var(--color-green-dark);
  background-color: var(--color-green) !important;
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.game-board .primer--button.success:hover{
  background-color: var(--color-green-dark) !important;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.game-board .primer--button.success:focus{
  background-color: var(--color-green) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-green-dark);
}

.game-board .primer--button.success:active,
        .game-board .primer--button.success.active{
  background-color: var(--color-green-darker) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


        .game-board .primer--button.success.\!active{
  background-color: var(--color-green-darker) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.tatami-de-noel .belts svg, .tatami-de-printemps .belts svg, .tatami-ete .belts svg {
  width: calc(max(min(10vw, 80px), 50px));
  height: calc(max(min(10vw, 80px), 50px));
}

.tatami-de-noel .belts .yellow, .tatami-de-printemps .belts .yellow, .tatami-ete .belts .yellow {
  position: absolute;
  right: 15vw;
  top: 13vh;
  top: calc(var(--vh, 1vh) * 13);
  /* hack for ios */
}

.tatami-de-noel .belts .orange, .tatami-de-printemps .belts .orange, .tatami-ete .belts .orange {
  position: absolute;
  right: 36vw;
  top: 27vh;
  top: calc(var(--vh, 1vh) * 27);
  /* hack for ios */
}

.tatami-de-noel .belts .green, .tatami-de-printemps .belts .green, .tatami-ete .belts .green {
  position: absolute;
  right: 56vw;
  top: 34.5vh;
  top: calc(var(--vh, 1vh) * 34.5);
  /* hack for ios */
}

.tatami-de-noel .belts .blue, .tatami-de-printemps .belts .blue, .tatami-ete .belts .blue {
  position: absolute;
  right: 63vw;
  top: 51vh;
  top: calc(var(--vh, 1vh) * 51);
  /* hack for ios */
}

.tatami-de-noel .belts .brown, .tatami-de-printemps .belts .brown, .tatami-ete .belts .brown {
  position: absolute;
  right: 52vw;
  top: 65.5vh;
  top: calc(var(--vh, 1vh) * 65.5);
  /* hack for ios */
}

.tatami-de-noel .belts .black, .tatami-de-printemps .belts .black, .tatami-ete .belts .black {
  position: absolute;
  right: 35vw;
  top: 74vh;
  top: calc(var(--vh, 1vh) * 74);
  /* hack for ios */
}

.tatami-de-noel .belts .red, .tatami-de-printemps .belts .red, .tatami-ete .belts .red {
  position: absolute;
  right: 18vw;
  top: 79vh;
  top: calc(var(--vh, 1vh) * 79);
  /* hack for ios */
}

.belt.yellow .belt-background {
  stroke: #FFF4D6;
}

.belt.yellow .belt-progress {
  stroke: #FFC627;
}

.belt.yellow .light-tone {
  fill: #FFDE85;
}

.belt.yellow .mid-tone {
  fill: #FFC627;
}

.belt.yellow .strong-tone {
  fill: #fbb61f;
}

.belt.blue .belt-background {
  stroke: #E8F7FC;
}

.belt.blue .belt-progress {
  stroke: #00A1C2;
}

.belt.blue .light-tone {
  fill: #5CE4FF;
}

.belt.blue .mid-tone {
  fill: #00A1C2;
}

.belt.blue .strong-tone {
  fill: #00667A;
}

.belt.brown .belt-background {
  stroke: #FFE3D1;
}

.belt.brown .belt-progress {
  stroke: #733000;
}

.belt.brown .light-tone {
  fill: #B84D00;
}

.belt.brown .mid-tone {
  fill: #733000;
}

.belt.brown .strong-tone {
  fill: #4C2308;
}

.belt.green .belt-background {
  stroke: #DAF8F0;
}

.belt.green .belt-progress {
  stroke: #00C48C;
}

.belt.green .light-tone {
  fill: #5DEAC2;
}

.belt.green .mid-tone {
  fill: #00C48C;
}

.belt.green .strong-tone {
  fill: #027554;
}

.belt.orange .belt-background {
  stroke: #FFE3D1;
}

.belt.orange .belt-progress {
  stroke: #F46600;
}

.belt.orange .light-tone {
  fill: #FFAC70;
}

.belt.orange .mid-tone {
  fill: #F46600;
}

.belt.orange .strong-tone {
  fill: #E56610;
}

.belt.pink .belt-background, .belt.red .belt-background {
  stroke: #FBDAE8;
}

.belt.pink .belt-progress, .belt.red .belt-progress {
  stroke: #E21469;
}

.belt.pink .light-tone, .belt.red .light-tone {
  fill: #F47CAE;
}

.belt.pink .mid-tone, .belt.red .mid-tone {
  fill: #E21469;
}

.belt.pink .strong-tone, .belt.red .strong-tone {
  fill: #960D46;
}

.belt.purple .belt-background {
  stroke: #d5d0f7;
}

.belt.purple .belt-progress {
  stroke: #211287;
}

.belt.purple .light-tone {
  fill: #806FEB;
}

.belt.purple .mid-tone {
  fill: #211287;
}

.belt.purple .strong-tone {
  fill: #190E66;
}

.belt.black .belt-background {
  stroke: #DDDEE3;
}

.belt.black .belt-progress {
  stroke: #43404F;
}

.belt.black .light-tone {
  fill: #7D7891;
}

.belt.black .mid-tone {
  fill: #43404F;
}

.belt.black .strong-tone {
  fill: #26242d;
}

.tatami {
  position: relative;
}

.tatami__wave-container {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.tatami__image-wrapper {
  position: absolute;
}

@media (max-width: 576px) {
  .tatami__image-wrapper {
    display: none
  }
}

.tatami__image-wrapper--left {
  left: 0;
  top: 40%;
}

.tatami__image-wrapper--right {
  position: absolute;
  right: 0;
  top: 20%;
}

.tatami__image--left {
  clip-path: url(#tatami-clip-left);
}

.tatami__image--right {
  clip-path: url(#tatami-clip-right);
  position: absolute;
  top: 0;
  right: 0;
}

.tatami__dojo {
  max-width: 60%;
  margin: 0 auto 8%;
  text-align: center;
  position: relative;
}

.tatami__dojo--grid {
  grid-row-gap: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.tatami__dojo--grid>* {
  flex: 1 0 26%;
}

@media (max-width: 576px) {
  .tatami__dojo--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 4px
  }

  .tatami__dojo--grid> :nth-child(1),
          .tatami__dojo--grid> :nth-child(4),
          .tatami__dojo--grid> :nth-child(7),
          .tatami__dojo--grid> :last-child {
    grid-column: span 2;
  }
}

.tatami__illustration {
  position: absolute;
}

@media (max-width: 576px) {
  .tatami__illustration {
    display: none
  }
}

.tatami__illustration--bottom {
  bottom: 54%;
  right: 20%;
}

.tatami__illustration--left {
  left: -23px;
  top: -115px;
}

.tatami__illustration--right {
  right: -7px;
  top: -100px;
}

.tatami-card .belts {
  transform: scale(0.5);
}

.multi-acrostiche-container{
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.acrostiche{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.acrostiche:not(.hinted) .acrostiche__letter::placeholder{
  color: transparent !important;
}

.acrostiche:not(.hinted) .acrostiche__letter.error{
  border-width: 2px;
  border-color: var(--color-pink) !important;
  background-color: var(--color-pink-lighter) !important;
  font-size: calc(0.85rem + 0.53333vw);
  color: var(--color-neutral-600);
}

@media (min-width: 1200px){

  .acrostiche:not(.hinted) .acrostiche__letter.error{
  font-size: 1.25rem;
  }
}

.acrostiche__letter{
  height: 2.5rem;
  width: 2rem;
  border-radius: 0.5rem;
  border-width: 2px !important;
  border-color: var(--color-neutral-400);
  padding: 0px !important;
  text-align: center;
  font-size: calc(0.9rem + 0.8vw) !important;
  text-transform: capitalize;
  color: var(--color-neutral-600);
}

@media (min-width: 1200px){

  .acrostiche__letter{
  font-size: 1.5rem !important;
  }
}

@media (min-width: 576px){
  .acrostiche__letter{
    height: 3rem;
    width: 2.5rem;
  }
}

@media (min-width: 992px){
  .acrostiche__letter{
    height: 4rem;
    width: 3.5rem;
  }
}

.acrostiche__letter:first-child{
  margin-left: 0px;
}

.acrostiche__letter:last-child{
  margin-right: 0px;
}

.acrostiche__letter:focus{
  border-width: 2px !important;
  border-color: var(--color-blue) !important;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.acrostiche__letter:disabled{
  background-color: transparent;
  color: var(--color-neutral-600);
}

.acrostiche__letter.success{
  border-width: 2px;
  border-color: var(--color-green) !important;
  background-color: var(--color-green-lighter) !important;
  font-size: calc(0.85rem + 0.53333vw);
  color: var(--color-neutral-600);
}

@media (min-width: 1200px){

  .acrostiche__letter.success{
  font-size: 1.25rem;
  }
}

.acrostiche.completed .acrostiche__instruction {
}

.acrostiche.\!completed .acrostiche__instruction {
}

.acrostiche .acrostiche__letter{
  height: 2.5rem;
  width: 2rem;
  text-align: center;
  font-size: calc(0.8rem + 0.26667vw);
}

@media (min-width: 1200px){

  .acrostiche .acrostiche__letter{
  font-size: 1rem;
  }
}

@media (min-width: 576px){
  .acrostiche .acrostiche__letter{
    height: 3rem;
    width: 2.5rem;
  }
}

@media (min-width: 992px){
  .acrostiche .acrostiche__letter{
    height: 4rem;
    width: 3.5rem;
  }
}

.acrostiche .acrostiche__instruction {
  text-align: left;
}

.acrostiche.completed .acrostiche__letter {
  background-color: white;
}

.acrostiche.\!completed .acrostiche__letter {
  background-color: white !important;
}

.acrostiche.completed .acrostiche__letter:first-child {
  background-color: white;
  text-transform: uppercase;
}

.acrostiche.\!completed .acrostiche__letter:first-child {
  background-color: white !important;
  text-transform: uppercase !important;
}

.\!intruder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  line-height: 2rem;
}

.intruder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  line-height: 2rem;
}

.\!intruder .intruder-word{
  margin: 0.5rem;
  min-width: 10rem;
}

.intruder .intruder-word{
  margin: 0.5rem;
  min-width: 10rem;
}

@media (max-width: 576px) {
  .\!intruder .intruder-word{
    min-width: 8rem;
  }

  .intruder .intruder-word{
    min-width: 8rem;
  }
}

.punctuation{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.punctuation .punctuation__sentences{
  line-height: 2.5rem;
}

.punctuation:not(.hinted) .punctuation__input::placeholder{
  color: transparent !important;
}

.punctuation .punctuation__input{
  display: inline !important;
  width: 2.5rem !important;
  border-radius: 0.25rem;
  border-width: 2px !important;
  border-style: solid;
  border-color: var(--color-gray);
  background-color: transparent;
  padding: 0.25rem !important;
  text-align: center;
  font-size: calc(0.9rem + 0.8vw);
}

@media (min-width: 1200px){

  .punctuation .punctuation__input{
  font-size: 1.5rem;
  }
}

.punctuation .punctuation__input:focus{
  border-color: var(--color-blue);
  background-color: transparent;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.punctuation .correct-answer{
  display: inline-flex !important;
  height: 2.5rem;
  width: 2.5rem !important;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 2px !important;
  border-style: solid;
  border-color: var(--color-green);
  background-color: var(--color-green-lighter);
  padding: 0.25rem !important;
  text-align: center;
  font-size: calc(0.9rem + 0.8vw);
}

@media (min-width: 1200px){

  .punctuation .correct-answer{
  font-size: 1.5rem;
  }
}

.punctuation.error:not(.hinted) [data-correct-answer='false'].error{
  border-color: var(--color-pink);
  background-color: var(--color-pink-lighter);
}

.punctuation.error [data-correct-answer='true']{
  border-color: var(--color-green);
  background-color: var(--color-green-lighter);
}

.punctuation .punctuation__buttons{
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
}

.sort-sentence{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  line-height: 2rem;
}

.sort-sentence.hinted .sentences .sentence-block .sentence-hint{
  display: block;
}

.sort-sentence .sentences{
  min-width: 30rem;
}

@media (max-width: 576px) {
  .sort-sentence .sentences{
    width: 100%;
    min-width: auto;
  }
}

.sort-sentence .sentences .sentence-block{
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.8;
  padding: 0.5rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 992px){
  .sort-sentence .sentences .sentence-block{
    padding: 1rem;
  }
}

.sort-sentence .sentences .sentence-block .sentence-content{
  flex-grow: 1;
  cursor: grab;
}

@media (min-width: 992px){
  .sort-sentence .sentences .sentence-block .sentence-content{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 576px) {
  .sort-sentence .sentences .sentence-block .sentence-content{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.sort-sentence .sentences .sentence-block .sentence-hint{
  display: none;
  padding-left: 1.5rem;
  color: var(--color-green);
}

.sort-sentence .sentences .sentence-block .sentence-controls{
  display: flex;
  cursor: pointer;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0px;
  padding-bottom: 0px;
}

@media (min-width: 992px){
  .sort-sentence .sentences .sentence-block .sentence-controls{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.sort-sentence .sentences .sentence-block.dragged{
  background-color: var(--color-neutral-300);
}

.sort-sentence .sentences>.sentence-block:first-child .up{
  display: none;
}

.sort-sentence .sentences>.sentence-block:last-child .down{
  display: none;
}

.sort-sentence .completed{
  justify-content: flex-start;
}

.sort-sentence .\!completed{
  justify-content: flex-start;
}

.sort-sentence .completed.sentences .sentence-block {
  border: 1px solid var(--color-gray-light);
  border-width: 2px;
  border-color: var(--color-green);
  background-color: var(--color-green-lighter);
}

.sort-sentence .\!completed.sentences .sentence-block {
  border: 1px solid var(--color-gray-light);
  border-width: 2px;
  border-color: var(--color-green);
  background-color: var(--color-green-lighter);
}

.sort-sentence.error .sentence-block[data-correct-answer='false'] {
  border: 1px solid var(--color-gray-light);
  border-width: 2px;
  border-color: var(--color-pink);
  background-color: var(--color-pink-lighter);
}

.sort-sentence.error .sentence-block[data-correct-answer='true'] {
  border: 1px solid var(--color-gray-light);
  border-width: 2px;
  border-color: var(--color-green);
  background-color: var(--color-green-lighter);
}

.sort-sentence.error .grip, .sort-sentence.success .grip{
  fill: var(--color-neutral-500);
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* Just in case `pointer-events: none` is set on a parent */
  pointer-events: auto;
  content: '';
  /* IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color */
  background-color: rgba(0, 0, 0, 0);
}

.\!completed+.popup-zone{
  display: none;
}

@media (min-width: 768px){
  .\!completed+.popup-zone{
    display: block;
  }
}

.completed+.popup-zone{
  display: none;
}

@media (min-width: 768px){
  .completed+.popup-zone{
    display: block;
  }
}

.\!completed+.popup-zone .plumi-section{
  bottom: 1.5rem;
  top: auto;
}

.completed+.popup-zone .plumi-section{
  bottom: 1.5rem;
  top: auto;
}

.\!completed+.popup-zone .popup-zone-card{
  display: none;
}

.completed+.popup-zone .popup-zone-card{
  display: none;
}

.popup-zone{
  position: relative;
  z-index: 10;
  display: flex;
  width: 16rem;
  flex-direction: column;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  font-size: 0.75rem;
}

.popup-zone .popup-zone-card{
  position: relative;
  width: 100%;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.popup-zone .plumi-section{
  position: absolute;
  top: -3rem;
  left: -1.5rem;
  z-index: 0;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px){
  .popup-zone .plumi-section{
    top: -70px;
    left: 20%;
  }
}

.popup-zone .plumi-section svg{
  height: 6rem;
}

@media (min-width: 768px){
  .popup-zone .plumi-section svg{
    height: 9rem;
  }
}

.popup-zone .plumi-section .speech-bubble{
  position: absolute;
  bottom: 10rem;
  left: 2rem;
  right: -2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: 0;
}

@media (min-width: 768px){
  .popup-zone .plumi-section .speech-bubble{
    left: 0.5rem;
    right: 0px;
  }
}

.popup-zone .plumi-section .speech-bubble:after{
  position: absolute;
  bottom: 0px;
  left: 0.5rem;
  margin-bottom: -0.5rem;
  height: 0px;
  width: 0px;
}

@media (min-width: 768px){
  .popup-zone .plumi-section .speech-bubble:after{
    left: auto;
  }
}

.popup-zone .plumi-section .speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  border: 8px solid transparent;
  border-bottom: 0;
}

.popup-zone .plumi-section .speech-bubble.success-bubble{
  background-color: var(--color-green-lighter);
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 700;
  color: var(--color-green);
  opacity: 1;
}

@media (min-width: 1200px){

  .popup-zone .plumi-section .speech-bubble.success-bubble{
  font-size: 0.875rem;
  }
}

.popup-zone .plumi-section .speech-bubble.success-bubble:after {
  border-top-color: var(--color-green-lighter);
}

.popup-zone .plumi-section .speech-bubble.danger-bubble{
  background-color: var(--color-pink-lighter);
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 700;
  color: var(--color-pink);
  opacity: 1;
}

@media (min-width: 1200px){

  .popup-zone .plumi-section .speech-bubble.danger-bubble{
  font-size: 0.875rem;
  }
}

.popup-zone .plumi-section .speech-bubble.danger-bubble:after {
  border-top-color: var(--color-pink-lighter);
}

.popup-zone .plumi-section{
  position: absolute;
  top: -3rem;
  z-index: 0;
  height: 9rem;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px){
  .popup-zone .plumi-section{
    top: -70px;
  }
}

.popup-zone .popup-zone-header{
  position: relative;
  z-index: 0;
  display: flex;
  height: 5rem;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.popup-zone .popup-zone-header:hover .popup-zone-title{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.popup-zone .popup-zone-header .popup-zone-title{
  margin-bottom: 0px;
  text-align: center;
  color: var(--color-brand);
}

.popup-zone .popup-zone-header .popup-zone-icon{
  height: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.popup-zone .popup-zone-content{
  font-size: calc(0.775rem + 0.13333vw);
  max-height: 0px;
  overflow: hidden;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-weight: 500;
  color: var(--color-neutral-600);
  opacity: 0;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1200px){

  .popup-zone .popup-zone-content{
  font-size: 0.875rem;
  }
}

.popup-zone.expanded .plumi-section{
  top: -4rem;
}

@media (min-width: 768px){
  .popup-zone.expanded .plumi-section{
    top: -95px;
  }
}

.popup-zone.\!expanded .plumi-section{
  top: -4rem;
}

@media (min-width: 768px){
  .popup-zone.\!expanded .plumi-section{
    top: -95px;
  }
}

.popup-zone.expanded .popup-zone-content{
  margin-bottom: 0px;
  max-height: 40rem;
  padding-bottom: 1rem;
  opacity: 1;
}

.popup-zone.\!expanded .popup-zone-content{
  margin-bottom: 0px;
  max-height: 40rem;
  padding-bottom: 1rem;
  opacity: 1;
}

.popup-zone.expanded .popup-zone-icon{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.popup-zone.\!expanded .popup-zone-icon{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* mobile screen */

@media (max-width: 576px) {
  .popup-zone{
    width: auto;
    font-size: 0.75rem;
  }

  .popup-zone .popup-zone-header{
    height: 3.5rem;
  }

  .popup-zone-bottom{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
  }
}

/* TODO: Refacto */

.plumi-section{
  position: fixed;
  bottom: 1.5rem;
  left: -1rem;
  z-index: 0;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px){
  .plumi-section{
    left: 4rem;
  }
}

.plumi-section svg{
  height: 6rem;
}

@media (min-width: 768px){
  .plumi-section svg{
    height: 9rem;
  }
}

.plumi-section .speech-bubble{
  position: absolute;
  bottom: 10rem;
  left: 0px;
  right: 0px;
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.plumi-section .speech-bubble:after{
  bottom: 0px;
  margin-bottom: -0.5rem;
  height: 0px;
  width: 0px;
  content: '';
  position: absolute;
  bottom: 0;
  border: 8px solid transparent;
  border-bottom: 0;
}

.plumi-section .speech-bubble.success-bubble{
  background-color: var(--color-green-lighter);
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 700;
  color: var(--color-green);
}

@media (min-width: 1200px){

  .plumi-section .speech-bubble.success-bubble{
  font-size: 0.875rem;
  }
}

.plumi-section .speech-bubble.success-bubble:after {
  border-top-color: var(--color-green-lighter);
}

.plumi-section .speech-bubble.danger-bubble{
  background-color: var(--color-pink-lighter);
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 700;
  color: var(--color-pink);
}

@media (min-width: 1200px){

  .plumi-section .speech-bubble.danger-bubble{
  font-size: 0.875rem;
  }
}

.plumi-section .speech-bubble.danger-bubble:after {
  border-top-color: var(--color-pink-lighter);
}

.range {
  --range-color: var(--color-gray);
  --range-progress: 0%;
  -webkit-appearance: none;
  background-color: transparent;
}

.range.range-blue {
  --range-color: var(--color-blue);
}

.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px hsl(219, 14.1%, 27.8%), 0 0 0 4px var(--range-color);
}

.range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px hsl(219, 14.1%, 27.8%), 0 0 0 4px var(--range-color);
}

.range::-webkit-slider-runnable-track{
  height: 0.125rem;
  width: 100%;
  border-radius: 1rem;
  background: linear-gradient(
      90deg,
      var(--range-color) var(--range-progress),
      var(--color-gray-light) var(--range-progress)
    );
}

.range::-moz-range-track{
  height: 0.125rem;
  width: 100%;
  border-radius: 1rem;
  background-color: var(--color-gray-light);
}

.range::-moz-range-progress {
  border-radius: 1rem;
  background-color: var(--range-color);
}

.range::-webkit-slider-thumb {
  background-color: var(--range-color);
  position: relative;
  height: 1.25rem;
  width: 1.25rem;
  border-style: none;
  -webkit-transition-property: all;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1rem;
  -webkit-appearance: none;
  top: 50%;
  transform: translateY(-50%);
}

.range::-moz-range-thumb {
  background-color: var(--range-color);
  border-radius: 1rem;
  position: relative;
  height: 1.25rem;
  width: 1.25rem;
  border-style: none;
  -moz-transition-property: all;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  top: 50%;
}

.progression-bar-track{
  background-color: var(--color-neutral-200);
}

.fake.unreached-bar {
  width: 25%;
}

.fake.unreached-bar .progression-bar-fill {
  background-color: var(--color-pink);
}

.fake.partially-achieved-bar {
  width: 50%;
}

.fake.partially-achieved-bar .progression-bar-fill {
  background-color: var(--color-yellow);
}

.fake.achieved-bar {
  width: 75%;
}

.fake.achieved-bar .progression-bar-fill {
  background-color: var(--color-green);
}

.fake.exceeded-bar {
  width: 90%;
}

.fake.exceeded-bar .progression-bar-fill {
  background-color: var(--color-green-dark);
}

.unreached-bar {
}

.partially-achieved-bar{
  left: 50%;
  right: 50%;
}

.achieved-bar{
  left: 75%;
  right: 75%;
}

.exceeded-bar {
  left: 90%;
}

/* Font size variations with responsive values */

.body{
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
}

.title{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
}

.alice{
  font-weight: 400;
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--secondary-font);
}

/* New body class */

.body--xs{
  font-size: 0.625rem;
}

.body--sm{
  font-size: 0.75rem;
}

.body--md{
  font-size: calc(0.775rem + 0.13333vw);
}

@media (min-width: 1200px){

  .body--md{
  font-size: 0.875rem;
  }
}

.\!body--lg{
  font-size: calc(0.8rem + 0.26667vw);
}

@media (min-width: 1200px){

  .\!body--lg{
  font-size: 1rem;
  }
}

.body--lg{
  font-size: calc(0.8rem + 0.26667vw);
}

@media (min-width: 1200px){

  .body--lg{
  font-size: 1rem;
  }
}

.body--light {
  color: var(--color-gray);
}

.body--lighter {
  color: var(--color-gray-light);
}

/* New title class */

.title--xs{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
  font-size: 0.625rem;
}

.title--md{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
  font-size: calc(0.775rem + 0.13333vw);
}

@media (min-width: 1200px){

  .title--md{
  font-size: 0.875rem;
  }
}

.title--lg{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
  font-size: calc(0.8rem + 0.26667vw);
}

@media (min-width: 1200px){

  .title--lg{
  font-size: 1rem;
  }
}

.headline--xl{
  font-family: var(--headline-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: calc(0.975rem + 1.2vw);
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}

@media (min-width: 1200px){

  .headline--xl{
  font-size: 1.875rem;
  }
}

.headline{
  font-family: var(--headline-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: calc(0.85rem + 0.53333vw);
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}

@media (min-width: 1200px){

  .headline{
  font-size: 1.25rem;
  }
}

/* Alice  */

.alice--sm{
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--secondary-font);
  font-size: calc(0.9rem + 0.8vw);
  line-height: 1.75;
}

@media (min-width: 1200px){

  .alice--sm{
  font-size: 1.5rem;
  }
}

.alice--md{
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--secondary-font);
  font-size: calc(0.95rem + 1.06667vw);
  line-height: 1.75;
}

@media (min-width: 1200px){

  .alice--md{
  font-size: 1.75rem;
  }
}

.alice--lg{
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--secondary-font);
  font-size: calc(1rem + 1.33333vw);
  line-height: 1.75;
}

@media (min-width: 1200px){

  .alice--lg{
  font-size: 2rem;
  }
}

/* Open dys variations */

.product-tour-popover{
  z-index: 999999999;
  max-width: 28rem;
  border-radius: 0.75rem;
  background-color: var(--color-yellow-lighter);
  padding: 1rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.product-tour-popover .steps-count{
  display: none;
}

.product-tour-popover .shepherd-title{
  margin-bottom: 0px;
  display: flex;
  align-items: flex-start;
}

.product-tour-popover .shepherd-cancel-icon{
  display: none;
}

.product-tour-popover .shepherd-arrow {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-bottom: 10px solid var(--color-yellow-lighter) !important;
}

.product-tour-popover .shepherd-arrow::after {
  display: none !important;
}

.product-tour-popover .shepherd-footer{
  margin-top: 1rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.product-tour-popover[data-popper-placement^='right'] .shepherd-arrow {
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-right: 10px solid var(--color-yellow-lighter) !important;
  border-left: 0 !important;
  left: -10px !important;
}

.product-tour-popover[data-popper-placement^='left'] .shepherd-arrow {
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-left: 10px solid var(--color-yellow-lighter) !important;
  border-right: 0 !important;
  right: -10px !important;
}

.product-tour-popover[data-popper-placement^='top'] .shepherd-arrow {
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-top: 10px solid var(--color-yellow-lighter) !important;
  border-bottom: 0 !important;
  bottom: -10px !important;
}

.product-tour-popover[data-popper-placement^='right'] {
  animation: pointing-left 1s ease-in-out infinite;
}

.product-tour-popover[data-popper-placement^='left'] {
  animation: pointing-right 1s ease-in-out infinite;
}

.product-tour-popover[data-popper-placement^='top'] {
  animation: pointing-bottom 1s ease-in-out infinite;
}

.product-tour-popover[data-popper-placement^='bottom'] {
  animation: pointing-top 1s ease-in-out infinite;
}

.plume-product-tour.lpm_2025{
  overflow: hidden;
  border-radius: 0.75rem;
  padding: 0px;
}

.plume-product-tour.lpm_2025 .shepherd-header{
  position: relative;
  height: 50%;
}

.plume-product-tour.lpm_2025 .shepherd-header .steps-count{
  display: none;
}

.plume-product-tour.lpm_2025 .shepherd-header .shepherd-cancel-icon{
  display: none;
}

.plume-product-tour.lpm_2025 .shepherd-header .product-tour-image{
  margin-bottom: 0px;
  margin-top: -1px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.plume-product-tour.lpm_2025 .shepherd-header .shepherd-title{
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.5rem;
  text-align: left !important;
}

.plume-product-tour.lpm_2025 .shepherd-content .shepherd-text{
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: left;
}

.plume-product-tour.lpm_2025 .shepherd-footer{
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem !important;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

.plume-product-tour{
  z-index: 999999999;
  width: 100% !important;
  max-width: 32rem !important;
  border-radius: 0.75rem !important;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

@media (min-width: 768px){
  .plume-product-tour{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 992px){
  .plume-product-tour{
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.plume-product-tour .shepherd-content .shepherd-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

/* background-color: white; */

.plume-product-tour .shepherd-content .shepherd-header .product-tour-image{
  margin-bottom: 1.5rem;
}

.plume-product-tour .shepherd-content .shepherd-header .shepherd-title{
  display: flex;
  padding-bottom: 1rem;
  text-align: center;
  font-family: var(--headline-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: calc(0.85rem + 0.53333vw);
  font-weight: 700;
  color: var(--color-brand);
}

@media (min-width: 1200px){

  .plume-product-tour .shepherd-content .shepherd-header .shepherd-title{
  font-size: 1.25rem;
  }
}

.plume-product-tour .shepherd-content .shepherd-header .shepherd-cancel-icon{
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  margin: 0px;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: calc(0.975rem + 1.2vw);
  color: var(--color-neutral-500);
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 1200px){

  .plume-product-tour .shepherd-content .shepherd-header .shepherd-cancel-icon{
  font-size: 1.875rem;
  }
}

.plume-product-tour .shepherd-content .shepherd-header .shepherd-cancel-icon:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.4853 3.51472C21.0711 4.10051 21.0711 5.05025 20.4853 5.63604L5.63608 20.4853C5.0503 21.0711 4.10055 21.0711 3.51476 20.4853C2.92898 19.8995 2.92898 18.9497 3.51476 18.364L18.364 3.51472C18.9498 2.92893 19.8995 2.92893 20.4853 3.51472Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.4853 20.4853C19.8996 21.0711 18.9498 21.0711 18.364 20.4853L3.51478 5.63605C2.92899 5.05027 2.92899 4.10052 3.51478 3.51473C4.10057 2.92894 5.05031 2.92894 5.6361 3.51473L20.4853 18.364C21.0711 18.9498 21.0711 19.8995 20.4853 20.4853Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  fill: var(--color-brand);
}

.plume-product-tour .shepherd-content .shepherd-header .shepherd-cancel-icon span {
  display: none;
}

.plume-product-tour .shepherd-content .shepherd-text{
  text-align: center;
}

.plume-product-tour .shepherd-content .shepherd-footer{
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plume-product-tour .shepherd-content .shepherd-footer .shepherd-button-secondary{
  order: 2;
  margin: 0px !important;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  height: 100vh;
  opacity: 0.5;
  transform: translateZ(0);
  transition:
      all 0.3s ease-out,
      height 0s 0s,
      opacity 0.3s 0s;
}

.shepherd-modal-overlay-container {
  height: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition:
      all 0.3s ease-out,
      height 0ms 0.3s,
      opacity 0.3s 0ms;
  width: 100vw;
  z-index: 9997;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
  pointer-events: all;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  height: 100vh;
  opacity: 0.5;
  transform: translateZ(0);
  transition:
      all 0.3s ease-out,
      height 0s 0s,
      opacity 0.3s 0s;
}

.product-tour-stick-to-bottom {
  position: sticky !important;
  bottom: 0 !important;
  transform: none !important;
  top: unset !important;
  left: 0 !important;
  right: 0 !important;
}

.product-tour-stick-to-bottom .shepherd-content {
  width: 100vw !important;
}

.product-tour-stick-to-bottom .shepherd-content .shepherd-text p {
  font-size: 1.3rem;
  line-height: 1.6rem;
}

.product-tour-stick-to-bottom{
  max-width: none !important;
}

.shepherd-element .shepherd-arrow {
  border-width: 0;
  height: auto;
  width: auto;
}

.shepherd-arrow::before {
  display: none !important;
}

.shepherd-element .shepherd-arrow::after {
  content: url("/assets/product_tour_arrow-d79686ea.svg");
  display: inline-block;
}

.shepherd-element[data-popper-placement^='top'] .shepherd-arrow,
  .shepherd-element.shepherd-pinned-top .shepherd-arrow {
  bottom: -10px !important;
}

.shepherd-element[data-popper-placement^='top'] .shepherd-arrow::after,
  .shepherd-element.shepherd-pinned-top .shepherd-arrow::after {
  transform: rotate(270deg);
}

.shepherd-element[data-popper-placement^='bottom'] .shepherd-arrow {
  top: -10px !important;
}

.shepherd-element[data-popper-placement^='bottom'] .shepherd-arrow::after {
  transform: rotate(90deg);
}

.shepherd-element[data-popper-placement^='left'] .shepherd-arrow,
  .shepherd-element.shepherd-pinned-left .shepherd-arrow {
  right: -10px !important;
}

.shepherd-element[data-popper-placement^='left'] .shepherd-arrow::after,
  .shepherd-element.shepherd-pinned-left .shepherd-arrow::after {
  transform: rotate(180deg);
}

.shepherd-element[data-popper-placement^='right'] .shepherd-arrow,
  .shepherd-element.shepherd-pinned-right .shepherd-arrow {
  left: -10px !important;
}

@keyframes shake {
  10%,
    90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
    80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
    50%,
    70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
    60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
    to {
    border-color: transparent;
  }

  50% {
    border-color: orange;
  }
}

table{
  min-width: 100%;
}

table > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
  border-style: solid;
  border-color: var(--bg-color-base);
}

table{
  border-radius: 0.5rem;
}

table thead{
  border-left-width: 0px;
  border-right-width: 0px;
}

table th{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

table tbody > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
  border-style: solid;
  border-color: var(--bg-color-base);
}

table tbody{
  border-left-width: 0px;
  border-right-width: 0px;
}

table tr{
  border-left-width: 0px;
  border-right-width: 0px;
}

table td{
  border-left-width: 0px;
  border-right-width: 0px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (max-width: 767px) {
  table{
    border-width: 0px;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  table thead{
    position: absolute;
    margin: -1px;
    height: 1px;
    width: 1px;
    overflow: hidden;
    border-width: 0px;
    padding: 0px;
    /* clip: rect(0 0 0 0); */
  }

  table tr{
    margin-bottom: 1rem;
    display: block;
  }

  table td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-width: 0px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: right;
    font-size: 0.75rem;
  }

  table td::before{
    font-weight: 700;
    text-transform: uppercase;
    content: attr(data-label);
  }
}

.primer--tag.bonus{
  background-color: var(--color-yellow-lighter);
  font-family: var(--headline-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  color: var(--color-orange);
}

.form--text-editor {
  border: 1px solid var(--color-gray-light);
  display: block;
  width: 100%;
  border-radius: 0.375rem !important;
  border-width: 1px;
  border-color: var(--color-neutral-300);
  padding: 0.5rem;
  color: var(--color-neutral-900);
}

.form--text-editor::placeholder{
  color: var(--color-gray-lighter);
}

.form--text-editor{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form--text-editor.highlight-mode-punctuation .ProseMirror[contenteditable='true'] {
  cursor: url("/assets/cursors/cursor_punctuation-979bbc57.svg") 8 16, auto;
}

.form--text-editor.highlight-mode-spelling .ProseMirror[contenteditable='true'] {
  cursor: url("/assets/cursors/cursor_spelling-1255b71d.svg") 8 16, auto;
}

.form--text-editor.highlight-mode-homophone .ProseMirror[contenteditable='true'] {
  cursor: url("/assets/cursors/cursor_homophone-6dad0f1c.svg") 8 16, auto;
}

.form--text-editor.highlight-mode-agreement .ProseMirror[contenteditable='true'] {
  cursor: url("/assets/cursors/cursor_agreement-77e3cd2f.svg") 8 16, auto;
}

.form--text-editor.highlight-mode-conjugation .ProseMirror[contenteditable='true'] {
  cursor: url("/assets/cursors/cursor_conjugation-e6a692be.svg") 8 16, auto;
}

.form--text-editor.highlight-mode-syntax .ProseMirror[contenteditable='true'] {
  cursor: url("/assets/cursors/cursor_syntax-4a3f109a.svg") 8 16, auto;
}

.form--text-editor.highlight-mode-expression .ProseMirror[contenteditable='true'] {
  cursor: url("/assets/cursors/cursor_expression-ac7a998b.svg") 8 16, auto;
}

.form--text-editor.highlight-mode-punctuation .ProseMirror[contenteditable='true'] {
  cursor: url("/assets/cursors/cursor_punctuation-979bbc57.svg") 8 16, auto;
}

.form--text-editor #highlight-colors .highlight-button{
  margin-right: 0.5rem;
  display: flex;
  cursor: pointer;
  align-items: center;
  padding: 0.25rem;
  font-size: 0.75rem;
}

.form--text-editor #highlight-colors .highlight-button.active{
  border-radius: 0.5rem;
  background-color: var(--bg-color-base);
}

.form--text-editor #highlight-colors .highlight-button.\!active{
  border-radius: 0.5rem;
  background-color: var(--bg-color-base);
}

.form--text-editor mark[data-tip-tap-target='highlighted'] mark[data-diff]{
  color: var(--color-neutral-800) !important;
}

.form--text-editor mark[data-diff]{
  background-color: transparent;
  color: var(--color-green);
}

.form--text-editor.kid-content mark[data-diff] {
  /* the changes for the kid content in the correction space are in blue */
  background-color: transparent;
  color: var(--color-blue);
}

.form--text-editor mark[data-color]{
  color: var(--color-gray-dark) !important;
}

.form--text-editor mark[data-color][data-color='spelling'] {
  background-color: var(--color-highlight-green) !important;
}

.form--text-editor mark[data-color][data-color='homophone'] {
  background-color: var(--color-highlight-pink) !important;
}

.form--text-editor mark[data-color][data-color='agreement'] {
  background-color: var(--color-highlight-red) !important;
}

.form--text-editor mark[data-color][data-color='conjugation'] {
  background-color: var(--color-highlight-orange) !important;
}

.form--text-editor mark[data-color][data-color='syntax'] {
  background-color: var(--color-highlight-yellow) !important;
}

.form--text-editor mark[data-color][data-color='expression'] {
  background-color: var(--color-highlight-blue-light) !important;
}

.form--text-editor mark[data-color][data-color='punctuation'] {
  background-color: var(--color-highlight-brown) !important;
}

.form--text-editor mark[data-color][data-color='border-spelling'] {
  background-color: transparent !important;
  border: 1px solid var(--color-highlight-green);
}

.form--text-editor mark[data-color][data-color='border-homophone'] {
  background-color: transparent !important;
  border: 1px solid var(--color-highlight-pink);
}

.form--text-editor mark[data-color][data-color='border-agreement'] {
  background-color: transparent !important;
  border: 1px solid var(--color-highlight-red);
}

.form--text-editor mark[data-color][data-color='border-conjugation'] {
  background-color: transparent !important;
  border: 1px solid var(--color-highlight-orange);
}

.form--text-editor mark[data-color][data-color='border-syntax'] {
  background-color: transparent !important;
  border: 1px solid var(--color-highlight-yellow);
}

.form--text-editor mark[data-color][data-color='border-expression'] {
  background-color: transparent !important;
  border: 1px solid var(--color-highlight-blue-light);
}

.form--text-editor mark[data-color][data-color='border-punctuation'] {
  background-color: transparent !important;
  border: 1px solid var(--color-highlight-brown);
}

.highlight-sample{
  margin-right: 0.5rem !important;
  margin-left: 0px !important;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
}

.highlight-sample.spelling {
  background: var(--color-highlight-green);
}

.highlight-sample.homophone {
  background: var(--color-highlight-pink);
}

.highlight-sample.agreement {
  background: var(--color-highlight-red);
}

.highlight-sample.conjugation {
  background: var(--color-highlight-orange);
}

.highlight-sample.syntax {
  background: var(--color-highlight-yellow);
}

.highlight-sample.expression {
  background: var(--color-highlight-blue-light);
}

.highlight-sample.punctuation {
  background: var(--color-highlight-brown);
}

mark {
  background: unset;
}

.centered .trix-content * {
  text-align: center;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper__step{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  width: 2.75rem;
}

.stepper__bar{
  height: 0.75rem;
  border-radius: 9999px;
  background-color: var(--color-green);
}

.stepper__bar.prev{
  background-color: var(--color-green);
}

.stepper__bar.current{
  background-color: var(--color-green-light);
}

.stepper__bar.next{
  background-color: var(--color-neutral-300);
}

.kid-link{
  display: flex;
  height: 3rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}

.kid-link:hover{
  color: var(--color-blue);
}

.kid-link a{
  display: flex;
  height: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  font-size: calc(0.775rem + 0.13333vw);
  color: inherit !important;
  text-decoration-line: none !important;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1200px){

  .kid-link a{
  font-size: 0.875rem;
  }
}

.kid-link a .link-icon{
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
}

@media (min-width: 576px){
  .kid-link a .link-icon{
    margin-right: 0.75rem;
  }
}

.kid-link a .link-icon svg{
  position: absolute;
  height: auto;
  width: 2rem;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.kid-link a .link-text{
  margin-right: 0.75rem;
  display: none;
}

@media (min-width: 768px){
  .kid-link a .link-text{
    display: block;
  }
}

@media (min-width: 992px){
  .kid-link a .link-text{
    margin-right: 2rem;
  }
}

.kid-link .link-icon-active{
  opacity: 0;
}

.kid-link .link-icon-muted{
  opacity: 1;
}

.kid-link:hover .link-icon-muted{
  opacity: 0;
}

.kid-link:hover .link-icon-active{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0.7;
}

.kid-link.active{
  font-weight: 700;
}

.kid-link.\!active{
  font-weight: 700;
}

.kid-link.active .link-icon-muted{
  opacity: 0;
}

.kid-link.\!active .link-icon-muted{
  opacity: 0;
}

.kid-link.active .link-icon-active{
  opacity: 1;
}

.kid-link.\!active .link-icon-active{
  opacity: 1;
}

.kid-link.green:hover{
  color: var(--color-green);
}

.kid-link.green.active{
  color: var(--color-green) !important;
}

.kid-link.green.\!active{
  color: var(--color-green) !important;
}

.kid-link.purple-dark:hover{
  color: var(--color-purple-dark);
}

.kid-link.purple-dark.active{
  color: var(--color-purple-dark) !important;
}

.kid-link.purple-dark.\!active{
  color: var(--color-purple-dark) !important;
}

.kid-link.yellow:hover{
  color: var(--color-yellow);
}

.kid-link.yellow.active{
  color: var(--color-yellow) !important;
}

.kid-link.yellow.\!active{
  color: var(--color-yellow) !important;
}

.kid-link.blue:hover{
  color: var(--color-blue);
}

.kid-link.blue.active{
  color: var(--color-blue) !important;
}

.kid-link.blue.\!active{
  color: var(--color-blue) !important;
}

.kid-link.pink:hover,
    .kid-link.red:hover{
  color: var(--color-pink);
}

.kid-link.pink.active, .kid-link.red.active{
  color: var(--color-pink) !important;
}

.kid-link.pink.\!active, .kid-link.red.\!active{
  color: var(--color-pink) !important;
}

.kid-link.orange:hover{
  color: var(--color-orange);
}

.kid-link.orange.active{
  color: var(--color-orange) !important;
}

.kid-link.orange.\!active{
  color: var(--color-orange) !important;
}

.kid-link.orange-dark:hover{
  color: var(--color-orange-dark);
}

.kid-link.orange-dark.active{
  color: var(--color-orange-dark) !important;
}

.kid-link.orange-dark.\!active{
  color: var(--color-orange-dark) !important;
}

.chapter--navigation{
  text-decoration-line: none;
}

.chapter--navigation.active{
  background-color: var(--color-blue-lighter);
}

.chapter--navigation.\!active{
  background-color: var(--color-blue-lighter);
}

.chapter--navigation.visitable:hover{
  cursor: pointer;
  background-color: var(--color-blue-lighter);
}

.chapter--navigation.visitable:hover .chapter--navigation__title{
  text-decoration-line: underline;
}

.form--text-field,
  input[type='email'],
  input[type='password'],
  input[type='text'] {
  border: 1px solid var(--color-gray-light);
  display: block;
  height: 'calc(1.5em + 1rem + 2px)';
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--color-gray-lighter);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  background-clip: padding-box;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 400;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}

@media (min-width: 1200px){

  .form--text-field,
  input[type='email'],
  input[type='password'],
  input[type='text']{
  font-size: 0.875rem;
  }
}

.form--text-field::placeholder,
  input[type='email']::placeholder,
  input[type='password']::placeholder,
  input[type='text']::placeholder{
  color: var(--color-gray-lighter);
}

.form--text-field,
  input[type='email'],
  input[type='password'],
  input[type='text']{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.form--text-field:focus,
  input[type='email']:focus,
  input[type='password']:focus,
  input[type='text']:focus {
  border: 1px solid var(--color-gray-light);
  border-width: 1px;
  border-color: var(--color-blue);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.form--text-field:focus:not(.error), input[type='email']:focus:not(.error), input[type='password']:focus:not(.error), input[type='text']:focus:not(.error) {
  box-shadow: 0px 0px 3px 0px #65e5ff;
}

.form--text-field.error, input[type='email'].error, input[type='password'].error, input[type='text'].error {
  border: 1px solid var(--color-gray-light);
  border-width: 1px;
  border-color: var(--color-pink);
}

body.kid-space .primer--button:not(.outline):not(.ghost):not(.text):not(.circle){
  border-width: 0px;
  border-bottom-width: 2px;
  border-style: solid !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

body.kid-space .primer--button:not(.outline):not(.ghost):not(.text):not(.circle).disabled,
    body.kid-space .primer--button:not(.outline):not(.ghost):not(.text):not(.circle)[disabled]{
  border-color: var(--color-neutral-400);
}

body.kid-space .primer--button:not(.outline):not(.ghost):not(.text):not(.circle).\!disabled{
  border-color: var(--color-neutral-400);
}

.primer--button{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-family: var(--main-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 500;
  line-height: 1.5rem;
  text-decoration-line: none !important;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1200px){

  .primer--button{
  font-size: 0.875rem;
  }
}

.primer--button.sm{
  line-height: 1.5rem;
}

.primer--button.lg{
  line-height: 1.75rem;
}

.primer--button.disabled,
    .primer--button:disabled{
  border-color: var(--color-neutral-500) !important;
}

.primer--button.\!disabled{
  border-color: var(--color-neutral-500) !important;
}

.primer--button.ghost{
  border-width: 0px !important;
  background-color: transparent;
  fill: var(--color-brand);
  padding: 0px;
  color: var(--color-brand);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.primer--button.ghost:hover{
  text-decoration-line: underline !important;
}

.primer--button.ghost.disabled,
      .primer--button.ghost:disabled{
  cursor: not-allowed !important;
  background-color: transparent !important;
  fill: var(--color-neutral-500) !important;
  color: var(--color-neutral-500) !important;
  text-decoration-line: none !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.primer--button.ghost.\!disabled{
  cursor: not-allowed !important;
  background-color: transparent !important;
  fill: var(--color-neutral-500) !important;
  color: var(--color-neutral-500) !important;
  text-decoration-line: none !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.primer--button.ghost.disabled:hover,
        .primer--button.ghost.disabled:focus,
        .primer--button.ghost.disabled:active,
        .primer--button.ghost.disabled.active,
        .primer--button.ghost:disabled:hover,
        .primer--button.ghost:disabled:focus,
        .primer--button.ghost:disabled:active,
        .primer--button.ghost:disabled.active{
  background-color: transparent !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.primer--button.ghost.\!disabled:hover,
        .primer--button.ghost.\!disabled:focus,
        .primer--button.ghost.\!disabled:active,
        .primer--button.ghost.\!disabled.active{
  background-color: transparent !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}


        .primer--button.ghost.disabled.\!active,
        .primer--button.ghost:disabled.\!active{
  background-color: transparent !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.primer--button.ghost.number-picker{
  height: 2rem;
  width: 2rem;
  border-radius: 0px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.primer--button.ghost.number-picker:hover{
  background-color: var(--color-gray-lightest) !important;
  text-decoration-line: none !important;
}

.primer--button.ghost.number-picker:hover span{
  text-decoration-line: none !important;
}

.primer--button.disabled,
    .primer--button:disabled{
  cursor: not-allowed !important;
  background-color: var(--color-neutral-200) !important;
  fill: var(--color-neutral-500) !important;
  color: var(--color-neutral-500) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.primer--button.\!disabled{
  cursor: not-allowed !important;
  background-color: var(--color-neutral-200) !important;
  fill: var(--color-neutral-500) !important;
  color: var(--color-neutral-500) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.primer--button.disabled:hover,
      .primer--button.disabled:focus,
      .primer--button.disabled:active,
      .primer--button.disabled.active,
      .primer--button:disabled:hover,
      .primer--button:disabled:focus,
      .primer--button:disabled:active,
      .primer--button:disabled.active{
  background-color: var(--color-neutral-200) !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.primer--button.\!disabled:hover,
      .primer--button.\!disabled:focus,
      .primer--button.\!disabled:active,
      .primer--button.\!disabled.active{
  background-color: var(--color-neutral-200) !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}


      .primer--button.disabled.\!active,
      .primer--button:disabled.\!active{
  background-color: var(--color-neutral-200) !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.primer--button.primary{
  border-style: none;
  border-color: var(--color-blue-dark);
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--button.primary:hover{
  background-color: var(--color-blue-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.primer--button.primary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue-dark);
}

.primer--button.primary:active,
      .primer--button.primary.active{
  background-color: var(--color-blue-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


      .primer--button.primary.\!active{
  background-color: var(--color-blue-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.primer--button.primary.number-picker{
  height: 2rem;
  width: 2rem;
  border-radius: 0px !important;
  background-color: var(--color-blue);
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.primer--button.primary.number-picker:hover{
  background-color: var(--color-blue-dark);
}

.primer--button.secondary{
  border-style: none;
  border-color: var(--color-blue);
  background-color: var(--color-blue-lighter);
  fill: var(--color-blue-dark);
  color: var(--color-blue-dark);
}

.primer--button.secondary:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background-color: #c3e7f3;
}

.primer--button.secondary:active,
      .primer--button.secondary.active{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


      .primer--button.secondary.\!active{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.primer--button.secondary:active,
      .primer--button.secondary.active {
  background-color: #a1c9d6;
}


      .primer--button.secondary.\!active {
  background-color: #a1c9d6 !important;
}

.primer--button.secondary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue-dark);
}

.primer--button.purple{
  border-style: none;
  border-color: var(--color-purple-dark);
  background-color: var(--color-purple);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--button.purple:hover{
  background-color: var(--color-purple-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.primer--button.purple:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-purple-dark);
}

.primer--button.purple:active,
      .primer--button.purple.active{
  background-color: var(--color-purple-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


      .primer--button.purple.\!active{
  background-color: var(--color-purple-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.primer--button.fancy{
  border-style: none;
  border-color: var(--color-purple);
  background-color: var(--color-purple-lightest);
  fill: var(--color-purple-dark);
  color: var(--color-purple-dark);
  box-shadow: 0 0 8px #A35DEA80;
}

.primer--button.fancy[disabled] {
  box-shadow: none;
}

.primer--button.fancy:hover{
  background-color: var(--color-purple-lightest);
  box-shadow: 0 0 16px var(--color-purple-light);
}

.primer--button.fancy:active,
      .primer--button.fancy.active{
  background-color: var(--color-purple-lighter);
}


      .primer--button.fancy.\!active{
  background-color: var(--color-purple-lighter);
}

.primer--button.fancy:active,
      .primer--button.fancy.active {
  box-shadow: 0 0 8px var(--color-purple);
}


      .primer--button.fancy.\!active {
  box-shadow: 0 0 8px var(--color-purple) !important;
}

.primer--button.fancy:focus {
  box-shadow: 0 0 16px var(--color-purple-light);
}

.primer--button.outlined{
  border-width: 0px;
  background-color: transparent;
  fill: var(--color-brand);
  color: var(--color-brand);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-brand);
}

.primer--button.outlined:hover{
  background-color: var(--color-brand-light);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.primer--button.outlined:active,
      .primer--button.outlined.active {
  background-color: #c7d8ff !important;
}


      .primer--button.outlined.\!active {
  background-color: #c7d8ff !important;
}

.primer--button.outlined:focus{
  background-color: var(--color-brand-light);
}

.primer--button.outlined.disabled,
      .primer--button.outlined:disabled{
  background-color: var(--color-neutral-200) !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-color: var(--color-neutral-500) !important;
}

.primer--button.outlined.\!disabled{
  background-color: var(--color-neutral-200) !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-color: var(--color-neutral-500) !important;
}

.primer--button.error,
    .primer--button.danger{
  border-style: none;
  border-color: var(--color-pink-dark);
  background-color: var(--color-pink);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--button.error:hover, .primer--button.danger:hover{
  background-color: var(--color-pink-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.primer--button.error:focus, .primer--button.danger:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-pink-dark);
}

.primer--button.error:active,
      .primer--button.error.active,
      .primer--button.danger:active,
      .primer--button.danger.active{
  background-color: var(--color-pink-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


      .primer--button.error.\!active,
      .primer--button.danger.\!active{
  background-color: var(--color-pink-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.primer--button.success{
  border-style: none;
  border-color: var(--color-green-dark);
  background-color: var(--color-green);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--button.success:hover{
  background-color: var(--color-green-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.primer--button.success:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-green-dark);
}

.primer--button.success:active,
      .primer--button.success.active{
  background-color: var(--color-green-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


      .primer--button.success.\!active{
  background-color: var(--color-green-darker);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* TODO: Remove text variant from primer button component */

.primer--button.text{
  border-style: none !important;
}

.primer--button.text.primary{
  fill: var(--color-blue);
  color: var(--color-blue);
}

.primer--button.text.primary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue);
}

.primer--button.text.primary:hover{
  background-color: var(--color-blue-lighter);
}

.primer--button.text.secondary{
  color: var(--color-blue-lighter);
}

.primer--button.text.secondary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue-lighter);
}

.primer--button.text.secondary:hover{
  background-color: var(--color-blue-light);
}

.primer--button.text.success{
  fill: var(--color-green);
  color: var(--color-green);
}

.primer--button.text.success:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-green);
}

.primer--button.text.success:hover{
  background-color: var(--color-green-lightest);
}

.primer--button.text.error,
      .primer--button.text.danger{
  color: var(--color-pink);
}

.primer--button.text.error:focus,
      .primer--button.text.danger:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-pink);
}

.primer--button.text.error:hover, .primer--button.text.danger:hover{
  background-color: var(--color-pink-lighter);
}

.primer--button.text:disabled{
  color: var(--color-neutral-500);
}

.primer--button.text:disabled:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.primer--button.circle{
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-style: none;
  background-color: var(--color-gray-lightest);
  fill: inherit;
  fill: var(--color-brand);
  padding: 0px;
}

.primer--button.circle:hover{
  background-color: var(--color-gray-lighter);
}

.primer--button.circle:disabled{
  cursor: auto;
  fill: var(--color-gray-lighter);
}

.primer--button.circle:hover:disabled{
  background-color: var(--color-gray-lightest);
}

.primer--button.circle.danger{
  background-color: var(--color-pink);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--button.circle.danger:hover{
  background-color: var(--color-pink-dark);
}

.primer--button.circle.danger:hover:disabled{
  background-color: var(--color-pink-dark);
}

.primer--button.circle.info{
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--button.circle.info:hover{
  background-color: var(--color-blue-dark);
}

.primer--button.circle.info:hover:disabled{
  background-color: var(--color-blue-dark);
}

.primer--button.circle.success{
  background-color: var(--color-green);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--button.circle.success:hover{
  background-color: var(--color-green-dark);
}

.primer--button.circle.success:hover:disabled{
  background-color: var(--color-green-dark);
}

.primer--button.lpm{
  border-style: none;
  border-color: var(--color-lpm-green);
  background-color: var(--color-lpm-green);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--button.lpm:hover{
  background-color: var(--color-green-dark);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.primer--button.lpm:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-green-dark);
}

.primer--button.lpm:active,
      .primer--button.lpm.active{
  background-color: var(--color-green-dark);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


      .primer--button.lpm.\!active{
  background-color: var(--color-green-dark);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.primer--button[busy][busy\!='false'] .btn-content, .primer--button[busy='true'] .btn-content {
  visibility: hidden;
}

.primer--button[busy][busy\!='false'] .btn-loader, .primer--button[busy='true'] .btn-loader {
  display: flex;
}

.primer--button .btn-loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.primer--button .btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.primer--loader{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.primer--loader.sm > .primer--loader-dot{
  height: 0.5rem;
  width: 0.5rem;
}

.primer--loader.md > .primer--loader-dot{
  height: 0.75rem;
  width: 0.75rem;
}

.primer--loader.lg > .primer--loader-dot{
  height: 1rem;
  width: 1rem;
}

.primer--loader .primer--loader-dot{
  border-radius: 9999px;
  animation: dot-keyframes 1.5s infinite ease-in-out;
}

.primer--loader .primer--loader-dot:nth-child(2) {
  animation-delay: 0.5s;
}

.primer--loader .primer--loader-dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    transform: scale(1, 1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }

  100% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
}

.primer--toggle-button {
  border: 1px solid var(--color-gray-light);
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-gray-lightest);
  font-family: var(--main-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: calc(0.85rem + 0.53333vw);
  font-weight: 700;
  min-height: 2rem;
  min-width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  fill: var(--color-gray-light);
  color: var(--color-gray-light);
}

@media (min-width: 1200px){

  .primer--toggle-button{
  font-size: 1.25rem;
  }
}

.primer--toggle-button[disabled]{
  cursor: default;
  border-color: var(--color-gray-lighter);
  fill: var(--color-gray-lighter);
  color: var(--color-gray-lighter);
}

.primer--toggle-button[disabled]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.primer--toggle-button[disabled].active,
      .primer--toggle-button[disabled]:active{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  fill: var(--color-gray-lighter);
  color: var(--color-gray-lighter);
}

.primer--toggle-button[disabled].\!active{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  fill: var(--color-gray-lighter);
  color: var(--color-gray-lighter);
}

.primer--toggle-button.active,
    .primer--toggle-button:active{
  border-style: none;
  background-color: var(--color-blue-lighter);
  fill: rgb(var(--color-dark) / 1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}

.primer--toggle-button.\!active{
  border-style: none;
  background-color: var(--color-blue-lighter);
  fill: rgb(var(--color-dark) / 1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}

.primer--toggle-button.active:hover, .primer--toggle-button:active:hover{
  border-style: none;
  background-color: var(--color-blue-lightest);
  fill: rgb(var(--color-dark) / 1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}

.primer--toggle-button.\!active:hover{
  border-style: none;
  background-color: var(--color-blue-lightest);
  fill: rgb(var(--color-dark) / 1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}

.primer--toggle-button-old {
  border: 1px solid var(--color-gray-light);
  font-size: calc(0.775rem + 0.13333vw);
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--main-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

@media (min-width: 1200px){

  .primer--toggle-button-old{
  font-size: 0.875rem;
  }
}

.primer--toggle-button-old[disabled]{
  cursor: default;
  border-color: var(--color-gray-lighter);
  fill: var(--color-gray-lighter);
  color: var(--color-gray-lighter);
}

.primer--toggle-button-old[disabled]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.primer--toggle-button-old[disabled].active,
      .primer--toggle-button-old[disabled]:active{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  fill: var(--color-gray-lighter);
  color: var(--color-gray-lighter);
}

.primer--toggle-button-old[disabled].\!active{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  fill: var(--color-gray-lighter);
  color: var(--color-gray-lighter);
}

.primer--toggle-button-old.active,
    .primer--toggle-button-old:active{
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--toggle-button-old.\!active{
  background-color: var(--color-blue);
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primer--toggle-button-old.active:hover, .primer--toggle-button-old:active:hover{
  background-color: var(--color-blue-light);
  fill: var(--color-blue);
  color: var(--color-blue);
}

.primer--toggle-button-old.\!active:hover{
  background-color: var(--color-blue-light);
  fill: var(--color-blue);
  color: var(--color-blue);
}

.primer--toggle-button-old.primer--toggle-button--compact{
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.writing-assistant-caret {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent var(--color-neutral-200) transparent transparent;
  display: inline-block;
  vertical-align: middle;
}

.plumi-bubble{
  border-radius: 1rem;
  background-color: var(--color-neutral-200);
  padding: 1rem;
  font-weight: 500;
}

.writing-assistant .loader {
  display: none;
}

.writing-assistant[busy='true'] .busy-state{
  position: absolute;
  inset: 0px;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.7;
}

.writing-assistant[busy='true'] .loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

/* fonts */

@font-face {
  font-family: 'Open Dyslexic';

  src: url("/assets/OpenDyslexic-Regular-040cd26a.otf");

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Open Dyslexic';

  src: url("/assets/OpenDyslexic-Bold-9c4557ee.otf");

  font-weight: bold;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Open Dyslexic';

  src: url("/assets/OpenDyslexic-BoldItalic-0a450f2b.otf");

  font-weight: bold;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: 'Open Dyslexic';

  src: url("/assets/OpenDyslexic-Italic-a4a248cf.otf");

  font-weight: 500;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: 'Alice';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url("/assets/alice-v20-latin-regular-c74e1d94.woff2") format('woff2'),
    /* Super Modern Browsers */ url("/assets/alice-v20-latin-regular-b45926f0.woff") format('woff'),
    /* Modern Browsers */ url("/assets/alice-v20-latin-regular-70360233.ttf") format('truetype'),
    /* Safari, Android, iOS */ url("/assets/alice-v20-latin-regular-7a67d5a5.svg#Alice") format('svg');

  /* Legacy iOS */
}

/* poppins-regular - latin */

@font-face {
  font-family: 'Poppins';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url("/assets/poppins-v20-latin-regular-d360be31.woff2") format('woff2'),
    /* Super Modern Browsers */ url("/assets/poppins-v20-latin-regular-0b828fd6.woff") format('woff'),
    /* Modern Browsers */ url("/assets/poppins-v20-latin-regular-225bd7f7.ttf") format('truetype'),
    /* Safari, Android, iOS */ url("/assets/poppins-v20-latin-regular-4a2e150c.svg#Poppins") format('svg');

  /* Legacy iOS */
}

/* poppins-500 - latin */

@font-face {
  font-family: 'Poppins';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url("/assets/poppins-v20-latin-500-afc692de.woff2") format('woff2'),
    /* Super Modern Browsers */ url("/assets/poppins-v20-latin-500-113d2f41.woff") format('woff'),
    /* Modern Browsers */ url("/assets/poppins-v20-latin-500-4f0e61f0.ttf") format('truetype'),
    /* Safari, Android, iOS */ url("/assets/poppins-v20-latin-500-4d9ca611.svg#Poppins") format('svg');

  /* Legacy iOS */
}

/* poppins-600 - latin */

@font-face {
  font-family: 'Poppins';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url("/assets/poppins-v20-latin-600-765bd6dc.woff2") format('woff2'),
    /* Super Modern Browsers */ url("/assets/poppins-v20-latin-600-c5501308.woff") format('woff'),
    /* Modern Browsers */ url("/assets/poppins-v20-latin-600-cb7be30b.ttf") format('truetype'),
    /* Safari, Android, iOS */ url("/assets/poppins-v20-latin-600-8a06f749.svg#Poppins") format('svg');

  /* Legacy iOS */
}

@font-face {
  font-family: 'Ruddy';

  src: url("/assets/Ruddy-Bold-b278e02f.eot");

  src: local('Ruddy Bold'), local('Ruddy-Bold'),
    url("/assets/Ruddy-Bold-b278e02f.eot?#iefix") format('embedded-opentype'),
    url("/assets/Ruddy-Bold-0cbb324d.woff2") format('woff2'), url("/assets/Ruddy-Bold-c9f8bc98.woff") format('woff'),
    url("/assets/Ruddy-Bold-b4b4885c.ttf") format('truetype');

  font-weight: bold;

  font-style: normal;
}

/* custom components */

/* replace former BS classes */

/* Variables */

:root {
  --pagedjs-margin-top: 10mm;
  --pagedjs-margin-bottom: 10mm;
  --pagedjs-margin-left: 16mm;
  --pagedjs-margin-right: 16mm;
}

/* Styles de page */

@page {
  @bottom-center {
    content: counter(page);

    border-radius: 999px;

    height: 1.25rem;

    width: 1.25rem;

    background-color: #2cb67f;

    color: white;

    font-size: 6.8pt;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--main-font);
  }
}

.right-page {
  break-before: right
}

.pagedjs_blank_page .pagedjs_margin-bottom-center {
  display: none !important;
}

/* Check for blank pages */

@page blank {
  content: none;
}

@page nofooter {
  @bottom-center {
    content: none;

    background-color: transparent;
  }
}

@page cover {
  .cover-spread {
    page: cover;
    width: 310mm;
    height: 210mm;
    display: flex;
    flex-direction: row;
    page-break-after: always;
    font-family: sans-serif;
  }

  .page-half {
    width: 155mm;
    height: 210mm;
    box-sizing: border-box;
    padding: 20mm;
  }
}

@page lpm-green {
  margin: 0;

  background-color: var(--color-lpm-green-dark);
}

@page brand-lighter {
  margin: 0;

  background-color: var(--color-brand-lighter);
}

.color-page {
  width: 100%;
  height: 100%;
  page-break-after: always;
}

.lpm-green-page {
  page: lpm-green;
}

.brand-lighter-page {
  page: brand-lighter;
}

.no-footer {
  page: nofooter;
}

.page-break {
  page-break-after: always;
}

/* Styles d'impression */

.print-style {
  height: 100%;
}

.print-style body {
  counter-reset: page;
}

.print-style p {
  font-family: var(--main-font);
}

.print-style .print-spacing {
  padding: 10mm 16mm;
}

.print-style .toc-entry {
  display: flex;
  align-items: center;
  width: 100%;
}

.print-style .toc-header {
  text-align: center;
  color: #ffb700;
  font-family: var(--main-font);
  font-size: 24pt;
  font-weight: 900;
  margin: 6pt 0 0 0;
}

.print-style .toc-title {
  font-family: var(--main-font);
  color: var(--color-lpm-green);
  line-height: 22pt;
  font-weight: 600;
  font-size: 12pt;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-style .toc-dots {
  flex: 1 1 auto;
  border-bottom: 1.5px dotted var(--color-gray-dark);
  margin: 0 4mm;
  height: 0.8em;
  font-family: var(--main-font);
  opacity: 0.3;
  font-weight: 600;
  font-size: 6.5pt;
}

.print-style .toc-page::after {
  content: 'p.' target-counter(attr(data-target), page);
  /* For PrinceXML, WeasyPrint, paged.js, etc. */
  display: inline-block;
  min-width: 2em;
  text-align: left;
  font-family: var(--main-font);
  font-weight: 600;
  color: var(--color-gray-dark);
  font-size: 11pt;
  line-height: 13pt;
}

.print-style h2.text-title {
  text-align: center;
  font-family: var(--main-font);
  color: var(--color-lpm-green-dark);
  font-weight: 900;
  font-size: 24pt;
  line-height: 28.8pt;
}

.print-style h3.text-participants {
  text-align: center;
  font-family: var(--main-font);
  color: #00b876;
  font-weight: 600;
  font-size: 10pt;
  line-height: 12pt;
}

.print-style .teacher-text * {
  font-family: var(--main-font);
  font-size: 11pt;
  line-height: 13pt;
  margin-bottom: 0;
}

.print-style .content {
  font-family: var(--main-font);
  font-size: 11pt;
  line-height: 13pt;
}

.print-style section {
  page-break-after: always;
}

/* Dimensions des images */

.print-style .half-page-image {
  height: 83mm;
  width: 117.6mm;
}

.print-style .full-page-image {
  height: 166mm;
  width: 117.6mm;
}

/* Semantic Headings */

html {
  font-size: var(--font-size) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6{
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
}

h1,
.h1{
  font-family: var(--headline-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: calc(0.85rem + 0.53333vw);
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  margin-bottom: 2rem;
}

@media (min-width: 1200px){

  h1,
.h1{
  font-size: 1.25rem;
  }
}

h2,
.h2{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
  font-size: calc(0.8rem + 0.26667vw);
  margin-bottom: 1.5rem;
}

@media (min-width: 1200px){

  h2,
.h2{
  font-size: 1rem;
  }
}

h3,
.h3{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
  font-size: calc(0.775rem + 0.13333vw);
  margin-bottom: 1rem;
}

@media (min-width: 1200px){

  h3,
.h3{
  font-size: 0.875rem;
  }
}

h4,
.h4{
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
  font-size: calc(0.775rem + 0.13333vw);
  font-weight: 400;
}

@media (min-width: 1200px){

  h4,
.h4{
  font-size: 0.875rem;
  }
}

h5,
.h5{
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
  font-size: 0.75rem;
  font-weight: 400;
}

h6,
.h6{
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
  font-family: var(--main-font);
  font-size: 0.75rem;
  font-weight: 400;
}

/* keep the momentum effect on ios devices */

/*This file is there to build the style of some tailwind classes that do not build because they are generated in the fly*/

.bg-cyan-light {
  background-color: var(--color-cyan-light);
}

.bg-purple-light {
  background-color: var(--color-purple-light);
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

.pointer-events-auto{
  pointer-events: auto;
}

.\!visible{
  visibility: visible !important;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.static{
  position: static;
}

.\!fixed{
  position: fixed !important;
}

.fixed{
  position: fixed;
}

.\!absolute{
  position: absolute !important;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.inset-y-1\/2{
  top: 50%;
  bottom: 50%;
}

.-bottom-10{
  bottom: -2.5rem;
}

.-bottom-3{
  bottom: -0.75rem;
}

.-left-3{
  left: -0.75rem;
}

.-left-8{
  left: -2rem;
}

.-right-0\.5{
  right: -0.125rem;
}

.-right-1{
  right: -0.25rem;
}

.-right-2{
  right: -0.5rem;
}

.-right-4{
  right: -1rem;
}

.-start-1{
  inset-inline-start: -0.25rem;
}

.-top-0\.5{
  top: -0.125rem;
}

.-top-1{
  top: -0.25rem;
}

.-top-5{
  top: -1.25rem;
}

.-top-6{
  top: -1.5rem;
}

.bottom-0{
  bottom: 0px;
}

.bottom-1{
  bottom: 0.25rem;
}

.bottom-10{
  bottom: 2.5rem;
}

.bottom-20{
  bottom: 5rem;
}

.bottom-3\.5{
  bottom: 0.875rem;
}

.bottom-4{
  bottom: 1rem;
}

.bottom-6{
  bottom: 1.5rem;
}

.left-0{
  left: 0px;
}

.left-1{
  left: 0.25rem;
}

.left-1\/2{
  left: 50%;
}

.left-12{
  left: 3rem;
}

.left-16{
  left: 4rem;
}

.left-2{
  left: 0.5rem;
}

.left-4{
  left: 1rem;
}

.left-5{
  left: 1.25rem;
}

.left-6{
  left: 1.5rem;
}

.left-\[11\.9\%\]{
  left: 11.9%;
}

.left-\[23\.4\%\]{
  left: 23.4%;
}

.left-\[42\.6\%\]{
  left: 42.6%;
}

.left-\[68\.9\%\]{
  left: 68.9%;
}

.right-0{
  right: 0px;
}

.right-10{
  right: 2.5rem;
}

.right-2{
  right: 0.5rem;
}

.right-4{
  right: 1rem;
}

.right-6{
  right: 1.5rem;
}

.top-0{
  top: 0px;
}

.top-1{
  top: 0.25rem;
}

.top-1\/2{
  top: 50%;
}

.top-1\/3{
  top: 33.333333%;
}

.top-12{
  top: 3rem;
}

.top-2{
  top: 0.5rem;
}

.top-20{
  top: 5rem;
}

.top-3{
  top: 0.75rem;
}

.top-32{
  top: 8rem;
}

.top-4{
  top: 1rem;
}

.top-5{
  top: 1.25rem;
}

.top-6{
  top: 1.5rem;
}

.top-\[14\.2\%\]{
  top: 14.2%;
}

.top-\[24\%\]{
  top: 24%;
}

.top-\[24\.0\%\]{
  top: 24.0%;
}

.top-\[55\.8\%\]{
  top: 55.8%;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-50{
  z-index: 50;
}

.z-\[2000\]{
  z-index: 2000;
}

.z-top{
  z-index: 999999999;
}

.col-span-1{
  grid-column: span 1 / span 1;
}

.col-span-12{
  grid-column: span 12 / span 12;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-3{
  grid-column: span 3 / span 3;
}

.col-span-4{
  grid-column: span 4 / span 4;
}

.col-span-full{
  grid-column: 1 / -1;
}

.col-start-1{
  grid-column-start: 1;
}

.row-start-1{
  grid-row-start: 1;
}

.float-left{
  float: left;
}

.clear-both{
  clear: both;
}

.\!m-0{
  margin: 0px !important;
}

.-m-4{
  margin: -1rem;
}

.m-0{
  margin: 0px;
}

.m-1\.5{
  margin: 0.375rem;
}

.m-12{
  margin: 3rem;
}

.m-2{
  margin: 0.5rem;
}

.m-4{
  margin: 1rem;
}

.m-6{
  margin: 1.5rem;
}

.m-auto{
  margin: auto;
}

.\!mx-1\.5{
  margin-left: 0.375rem !important;
  margin-right: 0.375rem !important;
}

.\!my-16{
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.\!my-3{
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.\!my-4{
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.\!my-8{
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.-mx-10{
  margin-left: -2.5rem;
  margin-right: -2.5rem;
}

.-mx-2{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-5{
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.-my-px{
  margin-top: -1px;
  margin-bottom: -1px;
}

.mx-0{
  margin-left: 0px;
  margin-right: 0px;
}

.mx-12{
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-6{
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-8{
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.-my-1{
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}

.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-10{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my-12{
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-20{
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-40{
  margin-top: 10rem;
  margin-bottom: 10rem;
}

.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}

.my-px{
  margin-top: 1px;
  margin-bottom: 1px;
}

.\!mb-0{
  margin-bottom: 0px !important;
}

.\!mb-4{
  margin-bottom: 1rem !important;
}

.\!ml-1{
  margin-left: 0.25rem !important;
}

.\!mr-2{
  margin-right: 0.5rem !important;
}

.\!mt-0{
  margin-top: 0px !important;
}

.\!mt-16{
  margin-top: 4rem !important;
}

.\!mt-2{
  margin-top: 0.5rem !important;
}

.\!mt-4{
  margin-top: 1rem !important;
}

.\!mt-6{
  margin-top: 1.5rem !important;
}

.-mb-4{
  margin-bottom: -1rem;
}

.-ml-0\.5{
  margin-left: -0.125rem;
}

.-ml-1{
  margin-left: -0.25rem;
}

.-mr-14{
  margin-right: -3.5rem;
}

.-mr-4{
  margin-right: -1rem;
}

.-mt-16{
  margin-top: -4rem;
}

.-mt-3{
  margin-top: -0.75rem;
}

.-mt-4{
  margin-top: -1rem;
}

.-mt-8{
  margin-top: -2rem;
}

.mb-0{
  margin-bottom: 0px;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-12{
  margin-bottom: 3rem;
}

.mb-16{
  margin-bottom: 4rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-20{
  margin-bottom: 5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-32{
  margin-bottom: 8rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-40{
  margin-bottom: 10rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.mb-80{
  margin-bottom: 20rem;
}

.ml-0{
  margin-left: 0px;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-3{
  margin-left: 0.75rem;
}

.ml-4{
  margin-left: 1rem;
}

.ml-6{
  margin-left: 1.5rem;
}

.ml-auto{
  margin-left: auto;
}

.mr-0{
  margin-right: 0px;
}

.mr-1{
  margin-right: 0.25rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mr-20{
  margin-right: 5rem;
}

.mr-3{
  margin-right: 0.75rem;
}

.mr-4{
  margin-right: 1rem;
}

.mr-6{
  margin-right: 1.5rem;
}

.mr-auto{
  margin-right: auto;
}

.mt-0{
  margin-top: 0px;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-14{
  margin-top: 3.5rem;
}

.mt-16{
  margin-top: 4rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-20{
  margin-top: 5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-44{
  margin-top: 11rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-7{
  margin-top: 1.75rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-auto{
  margin-top: auto;
}

.box-content{
  box-sizing: content-box;
}

.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-4{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.line-clamp-5{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.line-clamp-6{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.line-clamp-none{
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
}

.\!block{
  display: block !important;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.\!flex{
  display: flex !important;
}

.flex{
  display: flex;
}

.\!inline-flex{
  display: inline-flex !important;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.\!hidden{
  display: none !important;
}

.hidden{
  display: none;
}

.aspect-4\/3{
  aspect-ratio: 4 / 3;
}

.aspect-\[4\/3\]{
  aspect-ratio: 4/3;
}

.size-5{
  width: 1.25rem;
  height: 1.25rem;
}

.\!h-40{
  height: 10rem !important;
}

.\!h-\[17rem\]{
  height: 17rem !important;
}

.\!h-full{
  height: 100% !important;
}

.h-0{
  height: 0px;
}

.h-1\/2{
  height: 50%;
}

.h-10{
  height: 2.5rem;
}

.h-11{
  height: 2.75rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-2{
  height: 0.5rem;
}

.h-2\.5{
  height: 0.625rem;
}

.h-20{
  height: 5rem;
}

.h-24{
  height: 6rem;
}

.h-28{
  height: 7rem;
}

.h-3{
  height: 0.75rem;
}

.h-32{
  height: 8rem;
}

.h-4{
  height: 1rem;
}

.h-40{
  height: 10rem;
}

.h-48{
  height: 12rem;
}

.h-5{
  height: 1.25rem;
}

.h-52{
  height: 13rem;
}

.h-6{
  height: 1.5rem;
}

.h-64{
  height: 16rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-80{
  height: 20rem;
}

.h-9{
  height: 2.25rem;
}

.h-96{
  height: 24rem;
}

.h-\[\'calc\(1\.5em\+1rem\+2px\)\'\]{
  height: 'calc(1.5em + 1rem + 2px)';
}

.h-\[12\.6\%\]{
  height: 12.6%;
}

.h-\[18\.8\%\]{
  height: 18.8%;
}

.h-\[19\.0\%\]{
  height: 19.0%;
}

.h-\[20px\]{
  height: 20px;
}

.h-\[34\%\]{
  height: 34%;
}

.h-\[35\%\]{
  height: 35%;
}

.h-\[35vh\]{
  height: 35vh;
}

.h-\[40\.4mm\]{
  height: 40.4mm;
}

.h-\[49\.5mm\]{
  height: 49.5mm;
}

.h-\[70mm\]{
  height: 70mm;
}

.h-\[799\%\]{
  height: 799%;
}

.h-auto{
  height: auto;
}

.h-fit{
  height: fit-content;
}

.h-full{
  height: 100%;
}

.h-max{
  height: max-content;
}

.h-px{
  height: 1px;
}

.h-screen{
  height: 100vh;
}

.max-h-48{
  max-height: 12rem;
}

.max-h-56{
  max-height: 14rem;
}

.max-h-72{
  max-height: 18rem;
}

.max-h-96{
  max-height: 24rem;
}

.max-h-\[35vh\]{
  max-height: 35vh;
}

.max-h-\[40vh\]{
  max-height: 40vh;
}

.max-h-\[50vh\]{
  max-height: 50vh;
}

.max-h-\[90vh\]{
  max-height: 90vh;
}

.max-h-\[calc\(100vh-14rem\)\]{
  max-height: calc(100vh - 14rem);
}

.\!min-h-20{
  min-height: 5rem !important;
}

.\!min-h-fit{
  min-height: fit-content !important;
}

.min-h-20{
  min-height: 5rem;
}

.min-h-52{
  min-height: 13rem;
}

.min-h-64{
  min-height: 16rem;
}

.min-h-72{
  min-height: 18rem;
}

.min-h-96{
  min-height: 24rem;
}

.min-h-\[10rem\]{
  min-height: 10rem;
}

.min-h-\[20rem\]{
  min-height: 20rem;
}

.min-h-\[2rem\]{
  min-height: 2rem;
}

.min-h-\[calc\(100vh-4rem\)\]{
  min-height: calc(100vh - 4rem);
}

.min-h-fit{
  min-height: fit-content;
}

.min-h-screen{
  min-height: 100vh;
}

.\!w-2\/3{
  width: 66.666667% !important;
}

.\!w-full{
  width: 100% !important;
}

.w-0\.5{
  width: 0.125rem;
}

.w-1{
  width: 0.25rem;
}

.w-1\/2{
  width: 50%;
}

.w-1\/3{
  width: 33.333333%;
}

.w-10{
  width: 2.5rem;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-16{
  width: 4rem;
}

.w-2{
  width: 0.5rem;
}

.w-24{
  width: 6rem;
}

.w-28{
  width: 7rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\/4{
  width: 75%;
}

.w-32{
  width: 8rem;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-48{
  width: 12rem;
}

.w-5{
  width: 1.25rem;
}

.w-52{
  width: 13rem;
}

.w-6{
  width: 1.5rem;
}

.w-60{
  width: 15rem;
}

.w-7\/12{
  width: 58.333333%;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-80{
  width: 20rem;
}

.w-9{
  width: 2.25rem;
}

.w-96{
  width: 24rem;
}

.w-\[117\.6mm\]{
  width: 117.6mm;
}

.w-\[117mm\]{
  width: 117mm;
}

.w-\[120\%\]{
  width: 120%;
}

.w-\[14\.6\%\]{
  width: 14.6%;
}

.w-\[20\.8\%\]{
  width: 20.8%;
}

.w-\[20px\]{
  width: 20px;
}

.w-\[21\.5\%\]{
  width: 21.5%;
}

.w-\[23\.0\%\]{
  width: 23.0%;
}

.w-\[3\.6rem\]{
  width: 3.6rem;
}

.w-\[34rem\]{
  width: 34rem;
}

.w-\[36rem\]{
  width: 36rem;
}

.w-\[44\.8mm\]{
  width: 44.8mm;
}

.w-\[55\.7mm\]{
  width: 55.7mm;
}

.w-auto{
  width: auto;
}

.w-fit{
  width: fit-content;
}

.w-full{
  width: 100%;
}

.w-max{
  width: max-content;
}

.w-px{
  width: 1px;
}

.w-screen{
  width: 100vw;
}

.min-w-0{
  min-width: 0px;
}

.min-w-4{
  min-width: 1rem;
}

.min-w-52{
  min-width: 13rem;
}

.min-w-60{
  min-width: 15rem;
}

.min-w-72{
  min-width: 18rem;
}

.min-w-80{
  min-width: 20rem;
}

.min-w-\[12rem\]{
  min-width: 12rem;
}

.min-w-\[14rem\]{
  min-width: 14rem;
}

.min-w-\[15rem\]{
  min-width: 15rem;
}

.min-w-\[20rem\]{
  min-width: 20rem;
}

.min-w-\[28rem\]{
  min-width: 28rem;
}

.min-w-\[2rem\]{
  min-width: 2rem;
}

.min-w-full{
  min-width: 100%;
}

.min-w-max{
  min-width: max-content;
}

.min-w-min{
  min-width: min-content;
}

.\!max-w-lg{
  max-width: 32rem !important;
}

.max-w-12{
  max-width: 3rem;
}

.max-w-2xl{
  max-width: 42rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-40{
  max-width: 10rem;
}

.max-w-4xl{
  max-width: 56rem;
}

.max-w-5xl{
  max-width: 64rem;
}

.max-w-60{
  max-width: 15rem;
}

.max-w-96{
  max-width: 24rem;
}

.max-w-\[12rem\]{
  max-width: 12rem;
}

.max-w-fit{
  max-width: fit-content;
}

.max-w-full{
  max-width: 100%;
}

.max-w-lg{
  max-width: 32rem;
}

.max-w-max{
  max-width: max-content;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xl{
  max-width: 36rem;
}

.max-w-xs{
  max-width: 20rem;
}

.flex-1{
  flex: 1 1;
}

.flex-auto{
  flex: 1 1 auto;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.shrink{
  flex-shrink: 1;
}

.shrink-0{
  flex-shrink: 0;
}

.flex-grow{
  flex-grow: 1;
}

.grow{
  flex-grow: 1;
}

.grow-0{
  flex-grow: 0;
}

.border-collapse{
  border-collapse: collapse;
}

.origin-top-right{
  transform-origin: top right;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-6{
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-2{
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-full{
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-12{
  --tw-rotate: -12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-1\.9deg\]{
  --tw-rotate: -1.9deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-5deg\]{
  --tw-rotate: -5deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[0deg\]{
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[5deg\]{
  --tw-rotate: 5deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes ping{
  75%, 100%{
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping{
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse{
  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

.cursor-default{
  cursor: default;
}

.cursor-grab{
  cursor: grab;
}

.cursor-move{
  cursor: move;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-pointer{
  cursor: pointer;
}

.cursor-zoom-in{
  cursor: zoom-in;
}

.cursor-zoom-out{
  cursor: zoom-out;
}

.select-none{
  user-select: none;
}

.resize-none{
  resize: none;
}

.resize{
  resize: both;
}

.list-decimal{
  list-style-type: decimal;
}

.list-disc{
  list-style-type: disc;
}

.list-none{
  list-style-type: none;
}

.\!grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.flex-row{
  flex-direction: row;
}

.\!flex-col{
  flex-direction: column !important;
}

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

.place-content-stretch{
  place-content: stretch;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.\!items-center{
  align-items: center !important;
}

.items-center{
  align-items: center;
}

.items-stretch{
  align-items: stretch;
}

.justify-start{
  justify-content: flex-start;
}

.\!justify-end{
  justify-content: flex-end !important;
}

.justify-end{
  justify-content: flex-end;
}

.\!justify-center{
  justify-content: center !important;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.justify-around{
  justify-content: space-around;
}

.justify-evenly{
  justify-content: space-evenly;
}

.\!gap-2{
  gap: 0.5rem !important;
}

.\!gap-4{
  gap: 1rem !important;
}

.\!gap-6{
  gap: 1.5rem !important;
}

.\!gap-8{
  gap: 2rem !important;
}

.gap-0{
  gap: 0px;
}

.gap-1{
  gap: 0.25rem;
}

.gap-12{
  gap: 3rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-8{
  gap: 2rem;
}

.gap-x-1{
  column-gap: 0.25rem;
}

.gap-x-3{
  column-gap: 0.75rem;
}

.gap-x-4{
  column-gap: 1rem;
}

.gap-y-12{
  row-gap: 3rem;
}

.gap-y-2{
  row-gap: 0.5rem;
}

.gap-y-3{
  row-gap: 0.75rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.divide-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-x-reverse: 0;
  border-right-width: calc(2px * var(--tw-divide-x-reverse));
  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y-0 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}

.divide-solid > :not([hidden]) ~ :not([hidden]){
  border-style: solid;
}

.divide-blue-lightest > :not([hidden]) ~ :not([hidden]){
  border-color: var(--color-blue-lightest);
}

.self-start{
  align-self: flex-start;
}

.self-end{
  align-self: flex-end;
}

.self-center{
  align-self: center;
}

.overflow-auto{
  overflow: auto;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-scroll{
  overflow: scroll;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overflow-y-hidden{
  overflow-y: hidden;
}

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

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre{
  white-space: pre;
}

.whitespace-pre-line{
  white-space: pre-line;
}

.whitespace-pre-wrap{
  white-space: pre-wrap;
}

.whitespace-break-spaces{
  white-space: break-spaces;
}

.break-words{
  overflow-wrap: break-word;
}

.break-all{
  word-break: break-all;
}

.\!rounded{
  border-radius: 0.25rem !important;
}

.\!rounded-2xl{
  border-radius: 1rem !important;
}

.\!rounded-3xl{
  border-radius: 1.5rem !important;
}

.\!rounded-none{
  border-radius: 0px !important;
}

.\!rounded-xl{
  border-radius: 0.75rem !important;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-\[2rem\]{
  border-radius: 2rem;
}

.rounded-\[50px\]{
  border-radius: 50px;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.\!rounded-b-none{
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.\!rounded-e-none{
  border-start-end-radius: 0px !important;
  border-end-end-radius: 0px !important;
}

.\!rounded-t-3xl{
  border-top-left-radius: 1.5rem !important;
  border-top-right-radius: 1.5rem !important;
}

.rounded-b{
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-r-2xl{
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.rounded-s-none{
  border-start-start-radius: 0px;
  border-end-start-radius: 0px;
}

.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-3xl{
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.\!border{
  border-width: 1px !important;
}

.\!border-0{
  border-width: 0px !important;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-4{
  border-width: 4px;
}

.border-x-0{
  border-left-width: 0px;
  border-right-width: 0px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-0{
  border-bottom-width: 0px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-l{
  border-left-width: 1px;
}

.border-l-0{
  border-left-width: 0px;
}

.border-r-0{
  border-right-width: 0px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-0{
  border-top-width: 0px;
}

.border-t-2{
  border-top-width: 2px;
}

.\!border-solid{
  border-style: solid !important;
}

.border-solid{
  border-style: solid;
}

.border-dashed{
  border-style: dashed;
}

.\!border-none{
  border-style: none !important;
}

.border-none{
  border-style: none;
}

.\!border-blue{
  border-color: var(--color-blue) !important;
}

.\!border-green{
  border-color: var(--color-green) !important;
}

.\!border-red{
  border-color: var(--color-red) !important;
}

.border-blue{
  border-color: var(--color-blue);
}

.border-blue-lighter{
  border-color: var(--color-blue-lighter);
}

.border-cyan{
  border-color: var(--color-cyan);
}

.border-danger{
  border-color: var(--color-pink);
}

.border-gray-light{
  border-color: var(--color-gray-light);
}

.border-gray-lighter{
  border-color: var(--color-gray-lighter);
}

.border-gray-lightest{
  border-color: var(--color-gray-lightest);
}

.border-green{
  border-color: var(--color-green);
}

.border-green-dark{
  border-color: var(--color-green-dark);
}

.border-neutral-200{
  border-color: var(--color-neutral-200);
}

.border-neutral-300{
  border-color: var(--color-neutral-300);
}

.border-neutral-400{
  border-color: var(--color-neutral-400);
}

.border-neutral-500{
  border-color: var(--color-neutral-500);
}

.border-pink{
  border-color: var(--color-pink);
}

.border-purple-lighter{
  border-color: var(--color-purple-lighter);
}

.border-red{
  border-color: var(--color-red);
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-yellow{
  border-color: var(--color-yellow);
}

.border-b-blue{
  border-bottom-color: var(--color-blue);
}

.border-b-gray-light{
  border-bottom-color: var(--color-gray-light);
}

.border-t-neutral-300{
  border-top-color: var(--color-neutral-300);
}

.\!bg-blue{
  background-color: var(--color-blue) !important;
}

.\!bg-blue-lightest{
  background-color: var(--color-blue-lightest) !important;
}

.\!bg-gray-lightest{
  background-color: var(--color-gray-lightest) !important;
}

.\!bg-green{
  background-color: var(--color-green) !important;
}

.\!bg-green-light{
  background-color: var(--color-green-light) !important;
}

.\!bg-lpm-green-dark{
  background-color: var(--color-lpm-green-dark) !important;
}

.\!bg-neutral-200{
  background-color: var(--color-neutral-200) !important;
}

.\!bg-orange{
  background-color: var(--color-orange) !important;
}

.\!bg-pink-lightest{
  background-color: var(--color-pink-lightest) !important;
}

.\!bg-red{
  background-color: var(--color-red) !important;
}

.\!bg-transparent{
  background-color: transparent !important;
}

.\!bg-white{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.bg-\[\#E5F7F2\]{
  --tw-bg-opacity: 1;
  background-color: rgb(229 247 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ffe9bf\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 233 191 / var(--tw-bg-opacity, 1));
}

.bg-\[\#\{\@sponsor_configuration\&\.background_color\}\]{
  background-color: #{@sponsor configuration&.background color};
}

.bg-base{
  background-color: var(--bg-color-base);
}

.bg-blue{
  background-color: var(--color-blue);
}

.bg-blue-dark{
  background-color: var(--color-blue-dark);
}

.bg-blue-light{
  background-color: var(--color-blue-light);
}

.bg-blue-lighter{
  background-color: var(--color-blue-lighter);
}

.bg-blue-lightest{
  background-color: var(--color-blue-lightest);
}

.bg-brand{
  background-color: var(--color-brand);
}

.bg-brand-light{
  background-color: var(--color-brand-light);
}

.bg-brand-lighter{
  background-color: var(--color-brand-lighter);
}

.bg-cyan-light{
  background-color: var(--color-cyan-light);
}

.bg-cyan-lighter{
  background-color: var(--color-cyan-lighter);
}

.bg-danger{
  background-color: var(--color-pink);
}

.bg-dark{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-dark) / var(--tw-bg-opacity, 1));
}

.bg-gray{
  background-color: var(--color-gray);
}

.bg-gray-light{
  background-color: var(--color-gray-light);
}

.bg-gray-lighter{
  background-color: var(--color-gray-lighter);
}

.bg-gray-lightest{
  background-color: var(--color-gray-lightest);
}

.bg-green{
  background-color: var(--color-green);
}

.bg-green-dark{
  background-color: var(--color-green-dark);
}

.bg-green-light{
  background-color: var(--color-green-light);
}

.bg-green-lighter{
  background-color: var(--color-green-lighter);
}

.bg-green-lightest{
  background-color: var(--color-green-lightest);
}

.bg-info{
  background-color: var(--color-blue);
}

.bg-lpm-green{
  background-color: var(--color-lpm-green);
}

.bg-lpm-green-dark{
  background-color: var(--color-lpm-green-dark);
}

.bg-neutral-200{
  background-color: var(--color-neutral-200);
}

.bg-neutral-300{
  background-color: var(--color-neutral-300);
}

.bg-neutral-400{
  background-color: var(--color-neutral-400);
}

.bg-neutral-500{
  background-color: var(--color-neutral-500);
}

.bg-neutral-800{
  background-color: var(--color-neutral-800);
}

.bg-neutral-900{
  background-color: var(--color-neutral-900);
}

.bg-orange{
  background-color: var(--color-orange);
}

.bg-orange-lighter{
  background-color: var(--color-orange-lighter);
}

.bg-orange-lightest{
  background-color: var(--color-orange-lightest);
}

.bg-pink{
  background-color: var(--color-pink);
}

.bg-pink-dark{
  background-color: var(--color-pink-dark);
}

.bg-pink-light{
  background-color: var(--color-pink-light);
}

.bg-pink-lighter{
  background-color: var(--color-pink-lighter);
}

.bg-pink-lightest{
  background-color: var(--color-pink-lightest);
}

.bg-primary{
  background-color: var(--color-blue);
}

.bg-purple{
  background-color: var(--color-purple);
}

.bg-purple-dark{
  background-color: var(--color-purple-dark);
}

.bg-purple-light{
  background-color: var(--color-purple-light);
}

.bg-purple-lighter{
  background-color: var(--color-purple-lighter);
}

.bg-purple-lightest{
  background-color: var(--color-purple-lightest);
}

.bg-red-lighter{
  background-color: var(--color-red-lighter);
}

.bg-secondary{
  background-color: var(--color-orange);
}

.bg-success{
  background-color: var(--color-green);
}

.bg-transparent{
  background-color: transparent;
}

.bg-warning{
  background-color: var(--color-yellow);
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-yellow{
  background-color: var(--color-yellow);
}

.bg-yellow-light{
  background-color: var(--color-yellow-light);
}

.bg-yellow-lighter{
  background-color: var(--color-yellow-lighter);
}

.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}

.bg-opacity-70{
  --tw-bg-opacity: 0.7;
}

.bg-opacity-80{
  --tw-bg-opacity: 0.8;
}

.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-white{
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.bg-contain{
  background-size: contain;
}

.bg-cover{
  background-size: cover;
}

.bg-clip-padding{
  background-clip: padding-box;
}

.bg-center{
  background-position: center;
}

.bg-no-repeat{
  background-repeat: no-repeat;
}

.\!fill-blue{
  fill: var(--color-blue) !important;
}

.\!fill-brand{
  fill: var(--color-brand) !important;
}

.\!fill-neutral-500{
  fill: var(--color-neutral-500) !important;
}

.\!fill-white{
  fill: #fff !important;
}

.fill-blue{
  fill: var(--color-blue);
}

.fill-blue-dark{
  fill: var(--color-blue-dark);
}

.fill-brand{
  fill: var(--color-brand);
}

.fill-current{
  fill: currentColor;
}

.fill-dark{
  fill: rgb(var(--color-dark) / 1);
}

.fill-gray{
  fill: var(--color-gray);
}

.fill-gray-light{
  fill: var(--color-gray-light);
}

.fill-gray-lighter{
  fill: var(--color-gray-lighter);
}

.fill-green{
  fill: var(--color-green);
}

.fill-inherit{
  fill: inherit;
}

.fill-neutral-400{
  fill: var(--color-neutral-400);
}

.fill-neutral-500{
  fill: var(--color-neutral-500);
}

.fill-pink{
  fill: var(--color-pink);
}

.fill-purple-dark{
  fill: var(--color-purple-dark);
}

.fill-red{
  fill: var(--color-red);
}

.fill-white{
  fill: #fff;
}

.fill-yellow{
  fill: var(--color-yellow);
}

.fill-yellow-dark{
  fill: var(--color-yellow-dark);
}

.object-contain{
  object-fit: contain;
}

.object-cover{
  object-fit: cover;
}

.object-bottom{
  object-position: bottom;
}

.\!p-0{
  padding: 0px !important;
}

.\!p-1{
  padding: 0.25rem !important;
}

.\!p-10{
  padding: 2.5rem !important;
}

.\!p-2{
  padding: 0.5rem !important;
}

.\!p-3{
  padding: 0.75rem !important;
}

.\!p-4{
  padding: 1rem !important;
}

.\!p-5{
  padding: 1.25rem !important;
}

.\!p-8{
  padding: 2rem !important;
}

.p-0{
  padding: 0px;
}

.p-0\.5{
  padding: 0.125rem;
}

.p-1{
  padding: 0.25rem;
}

.p-12{
  padding: 3rem;
}

.p-2{
  padding: 0.5rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.\!px-0{
  padding-left: 0px !important;
  padding-right: 0px !important;
}

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

.\!py-0{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.\!py-1\.5{
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.\!py-2{
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.\!py-4{
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.\!py-6{
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.px-0{
  padding-left: 0px;
  padding-right: 0px;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-12{
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-16{
  padding-left: 4rem;
  padding-right: 4rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-20{
  padding-left: 5rem;
  padding-right: 5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

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

.py-28{
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-40{
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

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

.\!pb-1{
  padding-bottom: 0.25rem !important;
}

.\!pb-12{
  padding-bottom: 3rem !important;
}

.\!pb-20{
  padding-bottom: 5rem !important;
}

.\!pl-10{
  padding-left: 2.5rem !important;
}

.\!pl-12{
  padding-left: 3rem !important;
}

.\!pt-1{
  padding-top: 0.25rem !important;
}

.\!pt-2{
  padding-top: 0.5rem !important;
}

.\!pt-8{
  padding-top: 2rem !important;
}

.pb-0{
  padding-bottom: 0px;
}

.pb-1{
  padding-bottom: 0.25rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-20{
  padding-bottom: 5rem;
}

.pb-32{
  padding-bottom: 8rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-40{
  padding-bottom: 10rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pl-0{
  padding-left: 0px;
}

.pl-1{
  padding-left: 0.25rem;
}

.pl-12{
  padding-left: 3rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-20{
  padding-left: 5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pr-0{
  padding-right: 0px;
}

.pr-12{
  padding-right: 3rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-3{
  padding-right: 0.75rem;
}

.pr-32{
  padding-right: 8rem;
}

.pr-4{
  padding-right: 1rem;
}

.pr-5{
  padding-right: 1.25rem;
}

.pr-6{
  padding-right: 1.5rem;
}

.pt-0{
  padding-top: 0px;
}

.pt-0\.5{
  padding-top: 0.125rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-10{
  padding-top: 2.5rem;
}

.pt-12{
  padding-top: 3rem;
}

.pt-16{
  padding-top: 4rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.\!text-left{
  text-align: left !important;
}

.text-left{
  text-align: left;
}

.\!text-center{
  text-align: center !important;
}

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

.text-right{
  text-align: right;
}

.indent-2{
  text-indent: 0.5rem;
}

.\!align-middle{
  vertical-align: middle !important;
}

.align-middle{
  vertical-align: middle;
}

.font-headline{
  font-family: var(--headline-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.font-sans{
  font-family: var(--main-font), Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.\!text-3xl{
  font-size: calc(0.9rem + 0.8vw) !important;
}

@media (min-width: 1200px){

  .\!text-3xl{
  font-size: 1.5rem !important;
  }
}

.\!text-\[12pt\]{
  font-size: 12pt !important;
}

.text-2xl{
  font-size: calc(0.85rem + 0.53333vw);
}

@media (min-width: 1200px){

  .text-2xl{
  font-size: 1.25rem;
  }
}

.text-3xl{
  font-size: calc(0.9rem + 0.8vw);
}

@media (min-width: 1200px){

  .text-3xl{
  font-size: 1.5rem;
  }
}

.text-4xl{
  font-size: calc(0.975rem + 1.2vw);
}

@media (min-width: 1200px){

  .text-4xl{
  font-size: 1.875rem;
  }
}

.text-6xl{
  font-size: calc(1.2rem + 2.4vw);
}

@media (min-width: 1200px){

  .text-6xl{
  font-size: 3rem;
  }
}

.text-\[12pt\]{
  font-size: 12pt;
}

.text-\[8pt\]{
  font-size: 8pt;
}

.text-base{
  font-size: calc(0.775rem + 0.13333vw);
}

@media (min-width: 1200px){

  .text-base{
  font-size: 0.875rem;
  }
}

.text-lg{
  font-size: calc(0.8rem + 0.26667vw);
}

@media (min-width: 1200px){

  .text-lg{
  font-size: 1rem;
  }
}

.text-sm{
  font-size: 0.75rem;
}

.text-xl{
  font-size: calc(0.825rem + 0.4vw);
}

@media (min-width: 1200px){

  .text-xl{
  font-size: 1.125rem;
  }
}

.text-xs{
  font-size: 0.625rem;
}

.font-black{
  font-weight: 900;
}

.font-bold{
  font-weight: 700;
}

.font-light{
  font-weight: 300;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.not-italic{
  font-style: normal;
}

.leading-10{
  line-height: 2.5rem;
}

.leading-6{
  line-height: 1.5rem;
}

.leading-\[10pt\]{
  line-height: 10pt;
}

.leading-\[14pt\]{
  line-height: 14pt;
}

.\!text-blue{
  color: var(--color-blue) !important;
}

.\!text-gray-lighter{
  color: var(--color-gray-lighter) !important;
}

.\!text-neutral-400{
  color: var(--color-neutral-400) !important;
}

.\!text-neutral-500{
  color: var(--color-neutral-500) !important;
}

.\!text-white{
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.text-blue{
  color: var(--color-blue);
}

.text-blue-dark{
  color: var(--color-blue-dark);
}

.text-brand{
  color: var(--color-brand);
}

.text-cyan{
  color: var(--color-cyan);
}

.text-danger{
  color: var(--color-pink);
}

.text-dark{
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}

.text-gray{
  color: var(--color-gray);
}

.text-gray-dark{
  color: var(--color-gray-dark);
}

.text-gray-light{
  color: var(--color-gray-light);
}

.text-gray-lighter{
  color: var(--color-gray-lighter);
}

.text-green{
  color: var(--color-green);
}

.text-info{
  color: var(--color-blue);
}

.text-inherit{
  color: inherit;
}

.text-neutral-300{
  color: var(--color-neutral-300);
}

.text-neutral-400{
  color: var(--color-neutral-400);
}

.text-neutral-500{
  color: var(--color-neutral-500);
}

.text-neutral-600{
  color: var(--color-neutral-600);
}

.text-neutral-800{
  color: var(--color-neutral-800);
}

.text-neutral-900{
  color: var(--color-neutral-900);
}

.text-orange{
  color: var(--color-orange);
}

.text-primary{
  color: var(--color-blue);
}

.text-purple-dark{
  color: var(--color-purple-dark);
}

.text-red{
  color: var(--color-red);
}

.text-secondary{
  color: var(--color-orange);
}

.text-success{
  color: var(--color-green);
}

.text-warning{
  color: var(--color-yellow);
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow{
  color: var(--color-yellow);
}

.text-yellow-dark{
  color: var(--color-yellow-dark);
}

.\!underline{
  text-decoration-line: underline !important;
}

.underline{
  text-decoration-line: underline;
}

.line-through{
  text-decoration-line: line-through;
}

.\!no-underline{
  text-decoration-line: none !important;
}

.no-underline{
  text-decoration-line: none;
}

.placeholder-gray-lighter::placeholder{
  color: var(--color-gray-lighter);
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-25{
  opacity: 0.25;
}

.opacity-30{
  opacity: 0.3;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-75{
  opacity: 0.75;
}

.opacity-80{
  opacity: 0.8;
}

.opacity-90{
  opacity: 0.9;
}

.\!shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.\!shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-main{
  --tw-shadow: 0px 4px 5px 0px var(--box-shadow-main-color);
  --tw-shadow-colored: 0px 4px 5px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-main-xl{
  --tw-shadow: 0px 5px 10px 0px var(--box-shadow-main-color);
  --tw-shadow-colored: 0px 5px 10px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-pop-up{
  --tw-shadow: 0px 7px 10px 0px var(--box-shadow-pop-up-color);
  --tw-shadow-colored: 0px 7px 10px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.\!outline-none{
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.outline-4{
  outline-width: 4px;
}

.outline-offset-\[-4px\]{
  outline-offset: -4px;
}

.outline-\[\#D4AF37\]{
  outline-color: #D4AF37;
}

.outline-blue-light{
  outline-color: var(--color-blue-light);
}

.\!ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.\!ring-neutral-300{
  --tw-ring-color: var(--color-neutral-300) !important;
}

.\!ring-neutral-500{
  --tw-ring-color: var(--color-neutral-500) !important;
}

.ring-brand{
  --tw-ring-color: var(--color-brand);
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur{
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\]{
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.delay-1000{
  transition-delay: 1000ms;
}

.duration-1000{
  transition-duration: 1000ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-500{
  transition-duration: 500ms;
}

.duration-75{
  transition-duration: 75ms;
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Generated automatically using `rails components:import_css` */

.banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 1rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px){
  .banner{
    flex-direction: row;
    padding: 2rem;
  }
}

.banner__highlighted {
  border: 1px solid var(--color-gray-light);
  border-width: 4px;
  border-color: var(--color-yellow);
}

.banner__icon{
  align-self: center;
}

.banner__icon img {
  max-width: 100%;
  height: auto;
  min-width: 8rem;
}

.banner__content{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

@media (min-width: 768px){
  .banner__content{
    flex-direction: row;
  }
}

.banner__text{
  margin-right: 1.5rem;
}

.banner__text *{
  text-align: center;
}

@media (min-width: 768px){
  .banner__text *{
    text-align: left;
  }
}

.banner__cta{
  margin-top: 1rem;
  white-space: nowrap;
  overflow-wrap: break-word;
}

@media (min-width: 768px){
  .banner__cta{
    margin-top: 0px;
  }
}

.banner.challenges_show {
  justify-content: center;
}

.banner.challenges_show .banner__content {
  flex-grow: 0;
  margin-left: 0.5rem;
}

.banner.challenges_show .banner__text {
  margin-bottom: 0;
}

.banner.challenges_show .banner__icon {
  padding-top: 0;
  margin-right: 0.5rem;
}

.banner.challenges_chapter {
  box-sizing: border-box;
  border-radius: 8px;
  border-color: var(--color-orange-light);
  background-color: var(--color-orange-lighter);
}

.chapter--paragraph{
  color: var(--color-neutral-700);
}

.chapter--paragraph strong{
  font-weight: 700;
  color: var(--color-neutral-900);
}

.chapter--paragraph p{
  padding-bottom: 1.5rem;
}

.chapter--paragraph .chapter-section {
  opacity: 0;
  transition: opacity 0.5s ease-in;
  position: relative;
  font-size: 1.7rem;
}

.chapter--paragraph .chapter-section--active {
  opacity: 1;
}

.chapter--paragraph .chapter-image {
  width: 50%;
  max-width: 400px;
  float: left;
  margin-right: 1rem;
}

.chapter--text-customization .custom-grid {
  display: grid;
  gap: 1rem;
  justify-items: center;
  align-items: center;
  grid-template-columns: (3.75rem 1fr 1fr 3.75rem);
  grid-template-rows: (1fr);
  grid-template-areas: "spacer size type close";
}

.chapter--text-customization .custom-grid .slider    {
  grid-area: size;
}

.chapter--text-customization .custom-grid .buttons   {
  grid-area: type;
}

.chapter--text-customization .custom-grid .close-btn {
  grid-area: close;
}

@media (max-width: 767px) {
  .chapter--text-customization .custom-grid {
    padding-top: 1rem;
    padding-bottom: 2rem;
    grid-template-columns: (1fr);
    grid-template-rows: (2rem 2rem 1fr);
    grid-template-areas: "type"
                           "type"
                           "size"
  }

  .chapter--text-customization .custom-grid .close-btn {
    padding-right: 0.65rem;
    grid-area: 1 / 1 / 2 / 2;
    justify-self: end;
    align-self: start;
  }
}

.primer--collapse{
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

.primer--collapse summary::-webkit-details-marker {
  display: none;
}

.primer--collapse .primer--collapse--summary{
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.primer--collapse .primer--collapse--summary .primer--collapse--summary--icon{
  margin-right: 0.5rem;
}

.primer--collapse--summary.expanded .carret {
  transform: rotate(180deg);
}

.collapse-content {
  transition: max-height 1s ease 0s;
  -moz-transition: max-height 1s ease 0s;
  -webkit-transition: max-height 1s ease 0s;
}

.primer--icon-button{
  border-radius: 9999px;
  border-style: none;
}

.primer--icon-button svg {
  fill: #fff;
}

.primer--icon-button[disabled]{
  background-color: var(--color-neutral-200);
}

.primer--icon-button[disabled] svg{
  fill: var(--color-neutral-400);
}

.primer--icon-button[disabled]:hover{
  cursor: auto;
}

/* extrenal libraries */

.tippy-box[data-placement^=top]>.tippy-svg-arrow{
  bottom:0
}

.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{
  top:16px;
  transform:rotate(180deg)
}

.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{
  top:0
}

.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{
  bottom:16px
}

.tippy-box[data-placement^=left]>.tippy-svg-arrow{
  right:0
}

.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{
  transform:rotate(90deg);
  top:calc(50% - 3px);
  left:11px
}

.tippy-box[data-placement^=right]>.tippy-svg-arrow{
  left:0
}

.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{
  transform:rotate(-90deg);
  top:calc(50% - 3px);
  right:11px
}

.tippy-svg-arrow{
  width:16px;
  height:16px;
  fill:#333;
  text-align:initial
}

.tippy-svg-arrow,.tippy-svg-arrow>svg{
  position:absolute
}

.tippy-box[data-animation=scale-subtle][data-placement^=top]{
  transform-origin:bottom
}

.tippy-box[data-animation=scale-subtle][data-placement^=bottom]{
  transform-origin:top
}

.tippy-box[data-animation=scale-subtle][data-placement^=left]{
  transform-origin:right
}

.tippy-box[data-animation=scale-subtle][data-placement^=right]{
  transform-origin:left
}

.tippy-box[data-animation=scale-subtle][data-state=hidden]{
  transform:scale(.8);
  opacity:0
}

:root{
  --tagify-dd-color-primary:rgb(53,149,246);
  --tagify-dd-text-color:black;
  --tagify-dd-bg-color:white;
  --tagify-dd-item-pad:.3em .5em;
  --tagify-dd-max-height:300px
}

.tagify{
  --tags-disabled-bg:#F1F1F1;
  --tags-border-color:#DDD;
  --tags-hover-border-color:#CCC;
  --tags-focus-border-color:#3595f6;
  --tag-border-radius:3px;
  --tag-bg:#E5E5E5;
  --tag-hover:#D3E2E2;
  --tag-text-color:black;
  --tag-text-color--edit:black;
  --tag-pad:0.3em 0.5em;
  --tag-inset-shadow-size:1.2em;
  --tag-invalid-color:#D39494;
  --tag-invalid-bg:rgba(211, 148, 148, 0.5);
  --tag--min-width:1ch;
  --tag--max-width:100%;
  --tag-hide-transition:0.3s;
  --tag-remove-bg:rgba(211, 148, 148, 0.3);
  --tag-remove-btn-color:black;
  --tag-remove-btn-bg:none;
  --tag-remove-btn-bg--hover:#c77777;
  --input-color:inherit;
  --placeholder-color:rgba(0, 0, 0, 0.4);
  --placeholder-color-focus:rgba(0, 0, 0, 0.25);
  --loader-size:.8em;
  --readonly-striped:1;
  display:inline-flex;
  align-items:flex-start;
  align-content:baseline;
  flex-wrap:wrap;
  border:1px solid var(--tags-border-color);
  padding:0;
  line-height:0;
  outline:0;
  position:relative;
  box-sizing:border-box;
  transition:.1s
}

@keyframes tags--bump{
  30%{
    transform:scale(1.2)
  }
}

@keyframes rotateLoader{
  to{
    transform:rotate(1turn)
  }
}

.tagify:has([contenteditable=true]){
  cursor:text
}

.tagify:hover:not(.tagify--focus):not(.tagify--invalid){
  --tags-border-color:var(--tags-hover-border-color)
}

.tagify[disabled]{
  background:var(--tags-disabled-bg);
  filter:saturate(0);
  opacity:.5;
  pointer-events:none
}

.tagify[disabled].tagify--empty>.tagify__input::before{
  position:relative
}

.tagify[disabled].tagify--select,.tagify[readonly].tagify--select{
  pointer-events:none
}

.tagify[disabled]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty),.tagify[readonly]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty){
  cursor:default
}

.tagify[disabled]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty)>.tagify__input,.tagify[readonly]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty)>.tagify__input{
  visibility:hidden;
  width:0;
  margin:5px 0
}

.tagify[disabled]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty) .tagify__tag>div,.tagify[readonly]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty) .tagify__tag>div{
  padding:var(--tag-pad)
}

.tagify[disabled]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty) .tagify__tag>div::before,.tagify[readonly]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty) .tagify__tag>div::before{
  animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused
}

@keyframes readonlyStyles{
  0%{
    background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;
    box-shadow:none;
    filter:brightness(.95)
  }
}

.tagify[disabled] .tagify__tag__removeBtn,.tagify[readonly] .tagify__tag__removeBtn{
  display:none
}

.tagify--loading .tagify__input>br:last-child{
  display:none
}

.tagify--loading .tagify__input::before{
  content:none
}

.tagify--loading .tagify__input::after{
  vertical-align:middle;
  opacity:1;
  width:.7em;
  height:.7em;
  width:var(--loader-size);
  height:var(--loader-size);
  min-width:0;
  border:3px solid;
  border-color:#eee #bbb #888 transparent;
  border-radius:50%;
  animation:rotateLoader .4s infinite linear;
  content:""!important;
  margin:-2px 0 -2px .5em
}

.tagify--loading .tagify__input:empty::after{
  margin-left:0
}

.tagify+input,.tagify+textarea{
  position:absolute!important;
  left:-9999em!important;
  transform:scale(0)!important
}

.tagify__tag{
  display:inline-flex;
  align-items:center;
  max-width:var(--tag--max-width);
  margin-inline:5px 0;
  margin-block:5px;
  position:relative;
  z-index:1;
  outline:0;
  line-height:normal;
  cursor:default;
  transition:.13s ease-out
}

.tagify__tag>div{
  display:flex;
  flex:1 1;
  vertical-align:top;
  box-sizing:border-box;
  max-width:100%;
  padding:var(--tag-pad);
  color:var(--tag-text-color);
  line-height:inherit;
  border-radius:var(--tag-border-radius);
  white-space:nowrap;
  transition:.13s ease-out
}

.tagify__tag>div>*{
  white-space:pre-wrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:inline-block;
  vertical-align:top;
  min-width:var(--tag--min-width);
  max-width:var(--tag--max-width);
  transition:.8s ease,.1s color
}

.tagify__tag>div>[contenteditable]{
  display:block;
  outline:0;
  user-select:text;
  cursor:text;
  margin:-2px;
  padding:2px;
  max-width:350px
}

.tagify__tag>div>:only-child{
  width:100%
}

.tagify__tag>div::before{
  content:"";
  position:absolute;
  border-radius:inherit;
  inset:var(--tag-bg-inset,0);
  z-index:-1;
  pointer-events:none;
  transition:120ms ease;
  animation:tags--bump .3s ease-out 1;
  box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset
}

.tagify__tag:focus div::before,.tagify__tag:hover:not([readonly]) div::before{
  --tag-bg-inset:-2.5px;
  --tag-bg:var(--tag-hover)
}

.tagify__tag--loading{
  pointer-events:none
}

.tagify__tag--loading .tagify__tag__removeBtn{
  display:none
}

.tagify__tag--loading::after{
  --loader-size:.4em;
  content:"";
  vertical-align:middle;
  opacity:1;
  width:.7em;
  height:.7em;
  width:var(--loader-size);
  height:var(--loader-size);
  min-width:0;
  border:3px solid;
  border-color:#eee #bbb #888 transparent;
  border-radius:50%;
  animation:rotateLoader .4s infinite linear;
  margin:0 .5em 0 -.1em
}

.tagify__tag--flash div::before{
  animation:none
}

.tagify__tag--hide{
  width:0!important;
  padding-left:0;
  padding-right:0;
  margin-left:0;
  margin-right:0;
  opacity:0;
  transform:scale(0);
  transition:var(--tag-hide-transition);
  pointer-events:none
}

.tagify__tag--hide>div>*{
  white-space:nowrap
}

.tagify__tag.tagify--noAnim>div::before{
  animation:none
}

.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span{
  opacity:.5
}

.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{
  --tag-bg:var(--tag-invalid-bg);
  transition:.2s
}

.tagify__tag[readonly] .tagify__tag__removeBtn{
  display:none
}

.tagify__tag[readonly]>div::before{
  animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused
}

@keyframes readonlyStyles{
  0%{
    background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;
    box-shadow:none;
    filter:brightness(.95)
  }
}

.tagify__tag--editable>div{
  color:var(--tag-text-color--edit)
}

.tagify__tag--editable>div::before{
  box-shadow:0 0 0 2px var(--tag-hover) inset!important
}

.tagify__tag--editable>.tagify__tag__removeBtn{
  pointer-events:none;
  opacity:0;
  transform:translateX(100%) translateX(5px)
}

.tagify__tag--editable.tagify--invalid>div::before{
  box-shadow:0 0 0 2px var(--tag-invalid-color) inset!important
}

.tagify__tag__removeBtn{
  order:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50px;
  cursor:pointer;
  font:14px/1 Arial;
  background:var(--tag-remove-btn-bg);
  color:var(--tag-remove-btn-color);
  width:14px;
  height:14px;
  margin-inline:auto 4.6666666667px;
  overflow:hidden;
  transition:.2s ease-out
}

.tagify__tag__removeBtn::after{
  content:"×";
  transition:.3s,color 0s
}

.tagify__tag__removeBtn:hover{
  color:#fff;
  background:var(--tag-remove-btn-bg--hover)
}

.tagify__tag__removeBtn:hover+div>span{
  opacity:.5
}

.tagify__tag__removeBtn:hover+div::before{
  box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;
  transition:box-shadow .2s
}

.tagify:not(.tagify--mix) .tagify__input br{
  display:none
}

.tagify:not(.tagify--mix) .tagify__input *{
  display:inline;
  white-space:nowrap
}

.tagify__input{
  flex-grow:1;
  display:inline-block;
  min-width:110px;
  margin:5px;
  padding:var(--tag-pad);
  line-height:normal;
  position:relative;
  white-space:pre-wrap;
  color:var(--input-color);
  box-sizing:inherit;
  overflow:hidden
}

.tagify__input:focus{
  outline:0
}

.tagify__input:focus::before{
  transition:.2s ease-out;
  opacity:0;
  transform:translatex(6px)
}

@supports (-ms-ime-align:auto){
  .tagify__input:focus::before{
    display:none
  }
}

.tagify__input:focus:empty::before{
  transition:.2s ease-out;
  opacity:1;
  transform:none;
  color:rgba(0,0,0,.25);
  color:var(--placeholder-color-focus)
}

@-moz-document url-prefix(){
  .tagify__input:focus:empty::after{
    display:none
  }
}

.tagify__input::before{
  content:attr(data-placeholder);
  width:100%;
  height:100%;
  margin:auto 0;
  z-index:1;
  color:var(--placeholder-color);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  position:absolute
}

.tagify__input::after{
  content:attr(data-suggest);
  display:inline-block;
  vertical-align:middle;
  position:absolute;
  min-width:calc(100% - 1.5em);
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:pre;
  color:var(--tag-text-color);
  opacity:.3;
  pointer-events:none;
  max-width:100px
}

.tagify__input .tagify__tag{
  margin:0 1px
}

.tagify--mix{
  display:block
}

.tagify--mix .tagify__input{
  padding:5px;
  margin:0;
  width:100%;
  height:100%;
  line-height:1.5;
  display:block
}

.tagify--mix .tagify__input::before{
  height:auto;
  display:none;
  line-height:inherit
}

.tagify--mix .tagify__input::after{
  content:none
}

.tagify--select{
  cursor:default
}

.tagify--select::after{
  content:">";
  opacity:.5;
  position:absolute;
  top:50%;
  right:0;
  bottom:0;
  font:16px monospace;
  line-height:8px;
  height:8px;
  pointer-events:none;
  transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);
  transition:.2s ease-in-out
}

.tagify--select[aria-expanded=true]::after{
  transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)
}

.tagify--select[aria-expanded=true] .tagify__tag__removeBtn{
  pointer-events:none;
  opacity:0;
  transform:translateX(100%) translateX(5px)
}

.tagify--select .tagify__tag{
  flex:1 1;
  max-width:none;
  margin-inline-end:2em;
  margin-block:0;
  padding-block:5px;
  cursor:text
}

.tagify--select .tagify__tag div::before{
  display:none
}

.tagify--select .tagify__tag+.tagify__input{
  display:none
}

.tagify--empty .tagify__input::before{
  transition:.2s ease-out;
  opacity:1;
  transform:none;
  display:inline-block;
  width:auto
}

.tagify--mix .tagify--empty .tagify__input::before{
  display:inline-block
}

.tagify--focus{
  --tags-border-color:var(--tags-focus-border-color);
  transition:0s
}

.tagify--invalid{
  --tags-border-color:#D39494
}

.tagify__dropdown{
  position:absolute;
  z-index:9999;
  transform:translateY(-1px);
  border-top:1px solid var(--tagify-dd-color-primary);
  overflow:hidden
}

.tagify__dropdown[dir=rtl]{
  transform:translate(-100%,-1px)
}

.tagify__dropdown[placement=top]{
  margin-top:0;
  transform:translateY(-100%)
}

.tagify__dropdown[placement=top] .tagify__dropdown__wrapper{
  border-top-width:1.1px;
  border-bottom-width:0
}

.tagify__dropdown[position=text]{
  box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);
  font-size:.9em
}

.tagify__dropdown[position=text] .tagify__dropdown__wrapper{
  border-width:1px
}

.tagify__dropdown__wrapper{
  scroll-behavior:auto;
  max-height:var(--tagify-dd-max-height);
  overflow:hidden;
  overflow-x:hidden;
  color:var(--tagify-dd-text-color);
  background:var(--tagify-dd-bg-color);
  border:1px solid;
  border-color:var(--tagify-dd-color-primary);
  border-bottom-width:1.5px;
  border-top-width:0;
  box-shadow:0 2px 4px -2px rgba(0,0,0,.2);
  transition:.3s cubic-bezier(.5,0,.3,1),transform .15s;
  animation:dd-wrapper-show 0s .3s forwards
}

@keyframes dd-wrapper-show{
  to{
    overflow-y:auto
  }
}

.tagify__dropdown__header:empty{
  display:none
}

.tagify__dropdown__footer{
  display:inline-block;
  margin-top:.5em;
  padding:var(--tagify-dd-item-pad);
  font-size:.7em;
  font-style:italic;
  opacity:.5
}

.tagify__dropdown__footer:empty{
  display:none
}

.tagify__dropdown--initial .tagify__dropdown__wrapper{
  max-height:20px;
  transform:translateY(-1em)
}

.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper{
  transform:translateY(2em)
}

.tagify__dropdown__item{
  box-sizing:border-box;
  padding:var(--tagify-dd-item-pad);
  margin:1px;
  white-space:pre-wrap;
  cursor:pointer;
  border-radius:2px;
  outline:0;
  max-height:60px;
  max-width:100%;
  line-height:normal;
  position:relative
}

.tagify__dropdown__item--active{
  background:var(--tagify-dd-color-primary);
  color:#fff
}

.tagify__dropdown__item:active{
  filter:brightness(105%)
}

.tagify__dropdown__item--hidden{
  padding-top:0;
  padding-bottom:0;
  margin:0 1px;
  pointer-events:none;
  overflow:hidden;
  max-height:0;
  transition:var(--tagify-dd-item--hidden-duration,.3s)!important
}

.tagify__dropdown__item--hidden>*{
  transform:translateY(-100%);
  opacity:0;
  transition:inherit
}

.tagify__dropdown__item--selected::before{
  content:"✓";
  font-family:monospace;
  position:absolute;
  inset-inline-start:6px;
  text-indent:0;
  line-height:1.1
}

.tagify__dropdown:has(.tagify__dropdown__item--selected) .tagify__dropdown__item{
  text-indent:1em
}

/**
 * Swiper 6.8.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2021 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 23, 2021
 */

@font-face {
  font-family: 'swiper-icons';

  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');

  font-weight: 400;

  font-style: normal;
}

:root {
  --swiper-theme-color: #007aff;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-container-pointer-events {
  touch-action: pan-y;
}

.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

/* 3D Effects */

.swiper-container-3d {
  perspective: 1200px;
}

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* CSS Mode */

.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: 'prev';
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: 'next';
}

.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}

.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
  --swiper-navigation-color: #000000;
}

.swiper-button-lock {
  display: none;
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #000;
  opacity: 0.2;
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}

/* Progress */

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}

.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}

.swiper-pagination-lock {
  display: none;
}

/* Scrollbar */

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

/* Preloader */

:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

/* a11y */

.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube {
  overflow: visible;
}

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-container-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-container-flip {
  overflow: visible;
}

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  backface-visibility: hidden;
}

/*! @algolia/autocomplete-theme-classic 1.19.2 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */

/* ----------------*/

/* 1.  CSS Variables*/

/* 2.  Dark Mode*/

/* 3.  Autocomplete*/

/* 4.  Panel*/

/* 5.  Sources*/

/* 6.  Hit Layout*/

/* 7.  Panel Header*/

/* 8.  Panel Footer*/

/* 9.  Detached Mode*/

/* 10. Gradients*/

/* 11. Utilities*/

/* ----------------*/

/* Note:*/

/* This theme reflects the markup structure of autocomplete with SCSS indentation.*/

/* We use the SASS `@at-root` function to keep specificity low.*/

/* ----------------*/

/* 1. CSS Variables*/

/* ----------------*/

:root {
  /* Input*/
  --aa-search-input-height: 44px;
  --aa-input-icon-size: 20px;
  /* Size and spacing*/
  --aa-base-unit: 16;
  --aa-spacing-factor: 1;
  --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px);
  --aa-spacing-half: calc(var(--aa-spacing) / 2);
  --aa-panel-max-height: 650px;
  /* Z-index*/
  --aa-base-z-index: 9999;
  /* Font*/
  --aa-font-size: calc(var(--aa-base-unit) * 1px);
  --aa-font-family: inherit;
  --aa-font-weight-medium: 500;
  --aa-font-weight-semibold: 600;
  --aa-font-weight-bold: 700;
  /* Icons*/
  --aa-icon-size: 20px;
  --aa-icon-stroke-width: 1.6;
  --aa-icon-color-rgb: 119, 119, 163;
  --aa-icon-color-alpha: 1;
  --aa-action-icon-size: 20px;
  /* Text colors*/
  --aa-text-color-rgb: 38, 38, 39;
  --aa-text-color-alpha: 1;
  --aa-primary-color-rgb: 62, 52, 211;
  --aa-primary-color-alpha: 0.2;
  --aa-muted-color-rgb: 128, 126, 163;
  --aa-muted-color-alpha: 0.6;
  /* Border colors*/
  --aa-panel-border-color-rgb: 128, 126, 163;
  --aa-panel-border-color-alpha: 0.3;
  --aa-input-border-color-rgb: 128, 126, 163;
  --aa-input-border-color-alpha: 0.8;
  /* Background colors*/
  --aa-background-color-rgb: 255, 255, 255;
  --aa-background-color-alpha: 1;
  --aa-input-background-color-rgb: 255, 255, 255;
  --aa-input-background-color-alpha: 1;
  --aa-selected-color-rgb: 179, 173, 214;
  --aa-selected-color-alpha: 0.205;
  --aa-description-highlight-background-color-rgb: 245, 223, 77;
  --aa-description-highlight-background-color-alpha: 0.5;
  /* Detached mode*/
  --aa-detached-media-query: (max-width: 680px);
  --aa-detached-modal-media-query: (min-width: 680px);
  --aa-detached-modal-max-width: 680px;
  --aa-detached-modal-max-height: 500px;
  --aa-overlay-color-rgb: 115, 114, 129;
  --aa-overlay-color-alpha: 0.4;
  /* Shadows*/
  --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, .1),
    0 6px 16px -4px rgba(35, 38, 59, .15);
  /* Scrollbar*/
  --aa-scrollbar-width: 13px;
  --aa-scrollbar-track-background-color-rgb: 234, 234, 234;
  --aa-scrollbar-track-background-color-alpha: 1;
  --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);
  --aa-scrollbar-thumb-background-color-alpha: 1;
  /* Touch screens*/
}

@media (hover: none) and (pointer: coarse) {
  :root {
    --aa-spacing-factor: 1.2;
    --aa-action-icon-size: 22px;
  }
}

/* ----------------*/

/* 2. Dark Mode*/

/* ----------------*/

body {
  /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */
  /* stylelint-enable selector-no-qualifying-type, selector-class-pattern */
}

body[data-theme=dark], body.dark {
  /* Text colors*/
  --aa-text-color-rgb: 183, 192, 199;
  --aa-primary-color-rgb: 146, 138, 255;
  --aa-muted-color-rgb: 146, 138, 255;
  /* Background colors*/
  --aa-input-background-color-rgb: 0, 3, 9;
  --aa-background-color-rgb: 21, 24, 42;
  --aa-selected-color-rgb: 146, 138, 255;
  --aa-selected-color-alpha: 0.25;
  --aa-description-highlight-background-color-rgb: 0 255 255;
  --aa-description-highlight-background-color-alpha: 0.25;
  /* Icons*/
  --aa-icon-color-rgb: 119, 119, 163;
  /* Shadows*/
  --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
    0 3px 8px 0 rgb(0, 3, 9);
  /* Scrollbar*/
  --aa-scrollbar-track-background-color-rgb: 44, 46, 64;
  --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);
}

/* Reset for `@extend`*/

.aa-Panel *, .aa-Autocomplete *,
.aa-DetachedFormContainer * {
  box-sizing: border-box;
}

/* Init for `@extend`*/

.aa-Panel, .aa-Autocomplete,
.aa-DetachedFormContainer {
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  font-family: inherit;
  font-family: var(--aa-font-family);
  font-size: calc(16 * 1px);
  font-size: var(--aa-font-size);
  font-weight: normal;
  line-height: 1em;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* ----------------*/

/* 3. Autocomplete*/

/* ----------------*/

.aa-Autocomplete,
.aa-DetachedFormContainer {
  /* Search box*/
}

.aa-Form {
  align-items: center;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha));
  border: 1px solid rgba(128, 126, 163, 0.8);
  border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));
  border-radius: 3px;
  display: flex;
  line-height: 1em;
  margin: 0;
  position: relative;
  width: 100%;
}

.aa-Form:focus-within {
  border-color: rgba(62, 52, 211, 1);
  border-color: rgba(var(--aa-primary-color-rgb), 1);
  box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 2px, inset rgba(62, 52, 211, 0.2) 0 0 0 2px;
  box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px, inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px;
  outline: currentColor none medium;
}

.aa-InputWrapperPrefix {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 44px;
  height: var(--aa-search-input-height);
  order: 1;
  /* Container for search and loading icons*/
}

.aa-Label,
.aa-LoadingIndicator {
  cursor: auto;
  cursor: initial;
  flex-shrink: 0;
  height: 100%;
  padding: 0;
  text-align: left;
}

.aa-Label svg,
.aa-LoadingIndicator svg {
  color: rgba(62, 52, 211, 1);
  color: rgba(var(--aa-primary-color-rgb), 1);
  height: auto;
  max-height: 20px;
  max-height: var(--aa-input-icon-size);
  stroke-width: 1.6;
  stroke-width: var(--aa-icon-stroke-width);
  width: 20px;
  width: var(--aa-input-icon-size);
}

.aa-SubmitButton,
.aa-LoadingIndicator {
  height: 100%;
  padding-left: calc((16 * 1 * 1px) * 0.75 - 1px);
  padding-left: calc(calc(16 * 1 * 1px) * 0.75 - 1px);
  padding-left: calc(var(--aa-spacing) * 0.75 - 1px);
  padding-right: calc((16 * 1 * 1px) / 2);
  padding-right: calc(calc(16 * 1 * 1px) / 2);
  padding-right: var(--aa-spacing-half);
  width: calc((16 * 1 * 1px) * 1.75 + 20px - 1px);
  width: calc(calc(16 * 1 * 1px) * 1.75 + 20px - 1px);
  width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px);
}

@media (hover: none) and (pointer: coarse) {
  .aa-SubmitButton,
  .aa-LoadingIndicator {
    padding-left: calc(((16 * 1 * 1px) / 2) / 2 - 1px);
    padding-left: calc(calc(calc(16 * 1 * 1px) / 2) / 2 - 1px);
    padding-left: calc(var(--aa-spacing-half) / 2 - 1px);
    width: calc(20px + (16 * 1 * 1px) * 1.25 - 1px);
    width: calc(20px + calc(16 * 1 * 1px) * 1.25 - 1px);
    width: calc(var(--aa-icon-size) + var(--aa-spacing) * 1.25 - 1px);
  }
}

.aa-SubmitButton {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
}

.aa-LoadingIndicator {
  align-items: center;
  display: flex;
  justify-content: center;
}

.aa-LoadingIndicator[hidden] {
  display: none;
}

.aa-InputWrapper {
  order: 3;
  position: relative;
  width: 100%;
  /* Search box input (with placeholder and query)*/
}

.aa-Input {
  appearance: none;
  background: none;
  border: 0;
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  font: inherit;
  height: 44px;
  height: var(--aa-search-input-height);
  padding: 0;
  width: 100%;
  /* Focus is set and styled on the parent, it isn't necessary here*/
  /* Remove native appearance*/
}

.aa-Input::placeholder {
  color: rgba(128, 126, 163, 0.6);
  color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
  opacity: 1;
}

.aa-Input:focus {
  border-color: none;
  box-shadow: none;
  outline: none;
}

.aa-Input::-webkit-search-decoration, .aa-Input::-webkit-search-cancel-button, .aa-Input::-webkit-search-results-button, .aa-Input::-webkit-search-results-decoration {
  appearance: none;
}

.aa-InputWrapperSuffix {
  align-items: center;
  display: flex;
  height: 44px;
  height: var(--aa-search-input-height);
  order: 4;
  /* Accelerator to clear the query*/
}

.aa-ClearButton {
  align-items: center;
  background: none;
  border: 0;
  color: rgba(128, 126, 163, 0.6);
  color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
  cursor: pointer;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0 calc((16 * 1 * 1px) * 0.8333333333 - 0.5px);
  padding: 0 calc(calc(16 * 1 * 1px) * 0.8333333333 - 0.5px);
  padding: 0 calc(var(--aa-spacing) * 0.8333333333 - 0.5px);
}

@media (hover: none) and (pointer: coarse) {
  .aa-ClearButton {
    padding: 0 calc((16 * 1 * 1px) * 0.6666666667 - 0.5px);
    padding: 0 calc(calc(16 * 1 * 1px) * 0.6666666667 - 0.5px);
    padding: 0 calc(var(--aa-spacing) * 0.6666666667 - 0.5px);
  }
}

.aa-ClearButton:hover, .aa-ClearButton:focus {
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
}

.aa-ClearButton[hidden] {
  display: none;
}

.aa-ClearButton svg {
  stroke-width: 1.6;
  stroke-width: var(--aa-icon-stroke-width);
  width: 20px;
  width: var(--aa-icon-size);
}

/* ----------------*/

/* 4. Panel*/

/* ----------------*/

.aa-Panel {
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
  border-radius: calc((16 * 1 * 1px) / 4);
  border-radius: calc(calc(16 * 1 * 1px) / 4);
  border-radius: calc(var(--aa-spacing) / 4);
  box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),
    0 6px 16px -4px rgba(35, 38, 59, 0.15);
  box-shadow: var(--aa-panel-shadow);
  margin: 8px 0 0;
  overflow: hidden;
  position: absolute;
  transition: opacity 200ms ease-in, filter 200ms ease-in;
  /* When a request isn't resolved yet*/
}

@media screen and (prefers-reduced-motion) {
  .aa-Panel {
    transition: none;
  }
}

.aa-Panel button {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.aa-PanelLayout {
  height: 100%;
  margin: 0;
  max-height: 650px;
  max-height: var(--aa-panel-max-height);
  overflow-y: auto;
  padding: 0;
  position: relative;
  text-align: left;
}

.aa-PanelLayoutColumns--twoGolden {
  display: grid;
  grid-template-columns: 39.2% auto;
  overflow: hidden;
  padding: 0;
}

.aa-PanelLayoutColumns--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  padding: 0;
}

.aa-PanelLayoutColumns--three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  padding: 0;
}

.aa-Panel--stalled .aa-Source {
  filter: grayscale(1);
  opacity: 0.8;
}

.aa-Panel--scrollable {
  margin: 0;
  max-height: 650px;
  max-height: var(--aa-panel-max-height);
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc((16 * 1 * 1px) / 2);
  padding: calc(calc(16 * 1 * 1px) / 2);
  padding: var(--aa-spacing-half);
  scrollbar-color: rgba(255, 255, 255, 1) rgba(234, 234, 234, 1);
  scrollbar-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha)) rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
  scrollbar-width: thin;
}

.aa-Panel--scrollable::-webkit-scrollbar {
  width: 13px;
  width: var(--aa-scrollbar-width);
}

.aa-Panel--scrollable::-webkit-scrollbar-track {
  background-color: rgba(234, 234, 234, 1);
  background-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
}

.aa-Panel--scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha));
  border-color: rgba(234, 234, 234, 1);
  border-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
  border-radius: 9999px;
  border-style: solid;
  border-width: 3px 2px 3px 3px;
}

/* ----------------*/

/* 5. Sources*/

/* Each source can be styled independently*/

/* ----------------*/

.aa-Source {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  /* List of results inside the source*/
  /* Source title*/
  /* See all button*/
}

.aa-Source:empty {
  /* Hide empty section*/
  display: none;
}

.aa-SourceNoResults {
  font-size: 1em;
  margin: 0;
  padding: calc(16 * 1 * 1px);
  padding: var(--aa-spacing);
}

.aa-List {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.aa-SourceHeader {
  margin: calc((16 * 1 * 1px) / 2) 0.5em calc((16 * 1 * 1px) / 2) 0;
  margin: calc(calc(16 * 1 * 1px) / 2) 0.5em calc(calc(16 * 1 * 1px) / 2) 0;
  margin: var(--aa-spacing-half) 0.5em var(--aa-spacing-half) 0;
  padding: 0;
  position: relative;
  /* Hide empty header*/
  /* Title typography*/
  /* Line separator*/
}

.aa-SourceHeader:empty {
  display: none;
}

.aa-SourceHeaderTitle {
  background: rgba(255, 255, 255, 1);
  background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
  color: rgba(62, 52, 211, 1);
  color: rgba(var(--aa-primary-color-rgb), 1);
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  font-weight: var(--aa-font-weight-semibold);
  margin: 0;
  padding: 0 calc((16 * 1 * 1px) / 2) 0 0;
  padding: 0 calc(calc(16 * 1 * 1px) / 2) 0 0;
  padding: 0 var(--aa-spacing-half) 0 0;
  position: relative;
  z-index: 9999;
  z-index: var(--aa-base-z-index);
}

.aa-SourceHeaderLine {
  border-bottom: solid 1px rgba(62, 52, 211, 1);
  border-bottom: solid 1px rgba(var(--aa-primary-color-rgb), 1);
  display: block;
  height: 2px;
  left: 0;
  margin: 0;
  opacity: 0.3;
  padding: 0;
  position: absolute;
  right: 0;
  top: calc((16 * 1 * 1px) / 2);
  top: calc(calc(16 * 1 * 1px) / 2);
  top: var(--aa-spacing-half);
  z-index: calc(9999 - 1);
  z-index: calc(var(--aa-base-z-index) - 1);
}

.aa-SourceFooterSeeAll {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(128, 126, 163, 0.14));
  background: linear-gradient(180deg, rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)), rgba(128, 126, 163, 0.14));
  border: 1px solid rgba(128, 126, 163, 0.6);
  border: 1px solid rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
  border-radius: 5px;
  box-shadow: inset 0 0 2px #fff, 0 2px 2px -1px rgba(76, 69, 88, 0.15);
  color: inherit;
  font-size: 0.95em;
  font-weight: 500;
  font-weight: var(--aa-font-weight-medium);
  padding: 0.475em 1em 0.6em;
  text-decoration: none;
}

.aa-SourceFooterSeeAll:focus, .aa-SourceFooterSeeAll:hover {
  border: 1px solid rgba(62, 52, 211, 1);
  border: 1px solid rgba(var(--aa-primary-color-rgb), 1);
  color: rgba(62, 52, 211, 1);
  color: rgba(var(--aa-primary-color-rgb), 1);
}

/* ----------------*/

/* 6. Hit Layout*/

/* ----------------*/

.aa-Item {
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  min-height: calc((16 * 1 * 1px) * 2.5);
  min-height: calc(calc(16 * 1 * 1px) * 2.5);
  min-height: calc(var(--aa-spacing) * 2.5);
  padding: calc(((16 * 1 * 1px) / 2) / 2);
  padding: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
  padding: calc(var(--aa-spacing-half) / 2);
  /* When the result is active*/
  /* The result type icon inlined SVG or image*/
  /* wrap hit with url but we don't need to see it*/
  /* Secondary click actions*/
}

.aa-Item[aria-selected=true] {
  background-color: rgba(179, 173, 214, 0.205);
  background-color: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha));
}

.aa-Item[aria-selected=true] .aa-ItemActionButton,
.aa-Item[aria-selected=true] .aa-ActiveOnly {
  visibility: visible;
}

.aa-ItemIcon {
  align-items: center;
  background: rgba(255, 255, 255, 1);
  background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3);
  box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
  color: rgba(119, 119, 163, 1);
  color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha));
  display: flex;
  flex-shrink: 0;
  font-size: 0.7em;
  height: calc(20px + ((16 * 1 * 1px) / 2));
  height: calc(20px + calc(calc(16 * 1 * 1px) / 2));
  height: calc(var(--aa-icon-size) + var(--aa-spacing-half));
  justify-content: center;
  overflow: hidden;
  stroke-width: 1.6;
  stroke-width: var(--aa-icon-stroke-width);
  text-align: center;
  width: calc(20px + ((16 * 1 * 1px) / 2));
  width: calc(20px + calc(calc(16 * 1 * 1px) / 2));
  width: calc(var(--aa-icon-size) + var(--aa-spacing-half));
}

.aa-ItemIcon img {
  height: auto;
  max-height: calc(20px + ((16 * 1 * 1px) / 2) - 8px);
  max-height: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px);
  max-height: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);
  max-width: calc(20px + ((16 * 1 * 1px) / 2) - 8px);
  max-width: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px);
  max-width: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);
  width: auto;
}

.aa-ItemIcon svg {
  height: 20px;
  height: var(--aa-icon-size);
  width: 20px;
  width: var(--aa-icon-size);
}

.aa-ItemIcon--alignTop {
  align-self: flex-start;
}

.aa-ItemIcon--noBorder {
  background: none;
  box-shadow: none;
}

.aa-ItemIcon--picture {
  height: 96px;
  width: 96px;
}

.aa-ItemIcon--picture img {
  max-height: 100%;
  max-width: 100%;
  padding: calc((16 * 1 * 1px) / 2);
  padding: calc(calc(16 * 1 * 1px) / 2);
  padding: var(--aa-spacing-half);
}

.aa-ItemContent {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: calc((16 * 1 * 1px) / 2);
  gap: calc(calc(16 * 1 * 1px) / 2);
  grid-gap: calc((16 * 1 * 1px) / 2);
  grid-gap: calc(calc(16 * 1 * 1px) / 2);
  grid-gap: var(--aa-spacing-half);
  gap: var(--aa-spacing-half);
  grid-auto-flow: column;
  line-height: 1.25em;
  overflow: hidden;
}

.aa-ItemContent:empty {
  display: none;
}

.aa-ItemContent mark {
  background: none;
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  font-style: normal;
  font-weight: 700;
  font-weight: var(--aa-font-weight-bold);
}

.aa-ItemContent--dual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.aa-ItemContent--dual .aa-ItemContentTitle,
.aa-ItemContent--dual .aa-ItemContentSubtitle {
  display: block;
}

.aa-ItemContent--indented {
  padding-left: calc(20px + (16 * 1 * 1px));
  padding-left: calc(20px + calc(16 * 1 * 1px));
  padding-left: calc(var(--aa-icon-size) + var(--aa-spacing));
}

.aa-ItemContentBody {
  display: grid;
  gap: calc(((16 * 1 * 1px) / 2) / 2);
  gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
  grid-gap: calc(((16 * 1 * 1px) / 2) / 2);
  grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
  grid-gap: calc(var(--aa-spacing-half) / 2);
  gap: calc(var(--aa-spacing-half) / 2);
}

.aa-ItemContentTitle {
  display: inline-block;
  margin: 0 0.5em 0 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-ItemContentSubtitle {
  font-size: 0.92em;
}

.aa-ItemContentSubtitleIcon::before {
  border-color: rgba(128, 126, 163, 0.64);
  border-color: rgba(var(--aa-muted-color-rgb), 0.64);
  border-style: solid;
  content: "";
  display: inline-block;
  left: 1px;
  position: relative;
  top: -3px;
}

.aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon::before {
  border-width: 0 0 1.5px;
  margin-left: calc((16 * 1 * 1px) / 2);
  margin-left: calc(calc(16 * 1 * 1px) / 2);
  margin-left: var(--aa-spacing-half);
  margin-right: calc(((16 * 1 * 1px) / 2) / 2);
  margin-right: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
  margin-right: calc(var(--aa-spacing-half) / 2);
  width: calc(((16 * 1 * 1px) / 2) + 2px);
  width: calc(calc(calc(16 * 1 * 1px) / 2) + 2px);
  width: calc(var(--aa-spacing-half) + 2px);
}

.aa-ItemContentSubtitle--standalone {
  align-items: center;
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  display: grid;
  gap: calc((16 * 1 * 1px) / 2);
  gap: calc(calc(16 * 1 * 1px) / 2);
  grid-gap: calc((16 * 1 * 1px) / 2);
  grid-gap: calc(calc(16 * 1 * 1px) / 2);
  grid-gap: var(--aa-spacing-half);
  gap: var(--aa-spacing-half);
  grid-auto-flow: column;
  justify-content: start;
}

.aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon::before {
  border-radius: 0 0 0 3px;
  border-width: 0 0 1.5px 1.5px;
  height: calc((16 * 1 * 1px) / 2);
  height: calc(calc(16 * 1 * 1px) / 2);
  height: var(--aa-spacing-half);
  width: calc((16 * 1 * 1px) / 2);
  width: calc(calc(16 * 1 * 1px) / 2);
  width: var(--aa-spacing-half);
}

.aa-ItemContentSubtitleCategory {
  color: rgba(128, 126, 163, 1);
  color: rgba(var(--aa-muted-color-rgb), 1);
  font-weight: 500;
}

.aa-ItemContentDescription {
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  font-size: 0.85em;
  max-width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.aa-ItemContentDescription:empty {
  display: none;
}

.aa-ItemContentDescription mark {
  background: rgba(245, 223, 77, 0.5);
  background: rgba(var(--aa-description-highlight-background-color-rgb), var(--aa-description-highlight-background-color-alpha));
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  font-style: normal;
  font-weight: 500;
  font-weight: var(--aa-font-weight-medium);
}

.aa-ItemContentDash {
  color: rgba(128, 126, 163, 0.6);
  color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
  display: none;
  opacity: 0.4;
}

.aa-ItemContentTag {
  background-color: rgba(62, 52, 211, 0.2);
  background-color: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha));
  border-radius: 3px;
  margin: 0 0.4em 0 0;
  padding: 0.08em 0.3em;
}

.aa-ItemWrapper,
.aa-ItemLink {
  align-items: center;
  color: inherit;
  display: grid;
  gap: calc(((16 * 1 * 1px) / 2) / 2);
  gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
  grid-gap: calc(((16 * 1 * 1px) / 2) / 2);
  grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
  grid-gap: calc(var(--aa-spacing-half) / 2);
  gap: calc(var(--aa-spacing-half) / 2);
  grid-auto-flow: column;
  justify-content: space-between;
  width: 100%;
}

.aa-ItemLink {
  color: inherit;
  text-decoration: none;
}

.aa-ItemActions {
  display: grid;
  grid-auto-flow: column;
  height: 100%;
  justify-self: end;
  margin: 0 calc((16 * 1 * 1px) / -3);
  margin: 0 calc(calc(16 * 1 * 1px) / -3);
  margin: 0 calc(var(--aa-spacing) / -3);
  padding: 0 2px 0 0;
}

.aa-ItemActionButton {
  align-items: center;
  background: none;
  border: 0;
  color: rgba(128, 126, 163, 0.6);
  color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  padding: 0;
}

.aa-ItemActionButton:hover svg, .aa-ItemActionButton:focus svg {
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
}

@media (hover: none) and (pointer: coarse) {
  .aa-ItemActionButton:hover svg, .aa-ItemActionButton:focus svg {
    color: inherit;
  }
}

.aa-ItemActionButton svg {
  color: rgba(128, 126, 163, 0.6);
  color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
  margin: 0;
  margin: calc(calc(16 * 1 * 1px) / 3);
  margin: calc(var(--aa-spacing) / 3);
  stroke-width: 1.6;
  stroke-width: var(--aa-icon-stroke-width);
  width: 20px;
  width: var(--aa-action-icon-size);
}

.aa-ActiveOnly {
  visibility: hidden;
}

/*----------------*/

/* 7. Panel Header*/

/*----------------*/

.aa-PanelHeader {
  align-items: center;
  background: rgba(62, 52, 211, 1);
  background: rgba(var(--aa-primary-color-rgb), 1);
  color: #fff;
  display: grid;
  height: var(--aa-modal-header-height);
  margin: 0;
  padding: calc((16 * 1 * 1px) / 2) calc(16 * 1 * 1px);
  padding: calc(calc(16 * 1 * 1px) / 2) calc(16 * 1 * 1px);
  padding: var(--aa-spacing-half) var(--aa-spacing);
  position: relative;
}

.aa-PanelHeader::after {
  background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0));
  bottom: calc(((16 * 1 * 1px) / 2) * -1);
  bottom: calc(calc(calc(16 * 1 * 1px) / 2) * -1);
  bottom: calc(var(--aa-spacing-half) * -1);
  content: "";
  height: calc((16 * 1 * 1px) / 2);
  height: calc(calc(16 * 1 * 1px) / 2);
  height: var(--aa-spacing-half);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 9999;
  z-index: var(--aa-base-z-index);
}

/*----------------*/

/* 8. Panel Footer*/

/*----------------*/

.aa-PanelFooter {
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
  box-shadow: inset 0 1px 0 rgba(128, 126, 163, 0.3);
  box-shadow: inset 0 1px 0 rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: calc(16 * 1 * 1px);
  padding: var(--aa-spacing);
  position: relative;
  z-index: 9999;
  z-index: var(--aa-base-z-index);
}

.aa-PanelFooter::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(128, 126, 163, 0.6));
  background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)));
  content: "";
  height: calc(16 * 1 * 1px);
  height: var(--aa-spacing);
  left: 0;
  opacity: 0.12;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc((16 * 1 * 1px) * -1);
  top: calc(calc(16 * 1 * 1px) * -1);
  top: calc(var(--aa-spacing) * -1);
  z-index: calc(9999 - 1);
  z-index: calc(var(--aa-base-z-index) - 1);
}

/*----------------*/

/* 9. Detached Mode*/

/*----------------*/

.aa-DetachedContainer {
  background: rgba(255, 255, 255, 1);
  background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
  bottom: 0;
  box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),
    0 6px 16px -4px rgba(35, 38, 59, 0.15);
  box-shadow: var(--aa-panel-shadow);
  display: flex;
  flex-direction: column;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
  z-index: var(--aa-base-z-index);
}

.aa-DetachedContainer::after {
  height: 32px;
}

.aa-DetachedContainer .aa-SourceHeader {
  margin: calc((16 * 1 * 1px) / 2) 0 calc((16 * 1 * 1px) / 2) 2px;
  margin: calc(calc(16 * 1 * 1px) / 2) 0 calc(calc(16 * 1 * 1px) / 2) 2px;
  margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
}

.aa-DetachedContainer .aa-Panel {
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
  border-radius: 0;
  box-shadow: none;
  flex-grow: 1;
  margin: 0;
  padding: 0;
  position: relative;
}

.aa-DetachedContainer .aa-PanelLayout {
  bottom: 0;
  box-shadow: none;
  left: 0;
  margin: 0;
  max-height: none;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.aa-DetachedFormContainer {
  border-bottom: solid 1px rgba(128, 126, 163, 0.3);
  border-bottom: solid 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  padding: calc((16 * 1 * 1px) / 2);
  padding: calc(calc(16 * 1 * 1px) / 2);
  padding: var(--aa-spacing-half);
}

.aa-DetachedCancelButton {
  background: none;
  border: 0;
  border-radius: 3px;
  color: inherit;
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  cursor: pointer;
  font: inherit;
  margin: 0 0 0 calc((16 * 1 * 1px) / 2);
  margin: 0 0 0 calc(calc(16 * 1 * 1px) / 2);
  margin: 0 0 0 var(--aa-spacing-half);
  padding: 0 calc((16 * 1 * 1px) / 2);
  padding: 0 calc(calc(16 * 1 * 1px) / 2);
  padding: 0 var(--aa-spacing-half);
}

.aa-DetachedCancelButton:hover, .aa-DetachedCancelButton:focus {
  box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3);
  box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
}

.aa-DetachedContainer--modal {
  border-radius: 6px;
  bottom: inherit;
  height: auto;
  margin: 0 auto;
  max-width: 680px;
  max-width: var(--aa-detached-modal-max-width);
  position: absolute;
  top: 3%;
}

.aa-DetachedContainer--modal .aa-PanelLayout {
  max-height: 500px;
  max-height: var(--aa-detached-modal-max-height);
  padding-bottom: calc((16 * 1 * 1px) / 2);
  padding-bottom: calc(calc(16 * 1 * 1px) / 2);
  padding-bottom: var(--aa-spacing-half);
  position: static;
}

.aa-DetachedContainer--modal .aa-PanelLayout:empty {
  display: none;
}

/* Search Button*/

.aa-DetachedSearchButton {
  align-items: center;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha));
  border: 1px solid rgba(128, 126, 163, 0.8);
  border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));
  border-radius: 3px;
  color: rgba(128, 126, 163, 0.6);
  color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
  cursor: pointer;
  display: flex;
  font: inherit;
  font-family: inherit;
  font-family: var(--aa-font-family);
  font-size: calc(16 * 1px);
  font-size: var(--aa-font-size);
  height: 44px;
  height: var(--aa-search-input-height);
  margin: 0;
  padding: 0 calc(44px / 8);
  padding: 0 calc(var(--aa-search-input-height) / 8);
  position: relative;
  text-align: left;
  width: 100%;
}

.aa-DetachedSearchButton:focus {
  border-color: rgba(62, 52, 211, 1);
  border-color: rgba(var(--aa-primary-color-rgb), 1);
  box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 3px, inset rgba(62, 52, 211, 0.2) 0 0 0 2px;
  box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 3px, inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px;
  outline: currentColor none medium;
}

.aa-DetachedSearchButtonIcon {
  align-items: center;
  color: rgba(62, 52, 211, 1);
  color: rgba(var(--aa-primary-color-rgb), 1);
  cursor: auto;
  cursor: initial;
  display: flex;
  flex-shrink: 0;
  height: 100%;
  justify-content: center;
  width: calc(20px + (16 * 1 * 1px));
  width: calc(20px + calc(16 * 1 * 1px));
  width: calc(var(--aa-icon-size) + var(--aa-spacing));
}

.aa-DetachedSearchButtonQuery {
  color: rgba(38, 38, 39, 1);
  color: rgba(var(--aa-text-color-rgb), 1);
  line-height: 1.25em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-DetachedSearchButtonPlaceholder[hidden] {
  display: none;
}

/* Remove scroll on `body`*/

.aa-Detached {
  height: 100vh;
  overflow: hidden;
}

.aa-DetachedOverlay {
  background-color: rgba(115, 114, 129, 0.4);
  background-color: rgba(var(--aa-overlay-color-rgb), var(--aa-overlay-color-alpha));
  height: 100vh;
  left: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: calc(9999 - 1);
  z-index: calc(var(--aa-base-z-index) - 1);
}

/*----------------*/

/* 10. Gradients*/

/*----------------*/

.aa-GradientTop,
.aa-GradientBottom {
  height: calc((16 * 1 * 1px) / 2);
  height: calc(calc(16 * 1 * 1px) / 2);
  height: var(--aa-spacing-half);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 9999;
  z-index: var(--aa-base-z-index);
}

.aa-GradientTop {
  background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0));
  top: 0;
}

.aa-GradientBottom {
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-background-color-rgb), 1));
  border-bottom-left-radius: calc((16 * 1 * 1px) / 4);
  border-bottom-left-radius: calc(calc(16 * 1 * 1px) / 4);
  border-bottom-left-radius: calc(var(--aa-spacing) / 4);
  border-bottom-right-radius: calc((16 * 1 * 1px) / 4);
  border-bottom-right-radius: calc(calc(16 * 1 * 1px) / 4);
  border-bottom-right-radius: calc(var(--aa-spacing) / 4);
  bottom: 0;
}

/*----------------*/

/* 11. Utilities*/

/*----------------*/

@media (hover: none) and (pointer: coarse) {
  .aa-DesktopOnly {
    display: none;
  }
}

@media (hover: hover) {
  .aa-TouchOnly {
    display: none;
  }
}

:root {
  --aa-primary-color-rgb: var(--color-brand) !important;
}

label.aa-Label {
  margin-bottom: 0 !important;
}

.aa-Panel {
  z-index: 1050 !important;
}

.aa-Source {
  max-height: 20rem;
}

.aa-Input{
  font-size: calc(0.8rem + 0.26667vw);
}

@media (min-width: 1200px){

  .aa-Input{
  font-size: 1rem;
  }
}

.aa-DetachedSearchButtonPlaceholder{
  font-size: 0.75rem;
}

@media (min-width: 768px){
  .aa-DetachedSearchButtonPlaceholder{
    font-size: calc(0.775rem + 0.13333vw);
  }
  @media (min-width: 1200px){

    .aa-DetachedSearchButtonPlaceholder{
    font-size: 0.875rem;
    }
  }
}

:root {
  --iti-hover-color: rgba(0, 0, 0, 0.05);
  --iti-border-color: #ccc;
  --iti-dialcode-color: #999;
  --iti-dropdown-bg: white;
  --iti-spacer-horizontal: 8px;
  --iti-flag-height: 12px;
  --iti-flag-width: 16px;
  --iti-border-width: 1px;
  --iti-arrow-height: 4px;
  --iti-arrow-width: 6px;
  --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
  --iti-arrow-padding: 6px;
  --iti-arrow-color: #555;
  --iti-path-flags-1x: url("../img/flags.webp");
  --iti-path-flags-2x: url("../img/flags@2x.webp");
  --iti-path-globe-1x: url("../img/globe.webp");
  --iti-path-globe-2x: url("../img/globe@2x.webp");
  --iti-flag-sprite-width: 3904px;
  --iti-flag-sprite-height: 12px;
  --iti-mobile-popup-margin: 30px;
}

.iti {
  position: relative;
  display: inline-block;
}

.iti * {
  box-sizing: border-box;
}

.iti__hide {
  display: none;
}

.iti__v-hide {
  visibility: hidden;
}

.iti__a11y-text {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
}

.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
  position: relative;
  z-index: 0;
  margin: 0 !important;
}

.iti__country-container {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: var(--iti-border-width);
}

.iti__selected-country {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}

.iti__selected-country-primary {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}

.iti__arrow {
  margin-left: var(--iti-arrow-padding);
  width: 0;
  height: 0;
  border-left: var(--iti-triangle-border) solid transparent;
  border-right: var(--iti-triangle-border) solid transparent;
  border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
}

[dir=rtl] .iti__arrow {
  margin-right: var(--iti-arrow-padding);
  margin-left: 0;
}

.iti__arrow--up {
  border-top: none;
  border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
}

.iti__dropdown-content {
  border-radius: 3px;
  background-color: var(--iti-dropdown-bg);
}

.iti--inline-dropdown .iti__dropdown-content {
  position: absolute;
  z-index: 2;
  margin-top: 3px;
  margin-left: calc(var(--iti-border-width) * -1);
  border: var(--iti-border-width) solid var(--iti-border-color);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.iti__search-input {
  width: 100%;
  border-width: 0;
  border-radius: 3px;
}

.iti__search-input + .iti__country-list {
  border-top: 1px solid var(--iti-border-color);
}

.iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.iti--inline-dropdown .iti__country-list {
  max-height: 185px;
}

.iti--flexible-dropdown-width .iti__country-list {
  white-space: nowrap;
}

@media (max-width: 500px) {
  .iti--flexible-dropdown-width .iti__country-list {
    white-space: normal;
  }
}

.iti__country {
  display: flex;
  align-items: center;
  padding: 8px var(--iti-spacer-horizontal);
  outline: none;
}

.iti__dial-code {
  color: var(--iti-dialcode-color);
}

.iti__country.iti__highlight {
  background-color: var(--iti-hover-color);
}

.iti__country-list .iti__flag, .iti__country-name {
  margin-right: var(--iti-spacer-horizontal);
}

[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
  margin-right: 0;
  margin-left: var(--iti-spacer-horizontal);
}

.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
  cursor: pointer;
}

.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
  background-color: var(--iti-hover-color);
}

.iti .iti__selected-dial-code {
  margin-left: 4px;
}

[dir=rtl] .iti .iti__selected-dial-code {
  margin-left: 0;
  margin-right: 4px;
}

.iti--container {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: var(--iti-border-width);
}

.iti--container:hover {
  cursor: pointer;
}

.iti--fullscreen-popup.iti--container {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: var(--iti-mobile-popup-margin);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.iti--fullscreen-popup .iti__dropdown-content {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
}

.iti--fullscreen-popup .iti__country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.iti__flag {
  --iti-flag-offset: 100px;
  height: var(--iti-flag-height);
  width: var(--iti-flag-width);
  border-radius: 1px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: var(--iti-path-flags-1x);
  background-repeat: no-repeat;
  background-position: var(--iti-flag-offset) 0;
  background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
}

.iti__ac {
  --iti-flag-offset: 0px;
}

.iti__ad {
  --iti-flag-offset: -16px;
}

.iti__ae {
  --iti-flag-offset: -32px;
}

.iti__af {
  --iti-flag-offset: -48px;
}

.iti__ag {
  --iti-flag-offset: -64px;
}

.iti__ai {
  --iti-flag-offset: -80px;
}

.iti__al {
  --iti-flag-offset: -96px;
}

.iti__am {
  --iti-flag-offset: -112px;
}

.iti__ao {
  --iti-flag-offset: -128px;
}

.iti__ar {
  --iti-flag-offset: -144px;
}

.iti__as {
  --iti-flag-offset: -160px;
}

.iti__at {
  --iti-flag-offset: -176px;
}

.iti__au {
  --iti-flag-offset: -192px;
}

.iti__aw {
  --iti-flag-offset: -208px;
}

.iti__ax {
  --iti-flag-offset: -224px;
}

.iti__az {
  --iti-flag-offset: -240px;
}

.iti__ba {
  --iti-flag-offset: -256px;
}

.iti__bb {
  --iti-flag-offset: -272px;
}

.iti__bd {
  --iti-flag-offset: -288px;
}

.iti__be {
  --iti-flag-offset: -304px;
}

.iti__bf {
  --iti-flag-offset: -320px;
}

.iti__bg {
  --iti-flag-offset: -336px;
}

.iti__bh {
  --iti-flag-offset: -352px;
}

.iti__bi {
  --iti-flag-offset: -368px;
}

.iti__bj {
  --iti-flag-offset: -384px;
}

.iti__bl {
  --iti-flag-offset: -400px;
}

.iti__bm {
  --iti-flag-offset: -416px;
}

.iti__bn {
  --iti-flag-offset: -432px;
}

.iti__bo {
  --iti-flag-offset: -448px;
}

.iti__bq {
  --iti-flag-offset: -464px;
}

.iti__br {
  --iti-flag-offset: -480px;
}

.iti__bs {
  --iti-flag-offset: -496px;
}

.iti__bt {
  --iti-flag-offset: -512px;
}

.iti__bw {
  --iti-flag-offset: -528px;
}

.iti__by {
  --iti-flag-offset: -544px;
}

.iti__bz {
  --iti-flag-offset: -560px;
}

.iti__ca {
  --iti-flag-offset: -576px;
}

.iti__cc {
  --iti-flag-offset: -592px;
}

.iti__cd {
  --iti-flag-offset: -608px;
}

.iti__cf {
  --iti-flag-offset: -624px;
}

.iti__cg {
  --iti-flag-offset: -640px;
}

.iti__ch {
  --iti-flag-offset: -656px;
}

.iti__ci {
  --iti-flag-offset: -672px;
}

.iti__ck {
  --iti-flag-offset: -688px;
}

.iti__cl {
  --iti-flag-offset: -704px;
}

.iti__cm {
  --iti-flag-offset: -720px;
}

.iti__cn {
  --iti-flag-offset: -736px;
}

.iti__co {
  --iti-flag-offset: -752px;
}

.iti__cr {
  --iti-flag-offset: -768px;
}

.iti__cu {
  --iti-flag-offset: -784px;
}

.iti__cv {
  --iti-flag-offset: -800px;
}

.iti__cw {
  --iti-flag-offset: -816px;
}

.iti__cx {
  --iti-flag-offset: -832px;
}

.iti__cy {
  --iti-flag-offset: -848px;
}

.iti__cz {
  --iti-flag-offset: -864px;
}

.iti__de {
  --iti-flag-offset: -880px;
}

.iti__dj {
  --iti-flag-offset: -896px;
}

.iti__dk {
  --iti-flag-offset: -912px;
}

.iti__dm {
  --iti-flag-offset: -928px;
}

.iti__do {
  --iti-flag-offset: -944px;
}

.iti__dz {
  --iti-flag-offset: -960px;
}

.iti__ec {
  --iti-flag-offset: -976px;
}

.iti__ee {
  --iti-flag-offset: -992px;
}

.iti__eg {
  --iti-flag-offset: -1008px;
}

.iti__eh {
  --iti-flag-offset: -1024px;
}

.iti__er {
  --iti-flag-offset: -1040px;
}

.iti__es {
  --iti-flag-offset: -1056px;
}

.iti__et {
  --iti-flag-offset: -1072px;
}

.iti__fi {
  --iti-flag-offset: -1088px;
}

.iti__fj {
  --iti-flag-offset: -1104px;
}

.iti__fk {
  --iti-flag-offset: -1120px;
}

.iti__fm {
  --iti-flag-offset: -1136px;
}

.iti__fo {
  --iti-flag-offset: -1152px;
}

.iti__fr {
  --iti-flag-offset: -1168px;
}

.iti__ga {
  --iti-flag-offset: -1184px;
}

.iti__gb {
  --iti-flag-offset: -1200px;
}

.iti__gd {
  --iti-flag-offset: -1216px;
}

.iti__ge {
  --iti-flag-offset: -1232px;
}

.iti__gf {
  --iti-flag-offset: -1248px;
}

.iti__gg {
  --iti-flag-offset: -1264px;
}

.iti__gh {
  --iti-flag-offset: -1280px;
}

.iti__gi {
  --iti-flag-offset: -1296px;
}

.iti__gl {
  --iti-flag-offset: -1312px;
}

.iti__gm {
  --iti-flag-offset: -1328px;
}

.iti__gn {
  --iti-flag-offset: -1344px;
}

.iti__gp {
  --iti-flag-offset: -1360px;
}

.iti__gq {
  --iti-flag-offset: -1376px;
}

.iti__gr {
  --iti-flag-offset: -1392px;
}

.iti__gt {
  --iti-flag-offset: -1408px;
}

.iti__gu {
  --iti-flag-offset: -1424px;
}

.iti__gw {
  --iti-flag-offset: -1440px;
}

.iti__gy {
  --iti-flag-offset: -1456px;
}

.iti__hk {
  --iti-flag-offset: -1472px;
}

.iti__hn {
  --iti-flag-offset: -1488px;
}

.iti__hr {
  --iti-flag-offset: -1504px;
}

.iti__ht {
  --iti-flag-offset: -1520px;
}

.iti__hu {
  --iti-flag-offset: -1536px;
}

.iti__id {
  --iti-flag-offset: -1552px;
}

.iti__ie {
  --iti-flag-offset: -1568px;
}

.iti__il {
  --iti-flag-offset: -1584px;
}

.iti__im {
  --iti-flag-offset: -1600px;
}

.iti__in {
  --iti-flag-offset: -1616px;
}

.iti__io {
  --iti-flag-offset: -1632px;
}

.iti__iq {
  --iti-flag-offset: -1648px;
}

.iti__ir {
  --iti-flag-offset: -1664px;
}

.iti__is {
  --iti-flag-offset: -1680px;
}

.iti__it {
  --iti-flag-offset: -1696px;
}

.iti__je {
  --iti-flag-offset: -1712px;
}

.iti__jm {
  --iti-flag-offset: -1728px;
}

.iti__jo {
  --iti-flag-offset: -1744px;
}

.iti__jp {
  --iti-flag-offset: -1760px;
}

.iti__ke {
  --iti-flag-offset: -1776px;
}

.iti__kg {
  --iti-flag-offset: -1792px;
}

.iti__kh {
  --iti-flag-offset: -1808px;
}

.iti__ki {
  --iti-flag-offset: -1824px;
}

.iti__km {
  --iti-flag-offset: -1840px;
}

.iti__kn {
  --iti-flag-offset: -1856px;
}

.iti__kp {
  --iti-flag-offset: -1872px;
}

.iti__kr {
  --iti-flag-offset: -1888px;
}

.iti__kw {
  --iti-flag-offset: -1904px;
}

.iti__ky {
  --iti-flag-offset: -1920px;
}

.iti__kz {
  --iti-flag-offset: -1936px;
}

.iti__la {
  --iti-flag-offset: -1952px;
}

.iti__lb {
  --iti-flag-offset: -1968px;
}

.iti__lc {
  --iti-flag-offset: -1984px;
}

.iti__li {
  --iti-flag-offset: -2000px;
}

.iti__lk {
  --iti-flag-offset: -2016px;
}

.iti__lr {
  --iti-flag-offset: -2032px;
}

.iti__ls {
  --iti-flag-offset: -2048px;
}

.iti__lt {
  --iti-flag-offset: -2064px;
}

.iti__lu {
  --iti-flag-offset: -2080px;
}

.iti__lv {
  --iti-flag-offset: -2096px;
}

.iti__ly {
  --iti-flag-offset: -2112px;
}

.iti__ma {
  --iti-flag-offset: -2128px;
}

.iti__mc {
  --iti-flag-offset: -2144px;
}

.iti__md {
  --iti-flag-offset: -2160px;
}

.iti__me {
  --iti-flag-offset: -2176px;
}

.iti__mf {
  --iti-flag-offset: -2192px;
}

.iti__mg {
  --iti-flag-offset: -2208px;
}

.iti__mh {
  --iti-flag-offset: -2224px;
}

.iti__mk {
  --iti-flag-offset: -2240px;
}

.iti__ml {
  --iti-flag-offset: -2256px;
}

.iti__mm {
  --iti-flag-offset: -2272px;
}

.iti__mn {
  --iti-flag-offset: -2288px;
}

.iti__mo {
  --iti-flag-offset: -2304px;
}

.iti__mp {
  --iti-flag-offset: -2320px;
}

.iti__mq {
  --iti-flag-offset: -2336px;
}

.iti__mr {
  --iti-flag-offset: -2352px;
}

.iti__ms {
  --iti-flag-offset: -2368px;
}

.iti__mt {
  --iti-flag-offset: -2384px;
}

.iti__mu {
  --iti-flag-offset: -2400px;
}

.iti__mv {
  --iti-flag-offset: -2416px;
}

.iti__mw {
  --iti-flag-offset: -2432px;
}

.iti__mx {
  --iti-flag-offset: -2448px;
}

.iti__my {
  --iti-flag-offset: -2464px;
}

.iti__mz {
  --iti-flag-offset: -2480px;
}

.iti__na {
  --iti-flag-offset: -2496px;
}

.iti__nc {
  --iti-flag-offset: -2512px;
}

.iti__ne {
  --iti-flag-offset: -2528px;
}

.iti__nf {
  --iti-flag-offset: -2544px;
}

.iti__ng {
  --iti-flag-offset: -2560px;
}

.iti__ni {
  --iti-flag-offset: -2576px;
}

.iti__nl {
  --iti-flag-offset: -2592px;
}

.iti__no {
  --iti-flag-offset: -2608px;
}

.iti__np {
  --iti-flag-offset: -2624px;
}

.iti__nr {
  --iti-flag-offset: -2640px;
}

.iti__nu {
  --iti-flag-offset: -2656px;
}

.iti__nz {
  --iti-flag-offset: -2672px;
}

.iti__om {
  --iti-flag-offset: -2688px;
}

.iti__pa {
  --iti-flag-offset: -2704px;
}

.iti__pe {
  --iti-flag-offset: -2720px;
}

.iti__pf {
  --iti-flag-offset: -2736px;
}

.iti__pg {
  --iti-flag-offset: -2752px;
}

.iti__ph {
  --iti-flag-offset: -2768px;
}

.iti__pk {
  --iti-flag-offset: -2784px;
}

.iti__pl {
  --iti-flag-offset: -2800px;
}

.iti__pm {
  --iti-flag-offset: -2816px;
}

.iti__pr {
  --iti-flag-offset: -2832px;
}

.iti__ps {
  --iti-flag-offset: -2848px;
}

.iti__pt {
  --iti-flag-offset: -2864px;
}

.iti__pw {
  --iti-flag-offset: -2880px;
}

.iti__py {
  --iti-flag-offset: -2896px;
}

.iti__qa {
  --iti-flag-offset: -2912px;
}

.iti__re {
  --iti-flag-offset: -2928px;
}

.iti__ro {
  --iti-flag-offset: -2944px;
}

.iti__rs {
  --iti-flag-offset: -2960px;
}

.iti__ru {
  --iti-flag-offset: -2976px;
}

.iti__rw {
  --iti-flag-offset: -2992px;
}

.iti__sa {
  --iti-flag-offset: -3008px;
}

.iti__sb {
  --iti-flag-offset: -3024px;
}

.iti__sc {
  --iti-flag-offset: -3040px;
}

.iti__sd {
  --iti-flag-offset: -3056px;
}

.iti__se {
  --iti-flag-offset: -3072px;
}

.iti__sg {
  --iti-flag-offset: -3088px;
}

.iti__sh {
  --iti-flag-offset: -3104px;
}

.iti__si {
  --iti-flag-offset: -3120px;
}

.iti__sj {
  --iti-flag-offset: -3136px;
}

.iti__sk {
  --iti-flag-offset: -3152px;
}

.iti__sl {
  --iti-flag-offset: -3168px;
}

.iti__sm {
  --iti-flag-offset: -3184px;
}

.iti__sn {
  --iti-flag-offset: -3200px;
}

.iti__so {
  --iti-flag-offset: -3216px;
}

.iti__sr {
  --iti-flag-offset: -3232px;
}

.iti__ss {
  --iti-flag-offset: -3248px;
}

.iti__st {
  --iti-flag-offset: -3264px;
}

.iti__sv {
  --iti-flag-offset: -3280px;
}

.iti__sx {
  --iti-flag-offset: -3296px;
}

.iti__sy {
  --iti-flag-offset: -3312px;
}

.iti__sz {
  --iti-flag-offset: -3328px;
}

.iti__tc {
  --iti-flag-offset: -3344px;
}

.iti__td {
  --iti-flag-offset: -3360px;
}

.iti__tg {
  --iti-flag-offset: -3376px;
}

.iti__th {
  --iti-flag-offset: -3392px;
}

.iti__tj {
  --iti-flag-offset: -3408px;
}

.iti__tk {
  --iti-flag-offset: -3424px;
}

.iti__tl {
  --iti-flag-offset: -3440px;
}

.iti__tm {
  --iti-flag-offset: -3456px;
}

.iti__tn {
  --iti-flag-offset: -3472px;
}

.iti__to {
  --iti-flag-offset: -3488px;
}

.iti__tr {
  --iti-flag-offset: -3504px;
}

.iti__tt {
  --iti-flag-offset: -3520px;
}

.iti__tv {
  --iti-flag-offset: -3536px;
}

.iti__tw {
  --iti-flag-offset: -3552px;
}

.iti__tz {
  --iti-flag-offset: -3568px;
}

.iti__ua {
  --iti-flag-offset: -3584px;
}

.iti__ug {
  --iti-flag-offset: -3600px;
}

.iti__us {
  --iti-flag-offset: -3616px;
}

.iti__uy {
  --iti-flag-offset: -3632px;
}

.iti__uz {
  --iti-flag-offset: -3648px;
}

.iti__va {
  --iti-flag-offset: -3664px;
}

.iti__vc {
  --iti-flag-offset: -3680px;
}

.iti__ve {
  --iti-flag-offset: -3696px;
}

.iti__vg {
  --iti-flag-offset: -3712px;
}

.iti__vi {
  --iti-flag-offset: -3728px;
}

.iti__vn {
  --iti-flag-offset: -3744px;
}

.iti__vu {
  --iti-flag-offset: -3760px;
}

.iti__wf {
  --iti-flag-offset: -3776px;
}

.iti__ws {
  --iti-flag-offset: -3792px;
}

.iti__xk {
  --iti-flag-offset: -3808px;
}

.iti__ye {
  --iti-flag-offset: -3824px;
}

.iti__yt {
  --iti-flag-offset: -3840px;
}

.iti__za {
  --iti-flag-offset: -3856px;
}

.iti__zm {
  --iti-flag-offset: -3872px;
}

.iti__zw {
  --iti-flag-offset: -3888px;
}

.iti__globe {
  background-image: var(--iti-path-globe-1x);
  background-size: contain;
  background-position: right;
  box-shadow: none;
  height: 19px;
}

@media (min-resolution: 2x) {
  .iti__flag {
    background-image: var(--iti-path-flags-2x);
  }

  .iti__globe {
    background-image: var(--iti-path-globe-2x);
  }
}

.iti {
  width: 100%;
}

/* .iti__flag {
  background-image: url("flags/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("flags/flags@2x.png");
  }
} */

.iti {
  --iti-path-flags-1x: url("/assets/flags/flags-b939c200.webp");
  --iti-path-flags-2x: url("/assets/flags/flags@2x-40b07c36.webp");
  --iti-path-globe-1x: url("/assets/flags/globe-0e5991cb.webp");
  --iti-path-globe-2x: url("/assets/flags/globe@2x-3e87d086.webp");
}

.focus\:border:focus {
  border: 1px solid var(--color-gray-light);
}

.primer--tab .peer:checked ~ .peer-checked\:secondary.primer--button{
  border-width: 0px !important;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: var(--color-blue);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.primer--tab .peer:checked ~ .peer-checked\:secondary.primer--button.active,
        .primer--tab .peer:checked ~ .peer-checked\:secondary.primer--button:focus,
        .primer--tab .peer:checked ~ .peer-checked\:secondary.primer--button:hover{
  border-width: 0px !important;
  border-style: none !important;
  background-color: var(--color-blue-lighter);
  fill: var(--color-blue-dark);
  color: var(--color-blue-dark);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.peer:checked ~ .peer-checked\:secondary.primer--button{
  border-style: none;
  border-color: var(--color-blue);
  background-color: var(--color-blue-lighter);
  fill: var(--color-blue-dark);
  color: var(--color-blue-dark);
}

.peer:checked ~ .peer-checked\:secondary.primer--button:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background-color: #c3e7f3;
}

.peer:checked ~ .peer-checked\:secondary.primer--button:active,.peer:checked ~ .peer-checked\:secondary
      .primer--button.active{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  background-color: #a1c9d6;
}

.peer:checked ~ .peer-checked\:secondary.primer--button:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue-dark);
}

.peer:checked ~ .peer-checked\:secondary.primer--button.text{
  color: var(--color-blue-lighter);
}

.peer:checked ~ .peer-checked\:secondary.primer--button.text:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-blue-lighter);
}

.peer:checked ~ .peer-checked\:secondary.primer--button.text:hover{
  background-color: var(--color-blue-light);
}

@media (min-width: 768px){
  .md\:title--sm{
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
    font-family: var(--main-font);
    font-size: 0.75rem;
  }
}

.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}

.after\:left-\[2px\]::after{
  content: var(--tw-content);
  left: 2px;
}

.after\:top-\[2px\]::after{
  content: var(--tw-content);
  top: 2px;
}

.after\:h-4::after{
  content: var(--tw-content);
  height: 1rem;
}

.after\:w-4::after{
  content: var(--tw-content);
  width: 1rem;
}

.after\:rounded-full::after{
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:bg-white::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.after\:transition-all::after{
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}

.last\:hidden:last-child{
  display: none;
}

.only\:block:only-child{
  display: block;
}

.only\:flex:only-child{
  display: flex;
}

.visited\:first\:inline:first-child:visited{
  display: inline;
}

.focus-within\:outline:focus-within{
  outline-style: solid;
}

.focus-within\:outline-4:focus-within{
  outline-width: 4px;
}

.focus-within\:outline-offset-2:focus-within{
  outline-offset: 2px;
}

.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:cursor-pointer:hover{
  cursor: pointer;
}

.hover\:cursor-zoom-in:hover{
  cursor: zoom-in;
}

.hover\:\!bg-gray-lighter:hover{
  background-color: var(--color-gray-lighter) !important;
}

.hover\:bg-blue-dark:hover{
  background-color: var(--color-blue-dark);
}

.hover\:bg-blue-light:hover{
  background-color: var(--color-blue-light);
}

.hover\:bg-blue-lighter:hover{
  background-color: var(--color-blue-lighter);
}

.hover\:bg-blue-lightest:hover{
  background-color: var(--color-blue-lightest);
}

.hover\:bg-brand-light:hover{
  background-color: var(--color-brand-light);
}

.hover\:bg-cyan-light:hover{
  background-color: var(--color-cyan-light);
}

.hover\:bg-gray-lighter:hover{
  background-color: var(--color-gray-lighter);
}

.hover\:bg-gray-lightest:hover{
  background-color: var(--color-gray-lightest);
}

.hover\:bg-green-dark:hover{
  background-color: var(--color-green-dark);
}

.hover\:bg-green-lightest:hover{
  background-color: var(--color-green-lightest);
}

.hover\:bg-neutral-200:hover{
  background-color: var(--color-neutral-200);
}

.hover\:bg-neutral-400:hover{
  background-color: var(--color-neutral-400);
}

.hover\:bg-pink-dark:hover{
  background-color: var(--color-pink-dark);
}

.hover\:fill-white:hover{
  fill: #fff;
}

.hover\:text-blue-dark:hover{
  color: var(--color-blue-dark);
}

.hover\:text-brand:hover{
  color: var(--color-brand);
}

.hover\:text-brand-dark:hover{
  color: var(--color-brand-dark);
}

.hover\:text-gray-dark:hover{
  color: var(--color-gray-dark);
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:\!no-underline:hover{
  text-decoration-line: none !important;
}

.hover\:no-underline:hover{
  text-decoration-line: none;
}

.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border:focus{
  border-width: 1px;
}

.focus\:border-blue:focus{
  border-color: var(--color-blue);
}

.focus\:\!outline-none:focus{
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:outline-0:focus{
  outline-width: 0px;
}

.focus\:ring-0:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.disabled\:cursor-auto:disabled{
  cursor: auto;
}

.disabled\:fill-gray-lighter:disabled{
  fill: var(--color-gray-lighter);
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.disabled\:hover\:bg-blue-dark:hover:disabled{
  background-color: var(--color-blue-dark);
}

.disabled\:hover\:bg-gray-lightest:hover:disabled{
  background-color: var(--color-gray-lightest);
}

.disabled\:hover\:bg-green-dark:hover:disabled{
  background-color: var(--color-green-dark);
}

.disabled\:hover\:bg-pink-dark:hover:disabled{
  background-color: var(--color-pink-dark);
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

.peer:checked ~ .peer-checked\:block{
  display: block;
}

.peer:checked ~ .peer-checked\:hidden{
  display: none;
}

.peer:checked ~ .peer-checked\:bg-blue{
  background-color: var(--color-blue);
}

.peer:checked ~ .peer-checked\:bg-blue-lighter{
  background-color: var(--color-blue-lighter);
}

.peer:checked ~ .peer-checked\:bg-green{
  background-color: var(--color-green);
}

.peer:checked ~ .peer-checked\:fill-white{
  fill: #fff;
}

.peer:checked ~ .peer-checked\:font-medium{
  font-weight: 500;
}

.peer:checked ~ .peer-checked\:text-blue-dark{
  color: var(--color-blue-dark);
}

.peer:checked ~ .peer-checked\:opacity-100{
  opacity: 1;
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after{
  content: var(--tw-content);
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .hover\:peer-checked\:bg-blue-dark:hover{
  background-color: var(--color-blue-dark);
}

.peer:focus ~ .peer-focus\:outline-0{
  outline-width: 0px;
}

.peer:focus ~ .peer-focus\:ring-transparent{
  --tw-ring-color: transparent;
}

@media (min-width: 576px){
  .sm\:absolute{
    position: absolute;
  }

  .sm\:bottom-24{
    bottom: 6rem;
  }

  .sm\:left-4{
    left: 1rem;
  }

  .sm\:left-6{
    left: 1.5rem;
  }

  .sm\:right-6{
    right: 1.5rem;
  }

  .sm\:right-auto{
    right: auto;
  }

  .sm\:top-\[unset\]{
    top: unset;
  }

  .sm\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .sm\:m-8{
    margin: 2rem;
  }

  .sm\:mx-12{
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .sm\:my-4{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .sm\:\!mt-0{
    margin-top: 0px !important;
  }

  .sm\:mr-0{
    margin-right: 0px;
  }

  .sm\:mr-1{
    margin-right: 0.25rem;
  }

  .sm\:mr-12{
    margin-right: 3rem;
  }

  .sm\:mr-4{
    margin-right: 1rem;
  }

  .sm\:mt-0{
    margin-top: 0px;
  }

  .sm\:mt-12{
    margin-top: 3rem;
  }

  .sm\:mt-16{
    margin-top: 4rem;
  }

  .sm\:mt-8{
    margin-top: 2rem;
  }

  .sm\:block{
    display: block;
  }

  .sm\:inline-block{
    display: inline-block;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:grid{
    display: grid;
  }

  .sm\:\!hidden{
    display: none !important;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:h-full{
    height: 100%;
  }

  .sm\:max-h-72{
    max-height: 18rem;
  }

  .sm\:\!w-96{
    width: 24rem !important;
  }

  .sm\:w-5\/12{
    width: 41.666667%;
  }

  .sm\:w-56{
    width: 14rem;
  }

  .sm\:w-7\/12{
    width: 58.333333%;
  }

  .sm\:w-96{
    width: 24rem;
  }

  .sm\:w-\[7rem\]{
    width: 7rem;
  }

  .sm\:w-auto{
    width: auto;
  }

  .sm\:w-full{
    width: 100%;
  }

  .sm\:max-w-lg{
    max-width: 32rem;
  }

  .sm\:max-w-xl{
    max-width: 36rem;
  }

  .sm\:shrink-0{
    flex-shrink: 0;
  }

  .sm\:translate-x-0{
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:translate-x-2{
    --tw-translate-x: 0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:translate-y-0{
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-nowrap{
    flex-wrap: nowrap;
  }

  .sm\:items-start{
    align-items: flex-start;
  }

  .sm\:items-end{
    align-items: flex-end;
  }

  .sm\:justify-normal{
    justify-content: normal;
  }

  .sm\:justify-start{
    justify-content: flex-start;
  }

  .sm\:justify-end{
    justify-content: flex-end;
  }

  .sm\:gap-2{
    gap: 0.5rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:gap-8{
    gap: 2rem;
  }

  .sm\:self-end{
    align-self: flex-end;
  }

  .sm\:rounded-l-2xl{
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }

  .sm\:rounded-tr-none{
    border-top-right-radius: 0px;
  }

  .sm\:bg-bottom{
    background-position: bottom;
  }

  .sm\:p-3{
    padding: 0.75rem;
  }

  .sm\:p-6{
    padding: 1.5rem;
  }

  .sm\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:pr-12{
    padding-right: 3rem;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:text-sm{
    font-size: 0.75rem;
  }
}

@media (min-width: 768px){
  @media (min-width: 576px){
    .md\:sm\:grid-cols-3{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .md\:absolute{
    position: absolute;
  }

  .md\:bottom-16{
    bottom: 4rem;
  }

  .md\:bottom-32{
    bottom: 8rem;
  }

  .md\:bottom-4{
    bottom: 1rem;
  }

  .md\:bottom-auto{
    bottom: auto;
  }

  .md\:left-16{
    left: 4rem;
  }

  .md\:left-4{
    left: 1rem;
  }

  .md\:right-0{
    right: 0px;
  }

  .md\:top-16{
    top: 4rem;
  }

  .md\:top-32{
    top: 8rem;
  }

  .md\:top-4{
    top: 1rem;
  }

  .md\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .md\:col-span-10{
    grid-column: span 10 / span 10;
  }

  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .md\:\!mx-6{
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }

  .md\:\!my-0{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .md\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:mx-12{
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .md\:mx-20{
    margin-left: 5rem;
    margin-right: 5rem;
  }

  .md\:mx-3{
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .md\:mx-6{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .md\:\!mt-8{
    margin-top: 2rem !important;
  }

  .md\:mb-0{
    margin-bottom: 0px;
  }

  .md\:ml-0{
    margin-left: 0px;
  }

  .md\:ml-12{
    margin-left: 3rem;
  }

  .md\:mr-2{
    margin-right: 0.5rem;
  }

  .md\:mt-0{
    margin-top: 0px;
  }

  .md\:mt-1{
    margin-top: 0.25rem;
  }

  .md\:mt-20{
    margin-top: 5rem;
  }

  .md\:\!block{
    display: block !important;
  }

  .md\:block{
    display: block;
  }

  .md\:inline{
    display: inline;
  }

  .md\:\!flex{
    display: flex !important;
  }

  .md\:flex{
    display: flex;
  }

  .md\:table-cell{
    display: table-cell;
  }

  .md\:grid{
    display: grid;
  }

  .md\:hidden{
    display: none;
  }

  .md\:h-24{
    height: 6rem;
  }

  .md\:h-32{
    height: 8rem;
  }

  .md\:h-full{
    height: 100%;
  }

  .md\:max-h-full{
    max-height: 100%;
  }

  .md\:w-1\/2{
    width: 50%;
  }

  .md\:w-2\/3{
    width: 66.666667%;
  }

  .md\:w-20{
    width: 5rem;
  }

  .md\:w-32{
    width: 8rem;
  }

  .md\:w-40{
    width: 10rem;
  }

  .md\:w-auto{
    width: auto;
  }

  .md\:w-max{
    width: max-content;
  }

  .md\:max-w-5xl{
    max-width: 64rem;
  }

  .md\:max-w-72{
    max-width: 18rem;
  }

  .md\:max-w-96{
    max-width: 24rem;
  }

  .md\:max-w-md{
    max-width: 28rem;
  }

  .md\:max-w-xs{
    max-width: 20rem;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:flex-nowrap{
    flex-wrap: nowrap;
  }

  .md\:justify-normal{
    justify-content: normal;
  }

  .md\:\!justify-end{
    justify-content: flex-end !important;
  }

  .md\:justify-end{
    justify-content: flex-end;
  }

  .md\:justify-between{
    justify-content: space-between;
  }

  .md\:gap-0{
    gap: 0px;
  }

  .md\:gap-4{
    gap: 1rem;
  }

  .md\:gap-6{
    gap: 1.5rem;
  }

  .md\:gap-y-8{
    row-gap: 2rem;
  }

  .md\:rounded-xl{
    border-radius: 0.75rem;
  }

  .md\:border-t-0{
    border-top-width: 0px;
  }

  .md\:border-none{
    border-style: none;
  }

  .md\:bg-gray-lightest{
    background-color: var(--color-gray-lightest);
  }

  .md\:\!p-0{
    padding: 0px !important;
  }

  .md\:p-12{
    padding: 3rem;
  }

  .md\:p-4{
    padding: 1rem;
  }

  .md\:p-6{
    padding: 1.5rem;
  }

  .md\:p-8{
    padding: 2rem;
  }

  .md\:\!px-12{
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .md\:\!px-28{
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }

  .md\:\!px-8{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .md\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .md\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

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

  .md\:\!pl-6{
    padding-left: 1.5rem !important;
  }

  .md\:\!pr-12{
    padding-right: 3rem !important;
  }

  .md\:\!pt-16{
    padding-top: 4rem !important;
  }

  .md\:pl-6{
    padding-left: 1.5rem;
  }

  .md\:pt-4{
    padding-top: 1rem;
  }

  .md\:\!text-left{
    text-align: left !important;
  }

  .md\:text-left{
    text-align: left;
  }
}

@media (min-width: 992px){
  .lg\:relative{
    position: relative;
  }

  .lg\:inset-auto{
    inset: auto;
  }

  .lg\:bottom-12{
    bottom: 3rem;
  }

  .lg\:order-1{
    order: 1;
  }

  .lg\:order-2{
    order: 2;
  }

  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .lg\:\!my-0{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .lg\:mx-12{
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .lg\:mx-20{
    margin-left: 5rem;
    margin-right: 5rem;
  }

  .lg\:mx-3{
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .lg\:mx-40{
    margin-left: 10rem;
    margin-right: 10rem;
  }

  .lg\:mx-5{
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .lg\:mx-6{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .lg\:mx-8{
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .lg\:my-12{
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .lg\:my-3{
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .lg\:my-4{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .lg\:my-6{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .lg\:my-7{
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
  }

  .lg\:my-8{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .lg\:\!ml-48{
    margin-left: 12rem !important;
  }

  .lg\:mb-0{
    margin-bottom: 0px;
  }

  .lg\:mb-12{
    margin-bottom: 3rem;
  }

  .lg\:mb-8{
    margin-bottom: 2rem;
  }

  .lg\:ml-12{
    margin-left: 3rem;
  }

  .lg\:mr-6{
    margin-right: 1.5rem;
  }

  .lg\:mt-0{
    margin-top: 0px;
  }

  .lg\:mt-12{
    margin-top: 3rem;
  }

  .lg\:mt-6{
    margin-top: 1.5rem;
  }

  .lg\:block{
    display: block;
  }

  .lg\:inline{
    display: inline;
  }

  .lg\:\!flex{
    display: flex !important;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:\!hidden{
    display: none !important;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-16{
    height: 4rem;
  }

  .lg\:h-24{
    height: 6rem;
  }

  .lg\:h-32{
    height: 8rem;
  }

  .lg\:h-48{
    height: 12rem;
  }

  .lg\:h-6{
    height: 1.5rem;
  }

  .lg\:h-7{
    height: 1.75rem;
  }

  .lg\:h-full{
    height: 100%;
  }

  .lg\:\!w-16{
    width: 4rem !important;
  }

  .lg\:\!w-full{
    width: 100% !important;
  }

  .lg\:w-1\/2{
    width: 50%;
  }

  .lg\:w-1\/3{
    width: 33.333333%;
  }

  .lg\:w-1\/4{
    width: 25%;
  }

  .lg\:w-14{
    width: 3.5rem;
  }

  .lg\:w-24{
    width: 6rem;
  }

  .lg\:w-32{
    width: 8rem;
  }

  .lg\:w-6{
    width: 1.5rem;
  }

  .lg\:w-72{
    width: 18rem;
  }

  .lg\:w-80{
    width: 20rem;
  }

  .lg\:w-\[calc\(100\%-12rem\)\]{
    width: calc(100% - 12rem);
  }

  .lg\:w-auto{
    width: auto;
  }

  .lg\:w-max{
    width: max-content;
  }

  .lg\:min-w-\[11rem\]{
    min-width: 11rem;
  }

  .lg\:min-w-\[4rem\]{
    min-width: 4rem;
  }

  .lg\:max-w-2xl{
    max-width: 42rem;
  }

  .lg\:max-w-4xl{
    max-width: 56rem;
  }

  .lg\:max-w-60{
    max-width: 15rem;
  }

  .lg\:max-w-80{
    max-width: 20rem;
  }

  .lg\:max-w-lg{
    max-width: 32rem;
  }

  .lg\:max-w-sm{
    max-width: 24rem;
  }

  .lg\:max-w-xl{
    max-width: 36rem;
  }

  .lg\:shrink-0{
    flex-shrink: 0;
  }

  .lg\:translate-y-0{
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:flex-col{
    flex-direction: column;
  }

  .lg\:flex-wrap{
    flex-wrap: wrap;
  }

  .lg\:place-content-stretch{
    place-content: stretch;
  }

  .lg\:items-center{
    align-items: center;
  }

  .lg\:\!justify-end{
    justify-content: flex-end !important;
  }

  .lg\:justify-end{
    justify-content: flex-end;
  }

  .lg\:justify-center{
    justify-content: center;
  }

  .lg\:justify-between{
    justify-content: space-between;
  }

  .lg\:gap-4{
    gap: 1rem;
  }

  .lg\:gap-6{
    gap: 1.5rem;
  }

  .lg\:gap-8{
    gap: 2rem;
  }

  .lg\:overflow-hidden{
    overflow: hidden;
  }

  .lg\:\!rounded-t{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
  }

  .lg\:rounded-l-lg{
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

  .lg\:rounded-t{
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  .lg\:rounded-tr-none{
    border-top-right-radius: 0px;
  }

  .lg\:border-none{
    border-style: none;
  }

  .lg\:p-12{
    padding: 3rem;
  }

  .lg\:p-16{
    padding: 4rem;
  }

  .lg\:p-4{
    padding: 1rem;
  }

  .lg\:p-6{
    padding: 1.5rem;
  }

  .lg\:p-8{
    padding: 2rem;
  }

  .lg\:\!px-40{
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .lg\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .lg\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:py-48{
    padding-top: 12rem;
    padding-bottom: 12rem;
  }

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

  .lg\:pb-12{
    padding-bottom: 3rem;
  }

  .lg\:pr-0{
    padding-right: 0px;
  }

  .lg\:pt-0{
    padding-top: 0px;
  }

  .lg\:pt-12{
    padding-top: 3rem;
  }

  .lg\:pt-6{
    padding-top: 1.5rem;
  }

  .lg\:text-left{
    text-align: left;
  }

  .lg\:text-base{
    font-size: calc(0.775rem + 0.13333vw);
  }

  @media (min-width: 1200px){

    .lg\:text-base{
    font-size: 0.875rem;
    }
  }

  .lg\:duration-0{
    transition-duration: 0s;
  }
}

@media (min-width: 1200px){
  .xl\:mx-40{
    margin-left: 10rem;
    margin-right: 10rem;
  }

  .xl\:ml-6{
    margin-left: 1.5rem;
  }

  .xl\:block{
    display: block;
  }

  .xl\:inline{
    display: inline;
  }

  .xl\:flex{
    display: flex;
  }

  .xl\:hidden{
    display: none;
  }

  .xl\:h-auto{
    height: auto;
  }

  .xl\:w-28{
    width: 7rem;
  }

  .xl\:w-80{
    width: 20rem;
  }

  .xl\:w-auto{
    width: auto;
  }

  .xl\:max-w-\[50\%\]{
    max-width: 50%;
  }

  .xl\:max-w-sm{
    max-width: 24rem;
  }

  .xl\:flex-grow{
    flex-grow: 1;
  }

  .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:flex-row{
    flex-direction: row;
  }

  .xl\:gap-0{
    gap: 0px;
  }

  .xl\:gap-4{
    gap: 1rem;
  }

  .xl\:gap-6{
    gap: 1.5rem;
  }

  .xl\:p-16{
    padding: 4rem;
  }

  .xl\:p-4{
    padding: 1rem;
  }

  .xl\:px-40{
    padding-left: 10rem;
    padding-right: 10rem;
  }

  .xl\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xl\:\!pl-12{
    padding-left: 3rem !important;
  }

  .xl\:pr-72{
    padding-right: 18rem;
  }
}

@media print{
  .print\:bg-transparent{
    background-color: transparent;
  }
}