.accordion-summary {
  justify-content: flex-start;
  width: 100%;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  background-color: var(--neutral-light);
  border-radius: var(--spacing-16);
}
.accordion-nav__item {
  position: relative;
}

.accordion-summary-expanded {
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}

.accordion-summary > .row {
  height: 56px;
  padding: 0 var(--spacing-16);
}

.accordion-summary-container {
  align-items: center;
  justify-content: space-between;
}

.accordion-details {
  padding: 0;
  height: 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.accordion-details-expanded {
  padding: 0 var(--spacing-16) var(--spacing-16) var(--spacing-16);
  height: auto;
  opacity: 1;
  visibility: visible;
  background-color: var(--neutral-light);
}

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
  --half-gutter-width: calc((var(--gutter-width) * 0.5));
  --xs-min: 30;
  --sm-min: 48;
  --md-min: 64;
  --lg-min: 75;
  --screen-xs-min: var(--xs-min) em;
  --screen-sm-min: var(--sm-min) em;
  --screen-md-min: var(--md-min) em;
  --screen-lg-min: var(--lg-min) em;
  --container-sm: calc(var(--sm-min) + var(--gutter-width));
  --container-md: calc(var(--md-min) + var(--gutter-width));
  --container-lg: calc(var(--lg-min) + var(--gutter-width));
}

.row.spacing-8 {
  margin-right: calc(var(--spacing-8) * -1);
  margin-left: calc(var(--spacing-8) * -1);
  width: calc(100% + var(--spacing-8));
}
.row.spacing-12 {
  margin-right: calc(var(--spacing-12) * -1);
  margin-left: calc(var(--spacing-12) * -1);
  width: calc(100% + var(--spacing-12));
}
.row.spacing-16 {
  margin-right: calc(var(--spacing-16) * -1);
  margin-left: calc(var(--spacing-16) * -1);
  width: calc(100% + var(--spacing-16));
}
.row.spacing-24 {
  margin-right: calc(var(--spacing-24) * -1);
  margin-left: calc(var(--spacing-24) * -1);
  width: calc(100% + var(--spacing-24));
}
.row.spacing-32 {
  margin-right: calc(var(--spacing-32) * -1);
  margin-left: calc(var(--spacing-32) * -1);
  width: calc(100% + var(--spacing-32));
}

.row.spacing-8 > .col {
  padding-top: var(--spacing-8);
  padding-left: var(--spacing-8);
  padding-right: 0;
}
.row.spacing-12 > .col {
  padding-top: var(--spacing-12);
  padding-left: var(--spacing-12);
  padding-right: 0;
}
.row.spacing-16 > .col {
  padding-top: var(--spacing-16);
  padding-left: var(--spacing-16);
  padding-right: 0;
}
.row.spacing-24 > .col {
  padding-top: var(--spacing-24);
  padding-left: var(--spacing-24);
  padding-right: 0;
}
.row.spacing-32 > .col {
  padding-top: var(--spacing-32);
  padding-left: var(--spacing-32);
  padding-right: 0;
}

.container-fluid,
.container {
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  padding-right: var(--outer-margin, 2rem);
  padding-left: var(--outer-margin, 2rem);
}

.row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(100%);
}

.wrap-wrap {
  flex-wrap: wrap;
}

.wrap-nowrap {
  flex-wrap: nowrap;
}

.wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.direction-row-reverse {
  flex-direction: row-reverse;
}

.direction-col-reverse {
  flex-direction: column-reverse;
}

.direction-row {
  flex-direction: row;
}

.direction-col {
  flex-direction: column;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
  box-sizing: border-box;
  flex: 0 0 auto;
}

.col-xs {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

.col-xs-1 {
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

.col-xs-2 {
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

.col-xs-5 {
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

.col-xs-8 {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.col-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

.col-xs-11 {
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs-offset-0 {
  margin-left: 0;
}

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.start-xs {
  justify-content: flex-start;
  text-align: start;
}

.center-xs {
  justify-content: center;
  text-align: center;
}

.end-xs {
  justify-content: flex-end;
  text-align: end;
}

.top-xs {
  align-items: flex-start;
}

.middle-xs {
  align-items: center;
}

.bottom-xs {
  align-items: flex-end;
}

.around-xs {
  justify-content: space-around;
}

.between-xs {
  justify-content: space-between;
}

.first-xs {
  order: -1;
}

.last-xs {
  order: 1;
}

@media screen and (min-width: 768px) {
  .container {
    width: var(--container-sm, 46rem);
  }

  .col-sm,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-offset-0,
  .col-sm-offset-1,
  .col-sm-offset-2,
  .col-sm-offset-3,
  .col-sm-offset-4,
  .col-sm-offset-5,
  .col-sm-offset-6,
  .col-sm-offset-7,
  .col-sm-offset-8,
  .col-sm-offset-9,
  .col-sm-offset-10,
  .col-sm-offset-11,
  .col-sm-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: var(--half-gutter-width, 0.5rem);
    padding-left: var(--half-gutter-width, 0.5rem);
  }

  .col-sm {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-sm-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-sm-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-sm-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-sm-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-sm-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-sm-offset-0 {
    margin-left: 0;
  }

  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-sm-offset-3 {
    margin-left: 25%;
  }

  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-sm-offset-6 {
    margin-left: 50%;
  }

  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-sm-offset-9 {
    margin-left: 75%;
  }

  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-sm {
    justify-content: flex-start;
    text-align: start;
  }

  .center-sm {
    justify-content: center;
    text-align: center;
  }

  .end-sm {
    justify-content: flex-end;
    text-align: end;
  }

  .top-sm {
    align-items: flex-start;
  }

  .middle-sm {
    align-items: center;
  }

  .bottom-sm {
    align-items: flex-end;
  }

  .around-sm {
    justify-content: space-around;
  }

  .between-sm {
    justify-content: space-between;
  }

  .first-sm {
    order: -1;
  }

  .last-sm {
    order: 1;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    width: var(--container-md, 61rem);
  }

  .col-md,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-offset-0,
  .col-md-offset-1,
  .col-md-offset-2,
  .col-md-offset-3,
  .col-md-offset-4,
  .col-md-offset-5,
  .col-md-offset-6,
  .col-md-offset-7,
  .col-md-offset-8,
  .col-md-offset-9,
  .col-md-offset-10,
  .col-md-offset-11,
  .col-md-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: var(--half-gutter-width, 0.5rem);
    padding-left: var(--half-gutter-width, 0.5rem);
  }

  .col-md {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-md-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-md-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-md-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-md-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-md-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-md-offset-0 {
    margin-left: 0;
  }

  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-md-offset-3 {
    margin-left: 25%;
  }

  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-md-offset-6 {
    margin-left: 50%;
  }

  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-md-offset-9 {
    margin-left: 75%;
  }

  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-md {
    justify-content: flex-start;
    text-align: start;
  }

  .center-md {
    justify-content: center;
    text-align: center;
  }

  .end-md {
    justify-content: flex-end;
    text-align: end;
  }

  .top-md {
    align-items: flex-start;
  }

  .middle-md {
    align-items: center;
  }

  .bottom-md {
    align-items: flex-end;
  }

  .around-md {
    justify-content: space-around;
  }

  .between-md {
    justify-content: space-between;
  }

  .first-md {
    order: -1;
  }

  .last-md {
    order: 1;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    width: var(--container-lg, 71rem);
  }

  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-offset-0,
  .col-lg-offset-1,
  .col-lg-offset-2,
  .col-lg-offset-3,
  .col-lg-offset-4,
  .col-lg-offset-5,
  .col-lg-offset-6,
  .col-lg-offset-7,
  .col-lg-offset-8,
  .col-lg-offset-9,
  .col-lg-offset-10,
  .col-lg-offset-11,
  .col-lg-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: var(--half-gutter-width, 0.5rem);
    padding-left: var(--half-gutter-width, 0.5rem);
  }

  .col-lg {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-lg-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-lg-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-lg-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-lg-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-lg-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg-offset-0 {
    margin-left: 0;
  }

  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-lg {
    justify-content: flex-start;
    text-align: start;
  }

  .center-lg {
    justify-content: center;
    text-align: center;
  }

  .end-lg {
    justify-content: flex-end;
    text-align: end;
  }

  .top-lg {
    align-items: flex-start;
  }

  .middle-lg {
    align-items: center;
  }

  .bottom-lg {
    align-items: flex-end;
  }

  .around-lg {
    justify-content: space-around;
  }

  .between-lg {
    justify-content: space-between;
  }

  .first-lg {
    order: -1;
  }

  .last-lg {
    order: 1;
  }
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 14px;
  cursor: pointer;
}

.switch-label {
  margin-left: var(--spacing-44);
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-primary);
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--neutral-main);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 24px;
}

.switch .slider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 0px;
  bottom: 0px;
  background-color: var(--white);
  border: 1px solid var(--neutral-light);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.switch input:checked + .slider {
  background-color: var(--success-light);
}

.switch input:checked + .slider:before {  
  top: 50%;
  transform: translate(18px, -50%);
  background-color: var(--success-main);
  border: none;
}

.switch-is-disabled input:checked + .slider {
  background-color: var(--success-light);
}

.switch-is-disabled input + .slider {
  background-color: var(--neutral-main);
  opacity: var(--disabled-opacity);
  cursor: auto;
}

.switch-is-disabled .switch-label {
  cursor: auto;
  color: var(--text-disabled);
}

.icon-is-size-xsmall {
  font-size: small;
}

.icon-is-size-small {
  font-size: initial;
}

.icon-is-size-regular {
  font-size: large;
}

.icon-is-size-large {
  font-size: larger;
}

.icon-button {
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  gap: var(--spacing-4);
  align-items: center;
  font-size: 1.5rem;
  padding: var(--spacing-8);
  border-radius: 50%;
  background-color: transparent;
  min-width: 38px;
  min-height: 38px;
}

.icon-button:hover {
  background-color: var(--neutral-light);
}

.icon-button-is-disabled {
  background: none 0% 0% no-repeat padding-box;
  color: var(--neutral-400);
  opacity: var(--disabled-opacity);
  cursor: default;
}

.icon-button-is-disabled:hover {
  background: none 0% 0% no-repeat padding-box;
}

.icon-button-is-loading:hover {
  background: none 0% 0% no-repeat padding-box;
}

.alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: var(--spacing-16);
  width: 392px;
  padding: var(--spacing-20);
  border-radius: var(--spacing-16);
}

.alert img {
  margin-right: var(--spacing-8);
}

.alert-is-error {
  background-color: var(--error-light);
  color: var(--error-dark);
}

.alert-is-warning {
  background-color: var(--warning-light);
  color: var(--warning-dark);
}

.alert-is-info {
  background-color: var(--info-light);
  color: var(--info-dark);
}

.alert-is-success {
  background-color: var(--success-light);
  color: var(--success-dark);
}

.alert-is-full-width{
  width: 100%;
}

.alert .icon-button {
  min-width: unset;
  min-height: unset;
  padding: 0;
  position: relative;
  z-index: 0;
}

.alert .icon-button::after {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--neutral-light);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
}

.alert-is-error .icon-button {
  color: var(--error-dark);
}

.alert-is-warning .icon-button {
  color: var(--warning-dark);
}

.alert-is-success .icon-button {
  color: var(--success-dark);
}

.alert-is-info .icon-button {
  color: var(--info-dark);
}
.app-bar {
  width: 100%;
}

.app-bar-is-position-absolute {
  position: absolute;
}

.app-bar-is-position-fixed {
  position: fixed;
}

.app-bar-is-position-relative {
  position: relative;
}

.app-bar-is-position-static {
  position: static;
}

.app-bar-is-position-sticky {
  position: sticky;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: var(--page-title);
}

.section-title-border {
  display: inline-block;
  width: 5px;
  height: 24px;
  background-color: var(--primary-main);
  border-radius: var(--spacing-2);
  margin-right: var(--spacing-12);
}

.section-title-adornment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--primary-light);
  border-radius: var(--spacing-6);
  margin-right: var(--spacing-12);
  color: var(--primary-main);
}

.section-title-is-primary > .section-title-border {
  background-color: var(--primary-main);
}

.section-title-is-success > .section-title-border {
  background-color: var(--success-main);
}

.section-title-is-success > .section-title-adornment {
  background-color: var(--success-light);
  color: var(--success-main);
}

.section-title-is-warning > .section-title-border {
  background-color: var(--warning-main);
}

.section-title-is-warning > .section-title-adornment {
  background-color: var(--warning-light);
  color: var(--warning-main);
}

.section-title-is-error > .section-title-border {
  background-color: var(--error-main);
}

.section-title-is-error > .section-title-adornment {
  background-color: var(--error-light);
  color: var(--error-main);
}

.button {
  outline: none;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  line-height: 1.25rem;
}

.button-is-size-tiny {
  padding: var(--spacing-6) var(--spacing-12);
  height: 32px;
  font-weight: 500;
}

.button-is-size-small {
  padding: var(--spacing-8) var(--spacing-16);
  height: 40px;
  font-weight: 600;
}

.button-is-size-regular {
  padding: var(--spacing-12) var(--spacing-28);
  height: 48px;
  font-weight: 700;
}

.button-is-color-primary {
  border: none;
  color: var(--white);
  background-color: var(--primary-main);
}

.button-is-color-primary:hover {
  border: none;
  color: var(--white);
  background-color: var(--primary-dark);
}

.button-is-color-secondary {
  border: none;
  color: var(--white);
  background-color: var(--secondary-main);
}

.button-is-color-secondary:hover {
  color: var(--white);
  background-color: var(--secondary-dark);
}

.button-is-color-error {
  border: none;
  color: var(--white);
  background-color: var(--error-main);
}

.button-is-color-error:hover {
  color: var(--error-dark);
  background-color: var(--error-secondary);
}

.button-is-color-warning {
  border: none;
  color: var(--white);
  background-color: var(--warning-main);
}

.button-is-color-warning:hover {
  color: var(--white);
  background-color: var(--warning-dark);
}

.button-is-color-info {
  border: none;
  color: var(--white);
  background-color: var(--info-main);
}

.button-is-color-info:hover {
  color: var(--white);
  background-color: var(--info-dark);
}

.button-is-color-success {
  border: none;
  color: var(--white);
  background-color: var(--success-main);
}

.button-is-color-success:hover {
  color: var(--white);
  background-color: var(--success-dark);
}

.button-is-color-ghost {
  border: none;
  background-color: transparent;
  color: var(--secondary-main);
}

.button-is-color-ghost:hover {
  text-decoration: underline;
}

.button-is-variant-primary-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--primary-main);
  border: 1px solid var(--primary-main);
}

.button-is-variant-primary-outlined:hover {
  background-color: var(--primary-light);
  border: 1px solid var(--primary-main);
  color: var(--primary-main);
}

.button-is-variant-secondary-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--secondary-main);
  border: 1px solid var(--secondary-main);
}

.button-is-variant-secondary-outlined:hover {
  background-color: var(--secondary-dark);
}

.button-is-variant-error-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--error-main);
  border: 1px solid var(--error-main);
}

.button-is-variant-error-outlined:hover {
  background-color: var(--error-secondary);
}

.button-is-variant-warning-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--warning-main);
  border: 1px solid var(--warning-main);
}

.button-is-variant-warning-outlined:hover {
  background-color: var(--warning-dark);
}

.button-is-variant-info-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--info-main);
  border: 1px solid var(--info-main);
}

.button-is-variant-info-outlined:hover {
  background-color: var(--info-dark);
}

.button-is-variant-success-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--success-main);
  border: 1px solid var(--success-main);
}

.button-is-variant-success-outlined:hover {
  background-color: var(--success-dark);
}

.button-is-variant-primary-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: unset;
  padding-left: var(--spacing-2);
  color: var(--primary-main);
  text-decoration: underline;
}

.button-is-variant-primary-text:hover {
  background-color: unset;
  color: var(--primary-dark);
  text-decoration: none;
}

.button-is-variant-secondary-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--secondary-main);
  text-decoration: underline;
}

.button-is-variant-secondary-text:hover {
  background-color: unset;
  color: var(--secondary-dark);
  text-decoration: none;
}

.button-is-variant-error-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--error-main);
  text-decoration: underline;
}

.button-is-variant-error-text:hover {
  background-color: unset;
  color: var(--error-dark);
  text-decoration: none;
}

.button-is-variant-warning-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--warning-main);
  text-decoration: underline;
}

.button-is-variant-warning-text:hover {
  background-color: unset;
  color: var(--warning-dark);
  text-decoration: none;
}

.button-is-variant-info-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--info-main);
  text-decoration: underline;
}

.button-is-variant-info-text:hover {
  background-color: unset;
  color: var(--info-dark);
  text-decoration: none;
}

.button-is-variant-success-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--success-main);
  text-decoration: underline;
}

.button-is-variant-success-text:hover {
  background-color: unset;
  color: var(--success-dark);
  text-decoration: none;
}

.button-is-variant-ghost-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--ghost-main);
  text-decoration: underline;
}

.button-is-full-width {
  width: 100%;
}

.button-is-disabled {
  background: var(--text-disabled);
  cursor: default;
}

.button-is-disabled:hover {
  background: var(--text-disabled);
}

.button-is-loading {
  pointer-events: none !important;
  cursor: default;
}

.typography-is-variant-h1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.167;
}

.typography-is-variant-h2 {
  font-size: 3.75rem;
  font-weight: 300;
  line-height: 1.2;
}

.typography-is-variant-h3 {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.167;
}

.typography-is-variant-h4 {
  font-size: 2.125rem;
  font-weight: 400;
  line-height: 1.235;
}

.typography-is-variant-h5 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.334;
  letter-spacing: 0;
}

.typography-is-variant-h6 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
}

.typography-is-variant-subtitle1 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
}

.typography-is-variant-subtitle2 {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.57;
}

.typography-is-variant-body1 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.typography-is-variant-body2 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
}

.typography-is-variant-button {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
}

.typography-is-variant-caption {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.66;
}

.typography-is-variant-overline {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 2.66;
  text-transform: uppercase;
}

.typography-is-variant-tiny {
  font-weight: 400;
  font-size: 0.625rem;
}

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

.attribute-card {
  padding: var(--spacing-20);
  border: 1px solid #dedede;
  border-radius: var(--spacing-16);
  width: 445px;
  max-height: 220px;
  min-height: 220px;
}

.attribute-card-content {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-8);
  border: 2px dashed #dedede;
  padding: var(--spacing-28);
  border-radius: var(--spacing-16);
  max-height: 120px;
  min-height: 120px;
}

.attribute-card-content-warning {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: var(--spacing-8);
  padding: var(--spacing-16);
  border-radius: var(--spacing-16);
  background-color: var(--warning-light);
  max-height: 120px;
  min-height: 120px;
}

.attribute-card-edit-button {
  position: absolute;
  right: var(--spacing-12);
  top: var(--spacing-4);
  color: var(--secondary-main);
}

.list-box {
  padding: 0;
  margin: 0;
  max-height: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: white;
}

