:root {
  --border-radius-none: 0px;
  --border-radius-rounded: 4px;
  --border-radius-full: 999999999px;
  --color-basic-primary: #007cbc;
  --color-basic-success: #008518;
  --color-basic-warning: #d76909;
  --color-basic-error: #e22c2c;
  --color-basic-black: #000000;
  --color-basic-white: #ffffff;
  --color-brand-blue: #007cbc;
  --color-brand-moblue: #62798d;
  --color-brand-green: #00a832;
  --color-brand-lightgreen: #a3ba1e;
  --color-brand-yellow: #fbb900;
  --color-brand-orange: #e07a0c;
  --color-palette-blue-100: #b2e7fa;
  --color-palette-blue-200: #87d8f8;
  --color-palette-blue-300: #52c9f4;
  --color-palette-blue-400: #30bcf3;
  --color-palette-blue-500: #0db1f2;
  --color-palette-blue-600: #08a1e2;
  --color-palette-blue-700: #008fd1;
  --color-palette-blue-800: #007cbc;
  --color-palette-blue-900: #006699;
  --color-palette-blue-1000: #004166;
  --color-palette-blue-050: #e2f6fd;
  --color-palette-moblue-100: #ced7de;
  --color-palette-moblue-200: #b1bcc8;
  --color-palette-moblue-300: #91a1b1;
  --color-palette-moblue-400: #7a8d9f;
  --color-palette-moblue-500: #62798d;
  --color-palette-moblue-600: #556a7c;
  --color-palette-moblue-700: #445564;
  --color-palette-moblue-800: #36424f;
  --color-palette-moblue-900: #242e38;
  --color-palette-moblue-1000: #1c252c;
  --color-palette-moblue-050: #eceff4;
  --color-palette-gray-100: #e5e8eb;
  --color-palette-gray-200: #cad1d8;
  --color-palette-gray-300: #9aa5b1;
  --color-palette-gray-400: #7b8793;
  --color-palette-gray-500: #606d7b;
  --color-palette-gray-600: #515f6c;
  --color-palette-gray-700: #3f4d5a;
  --color-palette-gray-800: #33404d;
  --color-palette-gray-900: #1f2933;
  --color-palette-gray-1000: #172430;
  --color-palette-gray-050: #f5f7fa;
  --color-palette-green-100: #c3e9c5;
  --color-palette-green-200: #9adaa1;
  --color-palette-green-300: #70cd79;
  --color-palette-green-400: #49c15b;
  --color-palette-green-500: #15b73b;
  --color-palette-green-600: #00a832;
  --color-palette-green-700: #009425;
  --color-palette-green-800: #008518;
  --color-palette-green-900: #006600;
  --color-palette-green-1000: #0a3d00;
  --color-palette-green-050: #e4f6e6;
  --color-palette-orange-100: #f8dfb4;
  --color-palette-orange-200: #f3c781;
  --color-palette-orange-300: #efb352;
  --color-palette-orange-400: #eda32c;
  --color-palette-orange-500: #ec9513;
  --color-palette-orange-600: #e58910;
  --color-palette-orange-700: #e07a0c;
  --color-palette-orange-800: #d76909;
  --color-palette-orange-900: #d05406;
  --color-palette-orange-1000: #8b3104;
  --color-palette-orange-050: #fcf2de;
  --color-palette-red-100: #ffe6e6;
  --color-palette-red-200: #fed7d7;
  --color-palette-red-300: #feb4b4;
  --color-palette-red-400: #fc8383;
  --color-palette-red-500: #f56666;
  --color-palette-red-600: #e22c2c;
  --color-palette-red-700: #c53030;
  --color-palette-red-800: #9b2c2c;
  --color-palette-red-900: #742a2a;
  --color-palette-red-1000: #4b1b1b;
  --color-palette-red-050: #fff5f5;
  --color-palette-yellow-100: #feeab4;
  --color-palette-yellow-200: #feda81;
  --color-palette-yellow-300: #fdcf4e;
  --color-palette-yellow-400: #ffcc22;
  --color-palette-yellow-500: #fbb900;
  --color-palette-yellow-600: #faab00;
  --color-palette-yellow-700: #fa9600;
  --color-palette-yellow-800: #f78502;
  --color-palette-yellow-900: #fa6705;
  --color-palette-yellow-1000: #af4204;
  --color-palette-yellow-050: #fff7e0;
  --color-palette-lightgreen-100: #eaf6c1;
  --color-palette-lightgreen-200: #def29c;
  --color-palette-lightgreen-300: #d2ec74;
  --color-palette-lightgreen-400: #c6e750;
  --color-palette-lightgreen-500: #bce331;
  --color-palette-lightgreen-600: #b3d228;
  --color-palette-lightgreen-700: #a3ba1e;
  --color-palette-lightgreen-800: #96a413;
  --color-palette-lightgreen-900: #7a7600;
  --color-palette-lightgreen-1000: #5c5600;
  --color-palette-lightgreen-050: #f8fce8;
  --color-fg-default: #172430;
  --color-fg-muted: #33404d;
  --color-fg-subtle: #3f4d5a;
  --color-fg-inverse: #ffffff;
  --color-fg-primary-default: #007cbc;
  --color-fg-primary-bolder: #004166;
  --color-fg-primary-inverse: #87d8f8;
  --color-fg-success-default: #008518;
  --color-fg-success-bolder: #0a3d00;
  --color-fg-success-inverse: #9adaa1;
  --color-fg-warning-default: #d76909;
  --color-fg-warning-bolder: #8b3104;
  --color-fg-warning-inverse: #f3c781;
  --color-fg-danger-default: #c53030;
  --color-fg-danger-bolder: #9b2c2c;
  --color-fg-danger-inverse: #feb4b4;
  --color-fg-secondary-default: #62798d;
  --color-fg-secondary-bolder: #445564;
  --color-fg-secondary-inverse: #b1bcc8;
  --color-bg-default: #ffffff;
  --color-bg-alt: #f5f7fa;
  --color-bg-emphasis: #172430;
  --color-bg-bolder: #cad1d8;
  --color-bg-bold: #e5e8eb;
  --color-bg-primary-default: #e2f6fd;
  --color-bg-primary-bolder: #004166;
  --color-bg-primary-emphasis: #007cbc;
  --color-bg-primary-brand: #007cbc;
  --color-bg-success-default: #c3e9c5;
  --color-bg-success-bolder: #0a3d00;
  --color-bg-success-emphasis: #008518;
  --color-bg-success-brand: #00a832;
  --color-bg-warning-default: #fcf2de;
  --color-bg-warning-bolder: #d05406;
  --color-bg-warning-emphasis: #d76909;
  --color-bg-warning-brand: #e07a0c;
  --color-bg-danger-default: #fff5f5;
  --color-bg-danger-bolder: #9b2c2c;
  --color-bg-danger-emphasis: #e22c2c;
  --color-bg-secondary-default: #ced7de;
  --color-bg-secondary-bolder: #445564;
  --color-bg-secondary-emphasis: #62798d;
  --color-bg-secondary-brand: #62798d;
  --color-stroke-default: #9aa5b1;
  --color-stroke-muted: #cad1d8;
  --color-stroke-subtle: #e5e8eb;
  --color-stroke-primary-default: #87d8f8;
  --color-stroke-primary-bolder: #004166;
  --color-stroke-primary-emphasis: #006699;
  --color-stroke-success-default: #9adaa1;
  --color-stroke-success-bolder: #0a3d00;
  --color-stroke-success-emphasis: #006600;
  --color-stroke-warning-default: #f3c781;
  --color-stroke-warning-bolder: #8b3104;
  --color-stroke-warning-emphasis: #d05406;
  --color-stroke-danger-default: #feb4b4;
  --color-stroke-danger-bolder: #742a2a;
  --color-stroke-danger-emphasis: #9b2c2c;
  --color-stroke-secondary-default: #b1bcc8;
  --color-stroke-secondary-bolder: #1c252c;
  --color-stroke-secondary-emphasis: #242e38;
  --color-vis-10: #73ac66;
  --color-vis-11: #b48e1e;
  --color-vis-12: #e8e221;
  --color-vis-01: #007cbc;
  --color-vis-02: #62798d;
  --color-vis-03: #a3ba1e;
  --color-vis-04: #e07a0c;
  --color-vis-05: #00a832;
  --color-vis-06: #fbb900;
  --color-vis-07: #00a6a7;
  --color-vis-08: #9a9d6b;
  --color-vis-09: #ed9d00;
  --button-bg-fill-primary: #007cbc;
  --button-bg-fill-secondary: #62798d;
  --button-bg-fill-danger: #e22c2c;
  --button-bg-fill-success: #008518;
  --button-bg-fill-warning: #d76909;
  --button-bg-fill-default: #f5f7fa;
  --button-bg-fill-hover-primary: #004166;
  --button-bg-fill-hover-secondary: #445564;
  --button-bg-fill-hover-danger: #9b2c2c;
  --button-bg-fill-hover-success: #0a3d00;
  --button-bg-fill-hover-warning: #d05406;
  --button-bg-fill-hover-default: #cad1d8;
  --button-bg-fill-hover-inverted: #172430;
  --button-bg-fill-inverted: #172430;
  --button-bg-outline-default: rgba(1, 1, 1, 0);
  --button-bg-outline-hover: #f5f7fa;
  --button-bg-text-default: rgba(1, 1, 1, 0);
  --button-bg-text-hover: #f5f7fa;
  --button-padding-h-md: 14px;
  --button-padding-h-sm: 8px;
  --button-padding-h-lg: 16px;
  --button-padding-v-md: 8px;
  --button-padding-v-sm: 6px;
  --button-padding-v-lg: 10px;
  --button-space-between-md: 8px;
  --button-space-between-sm: 4px;
  --button-space-between-lg: 12px;
  --button-border-radius: 0px;
  --button-fg-fill-primary: #ffffff;
  --button-fg-fill-secondary: #ffffff;
  --button-fg-fill-danger: #ffffff;
  --button-fg-fill-success: #ffffff;
  --button-fg-fill-warning: #172430;
  --button-fg-fill-default: #33404d;
  --button-fg-fill-inverted: #ffffff;
  --button-fg-outline-primary: #007cbc;
  --button-fg-outline-secondary: #62798d;
  --button-fg-outline-danger: #c53030;
  --button-fg-outline-success: #008518;
  --button-fg-outline-warning: #d76909;
  --button-fg-outline-default: #33404d;
  --button-fg-outline-inverted: #ffffff;
  --button-stroke-outline-primary: #006699;
  --button-stroke-outline-secondary: #242e38;
  --button-stroke-outline-success: #006600;
  --button-stroke-outline-danger: #9b2c2c;
  --button-stroke-outline-warning: #d05406;
  --button-stroke-outline-default: #9aa5b1;
  --button-stroke-outline-inverted: #e5e8eb;
  --button-stroke-text: rgba(1, 1, 1, 0);
  --button-stroke-active: #08a1e2;
  --button-icon-size-md: 16px;
  --button-icon-size-sm: 14px;
  --button-icon-size-lg: 20px;
  --button-round-border-radius: 999999999px;
  --input-bg-default: #ffffff;
  --input-bg-inset: #f5f7fa;
  --input-padding-h-md: 12px;
  --input-padding-h-sm: 10px;
  --input-padding-h-lg: 14px;
  --input-padding-v-md: 6px;
  --input-padding-v-sm: 4px;
  --input-padding-v-lg: 8px;
  --input-space-between-md: 4px;
  --input-space-between-sm: 4px;
  --input-space-between-lg: 4px;
  --input-stroke-default: #9aa5b1;
  --input-stroke-active: #08a1e2;
  --input-stroke-error: #e22c2c;
  --input-fg-text: #172430;
  --input-fg-placeholder: #3f4d5a;
  --input-fg-icon: #33404d;
  --input-border-radius-default: 0px;
  --input-border-radius-search: 999999999px;
  --input-icon-size-md: 16px;
  --input-icon-size-sm: 14px;
  --input-icon-size-lg: 20px;
  --checkbox-stroke-default: #606d7b;
  --checkbox-stroke-indeterminate: #606d7b;
  --checkbox-stroke-checked: #007cbc;
  --checkbox-space-between: 10px;
  --checkbox-bg-default: #f5f7fa;
  --checkbox-bg-checked: #007cbc;
  --checkbox-bg-indeterminate: #f5f7fa;
  --checkbox-bg-hover-default: #cad1d8;
  --checkbox-bg-hover-indeterminate: #cad1d8;
  --checkbox-bg-hover-checked: #004166;
  --checkbox-fg-default: rgba(1, 1, 1, 0);
  --checkbox-fg-checked: #ffffff;
  --checkbox-fg-indeterminate: #007cbc;
  --checkbox-border-radius: 0px;
  --checkbox-outline-default: rgba(1, 1, 1, 0);
  --checkbox-outline-active: #08a1e2;
  --checkbox-width: 18px;
  --checkbox-height: 18px;
  --radiobox-stroke-default: #606d7b;
  --radiobox-space-between: 10px;
  --radiobox-border-radius: 999999999px;
  --radiobox-outline-default: rgba(1, 1, 1, 0);
  --radiobox-outline-active: #08a1e2;
  --radiobox-bg-default: #f5f7fa;
  --radiobox-bg-hover-default: #cad1d8;
  --radiobox-fg-default: rgba(1, 1, 1, 0);
  --radiobox-fg-checked: #007cbc;
  --radiobox-width: 18px;
  --radiobox-height: 18px;
  --field-space-between: 2px;
  --dropdown-padding-v: 4px;
  --dropdown-item-padding-h: 10px;
  --dropdown-item-padding-v: 6px;
  --dropdown-item-space-between: 12px;
  --dropdown-item-bg-default: #ffffff;
  --dropdown-item-bg-hover: #f5f7fa;
  --dropdown-item-fg-default: #172430;
  --dropdown-item-fg-icon: #33404d;
  --dropdown-item-fg-alt: #33404d;
  --dropdown-item-stroke-active: #08a1e2;
  --dropdown-item-title-fg-default: #33404d;
  --dropdown-item-avatar-radius-default: 4px;
  --dropdown-item-avatar-radius-round: 999999999px;
  --dropdown-item-avatar-size: 32px;
  --dropdown-item-sub-margin-left: 12px;
  --dropdown-item-sub-space-between: 4px;
  --dropdown-stroke-default: #e5e8eb;
  --dropdown-padding-h: 0px;
  --dropdown-border-radius: 0px;
  --dropdown-divider-stroke: #cad1d8;
  --toggle-space-between: 10px;
  --toggle-border-radius: 999999999px;
  --toggle-width: 36px;
  --toggle-height: 20px;
  --toggle-outline-default: rgba(1, 1, 1, 0);
  --toggle-outline-active: #08a1e2;
  --toggle-bg-default: #cad1d8;
  --toggle-bg-hover-default: #7a8d9f;
  --toggle-bg-hover-checked: #004166;
  --toggle-bg-checked: #007cbc;
  --toggle-fg-default: #ffffff;
  --toggle-point-size: 18px;
  --chip-bg-fill-primary: #007cbc;
  --chip-bg-fill-secondary: #62798d;
  --chip-bg-fill-danger: #e22c2c;
  --chip-bg-fill-success: #008518;
  --chip-bg-fill-warning: #d76909;
  --chip-bg-fill-default: #172430;
  --chip-bg-alt-primary: #e2f6fd;
  --chip-bg-alt-secondary: #ced7de;
  --chip-bg-alt-danger: #fff5f5;
  --chip-bg-alt-success: #c3e9c5;
  --chip-bg-alt-warning: #fcf2de;
  --chip-bg-alt-default: #f5f7fa;
  --chip-fg-fill-primary: #ffffff;
  --chip-fg-fill-secondary: #ffffff;
  --chip-fg-fill-danger: #ffffff;
  --chip-fg-fill-success: #ffffff;
  --chip-fg-fill-warning: #172430;
  --chip-fg-fill-default: #ffffff;
  --chip-fg-alt-primary: #007cbc;
  --chip-fg-alt-secondary: #62798d;
  --chip-fg-alt-danger: #c53030;
  --chip-fg-alt-success: #008518;
  --chip-fg-alt-warning: #d76909;
  --chip-fg-alt-default: #172430;
  --chip-padding-h-md: 8px;
  --chip-padding-h-sm: 8px;
  --chip-padding-h-lg: 8px;
  --chip-padding-v-md: 4px;
  --chip-padding-v-sm: 4px;
  --chip-padding-v-lg: 4px;
  --chip-space-between-md: 4px;
  --chip-space-between-sm: 4px;
  --chip-space-between-lg: 6px;
  --chip-border-radius: 999999999px;
  --chip-outline-default: rgba(1, 1, 1, 0);
  --chip-outline-active: #08a1e2;
  --chip-icon-size-md: 16px;
  --chip-icon-size-sm: 14px;
  --chip-icon-size-lg: 20px;
  --card-border-radius-normal: 4px;
  --card-border-radius-sharp: 0px;
  --card-bg-default: #ffffff;
  --card-bg-alt: #f5f7fa;
  --card-bg-hover: #e5e8eb;
  --card-padding: 24px;
  --card-space-between: 12px;
  --card-actions-space-between: 8px;
  --card-content-text-color: #33404d;
  --card-stroke: #e5e8eb;
  --breadcrumb-space-between: 8px;
  --breadcrumb-fg-separator: #3f4d5a;
  --breadcrumb-fg-default: #172430;
  --breadcrumb-padding-v: 8px;
  --notification-space-between: 10px;
  --notification-fg-normal-default: #ffffff;
  --notification-fg-normal-primary: #ffffff;
  --notification-fg-normal-danger: #ffffff;
  --notification-fg-normal-warning: #172430;
  --notification-fg-normal-success: #ffffff;
  --notification-fg-normal-secondary: #ffffff;
  --notification-fg-alt-default: #172430;
  --notification-fg-alt-primary: #004166;
  --notification-fg-alt-danger: #9b2c2c;
  --notification-fg-alt-warning: #8b3104;
  --notification-fg-alt-success: #0a3d00;
  --notification-fg-alt-secondary: #445564;
  --notification-padding-v: 8px;
  --notification-padding-h: 12px;
  --notification-bg-normal-default: #172430;
  --notification-bg-normal-primary: #007cbc;
  --notification-bg-normal-danger: #e22c2c;
  --notification-bg-normal-warning: #d76909;
  --notification-bg-normal-success: #008518;
  --notification-bg-normal-secondary: #62798d;
  --notification-bg-alt-default: #f5f7fa;
  --notification-bg-alt-primary: #e2f6fd;
  --notification-bg-alt-danger: #fff5f5;
  --notification-bg-alt-warning: #fcf2de;
  --notification-bg-alt-success: #c3e9c5;
  --notification-bg-alt-secondary: #ced7de;
  --notification-icon-size: 20px;
  --notification-content-height: 34px;
  --notification-stroke: #e5e8eb;
  --notification-border-radius: 4px;
  --modal-bg: #ffffff;
  --modal-padding: 24px;
  --modal-space-between: 16px;
  --modal-border-radius: 4px;
  --modal-stroke: #e5e8eb;
  --backdrop-bg: #172430;
  --backdrop-opacity: 0.699999988079071px;
  --progress-bg: #f5f7fa;
  --progress-fg: #004166;
  --progress-bar-border-radius: 4px;
  --progress-bar-size-md: 8px;
  --progress-bar-size-lg: 14px;
  --progress-bar-size-sm: 4px;
  --indicator-border-radius: 999999999px;
  --indicator-count-size: 18px;
  --indicator-normal-size: 12px;
  --indicator-bg-normal-default: #172430;
  --indicator-bg-normal-primary: #007cbc;
  --indicator-bg-normal-danger: #e22c2c;
  --indicator-bg-normal-warning: #d76909;
  --indicator-bg-normal-success: #008518;
  --indicator-bg-normal-secondary: #62798d;
  --indicator-bg-alt-danger: #fff5f5;
  --indicator-bg-alt-warning: #fcf2de;
  --indicator-bg-alt-success: #c3e9c5;
  --indicator-bg-alt-secondary: #ced7de;
  --indicator-bg-alt-default: #f5f7fa;
  --indicator-bg-alt-primary: #e2f6fd;
  --indicator-fg-normal-default: #ffffff;
  --indicator-fg-normal-primary: #ffffff;
  --indicator-fg-normal-danger: #ffffff;
  --indicator-fg-normal-warning: #172430;
  --indicator-fg-normal-success: #ffffff;
  --indicator-fg-normal-secondary: #ffffff;
  --indicator-fg-alt-default: #172430;
  --indicator-fg-alt-primary: #004166;
  --indicator-fg-alt-danger: #9b2c2c;
  --indicator-fg-alt-warning: #8b3104;
  --indicator-fg-alt-success: #0a3d00;
  --indicator-fg-alt-secondary: #445564;
  --tooltip-padding-v: 4px;
  --tooltip-padding-h: 8px;
  --tooltip-border-radius: 4px;
  --tooltip-normal-bg: #ffffff;
  --tooltip-normal-fg: #172430;
  --tooltip-alt-bg: #172430;
  --tooltip-alt-fg: #ffffff;
  --tooltip-space-between: 8px;
  --tooltip-distance: 4px;
  --link-space-between: 4px;
  --link-icon-size: 16px;
  --link-fg-default: #172430;
  --link-fg-primary: #007cbc;
  --link-fg-danger: #c53030;
  --link-fg-warning: #d76909;
  --link-fg-success: #008518;
  --link-fg-secondary: #62798d;
  --link-fg-inverse: #ffffff;
  --link-fg-visited: rgba(
    0.4000000059604645,
    0.003921568859368563,
    0.6000000238418579,
    1
  );
  --link-fg-visited-dark: rgba(
    0.8669167757034302,
    0.644618034362793,
    0.9791666865348816,
    1
  );
  --link-fg-hover-default: #3f4d5a;
  --link-fg-hover-primary: #004166;
  --link-fg-hover-danger: #9b2c2c;
  --link-fg-hover-warning: #8b3104;
  --link-fg-hover-success: #0a3d00;
  --link-fg-hover-secondary: #445564;
  --link-fg-hover-inverse: #ced7de;
  --link-fg-hover-visited: rgba(
    0.2567169964313507,
    0.014218750409781933,
    0.3791666626930237,
    1
  );
  --link-fg-hover-visited-dark: rgba(
    0.7360479831695557,
    0.4031076431274414,
    0.9041666388511658,
    1
  );
  --link-stroke-active: #08a1e2;
  --tab-space-between: 8px;
  --tab-fg-default: #172430;
  --tab-padding-v: 8px;
  --tab-padding-h: 16px;
  --tab-stroke-default: rgba(1, 1, 1, 0);
  --tab-stroke-active: #006699;
  --tab-container-stroke: #cad1d8;
  --tab-container-stroke-width: 1px;
  --tab-stroke-width: 2px;
  --tab-bg-hover: #f5f7fa;
  --icon-md: 16px;
  --icon-sm: 14px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --icon-xxl: 32px;
  --icon-xs: 12px;
  --nav-item-padding-h: 12px;
  --nav-item-horizontal-padding-v: 6px;
  --nav-item-horizontal-space-between: 12px;
  --nav-item-horizontal-border-radius: 0px;
  --nav-item-bg-default: rgba(1, 1, 1, 0);
  --nav-item-bg-hover: #e5e8eb;
  --nav-item-bg-selected: rgba(1, 1, 1, 0);
  --nav-item-fg-default: #33404d;
  --nav-item-fg-alt: #3f4d5a;
  --nav-item-fg-icon-default: #3f4d5a;
  --nav-item-fg-icon-selected: #007cbc;
  --nav-item-fg-icon-hover: #33404d;
  --nav-item-fg-selected: #007cbc;
  --nav-item-fg-hover: #172430;
  --nav-item-stroke-active: #08a1e2;
  --nav-item-title-fg-default: #33404d;
  --nav-item-avatar-radius-default: 4px;
  --nav-item-avatar-radius-round: 999999999px;
  --nav-item-avatar-size: 32px;
  --nav-item-vertical-space-between: 2px;
  --nav-item-vertical-padding-v: 12px;
  --nav-item-vertical-border-radius: 4px;
  --nav-item-max-width: 150px;
  --nav-bottom-padding-h: 16px;
  --nav-bottom-padding-v: 4px;
  --nav-bottom-bg-default: #ffffff;
  --nav-bottom-bg-alt: #f5f7fa;
  --nav-list-space-between: 4px;
  --nav-sidebar-padding-v: 16px;
  --nav-sidebar-rail-padding-h: 4px;
  --nav-sidebar-drawer-padding-h: 12px;
  --nav-sidebar-drawer-width: 300px;
  --nav-sidebar-space-between: 16px;
  --nav-sidebar-bg-default: #ffffff;
  --nav-sidebar-bg-alt: #f5f7fa;
  --nav-toolbar-padding: 12px;
  --nav-toolbar-space-between: 12px;
  --nav-toolbar-website-height: 80px;
  --nav-toolbar-website-max-width: 1092px;
  --nav-wheel-arrow-bg-from-active: #007cbc;
  --nav-wheel-arrow-bg-from-disabled: #ffffff;
  --nav-wheel-arrow-bg-to-active: #006699;
  --nav-wheel-arrow-bg-to-disabled: #ced7de;
  --nav-wheel-arrow-size-desktop: 56px;
  --nav-wheel-arrow-size-tablet: 42px;
  --nav-wheel-item-fg-selected: #007cbc;
  --nav-wheel-item-fg-hover: #004166;
  --nav-wheel-item-fg-default: #556a7c;
  --nav-wheel-item-fg-disabled: #ffffff;
  --nav-wheel-item-opacity-active: 100px;
  --nav-wheel-item-opacity-first: 80px;
  --nav-wheel-item-opacity-second: 50px;
  --nav-wheel-item-opacity-third: 40px;
  --nav-wheel-list-space-between: 32px;
  --benefit-icon-bg: #a3ba1e;
  --benefit-icon-fg: #ffffff;
  --benefit-icon-width: 28px;
  --benefit-icon-padding: 4px;
  --benefit-text-fg: #445564;
  --benefit-text-bg: #f5f7fa;
  --benefit-text-padding-h: 8px;
  --benefit-text-padding-v: 6px;
  --benefit-popover-bg: #f5f7fa;
  --benefit-popover-fg: #33404d;
  --benefit-popover-padding: 16px;
  --benefit-height: 28px;
  --benefit-space-between: 2px;
  --pagination-space-between: 8px;
  --pagination-page-count-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --pagination-page-count-size: 16px;
  --pagination-page-count-height: 24px;
  --pagination-page-count-weight: 400;
  --pagination-page-count-style: normal;
  --pagination-page-count-color: #172430;
  --pagination-result-count-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --pagination-result-count-weight: 400;
  --pagination-result-count-style: normal;
  --pagination-result-count-size: 14px;
  --pagination-result-count-height: 20px;
  --pagination-result-count-color: #33404d;
  --pagination-page-info-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --pagination-page-info-weight: 400;
  --pagination-page-info-style: normal;
  --pagination-page-info-size: 14px;
  --pagination-page-info-height: 20px;
  --pagination-page-info-color: #3f4d5a;
  --item-padding-v: 6px;
  --item-padding-h: 12px;
  --item-space-between: 12px;
  --item-max-width: 150px;
  --item-border-radius: 0px;
  --item-bg-default: rgba(1, 1, 1, 0);
  --item-bg-hover: #e5e8eb;
  --item-bg-selected: rgba(1, 1, 1, 0);
  --item-fg-default: #33404d;
  --item-fg-alt: #3f4d5a;
  --item-fg-selected: #007cbc;
  --item-fg-icon-default: #3f4d5a;
  --item-fg-icon-selected: #007cbc;
  --item-fg-icon-hover: #33404d;
  --item-fg-hover: #172430;
  --item-stroke-active: #08a1e2;
  --item-title-fg-default: #33404d;
  --item-avatar-radius-default: 4px;
  --item-avatar-radius-round: 999999999px;
  --item-avatar-size: 32px;
  --accordion-divider-color: #e5e8eb;
  --accordion-divider-height: 1px;
  --accordion-content-padding: 12px;
  --tree-offset-padding-l: 12px;
  --tree-offset-width: 20px;
  --tree-offset-color: #e5e8eb;
  --stepper-offset-padding-l: 12px;
  --stepper-offset-width: 20px;
  --stepper-offset-color: #e5e8eb;
  --stepper-space-between-horizontal: 8px;
  --stepper-space-between-vertical: 4px;
  --stepper-padding-horizontal: 8px;
  --stepper-padding-vertical: 4px;
  --stepper-stroke-default: #e5e8eb;
  --stepper-stroke-active: #007cbc;
  --stepper-line-min-width: 48px;
  --stepper-line-min-height: 8px;
  --shadow-none: none;
  --shadow-md:
    0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg:
    0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-inset: 0px 2px 4px 0px rgba(0, 0, 0, 0.08) inset;
  --breakpoint-sm: 490px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1092px;
  --breakpoint-xl: 1440px;
  --space-scale-0: 0px;
  --space-scale-1: 4px;
  --space-scale-2: 8px;
  --space-scale-3: 12px;
  --space-scale-4: 16px;
  --space-scale-5: 20px;
  --space-scale-6: 24px;
  --space-scale-7: 32px;
  --space-scale-8: 48px;
  --space-scale-9: 64px;
  --space-scale-10: 96px;
  --space-scale-11: 192px;
  --space-scale-12: 256px;
  --space-scale-13: 384px;
  --space-scale-14: 512px;
  --space-scale-0-5: 2px;
  --space-scale-1-5: 6px;
  --space-scale-2-5: 10px;
  --space-scale-3-5: 14px;
  --text-font-sans:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-scale-0: 0px;
  --text-scale-1: 8px;
  --text-scale-2: 10px;
  --text-scale-3: 12px;
  --text-scale-4: 14px;
  --text-scale-5: 16px;
  --text-scale-6: 18px;
  --text-scale-7: 20px;
  --text-scale-8: 24px;
  --text-scale-9: 30px;
  --text-scale-10: 36px;
  --text-scale-11: 48px;
  --text-scale-12: 60px;
  --text-scale-13: 72px;
  --text-scale-14: 96px;
  --text-scale-15: 128px;
  --text-display-xl-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-display-xl-size: 96px;
  --text-display-xl-height: 128px;
  --text-display-xl-weight: 700;
  --text-display-xl-style: normal;
  --text-display-lg-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-display-lg-size: 72px;
  --text-display-lg-height: 96px;
  --text-display-lg-weight: 500;
  --text-display-lg-style: normal;
  --text-display-md-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-display-md-size: 60px;
  --text-display-md-height: 72px;
  --text-display-md-weight: 500;
  --text-display-md-style: normal;
  --text-display-sm-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-display-sm-size: 48px;
  --text-display-sm-height: 60px;
  --text-display-sm-weight: 500;
  --text-display-sm-style: normal;
  --text-heading-xl-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-heading-xl-size: 36px;
  --text-heading-xl-height: 40px;
  --text-heading-xl-weight: 700;
  --text-heading-xl-style: normal;
  --text-heading-lg-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-heading-lg-size: 30px;
  --text-heading-lg-height: 38px;
  --text-heading-lg-weight: 500;
  --text-heading-lg-style: normal;
  --text-heading-md-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-heading-md-size: 24px;
  --text-heading-md-height: 30px;
  --text-heading-md-weight: 500;
  --text-heading-md-style: normal;
  --text-heading-sm-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-heading-sm-size: 20px;
  --text-heading-sm-height: 28px;
  --text-heading-sm-weight: 400;
  --text-heading-sm-style: normal;
  --text-title-lg-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-title-lg-size: 18px;
  --text-title-lg-height: 20px;
  --text-title-lg-weight: 500;
  --text-title-lg-style: normal;
  --text-title-md-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-title-md-size: 16px;
  --text-title-md-height: 18px;
  --text-title-md-weight: 500;
  --text-title-md-style: normal;
  --text-title-sm-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-title-sm-size: 16px;
  --text-title-sm-height: 18px;
  --text-title-sm-weight: 400;
  --text-title-sm-style: normal;
  --text-title-xs-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-title-xs-size: 14px;
  --text-title-xs-height: 18px;
  --text-title-xs-weight: 700;
  --text-title-xs-style: normal;
  --text-highlight-lg-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-highlight-lg-size: 18px;
  --text-highlight-lg-height: 20px;
  --text-highlight-lg-weight: 500;
  --text-highlight-lg-style: italic;
  --text-highlight-md-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-highlight-md-size: 16px;
  --text-highlight-md-height: 18px;
  --text-highlight-md-weight: 500;
  --text-highlight-md-style: italic;
  --text-highlight-sm-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-highlight-sm-size: 16px;
  --text-highlight-sm-height: 18px;
  --text-highlight-sm-weight: 400;
  --text-highlight-sm-style: italic;
  --text-highlight-xs-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-highlight-xs-size: 14px;
  --text-highlight-xs-height: 18px;
  --text-highlight-xs-weight: 700;
  --text-highlight-xs-style: italic;
  --text-label-lg-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-label-lg-size: 18px;
  --text-label-lg-height: 24px;
  --text-label-lg-weight: 500;
  --text-label-lg-style: normal;
  --text-label-md-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-label-md-size: 16px;
  --text-label-md-height: 18px;
  --text-label-md-weight: 500;
  --text-label-md-style: normal;
  --text-label-sm-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-label-sm-size: 14px;
  --text-label-sm-height: 18px;
  --text-label-sm-weight: 500;
  --text-label-sm-style: normal;
  --text-label-xs-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-label-xs-size: 12px;
  --text-label-xs-height: 16px;
  --text-label-xs-weight: 500;
  --text-label-xs-style: normal;
  --text-body-xxl-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-body-xxl-size: 24px;
  --text-body-xxl-height: 32px;
  --text-body-xxl-weight: 400;
  --text-body-xxl-style: normal;
  --text-body-xl-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-body-xl-size: 20px;
  --text-body-xl-height: 28px;
  --text-body-xl-weight: 400;
  --text-body-xl-style: normal;
  --text-body-lg-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-body-lg-size: 18px;
  --text-body-lg-height: 28px;
  --text-body-lg-weight: 400;
  --text-body-lg-style: normal;
  --text-body-md-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-body-md-size: 16px;
  --text-body-md-height: 24px;
  --text-body-md-weight: 400;
  --text-body-md-style: normal;
  --text-body-sm-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-body-sm-size: 14px;
  --text-body-sm-height: 20px;
  --text-body-sm-weight: 400;
  --text-body-sm-style: normal;
  --text-body-xs-type:
    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --text-body-xs-size: 12px;
  --text-body-xs-height: 18px;
  --text-body-xs-weight: 400;
  --text-body-xs-style: normal;
  --text-style-normal: normal;
  --text-style-italic: italic;
  --text-weight-normal: 400;
  --text-weight-medium: 500;
  --text-weight-bold: 700;
}
html,
body,
div,
span,
applet,
object,
iframe,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
label,
legend,
p,
blockquote,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: #000;
  background: #fff;
}
:focus,
:focus-visible {
  outline: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}
