/* GENERATED by bin/figma-codegen from the Figma Components library. Do not edit — run `bin/figma-codegen --write` to regenerate. */

/* GENERATED from the Figma "Avatar" master — do not edit. */

.ui-avatar {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: var(--border-radius-full);
}

.ui-avatar--initials--sm {
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-brand-light);
  width: 24px;
  height: 24px;
}

.ui-avatar--initials--md {
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-brand-light);
  width: 32px;
  height: 32px;
}

.ui-avatar--initials--lg {
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-brand-light);
  width: 40px;
  height: 40px;
}

.ui-avatar--icon--sm {
  color: var(--color-stroke-neutral-default);
  background: var(--color-background-neutral-subtle);
  width: 24px;
  height: 24px;
}

.ui-avatar--icon--md {
  color: var(--color-stroke-neutral-default);
  background: var(--color-background-neutral-subtle);
  width: 32px;
  height: 32px;
}

.ui-avatar--icon--lg {
  color: var(--color-stroke-neutral-default);
  background: var(--color-background-neutral-subtle);
  width: 40px;
  height: 40px;
}

.ui-avatar--image--sm {
  background: var(--color-background-neutral-subtle);
  width: 24px;
  height: 24px;
}

.ui-avatar--image--md {
  background: var(--color-background-neutral-subtle);
  width: 32px;
  height: 32px;
}

.ui-avatar--image--lg {
  background: var(--color-background-neutral-subtle);
  width: 40px;
  height: 40px;
}

.ui-avatar__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-12);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-avatar__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* GENERATED from the Figma "Avatar Menu" master — do not edit. */

.ui-avatar-menu__trigger {
  color: var(--color-stroke-neutral-strong);
  gap: var(--spacing-4);
  transition: color var(--duration-fast) ease;
}

.ui-avatar-menu__trigger {
  flex-shrink: 0;
  width: 52px;
  height: 32px;
}

.ui-avatar-menu__popover-menu {
  position: absolute;
  right: 0px;
  top: 40px;
}

.ui-avatar-menu {
  position: relative;
  display: inline-block;
}

[data-ui-popover-menu-target="menu"][hidden] {
  display: none;
}

[data-ui-popover-menu-target="menu"] {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-block-start: var(--spacing-8, 8px);
  min-width: 100%;
  z-index: 20;
}

.ui-avatar-menu--open .ui-avatar-menu__trigger svg {
  transform: rotate(180deg);
}

.ui-avatar-menu__trigger svg {
  flex-shrink: 0;
}

.ui-avatar-menu--open .ui-avatar-menu__trigger {
  color: var(--color-text-neutral-primary);
  outline: none;
}


/* GENERATED from the Figma "Avatar Upload" master — do not edit. */

.ui-avatar-upload {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: fit-content;
  color: var(--color-stroke-neutral-default);
}

.ui-avatar-upload__surface {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-full);
}

.ui-avatar-upload__photo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ui-avatar-upload__edit-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--color-background-inverse-white);
  border-radius: var(--border-radius-xl);
  gap: var(--spacing-12);
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 1px 3px rgba(16, 24, 40, 0.1);
  position: absolute;
  right: 0px;
  top: 0px;
}

.ui-avatar-upload__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* GENERATED from the Figma "Backoffice / Layout" master — do not edit. */

.backoffice-layout {
  display: grid;
  grid-template-columns: fit-content(100%) minmax(0,1fr);
  grid-template-rows: repeat(2,fit-content(100%));
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-inverse-subtle);
  width: 100%;
  min-height: 100vh;
}

.backoffice-layout__content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  height: 864px;
}

.backoffice-layout__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  align-self: center;
  color: var(--color-text-neutral-primary);
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.backoffice-layout__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
}

.backoffice-layout__center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  color: var(--color-text-neutral-primary);
}

.backoffice-layout__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  color: var(--color-stroke-neutral-strong);
}

.backoffice-layout__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-stroke-neutral-strong);
  gap: var(--spacing-12);
}

.backoffice-layout__sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
  justify-self: start;
}

.backoffice-layout__logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 250px;
  color: var(--color-black);
  gap: var(--spacing-12);
  padding-left: var(--spacing-32);
  padding-right: var(--spacing-32);
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

.backoffice-layout__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}


/* GENERATED from the Figma "Badge" master — do not edit. */

.ui-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  color: var(--color-text-inverse-primary);
  border-radius: var(--border-radius-full);
  gap: var(--spacing-12);
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  width: 24px;
  height: 24px;
}

.ui-badge--active {
  background: var(--color-background-danger-default);
}

.ui-badge--inactive {
  background: var(--color-background-neutral-light);
}

.ui-badge__count {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-12);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-semibold);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Button" master — do not edit. */

.ui-button {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: var(--border-radius-md);
  gap: var(--spacing-4);
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
  position: relative;
}

