/* stylelint-disable */
@charset "UTF-8";
html {
  --mat-sys-background: #faf9fd;
  --mat-sys-error: #ba1a1a;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-inverse-on-surface: #f2f0f4;
  --mat-sys-inverse-primary: #abc7ff;
  --mat-sys-inverse-surface: #2f3033;
  --mat-sys-on-background: #1a1b1f;
  --mat-sys-on-error: #ffffff;
  --mat-sys-on-error-container: #93000a;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-on-primary-container: #00458f;
  --mat-sys-on-primary-fixed: #001b3f;
  --mat-sys-on-primary-fixed-variant: #00458f;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-on-secondary-container: #3e4759;
  --mat-sys-on-secondary-fixed: #131c2b;
  --mat-sys-on-secondary-fixed-variant: #3e4759;
  --mat-sys-on-surface: #1a1b1f;
  --mat-sys-on-surface-variant: #44474e;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-on-tertiary-container: #0000ef;
  --mat-sys-on-tertiary-fixed: #00006e;
  --mat-sys-on-tertiary-fixed-variant: #0000ef;
  --mat-sys-outline: #74777f;
  --mat-sys-outline-variant: #c4c6d0;
  --mat-sys-primary: #005cbb;
  --mat-sys-primary-container: #d7e3ff;
  --mat-sys-primary-fixed: #d7e3ff;
  --mat-sys-primary-fixed-dim: #abc7ff;
  --mat-sys-scrim: #000000;
  --mat-sys-secondary: #565e71;
  --mat-sys-secondary-container: #dae2f9;
  --mat-sys-secondary-fixed: #dae2f9;
  --mat-sys-secondary-fixed-dim: #bec6dc;
  --mat-sys-shadow: #000000;
  --mat-sys-surface: #faf9fd;
  --mat-sys-surface-bright: #faf9fd;
  --mat-sys-surface-container: #efedf0;
  --mat-sys-surface-container-high: #e9e7eb;
  --mat-sys-surface-container-highest: #e3e2e6;
  --mat-sys-surface-container-low: #f4f3f6;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-dim: #dbd9dd;
  --mat-sys-surface-tint: #005cbb;
  --mat-sys-surface-variant: #e0e2ec;
  --mat-sys-tertiary: #343dff;
  --mat-sys-tertiary-container: #e0e0ff;
  --mat-sys-tertiary-fixed: #e0e0ff;
  --mat-sys-tertiary-fixed-dim: #bec2ff;
  --mat-sys-neutral-variant20: #2d3038;
  --mat-sys-neutral10: #1a1b1f;
  --mat-sys-level0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
  --mat-sys-body-large-font: Roboto;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;
  --mat-sys-body-medium-font: Roboto;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Roboto;
  --mat-sys-body-small-font: Roboto;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
  --mat-sys-display-large-font: Roboto;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
  --mat-sys-display-medium-font: Roboto;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
  --mat-sys-display-small-font: Roboto;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
  --mat-sys-headline-large-font: Roboto;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
  --mat-sys-headline-medium-font: Roboto;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
  --mat-sys-headline-small-font: Roboto;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-label-large-font: Roboto;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
  --mat-sys-label-medium-font: Roboto;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
  --mat-sys-label-small-font: Roboto;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
  --mat-sys-title-large-font: Roboto;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
  --mat-sys-title-medium-font: Roboto;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-title-small-font: Roboto;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}