abbr,
acronym {
  border: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
sub {
  vertical-align: sub;
}
.shadow-none {
  box-shadow: var(--shadow-none);
}
.shadow,
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-inset,
.shadow-inner {
  box-shadow: var(--shadow-inset);
}
:root {
  --space-1: var(--space-scale-1);
  --space-2: var(--space-scale-2);
  --space-3: var(--space-scale-3);
  --space-4: var(--space-scale-4);
  --space-5: var(--space-scale-5);
  --space-6: var(--space-scale-6);
  --space-7: var(--space-scale-7);
  --space-8: var(--space-scale-8);
  --space-9: var(--space-scale-9);
  --space-10: var(--space-scale-10);
  --space-11: var(--space-scale-11);
  --space-12: var(--space-scale-12);
  --space-13: var(--space-scale-13);
  --space-14: var(--space-scale-14);
}
:root {
  --text-1: var(--text-scale-1);
  --text-2: var(--text-scale-2);
  --text-3: var(--text-scale-3);
  --text-4: var(--text-scale-4);
  --text-5: var(--text-scale-5);
  --text-6: var(--text-scale-6);
  --text-7: var(--text-scale-7);
  --text-8: var(--text-scale-8);
  --text-9: var(--text-scale-9);
  --text-10: var(--text-scale-10);
  --text-11: var(--text-scale-11);
  --font-stack: var(--text-font-sans);
}
.border-radius--none {
  border-radius: var(--border-radius-none);
}
.border-radius--rounded {
  border-radius: var(--border-radius-rounded);
}
.border-radius--full {
  border-radius: var(--border-radius-full);
}
:root {
  --icon-size-tiny: 16px;
  --icon-size-small: 18px;
  --icon-size-normal: 20px;
  --icon-size-medium: 24px;
  --icon-size-large: 32px;
  --icon-size-larger: 48px;
}
.icon {
  --size: var(--icon-size-normal);
  width: var(--size);
  height: var(--size);
}
.icon--tiny {
  --size: var(--icon-size-tiny);
}
.icon--small {
  --size: var(--icon-size-small);
}
.icon--normal {
  --size: var(--icon-size-normal);
}
.icon--medium {
  --size: var(--icon-size-medium);
}
.icon--large {
  --size: var(--icon-size-large);
}
.icon--larger {
  --size: var(--icon-size-larger);
}
html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font-stack);
  color: var(--color-fg-default);
  background-color: var(--color-bg-default);
}
:root {
  --content-max-width-large: 1200px;
  --content-max-width-medium: 750px;
  --content-max-width-small: 350px;
}
.default-page-container-padding {
  padding: var(--space-scale-4) var(--space-scale-6);
}
.centered-max-width-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.centered-max-width-container > .content-wrapper {
  --set-max-width: var(--content-max-width-large);
  width: 100%;
  max-width: var(--set-max-width);
}
.centered-max-width-container > .content-wrapper--medium {
  --set-max-width: var(--content-max-width-medium);
}
.centered-max-width-container > .content-wrapper--small {
  --set-max-width: var(--content-max-width-small);
}
@media all and (max-width: 600px) {
  .default-page-container-padding {
    padding: var(--space-scale-4) var(--space-scale-4);
  }
}
.flex {
  display: flex;
}
.flex--column {
  flex-direction: column !important;
}
.flex--row {
  flex-direction: row !important;
}
.flex--row-reverse {
  flex-direction: row-reverse !important;
}
.flex--column-reverse {
  flex-direction: column-reverse !important;
}
.flex--wrap {
  flex-wrap: wrap !important;
}
.flex--no-wrap {
  flex-wrap: nowrap !important;
}
.flex--wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.flex--centered {
  align-items: center;
}
.flex--baseline {
  align-items: baseline;
}
.flex--align-center {
  align-items: center;
}
.flex--align-baseline {
  align-items: baseline;
}
.flex--align-stretch {
  align-items: stretch;
}
.flex--align-flex-start {
  align-items: flex-start;
}
.flex--align-flex-end {
  align-items: flex-end;
}
.flex--align-start {
  align-items: start;
}
.flex--align-end {
  align-items: end;
}
.flex--align-self-center {
  align-self: center;
}
.flex--align-self-baseline {
  align-self: baseline;
}
.flex--align-self-stretch {
  align-self: stretch;
}
.flex--align-self-flex-start {
  align-self: flex-start;
}
.flex--align-self-flex-end {
  align-self: flex-end;
}
.flex--align-self-start {
  align-self: start;
}
.flex--align-self-end {
  align-self: end;
}
.flex--justify-flex-start {
  justify-content: flex-start;
}
.flex--justify-flex-end {
  justify-content: flex-end;
}
.flex--justify-center {
  justify-content: center;
}
.flex--justify-space-between {
  justify-content: space-between;
}
.flex--justify-space-around {
  justify-content: space-around;
}
.flex--justify-space-evenly {
  justify-content: space-evenly;
}
.flex-basis-full {
  flex-basis: 100%;
}
.flex-grow-full {
  flex: 1;
}
.flex-grow-full-auto {
  flex: 1 1 auto;
}
.card {
  --background: var(--card-bg-default);
  --background-clickable-hover: var(--card-bg-hover);
  background-color: var(--background);
  border-radius: var(--card-border-radius-normal);
  border: 1px solid var(--card-stroke);
  transition: all 100ms ease-in-out;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}