.ui-button--primary {
  color: var(--color-text-inverse-primary);
  background: var(--color-background-brand-strongest);
  height: 36px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.ui-button--primary:hover {
  background: var(--color-background-brand-default);
}

.ui-button--primary:disabled {
  opacity: 0.4;
}

.ui-button--secondary {
  color: var(--color-text-brand-primary);
  background: var(--color-background-brand-light);
  height: 36px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.ui-button--secondary:hover {
  color: var(--color-text-inverse-primary);
  background: var(--color-background-brand-strongest);
}

.ui-button--secondary:disabled {
  opacity: 0.4;
}

.ui-button--positive {
  color: var(--color-text-positive-secondary);
  background: var(--color-background-positive-subtle);
  height: 36px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.ui-button--positive:hover {
  color: var(--color-text-inverse-primary);
  background: var(--color-background-positive-strongest);
}

.ui-button--positive:disabled {
  color: var(--color-text-positive-primary);
  opacity: 0.4;
}

.ui-button--neutral {
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-light);
  height: 36px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.ui-button--neutral:hover {
  color: var(--color-text-inverse-primary);
  background: var(--color-background-brand-strongest);
}

.ui-button--neutral:disabled {
  opacity: 0.4;
}

.ui-button--danger {
  color: var(--color-text-inverse-primary);
  background: var(--color-background-danger-default);
  height: 36px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.ui-button--danger:hover {
  background: var(--color-background-danger-strong);
}

.ui-button--danger:disabled {
  opacity: 0.4;
}

.ui-button--external {
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  height: 44px;
}

.ui-button--external:hover {
  background: var(--color-background-brand-subtle);
  border-color: var(--color-stroke-brand-subtle);
}

.ui-button--external:disabled {
  opacity: 0.4;
}

.ui-button__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-0);
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}

.ui-button--external .ui-button__label {
  color: var(--color-text-neutral-primary);
}

.ui-button__label-2 {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-button[aria-busy="true"] > :not(.ui-loader) {
  visibility: hidden;
}

.ui-button[aria-busy="true"] .ui-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}


/* GENERATED from the Figma "Callout Card" master — do not edit. */

.ui-callout-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  color: var(--color-text-brand-primary);
  background: var(--color-background-brand-light);
  border-color: var(--color-stroke-brand-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.ui-callout-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 auto;
  align-self: stretch;
}

.ui-callout-card__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex: 1 0 auto;
  align-self: stretch;
  gap: var(--spacing-12);
}

.ui-callout-card__icon {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-stroke-brand-default);
}

.ui-callout-card__primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  padding-top: var(--spacing-2);
}

.ui-callout-card__title {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-callout-card__body {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-callout-card__secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  padding-left: var(--spacing-40);
}

.ui-callout-card__trailing {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Checkbox" master — do not edit. */

.ui-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.ui-checkbox__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ui-checkbox__box {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-sm);
  width: 16px;
  height: 16px;
}

.ui-checkbox__input:indeterminate ~ .ui-checkbox__box {
  color: var(--color-stroke-brand-default);
  background: var(--color-background-brand-subtle);
  border-color: var(--color-stroke-brand-default);
}

.ui-checkbox__input:indeterminate:focus-visible ~ .ui-checkbox__box {
  box-shadow: 0px 0px 0px 4px rgba(244, 235, 255, 1.0);
}

.ui-checkbox__input:indeterminate:disabled ~ .ui-checkbox__box {
  color: var(--color-stroke-neutral-default);
  background: var(--color-background-inverse-light);
  border-color: var(--color-stroke-neutral-subtle);
}

.ui-checkbox__input ~ .ui-checkbox__box {
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-default);
}

.ui-checkbox__input:hover ~ .ui-checkbox__box {
  background: var(--color-background-brand-subtle);
  border-color: var(--color-stroke-brand-default);
}

.ui-checkbox__input:focus-visible ~ .ui-checkbox__box {
  border-color: var(--color-stroke-brand-subtle);
  box-shadow: 0px 0px 0px 4px rgba(244, 235, 255, 1.0);
}

.ui-checkbox__input:disabled ~ .ui-checkbox__box {
  background: var(--color-background-inverse-light);
  border-color: var(--color-stroke-neutral-subtle);
}

.ui-checkbox__input:checked ~ .ui-checkbox__box {
  color: var(--color-stroke-brand-default);
  background: var(--color-background-brand-subtle);
  border-color: var(--color-stroke-brand-default);
}

.ui-checkbox__input:checked:focus-visible ~ .ui-checkbox__box {
  box-shadow: 0px 0px 0px 4px rgba(244, 235, 255, 1.0);
}

.ui-checkbox__input:checked:disabled ~ .ui-checkbox__box {
  color: var(--color-stroke-neutral-default);
  background: var(--color-background-inverse-light);
  border-color: var(--color-stroke-neutral-subtle);
}

.ui-checkbox .ui-checkbox__glyph--indeterminate {
  display: none;
}

.ui-checkbox__input:indeterminate ~ .ui-checkbox__box .ui-checkbox__glyph--indeterminate {
  display: flex;
}

.ui-checkbox .ui-checkbox__glyph--yes {
  display: none;
}

.ui-checkbox__input:checked ~ .ui-checkbox__box .ui-checkbox__glyph--yes {
  display: flex;
}


/* GENERATED from the Figma "Choice Card" master — do not edit. */

.ui-choice-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-neutral-primary);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
}