.list-box-item {
  border: none;
  cursor: pointer;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 0.875rem;
  line-height: 1.0625rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  white-space: nowrap;

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

.list-box-item-is-disabled {
  cursor: default;
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.list-box-item:hover {
  background-color: var(--neutral-light);
}

.list-box-item-is-selected {
  background-color: var(--neutral-light);
}

.list-box-item-icon {
  width: 24px;
  display: inline-block;
}

.portal-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: all;
}

.autocomplete-overlay {
  position: fixed;
  inset: 0;
}

.autocomplete-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: var(--spacing-8) 0 0 0;
}

.autocomplete-item {
  width: auto;
  height: var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeeee;
  margin: 0 var(--spacing-8) var(--spacing-8) 0;
  border-radius: var(--spacing-56);
}

.autocomplete-title {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 400;
  font-size: var(--spacing-14);
  padding: var(--spacing-8);
  color: #2c323c;
  cursor: default;
}

.autocomplete-close-icon {
  margin-right: var(--spacing-8);
  cursor: pointer;
}

.autocomplete {
  position: relative;
  width: fit-content;
  border-radius: var(--spacing-8);
}

.autocomplete-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.autocomplete-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.autocomplete input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.autocomplete-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.autocomplete-fieldset-hide {
  top: 0;
}

.autocomplete-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.autocomplete-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.autocomplete-is-focus,
.autocomplete-is-hasValue {
  outline: 0;
}

.autocomplete input:-webkit-autofill {
  -webkit-background-clip: text;
}

.autocomplete-is-full-width {
  width: 100%;
}

.autocomplete-is-focus > .autocomplete-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.autocomplete-is-hasValue > .autocomplete-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.autocomplete input::placeholder {
  color: var(--text-placeholder);
}

.autocomplete-is-disabled input {
  color: var(--text-disabled);
}

.autocomplete-is-disabled > label {
  color: var(--text-disabled);
}

.autocomplete-is-disabled .autocomplete-fieldset-container {
  background-color: var(--neutral-light);
  pointer-events: none;
}

.autocomplete-is-error input {
  caret-color: var(--error-main);
}

.autocomplete-is-error.autocomplete-is-focus .autocomplete-label {
  color: var(--error-main);
}

.autocomplete-is-error.autocomplete-is-hasValue > .autocomplete-label {
  color: var(--error-main);
}

.autocomplete-is-focus .autocomplete-fieldset {
  border-color: var(--primary-main);
}

.autocomplete-is-error .autocomplete-fieldset {
  border: 1px solid var(--error-main);
}

.autocomplete-is-focus .autocomplete-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.autocomplete-is-hasValue .autocomplete-fieldset-legend {
  max-width: 100%;
}

.autocomplete-select-list-box {
  max-height: 300px;
  overflow-y: auto;
}

.autocomplete-load-more {
  height: var(--spacing-8);
}

.autocomplete-option-block {
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-4);
  overflow: hidden;
  box-shadow: 0px 10px 20px 0px rgba(102, 148, 255, 0.3) !important;
}

.autocomplete-option-block .list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.autocomplete-option-block .multi-select-list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.autocomplete__arrow {
  display: 'block';
  transform: rotate(0deg);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.autocomplete__arrow-is-active {
  transform: rotate(180deg);
}

.autocomplete-clear {
  color: var(--text-disabled);
  cursor: pointer;
}

.checkbox {
  display: inline-flex;
  align-items: center;
}

.checkbox input {
  display: none;
}

.checkbox > label {
  cursor: pointer;
  font-size: 14px;
  line-height: 14px;
  font-family: var(--fontFamily);
  width: 100%;
  display: flex;
  align-items: center;
}

.checkbox input + label:before {
  content: '';
  border: 1px solid transparent;
  border-radius: var(--spacing-4);
  border-color: var(--neutral-main);
  display: inline-block;
  width: var(--spacing-22);
  height: var(--spacing-22);
  vertical-align: bottom;
  color: var(--neutral-main);
  margin-right: 8px;
  position: relative;
  flex-shrink: 0;
}

.checkbox input:indeterminate + label:before {
  background-image: url("data:image/svg+xml,%3Csvg width=%2724px%27 height=%2724px%27 viewBox=%270 0 24 24%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id=%27web-app%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg id=%27check%27 fill=%27%23FFFFFF%27%3E%3Cpath id=%27Shape%27 d=%27M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm3 8v2h10v-2H7z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--spacing-22);
  background-color: var(--success-main);
  background-repeat: no-repeat;
  background-position: center center;
}

.checkbox input:checked + label:before {
  background-image: url("data:image/svg+xml,%3Csvg width=%271024px%27 height=%271024px%27 viewBox=%270 0 1024 1024%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id=%27web-app%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg id=%27check%27 fill=%27%23FFFFFF%27%3E%3Cpath id=%27Shape%27 points=%276 10 4 12 10 18 20 8 18 6 10 14%27 d=%27M256 426.664L170.664 512L426.664 768L853.336 341.336L768 256L426.664 597.336Z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--spacing-22);
  background-color: var(--success-main);
  background-repeat: no-repeat;
  background-position: center center;
  border-color: var(--success-main);
  flex-shrink: 0;
}

.checkbox-is-multi-tab input:checked + label:before {
  background-image: url("data:image/svg+xml,%3Csvg width=%271024px%27 height=%271024px%27 viewBox=%270 0 1024 1024%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id=%27web-app%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg id=%27check%27 fill=%27%23FFFFFF%27%3E%3Cpath id=%27Shape%27 points=%276 10 4 12 10 18 20 8 18 6 10 14%27 d=%27M256 426.664L170.664 512L426.664 768L853.336 341.336L768 256L426.664 597.336Z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--spacing-22);
  background-color: var(--primary-main);
  background-repeat: no-repeat;
  background-position: center center;
  border-color: var(--primary-main);
}

.checkbox-is-disabled {
  opacity: var(--disabled-opacity);
}

.checkbox-is-disabled > label {
  cursor: default;
}

.checkbox-is-full-width {
  width: 100%;
}

.multi-select-list-box {
  padding: 0;
  margin: 0;
  max-height: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--white);
}

.multi-select-list-box-item {
  border: none;
  cursor: pointer;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 0.875rem;
  line-height: 1.0625rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.multi-select-list-box-item-is-selected {
  background-color: var(--neutral-light);
}

.multi-select-list-box-item:hover {
  background-color: var(--neutral-light);
}

.multi-select-list-box-item-is-disabled {
  cursor: default;
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.autocomplete-multiple-overlay {
  position: fixed;
  inset: 0;
}

.autocomplete-multiple-item {
  width: auto;
  height: var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeeee;
  margin: 0 var(--spacing-8) var(--spacing-8) 0;
  border-radius: var(--spacing-56);
}

.autocomplete-multiple-title {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 400;
  font-size: var(--spacing-14);
  padding: var(--spacing-8);
  color: #2c323c;
  cursor: default;
}

.autocomplete-multiple-close-icon {
  margin-right: var(--spacing-8);
  cursor: pointer;
}

.autocomplete-multiple {
  position: relative;
  width: fit-content;
  border-radius: var(--spacing-8);
}

.autocomplete-multiple-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(14px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.autocomplete-multiple-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.autocomplete-multiple input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.autocomplete-multiple-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.autocomplete-multiple-fieldset-hide {
  top: 0;
}

.autocomplete-multiple-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.autocomplete-multiple-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.autocomplete-multiple-is-focus,
.autocomplete-multiple-is-hasValue {
  outline: 0;
}

.autocomplete-multiple input:-webkit-autofill {
  -webkit-background-clip: text;
}

.autocomplete-multiple-is-full-width {
  width: 100%;
}

.autocomplete-multiple-is-focus > .autocomplete-multiple-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
  top: 0;
}

.autocomplete-multiple-is-hasValue > .autocomplete-multiple-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
  top: 0;
}

.autocomplete-multiple input::placeholder {
  color: var(--text-placeholder);
}

.autocomplete-multiple-is-disabled input {
  color: var(--text-disabled);
}

.autocomplete-multiple-is-disabled > label {
  color: var(--text-disabled);
}

.autocomplete-multiple-is-disabled .autocomplete-multiple-fieldset-container {
  background-color: var(--neutral-light);
  pointer-events: none;
}

.autocomplete-multiple-is-error input {
  caret-color: var(--error-main);
}

.autocomplete-multiple-is-error.autocomplete-multiple-is-focus
  .autocomplete-multiple-label {
  color: var(--error-main);
}

.autocomplete-multiple-is-error.autocomplete-multiple-is-hasValue
  > .autocomplete-multiple-label {
  color: var(--error-main);
}

.autocomplete-multiple-is-focus .autocomplete-multiple-fieldset {
  border-color: var(--primary-main);
}

.autocomplete-multiple-is-error .autocomplete-multiple-fieldset {
  border: 1px solid var(--error-main);
}

.autocomplete-multiple-is-focus .autocomplete-multiple-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.autocomplete-multiple-is-hasValue .autocomplete-multiple-fieldset-legend {
  max-width: 100%;
}

.autocomplete-multiple-select-list-box {
  max-height: 300px;
  overflow-y: auto;
}

.autocomplete-multiple-load-more {
  height: var(--spacing-8);
}

.autocomplete-multiple-option-block {
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-4);
  overflow: hidden;
  box-shadow: 0px 10px 20px 0px rgba(102, 148, 255, 0.3) !important;
}

.autocomplete-multiple-option-block .list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.autocomplete-multiple-option-block .multi-select-list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.autocomplete-multiple__arrow {
  display: 'block';
  transform: rotate(0deg);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.autocomplete-multiple__arrow-is-active {
  transform: rotate(180deg);
}

.autocomplete-divider {
  height: 1px;
  width: calc(100% - 24px);
  background-color: var(--neutral-main);
  margin: var(--spacing-4);
  margin-left: var(--spacing-12);
}

.autocomplete-multiple-container {
  display: none;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.autocomplete-multiple-container-active {
  display: flex;
  margin-top: var(--spacing-8);
}

.autocomplete-multiple-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-self: stretch;
  justify-content: center;
}

.autocomplete-multiple-wrapper-active {
  justify-content: flex-start;
}

.avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
}

.badge {
  display: inline-block;
  position: relative;
  width: fit-content;
}

.badge-content {
  position: absolute;
  border-radius: var(--spacing-8);
  font-family: var(--fontFamily);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 0.875rem;
  width: 16px;
  height: 16px;
  text-align: center;
  padding: 1px 0px;
}

.badge-origin-is-vertical-top .badge-content {
  top: -7px;
}

.badge-origin-is-vertical-bottom .badge-content {
  bottom: -7px;
}
.badge-origin-is-horizontal-left .badge-content {
  right: 50%;
}

.badge-origin-is-horizontal-right .badge-content {
  left: 50%;
}

.badge-is-variant-success .badge-content {
  color: var(--white);
  background-color: var(--success-main);
}

.badge-is-variant-error .badge-content {
  color: var(--white);
  background-color: var(--error-main);
}

.badge-is-variant-secondary .badge-content {
  color: var(--white);
  background-color: var(--secondary-main);
}

.badge-is-variant-warning .badge-content {
  color: var(--white);
  background-color: var(--warning-main);
}

.breadcrumb-items {
  display: flex;
  align-items: center;
  column-gap: var(--spacing-6);
  padding: var(--spacing-2);
  white-space: nowrap;
  overflow-x: auto;
}

.breadcrumb-items a {
  color: var(--text-primary);
  cursor: pointer;
}

.breadcrumb-seperator > svg {
  color: var(--text-primary);
}

.breadcrumb-items a:last-child {
  pointer-events: none;
  cursor: default;
  color: var(--page-title);
}

.button-group .button:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.button-group .button:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.button-group .button {
  border-radius: 0px;
}

.card-info-is-default {
  background-color: unset;
  border: 1px solid var(--neutral-light) !important;
}

.card-info-is-info {
  background-color: var(--info-light);
}

.card-info-is-success {
  background-color: var(--success-light);
}

.card-info-is-error {
  background-color: var(--error-light);
}

.card-info-is-warning {
  background-color: var(--warning-light);
}

.chip {
  box-sizing: border-box;
  display: inline-block;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-8);
  color: var(--black);
  border-radius: var(--spacing-44);
}

.chip-icon {
  display: inline-block;
  font-size: 0.75rem;
  cursor: pointer;
}

.chip-is-filter {
  display: inline-flex;
  align-items: center;
  column-gap: var(--spacing-12);
  border: solid 1px var(--neutral-main);
  background-color: var(--neutral-main);
}

.chip-is-full-width {
  width: 100%;
}

.clipboard {
  cursor: pointer;
  display: inline-block;
}

.clipboard-popover {
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--spacing-4);
  background-color: var(--text-primary);
  color: var(--white);
  font-size: 12px;
  margin-top: var(--spacing-2);
}

.code-input-content {
  height: 56px;
  width: 56px;
  border-radius: var(--spacing-8);
  border: 1px solid var(--neutral-main); 
  text-align: center;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.code-input-content:focus {
  border: 1px solid var(--primary-main);
}

.code-input-is-error .code-input-content {
  border-color: var(--error-main)
}

.comparison-tabs {
  border-radius: 16px;
  background-color: var(--background-main);
  box-shadow: var(--box-shadow-md);
}
.comparison-tabs__separator {
  width: 1px;
  background-color: var(--neutral-main);
  margin-block: 16px;
}
.comparison-tabs__difference {
  padding: 16px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.comparison-tabs__fields {
  height: 100%;
}
.comparison-tabs__field-content {
  height: 100%;
  padding: 16px;
  align-content: center;
}
.comparison-tabs__field-label {
  text-align: center;
}
.comparison-tabs__field-value {
  text-align: center;
  word-break: break-all;
}

.modal-overlay {
  position: fixed;
  z-index: var(--zindex-backdrop);
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  pointer-events: none;
  background-color: transparent;
  right: 0;
  animation-duration: 400ms;
  animation-fill-mode: both;
}

.modal-overlay-is-open {
  pointer-events: all;
  animation-name: overlay-animation-open;
}

.modal-overlay-is-close {
  pointer-events: none;
  animation-name: overlay-animation-off;
}

@keyframes overlay-animation-open {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--backdrop-main);
  }
}

@keyframes overlay-animation-off {
  from {
    background-color: var(--backdrop-main);
  }
  to {
    background-color: transparent;
  }
}

@media screen and (min-width: 1024px) {
  .modal {
    width: 900px;
  }
}

@media screen and (max-width: 1024px) {
  .modal {
    width: 700px;
  }
}

@media screen and (max-width: 768px) {
  .modal {
    width: 90%;
  }
}

.contract-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-48) !important;
  border-bottom: 1px solid var(--neutral-light);
}
.contract-content {
  max-height: 65vh;
  overflow-y: auto;
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-24)
    var(--spacing-24);
}

.contract-content.no-scroll {
  max-height: none;
  overflow-y: visible;
}