.card figure {
  margin: 0;
  overflow: hidden;
  position: relative;
  display: inline-flex;
}
.card figure img {
  object-fit: cover;
  overflow: hidden;
}
.card figure:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: var(--shadow-inset);
}
.card:not(.card--side) figure img {
  width: 100%;
}
.card--raised {
  box-shadow: var(--shadow-md);
}
.card--alt {
  --background: var(--card-bg-alt);
}
.card--sharp {
  border-radius: var(--card-border-radius-sharp);
}
.card--clickable {
  cursor: pointer;
}
.card--clickable:hover {
  background-color: var(--background-clickable-hover);
}
.card--clickable:hover figure {
  opacity: 0.8;
}
.card--clickable figure {
  transition: opacity 100ms ease-in-out;
}
.card--side {
  flex-direction: row;
}
.card--side figure img {
  height: 100%;
}
.card .card__body {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--card-space-between);
  flex: 1;
}
.card .card__body .card__title {
  font-size: var(--text-title-lg-size);
  line-height: var(--text-title-lg-height);
  font-weight: var(--text-title-lg-weight);
  font-style: var(--text-title-lg-style);
}
.card .card__body .card__text {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
  color: var(--card-content-text-color);
}
.card .card__body .card__actions {
  display: flex;
  gap: var(--card-actions-space-between);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
:root {
  --text-1: var(--text-scale-1);
  --text-2: var(--text-scale-2);
  --text-3: var(--text-scale-3);
  --text-4: var(--text-scale-4);
  --text-5: var(--text-scale-5);
  --text-6: var(--text-scale-6);
  --text-7: var(--text-scale-7);
  --text-8: var(--text-scale-8);
  --text-9: var(--text-scale-9);
  --text-10: var(--text-scale-10);
  --text-11: var(--text-scale-11);
  --font-stack: var(--text-font-sans);
}
:root {
  --text-1: var(--text-scale-1);
  --text-2: var(--text-scale-2);
  --text-3: var(--text-scale-3);
  --text-4: var(--text-scale-4);
  --text-5: var(--text-scale-5);
  --text-6: var(--text-scale-6);
  --text-7: var(--text-scale-7);
  --text-8: var(--text-scale-8);
  --text-9: var(--text-scale-9);
  --text-10: var(--text-scale-10);
  --text-11: var(--text-scale-11);
  --font-stack: var(--text-font-sans);
}
.textfield {
  background: var(--input-bg-default);
  border: 1px solid var(--input-stroke-default);
  border-radius: var(--input-border-radius-default);
  padding: var(--input-padding-v-md) var(--input-padding-h-md);
  transition: all 150ms ease-in-out;
  color: var(--input-fg-text);
  gap: var(--input-space-between-md);
  outline: none;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.textfield * {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.textfield--inset {
  background-color: var(--input-bg-inset);
}
.textfield--search {
  border-radius: var(--input-border-radius-search);
}
.textfield:active,
.textfield:focus,
.textfield:has(input:focus),
.textfield:has(input:active),
.textfield:focus-within {
  outline: 1px solid var(--input-stroke-active);
}
.textfield:disabled,
.textfield--disabled,
.textfield:has(input:disabled) {
  opacity: 0.6;
  cursor: initial;
}
.textfield::placeholder {
  color: var(--input-fg-placeholder);
}
.textfield.error,
.textfield--error {
  border-color: var(--input-stroke-error);
}
.textfield__icon {
  color: var(--input-fg-icon);
  flex-shrink: 0;
  width: var(--input-icon-size-md);
  height: var(--input-icon-size-md);
}
.textfield--sm {
  padding: var(--input-padding-v-sm) var(--input-padding-h-sm);
  gap: var(--input-space-between-sm);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.textfield--sm * {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.textfield--sm .textfield__icon {
  width: var(--input-icon-size-sm);
  height: var(--input-icon-size-sm);
}
.textfield--lg {
  padding: var(--input-padding-v-lg) var(--input-padding-h-lg);
  gap: var(--input-space-between-lg);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.textfield--lg * {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.textfield--lg .textfield__icon {
  width: var(--input-icon-size-lg);
  height: var(--input-icon-size-lg);
}
input.textfield {
  width: 100%;
  box-sizing: border-box;
}
div.textfield {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
div.textfield input,
div.textfield textarea {
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  box-sizing: border-box;
}
.field-wrapper {
  display: inline-flex;
  flex-direction: column;
  gap: var(--field-space-between);
}
.field-wrapper label {
  color: var(--color-fg-default);
  position: relative;
  width: auto;
  align-self: flex-start;
  display: flex;
  gap: var(--space-scale-0-5);
}
.field-wrapper label.required::after,
.field-wrapper label--required::after {
  content: "*";
  font-weight: bold;
}
.field-wrapper .textfield__errors,
.field-wrapper .errors {
  color: var(--color-fg-danger-default);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.field-wrapper .textfield__hints,
.field-wrapper .hints {
  width: 100%;
  color: var(--color-fg-muted);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.field-wrapper .textfield__success,
.field-wrapper .success {
  color: var(--color-fg-success-default);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.basic-select {
  background: var(--input-bg-default);
  border: 1px solid var(--input-stroke-default);
  border-radius: var(--input-border-radius-default);
  padding: var(--input-padding-v-md) var(--input-padding-h-md);
  transition: all 150ms ease-in-out;
  color: var(--input-fg-text);
  gap: var(--input-space-between-md);
  outline: none;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.basic-select * {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.basic-select--inset {
  background-color: var(--input-bg-inset);
}
.basic-select--search {
  border-radius: var(--input-border-radius-search);
}
.basic-select:active,
.basic-select:focus,
.basic-select:has(input:focus),
.basic-select:has(input:active),
.basic-select:focus-within {
  outline: 1px solid var(--input-stroke-active);
}
.basic-select:disabled,
.basic-select--disabled,
.basic-select:has(input:disabled) {
  opacity: 0.6;
  cursor: initial;
}
.basic-select::placeholder {
  color: var(--input-fg-placeholder);
}
.basic-select.error,
.basic-select--error {
  border-color: var(--input-stroke-error);
}
.basic-select__icon {
  color: var(--input-fg-icon);
  flex-shrink: 0;
  width: var(--input-icon-size-md);
  height: var(--input-icon-size-md);
}
.basic-select--sm {
  padding: var(--input-padding-v-sm) var(--input-padding-h-sm);
  gap: var(--input-space-between-sm);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.basic-select--sm * {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.basic-select--sm .basic-select__icon {
  width: var(--input-icon-size-sm);
  height: var(--input-icon-size-sm);
}
.basic-select--lg {
  padding: var(--input-padding-v-lg) var(--input-padding-h-lg);
  gap: var(--input-space-between-lg);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.basic-select--lg * {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.basic-select--lg .basic-select__icon {
  width: var(--input-icon-size-lg);
  height: var(--input-icon-size-lg);
}
.basic-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-stack);
  padding-right: var(--space-scale-7);
  transition: all 150ms ease-in-out;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, var(--input-fg-text) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1px + 50%),
    calc(100% - 16.1px) calc(1px + 50%);
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
}
.combobox {
  background: var(--input-bg-default);
  border: 1px solid var(--input-stroke-default);
  border-radius: var(--input-border-radius-default);
  padding: var(--input-padding-v-md) var(--input-padding-h-md);
  transition: all 150ms ease-in-out;
  color: var(--input-fg-text);
  gap: var(--input-space-between-md);
  outline: none;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.combobox * {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.combobox--inset {
  background-color: var(--input-bg-inset);
}
.combobox--search {
  border-radius: var(--input-border-radius-search);
}
.combobox:active,
.combobox:focus,
.combobox:has(input:focus),
.combobox:has(input:active),
.combobox:focus-within {
  outline: 1px solid var(--input-stroke-active);
}
.combobox:disabled,
.combobox--disabled,
.combobox:has(input:disabled) {
  opacity: 0.6;
  cursor: initial;
}
.combobox::placeholder {
  color: var(--input-fg-placeholder);
}
.combobox.error,
.combobox--error {
  border-color: var(--input-stroke-error);
}
.combobox__icon {
  color: var(--input-fg-icon);
  flex-shrink: 0;
  width: var(--input-icon-size-md);
  height: var(--input-icon-size-md);
}
.combobox--sm {
  padding: var(--input-padding-v-sm) var(--input-padding-h-sm);
  gap: var(--input-space-between-sm);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.combobox--sm * {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.combobox--sm .combobox__icon {
  width: var(--input-icon-size-sm);
  height: var(--input-icon-size-sm);
}
.combobox--lg {
  padding: var(--input-padding-v-lg) var(--input-padding-h-lg);
  gap: var(--input-space-between-lg);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.combobox--lg * {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.combobox--lg .combobox__icon {
  width: var(--input-icon-size-lg);
  height: var(--input-icon-size-lg);
}
.combobox {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-stack);
  padding-right: var(--space-scale-7);
  transition: all 150ms ease-in-out;
}
.basic-select::-ms-expand {
  display: none;
}
.btn,
.button {
  --button-background: var(--button-bg-fill-default);
  --text-color: var(--button-fg-fill-default);
  --hover-background: var(--button-bg-fill-hover-default);
  --quiet-text-color: var(--button-fg-outline-default);
  --quiet-background-hover: var(--button-bg-text-hover);
  --outline-color: var(--button-stroke-outline-default);
  --padding-v: var(--button-padding-v-md);
  --padding-h: var(--button-padding-h-md);
  position: relative;
  outline: none;
  padding: var(--padding-v) var(--padding-h);
  border-radius: var(--button-border-radius);
  display: inline-flex;
  align-items: center;
  gap: var(--button-space-between-md);
  cursor: pointer;
  background: var(--button-background);
  color: var(--text-color);
  font-size: var(--text-scale-4);
  font-weight: var(--text-weight-medium);
  font-family: var(--font-stack);
  border: 2px solid rgba(0, 0, 0, 0);
  transition: background-color 100ms linear;
}
.btn:active,
.btn:focus,
.button:active,
.button:focus {
  outline: 1px solid var(--button-stroke-active);
}
.btn:hover:not(:disabled):not(.btn--quiet, .button--quiet):not(
    .btn--outline,
    .button--outline
  ),
.button:hover:not(:disabled):not(.btn--quiet, .button--quiet):not(
    .btn--outline,
    .button--outline
  ) {
  background: var(--hover-background);
}
.btn__icon,
.button__icon {
  width: var(--button-icon-size-md);
  height: var(--button-icon-size-md);
}
.btn--quiet,
.btn--outline,
.button--quiet,
.button--outline {
  background: none;
  color: var(--quiet-text-color);
}
.btn--quiet:hover:not(:disabled),
.btn--outline:hover:not(:disabled),
.button--quiet:hover:not(:disabled),
.button--outline:hover:not(:disabled) {
  background-color: var(--quiet-background-hover);
}
.btn--outline,
.button--outline {
  border: 2px solid var(--outline-color);
}
.btn--primary,
.button--primary {
  --button-background: var(--button-bg-fill-primary);
  --text-color: var(--button-fg-fill-primary);
  --hover-background: var(--button-bg-fill-hover-primary);
  --quiet-text-color: var(--button-fg-outline-primary);
  --outline-color: var(--button-stroke-outline-primary);
}
.btn--secondary,
.button--secondary {
  --button-background: var(--button-bg-fill-secondary);
  --text-color: var(--button-fg-fill-secondary);
  --hover-background: var(--button-bg-fill-hover-secondary);
  --quiet-text-color: var(--button-fg-outline-secondary);
  --outline-color: var(--button-stroke-outline-secondary);
}
.btn--friendly,
.btn--success,
.button--friendly,
.button--success {
  --button-background: var(--button-bg-fill-success);
  --text-color: var(--button-fg-fill-success);
  --hover-background: var(--button-bg-fill-hover-success);
  --quiet-text-color: var(--button-fg-outline-success);
  --outline-color: var(--button-stroke-outline-success);
}
.btn--danger,
.button--danger {
  --button-background: var(--button-bg-fill-danger);
  --text-color: var(--button-fg-fill-danger);
  --hover-background: var(--button-bg-fill-hover-danger);
  --quiet-text-color: var(--button-fg-outline-danger);
  --outline-color: var(--button-stroke-outline-danger);
}
.btn--warning,
.button--warning {
  --button-background: var(--button-bg-fill-warning);
  --text-color: var(--button-fg-fill-warning);
  --hover-background: var(--button-bg-fill-hover-warning);
  --quiet-text-color: var(--button-fg-outline-warning);
  --outline-color: var(--button-stroke-outline-warning);
}
.btn--inverted,
.button--inverted {
  --button-background: transparent;
  --text-color: var(--button-fg-fill-inverted);
  --hover-background: transparent;
  --quiet-text-color: var(--button-fg-outline-inverted);
  --outline-color: var(--button-stroke-outline-inverted);
}
.btn--large,
.button--large {
  --padding-h: var(--button-padding-h-lg);
  --padding-v: var(--button-padding-v-lg);
  font-size: var(--text-scale-6);
  gap: var(--button-space-between-lg);
}
.btn--large .btn__icon,
.btn--large .button__icon,
.button--large .btn__icon,
.button--large .button__icon {
  width: var(--button-icon-size-lg);
  height: var(--button-icon-size-lg);
}
.btn--small,
.button--small {
  --padding-h: var(--button-padding-h-sm);
  --padding-v: var(--button-padding-v-sm);
  font-size: var(--text-scale-3);
  gap: var(--button-space-between-sm);
}
.btn--small .btn__icon,
.btn--small .button__icon,
.button--small .btn__icon,
.button--small .button__icon {
  width: var(--button-icon-size-sm);
  height: var(--button-icon-size-sm);
}
.btn--round,
.btn--rounded,
.btn--floating,
.button--round,
.button--rounded,
.button--floating {
  border-radius: var(--button-round-border-radius);
  --padding-v: var(--padding-h);
  justify-content: center;
}
.btn--floating,
.button--floating {
  box-shadow: var(--shadow-md);
}
.btn:disabled,
.button:disabled {
  opacity: 0.6;
  cursor: initial;
}
:root {
  --text-1: var(--text-scale-1);
  --text-2: var(--text-scale-2);
  --text-3: var(--text-scale-3);
  --text-4: var(--text-scale-4);
  --text-5: var(--text-scale-5);
  --text-6: var(--text-scale-6);
  --text-7: var(--text-scale-7);
  --text-8: var(--text-scale-8);
  --text-9: var(--text-scale-9);
  --text-10: var(--text-scale-10);
  --text-11: var(--text-scale-11);
  --font-stack: var(--text-font-sans);
}
.textfield {
  background: var(--input-bg-default);
  border: 1px solid var(--input-stroke-default);
  border-radius: var(--input-border-radius-default);
  padding: var(--input-padding-v-md) var(--input-padding-h-md);
  transition: all 150ms ease-in-out;
  color: var(--input-fg-text);
  gap: var(--input-space-between-md);
  outline: none;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.textfield * {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.textfield--inset {
  background-color: var(--input-bg-inset);
}
.textfield--search {
  border-radius: var(--input-border-radius-search);
}
.textfield:active,
.textfield:focus,
.textfield:has(input:focus),
.textfield:has(input:active),
.textfield:focus-within {
  outline: 1px solid var(--input-stroke-active);
}
.textfield:disabled,
.textfield--disabled,
.textfield:has(input:disabled) {
  opacity: 0.6;
  cursor: initial;
}
.textfield::placeholder {
  color: var(--input-fg-placeholder);
}
.textfield.error,
.textfield--error {
  border-color: var(--input-stroke-error);
}
.textfield__icon {
  color: var(--input-fg-icon);
  flex-shrink: 0;
  width: var(--input-icon-size-md);
  height: var(--input-icon-size-md);
}
.textfield--sm {
  padding: var(--input-padding-v-sm) var(--input-padding-h-sm);
  gap: var(--input-space-between-sm);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.textfield--sm * {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.textfield--sm .textfield__icon {
  width: var(--input-icon-size-sm);
  height: var(--input-icon-size-sm);
}
.textfield--lg {
  padding: var(--input-padding-v-lg) var(--input-padding-h-lg);
  gap: var(--input-space-between-lg);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.textfield--lg * {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.textfield--lg .textfield__icon {
  width: var(--input-icon-size-lg);
  height: var(--input-icon-size-lg);
}
input.textfield {
  width: 100%;
  box-sizing: border-box;
}
div.textfield {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
div.textfield input,
div.textfield textarea {
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  box-sizing: border-box;
}
.field-wrapper {
  display: inline-flex;
  flex-direction: column;
  gap: var(--field-space-between);
}
.field-wrapper label {
  color: var(--color-fg-default);
  position: relative;
  width: auto;
  align-self: flex-start;
  display: flex;
  gap: var(--space-scale-0-5);
}
.field-wrapper label.required::after,
.field-wrapper label--required::after {
  content: "*";
  font-weight: bold;
}
.field-wrapper .textfield__errors,
.field-wrapper .errors {
  color: var(--color-fg-danger-default);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.field-wrapper .textfield__hints,
.field-wrapper .hints {
  width: 100%;
  color: var(--color-fg-muted);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.field-wrapper .textfield__success,
.field-wrapper .success {
  color: var(--color-fg-success-default);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.checkbox-wrapper {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--checkbox-space-between);
}
.checkbox-wrapper:hover input[type="checkbox"].checkbox::before {
  background: var(--checkbox-bg-hover-default);
}
.checkbox-wrapper:hover input[type="checkbox"].checkbox:checked::before {
  background: var(--checkbox-bg-hover-checked);
}
.checkbox-wrapper:hover input[type="checkbox"].checkbox:indeterminate::before {
  background: var(--checkbox-bg-hover-indeterminate);
}
.checkbox-wrapper:hover input[type="checkbox"].checkbox:focus::before,
.checkbox-wrapper:hover input[type="checkbox"].checkbox:active::before {
  background: var(--checkbox-bg-hover-checked);
}
input[type="checkbox"].checkbox {
  appearance: none;
  position: relative;
}
input[type="checkbox"].checkbox:before {
  content: "";
  display: inline-block;
  vertical-align: text-top;
  transition: background-color 100ms ease-in-out;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
}
input[type="checkbox"].checkbox:before {
  width: var(--checkbox-width);
  height: var(--checkbox-height);
  min-width: var(--checkbox-width);
  min-height: var(--checkbox-height);
  background: var(--checkbox-bg-default);
  border-color: var(--checkbox-stroke-default);
  border-radius: var(--checkbox-border-radius);
}
label + .checkbox,
.checkbox + label {
  cursor: pointer;
  color: var(--color-fg-default);
}
input[type="checkbox"].checkbox:hover::before {
  background: var(--checkbox-bg-hover-default);
}
input[type="checkbox"].checkbox:hover:checked::before {
  background: var(--checkbox-bg-hover-checked);
}
input[type="checkbox"].checkbox:hover:indeterminate::before {
  background: var(--checkbox-bg-hover-indeterminate);
}
input[type="checkbox"].checkbox:hover:focus::before,
input[type="checkbox"].checkbox:hover:active::before {
  background: var(--checkbox-bg-hover-checked);
}
input[type="checkbox"].checkbox:focus::before,
input[type="checkbox"].checkbox:active::before {
  outline: 1px solid var(--checkbox-outline-active);
}
input[type="checkbox"].checkbox:checked::before {
  background: var(--checkbox-bg-checked);
  border-color: var(--checkbox-stroke-checked);
}
input[type="checkbox"].checkbox:indeterminate::before {
  background: var(--checkbox-bg-indeterminate);
  border-color: var(--checkbox-stroke-indeterminate);
}
.checkbox:disabled {
  opacity: 0.6;
  cursor: auto;
}
label + .checkbox:disabled,
.checkbox:disabled + label {
  opacity: 0.6;
  cursor: auto;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  background: var(--checkbox-fg-checked);
  width: 3px;
  height: 3px;
  box-shadow:
    2px 0 0 var(--checkbox-fg-checked),
    4px 0 0 var(--checkbox-fg-checked),
    4px -2px 0 var(--checkbox-fg-checked),
    4px -4px 0 var(--checkbox-fg-checked),
    4px -6px 0 var(--checkbox-fg-checked),
    4px -8px 0 var(--checkbox-fg-checked);
  transform: rotate(45deg);
  cursor: pointer;
}
.checkbox:indeterminate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--checkbox-fg-indeterminate);
  width: 12px;
  height: 12px;
  border-radius: var(--checkbox-border-radius);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.radio-wrapper {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--checkbox-space-between);
}
.radio-wrapper:hover input[type="radio"].radio::before {
  background: var(--radiobox-bg-hover-default);
}
.radio-wrapper:hover input[type="radio"].radio:checked::before {
  background: var(--radiobox-bg-hover-checked);
}
.radio-wrapper:hover input[type="radio"].radio:focus::before,
.radio-wrapper:hover input[type="radio"].radio:active::before {
  background: var(--radiobox-bg-hover-checked);
}
input[type="radio"].radio {
  appearance: none;
  position: relative;
}
input[type="radio"].radio:before {
  content: "";
  display: inline-block;
  vertical-align: text-top;
  transition: background-color 100ms ease-in-out;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
}
input[type="radio"].radio:before {
  width: var(--radiobox-width);
  height: var(--radiobox-height);
  min-width: var(--radiobox-width);
  min-height: var(--radiobox-height);
  background: var(--radiobox-bg-default);
  border-color: var(--radiobox-stroke-default);
  border-radius: var(--radiobox-border-radius);
}
label + .radio,
.radio + label {
  cursor: pointer;
  color: var(--color-fg-default);
}
input[type="radio"].radio:hover::before {
  background: var(--radiobox-bg-hover-default);
}
input[type="radio"].radio:hover:checked::before {
  background: var(--radiobox-bg-hover-checked);
}
input[type="radio"].radio:hover:focus::before,
input[type="radio"].radio:hover:active::before {
  background: var(--radiobox-bg-hover-checked);
}
input[type="radio"].radio:focus::before,
input[type="radio"].radio:active::before {
  outline: 1px solid var(--radiobox-outline-active);
}
input[type="radio"].radio:checked::before {
  background: var(--radiobox-bg-default);
  border-color: var(--radiobox-stroke-default);
}
.radio:disabled {
  opacity: 0.6;
  cursor: auto;
}
label + .radio:disabled,
.radio:disabled + label {
  opacity: 0.6;
  cursor: auto;
}
.radio:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--radiobox-fg-checked);
  width: 12px;
  height: 12px;
  border-radius: var(--radiobox-border-radius);
  transform: translate(-50%, -50%);
}
.line {
  background-color: var(--color-palette-gray-500);
  margin-top: var(--space-scale-3);
}
.skeleton {
  opacity: 0.3;
  display: inherit;
  background-color: var(--color-palette-gray-500);
  animation: pulse 1500ms ease-in-out;
  animation-iteration-count: infinite;
}
.skeleton--line {
  height: 1em;
  border-radius: var(--border-radius-round);
}
@keyframes pulse {
  50% {
    opacity: 0.1;
  }
}
.lds-dual-ring {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  --loader-bckgr: currentcolor;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  border: 0.16em solid var(--loader-bckgr);
  border-color: var(--loader-bckgr) rgba(0, 0, 0, 0) var(--loader-bckgr)
    rgba(0, 0, 0, 0);
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.chip {
  --background-color: var(--chip-bg-fill-default);
  --alt-background-color: var(--chip-bg-alt-default);
  --text-color: var(--chip-fg-fill-default);
  --alt-text-color: var(--chip-fg-alt-default);
  padding: var(--chip-padding-v-md) var(--chip-padding-h-md);
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: var(--chip-border-radius);
  display: inline-flex;
  gap: var(--chip-space-between-md);
  align-items: center;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
  transition: all 100ms ease-in-out;
}
.chip .icon,
.chip .chip__icon {
  width: var(--chip-icon-size-md);
  height: var(--chip-icon-size-md);
}
.chip--small {
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
  gap: var(--chip-space-between-sm);
}
.chip--small .icon,
.chip--small .chip__icon {
  width: var(--chip-icon-size-sm);
  height: var(--chip-icon-size-sm);
}
.chip--large {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
  gap: var(--chip-space-between-lg);
}
.chip--large .icon,
.chip--large .chip__icon {
  width: var(--chip-icon-size-lg);
  height: var(--chip-icon-size-lg);
}
.chip--clickable:not(.chip--inverse) {
  cursor: pointer;
}
.chip--clickable:not(.chip--inverse):hover {
  background-color: var(--alt-background-color);
  color: var(--alt-text-color);
}
.chip--primary {
  --background-color: var(--chip-bg-fill-primary);
  --alt-background-color: var(--chip-bg-alt-primary);
  --text-color: var(--chip-fg-fill-primary);
  --alt-text-color: var(--chip-fg-alt-primary);
}
.chip--secondary {
  --background-color: var(--chip-bg-fill-secondary);
  --alt-background-color: var(--chip-bg-alt-secondary);
  --text-color: var(--chip-fg-fill-secondary);
  --alt-text-color: var(--chip-fg-alt-secondary);
}
.chip--friendly,
.chip--success {
  --background-color: var(--chip-bg-fill-success);
  --alt-background-color: var(--chip-bg-alt-success);
  --text-color: var(--chip-fg-fill-success);
  --alt-text-color: var(--chip-fg-alt-success);
}
.chip--danger {
  --background-color: var(--chip-bg-fill-danger);
  --alt-background-color: var(--chip-bg-alt-danger);
  --text-color: var(--chip-fg-fill-danger);
  --alt-text-color: var(--chip-fg-alt-danger);
}
.chip--warning {
  --background-color: var(--chip-bg-fill-warning);
  --alt-background-color: var(--chip-bg-alt-warning);
  --text-color: var(--chip-fg-fill-warning);
  --alt-text-color: var(--chip-fg-alt-warning);
}
.chip--alt {
  background-color: var(--alt-background-color);
  color: var(--alt-text-color);
}
.chip--alt.chip--clickable {
  cursor: pointer;
}
.chip--alt.chip--clickable:hover {
  background-color: var(--background-color);
  color: var(--text-color);
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.notification,
.alert,
.toast,
.snackbar {
  --background: var(--notification-bg-normal-default);
  --foreground: var(--notification-fg-normal-default);
  --background-alt: var(--notification-bg-alt-default);
  --foreground-alt: var(--notification-fg-alt-default);
  --radius: var(--notification-border-radius);
  --content-height: var(--notification-content-height);
  display: flex;
  align-items: flex-start;
  width: max-content;
  padding: var(--notification-padding-v) var(--notification-padding-h);
  gap: var(--notification-space-between);
  background: var(--background);
  color: var(--foreground);
  border-radius: var(--radius);
}
.notification__prefix,
.alert__prefix,
.toast__prefix,
.snackbar__prefix {
  display: flex;
  align-items: center;
}
.notification__prefix::before,
.alert__prefix::before,
.toast__prefix::before,
.snackbar__prefix::before {
  content: "";
  min-height: var(--content-height);
}
.notification__icon,
.alert__icon,
.toast__icon,
.snackbar__icon {
  width: var(--notification-icon-size);
  height: var(--notification-icon-size);
}
.notification__content,
.notification__header,
.alert__content,
.alert__header,
.toast__content,
.toast__header,
.snackbar__content,
.snackbar__header {
  min-height: var(--content-height);
}
.notification__content,
.alert__content,
.toast__content,
.snackbar__content {
  display: flex;
  flex-direction: column;
}
.notification__header,
.alert__header,
.toast__header,
.snackbar__header {
  display: flex;
  align-items: center;
  vertical-align: center;
  font-size: var(--text-label-md-size);
  line-height: var(--text-label-md-height);
  font-weight: var(--text-label-md-weight);
  font-style: var(--text-label-md-style);
}
.notification__subtext,
.alert__subtext,
.toast__subtext,
.snackbar__subtext {
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.notification__action.btn,
.notification__action .btn,
.alert__action.btn,
.alert__action .btn,
.toast__action.btn,
.toast__action .btn,
.snackbar__action.btn,
.snackbar__action .btn {
  height: var(--content-height);
}
.notification__action::after,
.alert__action::after,
.toast__action::after,
.snackbar__action::after {
  content: "";
  min-height: var(--content-height);
}
.notification--alt,
.alert--alt,
.toast--alt,
.snackbar--alt {
  background: var(--background-alt);
  color: var(--foreground-alt);
}
.notification--primary,
.alert--primary,
.toast--primary,
.snackbar--primary {
  --background: var(--notification-bg-normal-primary);
  --foreground: var(--notification-fg-normal-primary);
  --background-alt: var(--notification-bg-alt-primary);
  --foreground-alt: var(--notification-fg-alt-primary);
}
.notification--success,
.alert--success,
.toast--success,
.snackbar--success {
  --background: var(--notification-bg-normal-success);
  --foreground: var(--notification-fg-normal-success);
  --background-alt: var(--notification-bg-alt-success);
  --foreground-alt: var(--notification-fg-alt-success);
}
.notification--warning,
.alert--warning,
.toast--warning,
.snackbar--warning {
  --background: var(--notification-bg-normal-warning);
  --foreground: var(--notification-fg-normal-warning);
  --background-alt: var(--notification-bg-alt-warning);
  --foreground-alt: var(--notification-fg-alt-warning);
}
.notification--danger,
.alert--danger,
.toast--danger,
.snackbar--danger {
  --background: var(--notification-bg-normal-danger);
  --foreground: var(--notification-fg-normal-danger);
  --background-alt: var(--notification-bg-alt-danger);
  --foreground-alt: var(--notification-fg-alt-danger);
}
.notification--secondary,
.alert--secondary,
.toast--secondary,
.snackbar--secondary {
  --background: var(--notification-bg-normal-secondary);
  --foreground: var(--notification-fg-normal-secondary);
  --background-alt: var(--notification-bg-alt-secondary);
  --foreground-alt: var(--notification-fg-alt-secondary);
}
.snackbar,
.toast {
  position: fixed;
  --distance: var(--space-scale-4);
  animation: fade-in 200ms ease-in-out;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--notification-stroke);
}
.snackbar--top,
.toast--top {
  top: var(--distance);
}
.snackbar--bottom,
.toast--bottom {
  bottom: var(--distance);
}
.snackbar--center,
.toast--center {
  left: 50%;
  transform: translateX(-50%);
}
.snackbar--left,
.toast--left {
  left: var(--distance);
}
.snackbar--right,
.toast--right {
  right: var(--distance);
}
.snackbar--middle,
.toast--middle {
  top: 50%;
  transform: translateY(-50%);
}
.snackbar--center:where(.snackbar--middle, .toast--middle),
.toast--center:where(.snackbar--middle, .toast--middle) {
  transform: translateY(-50%) translateX(-50%);
}
.modal {
  --z-index: 102;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto;
  max-height: 100%;
  background-color: var(--modal-bg);
  z-index: var(--z-index);
  padding: var(--modal-padding);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--modal-stroke);
  display: flex;
  flex-direction: column;
  gap: var(--modal-space-between);
}
.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--modal-space-between);
}
.modal__header__close {
  justify-self: flex-end;
}
.modal__title {
  font-size: var(--text-heading-md-size);
  line-height: var(--text-heading-md-height);
  font-weight: var(--text-heading-md-weight);
  font-style: var(--text-heading-md-style);
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--modal-space-between);
}
.backdrop {
  --z-index: 101;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: var(--backdrop-bg);
  opacity: 0.7;
  z-index: var(--z-index);
}
.breadcrumbs {
  display: inline-flex;
  padding: var(--breadcrumb-padding-v) 0;
}
.breadcrumb {
  position: relative;
  text-decoration: underline;
  transition: color 100ms ease-out;
  color: var(--breadcrumb-fg-default);
  cursor: pointer;
  font-size: var(--text-label-md-size);
  line-height: var(--text-label-md-height);
  font-weight: var(--text-label-md-weight);
  font-style: var(--text-label-md-style);
}
.breadcrumb--active {
  text-decoration: none;
  cursor: initial;
}
.breadcrumb:hover:not(.breadcrumb--active) {
  color: var(--color-fg-primary-default);
}
.breadcrumb--primary {
  color: var(--link-fg-primary);
}
.breadcrumb--on-hover {
  text-decoration: none;
}
.breadcrumb--on-hover:hover {
  text-decoration: underline;
}
.breadcrumbs > .breadcrumb + .breadcrumb {
  margin-left: var(--breadcrumb-space-between);
  padding-left: calc(2 * var(--breadcrumb-space-between));
}
.breadcrumbs > .breadcrumb + .breadcrumb::before {
  content: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20 viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-chevron-right%22%3E%3Cpolyline%20points=%229%2018%2015%2012%209%206%22%3E%3C/polyline%3E%3C/svg%3E");
  position: absolute;
  left: calc(var(--link-icon-size) / 4 * -1);
  bottom: 0;
  height: var(--link-icon-size);
  width: var(--link-icon-size);
  color: var(--breadcrumb-fg-separator);
}
.tab-container {
  display: flex;
  border-bottom: var(--tab-container-stroke-width) solid
    var(--tab-container-stroke);
  align-items: stretch;
}
.tab {
  --active-color: var(--tab-stroke-active);
  --text-color: var(--tab-fg-default);
  border-bottom: var(--tab-stroke-width) solid var(--tab-stroke-default);
  display: inline-flex;
  align-items: center;
  transition:
    background-color 200ms ease-out,
    border 200ms ease-out;
  padding: var(--tab-padding-v) var(--tab-padding-h);
  color: var(--text-color);
  cursor: pointer;
  margin-bottom: calc(var(--tab-container-stroke-width) * -1);
  font-size: var(--text-title-xs-size);
  line-height: var(--text-title-xs-height);
  font-weight: var(--text-title-xs-weight);
  font-style: var(--text-title-xs-style);
  gap: var(--tab-space-between);
}
.tab:hover {
  background-color: var(--tab-bg-hover);
}
.tab--active {
  border-bottom: var(--tab-stroke-width) solid var(--active-color);
}
.tab--danger {
  --active-color: var(--color-stroke-danger-emphasis);
}
.tab--warning {
  --active-color: var(--color-stroke-warning-emphasis);
}
.tab--friendly,
.tab--success {
  --active-color: var(--color-stroke-success-emphasis);
}
.tab--primary {
  --active-color: var(--color-stroke-primary-emphasis);
}
.tab--large {
  font-size: var(--text-title-lg-size);
  line-height: var(--text-title-lg-height);
  font-weight: var(--text-title-lg-weight);
  font-style: var(--text-title-lg-style);
}
progress,
.progress {
  --color-track: var(--progress-bg);
  --size-track: min(var(--progress-bar-size-md), 1ex);
  --color-progress: var(--progress-fg);
  --border-radius-progress: var(--progress-bar-border-radius);
  --gradient-track-indeterminate: linear-gradient(
    to right,
    var(--color-track) 45%,
    var(--color-progress) 0%,
    var(--color-progress) 55%,
    var(--color-track) 0%
  );
  --track-size-indeterminate: 225% 100%;
  --track-animation-indeterminate: progress-loading 2s infinite ease;
}
progress--small,
.progress--small {
  --size-track: min(var(--progress-bar-size-sm), 1ex);
}
progress--large,
.progress--large {
  --size-track: min(var(--progress-bar-size-lg), 1ex);
}
progress,
.progress {
  appearance: none;
  border: none;
  position: relative;
  height: var(--size-track);
  border-radius: var(--border-radius-progress);
  overflow: hidden;
}
progress:focus-visible,
.progress:focus-visible {
  outline-color: var(--color-progress);
}
progress[value]::-webkit-progress-bar,
.progress[value]::-webkit-progress-bar {
  background-color: var(--color-track);
}
progress[value]::-webkit-progress-value,
.progress[value]::-webkit-progress-value {
  background-color: var(--color-progress);
  transition: inline-size 0.25s ease-out;
}
progress[value]::-moz-progress-bar,
.progress[value]::-moz-progress-bar {
  background-color: var(--color-progress);
}
progress:indeterminate::after,
.progress:indeterminate::after {
  content: "";
  inset: 0;
  position: absolute;
  background: var(--gradient-track-indeterminate);
  background-size: var(--track-size-indeterminate);
  background-position: right;
  animation: var(--track-animation-indeterminate);
}
progress:indeterminate::-webkit-progress-bar,
.progress:indeterminate::-webkit-progress-bar {
  background: var(--gradient-track-indeterminate);
  background-size: var(--track-size-indeterminate);
  background-position: right;
  animation: var(--track-animation-indeterminate);
}
progress:indeterminate::-moz-progress-bar,
.progress:indeterminate::-moz-progress-bar {
  background: var(--gradient-track-indeterminate);
  background-size: var(--track-size-indeterminate);
  background-position: right;
  animation: var(--track-animation-indeterminate);
}
@keyframes progress-loading {
  50% {
    background-position: left;
  }
}
.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.dropdown {
  border-radius: var(--dropdown-border-radius);
  padding: var(--dropdown-padding-v) var(--dropdown-padding-h);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--dropdown-stroke-default);
  background-color: var(--color-bg-default);
  display: inline-flex;
  flex-direction: column;
  width: max-content;
}
.toggle {
  --animation-speed: 100ms;
  --slider-point-padding: calc(
    (var(--toggle-height) - var(--toggle-point-size)) / 2
  );
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--toggle-space-between);
  cursor: pointer;
}
.toggle:hover .slider {
  background-color: var(--toggle-bg-hover-default);
}
.toggle:hover input:checked + .slider {
  background-color: var(--toggle-bg-hover-checked);
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  background-color: var(--toggle-bg-default);
  -webkit-transition: var(--animation-speed);
  transition: var(--animation-speed);
  border-radius: var(--toggle-border-radius);
}
.slider:before {
  position: absolute;
  content: "";
  height: var(--toggle-point-size);
  width: var(--toggle-point-size);
  left: var(--slider-point-padding);
  bottom: var(--slider-point-padding);
  background-color: var(--toggle-fg-default);
  -webkit-transition: var(--animation-speed);
  transition: var(--animation-speed);
  border-radius: var(--toggle-border-radius);
}
input:checked + .slider {
  background-color: var(--toggle-bg-checked);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--toggle-outline-active);
}
input:checked + .slider:before {
  --transform-amount: calc(
    var(--toggle-width) - (var(--slider-point-padding) * 2) -
      var(--toggle-point-size)
  );
  -ms-transform: translateX(var(--transform-amount));
  transform: translateX(var(--transform-amount));
}
.tooltip {
  --z-index: 105;
  position: absolute;
  padding: var(--tooltip-padding-v) var(--tooltip-padding-h);
  background-color: var(--tooltip-normal-bg);
  color: var(--tooltip-normal-fg);
  border-radius: var(--tooltip-border-radius);
  box-shadow: var(--shadow-md);
  z-index: var(--z-index);
  border: 1px solid var(--color-stroke-subtle);
  width: max-content;
  display: flex;
  align-items: center;
  gap: var(--tooltip-space-between);
}
.tooltip--alt {
  background-color: var(--tooltip-alt-bg);
  color: var(--tooltip-alt-fg);
}
.tooltip--top {
  bottom: calc(100% + var(--tooltip-distance));
  left: 50%;
  transform: translateX(-50%);
}
.tooltip--right {
  top: 50%;
  left: calc(100% + var(--tooltip-distance));
  transform: translateY(-50%);
}
.tooltip--bottom {
  top: calc(100% + var(--tooltip-distance));
  left: 50%;
  transform: translateX(-50%);
}
.tooltip--left {
  top: 50%;
  right: calc(100% + var(--tooltip-distance));
  transform: translateY(-50%);
}
.tooltip-wrapper {
  position: relative;
  width: max-content;
}
.tooltip-wrapper .tooltip {
  visibility: hidden;
}
.tooltip-wrapper:hover .tooltip {
  visibility: visible;
  animation: fade-in 150ms ease-in-out;
}
.indicator {
  --background: var(--indicator-bg-normal-default);
  --foreground: var(--indicator-fg-normal-default);
  --background-alt: var(--indicator-bg-alt-default);
  --foreground-alt: var(--indicator-fg-alt-default);
  --size: var(--indicator-count-size);
  --border-width: 1px;
  --border-color: white;
  border-radius: var(--indicator-border-radius);
  min-width: var(--indicator-count-size);
  width: min-content;
  height: var(--indicator-count-size);
  background-color: var(--background);
  color: var(--foreground);
  box-sizing: border-box;
  white-space: nowrap;
  padding: 0 var(--space-scale-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2);
  font-weight: var(--text-weight-bold);
  letter-spacing: 0.25px;
  line-height: normal;
  text-align: center;
}
.indicator:empty {
  --size: var(--indicator-normal-size);
  min-width: 0;
  width: var(--indicator-normal-size);
  height: var(--indicator-normal-size);
  padding: 0;
}
.indicator--top-right {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(50%) translateY(-50%);
  border: var(--border-width) solid var(--border-color);
}
.indicator--top-left {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%) translateY(-50%);
  border: var(--border-width) solid var(--border-color);
}
.indicator--bottom-right {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateX(50%) translateY(50%);
  border: var(--border-width) solid var(--border-color);
}
.indicator--bottom-left {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%) translateY(50%);
  border: var(--border-width) solid var(--border-color);
}
.indicator--primary {
  --background: var(--indicator-bg-normal-primary);
  --foreground: var(--indicator-fg-normal-primary);
  --background-alt: var(--indicator-bg-alt-primary);
  --foreground-alt: var(--indicator-fg-alt-primary);
}
.indicator--secondary {
  --background: var(--indicator-bg-normal-secondary);
  --foreground: var(--indicator-fg-normal-secondary);
  --background-alt: var(--indicator-bg-alt-secondary);
  --foreground-alt: var(--indicator-fg-alt-secondary);
}
.indicator--success {
  --background: var(--indicator-bg-normal-success);
  --foreground: var(--indicator-fg-normal-success);
  --background-alt: var(--indicator-bg-alt-success);
  --foreground-alt: var(--indicator-fg-alt-success);
}
.indicator--danger {
  --background: var(--indicator-bg-normal-danger);
  --foreground: var(--indicator-fg-normal-danger);
  --background-alt: var(--indicator-bg-alt-danger);
  --foreground-alt: var(--indicator-fg-alt-danger);
}
.indicator--warning {
  --background: var(--indicator-bg-normal-warning);
  --foreground: var(--indicator-fg-normal-warning);
  --background-alt: var(--indicator-bg-alt-warning);
  --foreground-alt: var(--indicator-fg-alt-warning);
}
.indicator--alt {
  background-color: var(--background-alt);
  color: var(--foreground-alt);
}
.link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--link-space-between);
  width: max-content;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
  text-decoration: underline;
  color: var(--link-fg-default);
}
.link__icon {
  width: var(--link-icon-size);
  height: var(--link-icon-size);
}
.link--on-hover {
  text-decoration: none;
}
.link--on-hover:hover {
  text-decoration: underline;
}
.link--bolder {
  font-weight: var(--text-weight-bold);
}
.link--primary {
  color: var(--link-fg-primary);
}
.link--secondary {
  color: var(--link-fg-secondary);
}
.link--inverse {
  color: var(--link-fg-inverse);
}
.link--inverse:visited,
.link--inverse .link--visited {
  color: var(--link-fg-inverse);
}
.link:visited,
.link--visited {
  color: var(--link-fg-visited);
}
.bottom-bar {
  display: flex;
  justify-content: stretch;
  padding: var(--nav-bottom-padding-v) var(--nav-bottom-padding-h);
  gap: var(--nav-list-space-between);
  width: 100%;
}
.bottom-bar > * {
  flex: 1;
}
@media all and (max-width: 400px) {
  .bottom-bar {
    gap: 0;
    padding: 0;
  }
  .bottom-bar .navigation-item {
    padding: var(--nav-item-vertical-padding-v) 0;
    font-size: var(--text-body-xs-size);
    line-height: var(--text-body-xs-height);
    font-weight: var(--text-body-xs-weight);
    font-style: var(--text-body-xs-style);
    border-radius: var(--border-radius-none);
  }
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--nav-sidebar-space-between);
  padding: var(--nav-sidebar-padding-v) var(--nav-sidebar-drawer-padding-h);
  background-color: var(--color-bg-default);
  height: 100%;
  min-width: var(--nav-sidebar-drawer-width, 300px);
}
.sidebar--alt {
  background-color: var(--color-bg-alt);
}
.sidebar--floating {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}
.sidebar--raised {
  box-shadow: var(--shadow-lg);
  border-right: 1px solid var(--color-stroke-subtle);
}
.sidebar--rail {
  padding: var(--nav-sidebar-padding-v) var(--nav-sidebar-rail-padding-h);
  width: fit-content;
  align-items: center;
  min-width: auto;
}
.navigation-list {
  display: flex;
  flex-direction: column;
  gap: var(--nav-list-space-between);
  list-style: none;
}
.navigation-title {
  color: var(--nav-item-fg-alt);
  font-size: var(--text-title-xs-size);
  line-height: var(--text-title-xs-height);
  font-weight: var(--text-title-xs-weight);
  font-style: var(--text-title-xs-style);
  padding: var(--nav-item-horizontal-padding-v) var(--nav-item-padding-h);
}
.toolbar {
  display: flex;
  align-items: center;
  background-color: var(--color-bg-default);
  color: var(--color-fg-default);
  padding: var(--nav-toolbar-padding);
  gap: var(--nav-toolbar-space-between);
  position: relative;
}
.toolbar--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.toolbar .toolbar__logo {
  height: 30px;
}
.toolbar__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--nav-toolbar-space-between);
  justify-content: flex-end;
}
.toolbar__actions,
.toolbar__navigation-list {
  display: flex;
  align-items: center;
  gap: var(--nav-toolbar-space-between);
}
.toolbar .navigation-item {
  gap: var(--space-scale-1);
  width: auto;
}
.toolbar--website {
  justify-content: center;
}
.toolbar--website .toolbar__content {
  display: flex;
  align-items: center;
  gap: var(--nav-toolbar-space-between);
  width: 100%;
  max-width: var(--nav-toolbar-website-max-width);
  height: var(--nav-toolbar-website-height);
}
.toolbar--website .toolbar__logo {
  height: var(--nav-toolbar-website-height);
  width: 200px;
}
.toolbar--website .toolbar__logo .toolbar__logo-box {
  height: calc(var(--nav-toolbar-website-height) + 59px);
  box-shadow: var(--shadow-md);
  position: absolute;
  top: 0;
}
.toolbar--website .toolbar__main {
  flex-direction: column;
  align-items: flex-end;
  justify-content: stretch;
}
.toolbar--website .toolbar__navigation-list {
  width: 100%;
  justify-content: flex-end;
}
.toolbar--website .navigation-item {
  width: 100%;
  flex: 1;
  max-width: var(--nav-item-max-width);
  justify-content: center;
}
.toolbar--website .navigation-item .navigation-item__text {
  flex: unset;
}
.toolbar--raised {
  box-shadow: var(--shadow-md);
}
.item,
.navigation-item,
.dropdown-item {
  padding: var(--item-padding-v) var(--item-padding-h);
  background-color: var(--item-bg-default);
  color: var(--item-fg-default);
  display: flex;
  align-items: center;
  gap: var(--item-space-between);
  cursor: pointer;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
  border-radius: var(--item-border-radius);
}
.item:hover:not(:disabled):not(.item--disabled),
.item:hover:not(:disabled):not(.navigation-item--disabled),
.item:hover:not(:disabled):not(.dropdown-item--disabled),
.navigation-item:hover:not(:disabled):not(.item--disabled),
.navigation-item:hover:not(:disabled):not(.navigation-item--disabled),
.navigation-item:hover:not(:disabled):not(.dropdown-item--disabled),
.dropdown-item:hover:not(:disabled):not(.item--disabled),
.dropdown-item:hover:not(:disabled):not(.navigation-item--disabled),
.dropdown-item:hover:not(:disabled):not(.dropdown-item--disabled) {
  background-color: var(--item-bg-hover);
}
.item:active,
.navigation-item:active,
.dropdown-item:active {
  outline: 1px solid var(--item-stroke-active);
}
.item:focus,
.navigation-item:focus,
.dropdown-item:focus {
  outline: 1px solid var(--item-stroke-active);
}
.item--disabled,
.item:disabled,
.navigation-item--disabled,
.navigation-item:disabled,
.dropdown-item--disabled,
.dropdown-item:disabled {
  opacity: 0.6;
  cursor: inherit;
}
.item__text,
.navigation-item__text,
.dropdown-item__text {
  flex: 1;
}
.item__texts,
.navigation-item__texts,
.dropdown-item__texts {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.item__subtext,
.navigation-item__subtext,
.dropdown-item__subtext {
  color: var(--item-fg-alt);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.item__icon,
.navigation-item__icon,
.dropdown-item__icon {
  color: var(--item-fg-icon-default);
  position: relative;
}
.item__extra,
.navigation-item__extra,
.dropdown-item__extra {
  color: var(--item-fg-alt);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.item--selected,
.navigation-item--selected,
.dropdown-item--selected {
  background-color: var(--item-bg-selected);
  color: var(--item-fg-selected);
}
.item--selected .item__subtext,
.item--selected .navigation-item__subtext,
.item--selected .dropdown-item__subtext,
.navigation-item--selected .item__subtext,
.navigation-item--selected .navigation-item__subtext,
.navigation-item--selected .dropdown-item__subtext,
.dropdown-item--selected .item__subtext,
.dropdown-item--selected .navigation-item__subtext,
.dropdown-item--selected .dropdown-item__subtext {
  color: var(--item-fg-selected);
}
.item--selected .item__icon,
.item--selected .navigation-item__icon,
.item--selected .dropdown-item__icon,
.navigation-item--selected .item__icon,
.navigation-item--selected .navigation-item__icon,
.navigation-item--selected .dropdown-item__icon,
.dropdown-item--selected .item__icon,
.dropdown-item--selected .navigation-item__icon,
.dropdown-item--selected .dropdown-item__icon {
  color: var(--item-fg-icon-selected);
}
.item__avatar,
.navigation-item__avatar,
.dropdown-item__avatar {
  width: var(--item-avatar-size);
  height: var(--item-avatar-size);
  border-radius: var(--item-avatar-radius-default);
  object-fit: cover;
}
.item__avatar--round,
.navigation-item__avatar--round,
.dropdown-item__avatar--round {
  border-radius: var(--item-avatar-radius-round);
}
.item--vertical,
.navigation-item--vertical,
.dropdown-item--vertical {
  flex-direction: column;
  padding: var(--nav-item-vertical-padding-v) var(--item-padding-h);
  gap: var(--nav-item-vertical-space-between);
  border-radius: var(--nav-item-vertical-border-radius);
}
.list-title,
.dropdown-title,
.navigation-title {
  color: var(--item-fg-alt);
  font-size: var(--text-title-xs-size);
  line-height: var(--text-title-xs-height);
  font-weight: var(--text-title-xs-weight);
  font-style: var(--text-title-xs-style);
  padding: var(--item-padding-v) var(--item-padding-h);
}
.divider,
.navigation-divider,
.dropdown-divider {
  border-top: 1px solid var(--dropdown-divider-stroke);
  margin: var(--item-padding-h) 0;
  width: 100%;
}
.accordion {
  display: flex;
  flex-direction: column;
}
.accordion--divided .accordion__item {
  border-bottom: 1px solid var(--accordion-divider-color);
}
.accordion--divided .accordion__item:last-child {
  border-bottom: none;
}
.accordion__item {
  display: flex;
  flex-direction: column;
}
.accordion__item--divided {
  border-bottom: 1px solid var(--accordion-divider-color);
}
.accordion__item__content {
  display: inherit;
  padding: var(--accordion-content-padding);
}
.accordion__item__icon {
  transition: transform 100ms ease-in-out;
  transform: rotateZ(0deg);
}
.accordion__item--collapsed .accordion__item__content {
  display: none;
}
.accordion__item--collapsed .accordion__item__icon {
  transform: rotateZ(-90deg);
}
.tree {
  display: flex;
  flex-direction: column;
}
.tree__item {
  display: flex;
  flex-direction: column;
}
.tree__item__children {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: calc(var(--tree-offset-padding-l) + var(--tree-offset-width));
}
.tree__item__children::before {
  position: absolute;
  content: "";
  left: calc(var(--tree-offset-padding-l) + var(--tree-offset-width) / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--tree-offset-color);
}
.tree__item__icon {
  transition: transform 100ms ease-in-out;
  transform: rotateZ(0deg);
}
.tree__item--collapsed .tree__item__children {
  display: none;
}
.tree__item--collapsed .tree__item__icon {
  transform: rotateZ(-90deg);
}
.pagination {
  display: flex;
  gap: var(--pagination-space-between);
  align-items: center;
}
.pagination__page-info {
  font-size: vaR(--pagination-page-info-size);
  color: var(--pagination-page-info-color);
  line-height: var(--pagination-page-info-height);
  font-weight: var(--pagination-page-info-weight);
}
.pagination__result-count {
  font-size: var(--pagination-result-count-size);
  color: var(--pagination-result-count-color);
  line-height: var(--pagination-result-count-height);
  font-weight: var(--pagination-result-count-weight);
  padding: 0 var(--pagination-space-between);
}
.pagination__page-count {
  font-size: var(--pagination-page-count-size);
  color: var(--pagination-page-count-color);
  line-height: var(--pagination-page-count-height);
  font-weight: var(--pagination-page-count-weight);
}
.stepper {
  display: flex;
}
.stepper--vertical {
  flex-direction: column;
}
.stepper--vertical .step {
  flex-direction: column;
  gap: var(--stepper-space-between-vertical);
}
.step {
  display: flex;
  gap: var(--stepper-space-between-horizontal);
  --line-color: var(--stepper-stroke-default);
}
.step__header {
  display: flex;
  gap: var(--stepper-space-between-horizontal);
  align-items: center;
  padding: var(--stepper-padding-vertical) var(--stepper-padding-horizontal);
}
.step__texts {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.step--previous {
  --line-color: var(--button-stroke-active);
}
.step .step__line {
  flex: 1;
  content: "";
  min-width: var(--stepper-line-min-width);
  height: 4px;
  width: 100%;
  background-color: var(--line-color);
  border-radius: var(--border-radius-full);
}
.step--vertical {
  flex-direction: column;
  gap: var(--stepper-space-between-vertical);
}
.step--vertical .step__line {
  flex: none;
  min-width: 0;
  height: inherit;
  min-height: var(--stepper-line-min-height);
  width: 2px;
  margin: 0 calc(var(--stepper-padding-horizontal));
}
.step--vertical .step__content {
  display: flex;
  align-items: stretch;
  padding: var(--stepper-padding-vertical) var(--stepper-padding-horizontal);
}
.step--clickable .step__header {
  cursor: pointer;
  transition: background-color 100ms ease;
  border-radius: var(--border-radius-rounded);
}
.step--clickable .step__header:hover {
  background: var(--color-bg-alt);
}
.step--clickable .step__header:focus {
  outline: 1px solid var(--button-stroke-active);
  outline-offset: 2px;
}
.step--clickable .step__header:focus-visible {
  outline: 1px solid var(--button-stroke-active);
  outline-offset: 2px;
}
.step--clickable .step__header:focus:not(:focus-visible) {
  outline: none;
}
:root {
  --text-1: var(--text-scale-1);
  --text-2: var(--text-scale-2);
  --text-3: var(--text-scale-3);
  --text-4: var(--text-scale-4);
  --text-5: var(--text-scale-5);
  --text-6: var(--text-scale-6);
  --text-7: var(--text-scale-7);
  --text-8: var(--text-scale-8);
  --text-9: var(--text-scale-9);
  --text-10: var(--text-scale-10);
  --text-11: var(--text-scale-11);
  --font-stack: var(--text-font-sans);
}
.clamp-text {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp-text--one-line {
  -webkit-line-clamp: 1;
}
.clamp-text--two-lines {
  -webkit-line-clamp: 2;
}
.clamp-text--three-lines {
  -webkit-line-clamp: 3;
}
.max-text-block-width {
  max-width: 700px;
}
.user-select--none {
  user-select: none;
}
.display-xl {
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-height);
  font-weight: var(--text-display-xl-weight);
  font-style: var(--text-display-xl-style);
}
.display-lg {
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-height);
  font-weight: var(--text-display-lg-weight);
  font-style: var(--text-display-lg-style);
}
.display-md {
  font-size: var(--text-display-md-size);
  line-height: var(--text-display-md-height);
  font-weight: var(--text-display-md-weight);
  font-style: var(--text-display-md-style);
}
.display-sm {
  font-size: var(--text-display-sm-size);
  line-height: var(--text-display-sm-height);
  font-weight: var(--text-display-sm-weight);
  font-style: var(--text-display-sm-style);
}
.heading-xl {
  font-size: var(--text-heading-xl-size);
  line-height: var(--text-heading-xl-height);
  font-weight: var(--text-heading-xl-weight);
  font-style: var(--text-heading-xl-style);
}
.heading-lg {
  font-size: var(--text-heading-lg-size);
  line-height: var(--text-heading-lg-height);
  font-weight: var(--text-heading-lg-weight);
  font-style: var(--text-heading-lg-style);
}
.heading-md {
  font-size: var(--text-heading-md-size);
  line-height: var(--text-heading-md-height);
  font-weight: var(--text-heading-md-weight);
  font-style: var(--text-heading-md-style);
}
.heading-sm {
  font-size: var(--text-heading-sm-size);
  line-height: var(--text-heading-sm-height);
  font-weight: var(--text-heading-sm-weight);
  font-style: var(--text-heading-sm-style);
}
.title-lg {
  font-size: var(--text-title-lg-size);
  line-height: var(--text-title-lg-height);
  font-weight: var(--text-title-lg-weight);
  font-style: var(--text-title-lg-style);
}
.title-md {
  font-size: var(--text-title-md-size);
  line-height: var(--text-title-md-height);
  font-weight: var(--text-title-md-weight);
  font-style: var(--text-title-md-style);
}
.title-sm {
  font-size: var(--text-title-sm-size);
  line-height: var(--text-title-sm-height);
  font-weight: var(--text-title-sm-weight);
  font-style: var(--text-title-sm-style);
}
.title-xs {
  font-size: var(--text-title-xs-size);
  line-height: var(--text-title-xs-height);
  font-weight: var(--text-title-xs-weight);
  font-style: var(--text-title-xs-style);
}
.highlight-lg {
  font-size: var(--text-highlight-lg-size);
  line-height: var(--text-highlight-lg-height);
  font-weight: var(--text-highlight-lg-weight);
  font-style: var(--text-highlight-lg-style);
}
.highlight-md {
  font-size: var(--text-highlight-md-size);
  line-height: var(--text-highlight-md-height);
  font-weight: var(--text-highlight-md-weight);
  font-style: var(--text-highlight-md-style);
}
.highlight-sm {
  font-size: var(--text-highlight-sm-size);
  line-height: var(--text-highlight-sm-height);
  font-weight: var(--text-highlight-sm-weight);
  font-style: var(--text-highlight-sm-style);
}
.highlight-xs {
  font-size: var(--text-highlight-xs-size);
  line-height: var(--text-highlight-xs-height);
  font-weight: var(--text-highlight-xs-weight);
  font-style: var(--text-highlight-xs-style);
}
.label-lg {
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-height);
  font-weight: var(--text-label-lg-weight);
  font-style: var(--text-label-lg-style);
}
.label-md {
  font-size: var(--text-label-md-size);
  line-height: var(--text-label-md-height);
  font-weight: var(--text-label-md-weight);
  font-style: var(--text-label-md-style);
}
.label-sm {
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-height);
  font-weight: var(--text-label-sm-weight);
  font-style: var(--text-label-sm-style);
}
.label-xs {
  font-size: var(--text-label-xs-size);
  line-height: var(--text-label-xs-height);
  font-weight: var(--text-label-xs-weight);
  font-style: var(--text-label-xs-style);
}
.body-xxl {
  font-size: var(--text-body-xxl-size);
  line-height: var(--text-body-xxl-height);
  font-weight: var(--text-body-xxl-weight);
  font-style: var(--text-body-xxl-style);
}
.body-xl {
  font-size: var(--text-body-xl-size);
  line-height: var(--text-body-xl-height);
  font-weight: var(--text-body-xl-weight);
  font-style: var(--text-body-xl-style);
}
.body-lg {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  font-weight: var(--text-body-lg-weight);
  font-style: var(--text-body-lg-style);
}
.body-md {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.body-sm {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.body-xs {
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.link-default {
  text-decoration: underline;
}
.link-default:visited {
  color: var(--link-fg-visited);
}
.link-bolder {
  font-weight: var(--text-weight-bold);
}
.link-primary {
  color: var(--link-fg-primary);
}
.link-inverse {
  color: var(--link-fg-inverse);
}
.link-on-hover {
  text-decoration: none;
}
.link-on-hover:hover {
  text-decoration: underline;
}
@media screen and (min-width: 750px) {
  .heading-01,
  h1 {
    font-size: var(--text-heading-lg-size);
    line-height: var(--text-heading-lg-height);
    font-weight: var(--text-heading-lg-weight);
    font-style: var(--text-heading-lg-style);
  }
  .heading-02,
  h2 {
    font-size: var(--text-heading-md-size);
    line-height: var(--text-heading-md-height);
    font-weight: var(--text-heading-md-weight);
    font-style: var(--text-heading-md-style);
  }
  .heading-03,
  h3 {
    font-size: var(--text-heading-sm-size);
    line-height: var(--text-heading-sm-height);
    font-weight: var(--text-heading-sm-weight);
    font-style: var(--text-heading-sm-style);
  }
  .heading-04,
  h4 {
    font-size: var(--text-title-lg-size);
    line-height: var(--text-title-lg-height);
    font-weight: var(--text-title-lg-weight);
    font-style: var(--text-title-lg-style);
  }
  .subheading-01,
  h5 {
    font-size: var(--text-title-md-size);
    line-height: var(--text-title-md-height);
    font-weight: var(--text-title-md-weight);
    font-style: var(--text-title-md-style);
  }
  .subheading-02,
  h6 {
    font-size: var(--text-title-sm-size);
    line-height: var(--text-title-sm-height);
    font-weight: var(--text-title-sm-weight);
    font-style: var(--text-title-sm-style);
  }
  .caption,
  label {
    font-size: var(--text-label-sm-size);
    line-height: var(--text-label-sm-height);
    font-weight: var(--text-label-sm-weight);
    font-style: var(--text-label-sm-style);
  }
}
@media screen and (max-width: 750px) {
  .heading-01,
  h1 {
    font-size: var(--text-heading-md-size);
    line-height: var(--text-heading-md-height);
    font-weight: var(--text-heading-md-weight);
    font-style: var(--text-heading-md-style);
  }
  .heading-02,
  h2 {
    font-size: var(--text-heading-sm-size);
    line-height: var(--text-heading-sm-height);
    font-weight: var(--text-heading-sm-weight);
    font-style: var(--text-heading-sm-style);
  }
  .heading-03,
  h3 {
    font-size: var(--text-title-lg-size);
    line-height: var(--text-title-lg-height);
    font-weight: var(--text-title-lg-weight);
    font-style: var(--text-title-lg-style);
  }
  .heading-04,
  h4 {
    font-size: var(--text-title-md-size);
    line-height: var(--text-title-md-height);
    font-weight: var(--text-title-md-weight);
    font-style: var(--text-title-md-style);
  }
  .subheading-01,
  h5 {
    font-size: var(--text-title-sm-size);
    line-height: var(--text-title-sm-height);
    font-weight: var(--text-title-sm-weight);
    font-style: var(--text-title-sm-style);
  }
  .subheading-02,
  h6 {
    font-size: var(--text-title-xs-size);
    line-height: var(--text-title-xs-height);
    font-weight: var(--text-title-xs-weight);
    font-style: var(--text-title-xs-style);
  }
  .caption,
  label {
    font-size: var(--text-label-sm-size);
    line-height: var(--text-label-sm-height);
    font-weight: var(--text-label-sm-weight);
    font-style: var(--text-label-sm-style);
  }
}
.text {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  font-weight: var(--text-body-md-weight);
  font-style: var(--text-body-md-style);
}
.text--small {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-height);
  font-weight: var(--text-body-sm-weight);
  font-style: var(--text-body-sm-style);
}
.text--small-x {
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-height);
  font-weight: var(--text-body-xs-weight);
  font-style: var(--text-body-xs-style);
}
.text--bold {
  font-weight: var(--text-weight-bold);
}
.text--medium {
  font-weight: var(--text-weight-medium);
}
.text--normal {
  font-weight: var(--text-weight-normal);
}
.text--no-wrap {
  white-space: nowrap;
}
.text-color-gray-050 {
  color: var(--color-palette-gray-050);
}
.bg-color-gray-050 {
  background-color: var(--color-palette-gray-050);
}
.text-color-blue-050 {
  color: var(--color-palette-blue-050);
}
.bg-color-blue-050 {
  background-color: var(--color-palette-blue-050);
}
.text-color-green-050 {
  color: var(--color-palette-green-050);
}
.bg-color-green-050 {
  background-color: var(--color-palette-green-050);
}
.text-color-light-green-050 {
  color: var(--color-palette-light-green-050);
}
.bg-color-light-green-050 {
  background-color: var(--color-palette-light-green-050);
}
.text-color-yellow-050 {
  color: var(--color-palette-yellow-050);
}
.bg-color-yellow-050 {
  background-color: var(--color-palette-yellow-050);
}
.text-color-orange-050 {
  color: var(--color-palette-orange-050);
}
.bg-color-orange-050 {
  background-color: var(--color-palette-orange-050);
}
.text-color-mo-blue-050 {
  color: var(--color-palette-mo-blue-050);
}
.bg-color-mo-blue-050 {
  background-color: var(--color-palette-mo-blue-050);
}
.text-color-red-050 {
  color: var(--color-palette-red-050);
}
.bg-color-red-050 {
  background-color: var(--color-palette-red-050);
}
.text-color-gray-100 {
  color: var(--color-palette-gray-100);
}
.bg-color-gray-100 {
  background-color: var(--color-palette-gray-100);
}
.text-color-blue-100 {
  color: var(--color-palette-blue-100);
}
.bg-color-blue-100 {
  background-color: var(--color-palette-blue-100);
}
.text-color-green-100 {
  color: var(--color-palette-green-100);
}
.bg-color-green-100 {
  background-color: var(--color-palette-green-100);
}
.text-color-light-green-100 {
  color: var(--color-palette-light-green-100);
}
.bg-color-light-green-100 {
  background-color: var(--color-palette-light-green-100);
}
.text-color-yellow-100 {
  color: var(--color-palette-yellow-100);
}
.bg-color-yellow-100 {
  background-color: var(--color-palette-yellow-100);
}
.text-color-orange-100 {
  color: var(--color-palette-orange-100);
}
.bg-color-orange-100 {
  background-color: var(--color-palette-orange-100);
}
.text-color-mo-blue-100 {
  color: var(--color-palette-mo-blue-100);
}
.bg-color-mo-blue-100 {
  background-color: var(--color-palette-mo-blue-100);
}
.text-color-red-100 {
  color: var(--color-palette-red-100);
}
.bg-color-red-100 {
  background-color: var(--color-palette-red-100);
}
.text-color-gray-200 {
  color: var(--color-palette-gray-200);
}
.bg-color-gray-200 {
  background-color: var(--color-palette-gray-200);
}
.text-color-blue-200 {
  color: var(--color-palette-blue-200);
}
.bg-color-blue-200 {
  background-color: var(--color-palette-blue-200);
}
.text-color-green-200 {
  color: var(--color-palette-green-200);
}
.bg-color-green-200 {
  background-color: var(--color-palette-green-200);
}
.text-color-light-green-200 {
  color: var(--color-palette-light-green-200);
}
.bg-color-light-green-200 {
  background-color: var(--color-palette-light-green-200);
}
.text-color-yellow-200 {
  color: var(--color-palette-yellow-200);
}
.bg-color-yellow-200 {
  background-color: var(--color-palette-yellow-200);
}
.text-color-orange-200 {
  color: var(--color-palette-orange-200);
}
.bg-color-orange-200 {
  background-color: var(--color-palette-orange-200);
}
.text-color-mo-blue-200 {
  color: var(--color-palette-mo-blue-200);
}
.bg-color-mo-blue-200 {
  background-color: var(--color-palette-mo-blue-200);
}
.text-color-red-200 {
  color: var(--color-palette-red-200);
}
.bg-color-red-200 {
  background-color: var(--color-palette-red-200);
}
.text-color-gray-300 {
  color: var(--color-palette-gray-300);
}
.bg-color-gray-300 {
  background-color: var(--color-palette-gray-300);
}
.text-color-blue-300 {
  color: var(--color-palette-blue-300);
}
.bg-color-blue-300 {
  background-color: var(--color-palette-blue-300);
}
.text-color-green-300 {
  color: var(--color-palette-green-300);
}
.bg-color-green-300 {
  background-color: var(--color-palette-green-300);
}
.text-color-light-green-300 {
  color: var(--color-palette-light-green-300);
}
.bg-color-light-green-300 {
  background-color: var(--color-palette-light-green-300);
}
.text-color-yellow-300 {
  color: var(--color-palette-yellow-300);
}
.bg-color-yellow-300 {
  background-color: var(--color-palette-yellow-300);
}
.text-color-orange-300 {
  color: var(--color-palette-orange-300);
}
.bg-color-orange-300 {
  background-color: var(--color-palette-orange-300);
}
.text-color-mo-blue-300 {
  color: var(--color-palette-mo-blue-300);
}
.bg-color-mo-blue-300 {
  background-color: var(--color-palette-mo-blue-300);
}
.text-color-red-300 {
  color: var(--color-palette-red-300);
}
.bg-color-red-300 {
  background-color: var(--color-palette-red-300);
}
.text-color-gray-400 {
  color: var(--color-palette-gray-400);
}
.bg-color-gray-400 {
  background-color: var(--color-palette-gray-400);
}
.text-color-blue-400 {
  color: var(--color-palette-blue-400);
}
.bg-color-blue-400 {
  background-color: var(--color-palette-blue-400);
}
.text-color-green-400 {
  color: var(--color-palette-green-400);
}
.bg-color-green-400 {
  background-color: var(--color-palette-green-400);
}
.text-color-light-green-400 {
  color: var(--color-palette-light-green-400);
}
.bg-color-light-green-400 {
  background-color: var(--color-palette-light-green-400);
}
.text-color-yellow-400 {
  color: var(--color-palette-yellow-400);
}
.bg-color-yellow-400 {
  background-color: var(--color-palette-yellow-400);
}
.text-color-orange-400 {
  color: var(--color-palette-orange-400);
}
.bg-color-orange-400 {
  background-color: var(--color-palette-orange-400);
}
.text-color-mo-blue-400 {
  color: var(--color-palette-mo-blue-400);
}
.bg-color-mo-blue-400 {
  background-color: var(--color-palette-mo-blue-400);
}
.text-color-red-400 {
  color: var(--color-palette-red-400);
}
.bg-color-red-400 {
  background-color: var(--color-palette-red-400);
}
.text-color-gray-500 {
  color: var(--color-palette-gray-500);
}
.bg-color-gray-500 {
  background-color: var(--color-palette-gray-500);
}
.text-color-blue-500 {
  color: var(--color-palette-blue-500);
}
.bg-color-blue-500 {
  background-color: var(--color-palette-blue-500);
}
.text-color-green-500 {
  color: var(--color-palette-green-500);
}
.bg-color-green-500 {
  background-color: var(--color-palette-green-500);
}
.text-color-light-green-500 {
  color: var(--color-palette-light-green-500);
}
.bg-color-light-green-500 {
  background-color: var(--color-palette-light-green-500);
}
.text-color-yellow-500 {
  color: var(--color-palette-yellow-500);
}
.bg-color-yellow-500 {
  background-color: var(--color-palette-yellow-500);
}
.text-color-orange-500 {
  color: var(--color-palette-orange-500);
}
.bg-color-orange-500 {
  background-color: var(--color-palette-orange-500);
}
.text-color-mo-blue-500 {
  color: var(--color-palette-mo-blue-500);
}
.bg-color-mo-blue-500 {
  background-color: var(--color-palette-mo-blue-500);
}
.text-color-red-500 {
  color: var(--color-palette-red-500);
}
.bg-color-red-500 {
  background-color: var(--color-palette-red-500);
}
.text-color-gray-600 {
  color: var(--color-palette-gray-600);
}
.bg-color-gray-600 {
  background-color: var(--color-palette-gray-600);
}
.text-color-blue-600 {
  color: var(--color-palette-blue-600);
}
.bg-color-blue-600 {
  background-color: var(--color-palette-blue-600);
}
.text-color-green-600 {
  color: var(--color-palette-green-600);
}
.bg-color-green-600 {
  background-color: var(--color-palette-green-600);
}
.text-color-light-green-600 {
  color: var(--color-palette-light-green-600);
}
.bg-color-light-green-600 {
  background-color: var(--color-palette-light-green-600);
}
.text-color-yellow-600 {
  color: var(--color-palette-yellow-600);
}
.bg-color-yellow-600 {
  background-color: var(--color-palette-yellow-600);
}
.text-color-orange-600 {
  color: var(--color-palette-orange-600);
}
.bg-color-orange-600 {
  background-color: var(--color-palette-orange-600);
}
.text-color-mo-blue-600 {
  color: var(--color-palette-mo-blue-600);
}
.bg-color-mo-blue-600 {
  background-color: var(--color-palette-mo-blue-600);
}
.text-color-red-600 {
  color: var(--color-palette-red-600);
}
.bg-color-red-600 {
  background-color: var(--color-palette-red-600);
}
.text-color-gray-700 {
  color: var(--color-palette-gray-700);
}
.bg-color-gray-700 {
  background-color: var(--color-palette-gray-700);
}
.text-color-blue-700 {
  color: var(--color-palette-blue-700);
}
.bg-color-blue-700 {
  background-color: var(--color-palette-blue-700);
}
.text-color-green-700 {
  color: var(--color-palette-green-700);
}
.bg-color-green-700 {
  background-color: var(--color-palette-green-700);
}
.text-color-light-green-700 {
  color: var(--color-palette-light-green-700);
}
.bg-color-light-green-700 {
  background-color: var(--color-palette-light-green-700);
}
.text-color-yellow-700 {
  color: var(--color-palette-yellow-700);
}
.bg-color-yellow-700 {
  background-color: var(--color-palette-yellow-700);
}
.text-color-orange-700 {
  color: var(--color-palette-orange-700);
}
.bg-color-orange-700 {
  background-color: var(--color-palette-orange-700);
}
.text-color-mo-blue-700 {
  color: var(--color-palette-mo-blue-700);
}
.bg-color-mo-blue-700 {
  background-color: var(--color-palette-mo-blue-700);
}
.text-color-red-700 {
  color: var(--color-palette-red-700);
}
.bg-color-red-700 {
  background-color: var(--color-palette-red-700);
}
.text-color-gray-800 {
  color: var(--color-palette-gray-800);
}
.bg-color-gray-800 {
  background-color: var(--color-palette-gray-800);
}
.text-color-blue-800 {
  color: var(--color-palette-blue-800);
}
.bg-color-blue-800 {
  background-color: var(--color-palette-blue-800);
}
.text-color-green-800 {
  color: var(--color-palette-green-800);
}
.bg-color-green-800 {
  background-color: var(--color-palette-green-800);
}
.text-color-light-green-800 {
  color: var(--color-palette-light-green-800);
}
.bg-color-light-green-800 {
  background-color: var(--color-palette-light-green-800);
}
.text-color-yellow-800 {
  color: var(--color-palette-yellow-800);
}
.bg-color-yellow-800 {
  background-color: var(--color-palette-yellow-800);
}
.text-color-orange-800 {
  color: var(--color-palette-orange-800);
}
.bg-color-orange-800 {
  background-color: var(--color-palette-orange-800);
}
.text-color-mo-blue-800 {
  color: var(--color-palette-mo-blue-800);
}
.bg-color-mo-blue-800 {
  background-color: var(--color-palette-mo-blue-800);
}
.text-color-red-800 {
  color: var(--color-palette-red-800);
}
.bg-color-red-800 {
  background-color: var(--color-palette-red-800);
}
.text-color-gray-900 {
  color: var(--color-palette-gray-900);
}
.bg-color-gray-900 {
  background-color: var(--color-palette-gray-900);
}
.text-color-blue-900 {
  color: var(--color-palette-blue-900);
}
.bg-color-blue-900 {
  background-color: var(--color-palette-blue-900);
}
.text-color-green-900 {
  color: var(--color-palette-green-900);
}
.bg-color-green-900 {
  background-color: var(--color-palette-green-900);
}
.text-color-light-green-900 {
  color: var(--color-palette-light-green-900);
}
.bg-color-light-green-900 {
  background-color: var(--color-palette-light-green-900);
}
.text-color-yellow-900 {
  color: var(--color-palette-yellow-900);
}
.bg-color-yellow-900 {
  background-color: var(--color-palette-yellow-900);
}
.text-color-orange-900 {
  color: var(--color-palette-orange-900);
}
.bg-color-orange-900 {
  background-color: var(--color-palette-orange-900);
}
.text-color-mo-blue-900 {
  color: var(--color-palette-mo-blue-900);
}
.bg-color-mo-blue-900 {
  background-color: var(--color-palette-mo-blue-900);
}
.text-color-red-900 {
  color: var(--color-palette-red-900);
}
.bg-color-red-900 {
  background-color: var(--color-palette-red-900);
}
.text-color-gray-1000 {
  color: var(--color-palette-gray-1000);
}
.bg-color-gray-1000 {
  background-color: var(--color-palette-gray-1000);
}
.text-color-blue-1000 {
  color: var(--color-palette-blue-1000);
}
.bg-color-blue-1000 {
  background-color: var(--color-palette-blue-1000);
}
.text-color-green-1000 {
  color: var(--color-palette-green-1000);
}
.bg-color-green-1000 {
  background-color: var(--color-palette-green-1000);
}
.text-color-light-green-1000 {
  color: var(--color-palette-light-green-1000);
}
.bg-color-light-green-1000 {
  background-color: var(--color-palette-light-green-1000);
}
.text-color-yellow-1000 {
  color: var(--color-palette-yellow-1000);
}
.bg-color-yellow-1000 {
  background-color: var(--color-palette-yellow-1000);
}
.text-color-orange-1000 {
  color: var(--color-palette-orange-1000);
}
.bg-color-orange-1000 {
  background-color: var(--color-palette-orange-1000);
}
.text-color-mo-blue-1000 {
  color: var(--color-palette-mo-blue-1000);
}
.bg-color-mo-blue-1000 {
  background-color: var(--color-palette-mo-blue-1000);
}
.text-color-red-1000 {
  color: var(--color-palette-red-1000);
}
.bg-color-red-1000 {
  background-color: var(--color-palette-red-1000);
}
.bg-default {
  background-color: var(--color-bg-default);
}
.bg-alt {
  background-color: var(--color-bg-alt);
}
.bg-emphasis {
  background-color: var(--color-bg-emphasis);
}
.bg-bolder {
  background-color: var(--color-bg-bolder);
}
.bg-primary {
  background-color: var(--color-bg-primary-default);
}
.bg-primary-bolder {
  background-color: var(--color-bg-primary-bolder);
}
.bg-primary-emphasis {
  background-color: var(--color-bg-primary-emphasis);
}
.bg-primary-brand {
  background-color: var(--color-bg-primary-emphasis);
}
.bg-secondary {
  background-color: var(--color-bg-secondary-default);
}
.bg-secondary-bolder {
  background-color: var(--color-bg-secondary-bolder);
}
.bg-secondary-emphasis {
  background-color: var(--color-bg-secondary-emphasis);
}
.bg-secondary-brand {
  background-color: var(--color-bg-secondary-emphasis);
}
.bg-success {
  background-color: var(--color-bg-success-default);
}
.bg-success-bolder {
  background-color: var(--color-bg-success-bolder);
}
.bg-success-emphasis {
  background-color: var(--color-bg-success-emphasis);
}
.bg-success-brand {
  background-color: var(--color-bg-success-emphasis);
}
.bg-warning {
  background-color: var(--color-bg-warning-default);
}
.bg-warning-bolder {
  background-color: var(--color-bg-warning-bolder);
}
.bg-warning-emphasis {
  background-color: var(--color-bg-warning-emphasis);
}
.bg-warning-brand {
  background-color: var(--color-bg-warning-emphasis);
}
.bg-danger {
  background-color: var(--color-bg-danger-default);
}
.bg-danger-bolder {
  background-color: var(--color-bg-danger-bolder);
}
.bg-danger-emphasis {
  background-color: var(--color-bg-danger-emphasis);
}
.bg-danger-brand {
  background-color: var(--color-bg-danger-emphasis);
}
.fg-default {
  color: var(--color-fg-default);
}
.fg-muted {
  color: var(--color-fg-muted);
}
.fg-subtle {
  color: var(--color-fg-subtle);
}
.fg-inverse {
  color: var(--color-fg-inverse);
}
.fg-primary {
  color: var(--color-fg-primary-default);
}
.fg-primary-bolder {
  color: var(--color-fg-primary-bolder);
}
.fg-primary-inverse {
  color: var(--color-fg-primary-inverse);
}
.fg-secondary {
  color: var(--color-fg-secondary-default);
}
.fg-secondary-bolder {
  color: var(--color-fg-secondary-bolder);
}
.fg-secondary-inverse {
  color: var(--color-fg-secondary-inverse);
}
.fg-success {
  color: var(--color-fg-success-default);
}
.fg-success-bolder {
  color: var(--color-fg-success-bolder);
}
.fg-success-inverse {
  color: var(--color-fg-success-inverse);
}
.fg-warning {
  color: var(--color-fg-warning-default);
}
.fg-warning-bolder {
  color: var(--color-fg-warning-bolder);
}
.fg-warning-inverse {
  color: var(--color-fg-warning-inverse);
}
.fg-danger {
  color: var(--color-fg-danger-default);
}
.fg-danger-bolder {
  color: var(--color-fg-danger-bolder);
}
.fg-danger-inverse {
  color: var(--color-fg-danger-inverse);
}
.stroke-default {
  border-color: var(--color-stroke-default);
}
.stroke-muted {
  border-color: var(--color-stroke-muted);
}
.stroke-subtle {
  border-color: var(--color-stroke-subtle);
}
.stroke-primary {
  border-color: var(--color-stroke-primary-default);
}
.stroke-primary-bolder {
  border-color: var(--color-stroke-primary-bolder);
}
.stroke-primary-emphasis {
  border-color: var(--color-stroke-primary-emphasis);
}
.stroke-secondary {
  border-color: var(--color-stroke-secondary-default);
}
.stroke-secondary-bolder {
  border-color: var(--color-stroke-secondary-bolder);
}
.stroke-secondary-emphasis {
  border-color: var(--color-stroke-secondary-emphasis);
}
.stroke-success {
  border-color: var(--color-stroke-success-default);
}
.stroke-success-bolder {
  border-color: var(--color-stroke-success-bolder);
}
.stroke-success-emphasis {
  border-color: var(--color-stroke-success-emphasis);
}
.stroke-warning {
  border-color: var(--color-stroke-warning-default);
}
.stroke-warning-bolder {
  border-color: var(--color-stroke-warning-bolder);
}
.stroke-warning-emphasis {
  border-color: var(--color-stroke-warning-emphasis);
}
.stroke-danger {
  border-color: var(--color-stroke-danger-default);
}
.stroke-danger-bolder {
  border-color: var(--color-stroke-danger-bolder);
}
.stroke-danger-emphasis {
  border-color: var(--color-stroke-danger-emphasis);
}
.mt-1 {
  margin-top: var(--space-scale-1);
}
.pt-1 {
  padding-top: var(--space-scale-1);
}
.mb-1 {
  margin-bottom: var(--space-scale-1);
}
.pb-1 {
  padding-bottom: var(--space-scale-1);
}
.ml-1 {
  margin-left: var(--space-scale-1);
}
.pl-1 {
  padding-left: var(--space-scale-1);
}
.mr-1 {
  margin-right: var(--space-scale-1);
}
.pr-1 {
  padding-right: var(--space-scale-1);
}
.space-x-1 > * + * {
  margin-left: var(--space-scale-1);
}
.space-y-1 > * + * {
  margin-top: var(--space-scale-1);
}
.gap-1 {
  gap: var(--space-scale-1);
}
.m-1 {
  margin: var(--space-scale-1);
}
.mx-1 {
  margin-right: var(--space-scale-1);
  margin-left: var(--space-scale-1);
}
.my-1 {
  margin-top: var(--space-scale-1);
  margin-bottom: var(--space-scale-1);
}
.p-1 {
  padding: var(--space-scale-1);
}
.px-1 {
  padding-right: var(--space-scale-1);
  padding-left: var(--space-scale-1);
}
.py-1 {
  padding-top: var(--space-scale-1);
  padding-bottom: var(--space-scale-1);
}
.mt-2 {
  margin-top: var(--space-scale-2);
}
.pt-2 {
  padding-top: var(--space-scale-2);
}
.mb-2 {
  margin-bottom: var(--space-scale-2);
}
.pb-2 {
  padding-bottom: var(--space-scale-2);
}
.ml-2 {
  margin-left: var(--space-scale-2);
}
.pl-2 {
  padding-left: var(--space-scale-2);
}
.mr-2 {
  margin-right: var(--space-scale-2);
}
.pr-2 {
  padding-right: var(--space-scale-2);
}
.space-x-2 > * + * {
  margin-left: var(--space-scale-2);
}
.space-y-2 > * + * {
  margin-top: var(--space-scale-2);
}
.gap-2 {
  gap: var(--space-scale-2);
}
.m-2 {
  margin: var(--space-scale-2);
}
.mx-2 {
  margin-right: var(--space-scale-2);
  margin-left: var(--space-scale-2);
}
.my-2 {
  margin-top: var(--space-scale-2);
  margin-bottom: var(--space-scale-2);
}
.p-2 {
  padding: var(--space-scale-2);
}
.px-2 {
  padding-right: var(--space-scale-2);
  padding-left: var(--space-scale-2);
}
.py-2 {
  padding-top: var(--space-scale-2);
  padding-bottom: var(--space-scale-2);
}
.mt-3 {
  margin-top: var(--space-scale-3);
}
.pt-3 {
  padding-top: var(--space-scale-3);
}
.mb-3 {
  margin-bottom: var(--space-scale-3);
}
.pb-3 {
  padding-bottom: var(--space-scale-3);
}
.ml-3 {
  margin-left: var(--space-scale-3);
}
.pl-3 {
  padding-left: var(--space-scale-3);
}
.mr-3 {
  margin-right: var(--space-scale-3);
}
.pr-3 {
  padding-right: var(--space-scale-3);
}
.space-x-3 > * + * {
  margin-left: var(--space-scale-3);
}
.space-y-3 > * + * {
  margin-top: var(--space-scale-3);
}
.gap-3 {
  gap: var(--space-scale-3);
}
.m-3 {
  margin: var(--space-scale-3);
}
.mx-3 {
  margin-right: var(--space-scale-3);
  margin-left: var(--space-scale-3);
}
.my-3 {
  margin-top: var(--space-scale-3);
  margin-bottom: var(--space-scale-3);
}
.p-3 {
  padding: var(--space-scale-3);
}
.px-3 {
  padding-right: var(--space-scale-3);
  padding-left: var(--space-scale-3);
}
.py-3 {
  padding-top: var(--space-scale-3);
  padding-bottom: var(--space-scale-3);
}
.mt-4 {
  margin-top: var(--space-scale-4);
}
.pt-4 {
  padding-top: var(--space-scale-4);
}
.mb-4 {
  margin-bottom: var(--space-scale-4);
}
.pb-4 {
  padding-bottom: var(--space-scale-4);
}
.ml-4 {
  margin-left: var(--space-scale-4);
}
.pl-4 {
  padding-left: var(--space-scale-4);
}
.mr-4 {
  margin-right: var(--space-scale-4);
}
.pr-4 {
  padding-right: var(--space-scale-4);
}
.space-x-4 > * + * {
  margin-left: var(--space-scale-4);
}
.space-y-4 > * + * {
  margin-top: var(--space-scale-4);
}
.gap-4 {
  gap: var(--space-scale-4);
}
.m-4 {
  margin: var(--space-scale-4);
}
.mx-4 {
  margin-right: var(--space-scale-4);
  margin-left: var(--space-scale-4);
}
.my-4 {
  margin-top: var(--space-scale-4);
  margin-bottom: var(--space-scale-4);
}
.p-4 {
  padding: var(--space-scale-4);
}
.px-4 {
  padding-right: var(--space-scale-4);
  padding-left: var(--space-scale-4);
}
.py-4 {
  padding-top: var(--space-scale-4);
  padding-bottom: var(--space-scale-4);
}
.mt-5 {
  margin-top: var(--space-scale-5);
}
.pt-5 {
  padding-top: var(--space-scale-5);
}
.mb-5 {
  margin-bottom: var(--space-scale-5);
}
.pb-5 {
  padding-bottom: var(--space-scale-5);
}
.ml-5 {
  margin-left: var(--space-scale-5);
}
.pl-5 {
  padding-left: var(--space-scale-5);
}
.mr-5 {
  margin-right: var(--space-scale-5);
}
.pr-5 {
  padding-right: var(--space-scale-5);
}
.space-x-5 > * + * {
  margin-left: var(--space-scale-5);
}
.space-y-5 > * + * {
  margin-top: var(--space-scale-5);
}
.gap-5 {
  gap: var(--space-scale-5);
}
.m-5 {
  margin: var(--space-scale-5);
}
.mx-5 {
  margin-right: var(--space-scale-5);
  margin-left: var(--space-scale-5);
}
.my-5 {
  margin-top: var(--space-scale-5);
  margin-bottom: var(--space-scale-5);
}
.p-5 {
  padding: var(--space-scale-5);
}
.px-5 {
  padding-right: var(--space-scale-5);
  padding-left: var(--space-scale-5);
}
.py-5 {
  padding-top: var(--space-scale-5);
  padding-bottom: var(--space-scale-5);
}
.mt-6 {
  margin-top: var(--space-scale-6);
}
.pt-6 {
  padding-top: var(--space-scale-6);
}
.mb-6 {
  margin-bottom: var(--space-scale-6);
}
.pb-6 {
  padding-bottom: var(--space-scale-6);
}
.ml-6 {
  margin-left: var(--space-scale-6);
}
.pl-6 {
  padding-left: var(--space-scale-6);
}
.mr-6 {
  margin-right: var(--space-scale-6);
}
.pr-6 {
  padding-right: var(--space-scale-6);
}
.space-x-6 > * + * {
  margin-left: var(--space-scale-6);
}
.space-y-6 > * + * {
  margin-top: var(--space-scale-6);
}
.gap-6 {
  gap: var(--space-scale-6);
}
.m-6 {
  margin: var(--space-scale-6);
}
.mx-6 {
  margin-right: var(--space-scale-6);
  margin-left: var(--space-scale-6);
}
.my-6 {
  margin-top: var(--space-scale-6);
  margin-bottom: var(--space-scale-6);
}
.p-6 {
  padding: var(--space-scale-6);
}
.px-6 {
  padding-right: var(--space-scale-6);
  padding-left: var(--space-scale-6);
}
.py-6 {
  padding-top: var(--space-scale-6);
  padding-bottom: var(--space-scale-6);
}
.mt-7 {
  margin-top: var(--space-scale-7);
}
.pt-7 {
  padding-top: var(--space-scale-7);
}
.mb-7 {
  margin-bottom: var(--space-scale-7);
}
.pb-7 {
  padding-bottom: var(--space-scale-7);
}
.ml-7 {
  margin-left: var(--space-scale-7);
}
.pl-7 {
  padding-left: var(--space-scale-7);
}
.mr-7 {
  margin-right: var(--space-scale-7);
}
.pr-7 {
  padding-right: var(--space-scale-7);
}
.space-x-7 > * + * {
  margin-left: var(--space-scale-7);
}
.space-y-7 > * + * {
  margin-top: var(--space-scale-7);
}
.gap-7 {
  gap: var(--space-scale-7);
}
.m-7 {
  margin: var(--space-scale-7);
}
.mx-7 {
  margin-right: var(--space-scale-7);
  margin-left: var(--space-scale-7);
}
.my-7 {
  margin-top: var(--space-scale-7);
  margin-bottom: var(--space-scale-7);
}
.p-7 {
  padding: var(--space-scale-7);
}
.px-7 {
  padding-right: var(--space-scale-7);
  padding-left: var(--space-scale-7);
}
.py-7 {
  padding-top: var(--space-scale-7);
  padding-bottom: var(--space-scale-7);
}
.mt-8 {
  margin-top: var(--space-scale-8);
}
.pt-8 {
  padding-top: var(--space-scale-8);
}
.mb-8 {
  margin-bottom: var(--space-scale-8);
}
.pb-8 {
  padding-bottom: var(--space-scale-8);
}
.ml-8 {
  margin-left: var(--space-scale-8);
}
.pl-8 {
  padding-left: var(--space-scale-8);
}
.mr-8 {
  margin-right: var(--space-scale-8);
}
.pr-8 {
  padding-right: var(--space-scale-8);
}
.space-x-8 > * + * {
  margin-left: var(--space-scale-8);
}
.space-y-8 > * + * {
  margin-top: var(--space-scale-8);
}
.gap-8 {
  gap: var(--space-scale-8);
}
.m-8 {
  margin: var(--space-scale-8);
}
.mx-8 {
  margin-right: var(--space-scale-8);
  margin-left: var(--space-scale-8);
}
.my-8 {
  margin-top: var(--space-scale-8);
  margin-bottom: var(--space-scale-8);
}
.p-8 {
  padding: var(--space-scale-8);
}
.px-8 {
  padding-right: var(--space-scale-8);
  padding-left: var(--space-scale-8);
}
.py-8 {
  padding-top: var(--space-scale-8);
  padding-bottom: var(--space-scale-8);
}
.mt-9 {
  margin-top: var(--space-scale-9);
}
.pt-9 {
  padding-top: var(--space-scale-9);
}
.mb-9 {
  margin-bottom: var(--space-scale-9);
}
.pb-9 {
  padding-bottom: var(--space-scale-9);
}
.ml-9 {
  margin-left: var(--space-scale-9);
}
.pl-9 {
  padding-left: var(--space-scale-9);
}
.mr-9 {
  margin-right: var(--space-scale-9);
}
.pr-9 {
  padding-right: var(--space-scale-9);
}
.space-x-9 > * + * {
  margin-left: var(--space-scale-9);
}
.space-y-9 > * + * {
  margin-top: var(--space-scale-9);
}
.gap-9 {
  gap: var(--space-scale-9);
}
.m-9 {
  margin: var(--space-scale-9);
}
.mx-9 {
  margin-right: var(--space-scale-9);
  margin-left: var(--space-scale-9);
}
.my-9 {
  margin-top: var(--space-scale-9);
  margin-bottom: var(--space-scale-9);
}
.p-9 {
  padding: var(--space-scale-9);
}
.px-9 {
  padding-right: var(--space-scale-9);
  padding-left: var(--space-scale-9);
}
.py-9 {
  padding-top: var(--space-scale-9);
  padding-bottom: var(--space-scale-9);
}
.mt-10 {
  margin-top: var(--space-scale-10);
}
.pt-10 {
  padding-top: var(--space-scale-10);
}
.mb-10 {
  margin-bottom: var(--space-scale-10);
}
.pb-10 {
  padding-bottom: var(--space-scale-10);
}
.ml-10 {
  margin-left: var(--space-scale-10);
}
.pl-10 {
  padding-left: var(--space-scale-10);
}
.mr-10 {
  margin-right: var(--space-scale-10);
}
.pr-10 {
  padding-right: var(--space-scale-10);
}
.space-x-10 > * + * {
  margin-left: var(--space-scale-10);
}
.space-y-10 > * + * {
  margin-top: var(--space-scale-10);
}
.gap-10 {
  gap: var(--space-scale-10);
}
.m-10 {
  margin: var(--space-scale-10);
}
.mx-10 {
  margin-right: var(--space-scale-10);
  margin-left: var(--space-scale-10);
}
.my-10 {
  margin-top: var(--space-scale-10);
  margin-bottom: var(--space-scale-10);
}
.p-10 {
  padding: var(--space-scale-10);
}
.px-10 {
  padding-right: var(--space-scale-10);
  padding-left: var(--space-scale-10);
}
.py-10 {
  padding-top: var(--space-scale-10);
  padding-bottom: var(--space-scale-10);
}
.mt-11 {
  margin-top: var(--space-scale-11);
}
.pt-11 {
  padding-top: var(--space-scale-11);
}
.mb-11 {
  margin-bottom: var(--space-scale-11);
}
.pb-11 {
  padding-bottom: var(--space-scale-11);
}
.ml-11 {
  margin-left: var(--space-scale-11);
}
.pl-11 {
  padding-left: var(--space-scale-11);
}
.mr-11 {
  margin-right: var(--space-scale-11);
}
.pr-11 {
  padding-right: var(--space-scale-11);
}
.space-x-11 > * + * {
  margin-left: var(--space-scale-11);
}
.space-y-11 > * + * {
  margin-top: var(--space-scale-11);
}
.gap-11 {
  gap: var(--space-scale-11);
}
.m-11 {
  margin: var(--space-scale-11);
}
.mx-11 {
  margin-right: var(--space-scale-11);
  margin-left: var(--space-scale-11);
}
.my-11 {
  margin-top: var(--space-scale-11);
  margin-bottom: var(--space-scale-11);
}
.p-11 {
  padding: var(--space-scale-11);
}
.px-11 {
  padding-right: var(--space-scale-11);
  padding-left: var(--space-scale-11);
}
.py-11 {
  padding-top: var(--space-scale-11);
  padding-bottom: var(--space-scale-11);
}
.mt-12 {
  margin-top: var(--space-scale-12);
}
.pt-12 {
  padding-top: var(--space-scale-12);
}
.mb-12 {
  margin-bottom: var(--space-scale-12);
}
.pb-12 {
  padding-bottom: var(--space-scale-12);
}
.ml-12 {
  margin-left: var(--space-scale-12);
}
.pl-12 {
  padding-left: var(--space-scale-12);
}
.mr-12 {
  margin-right: var(--space-scale-12);
}
.pr-12 {
  padding-right: var(--space-scale-12);
}
.space-x-12 > * + * {
  margin-left: var(--space-scale-12);
}
.space-y-12 > * + * {
  margin-top: var(--space-scale-12);
}
.gap-12 {
  gap: var(--space-scale-12);
}
.m-12 {
  margin: var(--space-scale-12);
}
.mx-12 {
  margin-right: var(--space-scale-12);
  margin-left: var(--space-scale-12);
}
.my-12 {
  margin-top: var(--space-scale-12);
  margin-bottom: var(--space-scale-12);
}
.p-12 {
  padding: var(--space-scale-12);
}
.px-12 {
  padding-right: var(--space-scale-12);
  padding-left: var(--space-scale-12);
}
.py-12 {
  padding-top: var(--space-scale-12);
  padding-bottom: var(--space-scale-12);
}
.mt-13 {
  margin-top: var(--space-scale-13);
}
.pt-13 {
  padding-top: var(--space-scale-13);
}
.mb-13 {
  margin-bottom: var(--space-scale-13);
}
.pb-13 {
  padding-bottom: var(--space-scale-13);
}
.ml-13 {
  margin-left: var(--space-scale-13);
}
.pl-13 {
  padding-left: var(--space-scale-13);
}
.mr-13 {
  margin-right: var(--space-scale-13);
}
.pr-13 {
  padding-right: var(--space-scale-13);
}
.space-x-13 > * + * {
  margin-left: var(--space-scale-13);
}
.space-y-13 > * + * {
  margin-top: var(--space-scale-13);
}
.gap-13 {
  gap: var(--space-scale-13);
}
.m-13 {
  margin: var(--space-scale-13);
}
.mx-13 {
  margin-right: var(--space-scale-13);
  margin-left: var(--space-scale-13);
}
.my-13 {
  margin-top: var(--space-scale-13);
  margin-bottom: var(--space-scale-13);
}
.p-13 {
  padding: var(--space-scale-13);
}
.px-13 {
  padding-right: var(--space-scale-13);
  padding-left: var(--space-scale-13);
}
.py-13 {
  padding-top: var(--space-scale-13);
  padding-bottom: var(--space-scale-13);
}
.mt-14 {
  margin-top: var(--space-scale-14);
}
.pt-14 {
  padding-top: var(--space-scale-14);
}
.mb-14 {
  margin-bottom: var(--space-scale-14);
}
.pb-14 {
  padding-bottom: var(--space-scale-14);
}
.ml-14 {
  margin-left: var(--space-scale-14);
}
.pl-14 {
  padding-left: var(--space-scale-14);
}
.mr-14 {
  margin-right: var(--space-scale-14);
}
.pr-14 {
  padding-right: var(--space-scale-14);
}
.space-x-14 > * + * {
  margin-left: var(--space-scale-14);
}
.space-y-14 > * + * {
  margin-top: var(--space-scale-14);
}
.gap-14 {
  gap: var(--space-scale-14);
}
.m-14 {
  margin: var(--space-scale-14);
}
.mx-14 {
  margin-right: var(--space-scale-14);
  margin-left: var(--space-scale-14);
}
.my-14 {
  margin-top: var(--space-scale-14);
  margin-bottom: var(--space-scale-14);
}
.p-14 {
  padding: var(--space-scale-14);
}
.px-14 {
  padding-right: var(--space-scale-14);
  padding-left: var(--space-scale-14);
}
.py-14 {
  padding-top: var(--space-scale-14);
  padding-bottom: var(--space-scale-14);
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-x-visible {
  overflow-x: visible;
}
.overflow-y-visible {
  overflow-y: visible;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.cursor--inital {
  cursor: initial;
}
.cursor--pointer {
  cursor: pointer;
}
.cursor--auto {
  cursor: auto;
}
.cursor--default {
  cursor: default;
}
.cursor--none {
  cursor: none;
}
.cursor--context-menu {
  cursor: context-menu;
}
.cursor--help {
  cursor: help;
}
.cursor--progress {
  cursor: progress;
}
.cursor--wait {
  cursor: wait;
}
.cursor--cell {
  cursor: cell;
}
.cursor--crosshair {
  cursor: crosshair;
}
.cursor--text {
  cursor: text;
}
.cursor--vertical-text {
  cursor: vertical-text;
}
.cursor--alias {
  cursor: alias;
}
.cursor--copy {
  cursor: copy;
}
.cursor--move {
  cursor: move;
}
.cursor--no-drop {
  cursor: no-drop;
}
.cursor--not-allowed {
  cursor: not-allowed;
}
.cursor--grab {
  cursor: grab;
}
.cursor--grabbing {
  cursor: grabbing;
}
.cursor--all-scroll {
  cursor: all-scroll;
}
.cursor--col-resize {
  cursor: col-resize;
}
.cursor--row-resize {
  cursor: row-resize;
}
.cursor--zoom-in {
  cursor: zoom-in;
}
.cursor--zoom-out {
  cursor: zoom-out;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animation-fade-in {
  animation: fade-in 300ms ease-in-out;
}
.animation-speed--75 {
  animation-duration: 75ms;
}
.animation-speed--100 {
  animation-duration: 100ms;
}
.animation-speed--fast,
.animation-speed--150 {
  animation-duration: 150ms;
}
.animation-speed--200 {
  animation-duration: 200ms;
}
.animation-speed--medium,
.animation-speed--300 {
  animation-duration: 300ms;
}
.animation-speed--slow,
.animation-speed--500 {
  animation-duration: 500ms;
}
.animation-speed--700 {
  animation-duration: 700ms;
}
.animation-speed--1000 {
  animation-duration: 1000ms;
}
.animation-timing--ease-in-out {
  animation-timing-function: ease-in-out;
}
.animation-timing--ease-in {
  animation-timing-function: ease-in;
}
.animation-timing--ease-out {
  animation-timing-function: ease-out;
}
.animation-timing--linear {
  animation-timing-function: linear;
} /*# sourceMappingURL=styles.css.map */