.ui-choice-card--no--medium {
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.ui-choice-card--no--large {
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

.ui-choice-card--yes--medium {
  background: var(--color-background-brand-light);
  border-color: var(--color-stroke-brand-subtle);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.ui-choice-card--yes--large {
  background: var(--color-background-brand-light);
  border-color: var(--color-stroke-brand-subtle);
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

.ui-choice-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-choice-card__wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-12);
}

.ui-choice-card__content-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
  gap: var(--spacing-12);
}

.ui-choice-card__title {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-choice-card__body {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-neutral-secondary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}


/* GENERATED from the Figma "Currency Chip" master — do not edit. */

.ui-currency-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-inverse-subtle);
  border-radius: var(--border-radius-sm);
  gap: var(--spacing-8);
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}

.ui-currency-chip__currency-iso {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Currency Value Card" master — do not edit. */

.ui-currency-value-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

.ui-currency-value-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: var(--spacing-20);
}

.ui-currency-value-card__currency-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-12);
}

.ui-currency-value-card__currency-name {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-12);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
}

.ui-currency-value-card__amount-info {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-shrink: 0;
  color: var(--color-text-neutral-primary);
  gap: var(--spacing-8);
}

.ui-currency-value-card__amount {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-24);
  font-family: var(--font-family-headline);
  line-height: var(--line-height-32);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-neutral-primary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  height: 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  flex-shrink: 0;
  width: 124px;
}

.ui-currency-value-card__currency-iso {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-neutral-primary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  height: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  flex-shrink: 0;
  width: 70px;
}


/* GENERATED from the Figma "Detail Card" master — do not edit. */

.ui-detail-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.ui-detail-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-detail-card__title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-12);
}

.ui-detail-card__title-2 {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
}

.ui-detail-card__rows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--color-text-neutral-secondary);
  gap: var(--spacing-16);
  padding-top: var(--spacing-12);
}


/* GENERATED from the Figma "Detail Card / Row" master — do not edit. */

.ui-detail-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-neutral-secondary);
  width: 530px;
}

.ui-detail-card-row__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-detail-card-row__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-neutral-primary);
  gap: var(--spacing-12);
}


/* GENERATED from the Figma "Divider" master — do not edit. */

.ui-divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 40px;
}

.ui-divider--subtle--vertical {
  height: 40px;
}

.ui-divider--strong--vertical {
  height: 40px;
}

.ui-divider__divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  background: var(--color-overlay-bright-25);
}

.ui-divider--strong--vertical .ui-divider__divider,
.ui-divider--strong--horizontal .ui-divider__divider {
  background: var(--color-overlay-bright-50);
}

.ui-divider--subtle--horizontal .ui-divider__divider,
.ui-divider--strong--horizontal .ui-divider__divider {
  flex: 1 0 0;
  min-width: 0;
  height: 1px;
}


/* GENERATED from the Figma "Entity Card" master — do not edit. */

.ui-entity-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 250px;
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.ui-entity-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-32);
}

.ui-entity-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-8);
}

.ui-entity-card__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-12);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
}

.ui-entity-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--color-text-neutral-primary);
  gap: var(--spacing-12);
}

.ui-entity-card__primary {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-neutral-primary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-entity-card__secondary {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}


/* GENERATED from the Figma "Featured Icon" master — do not edit. */

.ui-featured-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--color-stroke-neutral-default);
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-full);
}

.ui-featured-icon--sm {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}

.ui-featured-icon--lg {
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}


/* GENERATED from the Figma "File Upload" master — do not edit. */

.ui-file-upload {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--color-text-brand-primary);
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  gap: var(--spacing-12);
  padding-left: var(--spacing-20);
  padding-right: var(--spacing-20);
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
  width: 100%;
}

.ui-file-upload__icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 53px;
  color: var(--color-stroke-brand-default);
  background: var(--color-background-brand-light);
  border-radius: var(--border-radius-full);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.ui-file-upload__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
}

.ui-file-upload__action {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  height: 16px;
  gap: var(--spacing-4);
}