@font-face {
  font-family: REM;
  src:
    url(REM-Regular.woff2) format('woff2'),
    url(REM-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: REM;
  src:
    url(REM-Medium.woff2) format('woff2'),
    url(REM-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --vs-components-alert-border-width: var(--vs-semantic-border-width-thin);
  --vs-components-alert-gap-y: var(--vs-semantic-spacing-sm-xs);
  --vs-components-alert-padding-text-y: var(--vs-semantic-spacing-sm-xs);
  --vs-components-alert-decoration-width: var(--vs-semantic-border-width-thick);
  --vs-components-alert-radius: var(--vs-semantic-radius-xs);
  --vs-components-alert-gap-x: var(--vs-semantic-spacing-sm-m);
  --vs-components-alert-padding-x: var(--vs-semantic-spacing-sm-m);
  --vs-components-alert-padding-y: var(--vs-semantic-spacing-sm-l);
  --vs-components-alert-icon: var(--vs-semantic-spacing-mid-xs);
  --vs-components-badge-padding-y: var(--vs-semantic-spacing-sm-2xs);
  --vs-components-badge-padding-x: var(--vs-semantic-spacing-sm-xs);
  --vs-components-badge-width-dot: 0.375rem;
  --vs-components-badge-width: var(--vs-semantic-spacing-mid-3xs);
  --vs-components-badge-radius: var(--vs-semantic-radius-full);
  --vs-components-breadcrumb-gap-x: var(--vs-semantic-spacing-sm-xs);
  --vs-components-breadcrumb-item-gap: var(--vs-semantic-spacing-sm-xs);
  --vs-components-breadcrumb-gap-y: var(--vs-semantic-spacing-sm-s);
  --vs-components-breadcrumb-item-padding: var(--vs-semantic-spacing-sm-s);
  --vs-components-breadcrumb-item-icon: var(--vs-semantic-spacing-sm-xl);
  --vs-components-button-border-width: var(--vs-semantic-border-width-thin);
  --vs-components-button-min-height-s: var(--vs-semantic-spacing-mid-l);
  --vs-components-button-min-height-m: var(--vs-semantic-spacing-mid-2xl);
  --vs-components-button-min-width: var(--vs-semantic-spacing-big-m);
  --vs-components-button-max-width: 18.75rem;
  --vs-components-button-icon-padding-x-xs: var(--vs-semantic-spacing-sm-m);
  --vs-components-button-icon-padding-x-s: var(--vs-semantic-spacing-sm-l);
  --vs-components-button-icon-padding-x-l: var(--vs-semantic-spacing-sm-xl);
  --vs-components-button-icon-padding-y-xs: var(--vs-semantic-spacing-sm-m);
  --vs-components-button-icon-padding-y-s: var(--vs-semantic-spacing-sm-l);
  --vs-components-button-icon-padding-y-l: var(--vs-semantic-spacing-sm-xl);
  --vs-components-button-icon-size-s: var(--vs-semantic-spacing-mid-2xs);
  --vs-components-button-icon-size-m: var(--vs-semantic-spacing-mid-xs);
  --vs-components-button-icon-size-l: var(--vs-semantic-spacing-mid-m);
  --vs-components-button-padding-label-xs: var(--vs-semantic-spacing-sm-s);
  --vs-components-button-padding-label-s: var(--vs-semantic-spacing-sm-m);
  --vs-components-button-padding-x-m: var(--vs-semantic-spacing-sm-l);
  --vs-components-button-padding-x-l: var(--vs-semantic-spacing-sm-xl);
  --vs-components-button-padding-y-s: var(--vs-semantic-spacing-sm-m);
  --vs-components-button-padding-y-m: var(--vs-semantic-spacing-sm-l);
  --vs-components-button-padding-y-l: var(--vs-semantic-spacing-sm-xl);
  --vs-components-button-radius-default: var(--vs-semantic-radius-full);
  --vs-components-card-border-width: var(--vs-semantic-border-width-thin);
  --vs-components-card-icon-width: var(--vs-semantic-spacing-mid-m);
  --vs-components-card-message-radius: var(--vs-semantic-radius-s);
  --vs-components-card-message-min-width: 17rem;
  --vs-components-card-message-gap-xs: var(--vs-semantic-spacing-sm-m);
  --vs-components-card-message-gap-s: var(--vs-semantic-spacing-sm-xl);
  --vs-components-card-message-gap-m: var(--vs-semantic-spacing-mid-xs);
  --vs-components-card-message-icon-height: var(--vs-semantic-spacing-mid-xs);
  --vs-components-card-message-icon-width: var(--vs-semantic-spacing-mid-xs);
  --vs-components-card-message-icon-radius: var(--vs-semantic-radius-full);
  --vs-components-card-message-icon-padding-x: var(--vs-semantic-spacing-sm-xs);
  --vs-components-card-message-icon-padding-y: var(--vs-semantic-spacing-sm-xs);
  --vs-components-card-message-padding-x: var(--vs-semantic-spacing-mid-xs);
  --vs-components-card-message-padding-y: var(--vs-semantic-spacing-mid-xs);
  --vs-components-card-gap-negative-xl: -9.375rem;
  --vs-components-card-gap-negative-s: -1.5rem;
  --vs-components-card-gap-xs: var(--vs-semantic-spacing-sm-s);
  --vs-components-card-gap-s: var(--vs-semantic-spacing-sm-m);
  --vs-components-card-gap-m: var(--vs-semantic-spacing-sm-xl);
  --vs-components-card-gap-l: var(--vs-semantic-spacing-mid-m);
  --vs-components-card-padding-x-xs: var(--vs-semantic-spacing-mid-xs);
  --vs-components-card-padding-x-s: var(--vs-semantic-spacing-mid-m);
  --vs-components-card-padding-x-m: var(--vs-semantic-spacing-mid-2xl);
  --vs-components-card-padding-x-l: var(--vs-semantic-spacing-mid-4xl);
  --vs-components-card-padding-x-xl: 12.875rem;
  --vs-components-card-padding-y-xs: var(--vs-semantic-spacing-mid-xs);
  --vs-components-card-padding-y-s: var(--vs-semantic-spacing-mid-m);
  --vs-components-card-radius-s: var(--vs-semantic-radius-s);
  --vs-components-card-radius-m: var(--vs-semantic-radius-l);
  --vs-components-checkbox-gap: var(--vs-semantic-spacing-sm-xs);
  --vs-components-checkbox-position-left: var(--vs-semantic-spacing-mid-2xl);
  --vs-components-checkbox-icon-border-width: var(--vs-semantic-border-width-bold);
  --vs-components-checkbox-icon-radius: var(--vs-semantic-radius-2xs);
  --vs-components-checkbox-icon-size: var(--vs-semantic-spacing-mid-3xs);
  --vs-components-checkbox-shape-label-padding: var(--vs-semantic-spacing-sm-s);
  --vs-components-checkbox-shape-touch-area-padding: 0.6875rem;
  --vs-components-checkbox-shape-touch-area-size: var(--vs-semantic-spacing-mid-xl);
  --vs-components-checkbox-shape-touch-target-size: var(--vs-semantic-spacing-mid-2xl);
  --vs-components-checkbox-shape-radius: var(--vs-semantic-radius-full);
  --vs-components-chip-radius: var(--vs-semantic-radius-full);
  --vs-components-chip-s-ring-size: var(--vs-semantic-spacing-sm-2xs);
  --vs-components-chip-s-gap: var(--vs-semantic-spacing-sm-s);
  --vs-components-chip-s-padding-x-s: var(--vs-semantic-spacing-sm-s);
  --vs-components-chip-s-padding-y: var(--vs-semantic-spacing-sm-s);
  --vs-components-chip-s-padding-x-m: var(--vs-semantic-spacing-sm-m);
  --vs-components-chip-s-icon-size: var(--vs-semantic-spacing-mid-3xs);
  --vs-components-cookies-gap-y-m-m: var(--vs-semantic-spacing-mid-m);
  --vs-components-cookies-gap-y-s-s: var(--vs-semantic-spacing-mid-xs);
  --vs-components-cookies-padding-x-s: var(--vs-semantic-spacing-mid-xs);
  --vs-components-cookies-padding-x-m: var(--vs-semantic-spacing-mid-m);
  --vs-components-cookies-padding-y-s: var(--vs-semantic-spacing-mid-xs);
  --vs-components-cookies-padding-y-m: var(--vs-semantic-spacing-big-3xl);
  --vs-components-cookies-radius-s-s: var(--vs-semantic-radius-xl);
  --vs-components-datepicker-calendar-border-width: var(--vs-semantic-spacing-sm-2xs);
  --vs-components-datepicker-calendar-header-padding-x: var(--vs-semantic-spacing-sm-m);
  --vs-components-datepicker-calendar-header-padding-y: var(--vs-semantic-spacing-sm-m);
  --vs-components-datepicker-calendar-day-container-padding: var(--vs-semantic-spacing-sm-s);
  --vs-components-datepicker-calendar-day-padding-x: var(--vs-semantic-spacing-sm-m);
  --vs-components-datepicker-calendar-day-padding-y: var(--vs-semantic-spacing-sm-m);
  --vs-components-datepicker-calendar-day-content-size: var(--vs-semantic-spacing-mid-xl);
  --vs-components-datepicker-calendar-main-block-border-width: var(--vs-semantic-border-width-thin);
  --vs-components-datepicker-calendar-main-block-gap: var(--vs-semantic-spacing-sm-m);
  --vs-components-datepicker-calendar-main-block-padding: var(--vs-semantic-spacing-sm-m);
  --vs-components-datepicker-calendar-main-block-radius: var(--vs-semantic-spacing-sm-xl);
  --vs-components-datepicker-calendar-main-block-min-width: 18.5rem;
  --vs-components-datepicker-calendar-main-block-max-width: 20rem;
  --vs-components-datepicker-calendar-main-block-radius-element: var(--vs-semantic-radius-full);
  --vs-components-datepicker-calendar-month-year-padding-y: var(--vs-semantic-spacing-sm-m);
  --vs-components-datepicker-calendar-month-year-gap-x: var(--vs-semantic-spacing-sm-xl);
  --vs-components-datepicker-calendar-month-year-gap-y: var(--vs-semantic-spacing-sm-xl);
  --vs-components-datepicker-calendar-month-year-padding-x: var(--vs-semantic-spacing-sm-xl);
  --vs-components-datepicker-calendar-month-year-min-width: var(--vs-semantic-spacing-big-2xs);
  --vs-components-datepicker-calendar-selection-padding-x: var(--vs-semantic-spacing-mid-xl);
  --vs-components-datepicker-calendar-selection-padding-y: var(--vs-semantic-spacing-mid-xl);
  --vs-components-datepicker-calendar-support-text-padding-bottom: 0;
  --vs-components-datepicker-calendar-support-text-padding-top: var(--vs-semantic-spacing-sm-xl);
  --vs-components-datepicker-calendar-support-text-padding-x: var(--vs-semantic-spacing-mid-xs);
  --vs-components-datepicker-fields-gap: var(--vs-semantic-spacing-sm-xl);
  --vs-components-dialog-radius: var(--vs-semantic-radius-s);
  --vs-components-dialog-gap-s: var(--vs-semantic-spacing-mid-xs);
  --vs-components-dialog-icon-height: var(--vs-semantic-spacing-mid-xs);
  --vs-components-dialog-icon-width: var(--vs-semantic-spacing-mid-xs);
  --vs-components-dialog-icon-radius: var(--vs-semantic-radius-full);
  --vs-components-dialog-icon-padding-x: var(--vs-semantic-spacing-sm-m);
  --vs-components-dialog-icon-padding-y: var(--vs-semantic-spacing-sm-m);
  --vs-components-dialog-padding-x: var(--vs-semantic-spacing-mid-xs);
  --vs-components-dialog-padding-y: var(--vs-semantic-spacing-mid-xs);
  --vs-components-divider-thin: var(--vs-semantic-border-width-thin);
  --vs-components-divider-thick: var(--vs-semantic-border-width-bold);
  --vs-components-dropdown-min-width: var(--vs-semantic-spacing-big-3xl);
  --vs-components-dropdown-item-border-m: var(--vs-semantic-border-width-bold);
  --vs-components-dropdown-item-min-height: var(--vs-semantic-spacing-mid-2xl);
  --vs-components-dropdown-item-padding-x-xs: var(--vs-semantic-spacing-sm-m);
  --vs-components-dropdown-item-padding-x-xl: var(--vs-semantic-spacing-mid-m);
  --vs-components-dropdown-item-radius-none: var(--vs-semantic-radius-none);
  --vs-components-dropdown-item-radius-s: var(--vs-semantic-radius-s);
  --vs-components-dropdown-border-s: var(--vs-semantic-border-width-thin);
  --vs-components-dropdown-padding-x-xs: var(--vs-semantic-spacing-sm-m);
  --vs-components-dropdown-padding-y-xs: var(--vs-semantic-spacing-sm-m);
  --vs-components-dropdown-radius-none: var(--vs-semantic-radius-none);
  --vs-components-dropdown-radius-s: var(--vs-semantic-radius-s);
  --vs-components-expansion-panel-bar-min-height: var(--vs-semantic-spacing-mid-2xl);
  --vs-components-expansion-panel-body-padding-x: var(--vs-semantic-spacing-sm-xl);
  --vs-components-expansion-panel-body-padding-opened-left-s: var(--vs-semantic-spacing-mid-xl);
  --vs-components-expansion-panel-body-padding-opened-left-m: var(--vs-semantic-spacing-mid-3xl);
  --vs-components-expansion-panel-gap-x-s: var(--vs-semantic-spacing-sm-m);
  --vs-components-expansion-panel-gap-y-s: var(--vs-semantic-spacing-sm-m);
  --vs-components-expansion-panel-icon-s: var(--vs-semantic-spacing-mid-m);
  --vs-components-expansion-panel-icon-l: var(--vs-semantic-spacing-mid-xl);
  --vs-components-general-focus-ring-width: var(--vs-semantic-focus-ring-width);
  --vs-components-general-focus-ring-width-l: var(--vs-semantic-focus-ring-width-l);
  --vs-components-general-focus-ring-radius: var(--vs-semantic-radius-s);
  --vs-components-header-gap-x: var(--vs-semantic-spacing-sm-m);
  --vs-components-header-padding-x-s: var(--vs-semantic-spacing-sm-xl);
  --vs-components-header-padding-x-m: var(--vs-semantic-spacing-mid-xs);
  --vs-components-header-padding-x-l: var(--vs-semantic-spacing-mid-m);
  --vs-components-header-padding-y-s: var(--vs-semantic-spacing-sm-2xs);
  --vs-components-header-padding-y-m: var(--vs-semantic-spacing-sm-m);
  --vs-components-input-border-width: var(--vs-semantic-border-width-thin);
  --vs-components-input-label-focussed-margin-top: var(--vs-semantic-spacing-sm-xs);
  --vs-components-input-radius: var(--vs-semantic-radius-s);
  --vs-components-input-field-margin-top: var(--vs-semantic-spacing-sm-l);
  --vs-components-input-input-container: var(--vs-semantic-spacing-mid-xl);
  --vs-components-input-height: var(--vs-semantic-spacing-mid-3xl);
  --vs-components-input-gap-field: var(--vs-semantic-spacing-neg-s);
  --vs-components-input-gap-vt: var(--vs-semantic-spacing-sm-s);
  --vs-components-input-gap-hz: var(--vs-semantic-spacing-sm-xl);
  --vs-components-input-padding-helper: var(--vs-semantic-spacing-sm-xs);
  --vs-components-input-padding-icon: var(--vs-semantic-spacing-sm-m);
  --vs-components-input-padding-y: var(--vs-semantic-spacing-sm-m);
  --vs-components-input-padding-x: var(--vs-semantic-spacing-sm-xl);
  --vs-components-link-gap: var(--vs-semantic-spacing-sm-s);
  --vs-components-link-focus-ring-radius: var(--vs-semantic-radius-s);
  --vs-components-number-stepper-gap: var(--vs-semantic-spacing-sm-m);
  --vs-components-number-stepper-icon: var(--vs-semantic-spacing-mid-xs);
  --vs-components-number-stepper-number-max-width: var(--vs-semantic-spacing-mid-xs);
  --vs-components-number-stepper-container-max-width: var(--vs-semantic-spacing-big-2xl);
  --vs-components-number-stepper-flat-padding-x: var(--vs-semantic-spacing-sm-s);
  --vs-components-number-stepper-flat-padding-y: var(--vs-semantic-spacing-sm-s);
  --vs-components-number-stepper-solid-padding-x: var(--vs-semantic-spacing-sm-m);
  --vs-components-number-stepper-solid-padding-y: var(--vs-semantic-spacing-sm-m);
  --vs-components-number-stepper-solid-radius: var(--vs-semantic-radius-full);
  --vs-components-radiobutton-icon-border: var(--vs-semantic-border-width-bold);
  --vs-components-radiobutton-icon-inner-size: var(--vs-semantic-spacing-sm-xl);
  --vs-components-radiobutton-icon-outer-size: var(--vs-semantic-spacing-mid-2xs);
  --vs-components-radiobutton-icon-radius: var(--vs-semantic-radius-full);
  --vs-components-radiobutton-label-padding-left: var(--vs-semantic-spacing-sm-s);
  --vs-components-radiobutton-shape-touch-ripple: var(--vs-semantic-spacing-mid-xl);
  --vs-components-radiobutton-shape-touch-target-size: var(--vs-semantic-spacing-mid-2xl);
  --vs-components-radiobutton-shape-radius: var(--vs-semantic-radius-full);
  --vs-components-scroll-size-small: var(--vs-semantic-spacing-sm-s);
  --vs-components-scroll-size: var(--vs-semantic-spacing-sm-m);
  --vs-components-scroll-radius: var(--vs-semantic-radius-l);
  --vs-components-select-min-width: var(--vs-semantic-spacing-big-3xl);
  --vs-components-stepper-border-width: var(--vs-semantic-spacing-sm-2xs);
  --vs-components-stepper-gap: var(--vs-semantic-spacing-sm-m);
  --vs-components-stepper-padding-x: var(--vs-semantic-spacing-sm-m);
  --vs-components-stepper-indicator-height: var(--vs-semantic-spacing-mid-xs);
  --vs-components-stepper-indicator-width: var(--vs-semantic-spacing-mid-xs);
  --vs-components-stepper-radius: var(--vs-semantic-radius-full);
  --vs-components-switch-border-xs: var(--vs-semantic-spacing-sm-2xs);
  --vs-components-switch-gap-xl: var(--vs-semantic-spacing-sm-xl);
  --vs-components-switch-handle-size: var(--vs-semantic-spacing-mid-2xs);
  --vs-components-switch-padding-x: var(--vs-semantic-spacing-sm-xs);
  --vs-components-switch-radius-full: var(--vs-semantic-radius-full);
  --vs-components-tabs-track-line-height: var(--vs-semantic-spacing-sm-2xs);
  --vs-components-tabs-selected-size: var(--vs-semantic-spacing-sm-xs);
  --vs-components-tabs-gap: var(--vs-semantic-spacing-sm-s);
  --vs-components-tabs-icon: var(--vs-semantic-spacing-mid-xs);
  --vs-components-tabs-track-height-default: var(--vs-semantic-spacing-mid-2xl);
  --vs-components-tabs-track-height-big: var(--vs-semantic-spacing-mid-4xl);
  --vs-components-tabs-vt-min-width: var(--vs-semantic-spacing-mid-4xl);
  --vs-components-tabs-hz-min-width: var(--vs-semantic-spacing-big-s);
  --vs-components-tabs-padding-vt-y: var(--vs-semantic-spacing-sm-m);
  --vs-components-tabs-padding-hz-y: var(--vs-semantic-spacing-sm-l);
  --vs-components-tabs-padding-vt-x: var(--vs-semantic-spacing-sm-l);
  --vs-components-tabs-padding-hz-x: var(--vs-semantic-spacing-sm-xl);
  --vs-components-tag-gap: var(--vs-semantic-spacing-sm-m);
  --vs-components-tag-radius: var(--vs-semantic-radius-full);
  --vs-components-tag-padding-x-s: var(--vs-semantic-spacing-sm-m);
  --vs-components-tag-padding-x-m: var(--vs-semantic-spacing-sm-l);
  --vs-components-tag-padding-x-l: var(--vs-semantic-spacing-sm-xl);
  --vs-components-tag-padding-y-s: var(--vs-semantic-spacing-sm-xs);
  --vs-components-tag-padding-y-m: var(--vs-semantic-spacing-sm-s);
  --vs-components-textarea-min-height: var(--vs-semantic-spacing-big-s);
  --vs-components-textarea-max-height: 8.5rem;
  --vs-components-toast-border-width: var(--vs-semantic-border-width-thin);
  --vs-components-toast-padding-text-y: var(--vs-semantic-spacing-sm-s);
  --vs-components-toast-radius: var(--vs-semantic-radius-xs);
  --vs-components-toast-gap: var(--vs-semantic-spacing-sm-l);
  --vs-components-toast-padding-x: var(--vs-semantic-spacing-sm-l);
  --vs-components-toast-padding-y: var(--vs-semantic-spacing-sm-l);
  --vs-components-toast-icon-link: var(--vs-semantic-spacing-mid-3xs);
  --vs-components-toast-icon: var(--vs-semantic-spacing-mid-xs);
  --vs-components-toast-radius-close: var(--vs-semantic-radius-full);
  --vs-components-tooltip-border-width: var(--vs-semantic-border-width-thin);
  --vs-components-tooltip-radius: var(--vs-semantic-radius-xs);
  --vs-components-tooltip-padding-y: var(--vs-semantic-spacing-sm-m);
  --vs-components-tooltip-padding-x: var(--vs-semantic-spacing-sm-l);
  --vs-components-tooltip-min-width: var(--vs-semantic-spacing-mid-xs);
  --vs-components-tooltip-max-width: 20rem;
  --vs-components-button-font-text-align: var(--vs-semantic-text-align-center);
  --vs-components-button-font-text-decoration: var(--vs-semantic-text-decoration-none);
  --vs-components-general-text-decoration-line-through: var(
    --vs-semantic-text-decoration-line-through
  );
  --vs-components-general-text-decoration-none: var(--vs-semantic-text-decoration-none);
  --vs-components-general-text-decoration-underline: var(--vs-semantic-text-decoration-underline);
  --vs-semantic-border-width-none: var(--vs-brand-border-width-none);
  --vs-semantic-border-width-thin: var(--vs-brand-border-width-thin);
  --vs-semantic-border-width-bold: var(--vs-brand-border-width-bold);
  --vs-semantic-border-width-thick: var(--vs-brand-border-width-thick);
  --vs-semantic-breakpoint-xs: 37.5rem;
  --vs-semantic-breakpoint-s: 56.25rem;
  --vs-semantic-breakpoint-m: 80rem;
  --vs-semantic-breakpoint-l: 120rem;
  --vs-semantic-focus-ring-width: var(--vs-primitive-units-2);
  --vs-semantic-focus-ring-width-l: var(--vs-primitive-units-4);
  --vs-semantic-grid-base-small: var(--vs-primitive-units-4);
  --vs-semantic-grid-base-default: var(--vs-primitive-units-8);
  --vs-semantic-grid-base-vertical: var(--vs-primitive-units-8);
  --vs-semantic-grid-col-s: var(--vs-primitive-units-4);
  --vs-semantic-grid-col-m: var(--vs-primitive-units-8);
  --vs-semantic-grid-col-l: var(--vs-primitive-units-12);
  --vs-semantic-grid-gutter-s: var(--vs-primitive-units-16);
  --vs-semantic-grid-gutter-m: var(--vs-primitive-units-24);
  --vs-semantic-grid-gutter-l: var(--vs-primitive-units-32);
  --vs-semantic-grid-margin-xs: var(--vs-primitive-units-16);
  --vs-semantic-grid-margin-s: var(--vs-primitive-units-24);
  --vs-semantic-grid-margin-l: var(--vs-primitive-units-32);
  --vs-semantic-grid-width-m: var(--vs-primitive-units-80);
  --vs-semantic-grid-width-l: var(--vs-primitive-units-104);
  --vs-semantic-overlay-blur: var(--vs-brand-effect-blur-overlay);
  --vs-semantic-radius-none: var(--vs-brand-radius-none);
  --vs-semantic-radius-2xs: var(--vs-brand-radius-2xs);
  --vs-semantic-radius-xs: var(--vs-brand-radius-xs);
  --vs-semantic-radius-s: var(--vs-brand-radius-s);
  --vs-semantic-radius-m: var(--vs-brand-radius-m);
  --vs-semantic-radius-l: var(--vs-brand-radius-l);
  --vs-semantic-radius-xl: var(--vs-brand-radius-xl);
  --vs-semantic-radius-2xl: var(--vs-brand-radius-2xl);
  --vs-semantic-radius-full: var(--vs-brand-radius-full);
  --vs-semantic-shadow-offset-x: var(--vs-brand-shadow-offset-x);
  --vs-semantic-shadow-offset-y: var(--vs-brand-shadow-offset-y);
  --vs-semantic-shadow-spread: var(--vs-brand-shadow-spread);
  --vs-semantic-shadow-blur: var(--vs-brand-shadow-blur);
  --vs-semantic-spacing-big-2xs: var(--vs-brand-spacing-big-2xs);
  --vs-semantic-spacing-big-xs: var(--vs-brand-spacing-big-xs);
  --vs-semantic-spacing-big-s: var(--vs-brand-spacing-big-s);
  --vs-semantic-spacing-big-m: var(--vs-brand-spacing-big-m);
  --vs-semantic-spacing-big-l: var(--vs-brand-spacing-big-l);
  --vs-semantic-spacing-big-xl: var(--vs-brand-spacing-big-xl);
  --vs-semantic-spacing-big-2xl: var(--vs-brand-spacing-big-2xl);
  --vs-semantic-spacing-big-3xl: var(--vs-brand-spacing-big-3xl);
  --vs-semantic-spacing-mid-3xs: var(--vs-brand-spacing-mid-3xs);
  --vs-semantic-spacing-mid-2xs: var(--vs-brand-spacing-mid-2xs);
  --vs-semantic-spacing-mid-xs: var(--vs-brand-spacing-mid-xs);
  --vs-semantic-spacing-mid-s: var(--vs-brand-spacing-mid-s);
  --vs-semantic-spacing-mid-m: var(--vs-brand-spacing-mid-m);
  --vs-semantic-spacing-mid-l: var(--vs-brand-spacing-mid-l);
  --vs-semantic-spacing-mid-xl: var(--vs-brand-spacing-mid-xl);
  --vs-semantic-spacing-mid-2xl: var(--vs-brand-spacing-mid-2xl);
  --vs-semantic-spacing-mid-3xl: var(--vs-brand-spacing-mid-3xl);
  --vs-semantic-spacing-mid-4xl: var(--vs-brand-spacing-mid-4xl);
  --vs-semantic-spacing-neg-s: var(--vs-brand-spacing-neg-s);
  --vs-semantic-spacing-neg-m: var(--vs-brand-spacing-neg-m);
  --vs-semantic-spacing-sm-2xs: var(--vs-brand-spacing-sm-2xs);
  --vs-semantic-spacing-sm-xs: var(--vs-brand-spacing-sm-xs);
  --vs-semantic-spacing-sm-s: var(--vs-brand-spacing-sm-s);
  --vs-semantic-spacing-sm-m: var(--vs-brand-spacing-sm-m);
  --vs-semantic-spacing-sm-l: var(--vs-brand-spacing-sm-l);
  --vs-semantic-spacing-sm-xl: var(--vs-brand-spacing-sm-xl);
  --vs-semantic-text-body-l-letter-spacing: var(--vs-brand-text-body-l-letter-spacing);
  --vs-semantic-text-body-l-font-size: var(--vs-brand-text-body-l-font-size);
  --vs-semantic-text-body-l-line-height: var(--vs-brand-text-body-l-line-height);
  --vs-semantic-text-body-m-letter-spacing: var(--vs-brand-text-body-m-letter-spacing);
  --vs-semantic-text-body-m-font-size: var(--vs-brand-text-body-m-font-size);
  --vs-semantic-text-body-m-line-height: var(--vs-brand-text-body-m-line-height);
  --vs-semantic-text-body-s-letter-spacing: var(--vs-brand-text-body-s-letter-spacing);
  --vs-semantic-text-body-s-font-size: var(--vs-brand-text-body-s-font-size);
  --vs-semantic-text-body-s-line-height: var(--vs-brand-text-body-s-line-height);
  --vs-semantic-text-body-xl-letter-spacing: var(--vs-brand-text-body-xl-letter-spacing);
  --vs-semantic-text-body-xl-font-size: var(--vs-brand-text-body-xl-font-size);
  --vs-semantic-text-body-xl-line-height: var(--vs-brand-text-body-xl-line-height);
  --vs-semantic-text-body-xs-letter-spacing: var(--vs-brand-text-body-xs-letter-spacing);
  --vs-semantic-text-body-xs-font-size: var(--vs-brand-text-body-xs-font-size);
  --vs-semantic-text-body-xs-line-height: var(--vs-brand-text-body-xs-line-height);
  --vs-semantic-text-title-2xl-letter-spacing: var(--vs-brand-text-title-2xl-letter-spacing);
  --vs-semantic-text-title-2xl-font-size-mb: var(--vs-brand-text-title-2xl-font-size-mb);
  --vs-semantic-text-title-2xl-line-height-mb: var(--vs-brand-text-title-2xl-line-height-mb);
  --vs-semantic-text-title-2xl-font-size-dk: var(--vs-brand-text-title-2xl-font-size-dk);
  --vs-semantic-text-title-2xl-line-height-dk: var(--vs-brand-text-title-2xl-line-height-dk);
  --vs-semantic-text-title-l-letter-spacing: var(--vs-brand-text-title-l-letter-spacing);
  --vs-semantic-text-title-l-font-size-mb: var(--vs-brand-text-title-l-font-size-mb);
  --vs-semantic-text-title-l-font-size-dk: var(--vs-brand-text-title-l-font-size-dk);
  --vs-semantic-text-title-l-line-height-mb: var(--vs-brand-text-title-l-line-height-mb);
  --vs-semantic-text-title-l-line-height-dk: var(--vs-brand-text-title-l-line-height-dk);
  --vs-semantic-text-title-m-letter-spacing: var(--vs-brand-text-title-m-letter-spacing);
  --vs-semantic-text-title-m-font-size-mb: var(--vs-brand-text-title-m-font-size-mb);
  --vs-semantic-text-title-m-font-size-dk: var(--vs-brand-text-title-m-font-size-dk);
  --vs-semantic-text-title-m-line-height-mb: var(--vs-brand-text-title-m-line-height-mb);
  --vs-semantic-text-title-m-line-height-dk: var(--vs-brand-text-title-m-line-height-dk);
  --vs-semantic-text-title-s-letter-spacing: var(--vs-brand-text-title-s-letter-spacing);
  --vs-semantic-text-title-s-font-size-dk: var(--vs-brand-text-title-s-font-size-dk);
  --vs-semantic-text-title-s-font-size-mb: var(--vs-brand-text-title-s-font-size-mb);
  --vs-semantic-text-title-s-line-height-dk: var(--vs-brand-text-title-s-line-height-dk);
  --vs-semantic-text-title-s-line-height-mb: var(--vs-brand-text-title-s-line-height-mb);
  --vs-semantic-text-title-xl-letter-spacing: var(--vs-brand-text-title-xl-letter-spacing);
  --vs-semantic-text-title-xl-font-size-mb: var(--vs-brand-text-title-xl-font-size-mb);
  --vs-semantic-text-title-xl-font-size-dk: var(--vs-brand-text-title-xl-font-size-dk);
  --vs-semantic-text-title-xl-line-height-mb: var(--vs-brand-text-title-xl-line-height-mb);
  --vs-semantic-text-title-xl-line-height-dk: var(--vs-brand-text-title-xl-line-height-dk);
  --vs-semantic-spacing-auto: auto;
  --vs-semantic-text-align-center: center;
  --vs-semantic-text-align-left: left;
  --vs-semantic-text-align-right: right;
  --vs-semantic-text-body-l-weight-regular: var(--vs-brand-text-body-l-weight-regular);
  --vs-semantic-text-body-l-weight-medium: var(--vs-brand-text-body-l-weight-medium);
  --vs-semantic-text-body-m-weight-regular: var(--vs-brand-text-body-m-weight-regular);
  --vs-semantic-text-body-m-weight-medium: var(--vs-brand-text-body-m-weight-medium);
  --vs-semantic-text-body-s-weight-regular: var(--vs-brand-text-body-s-weight-regular);
  --vs-semantic-text-body-s-weight-medium: var(--vs-brand-text-body-s-weight-medium);
  --vs-semantic-text-body-xl-weight-regular: var(--vs-brand-text-body-xl-weight-regular);
  --vs-semantic-text-body-xl-weight-medium: var(--vs-brand-text-body-xl-weight-medium);
  --vs-semantic-text-body-xs-weight-regular: var(--vs-brand-text-body-xs-weight-regular);
  --vs-semantic-text-body-xs-weight-medium: var(--vs-brand-text-body-xs-weight-medium);
  --vs-semantic-text-decoration-line-through: line-through;
  --vs-semantic-text-decoration-none: none;
  --vs-semantic-text-decoration-underline: underline;
  --vs-semantic-text-font-base: var(--vs-brand-text-font-base);
  --vs-semantic-text-font-family: var(--vs-brand-text-font-family);
  --vs-semantic-text-font-weight-regular: var(--vs-brand-text-font-weight-regular);
  --vs-semantic-text-font-weight-medium: var(--vs-brand-text-font-weight-medium);
  --vs-semantic-text-style-italic: italic;
  --vs-semantic-text-style-normal: normal;
  --vs-semantic-text-title-2xl-weight-medium: var(--vs-brand-text-title-2xl-weight-medium);
  --vs-semantic-text-title-l-weight-medium: var(--vs-brand-text-title-l-weight-medium);
  --vs-semantic-text-title-m-weight-medium: var(--vs-brand-text-title-m-weight-medium);
  --vs-semantic-text-title-s-weight-medium: var(--vs-brand-text-title-s-weight-medium);
  --vs-semantic-text-title-xl-weight-medium: var(--vs-brand-text-title-xl-weight-medium);
  --vs-primitive-alphas-dark-12: #0000001f;
  --vs-primitive-alphas-dark-16: #00000029;
  --vs-primitive-alphas-dark-20: #00000033;
  --vs-primitive-alphas-dark-24: #0000003d;
  --vs-primitive-alphas-dark-4: #0000000a;
  --vs-primitive-alphas-dark-8: #00000014;
  --vs-primitive-alphas-light-12: #ffffff1f;
  --vs-primitive-alphas-light-16: #ffffff29;
  --vs-primitive-alphas-light-20: #ffffff33;
  --vs-primitive-alphas-light-24: #ffffff3d;
  --vs-primitive-alphas-light-32: #ffffff52;
  --vs-primitive-alphas-light-4: #ffffff0a;
  --vs-primitive-alphas-light-8: #ffffff14;
  --vs-primitive-basics-black: #000000;
  --vs-primitive-basics-transparent: #ffffff00;
  --vs-primitive-basics-white: #ffffff;
  --vs-primitive-grey-100: #f6f6f6;
  --vs-primitive-grey-200: #e9e9e9;
  --vs-primitive-grey-300: #d8d8d8;
  --vs-primitive-grey-400: #b5b5b5;
  --vs-primitive-grey-50: #fafafa;
  --vs-primitive-grey-500: #8f8f8f;
  --vs-primitive-grey-600: #717171;
  --vs-primitive-grey-700: #555555;
  --vs-primitive-grey-800: #3f3f3f;
  --vs-primitive-grey-900: #2d2d2d;
  --vs-primitive-grey-950: #1a1a1a;
  --vs-primitive-iryo-darkred-100: #ce0511;
  --vs-primitive-iryo-darkred-200: #be0510;
  --vs-primitive-iryo-darkred-300: #ae040e;
  --vs-primitive-iryo-darkred-400: #9e040d;
  --vs-primitive-iryo-darkred-500: #8e030c;
  --vs-primitive-iryo-darkred-600: #7e030b;
  --vs-primitive-iryo-darkred-700: #620208;
  --vs-primitive-iryo-darkred-800: #460106;
  --vs-primitive-iryo-darkred-900: #2a0104;
  --vs-primitive-iryo-lightred-100: #fefcfd;
  --vs-primitive-iryo-lightred-200: #fdf2f3;
  --vs-primitive-iryo-lightred-300: #fbe2e4;
  --vs-primitive-iryo-lightred-400: #f9cbd0;
  --vs-primitive-iryo-lightred-500: #f5aeb5;
  --vs-primitive-iryo-lightred-600: #f08d96;
  --vs-primitive-iryo-lightred-700: #ea6c78;
  --vs-primitive-iryo-lightred-800: #e14c5c;
  --vs-primitive-iryo-lightred-900: #d72836;
  --vs-primitive-status-blue-100: #f0f9fb;
  --vs-primitive-status-blue-200: #a0d5e0;
  --vs-primitive-status-blue-300: #50b1c5;
  --vs-primitive-status-blue-400: #008cab;
  --vs-primitive-status-blue-500: #005d71;
  --vs-primitive-status-green-100: #edf8f1;
  --vs-primitive-status-green-200: #b7e4c8;
  --vs-primitive-status-green-300: #82cfa0;
  --vs-primitive-status-green-400: #4bb977;
  --vs-primitive-status-green-500: #2b7748;
  --vs-primitive-status-pink-100: #fce9f1;
  --vs-primitive-status-pink-200: #f2a6c6;
  --vs-primitive-status-pink-300: #e9639b;
  --vs-primitive-status-pink-400: #de206f;
  --vs-primitive-status-pink-500: #9b164e;
  --vs-primitive-status-yellow-100: #fef8ec;
  --vs-primitive-status-yellow-200: #fbe4b7;
  --vs-primitive-status-yellow-300: #f8d286;
  --vs-primitive-status-yellow-400: #f4b73f;
  --vs-primitive-status-yellow-500: #ab802c;
  --vs-primitive-status-yellow-600: #684900;
  --vs-primitive-trenitalia-blue-100: #f2f3f4;
  --vs-primitive-trenitalia-blue-200: #e3e7ed;
  --vs-primitive-trenitalia-blue-300: #c7cedb;
  --vs-primitive-trenitalia-blue-400: #aab4c8;
  --vs-primitive-trenitalia-blue-500: #8c97b4;
  --vs-primitive-trenitalia-blue-600: #626c85;
  --vs-primitive-trenitalia-blue-700: #4a536b;
  --vs-primitive-trenitalia-blue-800: #33394c;
  --vs-primitive-trenitalia-blue-900: #262b39;
  --vs-primitive-trenitalia-green-100: #e6f0ef;
  --vs-primitive-trenitalia-green-200: #b0d0cd;
  --vs-primitive-trenitalia-green-300: #8ab9b5;
  --vs-primitive-trenitalia-green-400: #549893;
  --vs-primitive-trenitalia-green-500: #33857e;
  --vs-primitive-trenitalia-green-600: #00665e;
  --vs-primitive-trenitalia-green-700: #005d56;
  --vs-primitive-trenitalia-green-800: #004843;
  --vs-primitive-trenitalia-green-900: #003834;
  --vs-primitive-trenitalia-red-100: #fdf5f4;
  --vs-primitive-trenitalia-red-200: #fadddd;
  --vs-primitive-trenitalia-red-300: #f4b5b8;
  --vs-primitive-trenitalia-red-400: #ec8e94;
  --vs-primitive-trenitalia-red-500: #e1666f;
  --vs-primitive-trenitalia-red-600: #d6454f;
  --vs-primitive-trenitalia-red-700: #c7323c;
  --vs-primitive-trenitalia-red-800: #a52831;
  --vs-primitive-trenitalia-red-900: #7f1e25;
  --vs-primitive-units-neg-2: -0.125rem;
  --vs-primitive-units-neg-1: -0.0625rem;
  --vs-primitive-units-neg-0-5: -0.0313rem;
  --vs-primitive-units-0: 0;
  --vs-primitive-units-1: 0.0625rem;
  --vs-primitive-units-2: 0.125rem;
  --vs-primitive-units-4: 0.25rem;
  --vs-primitive-units-8: 0.5rem;
  --vs-primitive-units-12: 0.75rem;
  --vs-primitive-units-14: 0.875rem;
  --vs-primitive-units-16: 1rem;
  --vs-primitive-units-18: 1.125rem;
  --vs-primitive-units-20: 1.25rem;
  --vs-primitive-units-24: 1.5rem;
  --vs-primitive-units-28: 1.75rem;
  --vs-primitive-units-32: 2rem;
  --vs-primitive-units-36: 2.25rem;
  --vs-primitive-units-40: 2.5rem;
  --vs-primitive-units-48: 3rem;
  --vs-primitive-units-56: 3.5rem;
  --vs-primitive-units-64: 4rem;
  --vs-primitive-units-72: 4.5rem;
  --vs-primitive-units-80: 5rem;
  --vs-primitive-units-88: 5.5rem;
  --vs-primitive-units-96: 6rem;
  --vs-primitive-units-104: 6.5rem;
  --vs-primitive-units-112: 7rem;
  --vs-primitive-units-120: 7.5rem;
  --vs-primitive-units-128: 8rem;
  --vs-primitive-font-family-base:
    -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
  --vs-primitive-font-family-poppins: poppins;
  --vs-primitive-font-family-rem: rem;
  --vs-primitive-font-weight-regular: 400;
  --vs-primitive-font-weight-medium: 500;
  --vs-primitive-font-weight-semibold: 600;
  --vs-primitive-font-weight-bold: 700;
  --vs-components-alert-default-bg: var(--vs-semantic-bg-surface-elevated);
  --vs-components-alert-default-border: var(--vs-semantic-border-subtle);
  --vs-components-alert-default-decoration: var(--vs-semantic-border-default);
  --vs-components-alert-default-icon: var(--vs-semantic-icon-default);
  --vs-components-alert-default-text: var(--vs-semantic-text-primary);
  --vs-components-alert-error-decoration: var(--vs-semantic-bg-status-error-vibrant);
  --vs-components-alert-error-icon: var(--vs-semantic-icon-status-error-strong);
  --vs-components-alert-info-decoration: var(--vs-semantic-bg-status-info-vibrant);
  --vs-components-alert-info-icon: var(--vs-semantic-icon-status-info-strong);
  --vs-components-alert-success-decoration: var(--vs-semantic-bg-status-success-vibrant);
  --vs-components-alert-success-icon: var(--vs-semantic-icon-status-success-strong);
  --vs-components-alert-warning-decoration: var(--vs-semantic-bg-status-warning-vibrant);
  --vs-components-alert-warning-icon: var(--vs-semantic-icon-status-warning-soft);
  --vs-components-badge-default-bg: var(--vs-semantic-bg-status-brand);
  --vs-components-badge-default-text: var(--vs-semantic-text-on-status-inverse);
  --vs-components-badge-highlighted-bg: var(--vs-semantic-bg-status-strong);
  --vs-components-badge-highlighted-text: var(--vs-semantic-text-on-status-inverse);
  --vs-components-breadcrumb-current: var(--vs-semantic-text-primary);
  --vs-components-breadcrumb-link-default: var(--vs-semantic-link-navigation-default);
  --vs-components-breadcrumb-link-disabled: var(--vs-semantic-link-disabled);
  --vs-components-breadcrumb-link-focus: var(--vs-semantic-link-navigation-hover);
  --vs-components-breadcrumb-link-hover: var(--vs-semantic-link-navigation-hover);
  --vs-components-breadcrumb-link-pressed: var(--vs-semantic-link-navigation-pressed);
  --vs-components-button-border-default: var(--vs-semantic-utility-transparent);
  --vs-components-button-ghost-bg-default: var(--vs-semantic-bg-action-flat);
  --vs-components-button-ghost-bg-disabled: var(--vs-semantic-bg-action-flat);
  --vs-components-button-ghost-bg-hover: var(--vs-semantic-bg-action-flat-hover);
  --vs-components-button-ghost-bg-pressed: var(--vs-semantic-bg-action-flat-pressed);
  --vs-components-button-ghost-text-default: var(--vs-semantic-text-action-primary);
  --vs-components-button-ghost-text-disabled: var(--vs-semantic-text-action-disabled);
  --vs-components-button-ghost-text-hover: var(--vs-semantic-text-action-primary-hover);
  --vs-components-button-ghost-text-pressed: var(--vs-semantic-text-action-primary-pressed);
  --vs-components-button-ghost-fields-bg-default: var(--vs-semantic-bg-action-neutral);
  --vs-components-button-ghost-fields-bg-disabled: var(--vs-semantic-bg-action-neutral);
  --vs-components-button-ghost-fields-bg-hover: var(--vs-semantic-bg-action-neutral-hover);
  --vs-components-button-ghost-fields-bg-pressed: var(--vs-semantic-bg-action-neutral-pressed);
  --vs-components-button-ghost-fields-text-default: var(--vs-semantic-text-action-neutral);
  --vs-components-button-ghost-fields-text-disabled: var(--vs-semantic-text-action-disabled);
  --vs-components-button-ghost-fields-text-hover: var(--vs-semantic-text-action-neutral);
  --vs-components-button-ghost-fields-text-pressed: var(--vs-semantic-text-action-neutral);
  --vs-components-button-outline-bg-default: var(--vs-semantic-bg-action-hollow);
  --vs-components-button-outline-bg-disabled: var(--vs-semantic-bg-action-hollow-disabled);
  --vs-components-button-outline-bg-hover: var(--vs-semantic-bg-action-hollow-hover);
  --vs-components-button-outline-bg-pressed: var(--vs-semantic-bg-action-hollow-pressed);
  --vs-components-button-outline-border-default: var(--vs-semantic-border-action-primary);
  --vs-components-button-outline-border-disabled: var(--vs-semantic-border-action-primary-disabled);
  --vs-components-button-outline-border-hover: var(--vs-semantic-border-action-primary-hover);
  --vs-components-button-outline-border-pressed: var(--vs-semantic-border-action-primary-pressed);
  --vs-components-button-outline-text-default: var(--vs-semantic-text-action-primary);
  --vs-components-button-outline-text-disabled: var(--vs-semantic-text-action-disabled);
  --vs-components-button-outline-text-hover: var(--vs-semantic-text-action-primary-hover);
  --vs-components-button-outline-text-pressed: var(--vs-semantic-text-action-primary-pressed);
  --vs-components-button-primary-bg-default: var(--vs-semantic-bg-action-primary);
  --vs-components-button-primary-bg-disabled: var(--vs-semantic-bg-action-primary-disabled);
  --vs-components-button-primary-bg-hover: var(--vs-semantic-bg-action-primary-hover);
  --vs-components-button-primary-bg-pressed: var(--vs-semantic-bg-action-primary-pressed);
  --vs-components-button-primary-text-default: var(--vs-semantic-text-on-primary);
  --vs-components-button-primary-text-disabled: var(--vs-semantic-text-action-disabled);
  --vs-components-button-primary-text-hover: var(--vs-semantic-text-on-primary);
  --vs-components-button-primary-text-pressed: var(--vs-semantic-text-on-primary);
  --vs-components-card-bg: var(--vs-semantic-bg-surface-elevated);
  --vs-components-card-body: var(--vs-semantic-text-secondary);
  --vs-components-card-border: var(--vs-semantic-border-subtle);
  --vs-components-card-icon: var(--vs-semantic-icon-default);
  --vs-components-card-title: var(--vs-semantic-text-primary);
  --vs-components-card-message-bg: var(--vs-semantic-bg-surface-default);
  --vs-components-card-message-body: var(--vs-semantic-text-secondary);
  --vs-components-card-message-title: var(--vs-semantic-text-primary);
  --vs-components-card-message-icon-default-strong: var(--vs-semantic-icon-default);
  --vs-components-card-message-icon-default-subtle: var(--vs-semantic-bg-surface-elevated);
  --vs-components-card-message-icon-error-strong: var(--vs-semantic-icon-status-error);
  --vs-components-card-message-icon-error-subtle: var(--vs-semantic-bg-status-icon-error);
  --vs-components-card-message-icon-info-strong: var(--vs-semantic-icon-status-info);
  --vs-components-card-message-icon-info-subtle: var(--vs-semantic-bg-status-icon-info);
  --vs-components-card-message-icon-success-strong: var(--vs-semantic-icon-status-success);
  --vs-components-card-message-icon-success-subtle: var(--vs-semantic-bg-status-icon-success);
  --vs-components-card-message-icon-warning-strong: var(--vs-semantic-icon-status-warning);
  --vs-components-card-message-icon-warning-subtle: var(--vs-semantic-bg-status-icon-warning);
  --vs-components-checkbox-icon: var(--vs-semantic-icon-on-brand);
  --vs-components-checkbox-label: var(--vs-semantic-text-primary);
  --vs-components-checkbox-ripple-focus: var(--vs-semantic-overlay-hover);
  --vs-components-checkbox-ripple-hover: var(--vs-semantic-overlay-hover);
  --vs-components-checkbox-ripple-pressed: var(--vs-semantic-overlay-pressed);
  --vs-components-checkbox-disabled-border: var(--vs-semantic-border-disabled);
  --vs-components-checkbox-disabled-label: var(--vs-semantic-text-disabled);
  --vs-components-checkbox-error-bg: var(--vs-semantic-bg-status-error-main);
  --vs-components-checkbox-error-border: var(--vs-semantic-bg-status-error-main);
  --vs-components-checkbox-error-label: var(--vs-semantic-text-error);
  --vs-components-checkbox-selected-bg: var(--vs-semantic-bg-surface-brand-default);
  --vs-components-checkbox-selected-border: var(--vs-semantic-bg-surface-brand-default);
  --vs-components-checkbox-unselected-border: var(--vs-semantic-border-default);
  --vs-components-chip-default-bg: var(--vs-semantic-bg-status-dimmed);
  --vs-components-chip-default-bg-hover: var(--vs-semantic-bg-status-dimmed-hover);
  --vs-components-chip-default-bg-pressed: var(--vs-semantic-bg-status-dimmed-pressed);
  --vs-components-chip-default-text: var(--vs-semantic-text-on-status-primary);
  --vs-components-chip-default-text-pressed: var(--vs-semantic-text-on-status-muted);
  --vs-components-chip-disabled-bg: var(--vs-semantic-bg-disabled-default);
  --vs-components-chip-disabled-text: var(--vs-semantic-text-disabled);
  --vs-components-chip-highlighted-bg: var(--vs-semantic-bg-status-strong);
  --vs-components-chip-highlighted-bg-hover: var(--vs-semantic-bg-status-strong-hover);
  --vs-components-chip-highlighted-bg-pressed: var(--vs-semantic-bg-status-strong-pressed);
  --vs-components-chip-highlighted-text: var(--vs-semantic-text-on-status-inverse);
  --vs-components-cookies-bg: var(--vs-semantic-bg-surface-elevated);
  --vs-components-cookies-link: var(--vs-semantic-link-primary-default);
  --vs-components-cookies-text: var(--vs-semantic-text-secondary);
  --vs-components-cookies-title: var(--vs-semantic-text-primary);
  --vs-components-datepicker-calendar-bg: var(--vs-semantic-bg-surface-default);
  --vs-components-datepicker-calendar-border: var(--vs-semantic-border-subtle);
  --vs-components-datepicker-calendar-text: var(--vs-semantic-text-primary);
  --vs-components-datepicker-calendar-item-default-bg-hover: var(--vs-semantic-overlay-hover);
  --vs-components-datepicker-calendar-item-default-border: var(--vs-semantic-utility-transparent);
  --vs-components-datepicker-calendar-item-highlight-off: var(--vs-semantic-utility-transparent);
  --vs-components-datepicker-calendar-item-highlight-on: var(--vs-semantic-bg-surface-brand-subtle);
  --vs-components-datepicker-calendar-item-range-bg: var(--vs-semantic-utility-transparent);
  --vs-components-datepicker-calendar-item-range-bg-hover: var(
    --vs-semantic-overlay-highlight-hover
  );
  --vs-components-datepicker-calendar-item-selected-bg: var(--vs-semantic-bg-surface-brand-default);
  --vs-components-datepicker-calendar-item-selected-bg-focus: var(
    --vs-semantic-bg-surface-brand-hover
  );
  --vs-components-datepicker-calendar-item-selected-bg-hover: var(
    --vs-semantic-bg-surface-brand-hover
  );
  --vs-components-datepicker-calendar-item-selected-bg-pressed: var(
    --vs-semantic-bg-surface-brand-pressed
  );
  --vs-components-datepicker-calendar-item-selected-text: var(--vs-semantic-text-on-primary);
  --vs-components-datepicker-calendar-item-today-bg: var(--vs-semantic-utility-transparent);
  --vs-components-datepicker-calendar-item-today-bg-focus: var(--vs-semantic-overlay-hover);
  --vs-components-datepicker-calendar-item-today-bg-hover: var(--vs-semantic-overlay-hover);
  --vs-components-datepicker-calendar-item-today-bg-pressed: var(--vs-semantic-overlay-pressed);
  --vs-components-datepicker-calendar-item-today-border: var(--vs-semantic-border-strong);
  --vs-components-dialog-bg: var(--vs-semantic-bg-surface-default);
  --vs-components-dialog-body: var(--vs-semantic-text-secondary);
  --vs-components-dialog-title: var(--vs-semantic-text-primary);
  --vs-components-dialog-icon-default-strong: var(--vs-semantic-icon-default);
  --vs-components-dialog-icon-default-subtle: var(--vs-semantic-bg-surface-elevated);
  --vs-components-dialog-icon-error-strong: var(--vs-semantic-icon-status-error);
  --vs-components-dialog-icon-error-subtle: var(--vs-semantic-bg-status-icon-error);
  --vs-components-dialog-icon-info-strong: var(--vs-semantic-icon-status-info);
  --vs-components-dialog-icon-info-subtle: var(--vs-semantic-bg-status-icon-info);
  --vs-components-dialog-icon-success-strong: var(--vs-semantic-icon-status-success);
  --vs-components-dialog-icon-success-subtle: var(--vs-semantic-bg-status-icon-success);
  --vs-components-dialog-icon-warning-strong: var(--vs-semantic-icon-status-warning);
  --vs-components-dialog-icon-warning-subtle: var(--vs-semantic-bg-status-icon-warning);
  --vs-components-divider-medium: var(--vs-semantic-border-default);
  --vs-components-divider-soft: var(--vs-semantic-border-subtle);
  --vs-components-divider-strong: var(--vs-semantic-border-strong);
  --vs-components-dropdown-item-default-bg: var(--vs-semantic-bg-surface-default);
  --vs-components-dropdown-item-default-icon: var(--vs-semantic-icon-default);
  --vs-components-dropdown-item-default-text: var(--vs-semantic-text-primary);
  --vs-components-dropdown-item-disabled-bg: var(--vs-semantic-bg-surface-default);
  --vs-components-dropdown-item-disabled-icon: var(--vs-semantic-icon-disabled);
  --vs-components-dropdown-item-disabled-text: var(--vs-semantic-text-disabled);
  --vs-components-dropdown-item-hover-bg: var(--vs-semantic-bg-neutral-hover);
  --vs-components-dropdown-item-hover-icon: var(--vs-semantic-icon-default);
  --vs-components-dropdown-item-hover-text: var(--vs-semantic-text-primary);
  --vs-components-dropdown-item-pressed-bg: var(--vs-semantic-bg-neutral-pressed);
  --vs-components-dropdown-item-pressed-icon: var(--vs-semantic-icon-default);
  --vs-components-dropdown-item-pressed-text: var(--vs-semantic-text-primary);
  --vs-components-dropdown-item-selected-bg: var(--vs-semantic-bg-neutral-selected);
  --vs-components-dropdown-item-selected-icon: var(--vs-semantic-icon-default);
  --vs-components-dropdown-item-selected-text: var(--vs-semantic-text-primary);
  --vs-components-dropdown-default-bg: var(--vs-semantic-bg-surface-default);
  --vs-components-dropdown-default-border: var(--vs-semantic-border-subtle);
  --vs-components-expansion-panel-default-bg: var(--vs-semantic-bg-surface-default);
  --vs-components-expansion-panel-default-bg-focus: var(--vs-semantic-bg-surface-hover);
  --vs-components-expansion-panel-default-bg-hover: var(--vs-semantic-bg-surface-hover);
  --vs-components-expansion-panel-default-bg-pressed: var(--vs-semantic-bg-surface-pressed);
  --vs-components-expansion-panel-default-body: var(--vs-semantic-text-secondary);
  --vs-components-expansion-panel-default-icon: var(--vs-semantic-icon-brand);
  --vs-components-expansion-panel-default-title: var(--vs-semantic-text-primary);
  --vs-components-expansion-panel-disabled-icon: var(--vs-semantic-icon-disabled);
  --vs-components-expansion-panel-disabled-title: var(--vs-semantic-text-disabled);
  --vs-components-general-bg-trans-hover: var(--vs-semantic-bg-overlay-neutral-hover);
  --vs-components-general-bg-trans-pressed: var(--vs-semantic-bg-overlay-neutral-pressed);
  --vs-components-general-bg-transparent: var(--vs-semantic-utility-transparent);
  --vs-components-general-border-focus: var(--vs-semantic-border-focus-default);
  --vs-components-general-border-transparent: var(--vs-semantic-utility-transparent);
  --vs-components-general-focus-offset-inverse: var(--vs-semantic-border-focus-inverse);
  --vs-components-header-bg: var(--vs-semantic-bg-surface-brand-default);
  --vs-components-input-default-bg: var(--vs-semantic-bg-surface-default);
  --vs-components-input-default-border: var(--vs-semantic-border-subtle);
  --vs-components-input-default-helper: var(--vs-semantic-text-secondary);
  --vs-components-input-default-icon: var(--vs-semantic-icon-default);
  --vs-components-input-default-label: var(--vs-semantic-text-secondary);
  --vs-components-input-default-text: var(--vs-semantic-text-primary);
  --vs-components-input-disabled-bg: var(--vs-semantic-bg-disabled-subtle);
  --vs-components-input-disabled-border: var(--vs-semantic-border-disabled);
  --vs-components-input-disabled-helper: var(--vs-semantic-text-disabled);
  --vs-components-input-disabled-icon: var(--vs-semantic-icon-disabled-strong);
  --vs-components-input-disabled-label: var(--vs-semantic-text-disabled);
  --vs-components-input-disabled-text: var(--vs-semantic-text-disabled);
  --vs-components-input-error-border: var(--vs-semantic-border-status-error);
  --vs-components-input-error-helper: var(--vs-semantic-text-error);
  --vs-components-input-error-icon: var(--vs-semantic-icon-status-error);
  --vs-components-input-error-label: var(--vs-semantic-text-error);
  --vs-components-input-error-text: var(--vs-semantic-text-error);
  --vs-components-input-focus-bg: var(--vs-semantic-bg-neutral-hover);
  --vs-components-input-focus-bg-circle: var(--vs-semantic-bg-overlay-neutral-hover);
  --vs-components-input-focus-border: var(--vs-semantic-border-focus-default);
  --vs-components-input-hover-bg: var(--vs-semantic-bg-neutral-hover);
  --vs-components-input-hover-bg-circle: var(--vs-semantic-bg-overlay-neutral-hover);
  --vs-components-input-pressed-bg: var(--vs-semantic-bg-neutral-pressed);
  --vs-components-input-pressed-bg-circle: var(--vs-semantic-bg-overlay-neutral-pressed);
  --vs-components-input-pressed-border: var(--vs-semantic-border-focus-default);
  --vs-components-link-inverse-default: var(--vs-semantic-link-inverse-default);
  --vs-components-link-inverse-disabled: var(--vs-semantic-link-disabled);
  --vs-components-link-inverse-focus: var(--vs-semantic-link-inverse-pressed);
  --vs-components-link-inverse-hover: var(--vs-semantic-link-inverse-hover);
  --vs-components-link-inverse-pressed: var(--vs-semantic-link-inverse-pressed);
  --vs-components-link-neutral-default: var(--vs-semantic-link-neutral-default);
  --vs-components-link-neutral-disabled: var(--vs-semantic-link-disabled);
  --vs-components-link-neutral-hover: var(--vs-semantic-link-neutral-hover);
  --vs-components-link-neutral-pressed: var(--vs-semantic-link-neutral-pressed);
  --vs-components-link-primary-default: var(--vs-semantic-link-primary-default);
  --vs-components-link-primary-disabled: var(--vs-semantic-link-disabled);
  --vs-components-link-primary-hover: var(--vs-semantic-link-primary-hover);
  --vs-components-link-primary-pressed: var(--vs-semantic-link-primary-pressed);
  --vs-components-number-stepper-bg: var(--vs-semantic-bg-surface-elevated);
  --vs-components-number-stepper-text: var(--vs-semantic-text-primary);
  --vs-components-number-stepper-text-disabled: var(--vs-semantic-text-disabled);
  --vs-components-number-stepper-icon-bg: var(--vs-semantic-utility-transparent);
  --vs-components-number-stepper-icon-bg-focus: var(--vs-semantic-bg-overlay-neutral-hover);
  --vs-components-number-stepper-icon-bg-hover: var(--vs-semantic-bg-overlay-neutral-hover);
  --vs-components-number-stepper-icon-bg-pressed: var(--vs-semantic-bg-overlay-neutral-pressed);
  --vs-components-number-stepper-icon-symbol: var(--vs-semantic-icon-accent);
  --vs-components-number-stepper-icon-symbol-disabled: var(--vs-semantic-icon-disabled-strong);
  --vs-components-overlay-bg-default: var(--vs-semantic-bg-backdrop-default);
  --vs-components-overlay-bg-muted: var(--vs-semantic-bg-backdrop-muted);
  --vs-components-radiobutton-border: var(--vs-semantic-border-default);
  --vs-components-radiobutton-label: var(--vs-semantic-text-primary);
  --vs-components-radiobutton-ripple-focus: var(--vs-semantic-overlay-hover);
  --vs-components-radiobutton-ripple-hover: var(--vs-semantic-overlay-hover);
  --vs-components-radiobutton-ripple-pressed: var(--vs-semantic-overlay-pressed);
  --vs-components-radiobutton-disabled-border: var(--vs-semantic-border-disabled);
  --vs-components-radiobutton-disabled-label: var(--vs-semantic-text-disabled);
  --vs-components-radiobutton-error-border: var(--vs-semantic-border-status-error);
  --vs-components-radiobutton-error-label: var(--vs-semantic-text-error);
  --vs-components-radiobutton-selected-bg: var(--vs-semantic-icon-brand);
  --vs-components-radiobutton-selected-border: var(--vs-semantic-icon-brand);
  --vs-components-scroll-thumb: var(--vs-semantic-scrollbar-thumb);
  --vs-components-scroll-track: var(--vs-semantic-scrollbar-track);
  --vs-components-stepper-blocked-background: var(--vs-semantic-bg-action-primary-disabled);
  --vs-components-stepper-blocked-line: var(--vs-semantic-border-disabled);
  --vs-components-stepper-blocked-number: var(--vs-semantic-text-action-disabled);
  --vs-components-stepper-blocked-text: var(--vs-semantic-text-action-disabled);
  --vs-components-stepper-completed-background: var(--vs-semantic-bg-action-hollow-disabled);
  --vs-components-stepper-completed-line: var(--vs-semantic-border-action-primary);
  --vs-components-stepper-completed-number: var(--vs-semantic-text-action-primary);
  --vs-components-stepper-completed-text: var(--vs-semantic-text-action-primary);
  --vs-components-stepper-current-background: var(--vs-semantic-bg-surface-brand-active);
  --vs-components-stepper-current-line: var(--vs-semantic-border-action-primary);
  --vs-components-stepper-current-number: var(--vs-semantic-text-inverse);
  --vs-components-stepper-current-text: var(--vs-semantic-text-action-primary);
  --vs-components-switch-label: var(--vs-semantic-text-primary);
  --vs-components-switch-disabled-bg: var(--vs-semantic-bg-disabled-subtle);
  --vs-components-switch-disabled-border: var(--vs-semantic-border-disabled);
  --vs-components-switch-disabled-label: var(--vs-semantic-text-disabled);
  --vs-components-switch-disabled-st: var(--vs-semantic-icon-disabled);
  --vs-components-switch-not-selected-bg: var(--vs-semantic-bg-neutral-muted);
  --vs-components-switch-not-selected-border: var(--vs-semantic-border-default);
  --vs-components-switch-not-selected-st: var(--vs-semantic-icon-control);
  --vs-components-switch-not-selected-focus-bg: var(--vs-semantic-bg-neutral-muted-hover);
  --vs-components-switch-not-selected-hover-bg: var(--vs-semantic-bg-neutral-muted-hover);
  --vs-components-switch-not-selected-pressed-bg: var(--vs-semantic-bg-neutral-muted-pressed);
  --vs-components-switch-selected-bg: var(--vs-semantic-bg-surface-brand-default);
  --vs-components-switch-selected-border: var(--vs-semantic-bg-surface-brand-default);
  --vs-components-switch-selected-st: var(--vs-semantic-icon-on-brand);
  --vs-components-switch-selected-focus-bg: var(--vs-semantic-bg-surface-brand-hover);
  --vs-components-switch-selected-focus-border: var(--vs-semantic-bg-surface-brand-hover);
  --vs-components-switch-selected-hover-bg: var(--vs-semantic-bg-surface-brand-hover);
  --vs-components-switch-selected-hover-border: var(--vs-semantic-bg-surface-brand-hover);
  --vs-components-switch-selected-pressed-bg: var(--vs-semantic-bg-surface-brand-pressed);
  --vs-components-switch-selected-pressed-border: var(--vs-semantic-bg-surface-brand-pressed);
  --vs-components-tabs-button-bg: var(--vs-semantic-bg-surface-subtle);
  --vs-components-tabs-button-bg-disabled: var(--vs-semantic-bg-surface-subtle);
  --vs-components-tabs-button-bg-focus: var(--vs-semantic-bg-surface-hover);
  --vs-components-tabs-button-bg-hover: var(--vs-semantic-bg-surface-hover);
  --vs-components-tabs-button-bg-pressed: var(--vs-semantic-bg-surface-pressed);
  --vs-components-tabs-button-icon: var(--vs-semantic-text-primary);
  --vs-components-tabs-button-icon-disabled: var(--vs-semantic-text-disabled);
  --vs-components-tabs-default-bg: var(--vs-semantic-bg-surface-subtle);
  --vs-components-tabs-default-icon: var(--vs-semantic-icon-default);
  --vs-components-tabs-default-label: var(--vs-semantic-text-primary);
  --vs-components-tabs-disabled-bg: var(--vs-semantic-bg-surface-subtle);
  --vs-components-tabs-disabled-icon: var(--vs-semantic-text-disabled);
  --vs-components-tabs-disabled-label: var(--vs-semantic-text-disabled);
  --vs-components-tabs-focus-bg: var(--vs-semantic-bg-surface-hover);
  --vs-components-tabs-hover-bg: var(--vs-semantic-bg-surface-hover);
  --vs-components-tabs-pressed-bg: var(--vs-semantic-bg-surface-pressed);
  --vs-components-tabs-selected-bar-color: var(--vs-semantic-border-primary);
  --vs-components-tabs-selected-icon: var(--vs-semantic-icon-brand);
  --vs-components-tabs-selected-label: var(--vs-semantic-text-action-primary);
  --vs-components-tabs-track-line: var(--vs-semantic-border-subtle);
  --vs-components-tag-default-bg: var(--vs-semantic-bg-status-dimmed);
  --vs-components-tag-default-text: var(--vs-semantic-text-on-status-primary);
  --vs-components-tag-highlighted-bg: var(--vs-semantic-bg-status-strong);
  --vs-components-tag-highlighted-text: var(--vs-semantic-text-on-status-inverse);
  --vs-components-toast-close-bg-hover: var(--vs-semantic-bg-overlay-neutral-hover);
  --vs-components-toast-close-bg-pressed: var(--vs-semantic-bg-overlay-neutral-pressed);
  --vs-components-toast-default-bg: var(--vs-semantic-bg-surface-elevated);
  --vs-components-toast-default-border: var(--vs-semantic-border-subtle);
  --vs-components-toast-default-icon: var(--vs-semantic-icon-default);
  --vs-components-toast-default-link: var(--vs-semantic-link-on-status-subtle);
  --vs-components-toast-default-link-hover: var(--vs-semantic-link-on-status-subtle-hover);
  --vs-components-toast-default-link-pressed: var(--vs-semantic-link-on-status-subtle-pressed);
  --vs-components-toast-default-text: var(--vs-semantic-text-primary);
  --vs-components-toast-error-bg: var(--vs-semantic-bg-status-error-subtle);
  --vs-components-toast-error-border: var(--vs-semantic-border-status-error-soft);
  --vs-components-toast-error-icon: var(--vs-semantic-icon-status-error-strong);
  --vs-components-toast-highlighted-bg: var(--vs-semantic-bg-status-strong);
  --vs-components-toast-highlighted-border: var(--vs-semantic-border-status-strong-inner);
  --vs-components-toast-highlighted-close-bg-hover: var(
    --vs-semantic-bg-overlay-neutral-hover-inverse
  );
  --vs-components-toast-highlighted-close-bg-pressed: var(
    --vs-semantic-bg-overlay-neutral-pressed-inverse
  );
  --vs-components-toast-highlighted-icon: var(--vs-semantic-icon-inverse);
  --vs-components-toast-highlighted-link: var(--vs-semantic-link-on-status-strong);
  --vs-components-toast-highlighted-link-hover: var(--vs-semantic-link-on-status-strong-hover);
  --vs-components-toast-highlighted-link-pressed: var(--vs-semantic-link-on-status-strong-pressed);
  --vs-components-toast-highlighted-text: var(--vs-semantic-text-on-status-inverse);
  --vs-components-toast-info-bg: var(--vs-semantic-bg-status-info-subtle);
  --vs-components-toast-info-border: var(--vs-semantic-border-status-info-soft);
  --vs-components-toast-info-icon: var(--vs-semantic-icon-status-info-strong);
  --vs-components-toast-status-link: var(--vs-semantic-link-primary-vibrant);
  --vs-components-toast-status-link-hover: var(--vs-semantic-link-primary-vibrant-hover);
  --vs-components-toast-status-link-pressed: var(--vs-semantic-link-primary-vibrant-pressed);
  --vs-components-toast-status-text: var(--vs-semantic-text-primary);
  --vs-components-toast-success-bg: var(--vs-semantic-bg-status-success-subtle);
  --vs-components-toast-success-border: var(--vs-semantic-border-status-success-soft);
  --vs-components-toast-success-icon: var(--vs-semantic-icon-status-success-strong);
  --vs-components-toast-warning-bg: var(--vs-semantic-bg-status-warning-subtle);
  --vs-components-toast-warning-border: var(--vs-semantic-border-status-warning-soft);
  --vs-components-toast-warning-icon: var(--vs-semantic-icon-status-warning-strong);
  --vs-components-tooltip-bg: var(--vs-semantic-bg-surface-inverse);
  --vs-components-tooltip-border: var(--vs-semantic-border-inverse);
  --vs-components-tooltip-text: var(--vs-semantic-text-inverse);
  --vs-global-border-brand: var(--vs-brand-color-primary-base);
  --vs-global-border-brand-adaptive: var(--vs-brand-color-primary-base);
  --vs-global-border-brand-subtle: var(--vs-brand-color-primary-subtle);
  --vs-global-border-default: var(--vs-brand-color-neutrals-500);
  --vs-global-border-strong: var(--vs-brand-color-neutrals-700);
  --vs-global-border-subtle: var(--vs-brand-color-neutrals-300);
  --vs-global-icon-brand: var(--vs-brand-color-primary-base);
  --vs-global-icon-brand-adaptive: var(--vs-brand-color-primary-base);
  --vs-global-icon-brand-subtle: var(--vs-brand-color-primary-subtle);
  --vs-global-icon-default: var(--vs-brand-color-neutrals-900);
  --vs-global-icon-disabled: var(--vs-brand-color-neutrals-400);
  --vs-global-icon-inverse: var(--vs-brand-color-neutrals-100);
  --vs-global-icon-on-brand: var(--vs-brand-color-basics-white);
  --vs-global-icon-secondary: var(--vs-brand-color-neutrals-700);
  --vs-global-link-disabled: var(--vs-brand-color-neutrals-400);
  --vs-global-link-inverse-default: var(--vs-brand-color-neutrals-100);
  --vs-global-link-inverse-hover: var(--vs-brand-color-neutrals-200);
  --vs-global-link-inverse-pressed: var(--vs-brand-color-neutrals-300);
  --vs-global-link-neutral-default: var(--vs-brand-color-neutrals-900);
  --vs-global-link-neutral-hover: var(--vs-brand-color-neutrals-800);
  --vs-global-link-neutral-pressed: var(--vs-brand-color-neutrals-700);
  --vs-global-link-primary-default: var(--vs-brand-color-primary-base);
  --vs-global-link-primary-hover: var(--vs-brand-color-primary-hover);
  --vs-global-link-primary-pressed: var(--vs-brand-color-primary-pressed);
  --vs-global-neutral-100: var(--vs-brand-color-neutrals-100);
  --vs-global-neutral-200: var(--vs-brand-color-neutrals-200);
  --vs-global-neutral-300: var(--vs-brand-color-neutrals-300);
  --vs-global-neutral-400: var(--vs-brand-color-neutrals-400);
  --vs-global-neutral-50: var(--vs-brand-color-neutrals-50);
  --vs-global-neutral-500: var(--vs-brand-color-neutrals-500);
  --vs-global-neutral-600: var(--vs-brand-color-neutrals-600);
  --vs-global-neutral-700: var(--vs-brand-color-neutrals-700);
  --vs-global-neutral-800: var(--vs-brand-color-neutrals-800);
  --vs-global-neutral-900: var(--vs-brand-color-neutrals-900);
  --vs-global-neutral-950: var(--vs-brand-color-neutrals-950);
  --vs-global-shadows-default: var(--vs-brand-color-alphas-shadow-dark-default);
  --vs-global-shadows-soft: var(--vs-brand-color-alphas-shadow-dark-soft);
  --vs-global-status-error-main: var(--vs-brand-color-status-error-main);
  --vs-global-status-error-soft: var(--vs-brand-color-status-error-soft);
  --vs-global-status-error-strong: var(--vs-brand-color-status-error-strong);
  --vs-global-status-error-subtle: var(--vs-brand-color-status-error-subtle);
  --vs-global-status-error-vibrant: var(--vs-brand-color-status-error-vibrant);
  --vs-global-status-info-main: var(--vs-brand-color-status-info-main);
  --vs-global-status-info-soft: var(--vs-brand-color-status-info-soft);
  --vs-global-status-info-strong: var(--vs-brand-color-status-info-strong);
  --vs-global-status-info-subtle: var(--vs-brand-color-status-info-subtle);
  --vs-global-status-info-vibrant: var(--vs-brand-color-status-info-vibrant);
  --vs-global-status-success-main: var(--vs-brand-color-status-success-main);
  --vs-global-status-success-soft: var(--vs-brand-color-status-success-soft);
  --vs-global-status-success-strong: var(--vs-brand-color-status-success-strong);
  --vs-global-status-success-subtle: var(--vs-brand-color-status-success-subtle);
  --vs-global-status-success-vibrant: var(--vs-brand-color-status-success-vibrant);
  --vs-global-status-warning-contrast: var(--vs-brand-color-status-warning-contrast);
  --vs-global-status-warning-main: var(--vs-brand-color-status-warning-main);
  --vs-global-status-warning-soft: var(--vs-brand-color-status-warning-soft);
  --vs-global-status-warning-strong: var(--vs-brand-color-status-warning-strong);
  --vs-global-status-warning-subtle: var(--vs-brand-color-status-warning-subtle);
  --vs-global-status-warning-vibrant: var(--vs-brand-color-status-warning-vibrant);
  --vs-global-surface-brand: var(--vs-brand-color-primary-base);
  --vs-global-surface-brand-adaptive: var(--vs-brand-color-primary-base);
  --vs-global-surface-brand-subtle: var(--vs-brand-color-primary-subtle);
  --vs-global-surface-default: var(--vs-brand-color-basics-white);
  --vs-global-surface-disabled: var(--vs-brand-color-neutrals-200);
  --vs-global-surface-elevated: var(--vs-brand-color-neutrals-100);
  --vs-global-surface-elevated-inverse: var(--vs-brand-color-neutrals-900);
  --vs-global-surface-inverse: var(--vs-brand-color-basics-black);
  --vs-global-surface-subtle: var(--vs-brand-color-neutrals-50);
  --vs-global-surface-subtle-inverse: var(--vs-brand-color-neutrals-950);
  --vs-global-text-brand: var(--vs-brand-color-primary-base);
  --vs-global-text-default: var(--vs-brand-color-neutrals-900);
  --vs-global-text-disabled: var(--vs-brand-color-neutrals-400);
  --vs-global-text-inverse: var(--vs-brand-color-neutrals-50);
  --vs-global-text-secondary: var(--vs-brand-color-neutrals-700);
  --vs-global-text-secondary-inverse: var(--vs-brand-color-neutrals-300);
  --vs-global-text-tertiary: var(--vs-brand-color-neutrals-500);
  --vs-global-utility-transparent: var(--vs-brand-color-basics-transparent);
  --vs-semantic-bg-action-flat: var(--vs-brand-color-basics-transparent);
  --vs-semantic-bg-action-flat-hover: var(--vs-brand-color-neutrals-100);
  --vs-semantic-bg-action-flat-pressed: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-action-hollow: var(--vs-brand-color-basics-transparent);
  --vs-semantic-bg-action-hollow-disabled: var(--vs-brand-color-basics-white);
  --vs-semantic-bg-action-hollow-hover: var(--vs-brand-color-neutrals-100);
  --vs-semantic-bg-action-hollow-pressed: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-action-neutral: var(--vs-brand-color-basics-transparent);
  --vs-semantic-bg-action-neutral-hover: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-action-neutral-pressed: var(--vs-brand-color-neutrals-300);
  --vs-semantic-bg-action-primary: var(--vs-brand-color-primary-base);
  --vs-semantic-bg-action-primary-disabled: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-action-primary-hover: var(--vs-brand-color-primary-hover);
  --vs-semantic-bg-action-primary-pressed: var(--vs-brand-color-primary-pressed);
  --vs-semantic-bg-backdrop-default: var(--vs-brand-color-alphas-backdrop-dark-default);
  --vs-semantic-bg-backdrop-muted: var(--vs-brand-color-alphas-backdrop-dark-muted);
  --vs-semantic-bg-disabled-default: var(--vs-brand-color-neutrals-100);
  --vs-semantic-bg-disabled-subtle: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-neutral-hover: var(--vs-brand-color-neutrals-100);
  --vs-semantic-bg-neutral-muted: var(--vs-brand-color-neutrals-100);
  --vs-semantic-bg-neutral-muted-hover: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-neutral-muted-pressed: var(--vs-brand-color-neutrals-300);
  --vs-semantic-bg-neutral-pressed: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-neutral-selected: var(--vs-brand-color-neutrals-100);
  --vs-semantic-bg-overlay-neutral-hover: var(--vs-brand-color-alphas-overlay-hover);
  --vs-semantic-bg-overlay-neutral-hover-inverse: var(
    --vs-brand-color-alphas-overlay-hover-inverse
  );
  --vs-semantic-bg-overlay-neutral-pressed: var(--vs-brand-color-alphas-overlay-pressed);
  --vs-semantic-bg-overlay-neutral-pressed-inverse: var(
    --vs-brand-color-alphas-overlay-pressed-inverse
  );
  --vs-semantic-bg-status-brand: var(--vs-brand-color-primary-base);
  --vs-semantic-bg-status-dimmed: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-status-dimmed-hover: var(--vs-brand-color-neutrals-300);
  --vs-semantic-bg-status-dimmed-pressed: var(--vs-brand-color-neutrals-400);
  --vs-semantic-bg-status-error-main: var(--vs-brand-color-status-error-strong);
  --vs-semantic-bg-status-error-subtle: var(--vs-brand-color-status-error-subtle);
  --vs-semantic-bg-status-error-vibrant: var(--vs-brand-color-status-error-main);
  --vs-semantic-bg-status-info-subtle: var(--vs-brand-color-status-info-subtle);
  --vs-semantic-bg-status-info-vibrant: var(--vs-brand-color-status-info-main);
  --vs-semantic-bg-status-strong: var(--vs-brand-color-neutrals-900);
  --vs-semantic-bg-status-strong-hover: var(--vs-brand-color-neutrals-700);
  --vs-semantic-bg-status-strong-pressed: var(--vs-brand-color-neutrals-600);
  --vs-semantic-bg-status-success-subtle: var(--vs-brand-color-status-success-subtle);
  --vs-semantic-bg-status-success-vibrant: var(--vs-brand-color-status-success-main);
  --vs-semantic-bg-status-warning-subtle: var(--vs-brand-color-status-warning-subtle);
  --vs-semantic-bg-status-warning-vibrant: var(--vs-brand-color-status-warning-main);
  --vs-semantic-bg-status-icon-error: var(--vs-brand-color-status-error-subtle);
  --vs-semantic-bg-status-icon-info: var(--vs-brand-color-status-info-subtle);
  --vs-semantic-bg-status-icon-success: var(--vs-brand-color-status-success-subtle);
  --vs-semantic-bg-status-icon-warning: var(--vs-brand-color-status-warning-subtle);
  --vs-semantic-bg-surface-default: var(--vs-brand-color-basics-white);
  --vs-semantic-bg-surface-elevated: var(--vs-brand-color-neutrals-100);
  --vs-semantic-bg-surface-hover: var(--vs-brand-color-neutrals-100);
  --vs-semantic-bg-surface-inverse: var(--vs-brand-color-neutrals-950);
  --vs-semantic-bg-surface-pressed: var(--vs-brand-color-neutrals-200);
  --vs-semantic-bg-surface-subtle: var(--vs-brand-color-neutrals-50);
  --vs-semantic-bg-surface-brand-active: var(--vs-brand-color-primary-base);
  --vs-semantic-bg-surface-brand-default: var(--vs-brand-color-primary-base);
  --vs-semantic-bg-surface-brand-hover: var(--vs-brand-color-primary-hover);
  --vs-semantic-bg-surface-brand-pressed: var(--vs-brand-color-primary-pressed);
  --vs-semantic-bg-surface-brand-subtle: var(--vs-brand-color-accent-surface);
  --vs-semantic-border-default: var(--vs-brand-color-neutrals-500);
  --vs-semantic-border-disabled: var(--vs-brand-color-neutrals-200);
  --vs-semantic-border-inverse: var(--vs-brand-color-neutrals-950);
  --vs-semantic-border-primary: var(--vs-brand-color-primary-base);
  --vs-semantic-border-strong: var(--vs-brand-color-neutrals-700);
  --vs-semantic-border-subtle: var(--vs-brand-color-neutrals-300);
  --vs-semantic-border-action-primary: var(--vs-brand-color-primary-base);
  --vs-semantic-border-action-primary-disabled: var(--vs-brand-color-neutrals-400);
  --vs-semantic-border-action-primary-hover: var(--vs-brand-color-primary-hover);
  --vs-semantic-border-action-primary-pressed: var(--vs-brand-color-primary-pressed);
  --vs-semantic-border-focus-default: var(--vs-brand-color-neutrals-950);
  --vs-semantic-border-focus-inverse: var(--vs-brand-color-neutrals-50);
  --vs-semantic-border-status-error: var(--vs-brand-color-status-error-strong);
  --vs-semantic-border-status-error-soft: var(--vs-brand-color-status-error-soft);
  --vs-semantic-border-status-info-soft: var(--vs-brand-color-status-info-soft);
  --vs-semantic-border-status-strong-inner: var(--vs-brand-color-neutrals-100);
  --vs-semantic-border-status-success-soft: var(--vs-brand-color-status-success-soft);
  --vs-semantic-border-status-warning-soft: var(--vs-brand-color-status-warning-soft);
  --vs-semantic-icon-accent: var(--vs-brand-color-primary-base);
  --vs-semantic-icon-brand: var(--vs-brand-color-primary-base);
  --vs-semantic-icon-control: var(--vs-brand-color-neutrals-400);
  --vs-semantic-icon-default: var(--vs-brand-color-neutrals-900);
  --vs-semantic-icon-disabled: var(--vs-brand-color-neutrals-300);
  --vs-semantic-icon-disabled-strong: var(--vs-brand-color-neutrals-400);
  --vs-semantic-icon-inverse: var(--vs-brand-color-neutrals-100);
  --vs-semantic-icon-on-brand: var(--vs-brand-color-basics-white);
  --vs-semantic-icon-status-error: var(--vs-brand-color-status-error-strong);
  --vs-semantic-icon-status-error-soft: var(--vs-brand-color-status-error-main);
  --vs-semantic-icon-status-error-strong: var(--vs-brand-color-status-error-strong);
  --vs-semantic-icon-status-info: var(--vs-brand-color-status-info-strong);
  --vs-semantic-icon-status-info-soft: var(--vs-brand-color-status-info-main);
  --vs-semantic-icon-status-info-strong: var(--vs-brand-color-status-info-strong);
  --vs-semantic-icon-status-success: var(--vs-brand-color-status-success-strong);
  --vs-semantic-icon-status-success-soft: var(--vs-brand-color-status-success-main);
  --vs-semantic-icon-status-success-strong: var(--vs-brand-color-status-success-strong);
  --vs-semantic-icon-status-warning: var(--vs-brand-color-status-warning-contrast);
  --vs-semantic-icon-status-warning-soft: var(--vs-brand-color-status-warning-main);
  --vs-semantic-icon-status-warning-strong: var(--vs-brand-color-status-warning-contrast);
  --vs-semantic-link-disabled: var(--vs-brand-color-neutrals-400);
  --vs-semantic-link-inverse-default: var(--vs-brand-color-neutrals-100);
  --vs-semantic-link-inverse-hover: var(--vs-brand-color-neutrals-200);
  --vs-semantic-link-inverse-pressed: var(--vs-brand-color-neutrals-300);
  --vs-semantic-link-navigation-default: var(--vs-brand-color-neutrals-600);
  --vs-semantic-link-navigation-hover: var(--vs-brand-color-neutrals-700);
  --vs-semantic-link-navigation-pressed: var(--vs-brand-color-neutrals-800);
  --vs-semantic-link-neutral-default: var(--vs-brand-color-neutrals-900);
  --vs-semantic-link-neutral-hover: var(--vs-brand-color-neutrals-800);
  --vs-semantic-link-neutral-pressed: var(--vs-brand-color-neutrals-700);
  --vs-semantic-link-on-status-strong: var(--vs-brand-color-accent-contrast);
  --vs-semantic-link-on-status-strong-hover: var(--vs-brand-color-accent-contrast-hover);
  --vs-semantic-link-on-status-strong-pressed: var(--vs-brand-color-accent-contrast-pressed);
  --vs-semantic-link-on-status-subtle: var(--vs-brand-color-primary-base);
  --vs-semantic-link-on-status-subtle-hover: var(--vs-brand-color-primary-hover);
  --vs-semantic-link-on-status-subtle-pressed: var(--vs-brand-color-primary-pressed);
  --vs-semantic-link-primary-default: var(--vs-brand-color-primary-base);
  --vs-semantic-link-primary-hover: var(--vs-brand-color-primary-hover);
  --vs-semantic-link-primary-pressed: var(--vs-brand-color-primary-pressed);
  --vs-semantic-link-primary-vibrant: var(--vs-brand-color-primary-base);
  --vs-semantic-link-primary-vibrant-hover: var(--vs-brand-color-primary-hover);
  --vs-semantic-link-primary-vibrant-pressed: var(--vs-brand-color-primary-pressed);
  --vs-semantic-overlay-highlight-hover: var(--vs-brand-color-accent-contrast-pressed);
  --vs-semantic-overlay-highlight-pressed: var(--vs-brand-color-accent-contrast-hover);
  --vs-semantic-overlay-hover: var(--vs-brand-color-neutrals-200);
  --vs-semantic-overlay-pressed: var(--vs-brand-color-neutrals-300);
  --vs-semantic-scrollbar-thumb: var(--vs-brand-color-neutrals-900);
  --vs-semantic-scrollbar-track: var(--vs-brand-color-neutrals-300);
  --vs-semantic-text-disabled: var(--vs-brand-color-neutrals-400);
  --vs-semantic-text-error: var(--vs-brand-color-status-error-strong);
  --vs-semantic-text-inverse: var(--vs-brand-color-neutrals-100);
  --vs-semantic-text-on-primary: var(--vs-brand-color-neutrals-100);
  --vs-semantic-text-primary: var(--vs-brand-color-neutrals-900);
  --vs-semantic-text-secondary: var(--vs-brand-color-neutrals-700);
  --vs-semantic-text-action-disabled: var(--vs-brand-color-neutrals-400);
  --vs-semantic-text-action-neutral: var(--vs-brand-color-neutrals-800);
  --vs-semantic-text-action-primary: var(--vs-brand-color-primary-base);
  --vs-semantic-text-action-primary-hover: var(--vs-brand-color-primary-hover);
  --vs-semantic-text-action-primary-pressed: var(--vs-brand-color-primary-pressed);
  --vs-semantic-text-on-status-inverse: var(--vs-brand-color-neutrals-100);
  --vs-semantic-text-on-status-muted: var(--vs-brand-color-basics-black);
  --vs-semantic-text-on-status-primary: var(--vs-brand-color-neutrals-900);
  --vs-semantic-text-on-status-vibrant: var(--vs-brand-color-neutrals-100);
  --vs-semantic-utility-transparent: var(--vs-brand-color-basics-transparent);
  --vs-brand-color-accent-contrast: var(--vs-primitive-iryo-lightred-600);
  --vs-brand-color-accent-contrast-hover: var(--vs-primitive-iryo-lightred-500);
  --vs-brand-color-accent-contrast-pressed: var(--vs-primitive-iryo-lightred-400);
  --vs-brand-color-accent-hover: var(--vs-primitive-iryo-lightred-800);
  --vs-brand-color-accent-main: var(--vs-primitive-iryo-lightred-900);
  --vs-brand-color-accent-pressed: var(--vs-primitive-iryo-lightred-700);
  --vs-brand-color-accent-softest: var(--vs-primitive-iryo-lightred-100);
  --vs-brand-color-accent-surface: var(--vs-primitive-iryo-lightred-300);
  --vs-brand-color-alphas-backdrop-dark-default: var(--vs-primitive-alphas-dark-24);
  --vs-brand-color-alphas-backdrop-dark-muted: var(--vs-primitive-alphas-dark-4);
  --vs-brand-color-alphas-backdrop-light-default: var(--vs-primitive-alphas-light-24);
  --vs-brand-color-alphas-backdrop-light-muted: var(--vs-primitive-alphas-light-4);
  --vs-brand-color-alphas-overlay-hover: var(--vs-primitive-alphas-dark-12);
  --vs-brand-color-alphas-overlay-hover-inverse: var(--vs-primitive-alphas-light-12);
  --vs-brand-color-alphas-overlay-pressed: var(--vs-primitive-alphas-dark-16);
  --vs-brand-color-alphas-overlay-pressed-inverse: var(--vs-primitive-alphas-light-16);
  --vs-brand-color-alphas-shadow-dark-default: var(--vs-primitive-alphas-dark-20);
  --vs-brand-color-alphas-shadow-dark-soft: var(--vs-primitive-alphas-dark-16);
  --vs-brand-color-alphas-shadow-light-default: var(--vs-primitive-alphas-light-20);
  --vs-brand-color-alphas-shadow-light-soft: var(--vs-primitive-alphas-light-32);
  --vs-brand-color-basics-black: var(--vs-primitive-basics-black);
  --vs-brand-color-basics-transparent: var(--vs-primitive-basics-transparent);
  --vs-brand-color-basics-white: var(--vs-primitive-basics-white);
  --vs-brand-color-neutrals-100: var(--vs-primitive-grey-100);
  --vs-brand-color-neutrals-200: var(--vs-primitive-grey-200);
  --vs-brand-color-neutrals-300: var(--vs-primitive-grey-300);
  --vs-brand-color-neutrals-400: var(--vs-primitive-grey-400);
  --vs-brand-color-neutrals-50: var(--vs-primitive-grey-50);
  --vs-brand-color-neutrals-500: var(--vs-primitive-grey-500);
  --vs-brand-color-neutrals-600: var(--vs-primitive-grey-600);
  --vs-brand-color-neutrals-700: var(--vs-primitive-grey-700);
  --vs-brand-color-neutrals-800: var(--vs-primitive-grey-800);
  --vs-brand-color-neutrals-900: var(--vs-primitive-grey-900);
  --vs-brand-color-neutrals-950: var(--vs-primitive-grey-950);
  --vs-brand-color-primary-base: var(--vs-primitive-iryo-darkred-100);
  --vs-brand-color-primary-contrast: var(--vs-primitive-iryo-lightred-600);
  --vs-brand-color-primary-contrast-hover: var(--vs-primitive-iryo-lightred-500);
  --vs-brand-color-primary-contrast-pressed: var(--vs-primitive-iryo-lightred-400);
  --vs-brand-color-primary-hover: var(--vs-primitive-iryo-darkred-200);
  --vs-brand-color-primary-pressed: var(--vs-primitive-iryo-darkred-300);
  --vs-brand-color-primary-strong: var(--vs-primitive-iryo-lightred-800);
  --vs-brand-color-primary-subtle: var(--vs-primitive-iryo-lightred-300);
  --vs-brand-color-status-error-main: var(--vs-primitive-status-pink-400);
  --vs-brand-color-status-error-soft: var(--vs-primitive-status-pink-200);
  --vs-brand-color-status-error-strong: var(--vs-primitive-status-pink-500);
  --vs-brand-color-status-error-subtle: var(--vs-primitive-status-pink-100);
  --vs-brand-color-status-error-vibrant: var(--vs-primitive-status-pink-300);
  --vs-brand-color-status-info-main: var(--vs-primitive-status-blue-400);
  --vs-brand-color-status-info-soft: var(--vs-primitive-status-blue-200);
  --vs-brand-color-status-info-strong: var(--vs-primitive-status-blue-500);
  --vs-brand-color-status-info-subtle: var(--vs-primitive-status-blue-100);
  --vs-brand-color-status-info-vibrant: var(--vs-primitive-status-blue-300);
  --vs-brand-color-status-success-main: var(--vs-primitive-status-green-400);
  --vs-brand-color-status-success-soft: var(--vs-primitive-status-green-200);
  --vs-brand-color-status-success-strong: var(--vs-primitive-status-green-500);
  --vs-brand-color-status-success-subtle: var(--vs-primitive-status-green-100);
  --vs-brand-color-status-success-vibrant: var(--vs-primitive-status-green-300);
  --vs-brand-color-status-warning-contrast: var(--vs-primitive-status-yellow-600);
  --vs-brand-color-status-warning-main: var(--vs-primitive-status-yellow-400);
  --vs-brand-color-status-warning-soft: var(--vs-primitive-status-yellow-200);
  --vs-brand-color-status-warning-strong: var(--vs-primitive-status-yellow-500);
  --vs-brand-color-status-warning-subtle: var(--vs-primitive-status-yellow-100);
  --vs-brand-color-status-warning-vibrant: var(--vs-primitive-status-yellow-300);
  --vs-brand-border-width-none: var(--vs-primitive-units-0);
  --vs-brand-border-width-thin: var(--vs-primitive-units-1);
  --vs-brand-border-width-bold: var(--vs-primitive-units-2);
  --vs-brand-border-width-thick: var(--vs-primitive-units-4);
  --vs-brand-effect-blur-overlay: var(--vs-primitive-units-4);
  --vs-brand-radius-none: var(--vs-primitive-units-0);
  --vs-brand-radius-2xs: var(--vs-primitive-units-2);
  --vs-brand-radius-xs: var(--vs-primitive-units-4);
  --vs-brand-radius-s: var(--vs-primitive-units-8);
  --vs-brand-radius-m: var(--vs-primitive-units-12);
  --vs-brand-radius-l: var(--vs-primitive-units-16);
  --vs-brand-radius-xl: var(--vs-primitive-units-32);
  --vs-brand-radius-2xl: var(--vs-primitive-units-48);
  --vs-brand-radius-full: 62.5rem;
  --vs-brand-shadow-offset-x: var(--vs-primitive-units-0);
  --vs-brand-shadow-offset-y: var(--vs-primitive-units-0);
  --vs-brand-shadow-spread: var(--vs-primitive-units-0);
  --vs-brand-shadow-blur: var(--vs-primitive-units-12);
  --vs-brand-spacing-big-2xs: var(--vs-primitive-units-72);
  --vs-brand-spacing-big-xs: var(--vs-primitive-units-80);
  --vs-brand-spacing-big-s: var(--vs-primitive-units-88);
  --vs-brand-spacing-big-m: var(--vs-primitive-units-96);
  --vs-brand-spacing-big-l: var(--vs-primitive-units-104);
  --vs-brand-spacing-big-xl: var(--vs-primitive-units-112);
  --vs-brand-spacing-big-2xl: var(--vs-primitive-units-120);
  --vs-brand-spacing-big-3xl: var(--vs-primitive-units-128);
  --vs-brand-spacing-mid-3xs: var(--vs-primitive-units-18);
  --vs-brand-spacing-mid-2xs: var(--vs-primitive-units-20);
  --vs-brand-spacing-mid-xs: var(--vs-primitive-units-24);
  --vs-brand-spacing-mid-s: var(--vs-primitive-units-28);
  --vs-brand-spacing-mid-m: var(--vs-primitive-units-32);
  --vs-brand-spacing-mid-l: var(--vs-primitive-units-36);
  --vs-brand-spacing-mid-xl: var(--vs-primitive-units-40);
  --vs-brand-spacing-mid-2xl: var(--vs-primitive-units-48);
  --vs-brand-spacing-mid-3xl: var(--vs-primitive-units-56);
  --vs-brand-spacing-mid-4xl: var(--vs-primitive-units-64);
  --vs-brand-spacing-neg-s: var(--vs-primitive-units-neg-2);
  --vs-brand-spacing-neg-m: var(--vs-primitive-units-neg-1);
  --vs-brand-spacing-sm-2xs: var(--vs-primitive-units-1);
  --vs-brand-spacing-sm-xs: var(--vs-primitive-units-2);
  --vs-brand-spacing-sm-s: var(--vs-primitive-units-4);
  --vs-brand-spacing-sm-m: var(--vs-primitive-units-8);
  --vs-brand-spacing-sm-l: var(--vs-primitive-units-12);
  --vs-brand-spacing-sm-xl: var(--vs-primitive-units-16);
  --vs-brand-text-body-l-letter-spacing: var(--vs-primitive-units-0);
  --vs-brand-text-body-l-font-size: var(--vs-primitive-units-18);
  --vs-brand-text-body-l-line-height: var(--vs-primitive-units-28);
  --vs-brand-text-body-m-letter-spacing: var(--vs-primitive-units-0);
  --vs-brand-text-body-m-font-size: var(--vs-primitive-units-16);
  --vs-brand-text-body-m-line-height: var(--vs-primitive-units-24);
  --vs-brand-text-body-s-letter-spacing: var(--vs-primitive-units-0);
  --vs-brand-text-body-s-font-size: var(--vs-primitive-units-14);
  --vs-brand-text-body-s-line-height: var(--vs-primitive-units-20);
  --vs-brand-text-body-xl-letter-spacing: var(--vs-primitive-units-0);
  --vs-brand-text-body-xl-font-size: var(--vs-primitive-units-20);
  --vs-brand-text-body-xl-line-height: var(--vs-primitive-units-28);
  --vs-brand-text-body-xs-letter-spacing: var(--vs-primitive-units-0);
  --vs-brand-text-body-xs-font-size: var(--vs-primitive-units-12);
  --vs-brand-text-body-xs-line-height: var(--vs-primitive-units-18);
  --vs-brand-text-title-2xl-letter-spacing: var(--vs-primitive-units-neg-1);
  --vs-brand-text-title-2xl-font-size-mb: var(--vs-primitive-units-40);
  --vs-brand-text-title-2xl-line-height-mb: var(--vs-primitive-units-48);
  --vs-brand-text-title-2xl-font-size-dk: var(--vs-primitive-units-56);
  --vs-brand-text-title-2xl-line-height-dk: var(--vs-primitive-units-64);
  --vs-brand-text-title-l-letter-spacing: var(--vs-primitive-units-0);
  --vs-brand-text-title-l-font-size-mb: var(--vs-primitive-units-32);
  --vs-brand-text-title-l-font-size-dk: var(--vs-primitive-units-40);
  --vs-brand-text-title-l-line-height-mb: var(--vs-primitive-units-40);
  --vs-brand-text-title-l-line-height-dk: var(--vs-primitive-units-48);
  --vs-brand-text-title-m-letter-spacing: var(--vs-primitive-units-0);
  --vs-brand-text-title-m-font-size-mb: var(--vs-primitive-units-28);
  --vs-brand-text-title-m-font-size-dk: var(--vs-primitive-units-32);
  --vs-brand-text-title-m-line-height-mb: var(--vs-primitive-units-36);
  --vs-brand-text-title-m-line-height-dk: var(--vs-primitive-units-40);
  --vs-brand-text-title-s-letter-spacing: var(--vs-primitive-units-0);
  --vs-brand-text-title-s-font-size-dk: var(--vs-primitive-units-24);
  --vs-brand-text-title-s-font-size-mb: var(--vs-primitive-units-24);
  --vs-brand-text-title-s-line-height-dk: var(--vs-primitive-units-32);
  --vs-brand-text-title-s-line-height-mb: var(--vs-primitive-units-32);
  --vs-brand-text-title-xl-letter-spacing: var(--vs-primitive-units-neg-0-5);
  --vs-brand-text-title-xl-font-size-mb: var(--vs-primitive-units-36);
  --vs-brand-text-title-xl-font-size-dk: var(--vs-primitive-units-48);
  --vs-brand-text-title-xl-line-height-mb: var(--vs-primitive-units-48);
  --vs-brand-text-title-xl-line-height-dk: var(--vs-primitive-units-56);
  --vs-brand-text-body-l-weight-regular: var(--vs-primitive-font-weight-regular);
  --vs-brand-text-body-l-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-body-m-weight-regular: var(--vs-primitive-font-weight-regular);
  --vs-brand-text-body-m-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-body-s-weight-regular: var(--vs-primitive-font-weight-regular);
  --vs-brand-text-body-s-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-body-xl-weight-regular: var(--vs-primitive-font-weight-regular);
  --vs-brand-text-body-xl-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-body-xs-weight-regular: var(--vs-primitive-font-weight-regular);
  --vs-brand-text-body-xs-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-font-base: var(--vs-primitive-font-family-base);
  --vs-brand-text-font-family: var(--vs-primitive-font-family-rem);
  --vs-brand-text-font-weight-regular: var(--vs-primitive-font-weight-regular);
  --vs-brand-text-font-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-title-2xl-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-title-l-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-title-m-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-title-s-weight-medium: var(--vs-primitive-font-weight-medium);
  --vs-brand-text-title-xl-weight-medium: var(--vs-primitive-font-weight-medium);
}
:root {
  --mat-form-field-disabled-trailing-icon-color: var(--vs-components-input-default-icon);
  --mat-form-field-error-text-color: var(--vs-components-input-error-text);
  --mat-form-field-filled-disabled-label-text-color: var(--vs-components-input-disabled-label);
  --mat-form-field-filled-input-text-placeholder-color: var(--vs-components-input-default-text);
  --mat-form-field-filled-label-text-color: var(--vs-components-input-default-label);
  --mat-form-field-subscript-text-font:
    var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  --mat-form-field-subscript-text-line-height: var(--vs-semantic-text-body-xs-line-height);
  --mat-form-field-subscript-text-size: var(--vs-semantic-text-body-xs-font-size);
  --mat-form-field-subscript-text-weight: var(--vs-semantic-text-body-m-weight-regular);
  --mat-icon-color: var(--vs-components-input-default-icon);
  --mat-mdc-form-field-floating-label-scale: var(--vs-semantic-text-body-xs-font-size);
  --mdc-filled-text-field-error-label-text-color: var(--vs-components-input-error-label);
  --mdc-filled-text-field-focus-label-text-color: var(--vs-components-input-default-label);
  --mdc-filled-text-field-input-text-color: var(--vs-components-input-default-text);
  --mdc-filled-text-field-label-text-color: var(--vs-components-input-default-label);
  --mat-form-field-filled-focus-label-text-color: var(--vs-components-input-default-label);
  --mat-form-field-container-height: 2rem;
  --mat-icon-button-icon-size: var(--vs-components-button-icon-size-s);
}
.mat-mdc-form-field {
  gap: var(--vs-components-input-gap-vt);
}
.mat-mdc-form-field .mat-mdc-form-field-icon-suffix {
  padding: 0 0 0 var(--vs-components-input-gap-hz);
}
.mat-mdc-form-field
  .mdc-text-field--filled.mdc-text-field--disabled
  .mat-mdc-form-field-icon-suffix
  > button[ghost-fields],
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly])
  .mat-mdc-form-field-icon-suffix
  > button[ghost-fields] {
  display: none;
}
.mat-mdc-form-field .mat-mdc-form-field-icon-prefix > .mat-icon,
.mat-mdc-form-field .mat-mdc-form-field-icon-suffix > .mat-icon {
  width: var(--mat-icon-button-icon-size);
  height: var(--mat-icon-button-icon-size);
  padding: 0;
}
.mat-mdc-form-field .mat-mdc-button[ghost-fields],
.mat-mdc-form-field .mat-mdc-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  height: calc(var(--mat-icon-button-icon-size) + 0.5rem);
  width: calc(var(--mat-icon-button-icon-size) + 0.5rem);
}
.mat-mdc-form-field .mat-mdc-button[ghost-fields] .mat-icon,
.mat-mdc-form-field .mat-mdc-icon-button .mat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mat-mdc-form-field .mat-mdc-button[ghost-fields]:hover > .mat-mdc-button-persistent-ripple:before,
.mat-mdc-form-field
  .mat-mdc-button[ghost-fields].cdk-focused.cdk-mouse-focused
  > .mat-mdc-button-persistent-ripple:before,