.contract-approval {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.contract-approval.open {
  max-height: 200px;
  opacity: 1;
}

.contract-footer {
  min-width: 135px;
}

.contract-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.contract-actions.open {
  opacity: 1;
  max-height: 100px;
}

.btn-continue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.countdown {
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  column-gap: var(--spacing-8);
}

.mask-input {
  border-radius: var(--spacing-8);
  position: relative;
  width: fit-content;
}

.mask-input-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.mask-input-label-startAdornment {
  left: var(--spacing-24);
}

.mask-input-label-endAdornment {
  width: calc(100% - var(--spacing-56));
}

.mask-input-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.mask-input input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.mask-input-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.mask-input-fieldset-hide {
  top: 0;
}

.mask-input-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.mask-input-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.mask-input-is-focus, .mask-input-is-hasValue {
  outline: 0;
}

.mask-input input:-webkit-autofill {
  -webkit-background-clip: text;
}

.mask-input-is-full-width {
  width: 100%;
}

.mask-input-is-focus > .mask-input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.mask-input-is-hasValue > .mask-input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.mask-input input::placeholder {
  color: var(--text-placeholder);
}

.mask-input-is-disabled input {
  color: var(--text-disabled);
}

.mask-input-is-disabled > label {
  color: var(--text-disabled);
}

.mask-input-is-disabled .mask-input-fieldset-container {
  background-color: var(--neutral-light);
}

.mask-input-is-error input {
  caret-color: var(--error-main);
}

.mask-input-is-error.mask-input-is-focus .mask-input-label {
  color: var(--error-main);
}

.mask-input-is-error.mask-input-is-hasValue > .mask-input-label {
  color: var(--error-main);
}

.mask-input-is-focus .mask-input-fieldset {
  border-color: var(--primary-main);
}

.mask-input-is-error .mask-input-fieldset {
  border: 1px solid var(--error-main);
}

.mask-input-is-focus .mask-input-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.mask-input-is-hasValue .mask-input-fieldset-legend {
  max-width: 100%;
}

.select {
  position: relative;
  width: 100%;
  background-color: var(--white);
  cursor: pointer;
  height: 48px;
  border-radius: var(--spacing-8);
}

.select-overlay {
  position: fixed;
  inset: 0;
}

.select-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  transform: translate(14px, 17px) scale(1);
  position: absolute;
  left: 0;
  top: -1px;
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.select-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -6px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.select-fieldset-hide {
  top: 0;
}

.select-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.select-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.select-option-block {
  overflow: hidden;
  height: 100%;
  box-shadow: 0px 10px 20px 0px rgba(102, 148, 255, 0.3) !important;
}

.select-option-block .list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.select-is-focus,
.select-is-hasValue {
  outline: 0;
}

.select-is-full-width {
  width: 100%;
}

.select-is-focus > .select-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.select-is-hasValue > .select-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.select-container {
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
  height: 100%;
}

.select-placeholder {
  flex-grow: 1;
  text-align: initial;
  color: var(--text-disabled);
}

.select-selected-text {
  flex-grow: 1;
  text-align: initial;
  overflow: hidden;
}

.select-selected-text > * {
  white-space: nowrap;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-is-disabled {
  pointer-events: none;
  color: var(--text-disabled);
}

.select-is-disabled .select-label {
  color: var(--text-disabled);
}

.select-is-disabled .select-container {
  background-color: var(--neutral-light);
}

.select-is-error.select-is-focus .select-label {
  color: var(--error-main);
}

.select-is-error.select-is-hasValue > .select-label {
  color: var(--error-main);
}

.select-is-focus .select-fieldset {
  border-color: var(--primary-main);
}

.select-is-error .select-fieldset {
  border: 1px solid var(--error-main);
}

.select-is-focus .select-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.select-is-hasValue .select-fieldset-legend {
  max-width: 100%;
}

.select-clear {
  color: var(--text-disabled);
  cursor: pointer;
}

.select__arrow {
  display: 'block';
  transform: rotate(0deg);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.select__arrow-is-active {
  transform: rotate(180deg);
}

* {
  box-sizing: border-box !important;
}

.input {
  border-radius: var(--spacing-8);
  position: relative;
  width: fit-content;
}

.input-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.input-label-startAdornment {
  left: var(--spacing-24);
}

.input-label-endAdornment {
  width: calc(100% - var(--spacing-56));
}

.input-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.input-content {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.input-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.input-fieldset-hide {
  top: 0;
}

.input-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.input-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.input-is-focus,
.input-is-hasValue {
  outline: 0;
}

.input input:-webkit-autofill {
  -webkit-background-clip: text;
}

.input-is-full-width {
  width: 100%;
}

.input-is-focus > .input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.input-is-hasValue > .input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.input input::placeholder {
  color: var(--text-placeholder);
}

.input-is-disabled input {
  color: var(--text-disabled);
}

.input-is-disabled .input-fieldset-container {
  background-color: var(--neutral-light);
}

.input-is-disabled > label {
  color: var(--text-disabled);
}

.input-is-error input {
  caret-color: var(--error-main);
}

.input-is-error.input-is-focus .input-label {
  color: var(--error-main);
}

.input-is-error.input-is-hasValue > .input-label {
  color: var(--error-main);
}

.input-is-focus .input-fieldset {
  border-color: var(--primary-main);
}

.input-is-error .input-fieldset {
  border: 1px solid var(--error-main);
}

.input-is-focus .input-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.input-is-hasValue .input-fieldset-legend {
  max-width: 100%;
}

.input-is-focus,
.input-is-hasValue {
  & > .input-label-startAdornment {
    left: 0px;
  }
}

.date-picker {
  background-color: var(--background-main);
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-8);
  padding: var(--spacing-16);
}

.date-picker-day-of-week,
.dates {
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
}

.date-picker-day-of-week {
  margin-top: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  padding-bottom: var(--spacing-18);
  border-bottom: 1px solid black;
}

.date-picker-day-of-week > * {
  text-align: center;
}

.dates button {
  position: relative;
  font-weight: var(--weight-semi-bold);
  border: 0;
  padding: 0;
  width: 35px;
  height: 35px;
  border-radius: 35px;
  border: 1px solid transparent;
  background-color: var(--white);
  color: var(--text-primary);
  cursor: pointer;
}

.dates button:not(.date-picker__day-is-disabled):hover {
  background-color: var(--primary-light);
  transition: all 0.2s ease-in-out;
}

.dates button.date-picker__day-is-today {
  border-color: var(--primary-main);
}

.dates button.date-picker__day-is-select-day {
  background-color: var(--primary-main);
  border-color: none;
  color: var(--white);
}

.dates button.date-picker__day-is-select-day:hover {
  background-color: var(--primary-main);
  border-color: var(--primary-main);
  color: var(--white);
}

.dates button.date-picker__day-is-other-day {
  color: var(--neutral-dark);
}

.dates button.date-picker__day-is-disabled {
  background: var(--neutral-light);
  color: var(--neutral-main);
  box-shadow: none;
  cursor: not-allowed;
}

.date-picker-block {
  min-width: 301px;
  overflow: hidden;
  border-radius: var(--spacing-8);
}

.date-picker-input.input-is-disabled input {
  cursor: not-allowed;
}

.date-picker-option-block {
  border-radius: var(--spacing-8);
}

.date-picker-option-block .list-box {
  max-height: none;
}

.date-picker-block .select {
  border-radius: 0;
}

.date-picker-block .select-fieldset {
  border: none;
}

.date-picker-block .select-container {
  padding: var(--spacing-12);
}

.date-picker-actions {
  padding-top: var(--spacing-8);
}

.date-picker-clear {
  color: var(--text-disabled);
  cursor: pointer;
}

.time-input {
  margin-top: 16px;
}

.time-input__hour,
.time-input__minute {
  width: 40px;

  .input-fieldset-container {
    padding: unset;
    padding-inline: 10px;
  }
}

.time-input__seperator {
  display: flex;
  align-items: center;
}

.date-picker__actions {
  display: flex;
  align-items: flex-end;
}

.dialog-overlay {
  position: fixed;
  z-index: var(--zindex-backdrop);
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  pointer-events: none;
  background-color: transparent;
  right: 0;
  animation-duration: 400ms;
  animation-fill-mode: both;
}

.dialog-overlay-is-open {
  pointer-events: all;
  animation-name: overlay-animation-open;
}

.dialog-overlay-is-close {
  pointer-events: none;
  animation-name: overlay-animation-off;
}

@keyframes overlay-animation-open {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--backdrop-main);
  }
}

@keyframes overlay-animation-off {
  from {
    background-color: var(--backdrop-main);
  }
  to {
    background-color: transparent;
  }
}

@media screen and (min-width: 1024px) {
  .dialog {
    width: 470px;
  }
}

@media screen and (max-width: 1024px) {
  .dialog {
    width: 344px;
  }
}

@media screen and (max-width: 768px) {
  .dialog {
    width: 90%;
  }
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--zindex-backdrop);
  display: grid;
  justify-items: center;
  align-items: center;
  pointer-events: none;
  background-color: transparent;
  right: 0;
  animation-duration: 400ms;
  animation-fill-mode: both;
}

.drawer-overlay-is-open {
  pointer-events: all;
  animation-name: overlay-animation-open;
}

.drawer-overlay-is-close {
  pointer-events: none;
  animation-name: overlay-animation-off;
}

@keyframes overlay-animation-open {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--backdrop-main);
  }
}

@keyframes overlay-animation-off {
  from {
    background-color: var(--backdrop-main);
  }
  to {
    background-color: transparent;
  }
}

.dropdown-container .box {
  border-radius: var(--spacing-8);
  padding: 0;
  overflow: hidden;
}

.dropdown-container-overlay {
  position: fixed;
  inset: 0;
  background-color: transparent;
}

.dropdown-container-button {
  cursor: pointer;
  background-color: var(--white);
  border: solid 1px #ebebeb;
  border-radius: var(--spacing-32);
  height: var(--spacing-32);
  padding: 0 var(--spacing-16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-container-button.selected {
  border: solid 1px var(--primary-main);
}

.dropdown-container-icon {
  transition: all 0.3s ease;
}

.dropdown-container-icon.open {
  rotate: 180deg;
}

.file-input-drop-area {
  border: 2px dashed var(--neutral-main);
  padding: var(--spacing-32) var(--spacing-32) var(--spacing-12) var(--spacing-32);
  border-radius: var(--spacing-16);
  display: inline-block;
  max-width: 382px;
}

.file-input-drop-area-is-active {
  border-color: var(--primary-main);
}

.file-input-drop-area-is-error {
  border-color: var(--error-main);
}

.file-input-detail-text {
  text-align: center;
}
.file-input-v2-drop-area {
  border: 2px dashed var(--neutral-main);
  padding: var(--spacing-32) var(--spacing-32) var(--spacing-12)
    var(--spacing-32);
  border-radius: var(--spacing-16);
  display: inline-block;
  max-width: 382px;
  margin-bottom: var(--spacing-32);
}

.file-input-v2-drop-area-is-active {
  border-color: var(--primary-main);
}

.file-input-v2-drop-area-is-error {
  border-color: var(--error-main);
}

.file-input-v2-detail-text {
  text-align: center;
}

.file-item-box {
  min-width: 436px;
  padding: var(--spacing-12);
  border: 1px solid var(--primary-main);
  border-radius: var(--spacing-8);
}

.file-item-box__delete-button {
  cursor: pointer;
  background-color: var(--neutral-light);
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.file-upload-progress-bar-container {
  width: '100%';
  background-color: var(--neutral-light);
  border-radius: var(--spacing-18);
  overflow: 'hidden';
}

.file-upload-progress-bar {
  height: var(--spacing-4);
  background-color: var(--success-main);
  border-radius: var(--spacing-18);
}

.image-crop {
  width: 536px;
}

.image-crop__wrapper {
  position: relative;
}

.image-crop__control-bar {
  position: absolute;
  bottom: 6px;
  justify-content: flex-end;
  gap: var(--spacing-8);
}

.image-crop__control-button:hover {
  background-color: unset;
}

.image-crop__control-bar .icon {
  color: white;
}

.info-box {
  display: flex;
  align-items: flex-start;
  width: 100%;
  background-color: var(--neutral-light);
  padding: var(--spacing-12);
  border-radius: var(--spacing-20);
}

.info-box__title {
  display: flex;
  align-items: center;
}

.info-box__content {
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-16);
  margin-top: var(--spacing-4);
}
.info-box__icon {
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--spacing-48);
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-tag-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: var(--spacing-8) 0 0 0;
}

.input-tag-item {
  width: auto;
  height: var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeeee;
  margin: 0 var(--spacing-8) var(--spacing-8) 0;
  border-radius: var(--spacing-56);
}

.input-tag-title {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 400;
  font-size: var(--spacing-14);
  padding: var(--spacing-8);
  color: #2c323c;
  cursor: default;
}

.input-tag-close-icon {
  margin-right: var(--spacing-8);
  cursor: pointer;
}

.input-tag {
  position: relative;
  width: fit-content;
  border-radius: var(--spacing-8);
}

.input-tag-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.input-tag-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.input-tag input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.input-tag-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.input-tag-fieldset-hide {
  top: 0;
}

.input-tag-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.input-tag-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.input-tag-is-focus,
.input-tag-is-hasValue {
  outline: 0;
}

.input-tag input:-webkit-autofill {
  -webkit-background-clip: text;
}

.input-tag-is-full-width {
  width: 100%;
}

.input-tag-is-focus > .input-tag-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.input-tag-is-hasValue > .input-tag-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.input-tag input::placeholder {
  color: var(--text-placeholder);
}

.input-tag-is-disabled input {
  color: var(--text-disabled);
  pointer-events: none;
}

.input-tag-is-disabled > label {
  color: var(--text-disabled);
}

.input-tag-is-disabled .input-tag-fieldset-container {
  background-color: var(--neutral-light);
}

.input-tag-is-error input {
  caret-color: var(--error-main);
}

.input-tag-is-error.input-tag-is-focus .input-tag-label {
  color: var(--error-main);
}

.input-tag-is-error.input-tag-is-hasValue > .input-tag-label {
  color: var(--error-main);
}

.input-tag-is-focus .input-tag-fieldset {
  border-color: var(--primary-main);
}

.input-tag-is-error .input-tag-fieldset {
  border: 1px solid var(--error-main);
}

.input-tag-is-focus .input-tag-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.input-tag-is-hasValue .input-tag-fieldset-legend {
  max-width: 100%;
}

.input-with-tags-wrapper .field-label {
  font-weight: var(--weight-semi-bold);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
}

.input-with-tags-wrapper.input-with-tags-wrapper-error .field-label {
  color: var(--error-main);
}

.input-with-tags-wrapper .input-with-tags {
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-8);
}

.input-with-tags-wrapper .input-with-tags .tags-section {
  display: flex;
  flex-wrap: wrap;
}

.input-with-tags-wrapper .input-with-tags .tags-section .tag {
  position: relative;
  display: flex;
  height: 24px;
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid var(--primary-main);
  align-items: center;
  gap: var(--spacing-8);
  z-index: 1;
  overflow: hidden;
}

.input-with-tags-wrapper .input-with-tags .tags-section .tag.disabled {
  border: 1px solid var(--neutral-main);
}

.input-with-tags-wrapper
  .input-with-tags
  .tags-section
  .tag.disabled
  .color-info-main {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.input-with-tags-wrapper .input-with-tags .tags-section .tag::before {
  position: absolute;
  content: '';
  inset: 0;
  background-color: var(--primary-main);
  opacity: 0.1;
  z-index: -1;
}

.input-with-tags-wrapper.input-with-tags-wrapper-error .input-with-tags {
  border: 1px solid var(--error-main);
}

.input-with-tags-wrapper .input-with-tags .tags-section .tag.disabled::before {
  background: rgba(var(--neutral-main), 0.8);
}

.input-with-tags-wrapper:not(.input-with-tags-wrapper-error)
  .input-with-tags:has(.input-section input:focus) {
  border-color: var(--primary-main) !important;
}

.input-with-tags-wrapper .input-with-tags .input-section .input-holder {
  flex: 1;
}

.input-with-tags-wrapper .input-with-tags .input-section .button {
  border-radius: var(--spacing-8);
}

.link-button {
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  gap: var(--spacing-4);
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-main);
  background-color: transparent;
}

.link-button-is-success {
  color: var(--success-main);
}

.link-button-is-warning {
  color: var(--warning-main);
}

.link-button-is-error {
  color: var(--error-main);
}

.link-button-is-disabled {
  background: none 0% 0% no-repeat padding-box;
  color: var(--text-disabled);
  opacity: var(--disabled-opacity);
  cursor: default;
  pointer-events: none;
}

.link-button-is-underline {
  text-decoration: underline;
}

.menu .box {
  border-radius: var(--spacing-8);
  padding: 0;
  overflow: hidden;
}

.menu-item {
  display: block;
  background-color: var(--white);
  border: none;
  cursor: pointer;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 0.875rem;
  line-height: 1.0625rem;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.menu-item-is-disabled {
  cursor: default;
}

.menu .menu-item:not([disabled]):hover {
  background-color: var(--neutral-light);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: transparent;
}

.menu-bar > ul {
  text-align: left;
  display: inline;
  margin: 0;
  list-style: none;
}

.menu-bar > ul > li {
  background: var(--text-primary);
  padding: var(--spacing-20);
  color: #ffffff;
  cursor: default;
}

.menu-bar ul li {
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

.menu-bar li ul {
  width: 220px;
  box-sizing: border-box;
  background-color: var(--white);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
  border-radius: var(--spacing-16);
  display: none;
  position: absolute;
  z-index: var(--zindex-dropdown);
  left: 0;
  margin-top: var(--spacing-20);
  padding: var(--spacing-16) var(--spacing-12);
}

.menu-bar li ul li {
  width: 100%;
  box-sizing: border-box;
  color: var(--text-primary);
  padding: var(--spacing-16) var(--spacing-8);
  cursor: pointer;
  border-bottom: 1px solid #a7b6be;
}

.menu-bar li ul li:last-child {
  border-bottom: none;
}

.menu-bar li:hover ul {
  display: block;
}

.menu-bar li ul li:hover {
  background-color: #2c323c1f;
}

.option-card {
  width: 100%;
  padding: var(--spacing-16);
  border-radius: var(--spacing-12);
  border: 1px solid var(--neutral-main);
  &:hover {
    cursor: pointer;
  }
}

.option-card__selected {
  background-color: var(--success-lighten);
  border: 1px solid var(--success-main);
  transition: all 0.3s ease-in-out;
}

.option-card__input {
  cursor: pointer;
  width: var(--spacing-20);
  height: var(--spacing-20);
  border-radius: 50%;
  margin-top: var(--spacing-4);
  accent-color: var(--success-main);
}

.pagination {
  display: flex;
  gap: var(--spacing-4);
  white-space: nowrap;
}

.pagination .icon-button:hover {
  background-color: var(--primary-light);
  color: var(--white);
}

.pagination button {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  font-weight: normal;
}

.pagination .button-group .button {
  background-color: transparent;
  color: var(--text-primary);
}

.pagination .button-group .button:hover {
  background-color: unset;
  color: var(--text-primary);
}

.pagination .icon-button.icon-button-is-disabled {
  color: var(--text-disabled);
}

.pagination .icon-button.icon-button-is-disabled:hover {
  background-color: unset;
}

.pagination .button-group .button.button-is-disabled {
  background-color: var(--primary-main);
  color: var(--white);
}

.pagination .button-group .button.button-is-disabled > .typography {
  font-weight: 600;
}

.pagination-more-button {
  pointer-events: none;
}

.pagination .button-group .button.button-is-disabled.pagination-more-button {
  background-color: transparent;
  color: var(--text-primary);
}

@media screen and (max-width: 428px) {
  .pagination .button-is-size-regular {
    font-size: 12px;
  }
}

.paper {
  background-color: var(--background-paper);
}

.paper-is-variant-outlined {
  border: 1px solid var(--neutral-main);
}

.paper-is-rounded {
  border-radius: var(--spacing-16);
}

.picture {
  vertical-align: middle;
  border-style: none;
}

.radio {
  display: inline-block;
}

.radio input {
  display: none;
}

.radio input + label {
  position: relative;
  cursor: pointer;
  font-size: var(--spacing-14);
  line-height: 0.875rem;
  font-family: var(--fontFamily);
  width: 100%;
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 var(--spacing-4);
}

.radio input + label:before {
  content: '';
  border: 1px solid transparent;
  border-radius: var(--spacing-22);
  display: inline-block;
  width: var(--spacing-22);
  height: var(--spacing-22);
  vertical-align: bottom;
  margin-right: var(--spacing-6);
  flex-shrink: 0;
}

.radio input + label:after {
  content: '';
  position: absolute;
  left: 5px;
  width: var(--spacing-14);
  height: var(--spacing-14);
  background-color: transparent;
  border-radius: 9px;
}

.radio input:checked + label:before {
  background-color: transparent;
}

.radio-is-full-width {
  width: 100%;
}

.radio-is-disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

.radio-is-disabled input + label {
  cursor: default;
}

/*_________ Color Variants _________*/

/* primary-main */
.radio.radio_primary-main input + label:before {
  border-color: var(--primary-main);
}

.radio.radio_primary-main input:checked + label:before {
  border-color: var(--primary-main);
}

.radio.radio_primary-main input:checked + label:after {
  background-color: var(--primary-main);
}

/* secondary-main */
.radio.radio_secondary-main input + label:before {
  border-color: var(--secondary-main);
}

.radio.radio_secondary-main input:checked + label:before {
  border-color: var(--secondary-main);
}

.radio.radio_secondary-main input:checked + label:after {
  background-color: var(--secondary-main);
}

/* error-main */
.radio.radio_error-main input + label:before {
  border-color: var(--error-main);
}

.radio.radio_error-main input:checked + label:before {
  border-color: var(--error-main);
}

.radio.radio_error-main input:checked + label:after {
  background-color: var(--error-main);
}

/* warning-main */
.radio.radio_warning-main input + label:before {
  border-color: var(--warning-main);
}

.radio.radio_warning-main input:checked + label:before {
  border-color: var(--warning-main);
}

.radio.radio_warning-main input:checked + label:after {
  background-color: var(--warning-main);
}

/* info-main */
.radio.radio_info-main input + label:before {
  border-color: var(--info-main);
}

.radio.radio_info-main input:checked + label:before {
  border-color: var(--info-main);
}

.radio.radio_info-main input:checked + label:after {
  background-color: var(--info-main);
}

/* success-main */
.radio.radio_success-main input + label:before {
  border-color: var(--success-main);
}

.radio.radio_success-main input:checked + label:before {
  border-color: var(--success-main);
}

.radio.radio_success-main input:checked + label:after {
  background-color: var(--success-main);
}

/* neutral-main */
.radio.radio_neutral-main input + label:before {
  border-color: var(--neutral-main);
}

.radio.radio_neutral-main input:checked + label:before {
  border-color: var(--neutral-main);
}

.radio.radio_neutral-main input:checked + label:after {
  background-color: var(--neutral-main);
}

/*_________ Color Variants _________*/


.rich-text-input {
  border-radius: var(--spacing-8);
  position: relative;
  width: 100%;
}

.rich-text-input-label {
  color: var(--text-placeholder);
  font-weight: 400;
  font-size: 14px;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 32px);
  min-height: 16px;
  text-align: start;
}

.rich-text-input-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-14);
}