.ui-file-upload__text-2 {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-file-upload__accepted-formats {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  height: 16px;
  gap: var(--spacing-4);
}

.ui-file-upload__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-file-upload__formats {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
}


/* GENERATED from the Figma "Google Auth Button" master — do not edit. */

.ui-google-auth-button {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: fit-content;
  color: var(--color-text-neutral-primary);
}


/* GENERATED from the Figma "Icon Button" master — do not edit. */

.ui-icon-button {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
  height: 36px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.ui-icon-button--primary {
  color: var(--color-stroke-neutral-white);
  background: var(--color-background-brand-strongest);
}

.ui-icon-button--primary:hover {
  background: var(--color-background-brand-default);
}

.ui-icon-button--primary:disabled {
  opacity: 0.4;
}

.ui-icon-button--positive {
  color: var(--color-stroke-positive-default);
  background: var(--color-background-positive-subtle);
}

.ui-icon-button--positive:hover {
  color: var(--color-stroke-neutral-white);
  background: var(--color-background-positive-strongest);
}

.ui-icon-button--positive:disabled {
  opacity: 0.4;
}

.ui-icon-button--destructive {
  color: var(--color-stroke-neutral-white);
  background: var(--color-background-danger-default);
}

.ui-icon-button--destructive:hover {
  background: var(--color-background-danger-strong);
}

.ui-icon-button--destructive:disabled {
  opacity: 0.4;
}


/* GENERATED from the Figma "Input" master — do not edit. */

.ui-input {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  border-radius: var(--border-radius-md);
  gap: var(--spacing-8);
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
  height: 40px;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.ui-input {
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
}

.ui-input[aria-disabled="true"] {
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-inverse-light);
}

.ui-input:focus-within {
  border-color: var(--color-stroke-brand-subtle);
  box-shadow: 0px 0px 0px 2px rgba(244, 235, 255, 1.0);
  outline: none;
}

.ui-input:has([aria-invalid="true"]) {
  color: var(--color-text-danger-secondary);
  border-color: var(--color-stroke-danger-default);
}

.ui-input:has([aria-invalid="true"]):focus-within {
  box-shadow: 0px 0px 0px 2px rgba(255, 240, 239, 1.0);
  outline: none;
}

.ui-input__leading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 20px;
}

.ui-input__field {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: 1 0 0;
  min-width: 0;
  height: 20px;
}

.ui-input__value {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
}

.ui-input__placeholder {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-neutral-tertiary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
}

.ui-input__trailing {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 20px;
}

.ui-input__field {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font: inherit;
  color: inherit;
}

.ui-input__field {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
  letter-spacing: var(--letter-spacing-0);
  font-family: var(--font-family-paragraph);
}

.ui-input__field::placeholder {
  color: var(--color-text-neutral-tertiary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
  letter-spacing: var(--letter-spacing-0);
  font-family: var(--font-family-paragraph);
}


/* GENERATED from the Figma "Input Field" master — do not edit. */

.ui-input-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-text-neutral-primary);
  gap: var(--spacing-4);
  width: 100%;
}

.ui-input-field__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
}

.ui-input-field__required {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-danger-secondary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-input-field__control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-input-field__hint {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-12);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-neutral-secondary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-input-field__error {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-12);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-danger-secondary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}


/* GENERATED from the Figma "Keycap" master — do not edit. */

.ui-keycap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  color: var(--color-stroke-neutral-default);
  background: var(--color-background-neutral-subtle);
  border-radius: var(--border-radius-sm);
  width: 20px;
  height: 20px;
}

.ui-keycap__icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.ui-keycap--xs .ui-keycap__icon {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}


/* GENERATED from the Figma "Link" master — do not edit. */

.ui-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 15px;
  gap: var(--spacing-4);
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
  width: 104.67px;
  height: 15px;
}

.ui-link--primary {
  color: var(--color-text-brand-primary);
}

.ui-link--primary:hover {
  color: var(--color-text-brand-secondary);
}

.ui-link--primary[aria-disabled="true"] {
  opacity: 0.4;
}

.ui-link--secondary {
  color: var(--color-text-neutral-secondary);
}

.ui-link--secondary:hover {
  color: var(--color-text-neutral-primary);
}

.ui-link--secondary[aria-disabled="true"] {
  opacity: 0.4;
}

.ui-link--danger {
  color: var(--color-text-danger-secondary);
}

.ui-link--danger:hover {
  color: var(--color-text-danger-primary);
}

.ui-link--danger[aria-disabled="true"] {
  opacity: 0.4;
}

.ui-link__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  text-align: center;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Link Button" master — do not edit. */

.ui-link-button {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: var(--border-radius-md);
  gap: var(--spacing-4);
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
  height: 36px;
}

.ui-link-button--primary {
  color: var(--color-text-brand-primary);
}

.ui-link-button--primary:hover {
  color: var(--color-text-brand-secondary);
}

.ui-link-button--primary[aria-disabled="true"] {
  opacity: 0.4;
}

.ui-link-button--danger {
  color: var(--color-text-danger-secondary);
}

.ui-link-button--danger:hover {
  color: var(--color-text-danger-primary);
}

.ui-link-button--danger[aria-disabled="true"] {
  color: var(--color-text-danger-tertiary);
  opacity: 0.4;
}

.ui-link-button--secondary {
  color: var(--color-text-neutral-primary);
}

.ui-link-button--secondary:hover {
  color: var(--color-text-brand-secondary);
}

.ui-link-button--secondary[aria-disabled="true"] {
  opacity: 0.4;
}

.ui-link-button__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-0);
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}

.ui-link-button__label-2 {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Loader" master — do not edit. */

.ui-loader {
  min-height: 16px;
  color: var(--color-stroke-neutral-white);
}

.ui-loader--lg {
  width: 48px;
  height: 48px;
}

.ui-loader--xl {
  width: 72px;
  height: 72px;
}

.ui-loader--md {
  width: 32px;
  height: 32px;
}

.ui-loader--sm {
  width: 24px;
  height: 24px;
}

.ui-loader--xs {
  width: 16px;
  height: 16px;
}


/* GENERATED from the Figma "Logo" master — do not edit. */

.ui-logo {
  display: inline-flex;
}


/* GENERATED from the Figma "Menu" master — do not edit. */

.ui-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-text-neutral-secondary);
  gap: var(--spacing-16);
  width: 234px;
}

.ui-menu__title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
}