.mat-mdc-form-field
  .mat-mdc-button[ghost-fields].cdk-keyboard-focused
  > .mat-mdc-button-persistent-ripple:before,
.mat-mdc-form-field .mat-mdc-icon-button:hover > .mat-mdc-button-persistent-ripple:before,
.mat-mdc-form-field
  .mat-mdc-icon-button.cdk-focused.cdk-mouse-focused
  > .mat-mdc-button-persistent-ripple:before,
.mat-mdc-form-field
  .mat-mdc-icon-button.cdk-keyboard-focused
  > .mat-mdc-button-persistent-ripple:before {
  background-color: transparent;
}
.mat-mdc-form-field .mat-mdc-button[ghost-fields].cdk-focused .mat-mdc-button-ripple,
.mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-ripple {
  display: none;
}
.mat-mdc-form-field .mat-mdc-button[ghost-fields].cdk-keyboard-focused,
.mat-mdc-form-field .mat-mdc-icon-button.cdk-keyboard-focused {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field .mdc-text-field--filled {
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-default-border);
  border-radius: var(--vs-components-input-radius);
  padding: var(--vs-components-input-padding-y) var(--vs-components-input-padding-icon)
    var(--vs-components-input-padding-y) var(--vs-components-input-padding-x);
  transition: all 0.5s ease-in-out;
}
.mat-mdc-form-field .mdc-text-field--filled .mdc-line-ripple:after,
.mat-mdc-form-field .mdc-text-field--filled .mdc-line-ripple:before {
  display: none;
}
.mat-mdc-form-field .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: var(--vs-components-input-default-bg);
}
.mat-mdc-form-field .mdc-text-field--filled.mdc-text-field--disabled {
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-disabled-border);
  background: var(--vs-components-input-disabled-bg);
}
.mat-mdc-form-field
  .mdc-text-field--filled.mdc-text-field--disabled
  .mat-mdc-form-field-icon-prefix
  .mat-icon,