.rich-text-input input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.rich-text-input-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 8px;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.rich-text-input-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.rich-text-input-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.rich-text-input-is-focus, .rich-text-input-is-hasValue {
  outline: 0;
}

.rich-text-input input:-webkit-autofill {
  -webkit-background-clip: text;
}

.rich-text-input-is-focus > .rich-text-input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - 32px);
  color: var(--primary-main);
  font-weight: 600;
}

.rich-text-input-is-hasValue > .rich-text-input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - 32px);
  font-weight: 600;
}

.rich-text-input input::placeholder {
  color: var(--text-placeholder);
}

.rich-text-input-is-disabled input {
  color: var(--text-disabled);
}

.rich-text-input-is-disabled > label {
  color: var(--text-disabled);
}

.rich-text-input-is-disabled .rich-text-input-fieldset-container {
  background-color: var(--neutral-light);
}

.rich-text-input-is-error input {
  caret-color: var(--error-main);
}

.rich-text-input-is-error .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
  border-color: var(--ck-color-base-border);
  box-shadow: none;
}

.rich-text-input-is-error.rich-text-input-is-focus .rich-text-input-label {
  color: var(--error-main);
}

.rich-text-input-is-error.rich-text-input-is-hasValue > .rich-text-input-label {
  color: var(--error-main);
}

.rich-text-input-is-focus .rich-text-input-fieldset {
  border-color: var(--primary-main);
}

.rich-text-input-is-error .rich-text-input-fieldset {
  border: 1px solid var(--error-main);
}

.rich-text-input-is-focus .rich-text-input-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.rich-text-input-is-hasValue .rich-text-input-fieldset-legend {
  max-width: 100%;
}

.ck-editor__editable_inline:not(.ck-comment__input *) {
  height: 200px;
  width: 100%;
  overflow-y: auto;
}

.ck.ck-reset.ck-editor {
  width: 100%;
}

.ck.ck-balloon-panel.ck-balloon-panel_visible .ck-powered-by {
  display: none;
}

.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
  border-color: var(--ck-color-base-border);
  box-shadow: none;
}

.search {
  background-color: var(--white);
  border: 1px solid var(--neutral-main);
  width: max-content;
  border-radius: var(--spacing-8);
  overflow: hidden;
  min-width: 436px;
  height: 48px;
}
@media (max-width: 768px) {
  .search {
    min-width: unset;
  }
  .search .search-button {
    padding: var(--spacing-8);
  }
}

.search .search-button {
  border-radius: unset !important;
  border: 1px solid var(--neutral-main);
  padding: var(--spacing-14) var(--spacing-16);
  background-color: var(--neutral-main);
  text-transform: capitalize;
}

.search .search-clear-button {
  height: 24px;
  width: 24.5px;
  margin-right: var(--spacing-12);
  border-radius: 50% !important;
  background-color: #dedede;
  font-weight: normal;
  padding: 0;
}

.search-clear-button > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button-wrapper {
  display: flex;
  align-items: center;
}

.search button:hover {
  box-shadow: none;
}

.search-is-focus {
  border: 1px solid var(--primary-main);
}

.search .search-button-is-focus {
  border: 1px solid var(--primary-main);
  background-color: var(--primary-main);
}

.search-input {
  caret-color: var(--primary-main);
  height: var(--spacing-48);
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--text-primary);
  flex-grow: 1;
}

.search-input::placeholder {
  color: var(--text-placeholder);
}

.search-input .input-fieldset {
  border: none;
}

.search-icon {
  padding-left: var(--spacing-16);
  color: var(--text-primary);
}

.skeleton {
  background: #f1f5f9;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.skeleton::after {
  animation: wave 1.5s linear 0.2s infinite;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  content: '';
  position: absolute;
  transform: translateX(-100%);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.skeleton-is-variant-text {
  height: 24px;
  border-radius: 16px;
}

.skeleton-is-variant-circular {
  border-radius: 50%;
}

.skeleton-is-variant-rectangular {
  height: 24px;
}

.snackbar {
  max-width: 392px;
  min-width: 392px;
  background-color: var(--white);
  border-radius: var(--spacing-8);
  overflow: hidden;
  position: relative;
}

.snackbar-container {
  position: fixed;
  z-index: var(--zindex-snackbar);
  display: flex;
  flex-direction: column-reverse;
  row-gap: var(--spacing-8);
  border-radius: var(--spacing-8);
}

.snackbar > .box {
  background-color: var(--white);
  color: var(--text-primary);
  position: relative;
  border: 1px solid var(--neutral-light);
  padding: var(--spacing-16);
  border-radius: var(--spacing-8);
}

.snackbar > .box .snackbar-close-button {
  cursor: pointer;
  color: var(--text-primary);
}

.snackbar-header .icon-button {
  color: var(--white);
  text-transform: uppercase;
}

.snackbar-header .icon-button:focus,
.snackbar-header .icon-button:hover {
  opacity: 0.8;
  background: transparent;
  color: var(--white);
}

.snackbar a {
  color: var(--primary-main);
}

.snackbar-progress {
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  animation-name: progress;
  animation-timing-function: linear;
}

.snackbar-progress-is-color-success {
  background-color: var(--success-main);
}

.snackbar-progress-is-color-error {
  background-color: var(--error-main);
}

.snackbar-progress-is-color-warning {
  background-color: var(--warning-main);
}

.snackbar-container-is-position-top {
  top: var(--spacing-32);
  left: 50%;
  transform: translateX(-50%);
}

.snackbar-container-is-position-bottom {
  bottom: var(--spacing-32);
  left: 50%;
  transform: translateX(-50%);
}

.snackbar-container-is-position-bottom-right {
  right: var(--spacing-32);
  bottom: var(--spacing-32);
}

.snackbar-container-is-position-top-right {
  right: var(--spacing-32);
  top: var(--spacing-32);
}

.snackbar-container-is-position-top-left {
  left: var(--spacing-32);
  top: var(--spacing-32);
}

.snackbar-container-is-position-bottom-left {
  left: var(--spacing-32);
  bottom: var(--spacing-32);
}

.snackbar-is-color-success > .box {
  background-color: rgba(33, 159, 148, 0.1);
  border: none;
}

.snackbar-is-color-success .snackbar-content {
  color: var(--success-main);
}

.snackbar-is-color-error > .box {
  background-color: rgba(240, 90, 100, 0.2);
  border: none;
}

.snackbar-is-color-error .snackbar-content {
  color: var(--error-main);
}

.snackbar-is-color-warning > .box {
  background-color: var(--warning-light);
  border: none;
}

@media screen and (max-width: 768px) {
  .snackbar {
    max-width: calc(100% - 64px);
    min-width: 350px;
  }
}

@keyframes progress {
  0% {
    width: 0;
    border-bottom-right-radius: 0;
  }

  99% {
    border-bottom-right-radius: 0;
  }

  100% {
    width: 102%;
    border-bottom-right-radius: 5px;
  }
}

.statistic-container {
  display: flex;
  align-items: center;
}

.statistic-label {
  font-weight: var(--weight-medium);
  margin-left: 2px;
  margin-right: 2px;
  line-height: 16px;
}

.statistic-positive {
  color: var(--success-main);
}

.statistic-negative {
  color: var(--error-main);
}

.info-box {
  display: flex;
  align-items: flex-start;
  width: 100%;
  background-color: var(--neutral-light);
  padding: var(--spacing-12);
  border-radius: var(--spacing-20);
}

.info-box__title {
  display: flex;
  align-items: center;
}

.info-box__content {
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-16);
  margin-top: var(--spacing-4);
}
.info-box__icon {
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--spacing-48);
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-card-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-label {
  box-sizing: border-box;
  display: inline-block;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-6) var(--spacing-32);
  border-radius: var(--spacing-4);
  background-color: var(--info-main);
  color: var(--white);
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: var(--weight-semi-bold);
  text-align: center;
  min-width: 101px;
}

.status-label-is-full-width {
  width: 100%;
}

.stepper {
  display: flex;
  column-gap: var(--spacing-8);
}

.stepper-bar {
  flex-grow: 1;
  height: 6px;
  background: var(--neutral-main);
  color: white;
  border-radius: var(--spacing-4);
}

.stepper-bar-index {
  display: none;
}

.stepper-bar-label {
  display: none;
}

.stepper-bar-is-active {
  background-color: var(--success-main);
}

.stepper-bar-is-completed {
  background-color: var(--success-main);
}

.tabs {
  display: flex;
  align-items: center;
}

.tab {
  background-color: transparent;
  border: none;
  font-weight: var(--weight-regular);
  cursor: pointer;
}

.tab-is-disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

.tab-is-active {
  cursor: default;
}

/* HORIZONTAL */
.tabs-is-orientation-horizontal {
  flex-direction: row;
}

.tabs-is-orientation-horizontal .tab {
  padding: var(--spacing-12);
}

.tabs-is-orientation-horizontal .tab-is-active .typography {
  position: relative;
}

.tabs-is-orientation-horizontal .tab-is-active .typography::before {
  content: '';
  position: absolute;
  width: 100%;
  bottom: calc(-1 * var(--spacing-10));
  height: 2px;
}

/* VERTICAL */
.tabs-is-orientation-vertical {
  flex-direction: column;
}

.tabs-is-orientation-vertical .tab {
  width: 100%;
  text-align: left;
  padding-left: var(--spacing-12);
  min-height: var(--spacing-40);
  position: relative;
}

.tabs-is-orientation-vertical .tab-is-active::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 70%;
  top: 17%;
  border-radius: 6px;
  right: -7px;
}

.tags {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  color: var(--white);
}

.tags-is-color-default {
  background-color: var(--neutral-dark);
}

.tags-is-color-primary {
  background-color: var(--primary-main);
}

.tags-is-color-success {
  background-color: var(--success-main);
}

.tags-is-color-error {
  background-color: var(--error-main);
}

.tags-is-color-onDemand {
  background-color: var(--primary-light);
}

.tags-is-color-upcoming {
  background-color: var(--secondary-main);
}

.tags-is-color-oneHourUpcoming {
  background-color: var(--error-light);
}

.tags-is-size-small {
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--spacing-14);
}

.tags-is-size-regular {
  padding: var(--spacing-10) var(--spacing-20);
  border-radius: var(--spacing-20);
}

.tags-trash-icon {
  background-color: unset;
  padding: 0;
  margin-left: var(--spacing-10);
}

.tags-trash-icon:hover {
  background-color: unset;
}

.live-icon svg {
  height: 9px;
  position: relative;
  bottom: 4px;
  right: 3px;
}

.textarea {
  border-radius: var(--spacing-8);
  position: relative;
  width: fit-content;
}

.textarea-label {
  color: var(--text-placeholder);
  align-items: center;
  display: flex;
  font-weight: 400;
  font-size: 14px;
  max-width: unset !important;
  padding: 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(14px, 16px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 32px);
  min-height: 16px;
  text-align: start;
}

.textarea-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-14);
}

.textarea textarea {
  min-height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
  resize: none;
}

.textarea-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 8px;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.textarea-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.textarea-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.textarea-fieldset-legend-hide > span {
  padding: 0;
}

.textarea-is-focus,
.textarea-is-hasValue {
  outline: 0;
}

.textarea textarea:-webkit-autofill {
  -webkit-background-clip: text;
}

.textarea-is-full-width {
  width: 100%;
}

.textarea-is-focus > .textarea-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - 32px);
  color: var(--primary-main);
  font-weight: 600;
}

.textarea-is-hasValue > .textarea-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - 32px);
  font-weight: 600;
}

.textarea textarea::placeholder {
  color: var(--text-placeholder);
}

.textarea-is-disabled textarea {
  color: var(--text-disabled);
}

.textarea-is-disabled > label {
  color: var(--text-disabled);
}

.textarea-is-disabled .textarea-fieldset-container {
  background-color: var(--neutral-light);
}

.textarea-is-error textarea {
  caret-color: var(--error-main);
}

.textarea-is-error.textarea-is-focus .textarea-label {
  color: var(--error-main);
}

.textarea-is-error.textarea-is-hasValue > .textarea-label {
  color: var(--error-main);
}

.textarea-is-focus .textarea-fieldset {
  border-color: var(--primary-main);
}

.textarea-is-error .textarea-fieldset {
  border: 1px solid var(--error-main);
}

.textarea-is-focus .textarea-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.textarea-is-hasValue .textarea-fieldset-legend {
  max-width: 100%;
}

.timeline {
  padding-left: 48px;
}

.timeline-item {
  height: 48px;
  border-bottom: solid 1px #ebebeb;
  position: relative;
  display: flex;
  align-items: center;
}
.timeline-item::before {
  position: absolute;
  content: '';
  background-color: #e0e0e0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: -32px;
  top: 16px;
}
.timeline-item::after {
  position: absolute;
  content: '';
  background-color: #e0e0e0;
  width: 2px;
  height: 100%;
  left: -25px;
  top: 25px;
}
.timeline-item:last-of-type::after {
  display: none;
}

.tooltip {
  background-color: var(--text-primary);
  border-radius: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-8);
  max-width: 208px;
}
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-header {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--spacing-4);
  color: var(--white);
  font-weight: bold;
}

.tooltip-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  color: var(--white);
}

.tooltip-placement-topRight::after,
.tooltip-placement-topLeft::after,
.tooltip-placement-bottomRight::after,
.tooltip-placement-bottomLeft::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-placement-topRight::after,
.tooltip-placement-topLeft::after {
  bottom: -7px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--text-primary);
}

.tooltip-placement-bottomRight::after,
.tooltip-placement-bottomLeft::after {
  top: -7px;
  border-bottom: 7px solid var(--text-primary);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.tooltip-placement-topRight::after,
.tooltip-placement-bottomRight::after {
  left: 15%;
}

.tooltip-placement-topLeft::after,
.tooltip-placement-bottomLeft::after {
  right: 15%;
}

.tree-view {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-8);
}

.tree-item {
  font-size: 0.875rem;
}

.tree-item-wrapper {
  width: auto;
  margin-left: var(--spacing-16);
}

.tree-item-is-container {
  flex-direction: row;
  border: 1px solid var(--neutral-main);
  padding: var(--spacing-12);
  border-radius: var(--spacing-8);
  margin-left: 21px;
  width: calc(100% - 21px);
}

.tree-item-is-container .tree-item-icon-area {
  display: none;
}

.tree-item-is-container span {
  font-size: 0.8125rem;
}

.accordion-summary {
  justify-content: flex-start;
  width: 100%;
  cursor: pointer;
  position: relative;
  background-color: var(--neutral-light);
  border-radius: var(--spacing-16);
}
.accordion-nav__item {
  position: relative;
}

.accordion-summary-expanded {
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}

.accordion-summary > .row {
  height: 56px;
  padding: 0 var(--spacing-16);
}

.accordion-summary-container {
  align-items: center;
  justify-content: space-between;
}

.accordion-details {
  padding: 0;
  height: 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.accordion-details-expanded {
  padding: 0 var(--spacing-16) var(--spacing-16) var(--spacing-16);
  height: auto;
  opacity: 1;
  visibility: visible;
  background-color: var(--neutral-light);
}

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
  --half-gutter-width: calc((var(--gutter-width) * 0.5));
  --xs-min: 30;
  --sm-min: 48;
  --md-min: 64;
  --lg-min: 75;
  --screen-xs-min: var(--xs-min) em;
  --screen-sm-min: var(--sm-min) em;
  --screen-md-min: var(--md-min) em;
  --screen-lg-min: var(--lg-min) em;
  --container-sm: calc(var(--sm-min) + var(--gutter-width));
  --container-md: calc(var(--md-min) + var(--gutter-width));
  --container-lg: calc(var(--lg-min) + var(--gutter-width));
}

.row.spacing-8 {
  margin-right: calc(var(--spacing-8) * -1);
  margin-left: calc(var(--spacing-8) * -1);
  width: calc(100% + var(--spacing-8));
}
.row.spacing-12 {
  margin-right: calc(var(--spacing-12) * -1);
  margin-left: calc(var(--spacing-12) * -1);
  width: calc(100% + var(--spacing-12));
}
.row.spacing-16 {
  margin-right: calc(var(--spacing-16) * -1);
  margin-left: calc(var(--spacing-16) * -1);
  width: calc(100% + var(--spacing-16));
}
.row.spacing-24 {
  margin-right: calc(var(--spacing-24) * -1);
  margin-left: calc(var(--spacing-24) * -1);
  width: calc(100% + var(--spacing-24));
}
.row.spacing-32 {
  margin-right: calc(var(--spacing-32) * -1);
  margin-left: calc(var(--spacing-32) * -1);
  width: calc(100% + var(--spacing-32));
}

.row.spacing-8 > .col {
  padding-top: var(--spacing-8);
  padding-left: var(--spacing-8);
  padding-right: 0;
}
.row.spacing-12 > .col {
  padding-top: var(--spacing-12);
  padding-left: var(--spacing-12);
  padding-right: 0;
}
.row.spacing-16 > .col {
  padding-top: var(--spacing-16);
  padding-left: var(--spacing-16);
  padding-right: 0;
}
.row.spacing-24 > .col {
  padding-top: var(--spacing-24);
  padding-left: var(--spacing-24);
  padding-right: 0;
}
.row.spacing-32 > .col {
  padding-top: var(--spacing-32);
  padding-left: var(--spacing-32);
  padding-right: 0;
}

.container-fluid,
.container {
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  padding-right: var(--outer-margin, 2rem);
  padding-left: var(--outer-margin, 2rem);
}

.row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(100%);
}

.wrap-wrap {
  flex-wrap: wrap;
}

.wrap-nowrap {
  flex-wrap: nowrap;
}

.wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.direction-row-reverse {
  flex-direction: row-reverse;
}

.direction-col-reverse {
  flex-direction: column-reverse;
}

.direction-row {
  flex-direction: row;
}

.direction-col {
  flex-direction: column;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
  box-sizing: border-box;
  flex: 0 0 auto;
}