.ui-menu__title-2 {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-12);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
}

.ui-menu__items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-12);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
}


/* GENERATED from the Figma "Menu / Item" master — do not edit. */

.ui-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: 40px;
  border-radius: var(--border-radius-sm);
  gap: var(--spacing-12);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
  height: 40px;
}

.ui-menu-item--no {
  color: var(--color-text-neutral-secondary);
}

.ui-menu-item--no:hover {
  background: var(--color-background-brand-subtle);
}

.ui-menu-item--yes {
  color: var(--color-text-brand-primary);
  background: var(--color-background-brand-subtle);
}

.ui-menu-item__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Notification Icon" master — do not edit. */

.ui-notification-icon {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  color: var(--color-stroke-neutral-white);
  width: 24px;
}

.ui-notification-icon--yes {
  height: 24px;
}

.ui-notification-icon__dot {
  background: var(--color-background-danger-default);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  top: 0px;
}


/* GENERATED from the Figma "OTP Input" master — do not edit. */

.ui-otp-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  color: var(--color-text-neutral-primary);
  gap: var(--spacing-4);
}

.ui-otp-input input {
  text-align: center;
  appearance: none;
}


/* GENERATED from the Figma "OTP Input / Field" master — do not edit. */

.ui-otp-input-field {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  gap: var(--spacing-8);
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
  width: 48px;
  height: 48px;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.ui-otp-input-field {
  border-color: var(--color-stroke-neutral-subtle);
}

.ui-otp-input-field:focus-visible {
  border-color: var(--color-stroke-brand-subtle);
  box-shadow: 0px 0px 0px 2px rgba(244, 235, 255, 1.0);
  outline: none;
}

.ui-otp-input-field {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-30);
  letter-spacing: var(--letter-spacing-0);
  font-family: var(--font-family-paragraph);
}


/* GENERATED from the Figma "Overlay / Dialog" master — do not edit. */

.ui-overlay-dialog[open] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  gap: var(--spacing-24);
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  width: 536px;
}

.ui-overlay-dialog__title {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-24);
  font-family: var(--font-family-headline);
  line-height: var(--line-height-32);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-overlay-dialog__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--color-text-neutral-secondary);
}

.ui-overlay-dialog__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-12);
}

.ui-overlay-dialog::backdrop {
  background: var(--color-overlay-bright-25);
  backdrop-filter: blur(10px);
}

.ui-overlay-dialog--no-backdrop::backdrop {
  background: transparent;
  backdrop-filter: none;
}


/* GENERATED from the Figma "Overlay / Sheet" master — do not edit. */

.ui-overlay-sheet[open] {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 800px;
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  border-radius: var(--border-radius-md);
  width: 600px;
  height: 800px;
}

.ui-overlay-sheet__top-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--color-stroke-neutral-default);
  gap: var(--spacing-12);
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.ui-overlay-sheet__close-button {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-shrink: 0;
  color: var(--color-stroke-neutral-default);
  background: var(--color-background-inverse-white);
  border-radius: var(--border-radius-full);
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}

.ui-overlay-sheet__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 auto;
  align-self: stretch;
  padding-left: var(--spacing-32);
  padding-right: var(--spacing-32);
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-24);
}

.ui-overlay-sheet__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-12);
  padding-left: var(--spacing-32);
  padding-right: var(--spacing-32);
  padding-top: var(--spacing-32);
  padding-bottom: var(--spacing-32);
}

.ui-overlay-sheet::backdrop {
  background: var(--color-overlay-bright-25);
  backdrop-filter: blur(10px);
}

.ui-overlay-sheet--no-backdrop::backdrop {
  background: transparent;
  backdrop-filter: none;
}

.ui-overlay-sheet[open] {
  margin: 0 0 0 auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}


/* GENERATED from the Figma "Payroll / Layout" master — do not edit. */

.payroll-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-text-inverse-primary);
  background: var(--color-background-inverse-subtle);
  width: 100%;
  min-height: 100vh;
}

.payroll-layout__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  align-self: stretch;
  height: 72px;
  background: var(--color-background-brand-strongest);
  padding-left: var(--spacing-40);
  padding-right: var(--spacing-40);
}

.payroll-layout__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 0 0;
  min-width: 0;
  gap: var(--spacing-32);
}

.payroll-layout__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 0;
  min-width: 0;
  gap: var(--spacing-24);
}

.payroll-layout__balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: var(--spacing-2);
}

.payroll-layout__title {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

.payroll-layout__balance-2 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

.payroll-layout__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  color: var(--color-stroke-neutral-white);
  gap: var(--spacing-12);
}

.payroll-layout__divider-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--color-background-brand-strongest);
}

.payroll-layout__page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 auto;
  align-self: stretch;
  color: var(--color-text-neutral-secondary);
}

.payroll-layout__page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-brand-strongest);
  padding-left: var(--spacing-40);
  padding-right: var(--spacing-40);
  padding-top: var(--spacing-40);
}

.payroll-layout__identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-text-neutral-secondary);
  gap: var(--spacing-24);
}

.payroll-layout__company {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: var(--spacing-4);
}