.mat-mdc-form-field
  .mdc-text-field--filled.mdc-text-field--disabled
  .mat-mdc-form-field-icon-suffix
  .mat-icon {
  color: var(--mat-form-field-disabled-trailing-icon-color);
  opacity: 0.5;
}
.mat-mdc-form-field .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]) {
  border: var(--vs-components-input-border-width) solid transparent;
  background: transparent;
}
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly])
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly])
  .mat-mdc-form-field-icon-prefix
  .mat-icon,
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly])
  .mat-mdc-form-field-icon-suffix
  .mat-icon {
  color: var(--mat-form-field-disabled-trailing-icon-color);
  opacity: 0.5;
}
.mat-mdc-form-field .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]):hover,
.mat-mdc-form-field .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]):active,
.mat-mdc-form-field .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]):focus-within,
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]).mdc-text-field--focused {
  border-color: transparent;
  background: transparent;
}
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]):hover
  .mdc-floating-label,
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]):active
  .mdc-floating-label,
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]):focus-within
  .mdc-floating-label,
.mat-mdc-form-field
  .mdc-text-field--filled:has(.mat-mdc-input-element[readonly]).mdc-text-field--focused
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-form-field .mdc-text-field--focused:not(.mdc-text-field--disabled) {
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-pressed-border);
  background: var(--vs-components-input-pressed-bg);
}
.mat-mdc-form-field .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: var(--vs-components-input-default-label);
}
.mat-mdc-form-field
  .mdc-text-field--focused:not(.mdc-text-field--disabled):has(
    .mat-mdc-input-element.cdk-keyboard-focused
  ) {
  background: var(--vs-components-input-hover-bg);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field .mdc-text-field--focused:has(.mat-mdc-input-element[readonly]) {
  border: var(--vs-components-input-border-width) solid transparent;
  background: transparent;
}
.mat-mdc-form-field
  .mdc-text-field--focused:has(.mat-mdc-input-element[readonly])
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-form-field
  .mdc-text-field--focused:has(.mat-mdc-input-element[readonly])
  .mat-mdc-form-field-focus-overlay {
  border-color: transparent;
  background-color: transparent;
}
.mat-mdc-form-field
  .mdc-text-field--focused:has(.mat-mdc-input-element[readonly]:placeholder-shown:focus)
  .mdc-floating-label {
  top: calc(var(--mat-form-field-container-height) / 2);
  transform: none;
}
.mat-mdc-form-field
  .mdc-text-field--focused:not(.mdc-text-field--disabled):has(
    .mat-mdc-input-element[readonly].cdk-keyboard-focused
  ) {
  box-shadow: none;
  outline: none;
  background: transparent;
  border-color: transparent;
}
.mat-mdc-form-field
  .mdc-text-field--focused:not(.mdc-text-field--disabled):has(
    .mat-mdc-input-element[readonly].cdk-keyboard-focused
  )
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-form-field .mdc-text-field--invalid:not(.mdc-text-field--disabled) {
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-error-border);
  background: var(--vs-components-input-default-bg);
}
.mat-mdc-form-field .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input {
  color: var(--vs-components-input-error-text);
}
.mat-mdc-form-field
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mat-mdc-form-field-icon-prefix
  .mat-icon,