.col-xs {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

.col-xs-1 {
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

.col-xs-2 {
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

.col-xs-5 {
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

.col-xs-8 {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.col-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

.col-xs-11 {
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs-offset-0 {
  margin-left: 0;
}

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.start-xs {
  justify-content: flex-start;
  text-align: start;
}

.center-xs {
  justify-content: center;
  text-align: center;
}

.end-xs {
  justify-content: flex-end;
  text-align: end;
}

.top-xs {
  align-items: flex-start;
}

.middle-xs {
  align-items: center;
}

.bottom-xs {
  align-items: flex-end;
}

.around-xs {
  justify-content: space-around;
}

.between-xs {
  justify-content: space-between;
}

.first-xs {
  order: -1;
}

.last-xs {
  order: 1;
}

@media screen and (min-width: 768px) {
  .container {
    width: var(--container-sm, 46rem);
  }

  .col-sm,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-offset-0,
  .col-sm-offset-1,
  .col-sm-offset-2,
  .col-sm-offset-3,
  .col-sm-offset-4,
  .col-sm-offset-5,
  .col-sm-offset-6,
  .col-sm-offset-7,
  .col-sm-offset-8,
  .col-sm-offset-9,
  .col-sm-offset-10,
  .col-sm-offset-11,
  .col-sm-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: var(--half-gutter-width, 0.5rem);
    padding-left: var(--half-gutter-width, 0.5rem);
  }

  .col-sm {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-sm-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-sm-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-sm-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-sm-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-sm-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-sm-offset-0 {
    margin-left: 0;
  }

  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-sm-offset-3 {
    margin-left: 25%;
  }

  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-sm-offset-6 {
    margin-left: 50%;
  }

  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-sm-offset-9 {
    margin-left: 75%;
  }

  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-sm {
    justify-content: flex-start;
    text-align: start;
  }

  .center-sm {
    justify-content: center;
    text-align: center;
  }

  .end-sm {
    justify-content: flex-end;
    text-align: end;
  }

  .top-sm {
    align-items: flex-start;
  }

  .middle-sm {
    align-items: center;
  }

  .bottom-sm {
    align-items: flex-end;
  }

  .around-sm {
    justify-content: space-around;
  }

  .between-sm {
    justify-content: space-between;
  }

  .first-sm {
    order: -1;
  }

  .last-sm {
    order: 1;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    width: var(--container-md, 61rem);
  }

  .col-md,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-offset-0,
  .col-md-offset-1,
  .col-md-offset-2,
  .col-md-offset-3,
  .col-md-offset-4,
  .col-md-offset-5,
  .col-md-offset-6,
  .col-md-offset-7,
  .col-md-offset-8,
  .col-md-offset-9,
  .col-md-offset-10,
  .col-md-offset-11,
  .col-md-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: var(--half-gutter-width, 0.5rem);
    padding-left: var(--half-gutter-width, 0.5rem);
  }

  .col-md {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-md-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-md-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-md-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-md-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-md-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-md-offset-0 {
    margin-left: 0;
  }

  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-md-offset-3 {
    margin-left: 25%;
  }

  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-md-offset-6 {
    margin-left: 50%;
  }

  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-md-offset-9 {
    margin-left: 75%;
  }

  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-md {
    justify-content: flex-start;
    text-align: start;
  }

  .center-md {
    justify-content: center;
    text-align: center;
  }

  .end-md {
    justify-content: flex-end;
    text-align: end;
  }

  .top-md {
    align-items: flex-start;
  }

  .middle-md {
    align-items: center;
  }

  .bottom-md {
    align-items: flex-end;
  }

  .around-md {
    justify-content: space-around;
  }

  .between-md {
    justify-content: space-between;
  }

  .first-md {
    order: -1;
  }

  .last-md {
    order: 1;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    width: var(--container-lg, 71rem);
  }

  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-offset-0,
  .col-lg-offset-1,
  .col-lg-offset-2,
  .col-lg-offset-3,
  .col-lg-offset-4,
  .col-lg-offset-5,
  .col-lg-offset-6,
  .col-lg-offset-7,
  .col-lg-offset-8,
  .col-lg-offset-9,
  .col-lg-offset-10,
  .col-lg-offset-11,
  .col-lg-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: var(--half-gutter-width, 0.5rem);
    padding-left: var(--half-gutter-width, 0.5rem);
  }

  .col-lg {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-lg-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-lg-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-lg-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-lg-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-lg-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg-offset-0 {
    margin-left: 0;
  }

  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-lg {
    justify-content: flex-start;
    text-align: start;
  }

  .center-lg {
    justify-content: center;
    text-align: center;
  }

  .end-lg {
    justify-content: flex-end;
    text-align: end;
  }

  .top-lg {
    align-items: flex-start;
  }

  .middle-lg {
    align-items: center;
  }

  .bottom-lg {
    align-items: flex-end;
  }

  .around-lg {
    justify-content: space-around;
  }

  .between-lg {
    justify-content: space-between;
  }

  .first-lg {
    order: -1;
  }

  .last-lg {
    order: 1;
  }
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 14px;
  cursor: pointer;
}

.switch-label {
  margin-left: var(--spacing-44);
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-primary);
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--neutral-main);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 24px;
}

.switch .slider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 0px;
  bottom: 0px;
  background-color: var(--white);
  border: 1px solid var(--neutral-light);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.switch input:checked + .slider {
  background-color: var(--success-light);
}

.switch input:checked + .slider:before {  
  top: 50%;
  transform: translate(18px, -50%);
  background-color: var(--success-main);
  border: none;
}

.switch-is-disabled input:checked + .slider {
  background-color: var(--success-light);
}

.switch-is-disabled input + .slider {
  background-color: var(--neutral-main);
  opacity: var(--disabled-opacity);
  cursor: auto;
}

.switch-is-disabled .switch-label {
  cursor: auto;
  color: var(--text-disabled);
}

.icon-is-size-xsmall {
  font-size: small;
}

.icon-is-size-small {
  font-size: initial;
}

.icon-is-size-regular {
  font-size: large;
}

.icon-is-size-large {
  font-size: larger;
}

.icon-button {
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  gap: var(--spacing-4);
  align-items: center;
  font-size: 1.5rem;
  padding: var(--spacing-8);
  border-radius: 50%;
  background-color: transparent;
  min-width: 38px;
  min-height: 38px;
}

.icon-button:hover {
  background-color: var(--neutral-light);
}

.icon-button-is-disabled {
  background: none 0% 0% no-repeat padding-box;
  color: var(--neutral-400);
  opacity: var(--disabled-opacity);
  cursor: default;
}

.icon-button-is-disabled:hover {
  background: none 0% 0% no-repeat padding-box;
}

.icon-button-is-loading:hover {
  background: none 0% 0% no-repeat padding-box;
}

.alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: var(--spacing-16);
  width: 392px;
  padding: var(--spacing-20);
  border-radius: var(--spacing-16);
}

.alert img {
  margin-right: var(--spacing-8);
}

.alert-is-error {
  background-color: var(--error-light);
  color: var(--error-dark);
}

.alert-is-warning {
  background-color: var(--warning-light);
  color: var(--warning-dark);
}

.alert-is-info {
  background-color: var(--info-light);
  color: var(--info-dark);
}

.alert-is-success {
  background-color: var(--success-light);
  color: var(--success-dark);
}

.alert-is-full-width{
  width: 100%;
}

.alert .icon-button {
  min-width: unset;
  min-height: unset;
  padding: 0;
  position: relative;
  z-index: 0;
}

.alert .icon-button::after {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--neutral-light);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
}

.alert-is-error .icon-button {
  color: var(--error-dark);
}

.alert-is-warning .icon-button {
  color: var(--warning-dark);
}

.alert-is-success .icon-button {
  color: var(--success-dark);
}

.alert-is-info .icon-button {
  color: var(--info-dark);
}
.app-bar {
  width: 100%;
}

.app-bar-is-position-absolute {
  position: absolute;
}

.app-bar-is-position-fixed {
  position: fixed;
}

.app-bar-is-position-relative {
  position: relative;
}

.app-bar-is-position-static {
  position: static;
}

.app-bar-is-position-sticky {
  position: sticky;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: var(--page-title);
}

.section-title-border {
  display: inline-block;
  width: 5px;
  height: 24px;
  background-color: var(--primary-main);
  border-radius: var(--spacing-2);
  margin-right: var(--spacing-12);
}

.section-title-adornment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--primary-light);
  border-radius: var(--spacing-6);
  margin-right: var(--spacing-12);
  color: var(--primary-main);
}

.section-title-is-primary > .section-title-border {
  background-color: var(--primary-main);
}

.section-title-is-success > .section-title-border {
  background-color: var(--success-main);
}

.section-title-is-success > .section-title-adornment {
  background-color: var(--success-light);
  color: var(--success-main);
}

.section-title-is-warning > .section-title-border {
  background-color: var(--warning-main);
}

.section-title-is-warning > .section-title-adornment {
  background-color: var(--warning-light);
  color: var(--warning-main);
}

.section-title-is-error > .section-title-border {
  background-color: var(--error-main);
}

.section-title-is-error > .section-title-adornment {
  background-color: var(--error-light);
  color: var(--error-main);
}

.button {
  outline: none;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  line-height: 1.25rem;
}

.button-is-size-tiny {
  padding: var(--spacing-6) var(--spacing-12);
  height: 32px;
  font-weight: 500;
}

.button-is-size-small {
  padding: var(--spacing-8) var(--spacing-16);
  height: 40px;
  font-weight: 600;
}

.button-is-size-regular {
  padding: var(--spacing-12) var(--spacing-28);
  height: 48px;
  font-weight: 700;
}

.button-is-color-primary {
  border: none;
  color: var(--white);
  background-color: var(--primary-main);
}

.button-is-color-primary:hover {
  border: none;
  color: var(--white);
  background-color: var(--primary-dark);
}

.button-is-color-secondary {
  border: none;
  color: var(--white);
  background-color: var(--secondary-main);
}

.button-is-color-secondary:hover {
  color: var(--white);
  background-color: var(--secondary-dark);
}

.button-is-color-error {
  border: none;
  color: var(--white);
  background-color: var(--error-main);
}

.button-is-color-error:hover {
  color: var(--error-dark);
  background-color: var(--error-secondary);
}

.button-is-color-warning {
  border: none;
  color: var(--white);
  background-color: var(--warning-main);
}

.button-is-color-warning:hover {
  color: var(--white);
  background-color: var(--warning-dark);
}

.button-is-color-info {
  border: none;
  color: var(--white);
  background-color: var(--info-main);
}

.button-is-color-info:hover {
  color: var(--white);
  background-color: var(--info-dark);
}

.button-is-color-success {
  border: none;
  color: var(--white);
  background-color: var(--success-main);
}

.button-is-color-success:hover {
  color: var(--white);
  background-color: var(--success-dark);
}

.button-is-color-ghost {
  border: none;
  background-color: transparent;
  color: var(--secondary-main);
}

.button-is-color-ghost:hover {
  text-decoration: underline;
}

.button-is-variant-primary-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--primary-main);
  border: 1px solid var(--primary-main);
}

.button-is-variant-primary-outlined:hover {
  background-color: var(--primary-light);
  border: 1px solid var(--primary-main);
  color: var(--primary-main);
}

.button-is-variant-secondary-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--secondary-main);
  border: 1px solid var(--secondary-main);
}

.button-is-variant-secondary-outlined:hover {
  background-color: var(--secondary-dark);
}

.button-is-variant-error-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--error-main);
  border: 1px solid var(--error-main);
}

.button-is-variant-error-outlined:hover {
  background-color: var(--error-secondary);
}

.button-is-variant-warning-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--warning-main);
  border: 1px solid var(--warning-main);
}

.button-is-variant-warning-outlined:hover {
  background-color: var(--warning-dark);
}

.button-is-variant-info-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--info-main);
  border: 1px solid var(--info-main);
}

.button-is-variant-info-outlined:hover {
  background-color: var(--info-dark);
}

.button-is-variant-success-outlined {
  padding: var(--spacing-12);
  background-color: var(--white);
  color: var(--success-main);
  border: 1px solid var(--success-main);
}

.button-is-variant-success-outlined:hover {
  background-color: var(--success-dark);
}

.button-is-variant-primary-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: unset;
  padding-left: var(--spacing-2);
  color: var(--primary-main);
  text-decoration: underline;
}

.button-is-variant-primary-text:hover {
  background-color: unset;
  color: var(--primary-dark);
  text-decoration: none;
}

.button-is-variant-secondary-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--secondary-main);
  text-decoration: underline;
}

.button-is-variant-secondary-text:hover {
  background-color: unset;
  color: var(--secondary-dark);
  text-decoration: none;
}

.button-is-variant-error-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--error-main);
  text-decoration: underline;
}

.button-is-variant-error-text:hover {
  background-color: unset;
  color: var(--error-dark);
  text-decoration: none;
}

.button-is-variant-warning-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--warning-main);
  text-decoration: underline;
}

.button-is-variant-warning-text:hover {
  background-color: unset;
  color: var(--warning-dark);
  text-decoration: none;
}

.button-is-variant-info-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--info-main);
  text-decoration: underline;
}

.button-is-variant-info-text:hover {
  background-color: unset;
  color: var(--info-dark);
  text-decoration: none;
}

.button-is-variant-success-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--success-main);
  text-decoration: underline;
}

.button-is-variant-success-text:hover {
  background-color: unset;
  color: var(--success-dark);
  text-decoration: none;
}

.button-is-variant-ghost-text {
  height: unset;
  background-color: unset;
  border: unset;
  padding: var(--spacing-0);
  color: var(--ghost-main);
  text-decoration: underline;
}

.button-is-full-width {
  width: 100%;
}

.button-is-disabled {
  background: var(--text-disabled);
  cursor: default;
}

.button-is-disabled:hover {
  background: var(--text-disabled);
}

.button-is-loading {
  pointer-events: none !important;
  cursor: default;
}

.typography-is-variant-h1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.167;
}

.typography-is-variant-h2 {
  font-size: 3.75rem;
  font-weight: 300;
  line-height: 1.2;
}

.typography-is-variant-h3 {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.167;
}

.typography-is-variant-h4 {
  font-size: 2.125rem;
  font-weight: 400;
  line-height: 1.235;
}

.typography-is-variant-h5 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.334;
  letter-spacing: 0;
}

.typography-is-variant-h6 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
}

.typography-is-variant-subtitle1 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
}

.typography-is-variant-subtitle2 {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.57;
}

.typography-is-variant-body1 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.typography-is-variant-body2 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
}

.typography-is-variant-button {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
}

.typography-is-variant-caption {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.66;
}

.typography-is-variant-overline {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 2.66;
  text-transform: uppercase;
}

.typography-is-variant-tiny {
  font-weight: 400;
  font-size: 0.625rem;
}

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

.attribute-card {
  padding: var(--spacing-20);
  border: 1px solid #dedede;
  border-radius: var(--spacing-16);
  width: 445px;
  max-height: 220px;
  min-height: 220px;
}

.attribute-card-content {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-8);
  border: 2px dashed #dedede;
  padding: var(--spacing-28);
  border-radius: var(--spacing-16);
  max-height: 120px;
  min-height: 120px;
}

.attribute-card-content-warning {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: var(--spacing-8);
  padding: var(--spacing-16);
  border-radius: var(--spacing-16);
  background-color: var(--warning-light);
  max-height: 120px;
  min-height: 120px;
}

.attribute-card-edit-button {
  position: absolute;
  right: var(--spacing-12);
  top: var(--spacing-4);
  color: var(--secondary-main);
}

.list-box {
  padding: 0;
  margin: 0;
  max-height: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: white;
}

.list-box-item {
  border: none;
  cursor: pointer;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 0.875rem;
  line-height: 1.0625rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  white-space: nowrap;

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

.list-box-item-is-disabled {
  cursor: default;
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.list-box-item:hover {
  background-color: var(--neutral-light);
}

.list-box-item-is-selected {
  background-color: var(--neutral-light);
}

.list-box-item-icon {
  width: 24px;
  display: inline-block;
}

.portal-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: all;
}

button.autocomplete-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: default;
}

.autocomplete-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: var(--spacing-8) 0 0 0;
}

.autocomplete-item {
  width: auto;
  height: var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeeee;
  margin: 0 var(--spacing-8) var(--spacing-8) 0;
  border-radius: var(--spacing-56);
}

.autocomplete-title {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 400;
  font-size: var(--spacing-14);
  padding: var(--spacing-8);
  color: #2c323c;
  cursor: default;
}

.autocomplete-close-icon {
  margin-right: var(--spacing-8);
  cursor: pointer;
}

.autocomplete {
  position: relative;
  width: fit-content;
  border-radius: var(--spacing-8);
}

.autocomplete-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.autocomplete-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.autocomplete input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.autocomplete-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.autocomplete-fieldset-hide {
  top: 0;
}

.autocomplete-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.autocomplete-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.autocomplete-is-focus,
.autocomplete-is-hasValue {
  outline: 0;
}

.autocomplete input:-webkit-autofill {
  -webkit-background-clip: text;
}

.autocomplete-is-full-width {
  width: 100%;
}

.autocomplete-is-focus > .autocomplete-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.autocomplete-is-hasValue > .autocomplete-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.autocomplete input::placeholder {
  color: var(--text-placeholder);
}

.autocomplete-is-disabled input {
  color: var(--text-disabled);
}

.autocomplete-is-disabled > label {
  color: var(--text-disabled);
}

.autocomplete-is-disabled .autocomplete-fieldset-container {
  background-color: var(--neutral-light);
  pointer-events: none;
}

.autocomplete-is-error input {
  caret-color: var(--error-main);
}

.autocomplete-is-error.autocomplete-is-focus .autocomplete-label {
  color: var(--error-main);
}

.autocomplete-is-error.autocomplete-is-hasValue > .autocomplete-label {
  color: var(--error-main);
}

.autocomplete-is-focus .autocomplete-fieldset {
  border-color: var(--primary-main);
}

.autocomplete-is-error .autocomplete-fieldset {
  border: 1px solid var(--error-main);
}

.autocomplete-is-focus .autocomplete-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.autocomplete-is-hasValue .autocomplete-fieldset-legend {
  max-width: 100%;
}

.autocomplete-select-list-box {
  max-height: 300px;
  overflow-y: auto;
}

.autocomplete-load-more {
  height: var(--spacing-8);
}

.autocomplete-option-block {
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-4);
  overflow: hidden;
  box-shadow: 0px 10px 20px 0px rgba(102, 148, 255, 0.3) !important;
}