.payroll-layout__company-name {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.payroll-layout__company-legal-name {
  color: var(--color-text-inverse-secondary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.payroll-layout__content {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-inverse-white);
  border-radius: var(--border-radius-xl);
  padding-left: var(--spacing-40);
  padding-right: var(--spacing-40);
  padding-top: var(--spacing-40);
  padding-bottom: var(--spacing-40);
  position: absolute;
  left: 40px;
  right: 40px;
  top: 125px;
  bottom: 32px;
}


/* GENERATED from the Figma "Pill" master — do not edit. */

.ui-pill {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  border-radius: var(--border-radius-sm);
  gap: var(--spacing-0);
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  height: 24px;
}

.ui-pill--positive {
  color: var(--color-text-positive-tertiary);
  background: var(--color-background-positive-subtle);
}

.ui-pill--negative {
  color: var(--color-text-danger-secondary);
  background: var(--color-background-danger-subtle);
}

.ui-pill--warning {
  color: var(--color-text-warning-secondary);
  background: var(--color-background-warning-subtle);
}

.ui-pill--neutral {
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-inverse-light);
}

.ui-pill__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--spacing-12);
}

.ui-pill--warning .ui-pill__label {
  color: var(--color-text-warning-secondary);
}

.ui-pill--negative .ui-pill__label {
  color: var(--color-text-danger-secondary);
}

.ui-pill--neutral .ui-pill__label {
  color: var(--color-text-neutral-secondary);
}

.ui-pill__label-2 {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-12);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Popover Menu" master — do not edit. */

.ui-popover-menu {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.ui-popover-menu__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: var(--spacing-4);
}


/* GENERATED from the Figma "Popover Menu / Item" master — do not edit. */

.ui-popover-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: 32px;
}

.ui-popover-menu-item--no {
  color: var(--color-text-neutral-primary);
  border-radius: var(--border-radius-sm);
  gap: var(--spacing-12);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  height: 32px;
}

.ui-popover-menu-item--no:hover {
  background: var(--color-background-brand-subtle);
}

.ui-popover-menu-item--yes {
  color: var(--color-text-neutral-primary);
  background: var(--color-background-brand-light);
  border-radius: var(--border-radius-sm);
  gap: var(--spacing-12);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  height: 32px;
}

.ui-popover-menu-item--yes:hover {
  background: var(--color-background-brand-subtle);
}

.ui-popover-menu-item__label-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.ui-popover-menu-item__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Progress" master — do not edit. */

.ui-progress {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  color: var(--color-text-inverse-primary);
  background: var(--color-background-brand-default);
  border-color: var(--color-stroke-brand-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  gap: var(--spacing-12);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.ui-progress__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  width: 112px;
}

.ui-progress__percentage {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-progress__text {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-progress__track {
  overflow: hidden;
  flex-shrink: 0;
  width: 60px;
  height: 4px;
  background: var(--color-overlay-bright-25);
  border-radius: var(--border-radius-full);
}

.ui-progress__fill {
  background: var(--color-text-inverse-primary);
  border-radius: var(--border-radius-full);
  height: 4px;
}


/* GENERATED from the Figma "Radio" master — do not edit. */

.ui-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.ui-radio__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ui-radio__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  border-style: solid;
  border-radius: var(--border-radius-full);
  width: 16px;
  height: 16px;
}

.ui-radio__input ~ .ui-radio__box {
  border-color: var(--color-stroke-neutral-subtle);
  border-width: var(--border-width-1);
}

.ui-radio__input:hover ~ .ui-radio__box {
  border-color: var(--color-stroke-neutral-strong);
}

.ui-radio__input:focus-visible ~ .ui-radio__box {
  border-color: var(--color-stroke-brand-strong);
  border-width: var(--border-width-2);
}

.ui-radio__input:disabled ~ .ui-radio__box {
  border-color: var(--color-disabled-border);
}

.ui-radio__input:checked ~ .ui-radio__box {
  border-color: var(--color-stroke-brand-default);
  border-width: var(--border-width-1);
}

.ui-radio__input:checked:hover ~ .ui-radio__box {
  border-color: var(--color-stroke-brand-strong);
  border-width: var(--border-width-2);
}

.ui-radio__input:checked:focus-visible ~ .ui-radio__box {
  border-color: var(--color-stroke-brand-strong);
  border-width: var(--border-width-2);
}

.ui-radio__input:checked:disabled ~ .ui-radio__box {
  border-color: var(--color-disabled-border);
}

.ui-radio__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--color-background-brand-default);
  border-radius: var(--border-radius-full);
}

.ui-radio .ui-radio__dot {
  display: none;
}

.ui-radio__input:checked ~ .ui-radio__box .ui-radio__dot {
  display: block;
}


/* GENERATED from the Figma "Search Input" master — do not edit. */

.ui-search-input {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: fit-content;
  color: var(--color-text-neutral-primary);
}

.ui-search-input__shortcut {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-stroke-neutral-default);
  gap: var(--spacing-4);
}


/* GENERATED from the Figma "Section Heading" master — do not edit. */

.ui-section-heading {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: fit-content;
  color: var(--color-text-neutral-primary);
}

.ui-section-heading__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-24);
  font-family: var(--font-family-headline);
  line-height: var(--line-height-32);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Select" master — do not edit. */