.mat-mdc-form-field
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mat-mdc-form-field-icon-suffix
  .mat-icon {
  color: var(--vs-components-input-error-icon);
}
.mat-mdc-form-field
  .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused:not(
    .mdc-text-field--disabled
  ):has(.mat-mdc-input-element.cdk-keyboard-focused) {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field .mdc-text-field__input.mat-mdc-input-element {
  width: 100%;
  min-width: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  margin-top: var(--vs-components-input-field-margin-top);
  height: auto;
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-s-font-size);
  line-height: var(--vs-semantic-text-body-s-line-height);
}
.mat-mdc-form-field .mdc-text-field__input.mat-mdc-input-element[readonly] {
  caret-color: transparent;
  cursor: text;
}
.mat-mdc-form-field .mat-mdc-form-field-flex {
  align-items: center;
}
.mat-mdc-form-field .mat-mdc-form-field-focus-overlay {
  border-color: transparent;
  background-color: transparent;
}
.mat-mdc-form-field .mat-mdc-form-field-infix {
  width: auto;
  padding: 0;
  min-height: auto;
}
.mat-mdc-form-field-icon-prefix {
  margin-left: -0.5rem;
}
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
  top: calc(var(--mat-form-field-container-height) / 2);
  font-family: var(--mat-form-field-subscript-text-font);
}
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label:focus-within {
  top: 60%;
}
.mat-mdc-text-field-wrapper:has(.mat-mdc-input-element[readonly])
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-text-field-wrapper:has(.mat-mdc-input-element[readonly])
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label:focus-within {
  top: calc(var(--mat-form-field-container-height) / 2);
}
.mat-mdc-text-field-wrapper:has(.mat-mdc-input-element[readonly]).mdc-text-field--filled:not(
    .mdc-text-field--disabled,
    .mdc-text-field--focused
  ):hover,
.mat-mdc-text-field-wrapper:has(.mat-mdc-input-element[readonly]).mdc-text-field--filled:not(
    .mdc-text-field--disabled,
    .mdc-text-field--focused
  ):active,
.mat-mdc-text-field-wrapper:has(.mat-mdc-input-element[readonly]).mdc-text-field--filled:not(
    .mdc-text-field--disabled,
    .mdc-text-field--focused
  ):focus-within {
  border-color: transparent;
  background: transparent;
}
.mat-mdc-form-field
  .mat-mdc-text-field-wrapper:has(
    .mat-mdc-input-element[readonly]
  ).mdc-text-field--filled.mdc-text-field--focused
  .mat-mdc-form-field-flex
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-form-field
  .mat-mdc-text-field-wrapper:has(.mat-mdc-input-element[readonly]).mdc-text-field--filled:not(
    .mdc-text-field--disabled,
    .mdc-text-field--focused
  ):hover
  .mat-mdc-form-field-flex
  .mdc-floating-label,
.mat-mdc-form-field
  .mat-mdc-text-field-wrapper:has(.mat-mdc-input-element[readonly]).mdc-text-field--filled:not(
    .mdc-text-field--disabled,
    .mdc-text-field--focused
  ):active
  .mat-mdc-form-field-flex
  .mdc-floating-label,