.autocomplete-option-block .list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.autocomplete-option-block .multi-select-list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.autocomplete__arrow {
  display: 'block';
  transform: rotate(0deg);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.autocomplete__arrow-is-active {
  transform: rotate(180deg);
}

.autocomplete-clear {
  color: var(--text-disabled);
  cursor: pointer;
}

.checkbox {
  display: inline-flex;
  align-items: center;
}

.checkbox input {
  display: none;
}

.checkbox > label {
  cursor: pointer;
  font-size: 14px;
  line-height: 14px;
  font-family: var(--fontFamily);
  width: 100%;
  display: flex;
  align-items: center;
}

.checkbox input + label:before {
  content: '';
  border: 1px solid transparent;
  border-radius: var(--spacing-4);
  border-color: var(--neutral-main);
  display: inline-block;
  width: var(--spacing-22);
  height: var(--spacing-22);
  vertical-align: bottom;
  color: var(--neutral-main);
  margin-right: 8px;
  position: relative;
  flex-shrink: 0;
}

.checkbox input:indeterminate + label:before {
  background-image: url("data:image/svg+xml,%3Csvg width=%2724px%27 height=%2724px%27 viewBox=%270 0 24 24%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id=%27web-app%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg id=%27check%27 fill=%27%23FFFFFF%27%3E%3Cpath id=%27Shape%27 d=%27M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm3 8v2h10v-2H7z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--spacing-22);
  background-color: var(--success-main);
  background-repeat: no-repeat;
  background-position: center center;
}

.checkbox input:checked + label:before {
  background-image: url("data:image/svg+xml,%3Csvg width=%271024px%27 height=%271024px%27 viewBox=%270 0 1024 1024%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id=%27web-app%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg id=%27check%27 fill=%27%23FFFFFF%27%3E%3Cpath id=%27Shape%27 points=%276 10 4 12 10 18 20 8 18 6 10 14%27 d=%27M256 426.664L170.664 512L426.664 768L853.336 341.336L768 256L426.664 597.336Z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--spacing-22);
  background-color: var(--success-main);
  background-repeat: no-repeat;
  background-position: center center;
  border-color: var(--success-main);
  flex-shrink: 0;
}

.checkbox-is-multi-tab input:checked + label:before {
  background-image: url("data:image/svg+xml,%3Csvg width=%271024px%27 height=%271024px%27 viewBox=%270 0 1024 1024%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id=%27web-app%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg id=%27check%27 fill=%27%23FFFFFF%27%3E%3Cpath id=%27Shape%27 points=%276 10 4 12 10 18 20 8 18 6 10 14%27 d=%27M256 426.664L170.664 512L426.664 768L853.336 341.336L768 256L426.664 597.336Z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--spacing-22);
  background-color: var(--primary-main);
  background-repeat: no-repeat;
  background-position: center center;
  border-color: var(--primary-main);
}

.checkbox-is-disabled {
  opacity: var(--disabled-opacity);
}

.checkbox-is-disabled > label {
  cursor: default;
}

.checkbox-is-full-width {
  width: 100%;
}

.multi-select-list-box {
  padding: 0;
  margin: 0;
  max-height: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--white);
}

.multi-select-list-box-item {
  border: none;
  cursor: pointer;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 0.875rem;
  line-height: 1.0625rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.multi-select-list-box-item-is-selected {
  background-color: var(--neutral-light);
}

.multi-select-list-box-item:hover {
  background-color: var(--neutral-light);
}

.multi-select-list-box-item-is-disabled {
  cursor: default;
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

button.autocomplete-multiple-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: default;
}

.autocomplete-multiple-item {
  width: auto;
  height: var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeeee;
  margin: 0 var(--spacing-8) var(--spacing-8) 0;
  border-radius: var(--spacing-56);
}

.autocomplete-multiple-title {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 400;
  font-size: var(--spacing-14);
  padding: var(--spacing-8);
  color: #2c323c;
  cursor: default;
}

.autocomplete-multiple-close-icon {
  margin-right: var(--spacing-8);
  cursor: pointer;
}

.autocomplete-multiple {
  position: relative;
  width: fit-content;
  border-radius: var(--spacing-8);
}

.autocomplete-multiple-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(14px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.autocomplete-multiple-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.autocomplete-multiple input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.autocomplete-multiple-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.autocomplete-multiple-fieldset-hide {
  top: 0;
}

.autocomplete-multiple-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.autocomplete-multiple-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.autocomplete-multiple-is-focus,
.autocomplete-multiple-is-hasValue {
  outline: 0;
}

.autocomplete-multiple input:-webkit-autofill {
  -webkit-background-clip: text;
}

.autocomplete-multiple-is-full-width {
  width: 100%;
}

.autocomplete-multiple-is-focus > .autocomplete-multiple-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
  top: 0;
}

.autocomplete-multiple-is-hasValue > .autocomplete-multiple-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
  top: 0;
}

.autocomplete-multiple input::placeholder {
  color: var(--text-placeholder);
}

.autocomplete-multiple-is-disabled input {
  color: var(--text-disabled);
}

.autocomplete-multiple-is-disabled > label {
  color: var(--text-disabled);
}

.autocomplete-multiple-is-disabled .autocomplete-multiple-fieldset-container {
  background-color: var(--neutral-light);
  pointer-events: none;
}

.autocomplete-multiple-is-error input {
  caret-color: var(--error-main);
}

.autocomplete-multiple-is-error.autocomplete-multiple-is-focus
  .autocomplete-multiple-label {
  color: var(--error-main);
}

.autocomplete-multiple-is-error.autocomplete-multiple-is-hasValue
  > .autocomplete-multiple-label {
  color: var(--error-main);
}

.autocomplete-multiple-is-focus .autocomplete-multiple-fieldset {
  border-color: var(--primary-main);
}

.autocomplete-multiple-is-error .autocomplete-multiple-fieldset {
  border: 1px solid var(--error-main);
}

.autocomplete-multiple-is-focus .autocomplete-multiple-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.autocomplete-multiple-is-hasValue .autocomplete-multiple-fieldset-legend {
  max-width: 100%;
}

.autocomplete-multiple-select-list-box {
  max-height: 300px;
  overflow-y: auto;
}

.autocomplete-multiple-load-more {
  height: var(--spacing-8);
}

.autocomplete-multiple-option-block {
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-4);
  overflow: hidden;
  box-shadow: 0px 10px 20px 0px rgba(102, 148, 255, 0.3) !important;
}

.autocomplete-multiple-option-block .list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.autocomplete-multiple-option-block .multi-select-list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.autocomplete-multiple__arrow {
  display: 'block';
  transform: rotate(0deg);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.autocomplete-multiple__arrow-is-active {
  transform: rotate(180deg);
}

.autocomplete-divider {
  height: 1px;
  width: calc(100% - 24px);
  background-color: var(--neutral-main);
  margin: var(--spacing-4);
  margin-left: var(--spacing-12);
}

.autocomplete-multiple-container {
  display: none;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.autocomplete-multiple-container-active {
  display: flex;
  margin-top: var(--spacing-8);
}

.autocomplete-multiple-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: max-content;
  justify-content: center;
}

.autocomplete-multiple-wrapper-active {
  justify-content: flex-start;
}

.avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
}

.badge {
  display: inline-block;
  position: relative;
  width: fit-content;
}

.badge-content {
  position: absolute;
  border-radius: var(--spacing-8);
  font-family: var(--fontFamily);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 0.875rem;
  width: 16px;
  height: 16px;
  text-align: center;
  padding: 1px 0px;
}

.badge-origin-is-vertical-top .badge-content {
  top: -7px;
}

.badge-origin-is-vertical-bottom .badge-content {
  bottom: -7px;
}
.badge-origin-is-horizontal-left .badge-content {
  right: 50%;
}

.badge-origin-is-horizontal-right .badge-content {
  left: 50%;
}

.badge-is-variant-success .badge-content {
  color: var(--white);
  background-color: var(--success-main);
}

.badge-is-variant-error .badge-content {
  color: var(--white);
  background-color: var(--error-main);
}

.badge-is-variant-secondary .badge-content {
  color: var(--white);
  background-color: var(--secondary-main);
}

.badge-is-variant-warning .badge-content {
  color: var(--white);
  background-color: var(--warning-main);
}

.breadcrumb-items {
  display: flex;
  align-items: center;
  column-gap: var(--spacing-6);
  padding: var(--spacing-2);
  white-space: nowrap;
  overflow-x: auto;
}

.breadcrumb-items a {
  color: var(--text-primary);
  cursor: pointer;
}

.breadcrumb-seperator > svg {
  color: var(--text-primary);
}

.breadcrumb-items a:last-child {
  pointer-events: none;
  cursor: default;
  color: var(--page-title);
}

.button-group .button:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.button-group .button:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.button-group .button {
  border-radius: 0px;
}

.card-info-is-default {
  background-color: unset;
  border: 1px solid var(--neutral-light) !important;
}

.card-info-is-info {
  background-color: var(--info-light);
}

.card-info-is-success {
  background-color: var(--success-light);
}

.card-info-is-error {
  background-color: var(--error-light);
}

.card-info-is-warning {
  background-color: var(--warning-light);
}

.chip {
  box-sizing: border-box;
  display: inline-block;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-8);
  color: var(--black);
  border-radius: var(--spacing-44);
}

.chip-icon {
  display: inline-block;
  font-size: 0.75rem;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.chip-is-filter {
  display: inline-flex;
  align-items: center;
  column-gap: var(--spacing-12);
  border: solid 1px var(--neutral-main);
  background-color: var(--neutral-main);
}

.chip-is-full-width {
  width: 100%;
}

.clipboard {
  cursor: pointer;
  display: inline-block;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
}

.clipboard-popover {
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--spacing-4);
  background-color: var(--text-primary);
  color: var(--white);
  font-size: 12px;
  margin-top: var(--spacing-2);
}

.code-input-content {
  height: 56px;
  width: 56px;
  border-radius: var(--spacing-8);
  border: 1px solid var(--neutral-main); 
  text-align: center;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.code-input-content:focus {
  border: 1px solid var(--primary-main);
}

.code-input-is-error .code-input-content {
  border-color: var(--error-main)
}

.comparison-tabs {
  border-radius: 16px;
  background-color: var(--background-main);
  box-shadow: var(--box-shadow-md);
}
.comparison-tabs__separator {
  width: 1px;
  background-color: var(--neutral-main);
  margin-block: 16px;
}
.comparison-tabs__difference {
  padding: 16px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.comparison-tabs__fields {
  height: 100%;
}
.comparison-tabs__field-content {
  height: 100%;
  padding: 16px;
  align-content: center;
}
.comparison-tabs__field-label {
  text-align: center;
}
.comparison-tabs__field-value {
  text-align: center;
  word-break: break-all;
}

.modal-overlay {
  position: fixed;
  z-index: var(--zindex-backdrop);
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  pointer-events: none;
  background-color: transparent;
  right: 0;
  animation-duration: 400ms;
  animation-fill-mode: both;
}

.modal-overlay-is-open {
  pointer-events: all;
  animation-name: overlay-animation-open;
}

.modal-overlay-is-close {
  pointer-events: none;
  animation-name: overlay-animation-off;
}

@keyframes overlay-animation-open {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--backdrop-main);
  }
}

@keyframes overlay-animation-off {
  from {
    background-color: var(--backdrop-main);
  }
  to {
    background-color: transparent;
  }
}

@media screen and (min-width: 1024px) {
  .modal {
    width: 900px;
  }
}

@media screen and (max-width: 1024px) {
  .modal {
    width: 700px;
  }
}

@media screen and (max-width: 768px) {
  .modal {
    width: 90%;
  }
}

.contract-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-48) !important;
  border-bottom: 1px solid var(--neutral-light);
}
.contract-content {
  max-height: 65vh;
  overflow-y: auto;
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-24)
    var(--spacing-24);
}

.contract-content.no-scroll {
  max-height: none;
  overflow-y: visible;
}

.contract-approval {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.contract-approval.open {
  max-height: 200px;
  opacity: 1;
}

.contract-footer {
  min-width: 135px;
}

.contract-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.contract-actions.open {
  opacity: 1;
  max-height: 100px;
}

.btn-continue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.countdown {
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  column-gap: var(--spacing-8);
}

.mask-input {
  border-radius: var(--spacing-8);
  position: relative;
  width: fit-content;
}

.mask-input-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.mask-input-label-startAdornment {
  left: var(--spacing-24);
}

.mask-input-label-endAdornment {
  width: calc(100% - var(--spacing-56));
}

.mask-input-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.mask-input input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.mask-input-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.mask-input-fieldset-hide {
  top: 0;
}

.mask-input-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.mask-input-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.mask-input-is-focus, .mask-input-is-hasValue {
  outline: 0;
}

.mask-input input:-webkit-autofill {
  -webkit-background-clip: text;
}

.mask-input-is-full-width {
  width: 100%;
}

.mask-input-is-focus > .mask-input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.mask-input-is-hasValue > .mask-input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.mask-input input::placeholder {
  color: var(--text-placeholder);
}

.mask-input-is-disabled input {
  color: var(--text-disabled);
}

.mask-input-is-disabled > label {
  color: var(--text-disabled);
}

.mask-input-is-disabled .mask-input-fieldset-container {
  background-color: var(--neutral-light);
}

.mask-input-is-error input {
  caret-color: var(--error-main);
}

.mask-input-is-error.mask-input-is-focus .mask-input-label {
  color: var(--error-main);
}

.mask-input-is-error.mask-input-is-hasValue > .mask-input-label {
  color: var(--error-main);
}

.mask-input-is-focus .mask-input-fieldset {
  border-color: var(--primary-main);
}

.mask-input-is-error .mask-input-fieldset {
  border: 1px solid var(--error-main);
}

.mask-input-is-focus .mask-input-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.mask-input-is-hasValue .mask-input-fieldset-legend {
  max-width: 100%;
}

.select {
  position: relative;
  width: 100%;
  background-color: var(--white);
  cursor: pointer;
  height: 48px;
  border-radius: var(--spacing-8);
  border: none;
  padding: 0;
  text-align: inherit;
  font: inherit;
}

.select-overlay {
  position: fixed;
  inset: 0;
}

.select-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  transform: translate(14px, 17px) scale(1);
  position: absolute;
  left: 0;
  top: -1px;
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.select-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -6px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.select-fieldset-hide {
  top: 0;
}

.select-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.select-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.select-option-block {
  overflow: hidden;
  height: 100%;
  box-shadow: 0px 10px 20px 0px rgba(102, 148, 255, 0.3) !important;
}

.select-option-block .list-box-item > p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.select-is-focus,
.select-is-hasValue {
  outline: 0;
}

.select-is-full-width {
  width: 100%;
}

.select-is-focus > .select-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.select-is-hasValue > .select-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.select-container {
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
  height: 100%;
}

.select-placeholder {
  flex-grow: 1;
  text-align: initial;
  color: var(--text-disabled);
}

.select-selected-text {
  flex-grow: 1;
  text-align: initial;
  overflow: hidden;
}

.select-selected-text > * {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-is-disabled {
  pointer-events: none;
  color: var(--text-disabled);
}

.select-is-disabled .select-label {
  color: var(--text-disabled);
}

.select-is-disabled .select-container {
  background-color: var(--neutral-light);
}

.select-is-error.select-is-focus .select-label {
  color: var(--error-main);
}

.select-is-error.select-is-hasValue > .select-label {
  color: var(--error-main);
}

.select-is-focus .select-fieldset {
  border-color: var(--primary-main);
}

.select-is-error .select-fieldset {
  border: 1px solid var(--error-main);
}

.select-is-focus .select-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.select-is-hasValue .select-fieldset-legend {
  max-width: 100%;
}

.select-clear {
  color: var(--text-disabled);
  cursor: pointer;
}

.select__arrow {
  display: 'block';
  transform: rotate(0deg);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.select__arrow-is-active {
  transform: rotate(180deg);
}

* {
  box-sizing: border-box !important;
}

.input {
  border-radius: var(--spacing-8);
  position: relative;
  width: fit-content;
}

.input-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.input-label-startAdornment {
  left: var(--spacing-24);
}

.input-label-endAdornment {
  width: calc(100% - var(--spacing-56));
}

.input-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.input-content {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.input-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.input-fieldset-hide {
  top: 0;
}

.input-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.input-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.input-is-focus,
.input-is-hasValue {
  outline: 0;

  & > .input-label-startAdornment {
    left: 0px;
  }
}

.input input:-webkit-autofill {
  -webkit-background-clip: text;
}

.input-is-full-width {
  width: 100%;
}

.input-is-focus > .input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.input-is-hasValue > .input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.input input::placeholder {
  color: var(--text-placeholder);
}

.input-is-disabled input {
  color: var(--text-disabled);
}

.input-is-disabled .input-fieldset-container {
  background-color: var(--neutral-light);
}

.input-is-disabled > label {
  color: var(--text-disabled);
}

.input-is-error input {
  caret-color: var(--error-main);
}

.input-is-error.input-is-focus .input-label {
  color: var(--error-main);
}

.input-is-error.input-is-hasValue > .input-label {
  color: var(--error-main);
}

.input-is-focus .input-fieldset {
  border-color: var(--primary-main);
}

.input-is-error .input-fieldset {
  border: 1px solid var(--error-main);
}

.input-is-focus .input-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.input-is-hasValue .input-fieldset-legend {
  max-width: 100%;
}


.date-picker {
  background-color: var(--background-main);
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-8);
  padding: var(--spacing-16);
}

.date-picker-day-of-week,
.dates {
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
}

.date-picker-day-of-week {
  margin-top: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  padding-bottom: var(--spacing-18);
  border-bottom: 1px solid black;
}

.date-picker-day-of-week > * {
  text-align: center;
}

.dates button {
  position: relative;
  font-weight: var(--weight-semi-bold);
  padding: 0;
  width: 35px;
  height: 35px;
  border-radius: 35px;
  border: 1px solid transparent;
  background-color: var(--white);
  color: var(--text-primary);
  cursor: pointer;
}

.dates button:not(.date-picker__day-is-disabled):hover {
  background-color: var(--primary-light);
  transition: all 0.2s ease-in-out;
}

.dates button.date-picker__day-is-today {
  border-color: var(--primary-main);
}

.dates button.date-picker__day-is-select-day {
  background-color: var(--primary-main);
  border-color: none;
  color: var(--white);
}

.dates button.date-picker__day-is-select-day:hover {
  background-color: var(--primary-main);
  border-color: var(--primary-main);
  color: var(--white);
}

.dates button.date-picker__day-is-other-day {
  color: var(--neutral-dark);
}

.dates button.date-picker__day-is-disabled {
  background: var(--neutral-light);
  color: var(--neutral-main);
  box-shadow: none;
  cursor: not-allowed;
}

.date-picker-block {
  min-width: 301px;
  overflow: hidden;
  border-radius: var(--spacing-8);
}

.date-picker-input.input-is-disabled input {
  cursor: not-allowed;
}

.date-picker-option-block {
  border-radius: var(--spacing-8);
}

.date-picker-option-block .list-box {
  max-height: none;
}

.date-picker-block .select {
  border-radius: 0;
}

.date-picker-block .select-fieldset {
  border: none;
}

.date-picker-block .select-container {
  padding: var(--spacing-12);
}

.date-picker-actions {
  padding-top: var(--spacing-8);
}

.date-picker-clear {
  color: var(--text-disabled);
  cursor: pointer;
}

.time-input {
  margin-top: 16px;
}

.time-input__hour,
.time-input__minute {
  width: 40px;

  .input-fieldset-container {
    padding: unset;
    padding-inline: 10px;
  }
}

.time-input__seperator {
  display: flex;
  align-items: center;
}

.date-picker__actions {
  display: flex;
  align-items: flex-end;
}

.dialog-overlay {
  position: fixed;
  z-index: var(--zindex-backdrop);
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  pointer-events: none;
  background-color: transparent;
  right: 0;
  animation-duration: 400ms;
  animation-fill-mode: both;
}

.dialog-overlay-is-open {
  pointer-events: all;
  animation-name: overlay-animation-open;
}

.dialog-overlay-is-close {
  pointer-events: none;
  animation-name: overlay-animation-off;
}

@keyframes overlay-animation-open {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--backdrop-main);
  }
}

@keyframes overlay-animation-off {
  from {
    background-color: var(--backdrop-main);
  }
  to {
    background-color: transparent;
  }
}

@media screen and (min-width: 1024px) {
  .dialog {
    width: 470px;
  }
}

@media screen and (max-width: 1024px) {
  .dialog {
    width: 344px;
  }
}

@media screen and (max-width: 768px) {
  .dialog {
    width: 90%;
  }
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--zindex-backdrop);
  display: grid;
  justify-items: center;
  align-items: center;
  pointer-events: none;
  background-color: transparent;
  right: 0;
  animation-duration: 400ms;
  animation-fill-mode: both;
}

.drawer-overlay-is-open {
  pointer-events: all;
  animation-name: overlay-animation-open;
}