.ui-select__field {
  color: var(--color-text-neutral-tertiary);
  gap: var(--spacing-8);
}

.ui-select__field {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  height: 40px;
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.ui-select--compact .ui-select__field {
  height: 24px;
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.ui-select__field:disabled {
  background: var(--color-background-inverse-light);
}

.ui-select__field:focus-visible {
  border-color: var(--color-stroke-brand-subtle);
  box-shadow: 0px 0px 0px 2px rgba(244, 235, 255, 1.0);
  outline: none;
}

.ui-select--open .ui-select__field {
  border-color: var(--color-stroke-brand-subtle);
  box-shadow: 0px 0px 0px 2px rgba(244, 235, 255, 1.0);
  outline: none;
}

.ui-select__placeholder {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
}

.ui-select__value {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-neutral-primary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex: 1 0 0;
  min-width: 0;
}

.ui-select__dropdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  color: var(--color-text-neutral-primary);
}

.ui-select {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

[data-ui-select-target="menu"][hidden] {
  display: none;
}

[data-ui-select-target="menu"] {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-block-start: var(--spacing-8, 8px);
  min-width: 100%;
  z-index: 20;
}

.ui-select--open .ui-select__field svg {
  transform: rotate(180deg);
}

.ui-select__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  text-box-trim: none;
}

.ui-select__field svg {
  flex-shrink: 0;
}

.ui-select__value:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-neutral-tertiary);
}


/* GENERATED from the Figma "Select / Dropdown" master — do not edit. */

.ui-select-dropdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.05), 0px 12px 16px -4px rgba(16, 24, 40, 0.1);
}

.ui-select-dropdown__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-2);
}


/* GENERATED from the Figma "Select / Option" master — do not edit. */

.ui-select-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: 32px;
}

.ui-select-option--no {
  color: var(--color-text-neutral-primary);
  border-radius: var(--border-radius-sm);
  gap: var(--spacing-12);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  height: 32px;
}

.ui-select-option--no:hover {
  background: var(--color-background-brand-subtle);
}

.ui-select-option--yes {
  color: var(--color-text-brand-primary);
  background: var(--color-background-brand-light);
  border-radius: var(--border-radius-sm);
  gap: var(--spacing-12);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  height: 32px;
}

.ui-select-option__label-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.ui-select-option--yes .ui-select-option__label-wrapper {
  color: var(--color-text-brand-primary);
}

.ui-select-option__label {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "TabBar" master — do not edit. */

.ui-tab-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  color: var(--color-text-brand-secondary);
}

.ui-tab-bar__tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}


/* GENERATED from the Figma "TabBar / Tab" master — do not edit. */

.ui-tab-bar-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: var(--spacing-4);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.ui-tab-bar-tab--yes {
  color: var(--color-text-brand-secondary);
  border-bottom-color: var(--color-stroke-brand-default);
  border-bottom-style: solid;
  border-bottom-width: var(--border-width-1);
}

.ui-tab-bar-tab--yes:hover {
  background: var(--color-background-brand-subtle);
}

.ui-tab-bar-tab--yes[aria-disabled="true"] {
  color: var(--color-text-neutral-tertiary);
  border-bottom-color: var(--color-stroke-neutral-subtle);
}

.ui-tab-bar-tab--no {
  color: var(--color-text-neutral-tertiary);
}

.ui-tab-bar-tab--no:hover {
  color: var(--color-text-brand-secondary);
  background: var(--color-background-brand-subtle);
  border-radius: var(--border-radius-sm);
}

.ui-tab-bar-tab--no[aria-disabled="true"] {
  opacity: 0.4;
}

.ui-tab-bar-tab__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  height: 24px;
  gap: var(--spacing-4);
}

.ui-tab-bar-tab:hover .ui-tab-bar-tab__content {
  color: var(--color-text-brand-secondary);
}

.ui-tab-bar-tab__label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-shrink: 0;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.ui-tab-bar-tab:hover .ui-tab-bar-tab__label {
  color: var(--color-text-brand-secondary);
}

.ui-tab-bar-tab__label-2 {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Table" master — do not edit. */

.ui-table {
  background: var(--color-background-inverse-white);
  border: var(--border-width-1) solid var(--color-stroke-neutral-subtle);
  border-radius: var(--border-radius-md);
  border-collapse: collapse;
  width: 100%;
}

.ui-table__cell {
  vertical-align: middle;
  padding: var(--spacing-8);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-paragraph);
  color: var(--color-text-neutral-primary);
  text-align: start;
}

.ui-table__cell--head {
  background: var(--color-background-inverse-light);
  font-weight: var(--font-weight-medium);
}

.ui-table thead th {
  border-bottom: var(--border-width-1) solid var(--color-stroke-neutral-subtle);
}

.ui-table__cell:first-child {
  padding-inline-start: var(--spacing-24);
}

.ui-table__cell:last-child {
  padding-inline-end: var(--spacing-24);
}

.ui-table__cell--center {
  text-align: center;
}

.ui-table__cell--end {
  text-align: end;
}

.ui-table--striped tbody tr:nth-child(even) {
  background: var(--color-background-inverse-subtle);
}


/* GENERATED from the Figma "Table / Pagination / Number" master — do not edit. */