.mat-mdc-form-field
  .mat-mdc-text-field-wrapper:has(.mat-mdc-input-element[readonly]).mdc-text-field--filled:not(
    .mdc-text-field--disabled,
    .mdc-text-field--focused
  ):focus-within
  .mat-mdc-form-field-flex
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mdc-floating-label.mdc-floating-label--float-above {
  margin-top: var(--vs-components-input-label-focussed-margin-top);
}
.mdc-text-field--filled .mdc-floating-label {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-medium);
  font-size: var(--vs-semantic-text-body-xs-font-size);
  line-height: var(--vs-semantic-text-body-xs-line-height);
}
.mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper {
  padding: var(--vs-components-input-padding-helper) var(--vs-components-input-padding-x) 0
    var(--vs-components-input-padding-x);
}
.mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint {
  color: var(--vs-components-input-default-helper);
}
.mat-mdc-form-field:is(.mat-mdc-form-field-disabled, .mat-form-field-disabled)
  .mat-mdc-form-field-subscript-wrapper
  .mat-mdc-form-field-hint {
  color: var(--vs-components-input-disabled-helper);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[readonly])
  .mat-mdc-form-field-subscript-wrapper
  .mat-mdc-form-field-hint {
  color: var(--vs-components-input-disabled-helper);
}
.mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error strong {
  font-weight: var(--vs-semantic-text-body-m-weight-medium);
}
:root {
  --mat-badge-container-shape: var(--vs-semantic-radius-full);
  --mat-badge-legacy-container-size: var(--vs-components-badge-width);
  --mat-badge-container-size: var(--vs-components-badge-width);
  --mat-badge-small-size-container-overlap-offset: -4px -2px;
  --mat-badge-container-overlap-offset: -12px -8px;
  --mat-badge-background-color: var(--vs-components-badge-default-bg);
  --mat-badge-text-color: var(--vs-components-badge-default-text);
}
body .mat-badge-content {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-xs-font-size);
  line-height: var(--vs-semantic-text-body-xs-line-height);
}
body .mat-badge-large .mat-badge-overlap .mat-badge-content {
  margin: var(--mat-badge-container-overlap-offset);
}
body .mat-badge-medium .mat-badge-content {
  padding: var(--vs-semantic-spacing-sm-2xs) var(--vs-semantic-spacing-sm-xs);
}
body .mat-badge-medium .mat-badge-overlap .mat-badge-content {
  margin: var(--mat-badge-container-overlap-offset);
}
body .mat-badge-small.mat-badge-overlap .mat-badge-content {
  margin: var(--mat-badge-small-size-container-overlap-offset);
}
body .badge-dot.mat-badge .mat-badge-content {
  width: var(--vs-components-badge-width-dot);
  height: var(--vs-components-badge-width-dot);
  min-width: var(--vs-components-badge-width-dot);
  min-height: var(--vs-components-badge-width-dot);
  padding: 0;
  font-size: 0;
  line-height: 0;
}
body .badge-pill.mat-badge .mat-badge-content {
  width: auto;
  max-width: calc(3ch + var(--vs-components-badge-padding-x) * 2);
}
.badge-highlighted .mat-badge-content {
  --mat-badge-background-color: var(--vs-components-badge-highlighted-bg);
  --mat-badge-text-color: var(--vs-components-badge-highlighted-text);
}
:root {
  --mat-sys-primary: transparent;
  --mdc-text-button-container-shape: var(--vs-components-button-radius-default);
  --mdc-text-button-container-height: auto;
  --mdc-text-button-label-text-color: var(--vs-components-button-primary-text-default);
}
.mat-mdc-button.is-disabled,
.mat-mdc-button:disabled,
.mat-mdc-button[aria-disabled='true'] {
  cursor: not-allowed;
  pointer-events: none;
}
.mat-mdc-button > .mat-icon {
  margin-inline: 0;
}
.mat-mdc-button-base .mat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  margin-left: 0;
}
.mat-mdc-button-base .mat-mdc-button > .mat-icon {
  margin-right: 0;
  margin-left: 0;
}
.mdc-button.mat-mdc-button {
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  box-sizing: border-box;
  border: var(--vs-components-button-border-width) solid var(--vs-components-button-border-default);
  line-height: inherit;
  appearance: none;
  overflow: visible;
  vertical-align: middle;
  display: flex;
  min-width: var(--vs-components-button-min-width);
  min-height: var(--vs-components-button-min-height-m);
  max-height: calc(var(--vs-components-button-min-height-m) - 4px);
  justify-content: center;
  align-items: center;
  transition: all ease-in-out 0.2s;
  -webkit-text-decoration: var(--vs-components-button-font-text-decoration);
  text-decoration: var(--vs-components-button-font-text-decoration);
}
.mdc-button.mat-mdc-button .mat-icon {
  color: currentcolor;
  fill: currentcolor;
  margin-right: 0;
  margin-left: 0;
}
.mdc-button.mat-mdc-button .mdc-button__label + .mat-icon {
  margin-right: 0;
  margin-left: 0;
}
.mdc-button.mat-mdc-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.mdc-button.mat-mdc-button:not(:disabled) {
  background: var(--vs-components-button-primary-bg-default);
  border-style: inset;
  color: var(--vs-components-button-primary-text-default);
}
.mdc-button.mat-mdc-button.cdk-focused.cdk-mouse-focused {
  background: var(--vs-components-button-primary-bg-pressed);
  color: var(--vs-components-button-primary-text-pressed);
}
.mdc-button.mat-mdc-button:hover {
  cursor: pointer;
  background: var(--vs-components-button-primary-bg-hover);
  color: var(--vs-components-button-primary-text-hover);
}
.mdc-button.mat-mdc-button:disabled {
  cursor: default;
  pointer-events: none;
  background: var(--vs-components-button-primary-bg-disabled);
  color: var(--vs-components-button-primary-text-disabled);
}
.mdc-button.mat-mdc-button:disabled .mdc-button__label {
  color: var(--vs-components-button-primary-text-disabled);
}
.mdc-button.mat-mdc-button:focus-visible,
.mdc-button.mat-mdc-button.cdk-keyboard-focused {
  background: var(--vs-components-button-primary-bg-hover);
  color: var(--vs-components-button-primary-text-hover);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mdc-button.mat-mdc-button[hidden] {
  display: none;
}
.mdc-button.mat-mdc-button .mdc-button__label {
  display: flex;
  justify-content: center;
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-medium);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
  text-align: var(--vs-components-button-font-text-align);
  display: inline-flex;
  align-items: center;
  gap: var(--vs-components-button-padding-label-s);
}
.mdc-button.mat-mdc-button[outline],
.mdc-button.mat-mdc-button[outline-reversed] {
  border-style: solid;
}
.mdc-button.mat-mdc-button[outline]:not(:disabled),
.mdc-button.mat-mdc-button[outline-reversed]:not(:disabled) {
  background: var(--vs-components-button-outline-bg-default);
  border-color: var(--vs-components-button-outline-border-default);
  color: var(--vs-components-button-outline-text-default);
}
.mdc-button.mat-mdc-button[outline]:disabled,
.mdc-button.mat-mdc-button[outline-reversed]:disabled {
  background: var(--vs-components-button-outline-bg-disabled);
  border-color: var(--vs-components-button-outline-border-disabled);
  color: var(--vs-components-button-outline-text-disabled);
}
.mdc-button.mat-mdc-button[outline]:disabled .mdc-button__label,
.mdc-button.mat-mdc-button[outline-reversed]:disabled .mdc-button__label {
  color: var(--vs-components-button-outline-text-disabled);
}
.mdc-button.mat-mdc-button[outline]:active,
.mdc-button.mat-mdc-button[outline].cdk-focused.cdk-mouse-focused,
.mdc-button.mat-mdc-button[outline-reversed]:active,
.mdc-button.mat-mdc-button[outline-reversed].cdk-focused.cdk-mouse-focused {
  background: var(--vs-components-button-outline-bg-pressed);
  color: var(--vs-components-button-outline-text-pressed);
}
.mdc-button.mat-mdc-button[outline]:hover,
.mdc-button.mat-mdc-button[outline-reversed]:hover {
  background: var(--vs-components-button-outline-bg-hover);
  color: var(--vs-components-button-outline-text-hover);
}
.mdc-button.mat-mdc-button[outline]:focus-visible,
.mdc-button.mat-mdc-button[outline].cdk-keyboard-focused,
.mdc-button.mat-mdc-button[outline-reversed]:focus-visible,
.mdc-button.mat-mdc-button[outline-reversed].cdk-keyboard-focused {
  background: var(--vs-components-button-outline-bg-hover);
  border-color: var(--vs-components-general-border-focus);
  color: var(--vs-components-button-outline-text-default);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mdc-button.mat-mdc-button[primary-reversed]:not(:disabled),
.mdc-button.mat-mdc-button[ghost]:not(:disabled),
.mdc-button.mat-mdc-button[ghost-reversed]:not(:disabled) {
  background: var(--vs-components-button-ghost-bg-default);
  color: var(--vs-components-button-ghost-text-default);
}
.mdc-button.mat-mdc-button[primary-reversed]:disabled,
.mdc-button.mat-mdc-button[ghost]:disabled,
.mdc-button.mat-mdc-button[ghost-reversed]:disabled {
  background: var(--vs-components-button-ghost-bg-disabled);
  border-color: transparent;
  color: var(--vs-components-button-ghost-text-disabled);
}
.mdc-button.mat-mdc-button[primary-reversed]:disabled .mdc-button__label,
.mdc-button.mat-mdc-button[ghost]:disabled .mdc-button__label,
.mdc-button.mat-mdc-button[ghost-reversed]:disabled .mdc-button__label {
  color: var(--vs-components-button-ghost-text-disabled);
}
.mdc-button.mat-mdc-button[primary-reversed]:active,
.mdc-button.mat-mdc-button[primary-reversed].cdk-focused.cdk-mouse-focused,
.mdc-button.mat-mdc-button[ghost]:active,
.mdc-button.mat-mdc-button[ghost].cdk-focused.cdk-mouse-focused,
.mdc-button.mat-mdc-button[ghost-reversed]:active,
.mdc-button.mat-mdc-button[ghost-reversed].cdk-focused.cdk-mouse-focused {
  background: var(--vs-components-button-ghost-bg-pressed);
  color: var(--vs-components-button-ghost-text-pressed);
}
.mdc-button.mat-mdc-button[primary-reversed]:hover,
.mdc-button.mat-mdc-button[ghost]:hover,
.mdc-button.mat-mdc-button[ghost-reversed]:hover {
  background: var(--vs-components-button-ghost-bg-hover);
  color: var(--vs-components-button-ghost-text-hover);
}
.mdc-button.mat-mdc-button[primary-reversed]:focus-visible,
.mdc-button.mat-mdc-button[primary-reversed].cdk-keyboard-focused,
.mdc-button.mat-mdc-button[ghost]:focus-visible,
.mdc-button.mat-mdc-button[ghost].cdk-keyboard-focused,
.mdc-button.mat-mdc-button[ghost-reversed]:focus-visible,
.mdc-button.mat-mdc-button[ghost-reversed].cdk-keyboard-focused {
  background: var(--vs-components-button-ghost-bg-hover);
  border-color: var(--vs-components-general-border-focus);
  color: var(--vs-components-button-ghost-text-default);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mdc-button.mat-mdc-button[ghost-fields]:not(:disabled) {
  background: var(--vs-components-button-ghost-fields-bg-default);
  color: var(--vs-components-button-ghost-fields-text-default);
}
.mdc-button.mat-mdc-button[ghost-fields]:disabled {
  background: var(--vs-components-button-ghost-fields-bg-disabled);
  color: var(--vs-components-button-ghost-fields-text-disabled);
}
.mdc-button.mat-mdc-button[ghost-fields]:disabled .mdc-button__label {
  color: var(--vs-components-button-ghost-fields-text-disabled);
  padding: 0 var(--vs-components-button-padding-label-xs);
}
.mdc-button.mat-mdc-button[ghost-fields]:active,
.mdc-button.mat-mdc-button[ghost-fields].cdk-focused.cdk-mouse-focused {
  background: var(--vs-components-button-ghost-fields-bg-pressed);
  color: var(--vs-components-button-ghost-fields-text-pressed);
}
.mdc-button.mat-mdc-button[ghost-fields]:hover {
  background: var(--vs-components-button-ghost-fields-bg-hover);
  color: var(--vs-components-button-ghost-fields-text-hover);
}
.mdc-button.mat-mdc-button[ghost-fields]:focus-visible,
.mdc-button.mat-mdc-button[ghost-fields].cdk-keyboard-focused {
  background: var(--vs-components-button-ghost-fields-bg-hover);
  border-color: var(--vs-components-general-border-focus);
  color: var(--vs-components-button-ghost-fields-text-default);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mdc-button.mat-mdc-button.btn-size-small {
  min-height: var(--vs-components-button-min-height-s);
  max-height: calc(var(--vs-components-button-min-height-s) - 4px);
}
.mdc-button.mat-mdc-button.btn-size-small .mdc-button__label {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-medium);
  font-size: var(--vs-semantic-text-body-s-font-size);
  line-height: var(--vs-semantic-text-body-s-line-height);
}
.mdc-button.mat-mdc-button.btn-size-small.mat-mdc-button-base {
  padding: var(--vs-components-button-padding-y-s) var(--vs-components-button-padding-x-m);
}
.mdc-button.mat-mdc-button.btn-size-small .mdc-button__label {
  font-size: var(--vs-semantic-text-body-s-font-size);
  padding: 0 var(--vs-components-button-padding-label-s);
}
.mdc-button.mat-mdc-button.btn-size-small iryo-icon,
.mdc-button.mat-mdc-button.btn-size-small .mat-icon {
  width: var(--vs-components-button-icon-size-s);
  height: var(--vs-components-button-icon-size-s);
  font-size: var(--vs-components-button-icon-size-s);
  line-height: 1;
}
.mdc-button.mat-mdc-button.btn-size-small iryo-icon svg,
.mdc-button.mat-mdc-button.btn-size-small .mat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mdc-button.mat-mdc-button.btn-size-medium .mdc-button__label {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-medium);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
}
.mdc-button.mat-mdc-button.btn-size-medium.mat-mdc-button-base {
  padding: var(--vs-components-button-padding-y-m) var(--vs-components-button-padding-x-l);
}
.mdc-button.mat-mdc-button.btn-size-medium .mdc-button__label {
  font-size: var(--vs-semantic-text-body-m-font-size);
  padding: 0 var(--vs-components-button-padding-label-s);
}
.mdc-button.mat-mdc-button.btn-size-medium iryo-icon,
.mdc-button.mat-mdc-button.btn-size-medium .mat-icon {
  width: var(--vs-components-button-icon-size-m);
  height: var(--vs-components-button-icon-size-m);
  font-size: var(--vs-components-button-icon-size-m);
  line-height: 1;
}
.mdc-button.mat-mdc-button.btn-size-medium iryo-icon svg,
.mdc-button.mat-mdc-button.btn-size-medium .mat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mdc-icon-button[mat-icon-button] {
  --mat-icon-button-state-layer-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease-in-out 0.2s;
  border-radius: var(--vs-semantic-radius-full);
}
.mdc-icon-button[mat-icon-button] .mat-icon {
  min-height: auto;
  flex-shrink: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
  fill: var(--vs-components-button-primary-text-default);
}
.mdc-icon-button[mat-icon-button]:not(:disabled) {
  background: var(--vs-components-button-primary-bg-default);
  border-color: var(--vs-components-button-outline-border-default);
}
.mdc-icon-button[mat-icon-button].cdk-focused.cdk-mouse-focused,
.mdc-icon-button[mat-icon-button]:hover {
  background: var(--vs-components-button-primary-bg-pressed);
}
.mdc-icon-button[mat-icon-button]:disabled {
  background: var(--vs-components-button-primary-bg-disabled);
  color: var(--vs-components-button-primary-text-disabled);
}
.mdc-icon-button[mat-icon-button]:focus-visible,
.mdc-icon-button[mat-icon-button].cdk-keyboard-focused {
  background: var(--vs-components-button-primary-bg-hover);
  border-color: var(--vs-components-general-border-focus);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mdc-icon-button[mat-icon-button]:focus-visible .mat-icon,
.mdc-icon-button[mat-icon-button].cdk-keyboard-focused .mat-icon {
  fill: var(--vs-components-button-primary-text-hover);
}
.mdc-icon-button[mat-icon-button][outline] {
  border-width: var(--vs-components-button-border-width);
  border-style: solid;
}
.mdc-icon-button[mat-icon-button][outline]:not(:disabled) {
  background: var(--vs-components-button-outline-bg-default);
  border-color: var(--vs-components-button-outline-border-default);
}
.mdc-icon-button[mat-icon-button][outline]:not(:disabled) .mat-icon {
  fill: var(--vs-components-button-outline-text-default);
}
.mdc-icon-button[mat-icon-button][outline].cdk-focused.cdk-mouse-focused {
  background: var(--vs-components-button-outline-bg-pressed);
}
.mdc-icon-button[mat-icon-button][outline]:hover {
  background: var(--vs-components-button-outline-bg-hover);
}
.mdc-icon-button[mat-icon-button][outline]:disabled {
  background: var(--vs-components-button-outline-bg-disabled);
  border-color: var(--vs-components-button-outline-border-disabled);
}
.mdc-icon-button[mat-icon-button][outline]:disabled .mat-icon {
  fill: var(--vs-components-button-outline-text-disabled);
}
.mdc-icon-button[mat-icon-button][outline]:focus-visible,
.mdc-icon-button[mat-icon-button][outline].cdk-keyboard-focused {
  background: var(--vs-components-button-outline-bg-hover);
  border-color: var(--vs-components-general-border-focus);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mdc-icon-button[mat-icon-button][ghost]:not(:disabled) {
  background: var(--vs-components-button-ghost-bg-default);
  border-color: transparent;
}
.mdc-icon-button[mat-icon-button][ghost]:not(:disabled) .mat-icon {
  fill: var(--vs-components-button-ghost-text-default);
}
.mdc-icon-button[mat-icon-button][ghost].cdk-focused.cdk-mouse-focused {
  background: var(--vs-components-button-ghost-bg-pressed);
}
.mdc-icon-button[mat-icon-button][ghost]:hover {
  background: var(--vs-components-button-ghost-bg-hover);
}
.mdc-icon-button[mat-icon-button][ghost]:disabled {
  background: var(--vs-components-button-ghost-bg-disabled);
  border-color: transparent;
}
.mdc-icon-button[mat-icon-button][ghost]:disabled .mat-icon {
  fill: var(--vs-components-button-ghost-text-disabled);
}
.mdc-icon-button[mat-icon-button][ghost]:focus-visible,
.mdc-icon-button[mat-icon-button][ghost].cdk-keyboard-focused {
  background: var(--vs-components-button-ghost-bg-hover);
  border-color: var(--vs-components-general-border-focus);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mdc-icon-button[mat-icon-button][ghost-fields]:not(:disabled) {
  background: var(--vs-components-button-ghost-fields-bg-default);
  border-color: transparent;
}
.mdc-icon-button[mat-icon-button][ghost-fields]:not(:disabled) .mat-icon {
  fill: var(--vs-components-button-ghost-fields-text-default);
}
.mdc-icon-button[mat-icon-button][ghost-fields].cdk-focused.cdk-mouse-focused {
  background: var(--vs-components-button-ghost-fields-bg-pressed);
}
.mdc-icon-button[mat-icon-button][ghost-fields]:hover {
  background: var(--vs-components-button-ghost-fields-bg-hover);
}
.mdc-icon-button[mat-icon-button][ghost-fields]:disabled {
  background: var(--vs-components-button-ghost-fields-bg-disabled);
}
.mdc-icon-button[mat-icon-button][ghost-fields]:disabled .mat-icon {
  fill: var(--vs-components-button-ghost-fields-text-disabled);
}
.mdc-icon-button[mat-icon-button][ghost-fields]:focus-visible,
.mdc-icon-button[mat-icon-button][ghost-fields].cdk-keyboard-focused {
  background: var(--vs-components-button-ghost-fields-bg-hover);
  border-color: var(--vs-components-general-border-focus);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mdc-icon-button[mat-icon-button].btn-size-small {
  --mat-icon-button-icon-size: var(--vs-components-button-icon-size-s);
}
.mdc-icon-button[mat-icon-button].btn-size-small.mat-mdc-button-base {
  padding: var(--vs-components-button-icon-padding-y-xs)
    var(--vs-components-button-icon-padding-x-xs);
}
.mdc-icon-button[mat-icon-button].btn-size-small .mdc-button__label {
  font-size: var(--vs-semantic-text-body-s-font-size);
  padding: 0 var(--vs-components-button-padding-label-s);
}
.mdc-icon-button[mat-icon-button].btn-size-small iryo-icon,
.mdc-icon-button[mat-icon-button].btn-size-small .mat-icon {
  width: var(--vs-components-button-icon-size-s);
  height: var(--vs-components-button-icon-size-s);
  font-size: var(--vs-components-button-icon-size-s);
  line-height: 1;
}
.mdc-icon-button[mat-icon-button].btn-size-small iryo-icon svg,
.mdc-icon-button[mat-icon-button].btn-size-small .mat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mdc-icon-button[mat-icon-button].btn-size-medium {
  --mat-icon-button-icon-size: var(--vs-components-button-icon-size-m);
}
.mdc-icon-button[mat-icon-button].btn-size-medium.mat-mdc-button-base {
  padding: var(--vs-components-button-icon-padding-y-xs)
    var(--vs-components-button-icon-padding-x-xs);
}
.mdc-icon-button[mat-icon-button].btn-size-medium .mdc-button__label {
  font-size: var(--vs-semantic-text-body-m-font-size);
  padding: 0 var(--vs-components-button-padding-label-s);
}
.mdc-icon-button[mat-icon-button].btn-size-medium iryo-icon,
.mdc-icon-button[mat-icon-button].btn-size-medium .mat-icon {
  width: var(--vs-components-button-icon-size-l);
  height: var(--vs-components-button-icon-size-l);
  font-size: var(--vs-components-button-icon-size-l);
  line-height: 1;
}
.mdc-icon-button[mat-icon-button].btn-size-medium iryo-icon svg,
.mdc-icon-button[mat-icon-button].btn-size-medium .mat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
:root {
  --mat-option-focus-state-layer-color: var(--vs-components-dropdown-item-hover-bg);
  --mat-option-hover-state-layer-color: transparent;
  --mat-option-selected-state-layer-color: transparent;
  --mat-pseudo-checkbox-full-selected-icon-color: var(--vs-components-checkbox-icon);
  --mat-select-focused-arrow-color: var(--vs-components-input-default-icon);
  --mat-select-panel-background-color: var(--vs-components-dropdown-default-bg);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete {
  width: 100%;
  min-width: var(--vs-components-dropdown-min-width);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mat-mdc-text-field-wrapper,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mat-mdc-text-field-wrapper,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete .mat-mdc-text-field-wrapper {
  padding-right: var(--vs-components-input-padding-x);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mdc-text-field--filled,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mdc-text-field--filled,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete .mdc-text-field--filled {
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-default-border);
  border-radius: var(--vs-components-input-radius);
  padding: var(--vs-components-input-padding-y) var(--vs-components-input-padding-x);
  transition: all 0.5s ease-in-out;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--filled
  .mdc-line-ripple:after,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--filled
  .mdc-line-ripple:before,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--filled
  .mdc-line-ripple:after,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--filled
  .mdc-line-ripple:before,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--filled
  .mdc-line-ripple:after,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--filled
  .mdc-line-ripple:before {
  display: none;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--filled:not(.mdc-text-field--disabled),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--filled:not(.mdc-text-field--disabled),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: var(--vs-components-input-default-bg);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--filled.mdc-text-field--disabled,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--filled.mdc-text-field--disabled,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--filled.mdc-text-field--disabled {
  padding-right: var(--vs-components-input-padding-x);
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-disabled-border);
  background: var(--vs-components-input-disabled-bg);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--filled.mdc-text-field--disabled
  .mdc-floating-label,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--filled.mdc-text-field--disabled
  .mdc-floating-label,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--filled.mdc-text-field--disabled
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--focused:not(.mdc-text-field--disabled),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--focused:not(.mdc-text-field--disabled),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--focused:not(.mdc-text-field--disabled) {
  background-color: var(--vs-components-input-hover-bg);
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-pressed-border);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--focused:not(.mdc-text-field--disabled)
  .mdc-floating-label,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--focused:not(.mdc-text-field--disabled)
  .mdc-floating-label,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--focused:not(.mdc-text-field--disabled)
  .mdc-floating-label {
  color: var(--vs-components-input-default-label);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--focused:not(.mdc-text-field--disabled):has(.mat-mdc-select:focus-visible),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--focused:not(.mdc-text-field--disabled):has(.mat-mdc-select:focus-visible),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--focused:not(.mdc-text-field--disabled):has(.mat-mdc-select:focus-visible) {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--invalid:not(.mdc-text-field--disabled),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--invalid:not(.mdc-text-field--disabled),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--invalid:not(.mdc-text-field--disabled) {
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-error-border);
  background: var(--vs-components-input-default-bg);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-text-field__input,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-text-field__input,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-text-field__input {
  color: var(--vs-components-input-error-text);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused:not(
    .mdc-text-field--disabled
  ):has(.mat-mdc-select:focus-visible),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused:not(
    .mdc-text-field--disabled
  ):has(.mat-mdc-select:focus-visible),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused:not(
    .mdc-text-field--disabled
  ):has(.mat-mdc-select:focus-visible) {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field:has(.mat-mdc-select[aria-expanded='true']),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field:has(.mat-mdc-select[aria-expanded='true']),
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field:has(.mat-mdc-select[aria-expanded='true']) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label {
  top: 50%;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label:focus-within,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label:focus-within,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label:focus-within {
  top: 60%;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mat-mdc-select-trigger,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mat-mdc-select-trigger,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete .mat-mdc-select-trigger {
  gap: 8px;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mdc-text-field .mat-mdc-select,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field
  .mat-mdc-autocomplete-trigger,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mdc-text-field .mat-mdc-select,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mdc-text-field .mat-mdc-autocomplete-trigger,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete .mdc-text-field .mat-mdc-select,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field
  .mat-mdc-autocomplete-trigger {
  width: 100%;
  min-width: var(--vs-components-select-min-width);
  border-radius: 0;
  background: none;
  padding-top: 2px;
  margin-top: var(--vs-components-input-field-margin-top);
  height: auto;
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-s-font-size);
  line-height: var(--vs-semantic-text-body-s-line-height);
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mdc-text-field .mat-mdc-select .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select
  .mdc-text-field
  .mat-mdc-autocomplete-trigger
  .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mdc-text-field .mat-mdc-select .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input
  .mdc-text-field
  .mat-mdc-autocomplete-trigger
  .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field
  .mat-mdc-select
  .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mdc-text-field
  .mat-mdc-autocomplete-trigger
  .mat-icon {
  width: var(--vs-components-button-icon-size-s);
  height: var(--vs-components-button-icon-size-s);
  color: var(--vs-components-input-default-icon);
  vertical-align: middle;
}
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mat-mdc-form-field-icon-prefix > .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mat-mdc-form-field-icon-suffix > .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mat-mdc-form-field-icon-prefix > .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mat-mdc-form-field-icon-suffix > .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mat-mdc-form-field-icon-prefix
  > .mat-icon,
.mat-mdc-form-field.mat-mdc-form-field-type-mat-autocomplete
  .mat-mdc-form-field-icon-suffix
  > .mat-icon {
  width: var(--vs-components-button-icon-size-m);
  height: var(--vs-components-button-icon-size-m);
  padding: 0;
}
.cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
  margin-top: -0.5rem;
}
.cdk-overlay-pane div.mat-mdc-select-panel {
  border-radius: 0 0 var(--vs-components-dropdown-radius-s) var(--vs-components-dropdown-radius-s);
  border: var(--vs-components-dropdown-border-s) solid var(--vs-components-dropdown-default-border);
  box-shadow: none;
  max-height: calc(
    var(--vs-components-dropdown-item-min-height) * 8 + var(--vs-components-dropdown-padding-y-xs) *
      2
  );
  overflow-y: auto;
  scrollbar-color: var(--vs-components-scroll-thumb) transparent;
  scrollbar-width: thin;
}
.cdk-overlay-pane div.mat-mdc-select-panel::-webkit-resizer {
  background: transparent;
}
.cdk-overlay-pane div.mat-mdc-select-panel::-webkit-scrollbar {
  width: var(--vs-components-scroll-size);
  height: var(--vs-components-scroll-size);
}
.cdk-overlay-pane div.mat-mdc-select-panel::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: var(--vs-components-scroll-radius);
}
.cdk-overlay-pane div.mat-mdc-select-panel::-webkit-scrollbar-thumb {
  background-color: var(--vs-components-scroll-thumb);
  border: var(--vs-components-scroll-size-small) solid transparent;
  border-radius: var(--vs-components-scroll-radius);
  background-clip: content-box;
}
.mat-mdc-option {
  margin: 0 4px;
  min-width: var(--vs-components-select-min-width);
}
.mat-mdc-option.mdc-list-item:hover:not(.mdc-list-item--disabled) {
  background-color: var(--vs-components-dropdown-item-hover-bg);
}
.mat-mdc-option.mdc-list-item:hover:not(.mdc-list-item--disabled) span.mdc-list-item__primary-text {
  color: var(--vs-components-dropdown-item-hover-text);
}
.mat-mdc-option.mdc-list-item:hover:not(.mdc-list-item--disabled) .mat-icon {
  color: var(--vs-components-dropdown-item-hover-icon);
}
.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) {
  position: relative;
  z-index: 1;
  background-color: var(--vs-components-dropdown-item-hover-bg);
}
.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled)
  span.mdc-list-item__primary-text {
  color: var(--vs-components-dropdown-item-hover-text);
}
.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) .mat-icon {
  color: var(--vs-components-dropdown-item-hover-icon);
}
.iryo-keyboard-navigation .mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):hover,
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):focus-visible,
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):active,
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):focus {
  background-color: transparent;
}
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mat-icon {
  color: var(--vs-components-dropdown-item-selected-icon);
}
.mat-mdc-option .mat-icon {
  width: var(--vs-components-button-icon-size-s);
  height: var(--vs-components-button-icon-size-s);
  margin-right: var(--vs-components-input-gap-hz);
  color: var(--vs-components-dropdown-item-default-icon);
  flex-shrink: 0;
}
.mat-mdc-option span.mdc-list-item__primary-text {
  overflow: hidden;
  color: var(--vs-components-dropdown-item-default-text);
  text-overflow: ellipsis;
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
}
.mat-mdc-option .mat-pseudo-checkbox {
  width: var(--vs-components-checkbox-icon-size);
  height: var(--vs-components-checkbox-icon-size);
  border-radius: var(--vs-components-checkbox-icon-radius);
  border-color: var(--vs-components-checkbox-unselected-border);
}
.mat-mdc-option .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
.mat-mdc-option .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
  background: var(--vs-components-checkbox-selected-bg);
}
.autocomplete-clear-button.mat-mdc-button-base.mat-mdc-icon-button.mat-unthemed.mdc-icon-button {
  background: transparent;
  width: var(--vs-components-button-icon-size-m);
  height: var(--vs-components-button-icon-size-m);
  margin-right: 0;
}
:root {
  --mat-autocomplete-background-color: var(--vs-components-dropdown-default-bg);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete]) {
  width: 100%;
  min-width: var(--vs-components-dropdown-min-width);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete]) .mat-mdc-text-field-wrapper {
  padding-right: var(--vs-components-input-padding-x);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete]) .mdc-text-field--filled {
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-default-border);
  border-radius: var(--vs-components-input-radius);
  padding: var(--vs-components-input-padding-y) var(--vs-components-input-padding-x);
  transition: all 0.5s ease-in-out;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--filled
  .mdc-line-ripple:after,
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--filled
  .mdc-line-ripple:before {
  display: none;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: var(--vs-components-input-default-bg);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--filled.mdc-text-field--disabled {
  padding-right: var(--vs-components-input-padding-x);
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-disabled-border);
  background: var(--vs-components-input-disabled-bg);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--filled.mdc-text-field--disabled
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--focused:not(.mdc-text-field--disabled) {
  background-color: var(--vs-components-input-hover-bg);
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-pressed-border);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--focused:not(.mdc-text-field--disabled)
  .mdc-floating-label {
  color: var(--vs-components-input-default-label);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--focused:not(.mdc-text-field--disabled):has(
    .mat-mdc-input-element[matAutocomplete].cdk-keyboard-focused
  ) {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--invalid:not(.mdc-text-field--disabled) {
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-error-border);
  background: var(--vs-components-input-default-bg);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-text-field__input {
  color: var(--vs-components-input-error-text);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused:not(
    .mdc-text-field--disabled
  ):has(.mat-mdc-input-element[matAutocomplete].cdk-keyboard-focused) {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field:has(.mat-mdc-input-element[matAutocomplete][aria-expanded='true']) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label {
  top: 50%;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label:focus-within {
  top: 60%;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .mdc-text-field
  .mat-mdc-input-element[matAutocomplete] {
  padding-top: 2px;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .autocomplete-clear-button.mat-mdc-icon-button {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent;
  margin-right: 0;
  width: var(--vs-components-button-icon-size-m);
  height: var(--vs-components-button-icon-size-m);
  padding: 0;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .autocomplete-clear-button.mat-mdc-icon-button:hover,
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .autocomplete-clear-button.mat-mdc-icon-button:focus-visible,
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .autocomplete-clear-button.mat-mdc-icon-button.cdk-focused.cdk-mouse-focused,
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .autocomplete-clear-button.mat-mdc-icon-button.cdk-keyboard-focused {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .autocomplete-clear-button.mat-mdc-icon-button
  > .mat-mdc-button-persistent-ripple:before {
  background-color: transparent !important;
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .autocomplete-clear-button.mat-mdc-icon-button
  .mat-icon {
  width: var(--vs-components-button-icon-size-m);
  height: var(--vs-components-button-icon-size-m);
}
.mat-mdc-form-field:has(.mat-mdc-input-element[matAutocomplete])
  .autocomplete-toggle-icon.mat-icon {
  width: var(--vs-components-button-icon-size-s);
  height: var(--vs-components-button-icon-size-s);
  color: var(--vs-components-input-default-icon);
  pointer-events: none;
}
.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel {
  margin-top: 0;
}
.cdk-overlay-pane div.mat-mdc-autocomplete-panel {
  border-radius: 0 0 var(--vs-components-dropdown-radius-s) var(--vs-components-dropdown-radius-s);
  border: var(--vs-components-dropdown-border-s) solid var(--vs-components-dropdown-default-border);
  box-shadow: none;
  max-height: calc(
    var(--vs-components-dropdown-item-min-height) * 8 + var(--vs-components-dropdown-padding-y-xs) *
      2
  );
  overflow-y: auto;
  scrollbar-color: var(--vs-components-scroll-thumb) transparent;
  scrollbar-width: thin;
}
.cdk-overlay-pane div.mat-mdc-autocomplete-panel::-webkit-resizer {
  background: transparent;
}
.cdk-overlay-pane div.mat-mdc-autocomplete-panel::-webkit-scrollbar {
  width: var(--vs-components-scroll-size);
  height: var(--vs-components-scroll-size);
}
.cdk-overlay-pane div.mat-mdc-autocomplete-panel::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: var(--vs-components-scroll-radius);
}
.cdk-overlay-pane div.mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb {
  background-color: var(--vs-components-scroll-thumb);
  border: var(--vs-components-scroll-size-small) solid transparent;
  border-radius: var(--vs-components-scroll-radius);
  background-clip: content-box;
}
:root {
  --mat-checkbox-state-layer-size: var(--vs-components-checkbox-shape-touch-area-size);
  --mat-checkbox-touch-target-size: var(--vs-components-checkbox-shape-touch-target-size);
  --mat-checkbox-unselected-icon-color: var(--vs-components-checkbox-unselected-border);
  --mat-checkbox-unselected-checkmark-color: var(--vs-components-checkbox-icon);
  --mat-checkbox-unselected-hover-icon-color: var(--vs-components-checkbox-unselected-border);
  --mat-checkbox-unselected-hover-state-layer-color: var(--vs-components-checkbox-ripple-hover);
  --mat-checkbox-unselected-focus-state-layer-color: var(--vs-components-checkbox-ripple-focus);
  --mat-checkbox-unselected-focus-icon-color: var(--vs-components-checkbox-unselected-border);
  --mat-checkbox-unselected-pressed-state-layer-color: var(--vs-components-checkbox-ripple-pressed);
  --mat-checkbox-selected-icon-color: var(--vs-components-checkbox-selected-bg);
  --mat-checkbox-selected-checkmark-color: var(--vs-components-checkbox-icon);
  --mat-checkbox-selected-hover-icon-color: var(--vs-components-checkbox-selected-bg);
  --mat-checkbox-selected-hover-state-layer-color: var(-vs-components-checkbox-ripple-hover);
  --mat-checkbox-selected-pressed-state-layer-color: var(-vs-components-checkbox-ripple-pressed);
  --mat-checkbox-selected-focus-icon-color: var(--vs-components-checkbox-selected-bg);
  --mat-checkbox-selected-focus-state-layer-color: var(--vs-components-checkbox-ripple-focus);
  --vs-checkbox-state-layer-opacity: 1;
  --mat-checkbox-unselected-hover-state-layer-opacity: var(--vs-checkbox-state-layer-opacity);
  --mat-checkbox-unselected-focus-state-layer-opacity: var(--vs-checkbox-state-layer-opacity);
  --mat-checkbox-unselected-pressed-state-layer-opacity: var(--vs-checkbox-state-layer-opacity);
  --mat-checkbox-selected-hover-state-layer-opacity: var(--vs-checkbox-state-layer-opacity);
  --mat-checkbox-selected-pressed-state-layer-opacity: var(--vs-checkbox-state-layer-opacity);
  --mat-checkbox-selected-focus-state-layer-opacity: var(--vs-checkbox-state-layer-opacity);
  --mat-checkbox-disabled-label-color: var(--vs-components-checkbox-disabled-label);
  --mat-checkbox-disabled-unselected-icon-color: var(--vs-components-checkbox-disabled-border);
}
.mat-mdc-checkbox .mdc-form-field.mat-internal-form-field,
.mat-mdc-checkbox .mat-internal-form-field {
  gap: var(--vs-components-checkbox-gap);
}
.mat-mdc-checkbox .mat-internal-form-field .mdc-checkbox {
  flex: 0 0 var(--vs-components-checkbox-icon-size);
  width: var(--vs-components-checkbox-icon-size);
  height: var(--vs-components-checkbox-icon-size);
  padding: var(--vs-components-checkbox-shape-touch-area-padding);
  margin: 0;
}
.mat-mdc-checkbox .mat-internal-form-field .mdc-checkbox .mdc-checkbox__ripple {
  border-radius: var(--vs-components-checkbox-shape-radius);
}
.mat-mdc-checkbox .mat-internal-form-field .mdc-checkbox .mdc-checkbox__background {
  width: var(--vs-components-checkbox-icon-size);
  height: var(--vs-components-checkbox-icon-size);
  border-radius: var(--vs-components-checkbox-icon-radius);
  border-width: var(--vs-components-checkbox-icon-border-width);
  top: calc((var(--mat-checkbox-state-layer-size) - var(--vs-components-checkbox-icon-size)) / 2);
  left: calc((var(--mat-checkbox-state-layer-size) - var(--vs-components-checkbox-icon-size)) / 2);
}
.mat-mdc-checkbox
  .mat-internal-form-field
  .mdc-checkbox
  .mdc-checkbox__background
  .mdc-checkbox__checkmark {
  width: 12px;
  height: 12px;
  top: 1px;
  left: 1px;
}
.mat-mdc-checkbox
  .mat-internal-form-field
  .mdc-checkbox
  .mdc-checkbox__native-control:enabled:focus-visible
  ~ .mat-mdc-checkbox-ripple {
  outline: var(--vs-components-general-focus-ring-width) solid
    var(--vs-components-general-border-focus);
  outline-offset: var(--vs-components-general-focus-ring-width);
  background-color: rgb(var(--vs-components-checkbox-unselected-ripple-hover) / 8%);
}
.mat-mdc-checkbox .mat-internal-form-field .mdc-label {
  padding-left: var(--vs-components-checkbox-shape-label-padding);
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
}
.mat-mdc-checkbox
  .mat-internal-form-field:has(.mdc-checkbox__native-control:checked):hover
  .mdc-checkbox
  .mdc-checkbox__ripple,
.mat-mdc-checkbox
  .mat-internal-form-field:has(.mdc-checkbox__native-control:checked):focus
  .mdc-checkbox
  .mdc-checkbox__ripple {
  background-color: var(--vs-components-checkbox-ripple-hover);
}
.mat-mdc-checkbox
  .mat-internal-form-field:has(.mdc-checkbox__native-control:checked):active
  .mdc-checkbox
  .mdc-checkbox__ripple {
  background-color: var(--vs-components-checkbox-ripple-pressed);
}
.mat-mdc-checkbox
  .mat-internal-form-field:has(.mdc-checkbox__native-control:indeterminate)
  .mdc-checkbox__background
  .mdc-checkbox__checkmark {
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}
.mat-mdc-checkbox.label-small .mdc-label {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-s-font-size);
  line-height: var(--vs-semantic-text-body-s-line-height);
}
.mat-mdc-checkbox.is-error,
.mat-mdc-checkbox[aria-invalid='true'] {
  --mat-checkbox-label-text-color: var(--vs-components-checkbox-error-label);
  --mat-checkbox-unselected-icon-color: var(--vs-components-checkbox-error-border);
  --mat-checkbox-unselected-hover-icon-color: var(--vs-components-checkbox-error-border);
  --mat-checkbox-unselected-focus-icon-color: var(--vs-components-checkbox-error-border);
  --mat-checkbox-selected-icon-color: var(--vs-components-checkbox-error-bg);
  --mat-checkbox-selected-checkmark-color: var(--vs-components-checkbox-icon);
  --mat-checkbox-selected-hover-icon-color: var(--vs-components-checkbox-error-bg);
  --mat-checkbox-selected-focus-icon-color: var(--vs-components-checkbox-error-bg);
}
.mat-mdc-checkbox.is-error ~ .mat-mdc-form-field-error,
.mat-mdc-checkbox[aria-invalid='true'] ~ .mat-mdc-form-field-error {
  position: relative;
  left: var(--vs-components-checkbox-position-left);
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-xs-font-size);
  line-height: var(--vs-semantic-text-body-xs-line-height);
  color: var(--vs-components-input-error-text);
}
.mat-mdc-slide-toggle {
  --mat-slide-toggle-label-text-color: var(--vs-components-switch-label);
  --mat-slide-toggle-selected-track-color: var(--vs-components-switch-selected-bg);
  --mat-slide-toggle-selected-hover-track-color: var(--vs-components-switch-selected-hover-bg);
  --mat-slide-toggle-selected-pressed-track-color: var(--vs-components-switch-selected-pressed-bg);
  --mat-slide-toggle-with-icon-handle-size: var(--vs-components-switch-handle-size);
  --mat-slide-toggle-state-layer-size: var(--vs-semantic-spacing-mid-l);
}
.mat-mdc-slide-toggle .mdc-form-field.mat-internal-form-field {
  gap: var(--vs-components-switch-gap-xl);
}
.mat-mdc-slide-toggle .mdc-label {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
}
.mat-mdc-slide-toggle.mat-accent:has(.mdc-switch--disabled) .mdc-label {
  color: var(--vs-components-switch-disabled-label);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch {
  max-width: var(--vs-brand-spacing-mid-2xl);
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch:focus-visible:not(.mdc-switch--disabled)
  .mdc-switch__track {
  outline: var(--vs-components-general-focus-ring-width) solid
    var(--vs-components-general-border-focus);
  outline-offset: var(--vs-components-general-focus-ring-width);
  border-radius: var(--vs-components-switch-radius-full);
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch:focus-visible:not(.mdc-switch--disabled)
  .mdc-switch__handle:has(.mdc-switch__icons) {
  width: var(--vs-semantic-spacing-mid-s);
  height: var(--vs-semantic-spacing-mid-s);
  left: -4px;
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch__track {
  height: var(--vs-brand-spacing-mid-s);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch__icons,
.mat-mdc-slide-toggle.mat-accent .mdc-switch__ripple:after {
  display: none;
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch--selected .mdc-switch__handle:after,
.mat-mdc-slide-toggle.mat-accent .mdc-switch--selected .mdc-switch__handle:before {
  border-radius: var(--vs-components-switch-radius-full);
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch--selected:enabled:focus:not(:active)
  .mdc-switch__handle:after,
.mat-mdc-slide-toggle.mat-accent .mdc-switch--selected:enabled:active .mdc-switch__handle:after {
  background: var(--vs-components-switch-selected-st);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch__shadow {
  display: none;
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch:enabled:hover:not(:focus, :active)
  .mdc-switch__handle:after {
  background: var(--vs-components-switch-selected-st);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:after,
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch:enabled:focus:not(:active)
  .mdc-switch__track
  .mdc-switch__track:after {
  background: var(--vs-components-switch-selected-bg);
  border-radius: var(--vs-components-switch-radius-full);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:before {
  border: var(--vs-components-switch-border-xs) solid
    var(--vs-components-switch-not-selected-border);
  border-radius: var(--vs-components-switch-radius-full);
  background: var(--vs-components-switch-not-selected-bg);
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch:hover:enabled:focus:not(:active)
  .mdc-switch__track:after,
.mat-mdc-slide-toggle.mat-accent .mdc-switch__track:hover:after {
  background: var(--vs-components-switch-selected-hover-bg);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:before,
.mat-mdc-slide-toggle.mat-accent .mdc-switch__track:before {
  border: var(--vs-components-switch-border-xs) solid
    var(--vs-components-switch-not-selected-border);
  background: var(--vs-components-switch-not-selected-bg);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch:enabled:hover:not(:active) .mdc-switch__track:before,
.mat-mdc-slide-toggle.mat-accent .mdc-switch__track:hover:before {
  background: var(--vs-components-switch-not-selected-hover-bg);
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch--unselected:enabled:focus:not(:active)
  .mdc-switch__handle:after,
.mat-mdc-slide-toggle.mat-accent .mdc-switch__handle:before,
.mat-mdc-slide-toggle.mat-accent .mdc-switch--unselected:enabled .mdc-switch__handle:after {
  background: var(--vs-components-switch-not-selected-st);
  border-radius: var(--vs-components-switch-radius-full);
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch--unselected:hover:enabled:focus:not(:active)
  .mdc-switch__handle:after,
.mat-mdc-slide-toggle.mat-accent .mdc-switch__handle:hover:before,
.mat-mdc-slide-toggle.mat-accent .mdc-switch--unselected:hover:enabled .mdc-switch__handle:after {
  background: var(--vs-components-switch-not-selected-st);
  border-radius: var(--vs-components-switch-radius-full);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch--unselected:active:enabled .mdc-switch__track:before {
  background: var(--vs-components-switch-not-selected-pressed-bg);
  border-radius: var(--vs-components-switch-radius-full);
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch--unselected
  .mdc-switch__handle:has(.mdc-switch__icons) {
  margin: 0 calc(var(--vs-components-switch-padding-x) * 2);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch.mdc-switch--disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch.mdc-switch--disabled .mdc-switch__track:before {
  background: var(--vs-components-switch-disabled-bg);
}
.mat-mdc-slide-toggle.mat-accent
  .mdc-switch.mdc-switch--disabled.mdc-switch--selected
  .mdc-switch__track:after {
  opacity: 0.12;
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch.mdc-switch--disabled .mdc-switch__track:before,
.mat-mdc-slide-toggle.mat-accent .mdc-switch.mdc-switch--disabled .mdc-switch__track:after {
  border: var(--vs-components-switch-border-xs) solid var(--vs-components-switch-disabled-border);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch.mdc-switch--disabled .mdc-switch__handle:after,
.mat-mdc-slide-toggle.mat-accent .mdc-switch.mdc-switch--disabled .mdc-switch__handle:before {
  background: var(--vs-components-switch-disabled-st);
  border-radius: var(--vs-components-switch-radius-full);
}
.mat-mdc-slide-toggle.mat-accent .mdc-switch.mdc-switch--disabled .mdc-switch__track {
  opacity: 1;
}
:root {
  --mdc-radio-state-layer-size: var(--vs-components-radiobutton-shape-touch-ripple);
  --mat-radio-ripple-color: var(--vs-components-radiobutton-ripple-pressed);
  --mat-radio-selected-icon-color: var(--vs-components-radiobutton-selected-border);
  --mat-radio-checked-ripple-color: var(--vs-components-radiobutton-ripple-focus);
  --mat-radio-selected-hover-icon-color: var(--vs-components-radiobutton-selected-bg);
  --mat-radio-selected-pressed-icon-color: var(--vs-components-radiobutton-selected-bg);
  --mat-radio-label-text-color: var(--vs-components-radiobutton-label);
}
.mat-mdc-radio-button.mat-accent .mdc-form-field.mat-internal-form-field {
  gap: 0;
}
.mat-mdc-radio-button.mat-accent .mdc-label {
  padding-left: var(--vs-components-radiobutton-label-padding-left);
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
}
.mat-mdc-radio-button.mat-accent.label-small .mdc-label {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-s-font-size);
  line-height: var(--vs-semantic-text-body-s-line-height);
}
.mat-mdc-radio-button.mat-accent.cdk-keyboard-focused .mdc-radio__background:before {
  background-color: var(--vs-components-radiobutton-ripple-focus);
  outline: var(--vs-components-general-focus-ring-width) solid
    var(--vs-components-general-border-focus);
  outline-offset: 0;
}
.mat-mdc-radio-button.mat-accent .cdk-focused.cdk-mouse-focused .mdc-radio__background:before,
.mat-mdc-radio-button.mat-accent .cdk-program-focused .mdc-radio__background:before {
  background-color: var(--vs-components-radiobutton-ripple-hover);
}
.mat-mdc-radio-button.mat-accent .mdc-radio,
.mat-mdc-radio-button.mat-accent .mdc-radio .mat-mdc-radio-touch-target {
  border-radius: var(--vs-components-radiobutton-shape-radius);
}
.mat-mdc-radio-button.mat-accent
  .mdc-radio:hover
  > .mdc-radio__native-control:not([disabled]):not(:focus)
  ~ .mdc-radio__background:before {
  background-color: var(--vs-components-radiobutton-ripple-hover);
  opacity: 1;
}
.mat-mdc-radio-button.mat-accent
  .mdc-radio
  .mdc-radio__native-control
  + .mdc-radio__background:before {
  opacity: 1;
}
.mat-mdc-radio-button.mat-accent .mdc-radio__native-control:active + .mdc-radio__background:before,
.mat-mdc-radio-button.mat-accent .mdc-radio__native-control:focus + .mdc-radio__background:before {
  background-color: var(--vs-components-radiobutton-ripple-pressed);
}
.mat-mdc-radio-button.mat-accent
  .mdc-radio__native-control:enabled:focus:checked
  + .mdc-radio__background
  > .mdc-radio__outer-circle,
.mat-mdc-radio-button.mat-accent
  .mdc-radio__native-control:enabled:checked
  + .mdc-radio__background
  > .mdc-radio__outer-circle {
  border-color: var(--vs-components-radiobutton-selected-border);
}
.mat-mdc-radio-button.mat-accent
  .mdc-radio__native-control:enabled:focus:checked
  + .mdc-radio__background
  > .mdc-radio__inner-circle,
.mat-mdc-radio-button.mat-accent
  .mdc-radio__native-control:enabled:checked
  + .mdc-radio__background
  > .mdc-radio__inner-circle {
  background-color: var(--vs-components-radiobutton-selected-border);
}
.mat-mdc-radio-button.mat-accent .mdc-radio--disabled + label {
  color: var(--vs-components-radiobutton-disabled-label);
}
.mat-mdc-radio-button.mat-accent
  .mdc-radio__native-control:disabled
  + .mdc-radio__background
  > .mdc-radio__outer-circle,
.mat-mdc-radio-button.mat-accent
  .mdc-radio__native-control:disabled
  + .mdc-radio__background
  > .mdc-radio__inner-circle {
  border: var(--vs-components-radiobutton-icon-border) solid
    var(--vs-components-radiobutton-disabled-border);
  opacity: 1;
}
.mat-mdc-radio-button.mat-accent
  .mdc-radio__native-control:disabled
  + .mdc-radio__background
  > .mdc-radio__inner-circle {
  background-color: var(--vs-components-radiobutton-disabled-border);
}
.mat-mdc-radio-button.mat-accent
  .mdc-radio__native-control:enabled:not(:checked)
  + .mdc-radio__background
  > .mdc-radio__outer-circle {
  border: var(--vs-components-radiobutton-icon-border) solid var(--vs-components-radiobutton-border);
}
.mat-mdc-radio-checked .mdc-radio__background:before {
  background-color: var(--vs-components-radiobutton-ripple-hover);
}
.mat-mdc-radio-button.error .mdc-form-field .mdc-label,
.mat-mdc-radio-button.ng-invalid.ng-touched .mdc-form-field .mdc-label {
  color: var(--vs-components-radiobutton-error-label);
}
.mat-mdc-radio-button.error.mat-mdc-radio-disabled .mdc-form-field .mdc-label,
.mat-mdc-radio-button.ng-invalid.ng-touched.mat-mdc-radio-disabled .mdc-form-field .mdc-label {
  color: var(--vs-components-radiobutton-disabled-label);
}
.mat-mdc-radio-button.error
  .mdc-form-field
  .mdc-radio__native-control:enabled:not(:checked)
  + .mdc-radio__background
  > .mdc-radio__outer-circle,
.mat-mdc-radio-button.ng-invalid.ng-touched
  .mdc-form-field
  .mdc-radio__native-control:enabled:not(:checked)
  + .mdc-radio__background
  > .mdc-radio__outer-circle {
  border-color: var(--vs-components-radiobutton-error-border);
}
.mat-mdc-radio-button.error
  .mdc-radio
  > .mdc-radio__native-control:focus:enabled:not(:checked)
  ~ .mdc-radio__background
  > .mdc-radio__outer-circle,
.mat-mdc-radio-button.ng-invalid.ng-touched
  .mdc-radio
  > .mdc-radio__native-control:focus:enabled:not(:checked)
  ~ .mdc-radio__background
  > .mdc-radio__outer-circle {
  border-color: var(--vs-components-radiobutton-error-border);
}
.mat-mdc-radio-button.error
  .mdc-form-field
  .mdc-radio__native-control:enabled:checked
  + .mdc-radio__background
  > .mdc-radio__outer-circle,
.mat-mdc-radio-button.error
  .mdc-form-field
  .mdc-radio__native-control:enabled:checked:hover
  + .mdc-radio__background
  > .mdc-radio__outer-circle,
.mat-mdc-radio-button.ng-invalid.ng-touched
  .mdc-form-field
  .mdc-radio__native-control:enabled:checked
  + .mdc-radio__background
  > .mdc-radio__outer-circle,
.mat-mdc-radio-button.ng-invalid.ng-touched
  .mdc-form-field
  .mdc-radio__native-control:enabled:checked:hover
  + .mdc-radio__background
  > .mdc-radio__outer-circle {
  border-color: var(--vs-components-radiobutton-error-border);
}
.mat-mdc-radio-button.error
  .mdc-form-field
  .mdc-radio__native-control:enabled:checked
  + .mdc-radio__background
  > .mdc-radio__inner-circle,
.mat-mdc-radio-button.error
  .mdc-form-field
  .mdc-radio__native-control:enabled:checked:hover
  + .mdc-radio__background
  > .mdc-radio__inner-circle,
.mat-mdc-radio-button.ng-invalid.ng-touched
  .mdc-form-field
  .mdc-radio__native-control:enabled:checked
  + .mdc-radio__background
  > .mdc-radio__inner-circle,
.mat-mdc-radio-button.ng-invalid.ng-touched
  .mdc-form-field
  .mdc-radio__native-control:enabled:checked:hover
  + .mdc-radio__background
  > .mdc-radio__inner-circle {
  background-color: var(--vs-components-radiobutton-error-border);
}
.mat-mdc-radio-button.error
  .mdc-form-field
  .mdc-radio__native-control:active
  + .mdc-radio__background:before,
.mat-mdc-radio-button.error
  .mdc-form-field
  .mdc-radio__native-control:focus
  + .mdc-radio__background:before,
.mat-mdc-radio-button.ng-invalid.ng-touched
  .mdc-form-field
  .mdc-radio__native-control:active
  + .mdc-radio__background:before,
.mat-mdc-radio-button.ng-invalid.ng-touched
  .mdc-form-field
  .mdc-radio__native-control:focus
  + .mdc-radio__background:before {
  background-color: var(--vs-components-radiobutton-ripple-pressed);
}
:root {
  --mat-datepicker-button-icon-min-size: var(--vs-components-button-icon-size-s);
  --mat-datepicker-calendar-container-elevation-shadow: none;
  --mat-datepicker-calendar-container-shape: var(
    --vs-components-datepicker-calendar-main-block-radius
  );
  --mat-datepicker-calendar-container-border-color: var(--vs-components-datepicker-calendar-border);
  --mat-datepicker-calendar-container-divider-color: var(
    --vs-components-datepicker-calendar-border
  );
  --mat-datepicker-calendar-container-background-color: var(--vs-components-datepicker-calendar-bg);
  --mat-datepicker-calendar-container-text-color: var(--vs-components-datepicker-calendar-text);
  --mat-datepicker-calendar-date-text-color: var(
    --vs-components-datepicker-calendar-item-default-text
  );
  --mat-datepicker-calendar-date-outline-color: var(
    --vs-components-datepicker-calendar-item-default-border
  );
  --mat-datepicker-calendar-date-today-outline-color: var(
    --vs-components-datepicker-calendar-item-today-border
  );
  --mat-datepicker-calendar-date-selected-state-background-color: var(
    --vs-components-datepicker-calendar-item-selected-bg
  );
  --mat-datepicker-calendar-date-in-range-state-background-color: var(
    --vs-components-datepicker-calendar-item-highlight-on
  );
  --mat-datepicker-calendar-date-hover-state-background-color: var(
    --vs-components-general-bg-trans-hover
  );
  --mat-datepicker-calendar-header-text-color: var(--vs-components-datepicker-calendar-text);
  --mat-datepicker-calendar-period-button-text-color: inherit;
  --mat-datepicker-calendar-period-button-icon-color: currentcolor;
  --vs-components-datepicker-calendar-height-5-weeks: 310px;
  --vs-components-datepicker-calendar-height-6-weeks: 354px;
  --mat-form-field-container-height: var(--vs-primitive-units-56);
}
.mat-datepicker-toggle .mat-mdc-icon-button {
  background: var(--vs-components-button-ghost-fields-bg-default);
  border: 1px solid transparent;
  color: var(--vs-components-button-ghost-fields-text-default);
  padding: var(--vs-semantic-spacing-sm-m);
  height: var(--vs-components-input-input-container);
  width: var(--vs-components-input-input-container);
  padding-right: 0;
  margin-right: 0;
  transition: all ease-in-out 0.3s;
}
.mat-datepicker-toggle .mat-mdc-icon-button svg {
  min-height: var(--mat-datepicker-button-icon-min-size);
  min-width: var(--mat-datepicker-button-icon-min-size);
  fill: currentcolor;
  margin-left: -8px;
}
.mat-datepicker-toggle .mat-mdc-icon-button:hover:not(:disabled) {
  background: var(--vs-components-button-ghost-fields-bg-hover);
  color: var(--vs-components-button-ghost-fields-text-hover);
}
.mat-datepicker-toggle .mat-mdc-icon-button:active:not(:disabled),
.mat-datepicker-toggle .mat-mdc-icon-button.cdk-focused.cdk-mouse-focused:not(:disabled) {
  background: var(--vs-components-button-ghost-fields-bg-pressed);
  color: var(--vs-components-button-ghost-fields-text-pressed);
}
.mat-datepicker-toggle .mat-mdc-icon-button:focus-visible,
.mat-datepicker-toggle .mat-mdc-icon-button.cdk-keyboard-focused {
  background: var(--vs-components-button-ghost-fields-bg-hover);
  border-color: var(--vs-components-general-border-focus);
  color: var(--vs-components-button-ghost-fields-text-default);
  outline: none;
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
}
.mat-datepicker-toggle .mat-mdc-icon-button:disabled {
  background: var(--vs-components-button-ghost-fields-bg-disabled, transparent);
  color: var(--vs-components-button-ghost-fields-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.mat-mdc-form-field-has-icon-suffix .mdc-text-field--filled:not(.mdc-text-field--disabled),
.mat-mdc-form-field-has-icon-suffix .mdc-text-field--filled.mdc-text-field--disabled {
  padding-right: var(--vs-semantic-spacing-sm-m);
}
.mat-mdc-form-field-icon-suffix .mat-datepicker-toggle-active {
  color: var(--vs-components-button-ghost-fields-text-default);
}
.mat-mdc-form-field .mat-mdc-text-field-wrapper {
  height: var(--vs-primitive-units-56);
}
.mat-datepicker-content {
  background-color: var(--vs-components-datepicker-calendar-bg);
  border: var(--vs-components-datepicker-calendar-border-width) solid
    var(--vs-components-datepicker-calendar-border);
  box-shadow: none;
  width: min-content;
}
.mat-datepicker-content .mat-calendar {
  height: auto;
  transition: height 0.3s ease;
}
.mat-datepicker-content .mat-calendar * {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
}
.mat-datepicker-content
  .mat-calendar:has(mat-month-view tbody tr:nth-child(5)):not(
    :has(mat-month-view tbody tr:nth-child(6))
  ) {
  height: var(--vs-components-datepicker-calendar-height-5-weeks);
}
.mat-datepicker-content .mat-calendar:has(mat-month-view tbody tr:nth-child(6)) {
  height: var(--vs-components-datepicker-calendar-height-6-weeks);
}
.mat-datepicker-popup {
  margin-top: var(--vs-semantic-spacing-sm-m);
}
.mat-calendar .mat-calendar-content {
  padding: var(--vs-components-datepicker-calendar-main-block-padding);
}
.mat-calendar .mat-calendar-content .mat-calendar-body-active[aria-pressed='true'] {
  background-color: transparent;
}
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='true']
  .mat-calendar-body-selected {
  background-color: var(--vs-components-datepicker-calendar-item-selected-bg);
  color: var(--vs-components-datepicker-calendar-item-selected-text);
}
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='true']
  .mat-calendar-body-selected:hover {
  background-color: var(--vs-components-datepicker-calendar-item-selected-bg-hover);
}
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='true']
  .mat-calendar-body-selected:focus,
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='true']
  .mat-calendar-body-selected:focus-visible {
  background-color: var(--vs-components-datepicker-calendar-item-selected-bg-focus);
}
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='true']
  .mat-calendar-body-selected:active {
  background-color: var(--vs-components-datepicker-calendar-item-selected-bg-pressed);
}
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='false'][aria-current='date']
  .mat-calendar-body-cell-content {
  background-color: var(--vs-components-datepicker-calendar-item-today-bg);
}
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='false'][aria-current='date']
  .mat-calendar-body-cell-content:hover {
  background-color: var(--vs-components-datepicker-calendar-item-today-bg-hover);
}
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='false'][aria-current='date']
  .mat-calendar-body-cell-content:focus,
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='false'][aria-current='date']
  .mat-calendar-body-cell-content:focus-visible {
  background-color: var(--vs-components-datepicker-calendar-item-today-bg-focus);
}
.mat-calendar
  .mat-calendar-content
  .mat-calendar-body-active[aria-pressed='false'][aria-current='date']
  .mat-calendar-body-cell-content:active {
  background-color: var(--vs-components-datepicker-calendar-item-today-bg-pressed);
}
.mat-calendar .mat-calendar-header {
  margin: 0;
  padding: var(--vs-components-datepicker-calendar-header-padding-y)
    var(--vs-components-datepicker-calendar-header-padding-x);
}
.mat-calendar .mat-calendar-header .mat-calendar-controls,
.mat-calendar .mat-calendar-header .mat-calendar-controls .mat-mdc-button {
  margin: 0;
}
.mat-calendar
  .mat-calendar-header
  .mat-calendar-controls
  .mdc-button.mat-mdc-button:not(:disabled) {
  background: transparent;
  color: var(--vs-components-button-ghost-fields-text-default);
}
.mat-datepicker-content-container-with-actions .mat-datepicker-actions {
  flex-wrap: wrap;
}
.mat-datepicker-content-container-with-actions .mat-datepicker-actions iryo-alert {
  flex: 0 0 100%;
}
.mdc-text-field--invalid:has(.mat-datepicker-input)
  .mat-datepicker-toggle
  .mat-mdc-icon-button
  svg {
  color: var(--vs-components-input-error-icon);
}
.mdc-text-field--invalid:has(.mat-datepicker-input)
  .mat-datepicker-toggle
  .mat-mdc-icon-button
  svg
  svg {
  fill: var(--vs-components-input-error-icon);
}
.mat-form-field-disabled:has(.mat-datepicker-input)
  .mat-datepicker-toggle
  .mat-mdc-icon-button
  svg {
  fill: var(--vs-components-button-ghost-fields-text-disabled);
}
.mat-calendar
  .mat-calendar-body-cell:not(.mat-calendar-body-disabled, .mat-calendar-body-active):hover
  > .mat-calendar-body-cell-content:not(
    .mat-calendar-body-selected,
    .mat-calendar-body-comparison-identical
  ) {
  background-color: var(--vs-components-datepicker-calendar-item-range-bg-hover);
}
.mat-datepicker-content-container .mat-mdc-raised-button {
  background: var(--vs-components-button-primary-bg-default);
  color: var(--vs-components-button-primary-text-default);
}
.mat-datepicker-content-container .mat-mdc-raised-button .mdc-button__label {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-medium);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
}
.mat-datepicker-content-container .mat-mdc-raised-button:hover {
  background: var(--vs-components-button-primary-bg-hover);
  color: var(--vs-components-button-primary-text-hover);
}
.mat-datepicker-content-container .mat-mdc-raised-button:focus {
  background: var(--vs-components-button-primary-bg-hover);
  color: var(--vs-components-button-primary-text-hover);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field-type-mat-date-range-input
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label {
  top: 50%;
}
:root {
  --mat-expansion-container-background-color: var(--vs-components-expansion-panel-default-bg);
  --mat-expansion-container-text-color: var(--vs-components-expansion-panel-default-body);
  --mat-expansion-container-shape: 0;
  --mat-expansion-container-divider-color: transparent;
  --mat-expansion-header-background-color: var(--vs-components-expansion-panel-default-bg);
  --mat-expansion-header-hover-state-layer-color: var(
    --vs-components-expansion-panel-default-bg-hover
  );
  --mat-expansion-header-focus-state-layer-color: var(
    --vs-components-expansion-panel-default-bg-focus
  );
  --mat-expansion-header-text-color: var(--vs-components-expansion-panel-default-title);
  --mat-expansion-header-hover-text-color: var(--vs-components-expansion-panel-default-title);
  --mat-expansion-header-focus-text-color: var(--vs-components-expansion-panel-default-title);
  --mat-expansion-header-collapsed-state-height: var(
    --vs-components-expansion-panel-bar-min-height
  );
  --mat-expansion-header-expanded-state-height: var(--vs-components-expansion-panel-bar-min-height);
  --mat-expansion-body-text-color: var(--vs-components-expansion-panel-default-body);
}
.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-disabled) .mat-expansion-panel-header {
  outline: var(--vs-components-general-focus-ring-width) solid transparent;
  outline-offset: var(--vs-components-general-focus-ring-width);
  margin: var(--vs-semantic-spacing-sm-s);
  border-radius: var(--vs-components-general-focus-ring-radius);
  flex-direction: row-reverse;
  gap: var(--vs-components-expansion-panel-gap-x-s);
  padding: 0 var(--vs-components-expansion-panel-body-padding-x) 0 0;
}
.mat-accordion
  .mat-expansion-panel:not(.mat-expansion-panel-disabled)
  .mat-expansion-panel-header:not([aria-disabled='true']):hover {
  background: var(--vs-components-expansion-panel-default-bg-hover);
}
.mat-accordion
  .mat-expansion-panel:not(.mat-expansion-panel-disabled)
  .mat-expansion-panel-header:not([aria-disabled='true']):focus {
  background: var(--vs-components-expansion-panel-default-bg-focus);
}
.mat-accordion
  .mat-expansion-panel:not(.mat-expansion-panel-disabled)
  .mat-expansion-panel-header:not([aria-disabled='true']):active {
  background: var(--vs-components-expansion-panel-default-bg-pressed);
  outline-color: transparent;
}
.mat-accordion
  .mat-expansion-panel:not(.mat-expansion-panel-disabled)
  .mat-expansion-panel-header:not([aria-disabled='true']):focus-visible,
.mat-accordion
  .mat-expansion-panel:not(.mat-expansion-panel-disabled)
  .mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused {
  outline-color: var(--vs-components-general-border-focus);
}
.mat-accordion
  .mat-expansion-panel:not(.mat-expansion-panel-disabled)
  .mat-expansion-panel-header-title {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-medium);
  font-size: var(--vs-semantic-text-body-xl-font-size);
  line-height: var(--vs-semantic-text-body-xl-line-height);
}
.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-disabled) .mat-expansion-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vs-components-expansion-panel-default-icon);
  width: var(--vs-components-expansion-panel-icon-l);
  height: var(--vs-components-expansion-panel-icon-l);
}
.mat-accordion
  .mat-expansion-panel:not(.mat-expansion-panel-disabled)
  .mat-expansion-indicator
  svg {
  color: currentcolor;
  fill: currentcolor;
}
.mat-accordion .mat-expansion-panel:has(.mat-expansion-panel-header) {
  border-radius: 0;
  box-shadow: none;
}
.mat-accordion .mat-expansion-panel:has(.mat-expansion-panel-header) .mat-expansion-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vs-components-expansion-panel-default-icon);
  width: var(--vs-components-expansion-panel-icon-l);
  height: var(--vs-components-expansion-panel-icon-l);
}
.mat-accordion .mat-expansion-panel:has(.mat-expansion-panel-header) .mat-expansion-indicator svg {
  display: none;
}
.mat-accordion
  .mat-expansion-panel:has(.mat-expansion-panel-header)
  .mat-expansion-indicator:after {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  color: currentcolor;
  border: 0;
  padding: 0.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.mat-accordion
  .mat-expansion-panel:has(.mat-expansion-panel-header):not(.mat-expansion-panel--trailing)
  .mat-expansion-indicator:after {
  background-image: url(add.svg);
  transform: none;
}
.mat-accordion
  .mat-expansion-panel:has(.mat-expansion-panel-header):not(
    .mat-expansion-panel--trailing
  ).mat-expanded
  .mat-expansion-indicator:after {
  background-image: url(remove.svg);
}
.mat-accordion
  .mat-expansion-panel:has(.mat-expansion-panel-header).mat-expansion-panel--trailing
  .mat-expansion-panel-header {
  flex-direction: row;
  padding: 0 0 0 var(--vs-components-expansion-panel-body-padding-x);
}
.mat-accordion
  .mat-expansion-panel:has(.mat-expansion-panel-header).mat-expansion-panel--trailing
  .mat-expansion-panel-body {
  padding: 0 var(--vs-components-expansion-panel-body-padding-opened-left-m) 0
    var(--vs-components-expansion-panel-body-padding-x);
}
.mat-accordion
  .mat-expansion-panel:has(.mat-expansion-panel-header).mat-expansion-panel--trailing
  .mat-expansion-indicator:after {
  background-image: url(arrow-down.svg);
  transform: none;
}
.mat-accordion
  .mat-expansion-panel:has(.mat-expansion-panel-header).mat-expansion-panel--trailing.mat-expanded
  .mat-expansion-indicator:after {
  transform: rotate(0);
}
.mat-accordion .mat-expansion-panel-body {
  background-color: var(--vs-components-expansion-panel-default-bg);
  padding: 0 var(--vs-components-expansion-panel-body-padding-x) 0
    var(--vs-components-expansion-panel-body-padding-opened-left-m);
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
}
.sb-show-main.sb-main-centered #storybook-root:has(.mat-accordion) {
  width: 70%;
  max-width: 700px;
}
:root {
  --mat-snack-bar-container-color: transparent;
}
.mdc-snackbar__surface.mat-mdc-snackbar-surface {
  box-shadow: none;
}
:root {
  --mat-tooltip-container-color: var(--vs-components-tooltip-bg);
  --mat-tooltip-supporting-text-color: var(--vs-components-tooltip-text);
  --mat-tooltip-container-shape: var(--vs-components-tooltip-radius);
}
.mdc-tooltip__surface.mat-mdc-tooltip-surface {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-xs-font-size);
  line-height: var(--vs-semantic-text-body-xs-line-height);
  min-width: var(--vs-components-tooltip-min-width);
  max-width: var(-vs-components-tooltip-max-width);
  padding: var(--vs-components-tooltip-padding-y) var(--vs-components-tooltip-padding-x);
  border: var(--vs-components-tooltip-border-width) solid var(--vs-components-tooltip-border);
}
:root {
  --mat-chip-elevated-container-color: var(--vs-components-chip-default-bg);
  --mat-chip-label-text-color: var(--vs-components-chip-default-text);
  --mat-chip-outline-color: transparent;
  --mat-chip-container-shape-radius: var(--vs-components-chip-radius);
  --mat-chip-container-height: auto;
  --mat-chip-hover-state-layer-color: var(--vs-components-chip-default-bg-hover);
  --mat-chip-hover-state-layer-opacity: 1;
  --mat-chip-focus-state-layer-color: var(--vs-components-chip-default-bg-hover);
  --mat-chip-focus-state-layer-opacity: 1;
  --mat-chip-pressed-state-layer-color: var(--vs-components-chip-default-bg-pressed);
  --mat-chip-pressed-state-layer-opacity: 1;
  --mat-chip-trailing-action-hover-state-layer-color: var(--vs-components-chip-default-bg-hover);
  --mat-chip-trailing-action-hover-state-layer-opacity: 0;
  --mat-chip-trailing-action-focus-state-layer-color: var(--vs-components-chip-default-bg-hover);
  --mat-chip-trailing-action-focus-state-layer-opacity: 0;
  --mat-chip-trailing-action-pressed-state-layer-color: var(
    --vs-components-chip-default-bg-pressed
  );
  --mat-chip-trailing-action-pressed-state-layer-opacity: 0;
  --mat-chip-elevated-disabled-container-color: var(--vs-components-chip-disabled-bg);
  --mat-chip-elevated-selected-container-color: var(--vs-components-chip-highlighted-bg);
  --mat-chip-with-icon-selected-icon-color: var(--vs-components-chip-highlighted-text);
  --mat-chip-selected-trailing-icon-color: var(--vs-components-chip-highlighted-text);
  --mat-chip-selected-label-text-color: var(--vs-components-chip-highlighted-text);
  --mat-chip-selected-focus-state-layer-color: var(--vs-components-chip-highlighted-bg-hover);
  --mat-chip-selected-focus-state-layer-opacity: 0;
  --mat-chip-selected-hover-state-layer-color: var(--vs-components-chip-highlighted-bg-hover);
  --mat-chip-selected-hover-state-layer-opacity: 0;
  --mat-chip-selected-pressed-state-layer-color: var(--vs-components-chip-highlighted-bg-pressed);
  --mat-chip-selected-presseds-state-layer-opacity: 0;
}
.mat-mdc-standard-chip.mat-mdc-chip {
  padding-block: var(--vs-components-chip-s-padding-y);
  height: var(--mat-chip-container-height);
  max-width: 100%;
}
.mat-mdc-standard-chip.mat-mdc-chip mat-icon {
  display: flex;
}
.mat-mdc-standard-chip.mat-mdc-chip__action--primary:before {
  border: 0;
}
.mat-mdc-standard-chip.mat-mdc-chip .mdc-evolution-chip__cell--primary,
.mat-mdc-standard-chip.mat-mdc-chip .mdc-evolution-chip__action--primary {
  min-width: 0;
  max-width: 100%;
}
.mat-mdc-standard-chip.mat-mdc-chip .mdc-evolution-chip__text-label {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-xs-font-size);
  line-height: var(--vs-semantic-text-body-xs-line-height);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mat-mdc-standard-chip.mat-mdc-chip .mat-mdc-chip-focus-overlay,
.mat-mdc-standard-chip.mat-mdc-chip .mat-mdc-chip-ripple {
  display: none;
}
.mat-mdc-standard-chip.mat-mdc-chip
  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {
  border-radius: inherit;
}
.mat-mdc-standard-chip.mat-mdc-chip
  .mdc-evolution-chip__action--primary:not(
    .mdc-evolution-chip__action--presentational
  ):focus-visible,
.mat-mdc-standard-chip.mat-mdc-chip
  .mdc-evolution-chip__action--primary:not(
    .mdc-evolution-chip__action--presentational
  ).cdk-keyboard-focused {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-standard-chip.mat-mdc-chip .mat-mdc-chip-remove {
  border-radius: var(--vs-semantic-radius-full);
}
.mat-mdc-standard-chip.mat-mdc-chip .mat-mdc-chip-remove:focus-visible,
.mat-mdc-standard-chip.mat-mdc-chip .mat-mdc-chip-remove.cdk-keyboard-focused {
  outline: 0;
}
.mat-mdc-standard-chip.mat-mdc-chip:has(.mat-mdc-chip-remove:focus-visible),
.mat-mdc-standard-chip.mat-mdc-chip:has(.mat-mdc-chip-remove.cdk-keyboard-focused) {
  background-color: var(--mat-chip-pressed-state-layer-color);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-standard-chip.mat-mdc-chip:has(.mat-mdc-chip-remove:focus-visible)
  .mdc-evolution-chip__text-label,
.mat-mdc-standard-chip.mat-mdc-chip:has(.mat-mdc-chip-remove.cdk-keyboard-focused)
  .mdc-evolution-chip__text-label {
  color: var(--vs-components-chip-default-text-pressed);
}
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled)
  .mdc-evolution-chip__cell--trailing
  * {
  color: var(--mat-chip-label-text-color);
}
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled):hover,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled):focus {
  background-color: var(--mat-chip-hover-state-layer-color);
}
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled):active,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled):focus-visible,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled).cdk-keyboard-focused {
  background-color: var(--mat-chip-pressed-state-layer-color);
}
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled):active
  .mdc-evolution-chip__text-label,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled):focus-visible
  .mdc-evolution-chip__text-label,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled).cdk-keyboard-focused
  .mdc-evolution-chip__text-label {
  color: var(--vs-components-chip-default-text-pressed);
}
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled):focus-visible,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled).cdk-keyboard-focused {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled).mat-mdc-chip-highlighted
  .mdc-evolution-chip__icon--trailing
  * {
  color: var(--mat-chip-with-icon-selected-icon-color);
}
.mat-mdc-standard-chip.mat-mdc-chip:not(
    .mdc-evolution-chip--disabled
  ).mat-mdc-chip-highlighted:hover,
.mat-mdc-standard-chip.mat-mdc-chip:not(
    .mdc-evolution-chip--disabled
  ).mat-mdc-chip-highlighted:focus {
  background-color: var(--mat-chip-selected-hover-state-layer-color);
}
.mat-mdc-standard-chip.mat-mdc-chip:not(
    .mdc-evolution-chip--disabled
  ).mat-mdc-chip-highlighted:active,
.mat-mdc-standard-chip.mat-mdc-chip:not(
    .mdc-evolution-chip--disabled
  ).mat-mdc-chip-highlighted:focus-visible,
.mat-mdc-standard-chip.mat-mdc-chip:not(
    .mdc-evolution-chip--disabled
  ).mat-mdc-chip-highlighted.cdk-keyboard-focused,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled).mat-mdc-chip-highlighted:has(
    .mat-mdc-chip-remove:focus-visible
  ),
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled).mat-mdc-chip-highlighted:has(
    .mat-mdc-chip-remove.cdk-keyboard-focused
  ) {
  background-color: var(--mat-chip-selected-pressed-state-layer-color);
}
.mat-mdc-standard-chip.mat-mdc-chip:not(
    .mdc-evolution-chip--disabled
  ).mat-mdc-chip-highlighted:active
  .mdc-evolution-chip__text-label,
.mat-mdc-standard-chip.mat-mdc-chip:not(
    .mdc-evolution-chip--disabled
  ).mat-mdc-chip-highlighted:focus-visible
  .mdc-evolution-chip__text-label,
.mat-mdc-standard-chip.mat-mdc-chip:not(
    .mdc-evolution-chip--disabled
  ).mat-mdc-chip-highlighted.cdk-keyboard-focused
  .mdc-evolution-chip__text-label,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled).mat-mdc-chip-highlighted:has(
    .mat-mdc-chip-remove:focus-visible
  )
  .mdc-evolution-chip__text-label,
.mat-mdc-standard-chip.mat-mdc-chip:not(.mdc-evolution-chip--disabled).mat-mdc-chip-highlighted:has(
    .mat-mdc-chip-remove.cdk-keyboard-focused
  )
  .mdc-evolution-chip__text-label {
  color: var(--vs-components-chip-highlighted-text);
}
.mat-mdc-standard-chip.mat-mdc-chip.mdc-evolution-chip--disabled {
  background-color: var(--vs-components-chip-disabled-bg);
  opacity: 1;
}
.mat-mdc-standard-chip.mat-mdc-chip.mdc-evolution-chip--disabled
  .mdc-evolution-chip__action--primary:before {
  border: 0;
}
.mat-mdc-standard-chip.mat-mdc-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__cell,
.mat-mdc-standard-chip.mat-mdc-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label {
  color: var(--vs-components-chip-disabled-text);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element) {
  width: 100%;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element) .mdc-text-field--filled,
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  padding: 2px;
  border: var(--vs-components-input-border-width) solid var(--vs-components-input-default-border);
  transition: box-shadow 0.5s ease-in-out;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element) .mat-mdc-form-field-flex {
  align-items: flex-start;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label {
  position: static;
  transform: none;
  padding: calc(var(--vs-components-input-padding-y) - 2px) 0 0
    calc(var(--vs-components-input-padding-x) - 2px);
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-medium);
  font-size: var(--vs-semantic-text-body-xs-font-size);
  line-height: var(--vs-semantic-text-body-xs-line-height);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mat-mdc-text-field-wrapper
  .mat-mdc-form-field-flex
  .mat-mdc-floating-label
  mat-label {
  position: static;
  transform: none;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element) .mat-mdc-form-field-infix {
  padding: 0;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  textarea.mdc-text-field__input.cdk-textarea-autosize.mat-mdc-input-element {
  resize: vertical;
  overflow-y: auto;
  scrollbar-color: var(--vs-components-scroll-thumb) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  margin-top: 0;
  padding: calc(var(--vs-components-input-padding-y) - 2px) 0 0
    calc(var(--vs-components-input-padding-x) - 2px);
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-s-font-size);
  line-height: var(--vs-semantic-text-body-s-line-height);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  textarea.mdc-text-field__input.cdk-textarea-autosize.mat-mdc-input-element::-webkit-resizer {
  background: transparent;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  textarea.mdc-text-field__input.cdk-textarea-autosize.mat-mdc-input-element::-webkit-scrollbar {
  width: var(--vs-components-scroll-size);
  height: var(--vs-components-scroll-size);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  textarea.mdc-text-field__input.cdk-textarea-autosize.mat-mdc-input-element::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: var(--vs-components-scroll-radius);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  textarea.mdc-text-field__input.cdk-textarea-autosize.mat-mdc-input-element::-webkit-scrollbar-thumb {
  background-color: var(--vs-components-scroll-thumb);
  border: var(--vs-components-scroll-size-small) solid transparent;
  border-radius: var(--vs-components-scroll-radius);
  background-clip: content-box;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  textarea.mdc-text-field__input.cdk-textarea-autosize.mat-mdc-input-element::-webkit-resizer {
  background-color: transparent;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):not(
    .mdc-text-field--invalid
  ):has(textarea:active) {
  background-color: var(--vs-components-input-hover-bg);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--focused:not(.mdc-text-field--disabled) {
  background-color: var(--vs-components-input-hover-bg);
  border-color: var(--vs-components-input-pressed-border);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--focused:not(.mdc-text-field--disabled)
  .mdc-floating-label {
  color: var(--vs-components-input-default-label);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--focused:not(.mdc-text-field--disabled):has(
    textarea.mat-mdc-input-element.cdk-keyboard-focused
  ) {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) {
  border-color: var(--vs-components-input-error-border);
  background-color: var(--vs-components-input-default-bg);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-floating-label {
  color: var(--vs-components-input-error-label);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled)
  textarea.mdc-text-field__input {
  color: var(--vs-components-input-error-text);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--invalid:not(
    .mdc-text-field--disabled
  ).mdc-text-field--focused:has(textarea.mat-mdc-input-element.cdk-keyboard-focused) {
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--disabled {
  border-color: var(--vs-components-input-disabled-border);
  background-color: var(--vs-components-input-disabled-bg);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--disabled
  .mdc-floating-label {
  color: var(--vs-components-input-disabled-label);
}
.mat-mdc-form-field:has(textarea.mat-mdc-input-element)
  .mdc-text-field--filled.mdc-text-field--disabled
  textarea.mdc-text-field__input {
  color: var(--vs-components-input-disabled-text);
}
.h-2xl-mb {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-2xl-weight-medium);
  font-size: var(--vs-semantic-text-title-2xl-font-size-mb);
  line-height: var(--vs-semantic-text-title-2xl-line-height-mb);
  letter-spacing: var(--vs-semantic-text-title-2xl-letter-spacing);
}
.h-2xl-dk {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-2xl-weight-medium);
  font-size: var(--vs-semantic-text-title-2xl-font-size-dk);
  line-height: var(--vs-semantic-text-title-2xl-line-height-dk);
  letter-spacing: var(--vs-semantic-text-title-2xl-letter-spacing);
}
.h-xl-mb {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-xl-weight-medium);
  font-size: var(--vs-semantic-text-title-xl-font-size-mb);
  line-height: var(--vs-semantic-text-title-xl-line-height-mb);
  letter-spacing: var(--vs-semantic-text-title-xl-letter-spacing);
}
.h-xl-dk {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-xl-weight-medium);
  font-size: var(--vs-semantic-text-title-xl-font-size-dk);
  line-height: var(--vs-semantic-text-title-xl-line-height-dk);
  letter-spacing: var(--vs-semantic-text-title-xl-letter-spacing);
}
.h-l-mb {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-l-weight-medium);
  font-size: var(--vs-semantic-text-title-l-font-size-mb);
  line-height: var(--vs-semantic-text-title-l-line-height-mb);
  letter-spacing: var(--vs-semantic-text-title-l-letter-spacing);
}
.h-l-dk {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-l-weight-medium);
  font-size: var(--vs-semantic-text-title-l-font-size-dk);
  line-height: var(--vs-semantic-text-title-l-line-height-dk);
  letter-spacing: var(--vs-semantic-text-title-l-letter-spacing);
}
.h-m-mb {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-m-weight-medium);
  font-size: var(--vs-semantic-text-title-m-font-size-mb);
  line-height: var(--vs-semantic-text-title-m-line-height-mb);
  letter-spacing: var(--vs-semantic-text-title-m-letter-spacing);
}
.h-m-dk {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-m-weight-medium);
  font-size: var(--vs-semantic-text-title-m-font-size-dk);
  line-height: var(--vs-semantic-text-title-m-line-height-dk);
  letter-spacing: var(--vs-semantic-text-title-m-letter-spacing);
}
.h-s-mb {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-s-weight-medium);
  font-size: var(--vs-semantic-text-title-s-font-size-mb);
  line-height: var(--vs-semantic-text-title-s-line-height-mb);
  letter-spacing: var(--vs-semantic-text-title-s-letter-spacing);
}
.h-s-dk {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-title-s-weight-medium);
  font-size: var(--vs-semantic-text-title-s-font-size-dk);
  line-height: var(--vs-semantic-text-title-s-line-height-dk);
  letter-spacing: var(--vs-semantic-text-title-s-letter-spacing);
}
.p-xl {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-xl-font-size);
  line-height: var(--vs-semantic-text-body-xl-line-height);
}
.p-l {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-l-font-size);
  line-height: var(--vs-semantic-text-body-l-line-height);
}
.p-m {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-m-font-size);
  line-height: var(--vs-semantic-text-body-m-line-height);
}
.p-s {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-s-font-size);
  line-height: var(--vs-semantic-text-body-s-line-height);
}
.p-xs {
  font-family: var(--vs-semantic-text-font-family), var(--vs-semantic-text-font-base);
  font-weight: var(--vs-semantic-text-body-m-weight-regular);
  font-size: var(--vs-semantic-text-body-xs-font-size);
  line-height: var(--vs-semantic-text-body-xs-line-height);
}
.vs-text-link {
  color: var(--vs-components-link-primary-default);
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color ease-in-out 0.2s;
}
.vs-text-link:hover {
  color: var(--vs-components-link-primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--vs-components-link-primary-hover);
}
.vs-text-link:active {
  color: var(--vs-components-link-primary-pressed);
}
.vs-text-link:focus-visible {
  color: var(--vs-components-link-primary-pressed);
  text-decoration-color: var(--vs-components-link-primary-pressed);
  border-radius: var(--vs-components-link-focus-ring-radius);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.vs-text-link[aria-disabled='true'],
.vs-text-link:disabled {
  color: var(--vs-components-link-primary-disabled);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.vs-text-link-neutral {
  color: var(--vs-components-link-neutral-default);
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color ease-in-out 0.2s;
}
.vs-text-link-neutral:hover {
  color: var(--vs-components-link-neutral-hover);
  text-decoration: underline;
  text-decoration-color: var(--vs-components-link-neutral-hover);
}
.vs-text-link-neutral:active {
  color: var(--vs-components-link-neutral-pressed);
}
.vs-text-link-neutral:focus-visible {
  color: var(--vs-components-link-neutral-pressed);
  text-decoration-color: var(--vs-components-link-neutral-pressed);
  border-radius: var(--vs-components-link-focus-ring-radius);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.vs-text-link-neutral[aria-disabled='true'],
.vs-text-link-neutral:disabled {
  color: var(--vs-components-link-neutral-disabled);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.vs-text-link-inverse {
  color: var(--vs-components-link-inverse-default);
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color ease-in-out 0.2s;
}
.vs-text-link-inverse:hover {
  color: var(--vs-components-link-inverse-hover);
  text-decoration: underline;
  text-decoration-color: var(--vs-components-link-inverse-hover);
}
.vs-text-link-inverse:active {
  color: var(--vs-components-link-inverse-pressed);
}
.vs-text-link-inverse:focus-visible {
  color: var(--vs-components-link-inverse-pressed);
  text-decoration-color: var(--vs-components-link-inverse-pressed);
  border-radius: var(--vs-components-link-focus-ring-radius);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.vs-text-link-inverse[aria-disabled='true'],
.vs-text-link-inverse:disabled {
  color: var(--vs-components-link-inverse-disabled);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.p-xl a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse) {
  color: var(--vs-components-link-primary-default);
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color ease-in-out 0.2s;
}
.p-xl a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):hover {
  color: var(--vs-components-link-primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--vs-components-link-primary-hover);
}
.p-xl a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):active {
  color: var(--vs-components-link-primary-pressed);
}
.p-xl a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):focus-visible {
  color: var(--vs-components-link-primary-pressed);
  text-decoration-color: var(--vs-components-link-primary-pressed);
  border-radius: var(--vs-components-link-focus-ring-radius);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.p-xl a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse)[aria-disabled='true'],
.p-xl a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):disabled {
  color: var(--vs-components-link-primary-disabled);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.p-l a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse) {
  color: var(--vs-components-link-primary-default);
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color ease-in-out 0.2s;
}
.p-l a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):hover {
  color: var(--vs-components-link-primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--vs-components-link-primary-hover);
}
.p-l a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):active {
  color: var(--vs-components-link-primary-pressed);
}
.p-l a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):focus-visible {
  color: var(--vs-components-link-primary-pressed);
  text-decoration-color: var(--vs-components-link-primary-pressed);
  border-radius: var(--vs-components-link-focus-ring-radius);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.p-l a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse)[aria-disabled='true'],