.drawer-overlay-is-close {
  pointer-events: none;
  animation-name: overlay-animation-off;
}

@keyframes overlay-animation-open {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--backdrop-main);
  }
}

@keyframes overlay-animation-off {
  from {
    background-color: var(--backdrop-main);
  }
  to {
    background-color: transparent;
  }
}

.dropdown-container .box {
  border-radius: var(--spacing-8);
  padding: 0;
  overflow: hidden;
}

.dropdown-container-overlay {
  position: fixed;
  inset: 0;
  background-color: transparent;
}

.dropdown-container-button {
  cursor: pointer;
  background-color: var(--white);
  border: solid 1px #ebebeb;
  border-radius: var(--spacing-32);
  height: var(--spacing-32);
  padding: 0 var(--spacing-16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-container-button.selected {
  border: solid 1px var(--primary-main);
}

.dropdown-container-icon {
  transition: all 0.3s ease;
}

.dropdown-container-icon.open {
  rotate: 180deg;
}

.file-input-drop-area {
  border: 2px dashed var(--neutral-main);
  padding: var(--spacing-32) var(--spacing-32) var(--spacing-12) var(--spacing-32);
  border-radius: var(--spacing-16);
  display: inline-block;
  max-width: 382px;
}

.file-input-drop-area-is-active {
  border-color: var(--primary-main);
}

.file-input-drop-area-is-error {
  border-color: var(--error-main);
}

.file-input-detail-text {
  text-align: center;
}
.file-input-v2-drop-area {
  border: 2px dashed var(--neutral-main);
  padding: var(--spacing-32) var(--spacing-32) var(--spacing-12)
    var(--spacing-32);
  border-radius: var(--spacing-16);
  display: inline-block;
  max-width: 382px;
  margin-bottom: var(--spacing-32);
}

.file-input-v2-drop-area-is-active {
  border-color: var(--primary-main);
}

.file-input-v2-drop-area-is-error {
  border-color: var(--error-main);
}

.file-input-v2-detail-text {
  text-align: center;
}

.file-item-box {
  min-width: 436px;
  padding: var(--spacing-12);
  border: 1px solid var(--primary-main);
  border-radius: var(--spacing-8);
}

.file-item-box__delete-button {
  cursor: pointer;
  background-color: var(--neutral-light);
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.file-upload-progress-bar-container {
  width: '100%';
  background-color: var(--neutral-light);
  border-radius: var(--spacing-18);
  overflow: 'hidden';
}

.file-upload-progress-bar {
  height: var(--spacing-4);
  background-color: var(--success-main);
  border-radius: var(--spacing-18);
}

.image-crop {
  width: 536px;
}

.image-crop__wrapper {
  position: relative;
}

.image-crop__control-bar {
  position: absolute;
  bottom: 6px;
  justify-content: flex-end;
  gap: var(--spacing-8);
}

.image-crop__control-button:hover {
  background-color: unset;
}

.image-crop__control-bar .icon {
  color: white;
}

.info-box {
  display: flex;
  align-items: flex-start;
  width: 100%;
  background-color: var(--neutral-light);
  padding: var(--spacing-12);
  border-radius: var(--spacing-20);
}

.info-box__title {
  display: flex;
  align-items: center;
}

.info-box__content {
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-16);
  margin-top: var(--spacing-4);
}
.info-box__icon {
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--spacing-48);
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-tag-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: var(--spacing-8) 0 0 0;
}

.input-tag-item {
  width: auto;
  height: var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeeee;
  margin: 0 var(--spacing-8) var(--spacing-8) 0;
  border-radius: var(--spacing-56);
}

.input-tag-title {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 400;
  font-size: var(--spacing-14);
  padding: var(--spacing-8);
  color: #2c323c;
  cursor: default;
}

.input-tag-close-icon {
  margin-right: var(--spacing-8);
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.input-tag {
  position: relative;
  width: fit-content;
  border-radius: var(--spacing-8);
}

.input-tag-label {
  color: var(--text-placeholder);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: calc(100% - var(--spacing-32));
  min-height: 16px;
  text-align: start;
}

.input-tag-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: 0 var(--spacing-14);
}

.input-tag input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.input-tag-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 var(--spacing-8);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.input-tag-fieldset-hide {
  top: 0;
}

.input-tag-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semi-bold);
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.input-tag-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.input-tag-is-focus,
.input-tag-is-hasValue {
  outline: 0;
}

.input-tag input:-webkit-autofill {
  -webkit-background-clip: text;
}

.input-tag-is-full-width {
  width: 100%;
}

.input-tag-is-focus > .input-tag-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  color: var(--primary-main);
  font-weight: var(--weight-semi-bold);
}

.input-tag-is-hasValue > .input-tag-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - var(--spacing-32));
  font-weight: var(--weight-semi-bold);
}

.input-tag input::placeholder {
  color: var(--text-placeholder);
}

.input-tag-is-disabled input {
  color: var(--text-disabled);
  pointer-events: none;
}

.input-tag-is-disabled > label {
  color: var(--text-disabled);
}

.input-tag-is-disabled .input-tag-fieldset-container {
  background-color: var(--neutral-light);
}

.input-tag-is-error input {
  caret-color: var(--error-main);
}

.input-tag-is-error.input-tag-is-focus .input-tag-label {
  color: var(--error-main);
}

.input-tag-is-error.input-tag-is-hasValue > .input-tag-label {
  color: var(--error-main);
}

.input-tag-is-focus .input-tag-fieldset {
  border-color: var(--primary-main);
}

.input-tag-is-error .input-tag-fieldset {
  border: 1px solid var(--error-main);
}

.input-tag-is-focus .input-tag-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.input-tag-is-hasValue .input-tag-fieldset-legend {
  max-width: 100%;
}

.input-with-tags-wrapper .field-label {
  font-weight: var(--weight-semi-bold);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
}

.input-with-tags-wrapper.input-with-tags-wrapper-error .field-label {
  color: var(--error-main);
}

.input-with-tags-wrapper .input-with-tags {
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-8);
}

.input-with-tags-wrapper .input-with-tags .tags-section {
  display: flex;
  flex-wrap: wrap;
}

.input-with-tags-wrapper .input-with-tags .tags-section .tag {
  position: relative;
  display: flex;
  height: 24px;
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid var(--primary-main);
  align-items: center;
  gap: var(--spacing-8);
  z-index: 1;
  overflow: hidden;
}

.input-with-tags-wrapper .input-with-tags .tags-section .tag.disabled {
  border: 1px solid var(--neutral-main);
}

.input-with-tags-wrapper
  .input-with-tags
  .tags-section
  .tag.disabled
  .color-info-main {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.input-with-tags-wrapper .input-with-tags .tags-section .tag::before {
  position: absolute;
  content: '';
  inset: 0;
  background-color: var(--primary-main);
  opacity: 0.1;
  z-index: -1;
}

.input-with-tags-wrapper.input-with-tags-wrapper-error .input-with-tags {
  border: 1px solid var(--error-main);
}

.input-with-tags-wrapper .input-with-tags .tags-section .tag.disabled::before {
  background: rgba(var(--neutral-main), 0.8);
}

.input-with-tags-wrapper:not(.input-with-tags-wrapper-error)
  .input-with-tags:has(.input-section input:focus) {
  border-color: var(--primary-main) !important;
}

.input-with-tags-wrapper .input-with-tags .input-section .input-holder {
  flex: 1;
}

.input-with-tags-wrapper .input-with-tags .input-section .button {
  border-radius: var(--spacing-8);
}

.link-button {
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  gap: var(--spacing-4);
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-main);
  background-color: transparent;
}

.link-button-is-success {
  color: var(--success-main);
}

.link-button-is-warning {
  color: var(--warning-main);
}

.link-button-is-error {
  color: var(--error-main);
}

.link-button-is-disabled {
  background: none 0% 0% no-repeat padding-box;
  color: var(--text-disabled);
  opacity: var(--disabled-opacity);
  cursor: default;
  pointer-events: none;
}

.link-button-is-underline {
  text-decoration: underline;
}

.menu .box {
  border-radius: var(--spacing-8);
  padding: 0;
  overflow: hidden;
}

.menu-item {
  display: block;
  background-color: var(--white);
  border: none;
  cursor: pointer;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 0.875rem;
  line-height: 1.0625rem;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.menu-item-is-disabled {
  cursor: default;
}

.menu .menu-item:not([disabled]):hover {
  background-color: var(--neutral-light);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: transparent;
}

.menu-bar > ul {
  text-align: left;
  display: inline;
  margin: 0;
  list-style: none;
}

.menu-bar > ul > li {
  background: var(--text-primary);
  padding: var(--spacing-20);
  color: #ffffff;
  cursor: default;
}

.menu-bar ul li {
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

.menu-bar li ul {
  width: 220px;
  box-sizing: border-box;
  background-color: var(--white);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
  border-radius: var(--spacing-16);
  display: none;
  position: absolute;
  z-index: var(--zindex-dropdown);
  left: 0;
  margin-top: var(--spacing-20);
  padding: var(--spacing-16) var(--spacing-12);
}

.menu-bar li ul li {
  width: 100%;
  box-sizing: border-box;
  color: var(--text-primary);
  padding: var(--spacing-16) var(--spacing-8);
  cursor: pointer;
  border-bottom: 1px solid #a7b6be;
}

.menu-bar li ul li:last-child {
  border-bottom: none;
}

.menu-bar li:hover ul {
  display: block;
}

.menu-bar li ul li:hover {
  background-color: #2c323c1f;
}

.carousel {
  width: 100%;
  margin: 0 auto;
}

.carousel__viewport {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: height 0.4s ease;
}

.carousel__toggle {
  position: absolute;
  bottom: var(--spacing-6);
  right: var(--spacing-8);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  opacity: 0;
  z-index: 0;
  text-align: left;
  transform: translateX(100%);
  transition:
    opacity 0.5s ease,
    transform 1s ease;
  pointer-events: none;
  background: var(--neutral-main);
  padding: var(--spacing-12);
  flex-wrap: nowrap;
  justify-content: center;
}

.carousel__content {
  min-width: 0;
}

.carousel__slide::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--carousel-fold, 68px) - 24px);
  height: 24px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.85)
  );
}

.carousel__slide.is-collapsed::after {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.carousel__slide:not(.is-active):not(.is-leaving) {
  transition:
    transform 1s ease,
    opacity 0s ease;
}

.carousel__slide.is-active {
  opacity: 1;
  z-index: 2;
  transform: translateX(0);
  pointer-events: auto;
}

.carousel__slide.is-leaving {
  opacity: 1;
  z-index: 1;
  transform: translateX(-100%);
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing-6);
  padding-top: var(--spacing-18);
}

.carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--neutral-main);
  cursor: pointer;
  transition: background 0.3s ease;
}

.carousel__dot.is-active {
  background: var(--primary-main);
  width: 8px;
  height: 8px;
}

.carousel__toggle--error {
  background: var(--error-ligten);

  i {
    color: var(--error-dark);
  }
}

.carousel__toggle--warning {
  background: var(--warning-light);

  i {
    color: var(--warning-dark);
  }
}

.carousel__toggle--info {
  background: var(--primary-light);

  i {
    color: var(--primary-dark);
  }
}

.carousel__toggle--success {
  background: var(--success-lighten);

  i {
    color: var(--success-dark);
  }
}

.carousel__slide--error {
  background: var(--error-ligten);
  border-left: 4px solid var(--error-dark);

  i,
  .carousel__title {
    color: var(--error-dark);
  }
}

.carousel__slide--warning {
  background: var(--warning-light);
  border-left: 4px solid var(--warning-dark);

  i,
  .carousel__title {
    color: var(--warning-dark);
  }
}

.carousel__slide--info {
  background: var(--primary-light);
  border-left: 4px solid var(--primary-dark);

  i,
  .carousel__title {
    color: var(--primary-dark);
  }
}

.carousel__slide--success {
  background: var(--success-lighten);
  border-left: 4px solid var(--success-dark);

  i,
  .carousel__title {
    color: var(--success-dark);
  }
}

.option-card {
  width: 100%;
  padding: var(--spacing-16);
  border-radius: var(--spacing-12);
  border: 1px solid var(--neutral-main);
  &:hover {
    cursor: pointer;
  }
}

.option-card__selected {
  background-color: var(--success-lighten);
  border: 1px solid var(--success-main);
  transition: all 0.3s ease-in-out;
}

.option-card__input {
  cursor: pointer;
  width: var(--spacing-20);
  height: var(--spacing-20);
  border-radius: 50%;
  margin-top: var(--spacing-4);
  accent-color: var(--success-main);
}

.pagination {
  display: flex;
  gap: var(--spacing-4);
  white-space: nowrap;
}

.pagination .icon-button:hover {
  background-color: var(--primary-light);
  color: var(--white);
}

.pagination button {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  font-weight: normal;
}

.pagination .button-group .button {
  background-color: transparent;
  color: var(--text-primary);
}

.pagination .button-group .button:hover {
  background-color: unset;
  color: var(--text-primary);
}

.pagination .icon-button.icon-button-is-disabled {
  color: var(--text-disabled);
}

.pagination .icon-button.icon-button-is-disabled:hover {
  background-color: unset;
}

.pagination .button-group .button.button-is-disabled {
  background-color: var(--primary-main);
  color: var(--white);
}

.pagination .button-group .button.button-is-disabled > .typography {
  font-weight: 600;
}

.pagination-more-button {
  pointer-events: none;
}

.pagination .button-group .button.button-is-disabled.pagination-more-button {
  background-color: transparent;
  color: var(--text-primary);
}

@media screen and (max-width: 428px) {
  .pagination .button-is-size-regular {
    font-size: 12px;
  }
}

.paper {
  background-color: var(--background-paper);
}

.paper-is-variant-outlined {
  border: 1px solid var(--neutral-main);
}

.paper-is-rounded {
  border-radius: var(--spacing-16);
}

.picture {
  vertical-align: middle;
  border-style: none;
}

.radio {
  display: inline-block;
}

.radio input {
  display: none;
}

.radio input + label {
  position: relative;
  cursor: pointer;
  font-size: var(--spacing-14);
  line-height: 0.875rem;
  font-family: var(--fontFamily);
  width: 100%;
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 var(--spacing-4);
}

.radio input + label:before {
  content: '';
  border: 1px solid transparent;
  border-radius: var(--spacing-22);
  display: inline-block;
  width: var(--spacing-22);
  height: var(--spacing-22);
  vertical-align: bottom;
  margin-right: var(--spacing-6);
  flex-shrink: 0;
}

.radio input + label:after {
  content: '';
  position: absolute;
  left: 5px;
  width: var(--spacing-14);
  height: var(--spacing-14);
  background-color: transparent;
  border-radius: 9px;
}

.radio input:checked + label:before {
  background-color: transparent;
}

.radio-is-full-width {
  width: 100%;
}

.radio-is-disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

.radio-is-disabled input + label {
  cursor: default;
}

/*_________ Color Variants _________*/

/* primary-main */
.radio.radio_primary-main input + label:before {
  border-color: var(--primary-main);
}

.radio.radio_primary-main input:checked + label:before {
  border-color: var(--primary-main);
}

.radio.radio_primary-main input:checked + label:after {
  background-color: var(--primary-main);
}

/* secondary-main */
.radio.radio_secondary-main input + label:before {
  border-color: var(--secondary-main);
}

.radio.radio_secondary-main input:checked + label:before {
  border-color: var(--secondary-main);
}

.radio.radio_secondary-main input:checked + label:after {
  background-color: var(--secondary-main);
}

/* error-main */
.radio.radio_error-main input + label:before {
  border-color: var(--error-main);
}

.radio.radio_error-main input:checked + label:before {
  border-color: var(--error-main);
}

.radio.radio_error-main input:checked + label:after {
  background-color: var(--error-main);
}

/* warning-main */
.radio.radio_warning-main input + label:before {
  border-color: var(--warning-main);
}

.radio.radio_warning-main input:checked + label:before {
  border-color: var(--warning-main);
}

.radio.radio_warning-main input:checked + label:after {
  background-color: var(--warning-main);
}

/* info-main */
.radio.radio_info-main input + label:before {
  border-color: var(--info-main);
}

.radio.radio_info-main input:checked + label:before {
  border-color: var(--info-main);
}

.radio.radio_info-main input:checked + label:after {
  background-color: var(--info-main);
}

/* success-main */
.radio.radio_success-main input + label:before {
  border-color: var(--success-main);
}

.radio.radio_success-main input:checked + label:before {
  border-color: var(--success-main);
}

.radio.radio_success-main input:checked + label:after {
  background-color: var(--success-main);
}

/* neutral-main */
.radio.radio_neutral-main input + label:before {
  border-color: var(--neutral-main);
}

.radio.radio_neutral-main input:checked + label:before {
  border-color: var(--neutral-main);
}

.radio.radio_neutral-main input:checked + label:after {
  background-color: var(--neutral-main);
}

/*_________ Color Variants _________*/


.rich-text-input {
  border-radius: var(--spacing-8);
  position: relative;
  width: 100%;
}

.rich-text-input-label {
  color: var(--text-placeholder);
  font-weight: 400;
  font-size: 14px;
  font-family: var(--fontFamily);
  max-width: unset !important;
  padding: 1px 0 0 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: -1px;
  transform: translate(14px, 17px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 32px);
  min-height: 16px;
  text-align: start;
}

.rich-text-input-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-14);
}

.rich-text-input input {
  height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
}

.rich-text-input-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 8px;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.rich-text-input-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.rich-text-input-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.rich-text-input-is-focus, .rich-text-input-is-hasValue {
  outline: 0;
}

.rich-text-input input:-webkit-autofill {
  -webkit-background-clip: text;
}

.rich-text-input-is-focus > .rich-text-input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - 32px);
  color: var(--primary-main);
  font-weight: 600;
}

.rich-text-input-is-hasValue > .rich-text-input-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - 32px);
  font-weight: 600;
}

.rich-text-input input::placeholder {
  color: var(--text-placeholder);
}

.rich-text-input-is-disabled input {
  color: var(--text-disabled);
}

.rich-text-input-is-disabled > label {
  color: var(--text-disabled);
}

.rich-text-input-is-disabled .rich-text-input-fieldset-container {
  background-color: var(--neutral-light);
}

.rich-text-input-is-error input {
  caret-color: var(--error-main);
}

.rich-text-input-is-error .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
  border-color: var(--ck-color-base-border);
  box-shadow: none;
}

.rich-text-input-is-error.rich-text-input-is-focus .rich-text-input-label {
  color: var(--error-main);
}

.rich-text-input-is-error.rich-text-input-is-hasValue > .rich-text-input-label {
  color: var(--error-main);
}

.rich-text-input-is-focus .rich-text-input-fieldset {
  border-color: var(--primary-main);
}

.rich-text-input-is-error .rich-text-input-fieldset {
  border: 1px solid var(--error-main);
}

.rich-text-input-is-focus .rich-text-input-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.rich-text-input-is-hasValue .rich-text-input-fieldset-legend {
  max-width: 100%;
}

.ck-editor__editable_inline:not(.ck-comment__input *) {
  height: 200px;
  width: 100%;
  overflow-y: auto;
}