.ui-table-pagination-number {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--border-radius-full);
  width: 40px;
  height: 40px;
}

.ui-table-pagination-number--default {
  color: var(--color-text-neutral-secondary);
}

.ui-table-pagination-number--hover {
  color: var(--color-text-inverse-primary);
  background: var(--color-background-brand-default);
}

.ui-table-pagination-number--selected {
  color: var(--color-text-inverse-primary);
  background: var(--color-background-brand-strongest);
}

.ui-table-pagination-number--ellipsis {
  color: var(--color-text-neutral-secondary);
}

.ui-table-pagination-number__number {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  text-align: center;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Text Area" master — do not edit. */

.ui-text-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 96px;
  border-radius: var(--border-radius-md);
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
  height: 96px;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.ui-text-area {
  color: var(--color-text-neutral-primary);
  background: var(--color-background-inverse-white);
  border-color: var(--color-stroke-neutral-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
}

.ui-text-area[aria-disabled="true"] {
  color: var(--color-text-neutral-secondary);
  background: var(--color-background-inverse-light);
}

.ui-text-area:focus-visible {
  border-color: var(--color-stroke-brand-subtle);
  box-shadow: 0px 0px 0px 2px rgba(244, 235, 255, 1.0);
  outline: none;
}

.ui-text-area__value {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-text-area__placeholder {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-neutral-tertiary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
  flex-shrink: 0;
  align-self: stretch;
}

.ui-text-area {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
  letter-spacing: var(--letter-spacing-0);
  font-family: var(--font-family-paragraph);
}

.ui-text-area::placeholder {
  color: var(--color-text-neutral-tertiary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
  letter-spacing: var(--letter-spacing-0);
  font-family: var(--font-family-paragraph);
}


/* GENERATED from the Figma "Toast" master — do not edit. */

.ui-toast {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  color: var(--color-text-inverse-primary);
  background: var(--color-background-brand-default);
  border-color: var(--color-stroke-brand-subtle);
  border-style: solid;
  border-width: var(--border-width-1);
  border-radius: var(--border-radius-md);
  gap: var(--spacing-12);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.ui-toast__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.ui-toast__title {
  letter-spacing: var(--letter-spacing-0);
  font-size: var(--font-size-14);
  font-family: var(--font-family-paragraph);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-regular);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  flex-shrink: 0;
}


/* GENERATED from the Figma "Toggle" master — do not edit. */

.ui-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.ui-toggle__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ui-toggle__box {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 20px;
  border-radius: var(--border-radius-full);
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.ui-toggle--sm .ui-toggle__input ~ .ui-toggle__box {
  background: var(--color-background-neutral-subtle);
  width: 36px;
  height: 20px;
}

.ui-toggle--sm .ui-toggle__input:disabled ~ .ui-toggle__box {
  background: var(--color-disabled-background);
  width: 36px;
  height: 20px;
}

.ui-toggle--md .ui-toggle__input ~ .ui-toggle__box {
  background: var(--color-background-neutral-subtle);
  width: 44px;
  height: 24px;
}

.ui-toggle--md .ui-toggle__input:disabled ~ .ui-toggle__box {
  background: var(--color-disabled-background);
  width: 44px;
  height: 24px;
}

.ui-toggle--sm .ui-toggle__input:checked ~ .ui-toggle__box {
  background: var(--color-background-brand-strongest);
  width: 36px;
  height: 20px;
}

.ui-toggle--sm .ui-toggle__input:checked:disabled ~ .ui-toggle__box {
  background: var(--color-disabled-background);
  width: 36px;
  height: 20px;
}

.ui-toggle--md .ui-toggle__input:checked ~ .ui-toggle__box {
  background: var(--color-background-brand-strongest);
  width: 44px;
  height: 24px;
}

.ui-toggle--md .ui-toggle__input:checked:disabled ~ .ui-toggle__box {
  background: var(--color-disabled-background);
  width: 44px;
  height: 24px;
}

.ui-toggle__input:checked ~ .ui-toggle__box {
  justify-content: flex-end;
}

.ui-toggle__knob {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--color-background-inverse-white);
  border-radius: 50%;
}

.ui-toggle--md .ui-toggle__input ~ .ui-toggle__box .ui-toggle__knob,
.ui-toggle--md .ui-toggle__input:disabled ~ .ui-toggle__box .ui-toggle__knob,
.ui-toggle--md .ui-toggle__input:checked ~ .ui-toggle__box .ui-toggle__knob,
.ui-toggle--md .ui-toggle__input:checked:disabled ~ .ui-toggle__box .ui-toggle__knob {
  width: 20px;
  height: 20px;
}

.ui-toggle--sm .ui-toggle__input:disabled ~ .ui-toggle__box .ui-toggle__knob,
.ui-toggle--md .ui-toggle__input:disabled ~ .ui-toggle__box .ui-toggle__knob,
.ui-toggle--sm .ui-toggle__input:checked:disabled ~ .ui-toggle__box .ui-toggle__knob,
.ui-toggle--md .ui-toggle__input:checked:disabled ~ .ui-toggle__box .ui-toggle__knob {
  background: var(--color-disabled-surface);
}