.p-l a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):disabled {
  color: var(--vs-components-link-primary-disabled);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.p-m a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse) {
  color: var(--vs-components-link-primary-default);
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color ease-in-out 0.2s;
}
.p-m a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):hover {
  color: var(--vs-components-link-primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--vs-components-link-primary-hover);
}
.p-m a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):active {
  color: var(--vs-components-link-primary-pressed);
}
.p-m a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):focus-visible {
  color: var(--vs-components-link-primary-pressed);
  text-decoration-color: var(--vs-components-link-primary-pressed);
  border-radius: var(--vs-components-link-focus-ring-radius);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.p-m a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse)[aria-disabled='true'],
.p-m a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):disabled {
  color: var(--vs-components-link-primary-disabled);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.p-s a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse) {
  color: var(--vs-components-link-primary-default);
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color ease-in-out 0.2s;
}
.p-s a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):hover {
  color: var(--vs-components-link-primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--vs-components-link-primary-hover);
}
.p-s a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):active {
  color: var(--vs-components-link-primary-pressed);
}
.p-s a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):focus-visible {
  color: var(--vs-components-link-primary-pressed);
  text-decoration-color: var(--vs-components-link-primary-pressed);
  border-radius: var(--vs-components-link-focus-ring-radius);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.p-s a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse)[aria-disabled='true'],