.ck.ck-reset.ck-editor {
  width: 100%;
}

.ck.ck-balloon-panel.ck-balloon-panel_visible .ck-powered-by {
  display: none;
}

.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
  border-color: var(--ck-color-base-border);
  box-shadow: none;
}

.search {
  background-color: var(--white);
  border: 1px solid var(--neutral-main);
  width: max-content;
  border-radius: var(--spacing-8);
  overflow: hidden;
  min-width: 436px;
  height: 48px;
}
@media (max-width: 768px) {
  .search {
    min-width: unset;
  }
  .search .search-button {
    padding: var(--spacing-8);
  }
}

.search .search-button {
  border-radius: unset !important;
  border: 1px solid var(--neutral-main);
  padding: var(--spacing-14) var(--spacing-16);
  background-color: var(--neutral-main);
  text-transform: capitalize;
}

.search .search-clear-button {
  height: 24px;
  width: 24.5px;
  margin-right: var(--spacing-12);
  border-radius: 50% !important;
  background-color: #dedede;
  font-weight: normal;
  padding: 0;
}

.search-clear-button > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button-wrapper {
  display: flex;
  align-items: center;
}

.search button:hover {
  box-shadow: none;
}

.search-is-focus {
  border: 1px solid var(--primary-main);
}

.search .search-button-is-focus {
  border: 1px solid var(--primary-main);
  background-color: var(--primary-main);
}

.search-input {
  caret-color: var(--primary-main);
  height: var(--spacing-48);
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--text-primary);
  flex-grow: 1;
}

.search-input::placeholder {
  color: var(--text-placeholder);
}

.search-input .input-fieldset {
  border: none;
}

.search-icon {
  padding-left: var(--spacing-16);
  color: var(--text-primary);
}

.skeleton {
  background: #f1f5f9;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.skeleton::after {
  animation: wave 1.5s linear 0.2s infinite;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  content: '';
  position: absolute;
  transform: translateX(-100%);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.skeleton-is-variant-text {
  height: 24px;
  border-radius: 16px;
}

.skeleton-is-variant-circular {
  border-radius: 50%;
}

.skeleton-is-variant-rectangular {
  height: 24px;
}

.snackbar {
  max-width: 392px;
  min-width: 392px;
  background-color: var(--white);
  border-radius: var(--spacing-8);
  overflow: hidden;
  position: relative;
}

.snackbar-container {
  position: fixed;
  z-index: var(--zindex-snackbar);
  display: flex;
  flex-direction: column-reverse;
  row-gap: var(--spacing-8);
  border-radius: var(--spacing-8);
}

.snackbar > .box {
  background-color: var(--white);
  color: var(--text-primary);
  position: relative;
  border: 1px solid var(--neutral-light);
  padding: var(--spacing-16);
  border-radius: var(--spacing-8);
}

.snackbar > .box .snackbar-close-button {
  cursor: pointer;
  color: var(--text-primary);
}

.snackbar-header .icon-button {
  color: var(--white);
  text-transform: uppercase;
}

.snackbar-header .icon-button:focus,
.snackbar-header .icon-button:hover {
  opacity: 0.8;
  background: transparent;
  color: var(--white);
}

.snackbar a {
  color: var(--primary-main);
}

.snackbar-progress {
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  animation-name: progress;
  animation-timing-function: linear;
}

.snackbar-progress-is-color-success {
  background-color: var(--success-main);
}

.snackbar-progress-is-color-error {
  background-color: var(--error-main);
}

.snackbar-progress-is-color-warning {
  background-color: var(--warning-main);
}

.snackbar-container-is-position-top {
  top: var(--spacing-32);
  left: 50%;
  transform: translateX(-50%);
}

.snackbar-container-is-position-bottom {
  bottom: var(--spacing-32);
  left: 50%;
  transform: translateX(-50%);
}

.snackbar-container-is-position-bottom-right {
  right: var(--spacing-32);
  bottom: var(--spacing-32);
}

.snackbar-container-is-position-top-right {
  right: var(--spacing-32);
  top: var(--spacing-32);
}

.snackbar-container-is-position-top-left {
  left: var(--spacing-32);
  top: var(--spacing-32);
}

.snackbar-container-is-position-bottom-left {
  left: var(--spacing-32);
  bottom: var(--spacing-32);
}

.snackbar-is-color-success > .box {
  background-color: rgba(33, 159, 148, 0.1);
  border: none;
}

.snackbar-is-color-success .snackbar-content {
  color: var(--success-main);
}

.snackbar-is-color-error > .box {
  background-color: rgba(240, 90, 100, 0.2);
  border: none;
}

.snackbar-is-color-error .snackbar-content {
  color: var(--error-main);
}

.snackbar-is-color-warning > .box {
  background-color: var(--warning-light);
  border: none;
}

@media screen and (max-width: 768px) {
  .snackbar {
    max-width: calc(100% - 64px);
    min-width: 350px;
  }
}

@keyframes progress {
  0% {
    width: 0;
    border-bottom-right-radius: 0;
  }

  99% {
    border-bottom-right-radius: 0;
  }

  100% {
    width: 102%;
    border-bottom-right-radius: 5px;
  }
}

.statistic-container {
  display: flex;
  align-items: center;
}

.statistic-label {
  font-weight: var(--weight-medium);
  margin-left: 2px;
  margin-right: 2px;
  line-height: 16px;
}

.statistic-positive {
  color: var(--success-main);
}

.statistic-negative {
  color: var(--error-main);
}

.info-box {
  display: flex;
  align-items: flex-start;
  width: 100%;
  background-color: var(--neutral-light);
  padding: var(--spacing-12);
  border-radius: var(--spacing-20);
}

.info-box__title {
  display: flex;
  align-items: center;
}

.info-box__content {
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-16);
  margin-top: var(--spacing-4);
}
.info-box__icon {
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--spacing-48);
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-card-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-label {
  box-sizing: border-box;
  display: inline-block;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-6) var(--spacing-32);
  border-radius: var(--spacing-4);
  background-color: var(--info-main);
  color: var(--white);
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: var(--weight-semi-bold);
  text-align: center;
  min-width: 101px;
}

.status-label-is-full-width {
  width: 100%;
}

.stepper {
  display: flex;
  column-gap: var(--spacing-8);
}

.stepper-bar {
  flex-grow: 1;
  height: 6px;
  background: var(--neutral-main);
  color: white;
  border-radius: var(--spacing-4);
}

.stepper-bar-index {
  display: none;
}

.stepper-bar-label {
  display: none;
}

.stepper-bar-is-active {
  background-color: var(--success-main);
}

.stepper-bar-is-completed {
  background-color: var(--success-main);
}

.tabs {
  display: flex;
  align-items: center;
}

.tab {
  background-color: transparent;
  border: none;
  font-weight: var(--weight-regular);
  cursor: pointer;
  height: stretch;
}

.tab-is-disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

.tab-is-active {
  cursor: default;
}

/* HORIZONTAL */
.tabs-is-orientation-horizontal {
  flex-direction: row;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-is-orientation-horizontal .tab {
  padding: var(--spacing-12);
}

.tabs-is-orientation-horizontal .tab-is-active .typography {
  position: relative;
}

.tabs-is-orientation-horizontal .tab-is-active .typography::before {
  content: '';
  position: absolute;
  width: 100%;
  bottom: calc(-1 * var(--spacing-10));
  height: 2px;
}

@media screen and (max-width: 768px) {
  .tabs-is-orientation-horizontal {
    max-width: 768px;
  }

  .tab-panel {
    padding-top: var(--spacing-12) !important;

    .module-layout .page-title.module-layout-header-title {
      display: block !important;
    }
  }
}

@media screen and (max-width: 430px) {
  .tabs-is-orientation-horizontal {
    max-width: calc(430px - var(--spacing-24));
  }
}

@media screen and (max-width: 414px) {
  .tabs-is-orientation-horizontal {
    max-width: calc(414px - var(--spacing-24));
  }
}

@media screen and (max-width: 400px) {
  .tabs-is-orientation-horizontal {
    max-width: calc(400px - var(--spacing-24));
  }
}

@media screen and (max-width: 390px) {
  .tabs-is-orientation-horizontal {
    max-width: calc(390px - var(--spacing-24));
  }
}

@media screen and (max-width: 375px) {
  .tabs-is-orientation-horizontal {
    max-width: 375px;
  }
}

.tabs-is-orientation-horizontal::-webkit-scrollbar {
  display: none;
}

.tabs-form-detail .tab {
  top: 0px !important;
}

.tab-panel .module-layout .page-title.module-layout-header-title {
  display: none;
}

/* VERTICAL */
.tabs-is-orientation-vertical {
  flex-direction: column;
}

.tabs-is-orientation-vertical .tab {
  width: 100%;
  text-align: left;
  padding-left: var(--spacing-12);
  min-height: var(--spacing-40);
  position: relative;
}

.tabs-is-orientation-vertical .tab-is-active::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 70%;
  top: 17%;
  border-radius: 6px;
  right: -7px;
}

.tags {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  color: var(--white);
  margin: 0;
  border: none;
  font: inherit;
  text-align: inherit;
  appearance: none;
}

.tags-is-color-default {
  background-color: var(--neutral-dark);
}

.tags-is-color-primary {
  background-color: var(--primary-main);
}

.tags-is-color-success {
  background-color: var(--success-main);
}

.tags-is-color-error {
  background-color: var(--error-main);
}

.tags-is-color-onDemand {
  background-color: var(--primary-light);
}

.tags-is-color-upcoming {
  background-color: var(--secondary-main);
}

.tags-is-color-oneHourUpcoming {
  background-color: var(--error-light);
}

.tags-is-size-small {
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--spacing-14);
}

.tags-is-size-regular {
  padding: var(--spacing-10) var(--spacing-20);
  border-radius: var(--spacing-20);
}

.tags-trash-icon {
  background-color: unset;
  padding: 0;
  margin-left: var(--spacing-10);
}

.tags-trash-icon:hover {
  background-color: unset;
}

.live-icon svg {
  height: 9px;
  position: relative;
  bottom: 4px;
  right: 3px;
}

.textarea {
  border-radius: var(--spacing-8);
  position: relative;
  width: fit-content;
}

.textarea-label {
  color: var(--text-placeholder);
  align-items: center;
  display: flex;
  font-weight: 400;
  font-size: 14px;
  max-width: unset !important;
  padding: 0;
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(14px, 16px) scale(1);
  transition: all 0.2s linear 0ms;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 32px);
  min-height: 16px;
  text-align: start;
}

.textarea-fieldset-container {
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  border-radius: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-14);
}

.textarea textarea {
  min-height: 48px;
  border: 0;
  background: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  color: var(--text-primary);
  caret-color: var(--primary-main);
  resize: none;
}

.textarea-fieldset {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  top: -5px;
  left: 0;
  margin: 0;
  padding: 0 8px;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  min-width: 0%;
  border: 1px solid var(--neutral-main);
}

.textarea-fieldset-legend {
  display: inline-block;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  visibility: hidden;
  max-width: 0.01px;
  transition: max-width 50ms linear 0ms;
  white-space: nowrap;
}

.textarea-fieldset-legend > span {
  padding: 0 var(--spacing-4);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

.textarea-fieldset-legend-hide > span {
  padding: 0;
}

.textarea-is-focus,
.textarea-is-hasValue {
  outline: 0;
}

.textarea textarea:-webkit-autofill {
  -webkit-background-clip: text;
}

.textarea-is-full-width {
  width: 100%;
}

.textarea-is-focus > .textarea-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - 32px);
  color: var(--primary-main);
  font-weight: 600;
}

.textarea-is-hasValue > .textarea-label {
  transform: translate(14px, -8px) scale(0.75);
  width: calc(130% - 32px);
  font-weight: 600;
}

.textarea textarea::placeholder {
  color: var(--text-placeholder);
}

.textarea-is-disabled textarea {
  color: var(--text-disabled);
}

.textarea-is-disabled > label {
  color: var(--text-disabled);
}

.textarea-is-disabled .textarea-fieldset-container {
  background-color: var(--neutral-light);
}

.textarea-is-error textarea {
  caret-color: var(--error-main);
}

.textarea-is-error.textarea-is-focus .textarea-label {
  color: var(--error-main);
}

.textarea-is-error.textarea-is-hasValue > .textarea-label {
  color: var(--error-main);
}

.textarea-is-focus .textarea-fieldset {
  border-color: var(--primary-main);
}

.textarea-is-error .textarea-fieldset {
  border: 1px solid var(--error-main);
}

.textarea-is-focus .textarea-fieldset-legend {
  max-width: 100%;
  transition: max-width 100ms linear 50ms;
}

.textarea-is-hasValue .textarea-fieldset-legend {
  max-width: 100%;
}

.timeline {
  padding-left: 48px;
}

.timeline-item {
  height: 48px;
  border-bottom: solid 1px #ebebeb;
  position: relative;
  display: flex;
  align-items: center;
}
.timeline-item::before {
  position: absolute;
  content: '';
  background-color: #e0e0e0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: -32px;
  top: 16px;
}
.timeline-item::after {
  position: absolute;
  content: '';
  background-color: #e0e0e0;
  width: 2px;
  height: 100%;
  left: -25px;
  top: 25px;
}
.timeline-item:last-of-type::after {
  display: none;
}

.tooltip {
  background-color: var(--text-primary);
  border-radius: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-8);
  max-width: 208px;
}
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-header {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--spacing-4);
  color: var(--white);
  font-weight: bold;
}

.tooltip-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  color: var(--white);
}

.tooltip-placement-topRight::after,
.tooltip-placement-topLeft::after,
.tooltip-placement-bottomRight::after,
.tooltip-placement-bottomLeft::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-placement-topRight::after,
.tooltip-placement-topLeft::after {
  bottom: -7px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--text-primary);
}

.tooltip-placement-bottomRight::after,
.tooltip-placement-bottomLeft::after {
  top: -7px;
  border-bottom: 7px solid var(--text-primary);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.tooltip-placement-topRight::after,
.tooltip-placement-bottomRight::after {
  left: 15%;
}

.tooltip-placement-topLeft::after,
.tooltip-placement-bottomLeft::after {
  right: 15%;
}

.transactions__calculator {
  margin-bottom: var(--spacing-20);
  padding: var(--spacing-16);
  border: 1px solid var(--neutral-main);
  border-radius: var(--spacing-16);
}

.transactions__calculator-info {
  min-width: 0;
}

.transactions__calculator-primary,
.transactions__calculator-secondary {
  width: fit-content;
  max-width: 100%;
}

.transactions__calculator-action {
  flex-shrink: 0;
}

.transactions__calculator-update-btn {
  text-decoration: none;
}

.tree-view {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-8);
}

.tree-item {
  font-size: 0.875rem;
}

.tree-item-wrapper {
  width: auto;
  margin-left: var(--spacing-16);
}

.tree-item-is-container {
  flex-direction: row;
  border: 1px solid var(--neutral-main);
  padding: var(--spacing-12);
  border-radius: var(--spacing-8);
  margin-left: 21px;
  width: calc(100% - 21px);
}

.tree-item-is-container .tree-item-icon-area {
  display: none;
}

.tree-item-is-container span {
  font-size: 0.8125rem;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
}

.card {
  border-radius: 16px;
  padding: var(--spacing-20);
  background-color: var(--white);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.image {
  cursor: pointer;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background-color: var(--white);
}

.image:hover {
  animation: pulse 0.8s ease-in-out infinite;
}

.image:active {
  animation: shake 0.3s ease-in-out 1;
}

.preview-card {
  background: var(--neutral-light);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 325px;
  height: 510px;
}

.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.hint {
  border-radius: 40%;
  margin-left: 15px;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.imageContainer {
  width: 100%;
  margin-bottom: 16px;
  background-color: var(--black);
  height: 245px;
  border-radius: 1rem;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.description {
  margin-bottom: 26px;
  line-height: 20px;
  color: var(--text-secondary);
  font-weight: var(--weight-semi-bold);
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.quick-action {
  display: block;
  padding: 1.5rem;
  background-color: var(--white);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.quick-action:hover {
  background-color: var(--primary-main);
}

.quick-action__container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.quick-action__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.quick-action__title {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.quick-action:hover .quick-action__title {
  color: var(--white);
}

.quick-action__icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-light);
  border-radius: 40px;
  transition: background-color 0.3s ease;
}

.quick-action:hover .quick-action__icon-wrapper {
  background-color: var(--white);
}

.quick-action__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
}

.quick-action__text {
  color: var(--secondary-main);
  font-weight: var(--weight-semi-bold);
}

.quick-action:hover .quick-action__text {
  color: var(--white);
}

.quick-action__arrow {
  color: var(--secondary-main);
  font-size: 20px;
  height: 17px;
}

.quick-action:hover .quick-action__arrow {
  color: var(--white);
}

.stat-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.stat-card--success {
  background-color: var(--success-lighten);
}

.stat-card--error {
  background-color: var(--error-secondary);
}

.stat-card--info {
  background-color: var(--table-bg-light);
}

.stat-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-card__icon {
  width: 34px;
  max-width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__icon--success {
  background-color: var(--success-light);
}

.stat-card__icon--error {
  background-color: var(--error-light);
  svg {
    color: var(--error-main) !important;
  }
}

.stat-card__icon--info {
  background-color: var(--table-bg-main);
}

.stat-card__content {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0.7rem;
}

.stat-card__value {
  font-weight: 700;
  line-height: 24px;
}

.tabs-dashboard {
  width: 100%;
  border-bottom: 2px solid var(--primary-light);
}

.tabs-dashboard .tab {
  width: 100%;
  position: relative;
  top: 2px;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: var(--weight-semi-bold);
  color: var(--text-primary);
}

.tabs-dashboard .tab-is-active {
  border-bottom: 2px solid var(--primary-main);
  font-weight: var(--weight-bold) !important;
}
.tabs-is-orientation-horizontal .tab-is-active .typography::before {
  width: unset;
}

.summary-widget {
  background: var(--background-paper);
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  height: 520px;
}

.summary-widget__loading {
  display: flex;
  background: var(--background-paper);
  border-radius: 12px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 470px;
}

.summary-widget__header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-widget__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-widget__content-panel {
  border: 1px solid var(--neutral-light);
  border-radius: 12px;
  padding: 16px;
}

.summary-widget__stat-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  width: 100%;
}

.summary-widget__stat-cards-item:nth-child(1),
.summary-widget__stat-cards-item:nth-child(2) {
  grid-column: span 1;
}

.summary-widget__stat-cards-item:nth-child(3) {
  grid-column: 1 / -1;
}

.chart-card {
  background: var(--background-paper);
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  height: 520px;
}

.chart-card.last-transactions,
.chart-card.distributor-invoices {
  height: auto;
}

.chart-card__loading {
  display: flex;
  background: var(--background-paper);
  border-radius: 12px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
}

@media (max-width: 768px) {
  .chart-card {
    max-height: none;
  }
  .summary-widget__stat-cards {
    grid-template-columns: 1fr;
  }
  .summary-widget__stat-cards-item {
    grid-column: 1 / -1;
  }
  .col-span-4,
  .col-span-6,
  .col-span-12 {
    width: 100% !important;
  }
}