.p-s a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):disabled {
  color: var(--vs-components-link-primary-disabled);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.p-xs a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse) {
  color: var(--vs-components-link-primary-default);
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color ease-in-out 0.2s;
}
.p-xs a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):hover {
  color: var(--vs-components-link-primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--vs-components-link-primary-hover);
}
.p-xs a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):active {
  color: var(--vs-components-link-primary-pressed);
}
.p-xs a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):focus-visible {
  color: var(--vs-components-link-primary-pressed);
  text-decoration-color: var(--vs-components-link-primary-pressed);
  border-radius: var(--vs-components-link-focus-ring-radius);
  box-shadow:
    0 0 0 var(--vs-semantic-focus-ring-width) var(--vs-semantic-border-focus-inverse),
    0 0 0 var(--vs-semantic-focus-ring-width-l) var(--vs-semantic-border-focus-default);
  outline: none;
}
.p-xs a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse)[aria-disabled='true'],
.p-xs a:not(.vs-link):not(.vs-text-link-neutral):not(.vs-text-link-inverse):disabled {
  color: var(--vs-components-link-primary-disabled);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.vs-global-surface-inverse {
  background-color: var(--vs-global-surface-inverse);
  color: var(--vs-global-text-inverse);
  padding: var(--vs-semantic-spacing-sm-xs);
}
:root {
  --mat-dialog-container-shape: var(--vs-components-dialog-radius);
  --mdc-dialog-container-shape: var(--vs-components-dialog-radius);
  --mat-dialog-container-background-color: var(--vs-components-dialog-bg);
  --mdc-dialog-container-color: var(--vs-components-dialog-bg);
  --mat-dialog-headline-padding: var(--vs-components-dialog-padding-y)
    var(--vs-components-dialog-padding-x) var(--vs-components-dialog-gap-s);
  --mat-dialog-content-padding: 0 var(--vs-components-dialog-padding-x);
  --mat-dialog-with-actions-content-padding: 0 var(--vs-components-dialog-padding-x);
  --mat-dialog-actions-padding: var(--vs-components-dialog-gap-s)
    var(--vs-components-dialog-padding-x) var(--vs-components-dialog-padding-y);
  --mat-dialog-actions-alignment: end;
  --mat-dialog-actions-main-axis-gap: var(--vs-semantic-spacing-sm-m);
  --mat-dialog-legacy-backdrop-color: var(--vs-components-overlay-bg-default);
  --mdc-dialog-subhead-color: var(--vs-components-dialog-title);
  --mdc-dialog-subhead-font: var(--vs-semantic-text-font-family);
  --mdc-dialog-subhead-size: var(--vs-semantic-text-title-s-font-size-dk);
  --mdc-dialog-subhead-line-height: var(--vs-semantic-text-title-s-line-height-dk);
  --mdc-dialog-subhead-weight: var(--vs-semantic-text-title-s-weight-medium);
  --mdc-dialog-subhead-tracking: var(--vs-semantic-text-title-s-letter-spacing);
  --mdc-dialog-supporting-text-color: var(--vs-components-dialog-body);
  --mdc-dialog-supporting-text-font: var(--vs-semantic-text-font-family);
  --mdc-dialog-supporting-text-size: var(--vs-semantic-text-body-m-font-size);
  --mdc-dialog-supporting-text-line-height: var(--vs-semantic-text-body-m-line-height);
  --mdc-dialog-supporting-text-weight: var(--vs-semantic-text-body-m-weight-regular);
  --mdc-dialog-supporting-text-tracking: var(--vs-semantic-text-body-m-letter-spacing);
}
.cdk-overlay-backdrop.cdk-overlay-dark-backdrop {
  background-color: var(--vs-components-overlay-bg-default);
}
.cdk-overlay-container .mdc-dialog__surface {
  background-color: var(--vs-components-dialog-bg) !important;
  border-radius: var(--vs-components-dialog-radius) !important;
}
.cdk-overlay-container .mdc-dialog__title {
  font-family: var(--vs-semantic-text-font-family) !important;
  font-size: var(--vs-semantic-text-title-s-font-size-dk) !important;
  font-weight: var(--vs-semantic-text-title-s-weight-medium) !important;
  line-height: var(--vs-semantic-text-title-s-line-height-dk) !important;
  letter-spacing: var(--vs-semantic-text-title-s-letter-spacing) !important;
  color: var(--vs-components-dialog-title) !important;
  padding: var(--vs-components-dialog-padding-y) var(--vs-components-dialog-padding-x)
    var(--vs-components-dialog-gap-s) !important;
  margin: 0 !important;
}
.cdk-overlay-container .mdc-dialog__title:before {
  display: none;
}
.cdk-overlay-container .mdc-dialog__content {
  font-family: var(--vs-semantic-text-font-family) !important;
  font-size: var(--vs-semantic-text-body-m-font-size) !important;
  font-weight: var(--vs-semantic-text-body-m-weight-regular) !important;
  line-height: var(--vs-semantic-text-body-m-line-height) !important;
  letter-spacing: var(--vs-semantic-text-body-m-letter-spacing) !important;
  color: var(--vs-components-dialog-body) !important;
  padding: 0 var(--vs-components-dialog-padding-x) !important;
  max-height: 65vh;
}
.cdk-overlay-container .mdc-dialog__actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: var(--vs-components-dialog-gap-s) var(--vs-components-dialog-padding-x)
    var(--vs-components-dialog-padding-y) !important;
  gap: var(--vs-semantic-spacing-sm-m) !important;
}
:root {
  --mat-stepper-container-color: transparent;
  --mat-stepper-header-icon-background-color: var(--vs-components-stepper-blocked-background);
  --mat-stepper-header-selected-state-icon-background-color: var(
    --vs-components-stepper-current-background
  );
  --mat-stepper-header-done-state-icon-background-color: var(
    --vs-components-stepper-completed-background
  );
  --mat-stepper-header-edit-state-icon-background-color: var(
    --vs-components-stepper-completed-background
  );
  --mat-stepper-header-icon-foreground-color: var(--vs-components-stepper-blocked-number);
  --mat-stepper-header-selected-state-icon-foreground-color: var(
    --vs-components-stepper-current-number
  );
  --mat-stepper-header-done-state-icon-foreground-color: var(
    --vs-components-stepper-completed-number
  );
  --mat-stepper-header-edit-state-icon-foreground-color: var(
    --vs-components-stepper-completed-number
  );
  --mat-stepper-line-color: var(--vs-components-stepper-blocked-line);
  --mat-stepper-header-hover-state-layer-color: transparent;
  --mat-stepper-header-focus-state-layer-color: transparent;
}
.ilsa-stepper__container .mat-step-icon {
  width: var(--vs-components-stepper-indicator-width);
  height: var(--vs-components-stepper-indicator-height);
  min-width: var(--vs-components-stepper-indicator-width);
  border: var(--vs-components-stepper-border-width) solid var(--vs-components-stepper-blocked-line);
  border-radius: var(--vs-components-stepper-radius);
  position: relative;
  z-index: 1;
}
.ilsa-stepper__container .mat-step-icon-selected {
  border-color: var(--vs-components-stepper-current-line);
}
.ilsa-stepper__container .mat-step-icon-state-done,
.ilsa-stepper__container .mat-step-icon-state-edit {
  border-color: var(--vs-components-stepper-completed-line);
}
.ilsa-stepper__container .mat-step-header {
  padding: var(--vs-components-stepper-padding-x);
  background-color: transparent;
}
.ilsa-stepper__container .mat-step-header:hover,
.ilsa-stepper__container .mat-step-header:focus {
  background-color: transparent;
}
.ilsa-stepper__container .mat-step-header:focus-visible {
  border-radius: var(--vs-semantic-radius-xs);
  outline: var(--vs-components-general-focus-ring-width) solid
    var(--vs-components-general-border-focus);
  outline-offset: var(--vs-semantic-border-width-thin);
}
.ilsa-stepper__container .mat-step-label {
  display: flex;
  flex-direction: column;
}
.ilsa-stepper__container .mat-stepper-horizontal-line {
  margin: 0 var(--vs-components-stepper-gap);
  border-top-width: var(--vs-components-stepper-border-width);
}
.ilsa-stepper__container
  .mat-step-header:has(.mat-step-icon-state-done)
  + .mat-stepper-horizontal-line,
.ilsa-stepper__container
  .mat-step-header:has(.mat-step-icon-state-edit)
  + .mat-stepper-horizontal-line,
.ilsa-stepper__container
  .mat-stepper-horizontal-line:has(+ .mat-step-header .mat-step-icon-selected) {
  border-top-color: var(--vs-components-stepper-current-line);
}
.ilsa-stepper__container .mat-vertical-stepper-header {
  padding: var(--vs-components-stepper-padding-x);
}
.ilsa-stepper__container .mat-vertical-content-container {
  margin-left: calc(
    var(--vs-components-stepper-indicator-width) / 2 + var(--vs-components-stepper-padding-x)
  );
  border-left: none;
  padding-left: var(--vs-components-stepper-gap);
}
.ilsa-stepper__container .mat-stepper-vertical-line:before {
  border-left-width: var(--vs-components-stepper-border-width);
  top: calc(var(--vs-components-stepper-gap) - 16px);
  bottom: calc(var(--vs-components-stepper-gap) - 16px);
}
.ilsa-stepper__container
  .mat-vertical-stepper-header:has(.mat-step-icon-state-done)
  .mat-stepper-vertical-line:before,
.ilsa-stepper__container
  .mat-vertical-stepper-header:has(.mat-step-icon-state-edit)
  .mat-stepper-vertical-line:before,
.ilsa-stepper__container
  .mat-vertical-stepper-header:has(
    + .mat-vertical-content-container + .mat-vertical-stepper-header .mat-step-icon-selected
  )
  .mat-stepper-vertical-line:before {
  border-left-color: var(--vs-components-stepper-current-line);
}