/**
 * Copyright 2025 Sanoma Learning
 * SPDX-License-Identifier: Apache-2.0
 */

:root {
  --sl-icon-core-fav: star; /** icon.core.fav */
  --sl-icon-core-menu: bars; /** icon.core.menu */
  --sl-icon-core-plus: plus; /** icon.core.plus */
  --sl-icon-core-check: check; /** icon.core.check */
  --sl-icon-core-clock: clock; /** icon.core.clock */
  --sl-icon-core-minus: minus; /** icon.core.minus */
  --sl-icon-core-xmark: xmark; /** icon.core.xmark */
  --sl-icon-core-pinata: pinata; /** icon.core.pinata */
  --sl-icon-core-search: magnifying-glass; /** icon.core.search */
  --sl-icon-core-calendar: calendar; /** icon.core.calendar */
  --sl-icon-core-ellipsis: ellipsis; /** icon.core.ellipsis */
  --sl-icon-core-angle-down: angle-down; /** icon.core.angle-down */
  --sl-icon-core-dash-solid: dash; /** icon.core.dash-solid */
  --sl-icon-core-face-smile: face-smile; /** icon.core.face-smile */
  --sl-icon-core-grip-lines: grip-lines; /** icon.core.grip-lines */
  --sl-icon-core-home-blank: home-blank; /** icon.core.home-blank */
  --sl-icon-core-check-solid: check; /** icon.core.check-solid */
  --sl-icon-core-chevron-down: chevron-down; /** icon.core.chevron-down */
  --sl-icon-core-chevron-left: chevron-left; /** icon.core.chevron-left */
  --sl-icon-core-circle-solid: circle; /** icon.core.circle */
  --sl-icon-core-circle-xmark: circle-xmark; /** icon.core.circle-xmark */
  --sl-icon-core-pinata-solid: pinata; /** icon.core.pinata */
  --sl-icon-core-chevron-right: chevron-right; /** icon.core.chevron-right */
  --sl-icon-core-caret-down-solid: caret-down; /** icon.core.caret-down-solid */
  --sl-icon-core-caret-left-solid: caret-left; /** icon.core.caret-left-solid */
  --sl-icon-core-caret-right-solid: caret-right; /** icon.core.caret-right-solid */
  --sl-icon-core-ellipsis-vertical: ellipsis-vertical; /** icon.core.ellipsis-vertical */
  --sl-icon-core-circle-check-solid: circle-check; /** icon.core.circle-check-solid */
  --sl-icon-core-circle-xmark-solid: circle-xmark; /** icon.core.circle-xmark-solid */
  --sl-icon-core-breadcrumb-separator: slash-forward; /** icon.core.breadcrumb-separator */
  --sl-icon-core-circle-exclamation-solid: circle-exclamation; /** icon.core.circle-exclamation-solid */
  --sl-icon-core-diamond-exclamation-solid: diamond-exclamation; /** icon.core.diamond-exclamation-solid */
  --sl-icon-core-octagon-exclamation-solid: octagon-exclamation; /** icon.core.octagon-exclamation-solid */
  --sl-icon-core-triangle-exclamation-solid: triangle-exclamation; /** icon.core.triangle-exclamation-solid */
  --sl-icon-typeset-font-size-lg: 20px; /** icon.typeset.fontSize.lg */
  --sl-icon-typeset-font-size-md: 16px; /** icon.typeset.fontSize.md */
  --sl-icon-typeset-font-size-sm: 14px; /** icon.typeset.fontSize.sm */
  --sl-icon-typeset-font-size-xl: 24px; /** icon.typeset.fontSize.xl */
  --sl-icon-typeset-font-size-xs: 12px; /** icon.typeset.fontSize.xs */
  --sl-icon-typeset-font-size-2xl: 32px; /** icon.typeset.fontSize.2xl */
  --sl-icon-typeset-font-size-2xs: 10px; /** icon.typeset.fontSize.xs */
  --sl-icon-typeset-font-size-3xl: 48px; /** icon.typeset.fontSize.3xl */
  --sl-icon-typeset-font-size-4xl: 64px; /** icon.typeset.fontSize.4xl */
  --sl-icon-typeset-fontFamily-sharp: font-awesome-7-sharp;
  --sl-icon-typeset-fontFamily-classic: font-awesome-7-pro;
  --sl-icon-typeset-fontWeight-icon-thin: 100;
  --sl-icon-typeset-fontWeight-icon-light: 300;
  --sl-icon-typeset-fontWeight-icon-solid: solid;
  --sl-icon-typeset-fontWeight-icon-regular: 400;
  --sl-icon-typeset-fontWeight-solid: solid;
  --sl-icon-typeset-fontWeight-regular: 400;
  --sl-icon-font-family-sharp: font-awesome-6-sharp;
  --sl-icon-font-family-classic: font-awesome-6-pro;
  --sl-icon-style-solid: solid;
  --sl-icon-style-outline: 400;
  --sl-size-100: 8px;
  --sl-size-125: 10px;
  --sl-size-150: 12px;
  --sl-size-175: 14px;
  --sl-size-200: 16px;
  --sl-size-250: 20px;
  --sl-size-300: 24px;
  --sl-size-350: 28px;
  --sl-size-400: 32px;
  --sl-size-450: 36px;
  --sl-size-500: 40px;
  --sl-size-600: 48px;
  --sl-size-700: 56px;
  --sl-size-800: 64px;
  --sl-size-1000: 80px;
  --sl-size-lg: 20px; /** size.lg */
  --sl-size-md: 16px; /** size.md */
  --sl-size-sm: 14px; /** size.sm */
  --sl-size-xl: 24px; /** size.xl */
  --sl-size-xs: 12px; /** size.xs */
  --sl-size-2xl: 32px; /** size.2xl */
  --sl-size-2xs: 8px; /** size.2xs */
  --sl-size-3xl: 48px; /** size.3xl */
  --sl-size-3xs: 4px; /** size.3xs */
  --sl-size-4xl: 64px; /** size.4xl */
  --sl-size-4xs: 2px; /** size.4xs */
  --sl-size-tab-indicator: 2px;
  --sl-size-tag-lg: 32px;
  --sl-size-tag-md: 24px;
  --sl-size-tag-counter: 8px;
  --sl-size-icon-lg: 20px;
  --sl-size-icon-md: 16px;
  --sl-size-icon-sm: 14px;
  --sl-size-icon-xl: 24px;
  --sl-size-icon-xs: 12px;
  --sl-size-icon-2xl: 32px;
  --sl-size-icon-2xs: 10px;
  --sl-size-icon-3xl: 48px;
  --sl-size-icon-3xs: 5px;
  --sl-size-icon-4xl: 64px;
  --sl-size-icon-font-lg: 20px;
  --sl-size-icon-font-md: 16px;
  --sl-size-icon-font-sm: 14px;
  --sl-size-icon-font-xl: 24px;
  --sl-size-icon-font-xs: 12px;
  --sl-size-icon-font-2xl: 32px;
  --sl-size-icon-font-3xl: 48px;
  --sl-size-icon-font-4xl: 64px;
  --sl-size-none: 0px;
  --sl-size-badge-lg: 20px;
  --sl-size-badge-md: 16px;
  --sl-size-badge-sm: 8px;
  --sl-size-input-option-lg: 32px; /** size.input.lg */
  --sl-size-input-option-md: 24px; /** size.input.md */
  --sl-size-input-option-sm: 20px;
  --sl-size-input-option-checkbox-icon-lg: 20px; /** size.input.lg */
  --sl-size-input-option-checkbox-icon-md: 16px; /** size.input.md */
  --sl-size-input-option-checkbox-icon-sm: 12px;
  --sl-size-input-switch-handle-lg: 28px; /** size.input.md */
  --sl-size-input-switch-handle-md: 20px; /** size.input.md */
  --sl-size-input-switch-handle-sm: 12px; /** size.input.md */
  --sl-size-input-switch-controller-width-lg: 64px; /** size.switch.controller.lg */
  --sl-size-input-switch-controller-width-md: 48px; /** size.switch.controller.md */
  --sl-size-input-switch-controller-width-sm: 32px; /** size.switch.controller.sm */
  --sl-size-input-switch-controller-height-lg: 32px; /** size.switch.controller.lg */
  --sl-size-input-switch-controller-height-md: 24px; /** size.switch.controller.md */
  --sl-size-input-switch-controller-height-sm: 16px; /** size.switch.controller.sm */
  --sl-size-avatar-lg: 40px;
  --sl-size-avatar-md: 32px;
  --sl-size-avatar-sm: 24px;
  --sl-size-avatar-xl: 52px;
  --sl-size-avatar-2xl: 64px;
  --sl-size-avatar-3xl: 80px;
  --sl-size-avatar-4xl: 160px;
  --sl-size-avatar-badge-lg: 20px;
  --sl-size-avatar-badge-md: 16px;
  --sl-size-avatar-badge-sm: 8px;
  --sl-size-button-icon-container-inline-lg: 16px;
  --sl-size-button-icon-container-inline-md: 14px;
  --sl-size-button-icon-container-inline-sm: 12px;
  --sl-size-button-icon-container-icon-only-lg: 24px;
  --sl-size-button-icon-container-icon-only-md: 16px;
  --sl-size-button-icon-container-icon-only-sm: 16px;
  --sl-size-dialog-max: 960px; /** size.input.lg */
  --sl-size-dialog-min: 400px; /** size.input.md */
  --sl-size-dialog-full: 100%; /** size.input.lg */
  --sl-size-dialog-message-mobile-min: 300px; /** size.input.md */
  --sl-size-spinner-lg: 20px;
  --sl-size-spinner-md: 16px;
  --sl-size-spinner-sm: 14px;
  --sl-size-spinner-xl: 24px;
  --sl-size-spinner-xs: 12px;
  --sl-size-spinner-2xl: 32px;
  --sl-size-spinner-3xl: 48px;
  --sl-size-spinner-4xl: 64px;
  --sl-size-skeleton-min-height: 8px;
  --sl-size-paginator-select-min-width: 80px; /** we are using a raw value, needs to be changed to a token in the future */
  --sl-size-paginator-page-button-min-width: 40px; /** we are using a raw value, needs to be changed to a token in the future */
  --sl-size-breadcrumb: 32px;
  --sl-size-progressbar: 4px;
  --sl-size-font-150: 12px;
  --sl-size-font-175: 14px;
  --sl-size-font-200: 16px;
  --sl-size-font-250: 20px;
  --sl-size-font-300: 24px;
  --sl-size-font-400: 32px;
  --sl-size-font-500: 40px;
  --sl-size-font-600: 48px;
  --sl-size-font-800: 64px;
  --sl-size-font-1000: 80px;
  --sl-size-lineHeight-150: 12pxpx;
  --sl-size-lineHeight-175: 14pxpx;
  --sl-size-lineHeight-200: 16pxpx;
  --sl-size-lineHeight-250: 20pxpx;
  --sl-size-lineHeight-300: 24pxpx;
  --sl-size-lineHeight-400: 32pxpx;
  --sl-size-lineHeight-500: 40pxpx;
  --sl-size-lineHeight-600: 48pxpx;
  --sl-size-lineHeight-800: 64pxpx;
  --sl-size-lineHeight-1000: 80pxpx;
  --sl-size-borderWidth-bold: 2px; /** A bold border, applied to UI elements that need to stand out. */
  --sl-size-borderWidth-none: 0px; /** A heavy border for impactful elements where heavy emphasis is needed. */
  --sl-size-borderWidth-heavy: 4px; /** A heavy border for impactful elements where heavy emphasis is needed. */
  --sl-size-borderWidth-subtle: 1px; /** A subtle border, applied to UI elements where subtle emphasis is needed. */
  --sl-size-borderWidth-focusRing: 2px;
  --sl-size-borderWidth-action: 1px; /** Sets the standard border width for action components. */
  --sl-size-borderWidth-default: 1px; /** Sets the standard border width for UI elements. */
  --sl-size-borderRadius-lg: 8px; /** size.borderRadius.lg */
  --sl-size-borderRadius-md: 4px; /** size.borderRadius.md */
  --sl-size-borderRadius-sm: 2px; /** size.borderRadius.sm */
  --sl-size-borderRadius-xl: 12px; /** size.borderRadius.xl */
  --sl-size-borderRadius-full: 50rem; /** Use for pill-shaped elements like badges, and circular rounding for components with equal width and height, such as icon buttons and avatars. */
  --sl-size-borderRadius-none: 0px; /** size.borderRadius.none */
  --sl-size-borderRadius-child: 2px; /** The standard border radius for most components. Use for elements that need subtle rounding without emphasizing their shape. */
  --sl-size-borderRadius-default: 4px; /** The standard border radius for most components. Use for elements that need subtle rounding without emphasizing their shape. */
  --sl-size-borderRadius-focusRing-inside: 3px; /** Use for focusring inside of component when outside focus ring is not possible */
  --sl-size-borderRadius-focusRing-outside: 6px; /** Use for focusring outside of component */
  --sl-size-outlineWidth-default: 2px; /** Sets the standard outline width for UI elements. */
  --sl-size-outlineOffset-default: 3px; /** Defines the default offset for focus indicators. */
  --sl-size-010: 1px;
  --sl-size-025: 2px;
  --sl-size-050: 4px;
  --sl-size-075: 6px;
  --sl-size-full: 50rem;
  --sl-size-select-indicator: 4px;
  --sl-size-accordion-icon-height: 28px;
  --sl-size-inline-message-start: 4px;
  --sl-size-text-new-body-lg: 16px;
  --sl-size-text-new-body-md: 14px; /** default text size for body */
  --sl-size-text-new-body-sm: 12px;
  --sl-size-text-new-heading-lg: 24px;
  --sl-size-text-new-heading-md: 16px;
  --sl-size-text-new-heading-sm: 14px;
  --sl-size-text-new-heading-xl: 32px;
  --sl-size-text-new-heading-2xl: 48px;
  --sl-text-badge-text-lg: 600 14px/20px roboto;
  --sl-text-badge-text-md: 600 12px/16px roboto;
  --sl-text-dialog-message-mobile-heading: 600 16px/20px raleway;
  --sl-text-dialog-message-mobile-subheading: 600 14px/16px roboto;
  --sl-text-dialog-heading: 600 24px/34px raleway;
  --sl-text-dialog-subheading: 400 16px/20px raleway;
  --sl-text-typeset-font-size-lg: 16px; /** text.typeset.fontSize.lg */
  --sl-text-typeset-font-size-md: 14px; /** text.typeset.fontSize.md */
  --sl-text-typeset-font-size-sm: 12px; /** text.typeset.fontSize.sm */
  --sl-text-typeset-font-size-xl: 18px; /** text.typeset.fontSize.xl */
  --sl-text-typeset-font-size-xs: 10px; /** text.typeset.fontSize.xs */
  --sl-text-typeset-font-size-2xl: 24px; /** text.typeset.fontSize.2xl */
  --sl-text-typeset-font-size-3xl: 32px; /** text.typeset.fontSize.3xl */
  --sl-text-typeset-font-size-4xl: 48px; /** text.typeset.fontSize.4xl */
  --sl-text-typeset-font-size-5xl: 54px; /** text.typeset.fontSize.5xl */
  --sl-text-typeset-text-case-none: none; /** text.typeset.textCase.none */
  --sl-text-typeset-text-case-lowercase: lowercase; /** text.typeset.textCase.lowercase */
  --sl-text-typeset-text-case-uppercase: uppercase; /** text.typeset.textCase.uppercase */
  --sl-text-typeset-text-case-capitalize: capitalize; /** text.typeset.textCase.capitalize */
  --sl-text-typeset-font-family-icon: font-awesome-6-pro; /** text.typeset.fontFamily.fontIcon */
  --sl-text-typeset-font-family-body: roboto; /** text.typeset.fontFamily.body */
  --sl-text-typeset-font-family-heading: raleway; /** text.typeset.fontFamily.heading */
  --sl-text-typeset-font-weight-bold: 700;
  --sl-text-typeset-font-weight-regular: 400;
  --sl-text-typeset-font-weight-demibold: 600;
  --sl-text-typeset-font-weight-icon-thin: 100; /** text.typeset.fontWeight.icon-thin */
  --sl-text-typeset-font-weight-icon-light: 300; /** text.typeset.fontWeight.icon-light */
  --sl-text-typeset-font-weight-icon-solid: solid; /** text.typeset.fontWeight.icon-solid */
  --sl-text-typeset-font-weight-icon-regular: 400; /** text.typeset.fontWeight.icon-regular */
  --sl-text-typeset-font-weight-light: 300;
  --sl-text-typeset-font-weight-medium: 500;
  --sl-text-typeset-line-height-lg: 24px; /** text.typeset.lineHeight.lg */
  --sl-text-typeset-line-height-md: 20px; /** text.typeset.lineHeight.md */
  --sl-text-typeset-line-height-sm: 16px; /** text.typeset.lineHeight.sm */
  --sl-text-typeset-line-height-xl: 28px; /** text.typeset.lineHeight.xl */
  --sl-text-typeset-line-height-xs: 14px; /** text.typeset.lineHeight.xs */
  --sl-text-typeset-line-height-2xl: 34px; /** text.typeset.lineHeight.2xl */
  --sl-text-typeset-line-height-3xl: 42px; /** text.typeset.lineHeight.3xl */
  --sl-text-typeset-line-height-4xl: 58px; /** text.typeset.lineHeight.4xl */
  --sl-text-typeset-line-height-5xl: 64px; /** text.typeset.lineHeight.5xl */
  --sl-text-typeset-line-height-xxs: 12px; /** text.typeset.lineHeight.xs */
  --sl-text-typeset-letter-spacing-lg: 0.01em; /** text.typeset.letterSpacing.lg */
  --sl-text-typeset-letter-spacing-md: 0em; /** text.typeset.letterSpacing.md */
  --sl-text-typeset-letter-spacing-sm: -0.01em; /** text.typeset.letterSpacing.sm */
  --sl-text-typeset-letter-spacing-xl: 0.02em; /** text.typeset.letterSpacing.xl */
  --sl-text-typeset-letter-spacing-xs: -0.02em; /** text.typeset.letterSpacing.xs */
  --sl-text-typeset-letter-spacing-none: 0em; /** text.typeset.letterSpacing.none */
  --sl-text-typeset-text-decoration-none: none; /** text.typeset.textDecoration.none */
  --sl-text-typeset-text-decoration-underline: underline; /** text.typeset.textDecoration.underline */
  --sl-text-typeset-text-decoration-strikethrough: strikethrough; /** text.typeset.textDecoration.strikethrough */
  --sl-text-typeset-paragraph-spacing-lg: 24px; /** text.typeset.paragraphSpacing.lg */
  --sl-text-typeset-paragraph-spacing-md: 22px; /** text.typeset.paragraphSpacing.md */
  --sl-text-typeset-paragraph-spacing-sm: 18px; /** text.typeset.paragraphSpacing.sm */
  --sl-text-typeset-paragraph-spacing-xl: 28px; /** text.typeset.paragraphSpacing.xl */
  --sl-text-typeset-paragraph-spacing-xs: 14px; /** text.typeset.paragraphSpacing.xs */
  --sl-text-typeset-paragraph-spacing-2xl: 34px; /** text.typeset.paragraphSpacing.2xl */
  --sl-text-typeset-paragraph-spacing-3xl: 42px; /** text.typeset.paragraphSpacing.3xl */
  --sl-text-typeset-paragraph-spacing-4xl: 58px; /** text.typeset.paragraphSpacing.4xl */
  --sl-text-typeset-paragraph-spacing-5xl: 64px; /** text.typeset.paragraphSpacing.5xl */
  --sl-text-typeset-paragraph-spacing-none: 0; /** text.typeset.paragraphSpacing.none */
  --sl-text-tab-title: 600 16px/20px roboto;
  --sl-text-tab-subtitle: 400 14px/20px roboto;
  --sl-text-tag-close-lg: solid 14px/20px font-awesome-6-pro;
  --sl-text-tag-close-md: solid 12px/16px font-awesome-6-pro;
  --sl-text-tag-label-lg: 600 14px/20px roboto;
  --sl-text-tag-label-md: 600 14px/16px roboto;
  --sl-text-body-lg-bold: 600 16px/24px roboto; /** text.typeset.body.lg.bold */
  --sl-text-body-lg-normal: 300 16px/24px roboto; /** text.typeset.body.lg.normal */
  --sl-text-body-lg-demibold: 600 16px/24px roboto; /** text.typeset.body.lg.demibold */
  --sl-text-body-md-bold: 600 14px/20px roboto; /** text.typeset.body.md.bold */
  --sl-text-body-md-normal: 300 14px/20px roboto; /** text.typeset.body.md.normal */
  --sl-text-body-md-demibold: 600 14px/20px roboto; /** text.typeset.body.md.demibold */
  --sl-text-body-sm-bold: 600 12px/16px roboto; /** text.typeset.body.sm.bold */
  --sl-text-body-sm-normal: 300 12px/16px roboto; /** text.typeset.body.sm.normal */
  --sl-text-body-sm-demibold: 600 12px/16px roboto; /** text.typeset.body.sm.demibold */
  --sl-text-card-body: 400 14px/20px roboto;
  --sl-text-card-title: 600 18px/28px raleway;
  --sl-text-card-subtitle: 400 16px/24px roboto;
  --sl-text-href-lg: 600 16px/24px roboto;
  --sl-text-href-md: 600 14px/16px roboto;
  --sl-text-href-sm: 600 12px/16px roboto;
  --sl-text-href-idle-lg: 600 16px/24px roboto;
  --sl-text-href-idle-md: 600 14px/16px roboto;
  --sl-text-href-idle-sm: 600 12px/16px roboto;
  --sl-text-href-hover-lg: 600 16px/24px roboto;
  --sl-text-href-hover-md: 600 14px/16px roboto;
  --sl-text-href-hover-sm: 600 12px/16px roboto;
  --sl-text-href-active-lg: 600 16px/24px roboto;
  --sl-text-href-active-md: 600 14px/16px roboto;
  --sl-text-href-active-sm: 600 12px/16px roboto;
  --sl-text-href-disabled-lg: 600 16px/24px roboto;
  --sl-text-href-disabled-md: 600 14px/16px roboto;
  --sl-text-href-disabled-sm: 600 12px/16px roboto;
  --sl-text-icon-font-icon-lg: 400 16px/16px font-awesome-6-pro;
  --sl-text-icon-font-icon-md: 400 14px/14px font-awesome-6-pro;
  --sl-text-icon-font-icon-sm: 400 13px/12px font-awesome-6-pro;
  --sl-text-list-sm-normal: 400 14px/20px roboto;
  --sl-text-input-helper-text-lg: 400 14px/20px roboto;
  --sl-text-input-helper-text-md: 400 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-helper-text-sm: 400 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-helper-font-icon-lg: solid 18px/20px font-awesome-6-pro;
  --sl-text-input-helper-font-icon-md: solid 15px/16px font-awesome-6-pro;
  --sl-text-input-option-lg: 400 16px/24px roboto; /** Is use in Radio and Checkbox */
  --sl-text-input-option-md: 400 14px/20px roboto; /** Is use in Radio and Checkbox */
  --sl-text-input-switch-input-field-bold-lg: 600 18px/24px roboto; /** Font size xl is 18px need to be change to 20px to match 4-Grid layout. */
  --sl-text-input-switch-input-field-bold-md: 600 16px/24px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-switch-input-field-bold-sm: 600 14px/16px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-switch-input-field-regular-lg: 400 18px/24px roboto; /** Font size xl is 18px need to be change to 20px to match 4-Grid layout. */
  --sl-text-input-switch-input-field-regular-md: 400 16px/24px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-switch-input-field-regular-sm: 400 14px/16px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-text-field-text-lg: 400 16px/24px roboto;
  --sl-text-input-text-field-text-md: 400 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-text-field-font-icon-lg: solid 18px/20px font-awesome-6-pro;
  --sl-text-input-text-field-font-icon-md: solid 15px/16px font-awesome-6-pro;
  --sl-text-input-field-label-tag-lg: 400 16px/24px roboto; /** Font size xl is 18px need to be change to 20px to match 4-Grid layout. */
  --sl-text-input-field-label-tag-md: 400 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-field-label-tag-sm: 400 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-field-label-hint-lg: 400 14px/20px roboto; /** Font size xl is 18px need to be change to 20px to match 4-Grid layout. */
  --sl-text-input-field-label-hint-md: 400 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-field-label-hint-sm: 400 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-field-label-label-lg: 600 16px/24px roboto; /** Font size xl is 18px need to be change to 20px to match 4-Grid layout. */
  --sl-text-input-field-label-label-md: 600 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-input-field-label-label-sm: 600 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-avatar-icon-lg: 400 18px font-awesome-6-pro;
  --sl-text-avatar-icon-md: 400 16px font-awesome-6-pro;
  --sl-text-avatar-icon-sm: 400 14px font-awesome-6-pro;
  --sl-text-avatar-icon-xl: 400 24px font-awesome-6-pro;
  --sl-text-avatar-icon-2xl: 400 32px font-awesome-6-pro;
  --sl-text-avatar-icon-3xl: 400 32px font-awesome-6-pro;
  --sl-text-avatar-icon-4xl: 400 64px font-awesome-6-pro;
  --sl-text-avatar-header-lg: 400 14px/18px roboto;
  --sl-text-avatar-header-md: 400 14px/18px roboto;
  --sl-text-avatar-header-sm: 400 14px/18px roboto;
  --sl-text-avatar-header-xl: 400 16px/20px roboto;
  --sl-text-avatar-header-2xl: 400 16px/20px roboto;
  --sl-text-avatar-header-3xl: 400 16px/20px roboto;
  --sl-text-avatar-header-4xl: 400 24px/24px roboto;
  --sl-text-avatar-initials-lg: 600 14px/20px roboto;
  --sl-text-avatar-initials-md: 600 12px/16px roboto;
  --sl-text-avatar-initials-sm: 600 10px/14px roboto;
  --sl-text-avatar-initials-xl: 600 18px/28px roboto;
  --sl-text-avatar-initials-2xl: 600 24px/34px roboto;
  --sl-text-avatar-initials-3xl: 600 32px/34px roboto;
  --sl-text-avatar-initials-4xl: 600 64px/34px roboto;
  --sl-text-avatar-subheader-lg: 400 14px/18px roboto;
  --sl-text-avatar-subheader-md: 400 12px/18px roboto;
  --sl-text-avatar-subheader-sm: 400 12px/16px roboto;
  --sl-text-avatar-subheader-xl: 400 14px/18px roboto;
  --sl-text-avatar-subheader-2xl: 400 14px/18px roboto;
  --sl-text-avatar-subheader-3xl: 400 14px/18px roboto;
  --sl-text-avatar-subheader-4xl: 400 16px/20px roboto;
  --sl-text-button-link-lg: 500 14px/24px raleway;
  --sl-text-button-link-md: 600 14px/16px raleway;
  --sl-text-button-link-sm: 600 14px/16px raleway;
  --sl-text-button-link-idle-lg: 500 14px/24px raleway;
  --sl-text-button-link-idle-md: 600 14px/16px raleway;
  --sl-text-button-link-idle-sm: 600 14px/16px raleway;
  --sl-text-button-link-hover-lg: 500 14px/24px raleway;
  --sl-text-button-link-hover-md: 600 14px/16px raleway;
  --sl-text-button-link-hover-sm: 600 14px/16px raleway;
  --sl-text-button-link-active-lg: 500 14px/24px raleway;
  --sl-text-button-link-active-md: 600 14px/16px raleway;
  --sl-text-button-link-active-sm: 600 14px/16px raleway;
  --sl-text-button-link-disabled-lg: 500 14px/24px raleway;
  --sl-text-button-link-disabled-md: 600 14px/16px raleway;
  --sl-text-button-link-disabled-sm: 600 14px/16px raleway;
  --sl-text-button-text-lg: 500 14px/24px raleway;
  --sl-text-button-text-md: 600 14px/16px raleway;
  --sl-text-button-text-sm: 600 14px/16px raleway;
  --sl-text-button-font-icon-lg: 14px/16px sans-serif;
  --sl-text-button-font-icon-md: 14px/14px sans-serif;
  --sl-text-button-font-icon-sm: 14px/12px sans-serif;
  --sl-text-select-selectbox-text-lg: 400 16px/24px roboto;
  --sl-text-select-selectbox-text-md: 400 14px/20px roboto; /** UPDATED - Line height md from 22px to 20px */
  --sl-text-select-selectbox-title-lg: 400 14px/14px roboto;
  --sl-text-select-selectbox-title-md: 400 12px/12px roboto;
  --sl-text-heading-0: 600 32px/34px raleway; /** text.typeset.heading.0 */
  --sl-text-heading-1: 600 28px/38px raleway; /** text.typeset.heading.1 */
  --sl-text-heading-2: 500 24px/34px raleway; /** text.typeset.heading.2 */
  --sl-text-heading-3: 600 16px/24px raleway; /** text.typeset.heading.3 */
  --sl-text-heading-4: 600 14px/20px raleway; /** text.typeset.heading.4 */
  --sl-text-popover-text-text: 400 14px/20px roboto;
  --sl-text-popover-text-title: 600 14px/20px roboto;
  --sl-text-tooltip-text-tip: 400 12px/16px roboto;
  --sl-text-tooltip-text-title: 600 12px/16px roboto;
  --sl-text-accordion-body: 400 14px/20px roboto;
  --sl-text-accordion-title: 600 18px/28px raleway;
  --sl-text-text-field: [object Object];
  --sl-text-breadcrumb-link: 400 14px/16px roboto;
  --sl-text-breadcrumb-current: 400 14px/16px roboto;
  --sl-text-breadcrumb-disabled: 400 14px/16px roboto;
  --sl-space-100: 8px;
  --sl-space-125: 10px;
  --sl-space-150: 12px;
  --sl-space-175: 14px;
  --sl-space-200: 16px;
  --sl-space-250: 20px;
  --sl-space-300: 24px;
  --sl-space-400: 32px;
  --sl-space-500: 40px;
  --sl-space-600: 48px;
  --sl-space-700: 56px;
  --sl-space-800: 64px;
  --sl-space-1000: 80px;
  --sl-space-lg: 16px; /** space.lg */
  --sl-space-md: 12px; /** space.md */
  --sl-space-sm: 8px; /** space.sm */
  --sl-space-xl: 24px; /** space.xl */
  --sl-space-xs: 4px; /** space.xs */
  --sl-space-2xl: 30px; /** space.2xl */
  --sl-space-2xs: 2px; /** space.2xs */
  --sl-space-3xl: 40px; /** space.3xl */
  --sl-space-tab-gap: 8px;
  --sl-space-tab-more-block: 8px;
  --sl-space-tab-more-inline: 12px;
  --sl-space-tab-block: 12px;
  --sl-space-tab-inline: 24px;
  --sl-space-tab-content-vertical-gap: 24px;
  --sl-space-tab-content-vertical-block: 8px;
  --sl-space-tab-content-vertical-inline: 24px;
  --sl-space-tab-content-horizontal-gap: 24px;
  --sl-space-tab-content-horizontal-block: 24px;
  --sl-space-tab-content-horizontal-inline: 24px;
  --sl-space-tag-gap-lg: 12px; /** 8px */
  --sl-space-tag-gap-md: 8px; /** 4px */
  --sl-space-tag-list-lg: 6px;
  --sl-space-tag-list-md: 4px;
  --sl-space-tag-block-lg: 8px; /** space.button.solid.block.lg */
  --sl-space-tag-block-md: 4px; /** space.button.solid.block.md */
  --sl-space-tag-inline-lg: 12px; /** space.button.solid.inline.lg */
  --sl-space-tag-inline-md: 8px; /** space.button.solid.inline.md */
  --sl-space-tag-counter-gap: -2px;
  --sl-space-card-media-full: 0px;
  --sl-space-card-media-margins: 8px;
  --sl-space-card-content-inline: 24px;
  --sl-space-card-content-block: 24px;
  --sl-space-card-vertical-gap: 0px;
  --sl-space-card-vertical-block: 24px;
  --sl-space-card-vertical-inline: 0px;
  --sl-space-card-horizontal-gap: 0px;
  --sl-space-card-horizontal-block: 24px;
  --sl-space-card-horizontal-inline: 0px;
  --sl-space-card-slotheader-badges-gap: 8px;
  --sl-space-card-slotheader-badges-block: 4px;
  --sl-space-card-slotheader-badges-inline: 0px;
  --sl-space-card-gap-header-block: 0px;
  --sl-space-card-gap-header-inline: 0px;
  --sl-space-card-gap-content-block: 16px;
  --sl-space-card-gap-content-inline: 8px;
  --sl-space-form-gap: 24px;
  --sl-space-menu-item-gap: 8px;
  --sl-space-menu-item-block: 8px;
  --sl-space-menu-item-inline: 8px;
  --sl-space-menu-container-gap: 4px;
  --sl-space-menu-container-block: 8px;
  --sl-space-menu-container-inline: 8px;
  --sl-space-none: 0px;
  --sl-space-badge-gap-lg: 4px;
  --sl-space-badge-gap-md: 4px;
  --sl-space-badge-gap-sm: 2px;
  --sl-space-badge-icon-block-lg: 1px;
  --sl-space-badge-icon-block-md: 0px;
  --sl-space-badge-icon-block-sm: 0px;
  --sl-space-badge-icon-block-xl: 2px;
  --sl-space-badge-icon-block-xs: 0px;
  --sl-space-badge-icon-block-2xs: 0px;
  --sl-space-badge-icon-inline-lg: 1px;
  --sl-space-badge-icon-inline-md: 0px;
  --sl-space-badge-icon-inline-sm: 0px;
  --sl-space-badge-icon-inline-xl: 2px;
  --sl-space-badge-icon-inline-xs: 0px;
  --sl-space-badge-icon-inline-2xs: 0px;
  --sl-space-badge-block-lg: 2px;
  --sl-space-badge-block-md: 2px;
  --sl-space-badge-block-sm: 2px;
  --sl-space-badge-label-inline-lg: 3px;
  --sl-space-badge-label-inline-md: 3px;
  --sl-space-badge-label-inline-sm: 2px;
  --sl-space-badge-label-inline-xl: 3px;
  --sl-space-badge-label-inline-xs: 2px;
  --sl-space-badge-label-inline-2xs: 2px;
  --sl-space-badge-inline-lg: 8px;
  --sl-space-badge-inline-md: 8px;
  --sl-space-badge-inline-sm: 2px;
  --sl-space-focus-gap: 4px;
  --sl-space-group-lg: 8px;
  --sl-space-group-md: 4px;
  --sl-space-group-sm: 2px;
  --sl-space-group-xl: 8px;
  --sl-space-input-helper-gap-lg: 4px; /** 8px */
  --sl-space-input-helper-gap-md: 4px; /** 4px */
  --sl-space-input-helper-gap-sm: 4px; /** 4px */
  --sl-space-input-helper-padding-top-lg: 4px; /** 8px */
  --sl-space-input-helper-padding-top-md: 4px; /** 4px */
  --sl-space-input-helper-padding-top-sm: 4px; /** 4px */
  --sl-space-input-helper-padding-top-none: 0px; /** 8px */
  --sl-space-input-option-gap-lg: 8px; /** 8px */
  --sl-space-input-option-gap-md: 8px; /** 4px */
  --sl-space-input-option-gap-sm: 8px; /** 4px */
  --sl-space-input-option-block-lg: 4px; /** space.button.solid.block.lg */
  --sl-space-input-option-block-md: 4px; /** space.button.solid.block.md */
  --sl-space-input-option-block-sm: 0px; /** space.button.solid.block.md */
  --sl-space-input-option-inline-lg: 0px; /** space.button.solid.inline.lg */
  --sl-space-input-option-inline-md: 0px; /** space.button.solid.inline.md */
  --sl-space-input-option-inline-sm: 0px; /** space.button.solid.inline.md */
  --sl-space-input-switch-gap: 0px; /** space.input.switch.padding.gap */
  --sl-space-input-switch-margin-top-lg: 8px; /** space.switch.padding.outer */
  --sl-space-input-switch-margin-top-md: 8px; /** space.switch.padding.outer */
  --sl-space-input-switch-margin-top-sm: 8px; /** space.switch.padding.outer */
  --sl-space-input-switch-margin-top-none: 0px; /** space.switch.padding.outer */
  --sl-space-input-switch-margin-left: 8px; /** space.switch.padding.outer */
  --sl-space-input-switch-margin-bottom-lg: 0px; /** space.switch.padding.outer */
  --sl-space-input-switch-margin-bottom-md: 4px; /** space.switch.padding.outer */
  --sl-space-input-switch-margin-bottom-sm: 0px; /** space.switch.padding.outer */
  --sl-space-input-switch-margin-bottom-none: 0px; /** space.switch.padding.outer */
  --sl-space-input-switch-padding-row-lg: 80px; /** space.switch.padding.outer */
  --sl-space-input-switch-padding-row-md: 64px; /** space.switch.padding.outer */
  --sl-space-input-switch-padding-row-sm: 48px; /** space.switch.padding.outer */
  --sl-space-input-switch-padding-row-none: 0px; /** space.switch.padding.outer */
  --sl-space-input-switch-padding-container: 4px; /** space.switch.padding.outer */
  --sl-space-input-switch-padding-controller: 2px; /** space.switch.padding.outer */
  --sl-space-input-text-field-gap-lg: 8px; /** 8px */
  --sl-space-input-text-field-gap-md: 8px; /** 4px */
  --sl-space-input-text-field-block-lg: 7px; /** space.button.solid.block.lg */
  --sl-space-input-text-field-block-md: 5px; /** space.button.solid.block.md */
  --sl-space-input-text-field-inline-lg: 15px; /** space.button.solid.inline.lg */
  --sl-space-input-text-field-inline-md: 11px; /** space.button.solid.inline.md */
  --sl-space-input-field-label-gap-lg: 8px; /** 8px */
  --sl-space-input-field-label-gap-md: 4px; /** 4px */
  --sl-space-input-field-label-gap-sm: 4px; /** 4px */
  --sl-space-input-field-label-gap-none: 0px; /** 8px */
  --sl-space-input-field-label-icon-lg: 4px; /** 4px */
  --sl-space-input-field-label-icon-md: 2px; /** 4px */
  --sl-space-input-field-label-padding-bottom-lg: 8px; /** 4px */
  --sl-space-input-field-label-padding-bottom-md: 4px; /** 4px */
  --sl-space-input-field-label-padding-bottom-sm: 8px; /** 4px */
  --sl-space-input-field-label-padding-bottom-none: 0px; /** 8px */
  --sl-space-avatar-badge-inset-lg: -4px;
  --sl-space-avatar-badge-inset-md: 0px;
  --sl-space-avatar-badge-inset-sm: -2px;
  --sl-space-avatar-badge-inset-xl: -2px;
  --sl-space-avatar-badge-inset-2xl: -2px;
  --sl-space-avatar-badge-inset-3xl: 2px;
  --sl-space-avatar-badge-inset-4xl: 14px;
  --sl-space-avatar-badge-margin: 2px;
  --sl-space-avatar-block-lg: 8px;
  --sl-space-avatar-block-md: 8px;
  --sl-space-avatar-block-sm: 8px;
  --sl-space-avatar-block-xl: 8px;
  --sl-space-avatar-block-2xl: 8px;
  --sl-space-avatar-block-3xl: 8px;
  --sl-space-avatar-inline-lg: 16px;
  --sl-space-avatar-inline-md: 8px;
  --sl-space-avatar-inline-sm: 8px;
  --sl-space-avatar-inline-xl: 16px;
  --sl-space-avatar-inline-2xl: 16px;
  --sl-space-avatar-inline-3xl: 16px;
  --sl-space-button-gap-lg: 8px; /** 8px */
  --sl-space-button-gap-md: 4px; /** 4px */
  --sl-space-button-gap-sm: 4px; /** 4px */
  --sl-space-button-link-block-lg: 7px; /** space.button.solid.block.lg */
  --sl-space-button-link-block-md: 7px; /** space.button.solid.block.md */
  --sl-space-button-link-block-sm: 3px; /** space.button.solid.block.sm */
  --sl-space-button-link-inline-lg: 0px; /** space.button.solid.inline.lg */
  --sl-space-button-link-inline-md: 0px; /** space.button.solid.inline.md */
  --sl-space-button-link-inline-sm: 0px; /** space.button.solid.inline.sm */
  --sl-space-button-link-icon-only-lg: 7px;
  --sl-space-button-link-icon-only-md: 7px;
  --sl-space-button-link-icon-only-sm: 3px;
  --sl-space-button-ghost-block-lg: 7px; /** space.button.solid.block.lg */
  --sl-space-button-ghost-block-md: 7px; /** space.button.solid.block.md */
  --sl-space-button-ghost-block-sm: 3px; /** space.button.solid.block.sm */
  --sl-space-button-ghost-inline-lg: 23px; /** space.button.solid.inline.lg */
  --sl-space-button-ghost-inline-md: 23px; /** space.button.solid.inline.md */
  --sl-space-button-ghost-inline-sm: 15px; /** space.button.solid.inline.sm */
  --sl-space-button-ghost-icon-only-lg: 7px;
  --sl-space-button-ghost-icon-only-md: 7px;
  --sl-space-button-ghost-icon-only-sm: 3px;
  --sl-space-button-solid-block-lg: 7px; /** space.button.solid.block.lg */
  --sl-space-button-solid-block-md: 7px; /** space.button.solid.block.md */
  --sl-space-button-solid-block-sm: 3px; /** space.button.solid.block.sm */
  --sl-space-button-solid-inline-lg: 23px; /** space.button.solid.inline.lg */
  --sl-space-button-solid-inline-md: 23px; /** space.button.solid.inline.md */
  --sl-space-button-solid-inline-sm: 15px; /** space.button.solid.inline.sm */
  --sl-space-button-solid-icon-only-lg: 7px;
  --sl-space-button-solid-icon-only-md: 7px;
  --sl-space-button-solid-icon-only-sm: 3px;
  --sl-space-button-outline-block-lg: 7px; /** space.button.solid.block.lg */
  --sl-space-button-outline-block-md: 7px; /** space.button.solid.block.md */
  --sl-space-button-outline-block-sm: 3px; /** space.button.solid.block.sm */
  --sl-space-button-outline-inline-lg: 23px; /** space.button.solid.inline.lg */
  --sl-space-button-outline-inline-md: 23px; /** space.button.solid.inline.md */
  --sl-space-button-outline-inline-sm: 15px; /** space.button.solid.inline.sm */
  --sl-space-button-outline-inline-text-only-lg: 30px;
  --sl-space-button-outline-inline-text-only-md: 30px;
  --sl-space-button-outline-icon-only-lg: 7px;
  --sl-space-button-outline-icon-only-md: 7px;
  --sl-space-button-outline-icon-only-sm: 3px;
  --sl-space-dialog-gap-header: 0px; /** space.button.solid.block.md */
  --sl-space-dialog-mobile-body-gap: 16px; /** space.button.solid.block.md */
  --sl-space-dialog-mobile-body-block: 16px; /** space.button.solid.block.md */
  --sl-space-dialog-mobile-body-inline: 16px; /** space.button.solid.block.md */
  --sl-space-dialog-mobile-container-inline: 0px; /** space.button.solid.block.md */
  --sl-space-dialog-mobile-container-padding-top: 48px; /** space.button.solid.block.md */
  --sl-space-dialog-mobile-container-padding-bottom: 0px; /** space.button.solid.block.md */
  --sl-space-dialog-desktop-body-gap: 24px; /** space.dialog.desktop.body.gap */
  --sl-space-dialog-desktop-body-block: 24px; /** space.dialog.desktop.body.block */
  --sl-space-dialog-desktop-body-inline: 24px; /** space.dialog.desktop.body.inline */
  --sl-space-dialog-desktop-container-inline: 24px; /** space.dialog.desktop.container.inline */
  --sl-space-dialog-desktop-container-padding-top: 24px; /** space.dialog.desktop.container.paddingTop */
  --sl-space-dialog-desktop-container-padding-bottom: 24px; /** space.dialog.desktop.container.paddingBottom */
  --sl-space-dialog-message-mobile-container-inline: 100%;
  --sl-space-dialog-message-mobile-container-padding-left: 24px;
  --sl-space-dialog-message-mobile-container-padding-right: 24px;
  --sl-space-dialog-subtitle-padding-bottom: 4px; /** space.button.solid.block.md */
  --sl-space-select-item-gap-lg: 8px; /** 8px */
  --sl-space-select-item-gap-md: 8px; /** 4px */
  --sl-space-select-item-block-lg: 7px; /** space.button.solid.block.lg */
  --sl-space-select-item-block-md: 5px; /** space.button.solid.block.md */
  --sl-space-select-item-inline-lg: 15px; /** space.button.solid.inline.lg */
  --sl-space-select-item-inline-md: 11px; /** space.button.solid.inline.md */
  --sl-space-select-divider-gap-lg: 8px;
  --sl-space-select-divider-gap-md: 8px;
  --sl-space-select-divider-line-lg: 8px;
  --sl-space-select-divider-line-md: 8px;
  --sl-space-select-divider-block-lg: 8px;
  --sl-space-select-divider-block-md: 8px;
  --sl-space-select-divider-inline-lg: 12px;
  --sl-space-select-divider-inline-md: 12px;
  --sl-space-select-listbox-gap-lg: 4px;
  --sl-space-select-listbox-gap-md: 4px;
  --sl-space-select-listbox-block-lg: 7px;
  --sl-space-select-listbox-block-md: 7px;
  --sl-space-select-listbox-inline-lg: 7px;
  --sl-space-select-listbox-inline-md: 7px;
  --sl-space-select-selectbox-gap-lg: 8px; /** 8px */
  --sl-space-select-selectbox-gap-md: 8px; /** 4px */
  --sl-space-select-selectbox-block-lg: 7px; /** space.button.solid.block.lg */
  --sl-space-select-selectbox-block-md: 5px; /** space.button.solid.block.md */
  --sl-space-select-selectbox-inline-lg: 15px; /** space.button.solid.inline.lg */
  --sl-space-select-selectbox-inline-md: 11px; /** space.button.solid.inline.md */
  --sl-space-popover-gap: 4px; /** space.popover.gap */
  --sl-space-popover-block: 8px; /** space.button.solid.block.md */
  --sl-space-popover-links-gap: 8px;
  --sl-space-popover-links-block: 4px;
  --sl-space-popover-inline: 12px; /** space.button.solid.inline.md */
  --sl-space-popover-offset: 4px;
  --sl-space-popover-arrow-offset: 16px;
  --sl-space-tooltip-gap: 4px;
  --sl-space-tooltip-block: 8px; /** space.button.solid.block.md */
  --sl-space-tooltip-inline: 8px; /** space.button.solid.inline.md */
  --sl-space-tooltip-offset: 4px;
  --sl-space-tooltip-arrow-offset: 8px;
  --sl-space-button-bar-gap-default-block: 8px;
  --sl-space-button-bar-gap-default-inline: 8px;
  --sl-space-button-bar-gap-ghost-icon-block: 4px;
  --sl-space-button-bar-gap-ghost-icon-inline: 4px;
  --sl-space-paginator-gap: 8px;
  --sl-space-breadcrumb-gap-full: 16px;
  --sl-space-breadcrumb-gap-home: 4px;
  --sl-space-breadcrumb-gap-short: 8px;
  --sl-space-progressbar-vertical-gap: 8px;
  --sl-space-progressbar-horizontal-gap: 16px;
  --sl-space-inline-message-gap: 16px;
  --sl-space-inline-message-block: 12px; /** space.inline-message.block.md */
  --sl-space-inline-message-inline-end: 12px; /** space.inline-message.inline.end */
  --sl-space-inline-message-inline-start: 20px; /** space.inline-message.inline.start */
  --sl-space-inline-message-content-gap: 4px;
  --sl-space-010: 1px;
  --sl-space-025: 2px;
  --sl-space-050: 4px;
  --sl-space-075: 6px;
  --sl-space-full: 50rem;
  --sl-space-accordion-gap: 12px;
  --sl-space-accordion-block: 16px;
  --sl-space-accordion-title-gap: 8px;
  --sl-space-accordion-title-block: 16px;
  --sl-space-accordion-title-inline: 8px;
  --sl-space-accordion-inline: 40px;
  --sl-space-accordion-content-block: 16px;
  --sl-space-accordion-content-inline: 40px;
  --sl-space-offset-default: 6px; /** Defines the standard spacing offset. */
  --sl-border-width-lg: 4px; /** border.width.lg */
  --sl-border-width-md: 3px; /** border.width.md */
  --sl-border-width-sm: 2px; /** border.width.sm */
  --sl-border-width-xl: 5px; /** border.width.xl */
  --sl-border-width-xs: 1px; /** border.width.xs */
  --sl-border-width-2xl: 6px; /** border.width.2xl */
  --sl-border-width-2xs: 0.5px; /** 2xs */
  --sl-border-width-card-border: 1px;
  --sl-border-width-none: 0px; /** border.width.none */
  --sl-border-width-slds-checklist: 1px;
  --sl-border-width-input-none: 0px; /** border.width.button.default */
  --sl-border-width-input-border: 1px; /** border.width.button.outline */
  --sl-border-width-input-option: 1px; /** border.width.button.outline */
  --sl-border-width-border-tab: 1px;
  --sl-border-width-border-tabbar: 1px;
  --sl-border-width-button-link: 1px; /** border.width.button.link */
  --sl-border-width-button-ghost: 1px; /** border.width.button.ghost */
  --sl-border-width-button-solid: 1px; /** border.width.button.solid */
  --sl-border-width-button-outline: 1px; /** border.width.button.outline */
  --sl-border-width-dialog-default: 0px;
  --sl-border-width-select-listbox: 1px; /** border.width.button.default */
  --sl-border-width-divider: 1px;
  --sl-border-width-popover-none: 0px; /** border.width.button.default */
  --sl-border-width-popover-border: 1px; /** border.width.button.outline */
  --sl-border-width-tooltip-none: 0px; /** border.width.button.default */
  --sl-border-width-tooltip-border: 1px; /** border.width.button.outline */
  --sl-border-width-focusring-inside: 1px;
  --sl-border-width-focusring-offset: 2px;
  --sl-border-width-focusring-default: 2px;
  --sl-border-width-inline-message-start: 4px;
  --sl-border-width-inline-message-default: 1px;
  --sl-border-radius-lg: 12px; /** border.radius.lg */
  --sl-border-radius-md: 10px; /** border.radius.md */
  --sl-border-radius-sm: 8px; /** border.radius.sm */
  --sl-border-radius-xl: 14px; /** border.radius.xl */
  --sl-border-radius-xs: 6px; /** border.radius.xs */
  --sl-border-radius-2xl: 16px;
  --sl-border-radius-2xs: 4px; /** border.radius.2xs */
  --sl-border-radius-3xl: 18px; /** border.radius.3xl */
  --sl-border-radius-3xs: 2px; /** border.radius.3xs */
  --sl-border-radius-full: 50rem; /** border.radius.full */
  --sl-border-radius-none: 0; /** border.radius.none */
  --sl-button-label-lg: 24pxpx;
  --sl-button-label-md: 16pxpx;
  --sl-button-label-sm: 16pxpx;
  --sl-opacity-50: 0.02; /** opacity.50 */
  --sl-opacity-100: 0.04; /** opacity.100 */
  --sl-opacity-150: 0.06; /** opacity.150 */
  --sl-opacity-200: 0.08; /** opacity.200 */
  --sl-opacity-300: 0.12; /** opacity.300 */
  --sl-opacity-400: 0.16; /** opacity.400 */
  --sl-opacity-500: 0.2; /** opacity.500 */
  --sl-opacity-600: 0.32; /** opacity.600 */
  --sl-opacity-700: 0.48; /** opacity.700 */
  --sl-opacity-800: 0.64; /** opacity.800 */
  --sl-opacity-900: 0.8; /** opacity.900 */
  --sl-opacity-1000: 1; /** opacity.1000 */
  --sl-opacity-transparent: 0; /** opacity.transparent */
  --sl-opacity-spinner-shadow: 0.32;
  --sl-opacity-bold: 1;
  --sl-opacity-muted: 0;
  --sl-opacity-subtle: 0.2;
  --sl-opacity-moderate: 0.8;
  --sl-opacity-subtlest: 0.1;
  --sl-opacity-interactive-bold-idle: 0;
  --sl-opacity-interactive-bold-hover: 0.2;
  --sl-opacity-interactive-bold-active: 0.4;
  --sl-opacity-interactive-plain-idle: 0;
  --sl-opacity-interactive-plain-hover: 0.15;
  --sl-opacity-interactive-plain-active: 0.25;
  --sl-opacity-interactive-reversed-idle: 0.8;
  --sl-opacity-interactive-reversed-hover: 0.9;
  --sl-opacity-interactive-reversed-active: 1;
  --sl-animation-easing-ease-in-out: ease-in-out; /** animation.easing.ease-in-out */
  --sl-animation-duration-fast: 90ms; /** animation.duration.fast */
  --sl-animation-duration-slow: 500ms; /** animation.duration.slow */
  --sl-animation-duration-normal: 200ms; /** animation.duration.normal */
  --sl-animation-button-easing: ease-in-out; /** animation.button.easing */
  --sl-animation-button-duration: 200ms; /** animation.button.duration */
  --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(122, 129, 142, 0.02), 0 4px 8px 0 rgba(122, 129, 142, 0.06);
  --sl-box-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0); /** boxShadow.none */
  --sl-box-shadow-focus: 0 0 0 3px rgba(119, 188, 255, 0.64); /** boxShadow.focus */
  --sl-elevation-shadow-lg: 0 0 4px 0 rgba(122, 129, 142, 0.04), 0 8px 16px 0 rgba(122, 129, 142, 0.08);
  --sl-elevation-shadow-md: 0 0 4px 0 rgba(122, 129, 142, 0.02), 0 4px 8px 0 rgba(122, 129, 142, 0.06);
  --sl-elevation-shadow-sm: 0 0 6px 0 rgba(122, 129, 142, 0.02), 0 2px 4px 0 rgba(122, 129, 142, 0.08);
  --sl-elevation-shadow-none: 0 0 0 0 rgba(122, 129, 142, 0);
  --sl-elevation-shadow-overlay: 0 6px 12px -3px rgba(29, 31, 32, 4%), 0 12px 16px rgba(29, 31, 32, 12%);
  --sl-elevation-shadow-overflow: 0 0 16px rgba(29, 31, 32, 16%);
  --sl-elevation-surface-base-default: #ffffff; /** The default, flat surface level. Used for primary content backgrounds or non-interactive UI regions. */
  --sl-elevation-surface-raised-sunken: #f4f5fa; /** Background for components that create a sunken effect, typically used for grouping related items. */
  --sl-elevation-surface-raised-default: #ffffff; /** Background of elevated components like cards, grids, or dropdowns that sit on top of the base surface. Use in combination with 'elevation.shadow.raised'. */
  --sl-elevation-surface-raised-inverted: #1d1f20; /** Background of elevated components with an inverted background color like tooltips that sit on top of the base surface. Use in combination with 'elevation.shadow.raised'. */
  --sl-elevation-surface-raised-alternative: #ececf1; /** An alternate surface color used for visual differentiation in components like tables or lists, providing contrast between consecutive items (e.g., zebra striping). */
  --sl-elevation-surface-shadow: #1d1f20; /** Used as color for shadows. */
  --sl-border-radius-focusring-full: 50rem;
  --sl-border-radius-focusring-inside: 3px;
  --sl-border-radius-focusring-default: 5px;
  --sl-border-radius-focusring-checkbox: 3px;
  --sl-border-radius-card-default: 4px;
  --sl-border-radius-card-image-margin: 4px;
  --sl-border-radius-badge-full: 50rem;
  --sl-border-radius-avatar-square: 4px;
  --sl-border-radius-button-lg: 4px; /** borderRadius.button */
  --sl-border-radius-button-md: 4px; /** borderRadius.button */
  --sl-border-radius-button-sm: 4px; /** borderRadius.button */
  --sl-border-radius-button-icon-only-lg: 4px; /** borderRadius.button */
  --sl-border-radius-button-icon-only-md: 4px; /** borderRadius.button */
  --sl-border-radius-button-icon-only-sm: 4px; /** borderRadius.button */
  --sl-border-radius-circle: 50rem; /** borderRadius.button */
  --sl-border-radius-dialog-mobile: 0;
  --sl-border-radius-dialog-desktop: 4px;
  --sl-border-radius-select-item: 2px;
  --sl-border-radius-select-listbox: 4px;
  --sl-border-radius-default: 4px; /** borderRadius.button */
  --sl-border-radius-popover-default: 4px; /** borderRadius.button */
  --sl-border-radius-checkbox: 2px;
  --sl-border-radius-skeleton-default: 4px;
  --sl-border-radius-inline-message-default: 4px; /** borderRadius.button */
  --sl-flex-direction-row: row;
  --sl-flex-direction-column: column;
  --sl-flex-direction-row-reverse: row-reverse;
  --sl-flex-direction-column-reverse: column-reverse;
  --sl-justify-content-end: end;
  --sl-justify-content-start: start;
  --sl-justify-content-space-between: space-between;
  --sl-color-black: #000000; /** Solid black */
  --sl-color-white: #ffffff; /** Solid White */
  --sl-color-shadow-overlay1: rgba(29, 31, 32, 4%);
  --sl-color-shadow-overlay2: rgba(29, 31, 32, 12%);
  --sl-color-shadow-overflow1: rgba(29, 31, 32, 16%);
  --sl-color-transparent: rgba(0, 0, 0, 0);
  --sl-color-palette-info-50: #e5f2fb; /** color.palette.info.50 */
  --sl-color-palette-info-100: #bedfff; /** color.palette.info.100 */
  --sl-color-palette-info-150: #a3d2ff; /** color.palette.info.150 */
  --sl-color-palette-info-200: #8dc7ff; /** color.palette.info.200 */
  --sl-color-palette-info-300: #77bcff; /** color.palette.info.300 */
  --sl-color-palette-info-400: #53a5e5; /** color.palette.info.400 */
  --sl-color-palette-info-500: #4589be; /** color.palette.info.500 */
  --sl-color-palette-info-600: #175d79; /** color.palette.info.600 */
  --sl-color-palette-info-700: #1a4a66; /** color.palette.info.700 */
  --sl-color-palette-info-800: #1b364b; /** color.palette.info.800 */
  --sl-color-palette-info-900: #0d1a24; /** color.palette.info.900 */
  --sl-color-palette-info-base: #53a5e5; /** color.palette.info.base */
  --sl-color-palette-black-base: #02242e; /** color.palette.black.base */
  --sl-color-palette-white-base: #ffffff; /** color.palette.white.base */
  --sl-color-palette-accent-50: #e5f2fb; /** color.palette.accent.50 */
  --sl-color-palette-accent-100: #bedfff; /** color.palette.accent.100 */
  --sl-color-palette-accent-150: #a3d2ff; /** color.palette.accent.150 */
  --sl-color-palette-accent-200: #8dc7ff; /** color.palette.accent.200 */
  --sl-color-palette-accent-300: #77bcff; /** color.palette.accent.300 */
  --sl-color-palette-accent-400: #53a5e5; /** color.palette.accent.400 */
  --sl-color-palette-accent-500: #4589be; /** color.palette.accent.500 */
  --sl-color-palette-accent-600: #175d79; /** color.palette.accent.600 */
  --sl-color-palette-accent-700: #1a4a66; /** color.palette.accent.700 */
  --sl-color-palette-accent-800: #1b364b; /** color.palette.accent.800 */
  --sl-color-palette-accent-900: #0d1a24; /** color.palette.accent.900 */
  --sl-color-palette-accent-base: #53a5e5; /** color.palette.accent.base */
  --sl-color-palette-danger-50: #ffd8da; /** color.palette.danger.50 */
  --sl-color-palette-danger-100: #f9c1c6; /** color.palette.danger.100 */
  --sl-color-palette-danger-150: #f6a1a9; /** color.palette.danger.150 */
  --sl-color-palette-danger-200: #f3818c; /** color.palette.danger.200 */
  --sl-color-palette-danger-300: #f0707d; /** color.palette.danger.300 */
  --sl-color-palette-danger-400: #ed4151; /** color.palette.danger.400 */
  --sl-color-palette-danger-500: #c53643; /** color.palette.danger.500 */
  --sl-color-palette-danger-600: #9d2b36; /** color.palette.danger.600 */
  --sl-color-palette-danger-700: #902101; /** color.palette.danger.700 */
  --sl-color-palette-danger-800: #4d151a; /** color.palette.danger.800 */
  --sl-color-palette-danger-900: #250a0d; /** color.palette.danger.900 */
  --sl-color-palette-danger-base: #ed4151; /** color.palette.danger.base */
  --sl-color-palette-neutral-50: #f4f5fa; /** color.palette.neutral.50 */
  --sl-color-palette-neutral-100: #ececf1; /** color.palette.neutral.100 */
  --sl-color-palette-neutral-150: #e2e3e9; /** color.palette.neutral.150 */
  --sl-color-palette-neutral-200: #d8d8dd; /** color.palette.neutral.200 */
  --sl-color-palette-neutral-300: #c8c8cf; /** color.palette.neutral.300 */
  --sl-color-palette-neutral-400: #afb6c5; /** color.palette.neutral.400 */
  --sl-color-palette-neutral-500: #9198a7; /** color.palette.neutral.500 */
  --sl-color-palette-neutral-600: #7a818e; /** color.palette.neutral.600 */
  --sl-color-palette-neutral-700: #585c61; /** color.palette.neutral.700 */
  --sl-color-palette-neutral-800: #3d4047; /** color.palette.neutral.800 */
  --sl-color-palette-neutral-900: #1d1f20; /** color.palette.neutral.900 */
  --sl-color-palette-neutral-base: #7a818e; /** color.palette.neutral.base */
  --sl-color-palette-primary-50: #dcf1f0; /** color.palette.primary.50 */
  --sl-color-palette-primary-100: #b9e3e1; /** color.palette.primary.100 */
  --sl-color-palette-primary-150: #97d4d2; /** color.palette.primary.150 */
  --sl-color-palette-primary-200: #74c6c3; /** color.palette.primary.200 */
  --sl-color-palette-primary-300: #51b8b4; /** color.palette.primary.300 */
  --sl-color-palette-primary-400: #18a19b; /** color.palette.primary.400 */
  --sl-color-palette-primary-500: #006666; /** color.palette.primary.500 */
  --sl-color-palette-primary-600: #005252; /** color.palette.primary.600 */
  --sl-color-palette-primary-700: #003d3d; /** color.palette.primary.700 */
  --sl-color-palette-primary-800: #002929; /** color.palette.primary.800 */
  --sl-color-palette-primary-900: #001414; /** color.palette.primary.900 */
  --sl-color-palette-primary-base: #18a19b; /** color.palette.primary.base */
  --sl-color-palette-success-50: #daefe3; /** color.palette.success.50 */
  --sl-color-palette-success-100: #b3dfc4; /** color.palette.success.100 */
  --sl-color-palette-success-150: #8bcea6;
  --sl-color-palette-success-200: #63bd88; /** color.palette.success.200 */
  --sl-color-palette-success-300: #3cad69; /** color.palette.success.300 */
  --sl-color-palette-success-400: #149c4b; /** color.palette.success.400 */
  --sl-color-palette-success-500: #11823e; /** color.palette.success.500 */
  --sl-color-palette-success-600: #0d6732; /** color.palette.success.600 */
  --sl-color-palette-success-700: #0a4d25; /** color.palette.success.700 */
  --sl-color-palette-success-800: #073318; /** color.palette.success.800 */
  --sl-color-palette-success-900: #03180c; /** color.palette.success.900 */
  --sl-color-palette-success-base: #149c4b; /** color.palette.success.base */
  --sl-color-palette-warning-50: #fedcc2; /** color.palette.warning.50 */
  --sl-color-palette-warning-100: #ffcda7; /** color.palette.warning.100 */
  --sl-color-palette-warning-150: #ffd976; /** color.palette.warning.150 */
  --sl-color-palette-warning-200: #ffd056; /** color.palette.warning.200 */
  --sl-color-palette-warning-300: #ffc53f; /** color.palette.warning.300 */
  --sl-color-palette-warning-400: #ffb200; /** color.palette.warning.400 */
  --sl-color-palette-warning-500: #fd8b35; /** color.palette.warning.500 */
  --sl-color-palette-warning-600: #ca6f2a; /** color.palette.warning.600 */
  --sl-color-palette-warning-700: #985320; /** color.palette.warning.700 */
  --sl-color-palette-warning-800: #653815; /** color.palette.warning.800 */
  --sl-color-palette-warning-900: #331c0b; /** color.palette.warning.900 */
  --sl-color-palette-warning-base: #ffb200; /** color.palette.warning.base */
  --sl-color-palette-transparent-base: rgba(0, 0, 0, 0); /** color.palette.transparent.base */
  --sl-color-palette-red-100: #f9c1c6;
  --sl-color-palette-red-150: #f6a1a9;
  --sl-color-palette-red-200: #f3818c;
  --sl-color-palette-red-300: #f0707d;
  --sl-color-palette-red-400: #ed4151;
  --sl-color-palette-red-500: #c53643;
  --sl-color-palette-red-600: #9d2b36;
  --sl-color-palette-red-700: #902101;
  --sl-color-palette-red-800: #4d151a;
  --sl-color-palette-red-900: #250a0d;
  --sl-color-palette-red-050: #ffd8da;
  --sl-color-palette-blue-100: #bedfff;
  --sl-color-palette-blue-150: #a3d2ff;
  --sl-color-palette-blue-200: #8dc7ff;
  --sl-color-palette-blue-300: #77bcff;
  --sl-color-palette-blue-400: #53a5e5;
  --sl-color-palette-blue-500: #4589be;
  --sl-color-palette-blue-600: #175d79;
  --sl-color-palette-blue-700: #1a4a66;
  --sl-color-palette-blue-800: #1b364b;
  --sl-color-palette-blue-900: #0d1a24;
  --sl-color-palette-blue-050: #e5f2fb;
  --sl-color-palette-grey-100: #ececf1;
  --sl-color-palette-grey-150: #e2e3e9;
  --sl-color-palette-grey-200: #d8d8dd;
  --sl-color-palette-grey-300: #c8c8cf;
  --sl-color-palette-grey-400: #afb6c5;
  --sl-color-palette-grey-500: #9198a7;
  --sl-color-palette-grey-600: #7a818e;
  --sl-color-palette-grey-700: #585c61;
  --sl-color-palette-grey-800: #3d4047;
  --sl-color-palette-grey-900: #1d1f20;
  --sl-color-palette-grey-000: #ffffff;
  --sl-color-palette-grey-050: #f4f5fa;
  --sl-color-palette-teal-100: #cef9f3;
  --sl-color-palette-teal-150: #9df2e8;
  --sl-color-palette-teal-200: #64e4d8;
  --sl-color-palette-teal-300: #34cdc4;
  --sl-color-palette-teal-400: #18a19b;
  --sl-color-palette-teal-500: #128f8c;
  --sl-color-palette-teal-600: #137271;
  --sl-color-palette-teal-700: #145b5b;
  --sl-color-palette-teal-800: #154c4c;
  --sl-color-palette-teal-900: #062b2d;
  --sl-color-palette-teal-050: #f1fcfb;
  --sl-color-palette-green-100: #b3dfc4;
  --sl-color-palette-green-150: #8bcea6;
  --sl-color-palette-green-200: #63bd88;
  --sl-color-palette-green-300: #3cad69;
  --sl-color-palette-green-400: #149c4b;
  --sl-color-palette-green-500: #11823e;
  --sl-color-palette-green-600: #0d6732;
  --sl-color-palette-green-700: #0a4d25;
  --sl-color-palette-green-800: #073318;
  --sl-color-palette-green-900: #03180c;
  --sl-color-palette-green-050: #daefe3;
  --sl-color-palette-orange-100: #fff0d4;
  --sl-color-palette-orange-150: #ffdda8;
  --sl-color-palette-orange-200: #ffc471;
  --sl-color-palette-orange-300: #ff9d33;
  --sl-color-palette-orange-400: #fe8211;
  --sl-color-palette-orange-500: #ef6707;
  --sl-color-palette-orange-600: #c64c08;
  --sl-color-palette-orange-700: #9d3d0f;
  --sl-color-palette-orange-800: #7e3410;
  --sl-color-palette-orange-900: #441706;
  --sl-color-palette-orange-050: #fff8ed;
  --sl-color-palette-purple-100: #ece7ff;
  --sl-color-palette-purple-150: #d9d2ff;
  --sl-color-palette-purple-200: #bfaeff;
  --sl-color-palette-purple-300: #9f80ff;
  --sl-color-palette-purple-400: #824dff;
  --sl-color-palette-purple-500: #7b33ff;
  --sl-color-palette-purple-600: #6616eb;
  --sl-color-palette-purple-700: #5512c5;
  --sl-color-palette-purple-800: #4711a1;
  --sl-color-palette-purple-900: #29076e;
  --sl-color-palette-purple-050: #f4f2ff;
  --sl-color-palette-yellow-100: #fff8c5;
  --sl-color-palette-yellow-150: #fff285;
  --sl-color-palette-yellow-200: #ffe446;
  --sl-color-palette-yellow-300: #ffd31b;
  --sl-color-palette-yellow-400: #ffb200;
  --sl-color-palette-yellow-500: #e28800;
  --sl-color-palette-yellow-600: #bb5f02;
  --sl-color-palette-yellow-700: #984908;
  --sl-color-palette-yellow-800: #7c3c0b;
  --sl-color-palette-yellow-900: #481d00;
  --sl-color-palette-yellow-050: #fffdea;
  --sl-color-tab-hover-border: #c8c8cf;
  --sl-color-tab-hover-background: #e5f2fb;
  --sl-color-tab-hover-foreground: #02242e;
  --sl-color-tab-active-border: #c8c8cf;
  --sl-color-tab-active-background: #bedfff;
  --sl-color-tab-active-foreground: #02242e;
  --sl-color-tab-tabbar-border: #c8c8cf;
  --sl-color-tab-tabbar-background: #ffffff;
  --sl-color-tab-tabbar-foreground: #02242e;
  --sl-color-tab-content-background: #ffffff;
  --sl-color-tab-content-foreground: #02242e;
  --sl-color-tab-default-border: #c8c8cf;
  --sl-color-tab-default-indicator: #4589be;
  --sl-color-tab-default-background: #ffffff;
  --sl-color-tab-default-foreground: #02242e;
  --sl-color-tab-disabled-border: #c8c8cf;
  --sl-color-tab-disabled-background: #ffffff;
  --sl-color-tab-disabled-foreground: #9198a7;
  --sl-color-tag-bold-idle-border: #1a4a66;
  --sl-color-tag-bold-idle-background: #175d79;
  --sl-color-tag-bold-idle-foreground: #ffffff;
  --sl-color-tag-bold-close-hover-border: #1a4a66;
  --sl-color-tag-bold-close-hover-background: #1a4a66;
  --sl-color-tag-bold-close-hover-foreground: #ffffff;
  --sl-color-tag-bold-close-active-border: #1b364b;
  --sl-color-tag-bold-close-active-background: #1b364b;
  --sl-color-tag-bold-close-active-foreground: #ffffff;
  --sl-color-tag-bold-hover-border: #1b364b;
  --sl-color-tag-bold-hover-background: #1a4a66;
  --sl-color-tag-bold-hover-foreground: #ffffff;
  --sl-color-tag-bold-active-border: #a3d2ff;
  --sl-color-tag-bold-active-background: #bedfff;
  --sl-color-tag-bold-active-foreground: #175d79;
  --sl-color-tag-bold-disabled-border: #afb6c5;
  --sl-color-tag-bold-disabled-background: #c8c8cf;
  --sl-color-tag-bold-disabled-foreground: #ececf1;
  --sl-color-tag-subtle-idle-border: #a3d2ff;
  --sl-color-tag-subtle-idle-background: #bedfff;
  --sl-color-tag-subtle-idle-foreground: #175d79;
  --sl-color-tag-subtle-close-hover-border: #a3d2ff;
  --sl-color-tag-subtle-close-hover-background: #a3d2ff;
  --sl-color-tag-subtle-close-hover-foreground: #175d79;
  --sl-color-tag-subtle-close-active-border: #8dc7ff;
  --sl-color-tag-subtle-close-active-background: #8dc7ff;
  --sl-color-tag-subtle-close-active-foreground: #175d79;
  --sl-color-tag-subtle-hover-border: #8dc7ff;
  --sl-color-tag-subtle-hover-background: #a3d2ff;
  --sl-color-tag-subtle-hover-foreground: #175d79;
  --sl-color-tag-subtle-active-border: #1a4a66;
  --sl-color-tag-subtle-active-background: #175d79;
  --sl-color-tag-subtle-active-foreground: #ffffff;
  --sl-color-tag-subtle-disabled-border: #e2e3e9;
  --sl-color-tag-subtle-disabled-background: #ececf1;
  --sl-color-tag-subtle-disabled-foreground: #c8c8cf;
  --sl-color-card-border: #c8c8cf;
  --sl-color-card-background: #ffffff;
  --sl-color-card-foreground: #02242e;
  --sl-color-href-idle-foreground: #585c61; /** color.button.default.outline.idle.foreground */
  --sl-color-href-hover-foreground: #3d4047; /** color.button.default.outline.hover.foreground */
  --sl-color-href-active-foreground: #1d1f20; /** color.button.primary.outline.active.foreground */
  --sl-color-href-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-badge-bold-info-background: #175d79;
  --sl-color-badge-bold-info-foreground: #ffffff;
  --sl-color-badge-bold-accent-background: #175d79;
  --sl-color-badge-bold-accent-foreground: #ffffff;
  --sl-color-badge-bold-danger-background: #c53643;
  --sl-color-badge-bold-danger-foreground: #ffffff;
  --sl-color-badge-bold-neutral-background: #585c61;
  --sl-color-badge-bold-neutral-foreground: #ffffff;
  --sl-color-badge-bold-primary-background: #006666;
  --sl-color-badge-bold-primary-foreground: #ffffff;
  --sl-color-badge-bold-success-background: #11823e;
  --sl-color-badge-bold-success-foreground: #ffffff;
  --sl-color-badge-bold-warning-background: #ffb200;
  --sl-color-badge-bold-warning-foreground: #02242e;
  --sl-color-badge-subtle-info-background: #e5f2fb;
  --sl-color-badge-subtle-info-foreground: #175d79;
  --sl-color-badge-subtle-accent-background: #e5f2fb;
  --sl-color-badge-subtle-accent-foreground: #175d79;
  --sl-color-badge-subtle-danger-background: #ffd8da;
  --sl-color-badge-subtle-danger-foreground: #9d2b36;
  --sl-color-badge-subtle-neutral-background: #e2e3e9;
  --sl-color-badge-subtle-neutral-foreground: #585c61;
  --sl-color-badge-subtle-primary-background: #dcf1f0;
  --sl-color-badge-subtle-primary-foreground: #006666;
  --sl-color-badge-subtle-success-background: #daefe3;
  --sl-color-badge-subtle-success-foreground: #0d6732;
  --sl-color-badge-subtle-warning-background: #fedcc2;
  --sl-color-badge-subtle-warning-foreground: #985320;
  --sl-color-input-helper-icon-default: #585c61; /** color.surface.solid.primary.foreground */
  --sl-color-input-helper-icon-invalid: #9d2b36; /** color.surface.solid.primary.foreground */
  --sl-color-input-helper-icon-disabled: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-helper-text-default: #585c61; /** color.surface.solid.primary.foreground */
  --sl-color-input-helper-text-invalid: #9d2b36; /** color.surface.solid.primary.foreground */
  --sl-color-input-helper-text-disabled: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-checked-focus-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-checked-focus-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-focus-background: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-hover-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-checked-hover-border: #11823e; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-hover-background: #11823e; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-active-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-checked-active-border: #0d6732; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-active-background: #0d6732; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-default-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-checked-default-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-default-background: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-disabled-icon: #9198a7; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-disabled-label: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-checked-disabled-border: #e2e3e9; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-checked-disabled-background: #e2e3e9; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-focus-icon: #11823e; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-unchecked-focus-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-focus-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-hover-icon: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-unchecked-hover-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-hover-background: #daefe3; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-active-icon: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-unchecked-active-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-active-background: #b3dfc4; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-default-icon: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-unchecked-default-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-default-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-disabled-icon: #8bcea6; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-disabled-label: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-valid-unchecked-disabled-border: #9198a7; /** color.surface.solid.primary.background */
  --sl-color-input-option-valid-unchecked-disabled-background: #ececf1; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-focus-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-checked-focus-border: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-focus-background: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-hover-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-checked-hover-border: #175d79; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-hover-background: #175d79; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-active-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-checked-active-border: #1a4a66; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-active-background: #1a4a66; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-default-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-checked-default-border: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-default-background: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-disabled-icon: #9198a7; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-disabled-label: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-checked-disabled-border: #e2e3e9; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-checked-disabled-background: #e2e3e9; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-focus-icon: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-unchecked-focus-border: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-focus-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-hover-icon: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-unchecked-hover-border: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-hover-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-active-icon: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-unchecked-active-border: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-active-background: #e5f2fb; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-default-icon: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-unchecked-default-border: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-default-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-disabled-icon: #d8d8dd; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-disabled-label: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-default-unchecked-disabled-border: #9198a7; /** color.surface.solid.primary.background */
  --sl-color-input-option-default-unchecked-disabled-background: #ececf1; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-focus-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-checked-focus-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-focus-background: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-hover-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-checked-hover-border: #c53643; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-hover-background: #c53643; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-active-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-checked-active-border: #9d2b36; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-active-background: #9d2b36; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-default-icon: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-checked-default-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-default-background: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-disabled-icon: #9198a7; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-disabled-label: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-checked-disabled-border: #e2e3e9; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-checked-disabled-background: #e2e3e9; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-focus-icon: #f0707d; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-unchecked-focus-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-focus-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-hover-icon: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-unchecked-hover-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-hover-background: #ffd8da; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-active-icon: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-unchecked-active-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-active-background: #f9c1c6; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-default-icon: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-unchecked-default-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-default-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-disabled-icon: #f6a1a9; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-disabled-label: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-option-invalid-unchecked-disabled-border: #9198a7; /** color.surface.solid.primary.background */
  --sl-color-input-option-invalid-unchecked-disabled-background: #ececf1; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-focus-icon: #4589be; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-checked-focus-text: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-focus-handle: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-focus-background: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-hover-icon: #175d79; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-checked-hover-text: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-hover-handle: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-hover-background: #175d79; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-active-icon: #1a4a66; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-checked-active-text: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-active-handle: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-active-background: #1a4a66; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-default-icon: #4589be; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-checked-default-text: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-default-handle: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-default-background: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-disabled-icon: #afb6c5; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-checked-disabled-text: #9198a7; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-disabled-handle: #ececf1; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-checked-disabled-background: #afb6c5; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-focus-icon: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-unchecked-focus-text: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-focus-handle: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-focus-background: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-hover-icon: #585c61; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-unchecked-hover-text: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-hover-handle: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-hover-background: #585c61; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-active-icon: #3d4047; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-unchecked-active-text: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-active-handle: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-active-background: #3d4047; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-default-icon: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-unchecked-default-text: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-default-handle: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-default-background: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-disabled-icon: #afb6c5; /** color.surface.solid.primary.foreground */
  --sl-color-input-switch-default-unchecked-disabled-text: #9198a7; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-disabled-handle: #ececf1; /** color.surface.solid.primary.background */
  --sl-color-input-switch-default-unchecked-disabled-background: #afb6c5; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-focus-icon: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-valid-focus-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-focus-input-text: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-focus-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-hover-icon: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-valid-hover-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-hover-input-text: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-hover-background: #daefe3; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-active-icon: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-valid-active-border: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-active-input-text: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-active-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-default-icon: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-valid-default-border: #149c4b; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-default-input-text: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-default-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-disabled-icon: #d8d8dd; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-disabled-label: #c8c8cf; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-valid-disabled-border: #d8d8dd; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-disabled-input-text: #c8c8cf; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-valid-disabled-background: #f4f5fa; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-focus-icon: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-focus-border: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-focus-input-text: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-focus-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-focus-placeholder: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-hover-icon: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-hover-border: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-hover-input-text: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-hover-background: #e5f2fb; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-hover-placeholder: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-active-icon: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-active-border: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-active-input-text: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-active-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-active-placeholder: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-default-icon: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-default-border: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-default-input-text: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-default-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-default-placeholder: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-disabled-icon: #d8d8dd; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-disabled-label: #c8c8cf; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-disabled-border: #d8d8dd; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-disabled-input-text: #c8c8cf; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-default-disabled-background: #f4f5fa; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-default-disabled-placeholder: #c8c8cf; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-invalid-focus-icon: #9d2b36; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-focus-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-invalid-focus-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-focus-input-text: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-focus-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-focus-placeholder: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-hover-icon: #9d2b36; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-hover-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-invalid-hover-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-hover-input-text: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-hover-background: #ffd8da; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-hover-placeholder: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-active-icon: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-active-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-invalid-active-border: #4589be; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-active-input-text: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-active-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-active-placeholder: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-default-icon: #9d2b36; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-default-label: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-invalid-default-border: #ed4151; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-default-input-text: #02242e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-default-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-default-placeholder: #7a818e; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-disabled-icon: #d8d8dd; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-disabled-label: #c8c8cf; /** color.surface.solid.primary.foreground */
  --sl-color-input-text-field-invalid-disabled-border: #d8d8dd; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-disabled-input-text: #c8c8cf; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-disabled-background: #f4f5fa; /** color.surface.solid.primary.background */
  --sl-color-input-text-field-invalid-disabled-placeholder: #c8c8cf; /** color.surface.solid.primary.background */
  --sl-color-input-field-label-hint-default: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-hint-invalid: #9d2b36; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-hint-disabled: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-icon-default: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-icon-invalid: #9d2b36; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-icon-disabled: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-text-default: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-text-invalid: #9d2b36; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-text-disabled: #9198a7; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-focus-border: rgba(0, 0, 0, 0); /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-focus-background: rgba(255, 255, 255, 0.04); /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-focus-foreground: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-hover-border: rgba(0, 0, 0, 0); /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-hover-background: #bedfff; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-hover-foreground: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-panel-bacground: #ffffff;
  --sl-color-input-field-label-select-panel-bacground-copy: #ececf1;
  --sl-color-input-field-label-select-active-border: rgba(0, 0, 0, 0); /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-active-background: #53a5e5; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-active-foreground: #ffffff; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-default-border: rgba(0, 0, 0, 0); /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-default-background: rgba(0, 0, 0, 0); /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-default-foreground: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-divider-line: #ececf1;
  --sl-color-input-field-label-select-disabled-border: rgba(0, 0, 0, 0); /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-disabled-background: rgba(0, 0, 0, 0); /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-disabled-foreground: #d8d8dd; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-selected-border: #53a5e5; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-selected-background: #e5f2fb; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-selected-foreground: #7a818e; /** color.surface.solid.primary.foreground */
  --sl-color-input-field-label-select-group-title-foreground: #c8c8cf;
  --sl-color-avatar-header: #02242e;
  --sl-color-avatar-subheader: #585c61;
  --sl-color-avatar-background: #006666;
  --sl-color-avatar-foreground: #ffffff;
  --sl-color-button-info-link-idle-border: rgba(0, 0, 0, 0); /** color.button.info.outline.idle.border */
  --sl-color-button-info-link-idle-background: rgba(0, 0, 0, 0); /** color.button.info.outline.idle.background */
  --sl-color-button-info-link-idle-foreground: #175d79; /** color.button.info.outline.idle.foreground */
  --sl-color-button-info-link-hover-border: rgba(0, 0, 0, 0); /** color.button.info.outline.hover.border */
  --sl-color-button-info-link-hover-background: rgba(0, 0, 0, 0); /** color.button.info.outline.hover.background */
  --sl-color-button-info-link-hover-foreground: #1a4a66; /** color.button.info.outline.hover.foreground */
  --sl-color-button-info-link-active-border: rgba(0, 0, 0, 0); /** color.button.info.outline.active.border */
  --sl-color-button-info-link-active-background: rgba(0, 0, 0, 0); /** color.button.info.outline.active.background */
  --sl-color-button-info-link-active-foreground: #1b364b; /** color.button.info.outline.active.foreground */
  --sl-color-button-info-link-disabled-border: rgba(0, 0, 0, 0); /** color.button.info.outline.disabled.border */
  --sl-color-button-info-link-disabled-background: rgba(0, 0, 0, 0); /** color.button.info.outline.disabled.background */
  --sl-color-button-info-link-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-info-ghost-idle-border: rgba(0, 0, 0, 0); /** color.button.info.outline.idle.border */
  --sl-color-button-info-ghost-idle-background: rgba(0, 0, 0, 0); /** color.button.info.outline.idle.background */
  --sl-color-button-info-ghost-idle-foreground: #175d79; /** color.button.info.outline.idle.foreground */
  --sl-color-button-info-ghost-hover-border: #bedfff; /** color.button.info.outline.hover.border */
  --sl-color-button-info-ghost-hover-background: #bedfff; /** color.button.info.outline.hover.background */
  --sl-color-button-info-ghost-hover-foreground: #175d79; /** color.button.info.outline.hover.foreground */
  --sl-color-button-info-ghost-active-border: #a3d2ff; /** color.button.info.outline.active.border */
  --sl-color-button-info-ghost-active-background: #a3d2ff; /** color.button.info.outline.active.background */
  --sl-color-button-info-ghost-active-foreground: #175d79; /** color.button.info.outline.active.foreground */
  --sl-color-button-info-ghost-disabled-border: rgba(0, 0, 0, 0); /** color.button.info.outline.disabled.border */
  --sl-color-button-info-ghost-disabled-background: #ececf1; /** color.button.info.outline.disabled.background */
  --sl-color-button-info-ghost-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-info-solid-idle-border: #175d79; /** color.button.info.solid.idle.border */
  --sl-color-button-info-solid-idle-background: #175d79; /** color.button.info.solid.idle.background */
  --sl-color-button-info-solid-idle-foreground: #ffffff; /** color.button.info.solid.idle.foreground */
  --sl-color-button-info-solid-hover-border: #1a4a66; /** color.button.info.solid.hover.border */
  --sl-color-button-info-solid-hover-background: #1a4a66; /** color.button.info.solid.hover.background */
  --sl-color-button-info-solid-hover-foreground: #ffffff; /** color.button.info.solid.hover.foreground */
  --sl-color-button-info-solid-active-border: #1b364b; /** color.button.info.solid.active.border */
  --sl-color-button-info-solid-active-background: #1b364b; /** color.button.info.solid.active.background */
  --sl-color-button-info-solid-active-foreground: #ffffff; /** color.button.info.solid.active.foreground */
  --sl-color-button-info-solid-disabled-border: #ececf1; /** color.button.info.solid.disabled.border */
  --sl-color-button-info-solid-disabled-background: #ececf1; /** color.button.info.solid.disabled.background */
  --sl-color-button-info-solid-disabled-foreground: #9198a7; /** color.button.info.solid.disabled.foreground */
  --sl-color-button-info-outline-idle-border: #175d79; /** color.button.info.outline.idle.border */
  --sl-color-button-info-outline-idle-background: rgba(0, 0, 0, 0); /** color.button.info.outline.idle.background */
  --sl-color-button-info-outline-idle-foreground: #175d79; /** color.button.info.outline.idle.foreground */
  --sl-color-button-info-outline-hover-border: #175d79; /** color.button.info.outline.hover.border */
  --sl-color-button-info-outline-hover-background: #175d79; /** color.button.info.outline.hover.background */
  --sl-color-button-info-outline-hover-foreground: #ffffff; /** color.button.info.outline.hover.foreground */
  --sl-color-button-info-outline-active-border: #1a4a66; /** color.button.info.outline.active.border */
  --sl-color-button-info-outline-active-background: #1a4a66; /** color.button.info.outline.active.background */
  --sl-color-button-info-outline-active-foreground: #ffffff; /** color.button.info.outline.active.foreground */
  --sl-color-button-info-outline-disabled-border: #9198a7; /** color.button.info.outline.disabled.border */
  --sl-color-button-info-outline-disabled-background: #ececf1; /** color.button.info.outline.disabled.background */
  --sl-color-button-info-outline-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-danger-link-idle-border: rgba(0, 0, 0, 0); /** color.button.danger.outline.idle.border */
  --sl-color-button-danger-link-idle-background: rgba(0, 0, 0, 0); /** color.button.danger.outline.idle.background */
  --sl-color-button-danger-link-idle-foreground: #9d2b36; /** color.button.danger.outline.idle.foreground */
  --sl-color-button-danger-link-hover-border: rgba(0, 0, 0, 0); /** color.button.danger.outline.hover.border */
  --sl-color-button-danger-link-hover-background: rgba(0, 0, 0, 0); /** color.button.danger.outline.hover.background */
  --sl-color-button-danger-link-hover-foreground: #902101; /** color.button.danger.outline.hover.foreground */
  --sl-color-button-danger-link-active-border: rgba(0, 0, 0, 0); /** color.button.danger.outline.active.border */
  --sl-color-button-danger-link-active-background: rgba(0, 0, 0, 0); /** color.button.danger.outline.active.background */
  --sl-color-button-danger-link-active-foreground: #4d151a; /** color.button.danger.outline.active.foreground */
  --sl-color-button-danger-link-disabled-border: rgba(0, 0, 0, 0); /** color.button.danger.outline.disabled.border */
  --sl-color-button-danger-link-disabled-background: rgba(0, 0, 0, 0); /** color.button.danger.outline.disabled.background */
  --sl-color-button-danger-link-disabled-foreground: #9198a7; /** color.button.danger.outline.disabled.foreground */
  --sl-color-button-danger-ghost-idle-border: rgba(0, 0, 0, 0); /** color.button.danger.outline.idle.border */
  --sl-color-button-danger-ghost-idle-background: rgba(0, 0, 0, 0); /** color.button.danger.outline.idle.background */
  --sl-color-button-danger-ghost-idle-foreground: #9d2b36; /** color.button.danger.outline.idle.foreground */
  --sl-color-button-danger-ghost-hover-border: #f9c1c6; /** color.button.danger.outline.hover.border */
  --sl-color-button-danger-ghost-hover-background: #f9c1c6; /** color.button.danger.outline.hover.background */
  --sl-color-button-danger-ghost-hover-foreground: #9d2b36; /** color.button.danger.outline.hover.foreground */
  --sl-color-button-danger-ghost-active-border: #f6a1a9; /** color.button.danger.outline.active.border */
  --sl-color-button-danger-ghost-active-background: #f6a1a9; /** color.button.danger.outline.active.background */
  --sl-color-button-danger-ghost-active-foreground: #9d2b36; /** color.button.danger.outline.active.foreground */
  --sl-color-button-danger-ghost-disabled-border: rgba(0, 0, 0, 0); /** color.button.danger.outline.disabled.border */
  --sl-color-button-danger-ghost-disabled-background: #ececf1; /** color.button.danger.outline.disabled.background */
  --sl-color-button-danger-ghost-disabled-foreground: #9198a7; /** color.button.danger.outline.disabled.foreground */
  --sl-color-button-danger-solid-idle-border: #9d2b36; /** color.button.danger.warning.idle.border */
  --sl-color-button-danger-solid-idle-background: #9d2b36; /** color.button.danger.warning.idle.background */
  --sl-color-button-danger-solid-idle-foreground: #ffffff; /** color.button.danger.solid.idle.foreground */
  --sl-color-button-danger-solid-hover-border: #902101; /** color.button.danger.solid.hover.border */
  --sl-color-button-danger-solid-hover-background: #902101; /** color.button.danger.solid.hover.background */
  --sl-color-button-danger-solid-hover-foreground: #ffffff; /** color.button.danger.solid.hover.foreground */
  --sl-color-button-danger-solid-active-border: #4d151a; /** color.button.danger.solid.active.border */
  --sl-color-button-danger-solid-active-background: #4d151a; /** color.button.danger.solid.active.background */
  --sl-color-button-danger-solid-active-foreground: #ffffff; /** color.button.danger.solid.active.foreground */
  --sl-color-button-danger-solid-disabled-border: #ececf1; /** color.button.danger.default.disabled.border */
  --sl-color-button-danger-solid-disabled-background: #ececf1; /** color.button.danger.solid.disabled.background */
  --sl-color-button-danger-solid-disabled-foreground: #9198a7; /** color.button.danger.solid.disabled.foreground */
  --sl-color-button-danger-outline-idle-border: #9d2b36; /** color.button.danger.outline.idle.border */
  --sl-color-button-danger-outline-idle-background: rgba(0, 0, 0, 0); /** color.button.danger.outline.idle.background */
  --sl-color-button-danger-outline-idle-foreground: #9d2b36; /** color.button.danger.outline.idle.foreground */
  --sl-color-button-danger-outline-hover-border: #9d2b36; /** color.button.danger.outline.hover.border */
  --sl-color-button-danger-outline-hover-background: #9d2b36; /** color.button.danger.outline.hover.background */
  --sl-color-button-danger-outline-hover-foreground: #ffffff; /** color.button.danger.outline.hover.foreground */
  --sl-color-button-danger-outline-active-border: #902101; /** color.button.danger.outline.active.border */
  --sl-color-button-danger-outline-active-background: #902101; /** color.button.danger.outline.active.background */
  --sl-color-button-danger-outline-active-foreground: #ffffff; /** color.button.danger.outline.active.foreground */
  --sl-color-button-danger-outline-disabled-border: #9198a7; /** color.button.danger.outline.disabled.border */
  --sl-color-button-danger-outline-disabled-background: #ececf1; /** color.button.danger.outline.disabled.background */
  --sl-color-button-danger-outline-disabled-foreground: #9198a7; /** color.button.danger.outline.disabled.foreground */
  --sl-color-button-default-link-idle-border: rgba(0, 0, 0, 0); /** color.button.default.outline.idle.border */
  --sl-color-button-default-link-idle-background: rgba(0, 0, 0, 0); /** color.button.default.outline.idle.background */
  --sl-color-button-default-link-idle-foreground: #585c61; /** color.button.default.outline.idle.foreground */
  --sl-color-button-default-link-hover-border: rgba(0, 0, 0, 0); /** color.button.default.outline.hover.border */
  --sl-color-button-default-link-hover-background: rgba(0, 0, 0, 0); /** color.button.default.outline.hover.background */
  --sl-color-button-default-link-hover-foreground: #3d4047; /** color.button.default.outline.hover.foreground */
  --sl-color-button-default-link-active-border: rgba(0, 0, 0, 0); /** color.button.default.outline.active.border */
  --sl-color-button-default-link-active-background: rgba(0, 0, 0, 0); /** color.button.default.outline.active.background */
  --sl-color-button-default-link-active-foreground: #1d1f20; /** color.button.primary.outline.active.foreground */
  --sl-color-button-default-link-disabled-border: rgba(0, 0, 0, 0); /** color.button.info.outline.disabled.border */
  --sl-color-button-default-link-disabled-background: rgba(0, 0, 0, 0); /** color.button.info.outline.disabled.background */
  --sl-color-button-default-link-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-default-ghost-idle-border: rgba(0, 0, 0, 0); /** color.button.default.outline.idle.border */
  --sl-color-button-default-ghost-idle-background: rgba(0, 0, 0, 0); /** color.button.default.outline.idle.background */
  --sl-color-button-default-ghost-idle-foreground: #585c61; /** color.button.default.outline.idle.foreground */
  --sl-color-button-default-ghost-hover-border: #e2e3e9; /** color.button.default.outline.hover.border */
  --sl-color-button-default-ghost-hover-background: #e2e3e9; /** color.button.default.outline.hover.background */
  --sl-color-button-default-ghost-hover-foreground: #585c61; /** color.button.default.outline.hover.foreground */
  --sl-color-button-default-ghost-active-border: #d8d8dd; /** color.button.default.outline.active.border */
  --sl-color-button-default-ghost-active-background: #d8d8dd; /** color.button.default.outline.active.background */
  --sl-color-button-default-ghost-active-foreground: #585c61; /** color.button.primary.outline.active.foreground */
  --sl-color-button-default-ghost-disabled-border: rgba(0, 0, 0, 0); /** color.button.info.outline.disabled.border */
  --sl-color-button-default-ghost-disabled-background: #ececf1; /** color.button.info.outline.disabled.background */
  --sl-color-button-default-ghost-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-default-ghost-selected-idle-border: #e5f2fb; /** color.button.default.outline.idle.border */
  --sl-color-button-default-ghost-selected-idle-background: #e5f2fb; /** color.button.default.outline.idle.background */
  --sl-color-button-default-ghost-selected-idle-foreground: #0d1a24; /** color.button.default.outline.idle.foreground */
  --sl-color-button-default-ghost-selected-hover-border: #a3d2ff; /** color.button.default.outline.hover.border */
  --sl-color-button-default-ghost-selected-hover-background: #a3d2ff; /** color.button.default.outline.hover.background */
  --sl-color-button-default-ghost-selected-hover-foreground: #0d1a24; /** color.button.default.outline.hover.foreground */
  --sl-color-button-default-ghost-selected-active-border: #8dc7ff; /** color.button.default.outline.active.border */
  --sl-color-button-default-ghost-selected-active-background: #8dc7ff; /** color.button.default.outline.active.background */
  --sl-color-button-default-ghost-selected-active-foreground: #0d1a24; /** color.button.primary.outline.active.foreground */
  --sl-color-button-default-ghost-selected-disabled-border: rgba(0, 0, 0, 0); /** color.button.info.outline.disabled.border */
  --sl-color-button-default-ghost-selected-disabled-background: #ececf1; /** color.button.info.outline.disabled.background */
  --sl-color-button-default-ghost-selected-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-default-solid-idle-border: #e2e3e9; /** color.button.default.idle.border */
  --sl-color-button-default-solid-idle-background: #e2e3e9; /** color.button.default.idle.background */
  --sl-color-button-default-solid-idle-foreground: #585c61; /** color.button.solid.idle.foreground */
  --sl-color-button-default-solid-hover-border: #d8d8dd; /** color.button.default.hover.border */
  --sl-color-button-default-solid-hover-background: #d8d8dd; /** color.button.default.hover.background */
  --sl-color-button-default-solid-hover-foreground: #585c61; /** color.button.default.hover.foreground */
  --sl-color-button-default-solid-active-border: #c8c8cf; /** color.button.default.active.border */
  --sl-color-button-default-solid-active-background: #c8c8cf; /** color.button.default.active.background */
  --sl-color-button-default-solid-active-foreground: #585c61; /** color.button.default.active.foreground */
  --sl-color-button-default-solid-disabled-border: #ececf1; /** color.button.default.disabled.border */
  --sl-color-button-default-solid-disabled-background: #ececf1; /** color.button.default.disabled.background */
  --sl-color-button-default-solid-disabled-foreground: #9198a7; /** color.button.default.disabled.foreground */
  --sl-color-button-default-outline-idle-border: #d8d8dd; /** color.button.default.outline.idle.border */
  --sl-color-button-default-outline-idle-background: rgba(0, 0, 0, 0); /** color.button.default.outline.idle.background */
  --sl-color-button-default-outline-idle-foreground: #585c61; /** color.button.default.outline.idle.foreground */
  --sl-color-button-default-outline-hover-border: #c8c8cf; /** color.button.default.outline.hover.border */
  --sl-color-button-default-outline-hover-background: #e2e3e9; /** color.button.default.outline.hover.background */
  --sl-color-button-default-outline-hover-foreground: #585c61; /** color.button.default.outline.hover.foreground */
  --sl-color-button-default-outline-active-border: #afb6c5; /** color.button.default.outline.active.border */
  --sl-color-button-default-outline-active-background: #d8d8dd; /** color.button.default.outline.active.background */
  --sl-color-button-default-outline-active-foreground: #585c61; /** color.button.primary.outline.active.foreground */
  --sl-color-button-default-outline-disabled-border: #9198a7; /** color.button.info.outline.disabled.border */
  --sl-color-button-default-outline-disabled-background: #ececf1; /** color.button.info.outline.disabled.background */
  --sl-color-button-default-outline-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-default-outline-selected-idle-border: #c8c8cf; /** color.button.default.outline.idle.border */
  --sl-color-button-default-outline-selected-idle-background: #e5f2fb; /** color.button.default.outline.idle.background */
  --sl-color-button-default-outline-selected-idle-foreground: #0d1a24; /** color.button.default.outline.idle.foreground */
  --sl-color-button-default-outline-selected-hover-border: #c8c8cf; /** color.button.default.outline.hover.border */
  --sl-color-button-default-outline-selected-hover-background: #a3d2ff; /** color.button.default.outline.hover.background */
  --sl-color-button-default-outline-selected-hover-foreground: #0d1a24; /** color.button.default.outline.hover.foreground */
  --sl-color-button-default-outline-selected-active-border: #afb6c5; /** color.button.default.outline.active.border */
  --sl-color-button-default-outline-selected-active-background: #8dc7ff; /** color.button.default.outline.active.background */
  --sl-color-button-default-outline-selected-active-foreground: #0d1a24; /** color.button.primary.outline.active.foreground */
  --sl-color-button-default-outline-selected-disabled-border: #9198a7; /** color.button.info.outline.disabled.border */
  --sl-color-button-default-outline-selected-disabled-background: #ececf1; /** color.button.info.outline.disabled.background */
  --sl-color-button-default-outline-selected-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-primary-link-idle-border: rgba(0, 0, 0, 0); /** color.button.primary.outline.idle.border */
  --sl-color-button-primary-link-idle-background: rgba(0, 0, 0, 0); /** color.button.primary.outline.idle.background */
  --sl-color-button-primary-link-idle-foreground: #006666; /** color.button.primary.outline.idle.foreground */
  --sl-color-button-primary-link-hover-border: rgba(0, 0, 0, 0); /** color.button.primary.outline.hover.border */
  --sl-color-button-primary-link-hover-background: rgba(0, 0, 0, 0); /** color.button.primary.outline.hover.background */
  --sl-color-button-primary-link-hover-foreground: #005252; /** color.button.primary.outline.hover.foreground */
  --sl-color-button-primary-link-active-border: rgba(0, 0, 0, 0); /** color.button.primary.outline.active.border */
  --sl-color-button-primary-link-active-background: rgba(0, 0, 0, 0); /** color.button.primary.outline.active.background */
  --sl-color-button-primary-link-active-foreground: #003d3d; /** color.button.primary.outline.active.foreground */
  --sl-color-button-primary-link-disabled-border: rgba(0, 0, 0, 0); /** color.button.primary.outline.disabled.border */
  --sl-color-button-primary-link-disabled-background: rgba(0, 0, 0, 0); /** color.button.primary.outline.disabled.background */
  --sl-color-button-primary-link-disabled-foreground: #9198a7; /** color.button.primary.outline.disabled.foreground */
  --sl-color-button-primary-ghost-idle-border: rgba(0, 0, 0, 0); /** color.button.default.outline.idle.border */
  --sl-color-button-primary-ghost-idle-background: rgba(0, 0, 0, 0); /** color.button.default.outline.idle.background */
  --sl-color-button-primary-ghost-idle-foreground: #006666; /** color.button.default.outline.idle.foreground */
  --sl-color-button-primary-ghost-hover-border: #dcf1f0; /** color.button.default.outline.hover.border */
  --sl-color-button-primary-ghost-hover-background: #dcf1f0; /** color.button.default.outline.hover.background */
  --sl-color-button-primary-ghost-hover-foreground: #006666; /** color.button.default.outline.hover.foreground */
  --sl-color-button-primary-ghost-active-border: #b9e3e1; /** color.button.default.outline.active.border */
  --sl-color-button-primary-ghost-active-background: #b9e3e1; /** color.button.default.outline.active.background */
  --sl-color-button-primary-ghost-active-foreground: #006666; /** color.button.primary.outline.active.foreground */
  --sl-color-button-primary-ghost-disabled-border: rgba(0, 0, 0, 0); /** color.button.info.outline.disabled.border */
  --sl-color-button-primary-ghost-disabled-background: #ececf1; /** color.button.info.outline.disabled.background */
  --sl-color-button-primary-ghost-disabled-foreground: #9198a7; /** color.button.info.outline.disabled.foreground */
  --sl-color-button-primary-solid-idle-border: #006666; /** color.button.primary.solid.idle.border */
  --sl-color-button-primary-solid-idle-background: #006666; /** color.button.primary.solid.idle.background */
  --sl-color-button-primary-solid-idle-foreground: #ffffff; /** color.button.primary.solid.idle.foreground */
  --sl-color-button-primary-solid-hover-border: #005252; /** color.button.primary.default.hover.border */
  --sl-color-button-primary-solid-hover-background: #005252; /** color.button.primary.solid.hover.background */
  --sl-color-button-primary-solid-hover-foreground: #ffffff; /** color.button.primary.solid.hover.foreground */
  --sl-color-button-primary-solid-active-border: #003d3d; /** color.button.primary.default.active.border */
  --sl-color-button-primary-solid-active-background: #003d3d; /** color.button.primary.solid.active.background */
  --sl-color-button-primary-solid-active-foreground: #ffffff; /** color.button.primary.solid.active.foreground */
  --sl-color-button-primary-solid-disabled-border: #ececf1; /** color.button.primary.default.disabled.border */
  --sl-color-button-primary-solid-disabled-background: #ececf1; /** color.button.primary.solid.disabled.background */
  --sl-color-button-primary-solid-disabled-foreground: #9198a7; /** color.button.primary.solid.disabled.foreground */
  --sl-color-button-primary-outline-idle-border: #006666; /** color.button.primary.outline.idle.border */
  --sl-color-button-primary-outline-idle-background: rgba(0, 0, 0, 0); /** color.button.primary.outline.idle.background */
  --sl-color-button-primary-outline-idle-foreground: #006666; /** color.button.primary.outline.idle.foreground */
  --sl-color-button-primary-outline-hover-border: #006666; /** color.button.primary.outline.hover.border */
  --sl-color-button-primary-outline-hover-background: #006666; /** color.button.primary.outline.hover.background */
  --sl-color-button-primary-outline-hover-foreground: #ffffff; /** color.button.primary.outline.hover.foreground */
  --sl-color-button-primary-outline-active-border: #005252; /** color.button.primary.outline.active.border */
  --sl-color-button-primary-outline-active-background: #005252; /** color.button.primary.outline.active.background */
  --sl-color-button-primary-outline-active-foreground: #ffffff; /** color.button.primary.outline.active.foreground */
  --sl-color-button-primary-outline-disabled-border: #9198a7; /** color.button.primary.outline.disabled.border */
  --sl-color-button-primary-outline-disabled-background: #ececf1; /** color.button.primary.outline.disabled.background */
  --sl-color-button-primary-outline-disabled-foreground: #9198a7; /** color.button.primary.outline.disabled.foreground */
  --sl-color-button-success-link-idle-border: rgba(0, 0, 0, 0); /** color.button.success.outline.idle.border */
  --sl-color-button-success-link-idle-background: rgba(0, 0, 0, 0); /** color.button.success.outline.idle.background */
  --sl-color-button-success-link-idle-foreground: #0d6732; /** color.button.success.outline.idle.foreground */
  --sl-color-button-success-link-hover-border: rgba(0, 0, 0, 0); /** color.button.success.outline.hover.border */
  --sl-color-button-success-link-hover-background: rgba(0, 0, 0, 0); /** color.button.success.outline.hover.background */
  --sl-color-button-success-link-hover-foreground: #0a4d25; /** color.button.success.outline.hover.foreground */
  --sl-color-button-success-link-active-border: rgba(0, 0, 0, 0); /** color.button.success.outline.active.border */
  --sl-color-button-success-link-active-background: rgba(0, 0, 0, 0); /** color.button.success.outline.active.background */
  --sl-color-button-success-link-active-foreground: #073318; /** color.button.success.outline.active.foreground */
  --sl-color-button-success-link-disabled-border: rgba(0, 0, 0, 0); /** color.button.success.outline.disabled.border */
  --sl-color-button-success-link-disabled-background: rgba(0, 0, 0, 0); /** color.button.success.outline.disabled.background */
  --sl-color-button-success-link-disabled-foreground: #9198a7; /** color.button.success.outline.disabled.foreground */
  --sl-color-button-success-ghost-idle-border: rgba(0, 0, 0, 0); /** color.button.success.outline.idle.border */
  --sl-color-button-success-ghost-idle-background: rgba(0, 0, 0, 0); /** color.button.success.outline.idle.background */
  --sl-color-button-success-ghost-idle-foreground: #0d6732; /** color.button.success.outline.idle.foreground */
  --sl-color-button-success-ghost-hover-border: #b3dfc4; /** color.button.success.outline.hover.border */
  --sl-color-button-success-ghost-hover-background: #b3dfc4; /** color.button.success.outline.hover.background */
  --sl-color-button-success-ghost-hover-foreground: #0d6732; /** color.button.success.outline.hover.foreground */
  --sl-color-button-success-ghost-active-border: #8bcea6; /** color.button.success.outline.active.border */
  --sl-color-button-success-ghost-active-background: #8bcea6; /** color.button.success.outline.active.background */
  --sl-color-button-success-ghost-active-foreground: #0d6732; /** color.button.success.outline.active.foreground */
  --sl-color-button-success-ghost-disabled-border: rgba(0, 0, 0, 0); /** color.button.success.outline.disabled.border */
  --sl-color-button-success-ghost-disabled-background: #ececf1; /** color.button.success.outline.disabled.background */
  --sl-color-button-success-ghost-disabled-foreground: #9198a7; /** color.button.success.outline.disabled.foreground */
  --sl-color-button-success-solid-idle-border: #0d6732; /** color.button.success.solid.idle.border */
  --sl-color-button-success-solid-idle-background: #0d6732; /** color.button.success.solid.idle.background */
  --sl-color-button-success-solid-idle-foreground: #ffffff; /** color.button.success.solid.idle.foreground */
  --sl-color-button-success-solid-hover-border: #0a4d25; /** color.button.success.solid.hover.border */
  --sl-color-button-success-solid-hover-background: #0a4d25; /** color.button.success.solid.hover.background */
  --sl-color-button-success-solid-hover-foreground: #ffffff; /** color.button.success.solid.hover.foreground */
  --sl-color-button-success-solid-active-border: #073318; /** color.button.success.solid.active.border */
  --sl-color-button-success-solid-active-background: #073318; /** color.button.success.solid.active.background */
  --sl-color-button-success-solid-active-foreground: #ffffff; /** color.button.success.solid.active.foreground */
  --sl-color-button-success-solid-disabled-border: #ececf1; /** color.button.success.solid.disabled.border */
  --sl-color-button-success-solid-disabled-background: #ececf1; /** color.button.success.solid.disabled.background */
  --sl-color-button-success-solid-disabled-foreground: #9198a7; /** color.button.success.solid.disabled.foreground */
  --sl-color-button-success-outline-idle-border: #0d6732; /** color.button.success.outline.idle.border */
  --sl-color-button-success-outline-idle-background: rgba(0, 0, 0, 0); /** color.button.success.outline.idle.background */
  --sl-color-button-success-outline-idle-foreground: #0d6732; /** color.button.success.outline.idle.foreground */
  --sl-color-button-success-outline-hover-border: #0d6732; /** color.button.success.outline.hover.border */
  --sl-color-button-success-outline-hover-background: #0d6732; /** color.button.success.outline.hover.background */
  --sl-color-button-success-outline-hover-foreground: #ffffff; /** color.button.success.outline.hover.foreground */
  --sl-color-button-success-outline-active-border: #0a4d25; /** color.button.success.outline.active.border */
  --sl-color-button-success-outline-active-background: #0a4d25; /** color.button.success.outline.active.background */
  --sl-color-button-success-outline-active-foreground: #ffffff; /** color.button.success.outline.active.foreground */
  --sl-color-button-success-outline-disabled-border: #9198a7; /** color.button.success.outline.disabled.border */
  --sl-color-button-success-outline-disabled-background: #ececf1; /** color.button.success.outline.disabled.background */
  --sl-color-button-success-outline-disabled-foreground: #9198a7; /** color.button.success.outline.disabled.foreground */
  --sl-color-button-warning-link-idle-border: rgba(0, 0, 0, 0); /** color.button.warning.outline.idle.border */
  --sl-color-button-warning-link-idle-background: rgba(0, 0, 0, 0); /** color.button.warning.outline.idle.background */
  --sl-color-button-warning-link-idle-foreground: #985320; /** color.button.warning.outline.idle.foreground */
  --sl-color-button-warning-link-hover-border: rgba(0, 0, 0, 0); /** color.button.warning.outline.hover.border */
  --sl-color-button-warning-link-hover-background: rgba(0, 0, 0, 0); /** color.button.warning.outline.hover.background */
  --sl-color-button-warning-link-hover-foreground: #653815; /** color.button.warning.outline.hover.foreground */
  --sl-color-button-warning-link-active-border: rgba(0, 0, 0, 0); /** color.button.warning.outline.active.border */
  --sl-color-button-warning-link-active-background: rgba(0, 0, 0, 0); /** color.button.warning.outline.active.background */
  --sl-color-button-warning-link-active-foreground: #331c0b; /** color.button.warning.outline.active.foreground */
  --sl-color-button-warning-link-disabled-border: rgba(0, 0, 0, 0); /** color.button.warning.outline.disabled.border */
  --sl-color-button-warning-link-disabled-background: rgba(0, 0, 0, 0); /** color.button.warning.outline.disabled.background */
  --sl-color-button-warning-link-disabled-foreground: #9198a7; /** color.button.warning.outline.disabled.foreground */
  --sl-color-button-warning-ghost-idle-border: rgba(0, 0, 0, 0); /** color.button.warning.outline.idle.border */
  --sl-color-button-warning-ghost-idle-background: rgba(0, 0, 0, 0); /** color.button.warning.outline.idle.background */
  --sl-color-button-warning-ghost-idle-foreground: #985320; /** color.button.warning.outline.idle.foreground */
  --sl-color-button-warning-ghost-hover-border: rgba(0, 0, 0, 0); /** color.button.warning.outline.hover.border */
  --sl-color-button-warning-ghost-hover-background: #ffcda7; /** color.button.warning.outline.hover.background */
  --sl-color-button-warning-ghost-hover-foreground: #653815; /** color.button.warning.outline.hover.foreground */
  --sl-color-button-warning-ghost-active-border: rgba(0, 0, 0, 0); /** color.button.warning.outline.active.border */
  --sl-color-button-warning-ghost-active-background: #ffd976; /** color.button.warning.outline.active.background */
  --sl-color-button-warning-ghost-active-foreground: #331c0b; /** color.button.warning.outline.active.foreground */
  --sl-color-button-warning-ghost-disabled-border: rgba(0, 0, 0, 0); /** color.button.warning.outline.disabled.border */
  --sl-color-button-warning-ghost-disabled-background: #ececf1; /** color.button.warning.outline.disabled.background */
  --sl-color-button-warning-ghost-disabled-foreground: #9198a7; /** color.button.warning.outline.disabled.foreground */
  --sl-color-button-warning-solid-idle-border: #985320; /** color.button.info.warning.idle.border */
  --sl-color-button-warning-solid-idle-background: #985320; /** color.button.info.warning.idle.background */
  --sl-color-button-warning-solid-idle-foreground: #ffffff; /** color.button.warning.solid.idle.foreground */
  --sl-color-button-warning-solid-hover-border: #653815; /** color.button.warning.solid.hover.border */
  --sl-color-button-warning-solid-hover-background: #653815; /** color.button.warning.solid.hover.background */
  --sl-color-button-warning-solid-hover-foreground: #ffffff; /** color.button.warning.solid.hover.foreground */
  --sl-color-button-warning-solid-active-border: #331c0b; /** color.button.warning.solid.active.border */
  --sl-color-button-warning-solid-active-background: #331c0b; /** color.button.warning.solid.active.background */
  --sl-color-button-warning-solid-active-foreground: #ffffff; /** color.button.warning.solid.active.foreground */
  --sl-color-button-warning-solid-disabled-border: #ececf1; /** color.button.warning.default.disabled.border */
  --sl-color-button-warning-solid-disabled-background: #ececf1; /** color.button.warning.solid.disabled.background */
  --sl-color-button-warning-solid-disabled-foreground: #9198a7; /** color.button.warning.solid.disabled.foreground */
  --sl-color-button-warning-outline-idle-border: #985320; /** color.button.warning.outline.idle.border */
  --sl-color-button-warning-outline-idle-background: rgba(0, 0, 0, 0); /** color.button.warning.outline.idle.background */
  --sl-color-button-warning-outline-idle-foreground: #985320; /** color.button.warning.outline.idle.foreground */
  --sl-color-button-warning-outline-hover-border: #985320; /** color.button.warning.outline.hover.border */
  --sl-color-button-warning-outline-hover-background: #985320; /** color.button.warning.outline.hover.background */
  --sl-color-button-warning-outline-hover-foreground: #ffffff; /** color.button.warning.outline.hover.foreground */
  --sl-color-button-warning-outline-active-border: #653815; /** color.button.warning.outline.active.border */
  --sl-color-button-warning-outline-active-background: #653815; /** color.button.warning.outline.active.background */
  --sl-color-button-warning-outline-active-foreground: #ffffff; /** color.button.warning.outline.active.foreground */
  --sl-color-button-warning-outline-disabled-border: #9198a7; /** color.button.warning.outline.disabled.border */
  --sl-color-button-warning-outline-disabled-background: #ececf1; /** color.button.warning.outline.disabled.background */
  --sl-color-button-warning-outline-disabled-foreground: #9198a7; /** color.button.warning.outline.disabled.foreground */
  --sl-color-dialog-border: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-dialog-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-dialog-foreground: #02242e; /** color.surface.solid.primary.background */
  --sl-color-select-item-focus-border: rgba(255, 255, 255, 0);
  --sl-color-select-item-focus-indicator: #4589be;
  --sl-color-select-item-focus-background: rgba(255, 255, 255, 0.04);
  --sl-color-select-item-focus-foreground: #1d1f20;
  --sl-color-select-item-hover-border: rgba(255, 255, 255, 0);
  --sl-color-select-item-hover-indicator: #4589be;
  --sl-color-select-item-hover-background: #e5f2fb;
  --sl-color-select-item-hover-foreground: #1d1f20;
  --sl-color-select-item-active-border: rgba(255, 255, 255, 0);
  --sl-color-select-item-active-indicator: #4589be;
  --sl-color-select-item-active-background: #bedfff;
  --sl-color-select-item-active-foreground: #1d1f20;
  --sl-color-select-item-default-border: rgba(255, 255, 255, 0);
  --sl-color-select-item-default-indicator: #4589be;
  --sl-color-select-item-default-background: rgba(255, 255, 255, 0);
  --sl-color-select-item-default-foreground: #1d1f20;
  --sl-color-select-item-divider-line: #ececf1;
  --sl-color-select-item-disabled-border: rgba(255, 255, 255, 0);
  --sl-color-select-item-disabled-indicator: #c8c8cf;
  --sl-color-select-item-disabled-background: rgba(255, 255, 255, 0);
  --sl-color-select-item-disabled-foreground: #c8c8cf;
  --sl-color-select-item-group-title-foreground: #d8d8dd;
  --sl-color-select-listbox-border: #4589be;
  --sl-color-select-listbox-background: #ffffff;
  --sl-color-select-selectbox-valid-focus-icon: #149c4b;
  --sl-color-select-selectbox-valid-focus-label: #02242e;
  --sl-color-select-selectbox-valid-focus-border: #149c4b;
  --sl-color-select-selectbox-valid-focus-input-text: #02242e;
  --sl-color-select-selectbox-valid-focus-background: #ffffff;
  --sl-color-select-selectbox-valid-focus-placeholder: #7a818e;
  --sl-color-select-selectbox-valid-hover-icon: #149c4b;
  --sl-color-select-selectbox-valid-hover-label: #02242e;
  --sl-color-select-selectbox-valid-hover-border: #149c4b;
  --sl-color-select-selectbox-valid-hover-input-text: #02242e;
  --sl-color-select-selectbox-valid-hover-background: #daefe3;
  --sl-color-select-selectbox-valid-hover-placeholder: #7a818e;
  --sl-color-select-selectbox-valid-active-icon: #149c4b;
  --sl-color-select-selectbox-valid-active-label: #02242e;
  --sl-color-select-selectbox-valid-active-border: #4589be;
  --sl-color-select-selectbox-valid-active-input-text: #02242e;
  --sl-color-select-selectbox-valid-active-background: #ffffff;
  --sl-color-select-selectbox-valid-active-placeholder: #7a818e;
  --sl-color-select-selectbox-valid-default-icon: #149c4b;
  --sl-color-select-selectbox-valid-default-label: #02242e;
  --sl-color-select-selectbox-valid-default-border: #149c4b;
  --sl-color-select-selectbox-valid-default-input-text: #02242e;
  --sl-color-select-selectbox-valid-default-background: #ffffff;
  --sl-color-select-selectbox-valid-default-placeholder: #7a818e;
  --sl-color-select-selectbox-valid-disabled-icon: #d8d8dd;
  --sl-color-select-selectbox-valid-disabled-label: #c8c8cf;
  --sl-color-select-selectbox-valid-disabled-border: #d8d8dd;
  --sl-color-select-selectbox-valid-disabled-input-text: #c8c8cf;
  --sl-color-select-selectbox-valid-disabled-background: #f4f5fa;
  --sl-color-select-selectbox-valid-disabled-placeholder: #c8c8cf;
  --sl-color-select-selectbox-default-focus-icon: #02242e;
  --sl-color-select-selectbox-default-focus-label: #02242e;
  --sl-color-select-selectbox-default-focus-border: #7a818e;
  --sl-color-select-selectbox-default-focus-input-text: #02242e;
  --sl-color-select-selectbox-default-focus-background: #ffffff;
  --sl-color-select-selectbox-default-focus-placeholder: #7a818e;
  --sl-color-select-selectbox-default-hover-icon: #02242e;
  --sl-color-select-selectbox-default-hover-label: #02242e;
  --sl-color-select-selectbox-default-hover-border: #7a818e;
  --sl-color-select-selectbox-default-hover-input-text: #02242e;
  --sl-color-select-selectbox-default-hover-background: #e5f2fb;
  --sl-color-select-selectbox-default-hover-placeholder: #7a818e;
  --sl-color-select-selectbox-default-active-icon: #02242e;
  --sl-color-select-selectbox-default-active-label: #02242e;
  --sl-color-select-selectbox-default-active-border: #4589be;
  --sl-color-select-selectbox-default-active-input-text: #02242e;
  --sl-color-select-selectbox-default-active-background: #ffffff;
  --sl-color-select-selectbox-default-active-placeholder: #7a818e;
  --sl-color-select-selectbox-default-default-icon: #02242e;
  --sl-color-select-selectbox-default-default-label: #02242e;
  --sl-color-select-selectbox-default-default-border: #7a818e;
  --sl-color-select-selectbox-default-default-input-text: #02242e;
  --sl-color-select-selectbox-default-default-background: #ffffff;
  --sl-color-select-selectbox-default-default-placeholder: #7a818e;
  --sl-color-select-selectbox-default-disabled-icon: #d8d8dd;
  --sl-color-select-selectbox-default-disabled-label: #c8c8cf;
  --sl-color-select-selectbox-default-disabled-border: #d8d8dd;
  --sl-color-select-selectbox-default-disabled-input-text: #c8c8cf;
  --sl-color-select-selectbox-default-disabled-background: #f4f5fa;
  --sl-color-select-selectbox-default-disabled-placeholder: #c8c8cf;
  --sl-color-select-selectbox-invalid-focus-icon: #9d2b36;
  --sl-color-select-selectbox-invalid-focus-label: #02242e;
  --sl-color-select-selectbox-invalid-focus-border: #ed4151;
  --sl-color-select-selectbox-invalid-focus-input-text: #02242e;
  --sl-color-select-selectbox-invalid-focus-background: #ffffff;
  --sl-color-select-selectbox-invalid-focus-placeholder: #7a818e;
  --sl-color-select-selectbox-invalid-hover-icon: #9d2b36;
  --sl-color-select-selectbox-invalid-hover-label: #02242e;
  --sl-color-select-selectbox-invalid-hover-border: #ed4151;
  --sl-color-select-selectbox-invalid-hover-input-text: #02242e;
  --sl-color-select-selectbox-invalid-hover-background: #ffd8da;
  --sl-color-select-selectbox-invalid-hover-placeholder: #7a818e;
  --sl-color-select-selectbox-invalid-active-icon: #02242e;
  --sl-color-select-selectbox-invalid-active-label: #02242e;
  --sl-color-select-selectbox-invalid-active-border: #4589be;
  --sl-color-select-selectbox-invalid-active-input-text: #02242e;
  --sl-color-select-selectbox-invalid-active-background: #ffffff;
  --sl-color-select-selectbox-invalid-active-placeholder: #7a818e;
  --sl-color-select-selectbox-invalid-default-icon: #9d2b36;
  --sl-color-select-selectbox-invalid-default-label: #02242e;
  --sl-color-select-selectbox-invalid-default-border: #ed4151;
  --sl-color-select-selectbox-invalid-default-input-text: #02242e;
  --sl-color-select-selectbox-invalid-default-background: #ffffff;
  --sl-color-select-selectbox-invalid-default-placeholder: #7a818e;
  --sl-color-select-selectbox-invalid-disabled-icon: #d8d8dd;
  --sl-color-select-selectbox-invalid-disabled-label: #c8c8cf;
  --sl-color-select-selectbox-invalid-disabled-border: #d8d8dd;
  --sl-color-select-selectbox-invalid-disabled-input-text: #c8c8cf;
  --sl-color-select-selectbox-invalid-disabled-background: #f4f5fa;
  --sl-color-select-selectbox-invalid-disabled-placeholder: #c8c8cf;
  --sl-color-popover-border: #7a818e;
  --sl-color-popover-background: #ffffff;
  --sl-color-popover-foreground: #02242e;
  --sl-color-spinner-info: #175d79;
  --sl-color-spinner-white: #ffffff;
  --sl-color-spinner-accent: #175d79;
  --sl-color-spinner-danger: #c53643;
  --sl-color-spinner-default: #006666;
  --sl-color-spinner-success: #11823e;
  --sl-color-spinner-warning: #985320;
  --sl-color-surface-solid-accent-background: #53a5e5; /** color.surface.solid.accent.backgorund */
  --sl-color-surface-solid-accent-foreground: #e5f2fb; /** color.surface.solid.accent.foreground */
  --sl-color-surface-solid-primary-background: #ffffff; /** color.surface.solid.primary.background */
  --sl-color-surface-solid-primary-foreground: #02242e; /** color.surface.solid.primary.foreground */
  --sl-color-surface-solid-secondary-background: #d8d8dd; /** color.surface.solid.secondary.background */
  --sl-color-surface-solid-secondary-foreground: #ffffff; /** color.surface.solid.secondary.foreground */
  --sl-color-tooltip-border: rgba(0, 0, 0, 0);
  --sl-color-tooltip-background: #02242e;
  --sl-color-tooltip-foreground: #ffffff;
  --sl-color-skeleton-base: #ececf1; /** body.surface.100 */
  --sl-color-skeleton-pulse: hsl(240 15.152% 93.529% / 0.4); /** body.surface.100 */
  --sl-color-skeleton-effect: #e2e3e9; /** body.surface.100 */
  --sl-color-skeleton-shimmer: linear-gradient (90deg, #ececf1 0%, #ececf1 10%, #e2e3e9 50%, #ececf1 90%, #ececf1 100%); /** body.surface.100 */
  --sl-color-skeleton-plain: #ececf1; /** Use for skeleton loading states. */
  --sl-color-skeleton-subtle: #f4f5fa; /** Use for the pulse or shimmer effect in skeleton loading states. */
  --sl-color-accordion-hover-icon: #006666;
  --sl-color-accordion-hover-border: #afb6c5;
  --sl-color-accordion-hover-header: #f4f5fa;
  --sl-color-accordion-hover-background: #ffffff;
  --sl-color-accordion-hover-foreground: #006666;
  --sl-color-accordion-active-icon: #006666;
  --sl-color-accordion-active-border: #afb6c5;
  --sl-color-accordion-active-header: #ececf1;
  --sl-color-accordion-active-background: #ffffff;
  --sl-color-accordion-active-foreground: #006666;
  --sl-color-accordion-default-icon: #02242e;
  --sl-color-accordion-default-border: #afb6c5;
  --sl-color-accordion-default-header: #ffffff;
  --sl-color-accordion-default-background: #ffffff;
  --sl-color-accordion-default-foreground: #02242e;
  --sl-color-accordion-disabled-icon: #9198a7;
  --sl-color-accordion-disabled-border: #afb6c5;
  --sl-color-accordion-disabled-header: #ececf1;
  --sl-color-accordion-disabled-background: #ececf1;
  --sl-color-accordion-disabled-foreground: #9198a7;
  --sl-color-focusring-default: #4589be;
  --sl-color-focusring-inversed-copy: #ffffff;
  --sl-color-breadcrumb-divider: #7a818e; /** color.button.info.outline.disabled.foreground */
  --sl-color-progressbar-error-track: #9d2b36;
  --sl-color-progressbar-active-track: #006666;
  --sl-color-progressbar-success-track: #11823e;
  --sl-color-progressbar-warning-track: #fd8b35;
  --sl-color-progressbar-background: #e2e3e9;
  --sl-color-progressbar-indeterminate-track: #006666;
  --sl-color-inline-message-info-icon: #175d79;
  --sl-color-inline-message-info-border: #175d79;
  --sl-color-inline-message-info-background: #e5f2fb;
  --sl-color-inline-message-info-foreground: #175d79;
  --sl-color-inline-message-danger-icon: #9d2b36;
  --sl-color-inline-message-danger-border: #9d2b36;
  --sl-color-inline-message-danger-background: #ffd8da;
  --sl-color-inline-message-danger-foreground: #9d2b36;
  --sl-color-inline-message-success-icon: #0d6732;
  --sl-color-inline-message-success-border: #0d6732;
  --sl-color-inline-message-success-background: #daefe3;
  --sl-color-inline-message-success-foreground: #0d6732;
  --sl-color-inline-message-warning-icon: #985320;
  --sl-color-inline-message-warning-border: #985320;
  --sl-color-inline-message-warning-background: #fedcc2;
  --sl-color-inline-message-warning-foreground: #985320;
  --sl-color-link-idle: #175d79; /** Use for links in their default or hovered state. */
  --sl-color-link-hover: #1a4a66; /** Use for links in hover state. */
  --sl-color-link-muted-idle: #585c61; /** Use for muted links in idle state. */
  --sl-color-link-muted-hover: #1a4a66; /** Use for muted links in hover state. */
  --sl-color-link-muted-active: #1b364b; /** Use for muted links in active state. */
  --sl-color-link-active: #1b364b; /** Use for links in active state. */
  --sl-color-link-focused-idle: #1a4a66; /** Used for the linkcolor of navigation aids in idle state, such as skip links, when they are focused or visible. */
  --sl-color-link-focused-hover: #1b364b; /** Used for the linkcolor of navigation aids in hovered state, such as skip links, when they are focused or visible. */
  --sl-color-link-focused-active: #0d1a24; /** Used for the linkcolor of navigation aids in pressed state, such as skip links, when they are focused or visible. */
  --sl-color-link-inverted-idle: #ffffff; /** Use for inverted links in idle state. */
  --sl-color-link-inverted-hover: #bedfff; /** Use for inverted links in hover state. */
  --sl-color-link-inverted-active: #a3d2ff; /** Use for inverted links in active state. */
  --sl-color-border-bold: rgba(122, 129, 142, 85%); /** A neutral border option that passes min 3:1 contrast ratios. */
  --sl-color-border-info-bold: #175d79; /** Use for borders that highlight informative actions or messages on muted, subtlest and subtle background colors. */
  --sl-color-border-info-plain: #175d79; /** Use for borders that highlight informative actions or messages on elevation.surface background colors. */
  --sl-color-border-info-subtle: rgba(83, 165, 229, 0.2); /** Use for subtle borders on color.background.info background colors. */
  --sl-color-border-input: rgba(122, 129, 142, 85%); /** Use for borders of form UI elements, such as text fields, checkboxes and, radio buttons. */
  --sl-color-border-plain: #e2e3e9; /** Use to visually group or seperate UI elements, such as card, tabs or side panel dividers. */
  --sl-color-border-accent-red-bold: #4d151a; /** Use for bold red borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-red-plain: #c53643; /** Use for plain red borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-blue-bold: #175d79; /** Use for bold blue borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-blue-plain: #175d79; /** Use for plain blue borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-grey-bold: rgba(122, 129, 142, 85%); /** Use for bold grey borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-grey-faint: #ececf1; /** Use for faint grey borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-grey-heavy: #1d1f20; /** Use for heavy grey borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-grey-plain: #e2e3e9; /** Use for plain grey borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-teal-bold: #145b5b; /** Use for bold teal borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-teal-plain: #137271; /** Use for plain teal borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-green-bold: #0a4d25; /** Use for bold green borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-green-plain: #11823e; /** Use for plain green borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-orange-bold: #9d3d0f; /** Use for bold orange borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-orange-plain: #c64c08; /** Use for plain orange borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-purple-bold: #5512c5; /** Use for bold purple borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-purple-plain: #6616eb; /** Use for plain purple borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-yellow-bold: #984908; /** Use for bold yellow borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-accent-yellow-plain: #ffb200; /** Use for plain yellow borders for purely stylistic purposes with no specific meaning. */
  --sl-color-border-caution-bold: #984908; /** Use for borders that highlight caution to help prevent mistakes or errors on muted, subtlest and subtle background colors. */
  --sl-color-border-caution-plain: #ffb200; /** Use for borders that highlight caution to help prevent mistakes or errors on elevation.surface background colors. */
  --sl-color-border-focused: #175d79; /** Use for focus rings of elements in a focus state. */
  --sl-color-border-neutral-bold: rgba(122, 129, 142, 85%); /** Use for borders that highlight neutral actions or messages on muted, subtlest and subtle background colors. */
  --sl-color-border-neutral-plain: #e2e3e9; /** Use for borders that highlight neutral actions or messages on elevation.surface background colors. */
  --sl-color-border-neutral-subtle: rgba(145, 152, 167, 0.2); /** Use for subtle borders on color.background.neutral background colors. */
  --sl-color-border-primary-bold: #145b5b; /** Use for borders that highlight primary actions or messages on muted, subtlest and subtle background colors. */
  --sl-color-border-primary-plain: #137271; /** Use for borders that highlight primary actions or messages on elevation.surface background colors. */
  --sl-color-border-disabled: #c8c8cf; /** Use for borders of elements in a disabled state. */
  --sl-color-border-inverted: #ffffff; /** Use for borders on bold backgrounds. */
  --sl-color-border-negative-bold: #4d151a; /** Use for borders that highlight negative or serious error states on muted, subtlest and subtle background colors. */
  --sl-color-border-negative-plain: #c53643; /** Use for borders that highlight negative or serious error states on elevation.surface background colors. */
  --sl-color-border-positive-bold: #0a4d25; /** Use for borders that highlight a favorable outcome on muted, subtlest and subtle background colors. */
  --sl-color-border-positive-plain: #11823e; /** Use for borders that highlight a favorable outcome on elevation.surface background colors. */
  --sl-color-border-selected: #175d79; /** Use for borders that emphasize selected states, such as tabs or menu items. */
  --sl-color-border-secondary-bold: #e2e3e9; /** Use for borders that highlight secondary actions or messages on muted, subtlest and subtle background colors. */
  --sl-color-border-secondary-plain: #e2e3e9; /** Use for borders that highlight secondary actions or messages on elevation.surface background colors. */
  --sl-color-blanket-plain: rgba(29, 31, 32, 0.8); /** Use for screen overlay that appears with dialogs or drawers. */
  --sl-color-background-bold: rgba(122, 129, 142, 85%); /** Use for backgrounds of elements in a neutral state that require a bold emphasis or a minimum color contrast of 3:1, such as switch backgrounds. */
  --sl-color-background-info-bold: #175d79; /** Use for the background of actions with bold emphasis related to informative messages. */
  --sl-color-background-info-subtle: rgba(83, 165, 229, 0.2); /** A subtle background for informative messages. */
  --sl-color-background-info-subtlest: rgba(83, 165, 229, 0.1); /** The subtlest background for informative messages. */
  --sl-color-background-info-interactive-bold: #0d1a24; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-info-interactive-plain: #53a5e5; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-input-plain: #ffffff; /** Use for backgrounds of form UI elements, such as text fields, checkboxes, and radio buttons. */
  --sl-color-background-input-interactive: #afb6c5; /** Used as transparent layer on top of the input background to indicate the hover state. */
  --sl-color-background-accent-red-bold: #c53643; /** A vibrant red background option, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-red-subtle: rgba(237, 65, 81, 0.2); /** A subtle red background option in idle state, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-red-subtlest: rgba(237, 65, 81, 0.1); /** The subtlest red background option for interactive elements, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-red-interactive-bold: #250a0d; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-accent-red-interactive-plain: #ed4151; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-accent-blue-bold: #175d79; /** A vibrant blue background option, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-blue-subtle: rgba(83, 165, 229, 0.2); /** A subtle blue background option in idle state, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-blue-subtlest: rgba(83, 165, 229, 0.1); /** The subtlest blue background option for interactive elements, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-blue-interactive-bold: #0d1a24; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-accent-blue-interactive-plain: #53a5e5; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-accent-grey-bold: #e2e3e9; /** A vibrant grey background option, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-grey-subtle: rgba(145, 152, 167, 0.2); /** A subtle grey background option in idle state, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-grey-subtlest: rgba(145, 152, 167, 0.1); /** The subtlest grey background option for interactive elements, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-grey-interactive-bold: #7a818e; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-accent-grey-interactive-plain: #afb6c5; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-accent-teal-bold: #137271; /** A vibrant teal background option, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-teal-subtle: rgba(24, 161, 155, 0.2); /** A subtle teal background option in idle state, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-teal-subtlest: rgba(24, 161, 155, 0.1); /** The subtlest teal background option for interactive elements, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-teal-interactive-bold: #062b2d; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-accent-teal-interactive-plain: #18a19b; /** Used as transparent layer on top of the subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-accent-green-bold: #11823e; /** A vibrant green background option, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-green-subtle: rgba(20, 156, 75, 0.2); /** A subtle green background option in idle state, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-green-subtlest: rgba(20, 156, 75, 0.1); /** The subtlest green background option for interactive elements, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-green-interactive-bold: #03180c; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-accent-green-interactive-plain: #149c4b; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-accent-orange-bold: #c64c08; /** A vibrant orange background option, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-orange-subtle: rgba(254, 130, 17, 0.2); /** A subtle orange background option in idle state, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-orange-subtlest: rgba(254, 130, 17, 0.1); /** The subtlest orange background option for interactive elements, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-orange-interactive-bold: #441706; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-accent-orange-interactive-plain: #fe8211; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-accent-purple-bold: #6616eb; /** A vibrant purple background option, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-purple-subtle: rgba(130, 77, 255, 0.2); /** A subtle purple background option in idle state, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-purple-subtlest: rgba(130, 77, 255, 0.1); /** The subtlest purple background option for interactive elements, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-purple-interactive-bold: #29076e; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-accent-purple-interactive-plain: #824dff; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-accent-yellow-bold: #ffb200; /** A vibrant yellow background option, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-yellow-subtle: rgba(255, 178, 0, 0.2); /** A subtle yellow background option in idle state, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-yellow-subtlest: rgba(255, 178, 0, 0.1); /** The subtlest yellow background option for interactive elements, applied purely for stylistic purposes without specific meaning. */
  --sl-color-background-accent-yellow-interactive-bold: #7c3c0b; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-accent-yellow-interactive-plain: #ffb200; /** Used as transparent layer on top of the subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-subtle: rgba(145, 152, 167, 0.2); /** Use for backgrounds of elements in a neutral state with subtle emphasis. */
  --sl-color-background-caution-bold: #ffb200; /** Use for the background of actions with bold emphasis related to messages that communicate caution. */
  --sl-color-background-caution-subtle: rgba(255, 178, 0, 0.2); /** A subtle background option to communicate caution to prevent errors. */
  --sl-color-background-caution-subtlest: rgba(255, 178, 0, 0.1); /** The subtlest background option to communicate caution to prevent errors. */
  --sl-color-background-caution-interactive-bold: #7c3c0b; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-caution-interactive-plain: #ffb200; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-neutral-bold: #ececf1; /** A vibrant background option used for neutral actions. */
  --sl-color-background-neutral-subtle: rgba(145, 152, 167, 0.2); /** A subtle background in the neutral action color. */
  --sl-color-background-neutral-subtlest: rgba(145, 152, 167, 0.1); /** The subtlest background in the neutral action color. */
  --sl-color-background-neutral-interactive-bold: #3d4047; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-neutral-interactive-plain: #afb6c5; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-primary-bold: #137271; /** A vibrant background option used for primary actions. */
  --sl-color-background-primary-subtle: rgba(24, 161, 155, 0.2); /** A subtle background in the primary action color. */
  --sl-color-background-primary-subtlest: rgba(24, 161, 155, 0.1); /** The subtlest background in the primary action color. */
  --sl-color-background-primary-interactive-bold: #062b2d; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-primary-interactive-plain: #18a19b; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-disabled: #ececf1; /** Use for backgrounds of elements in disabled state. */
  --sl-color-background-inverted-bold: #ffffff; /** A solid inverted background option. */
  --sl-color-background-inverted-subtle: rgba(255, 255, 255, 0.2); /** A subtle inverted background option. */
  --sl-color-background-inverted-subtlest: rgba(255, 255, 255, 0.1); /** The subtlest inverted background option. */
  --sl-color-background-inverted-interactive-bold: #7a818e; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-inverted-interactive-plain: #d8d8dd; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-negative-bold: #c53643; /** Use for the background of actions with bold emphasis related to messages that communicate negative or serious error states (e.g., validation errors or irreversible actions). */
  --sl-color-background-negative-subtle: rgba(237, 65, 81, 0.2); /** A subtle background option to communicate negative or serious error states (e.g., validation errors or irreversible actions). */
  --sl-color-background-negative-subtlest: rgba(237, 65, 81, 0.1); /** The subtlest background option to communicate negative or serious error states (e.g., validation errors or irreversible actions). */
  --sl-color-background-negative-interactive-bold: #250a0d; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-negative-interactive-plain: #ed4151; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-positive-bold: #11823e; /** Use for the background of actions with bold emphasis related to messages that communicate a positive outcome. */
  --sl-color-background-positive-subtle: rgba(20, 156, 75, 0.2); /** A subtle background option for communicating a positive outcome. */
  --sl-color-background-positive-subtlest: rgba(20, 156, 75, 0.1); /** The subtlest background option for communicating a positive outcome. */
  --sl-color-background-positive-interactive-bold: #03180c; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-positive-interactive-plain: #149c4b; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-selected-bold: #175d79; /** Use for backgrounds of elements in selected state with bold emphasis, such as in opened dropdowns. */
  --sl-color-background-selected-subtle: rgba(83, 165, 229, 0.2); /** Use for backgrounds of elements in selected state with subtle emphasis, such as in opened dropdowns. */
  --sl-color-background-selected-subtlest: rgba(83, 165, 229, 0.1); /** The subtlest background in the primary action color. */
  --sl-color-background-selected-interactive-bold: #0d1a24; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-selected-interactive-plain: #53a5e5; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-secondary-bold: #e2e3e9; /** A vibrant background option used for secondary actions. */
  --sl-color-background-secondary-subtle: rgba(145, 152, 167, 0.2); /** A subtle background in the secondary action color. */
  --sl-color-background-secondary-subtlest: rgba(145, 152, 167, 0.1); /** The subtlest background in the secondary action color. */
  --sl-color-background-secondary-interactive-bold: #7a818e; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-secondary-interactive-plain: #afb6c5; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-background-interactive-bold: #3d4047; /** Used as transparent layer on top of the bold background to indicate the hover and pressed state. */
  --sl-color-background-interactive-plain: #53a5e5; /** Used as transparent layer on top of the muted, subtlest and subtle background to indicate the hover and pressed state. */
  --sl-color-foreground-bold: #1d1f20; /** Use for headers and labels. */
  --sl-color-foreground-info-bold: #175d79; /** Use for text that communicates informative messages the user needs to be aware of on info backgrounds, such as 'color.background.info.muted' and 'color.background.info.subtle'. */
  --sl-color-foreground-info-plain: #175d79; /** Use for text that communicates informative messages the user needs to be aware of on neutral backgrounds. */
  --sl-color-foreground-info-onBold: #ffffff; /** Use for text that communicates informative messages the user needs to be aware of on info backgrounds, such as 'color.background.info.bold'. */
  --sl-color-foreground-brand: #137271; /** Use for non-interactive brand-reinforcing text. */
  --sl-color-foreground-plain: #3d4047; /** Use for body copy and menu items. */
  --sl-color-foreground-accent-red-bold: #4d151a; /** Use for red text on 'color.background.accent.red.muted' or 'color.background.accent.red.subtle', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-red-plain: #c53643; /** Use for red text on neutral backgrounds for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-red-onBold: #ffffff; /** Use for text on 'color.background.accent.red.bold', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-blue-bold: #175d79; /** Use for blue text on 'color.background.accent.blue.muted' or 'color.background.accent.blue.subtle', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-blue-plain: #175d79; /** Use for blue text on neutral backgrounds for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-blue-onBold: #ffffff; /** Use for text on 'color.background.accent.blue.bold', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-grey-bold: #1d1f20; /** Use for bold grey text for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-grey-faint: #9198a7; /** Use for faint text on neutral backgrounds, providing low contrast. Not intended for primary content, as it does not meet WCAG 2.2 AA contrast requirements. Use sparingly where accessibility isn't a critical concern. */
  --sl-color-foreground-accent-grey-plain: #3d4047; /** Use for plain grey text for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-grey-onBold: #1d1f20; /** Use for text on 'color.background.accent.grey.bold', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-grey-subtle: #585c61; /** Use for subtle grey text for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-grey-subtlest: #585c61; /** Use for muted grey text for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-grey-onInverted: #1d1f20; /** Use for text on 'color.background.inverted', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-teal-bold: #145b5b; /** Use for teal text on 'color.background.accent.teal.muted' or 'color.background.accent.teal.subtle', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-teal-plain: #137271; /** Use for teal text on neutral backgrounds for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-teal-onBold: #ffffff; /** Use for text on 'color.background.accent.blue.bold', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-green-bold: #0a4d25; /** Use for green text on 'color.background.accent.green.muted' or 'color.background.accent.green.subtle', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-green-plain: #11823e; /** Use for green text on neutral backgrounds for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-green-onBold: #ffffff; /** Use for text on 'color.background.accent.green.bold', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-orange-bold: #9d3d0f; /** Use for orange text on 'color.background.accent.orange.muted' or 'color.background.accent.orange.subtle', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-orange-plain: #c64c08; /** Use for orange text on neutral backgrounds for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-orange-onBold: #ffffff; /** Use for text on 'color.background.accent.orange.bold', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-purple-bold: #5512c5; /** Use for purple text on 'color.background.accent.purple.muted' or 'color.background.accent.purple.subtle', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-purple-plain: #7b33ff; /** Use for purple text on neutral backgrounds for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-purple-onBold: #ffffff; /** Use for text on 'color.background.accent.purple.bold', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-yellow-bold: #984908; /** Use for yellow text on 'color.background.accent.yellow.muted' or 'color.background.accent.yellow.subtle', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-accent-yellow-plain: #984908; /** Use for yellow text on neutral backgrounds for purely stylistic purposes with no specific meaning. */
  --sl-color-foreground-accent-yellow-onBold: #1d1f20; /** Use for text on 'color.background.accent.yellow.bold', when used purely for stylistic purposes without specific meaning. */
  --sl-color-foreground-subtle: #585c61; /** Use for subheadings. */
  --sl-color-foreground-caution-bold: #984908; /** Use for text that communicates caution to prevent mistakes or errors on caution backgrounds, such as 'color.background.caution.muted', and 'color.background.caution.subtle'. */
  --sl-color-foreground-caution-plain: #984908; /** Use for text that communicates caution to prevent mistakes or errors on neutral backgrounds. */
  --sl-color-foreground-caution-onBold: #1d1f20; /** Use for text that communicates caution to prevent mistakes or errors on 'color.background.caution.bold'. */
  --sl-color-foreground-neutral-bold: #1d1f20; /** Use for neutral actions on 'color.background.neutral.muted' and 'color.background.secondary.subtle'. */
  --sl-color-foreground-neutral-plain: #585c61; /** Use for neutral actions on 'color.background.neutral.muted' and 'color.background.secondary.subtle'. */
  --sl-color-foreground-neutral-onBold: #1d1f20; /** Use for neutral actions on 'color.background.neutral.bold' */
  --sl-color-foreground-primary-bold: #145b5b; /** Use for primary actions on 'color.background.primary.muted' and 'color.background.primary.subtle'. */
  --sl-color-foreground-primary-onBold: #ffffff; /** Use for primary actions on 'color.background.primary.bold' */
  --sl-color-foreground-disabled: #c8c8cf; /** Use for text in a disabled state. */
  --sl-color-foreground-inverted-bold: #ffffff; /** Use for inverted text on 'color.background.inverted.subtlest', and 'color.background.inverted.subtle'. */
  --sl-color-foreground-inverted-plain: #ffffff; /** Use for plain inverted text. */
  --sl-color-foreground-inverted-onBold: #1d1f20; /** Use for inverted text on 'color.background.inverted.bold'. */
  --sl-color-foreground-negative-bold: #4d151a; /** Use for text that communicates negative or serious error states (e.g., validation errors or irreversible actions) on 'color.background.negative.muted', and 'color.background.negative.subtle'. */
  --sl-color-foreground-negative-plain: #c53643; /** Use for text that communicates negative or serious error states (e.g., validation errors or irreversible actions) on neutral backgrounds. */
  --sl-color-foreground-negative-onBold: #ffffff; /** Use for text that communicates negative or serious error states (e.g., validation errors or irreversible actions) on 'color.background.negative.bold'. */
  --sl-color-foreground-positive-bold: #0a4d25; /** Use for text that communicates a favorable outcome on positive backgrounds, such as 'color.background.positive.muted', and 'color.background.positive.subtle'. */
  --sl-color-foreground-positive-plain: #11823e; /** Use for text that communicates a favorable outcome on neutral backgrounds.' */
  --sl-color-foreground-positive-onBold: #ffffff; /** Use for text that communicates a favorable outcome on positive backgrounds, such as 'color.background.positive.bold'. */
  --sl-color-foreground-selected-bold: #175d79; /** Use for text in selected states (e.g., tabs or menu items). */
  --sl-color-foreground-selected-plain: #175d79; /** Used as selected foreground color on white backgrounds. */
  --sl-color-foreground-selected-onBold: #ffffff; /** Use for text in selected states (e.g., tabs or menu items). */
  --sl-color-foreground-subtlest: rgba(29, 31, 32, 61%); /** Use for placeholders and hints. */
  --sl-color-foreground-secondary-bold: #1d1f20; /** Use for secondary actions on 'color.background.secondary.muted' and 'color.background.secondary.subtle'. */
  --sl-color-foreground-secondary-onBold: #1d1f20; /** Use for secondary actions on 'color.background.secondary.bold' */
  --sl-size-new-icon-lg: 20px;
  --sl-size-new-icon-md: 16px;
  --sl-size-new-icon-sm: 14px;
  --sl-size-new-icon-xl: 24px;
  --sl-size-new-icon-xs: 12px;
  --sl-size-new-icon-2xl: 32px;
  --sl-size-new-icon-3xl: 48px;
  --sl-size-new-icon-4xl: 64px;
  --sl-space-new-lg: 16px; /** Use when components are 'casual friends' */
  --sl-space-new-md: 8px; /** Use when components are 'family' */
  --sl-space-new-sm: 6px; /** Use when components are 'besties' */
  --sl-space-new-xl: 24px; /** Use when components are 'acquaintances' */
  --sl-space-new-xs: 4px;
  --sl-space-new-2xl: 32px; /** Use when components are 'strangers' */
  --sl-space-new-2xs: 2px;
  --sl-space-new-3xl: 64px;
  --sl-space-new-grid-vertical: 14px;
  --sl-space-new-grid-horizontal: 16px;
  --sl-space-new-none: 0px;
  --sl-space-new-input-vertical: 3px;
  --sl-space-new-input-horizontal: 7px;
  --sl-space-new-toggleButton-nonActive-lg: 36px;
  --sl-space-new-toggleButton-nonActive-md: 27px;
  --sl-space-new-toggleButton-nonActive-sm: 23px;
  --sl-space-new-toggleButton-nonActive-lg-2: 36px;
  --sl-space-new-toggleButton-nonActive-md-2: 28px;
  --sl-fontWeight-100: 100; /** hairline, thin */
  --sl-fontWeight-200: 200; /** extra light, ultra, light */
  --sl-fontWeight-300: 300; /** light */
  --sl-fontWeight-400: 400; /** regular, normal, book */
  --sl-fontWeight-500: 500; /** medium */
  --sl-fontWeight-600: 600; /** semi bold, demi bold */
  --sl-fontWeight-700: 700; /** bold */
  --sl-fontWeight-800: 800; /** extra bold, ultra bold */
  --sl-fontWeight-900: 900; /** black, heavy, super */
  --sl-fontWeight-950: 950; /** ultra, ultra black, extra black */
  --sl-dialog-footer-flex-direction: row;
  --sl-dialog-footer-justify-content: end;
  --sl-dialog-header-flex-direction: column;
  --sl-text-case-badge-text-transform: uppercase;
  --sl-component-button-lg: [object Object];
  --sl-component-button-md: [object Object];
  --sl-conceptual-border-width-default: 1px; /** Conceptual Theme Border Token */
  --sl-body-surface-100: #ececf1; /** body.surface.100 */
  --sl-body-surface-200: #e2e3e9; /** body.surface.100 */
  --sl-body-surface-overlay: rgba(122, 129, 142, 0.48); /** body.surface.200 */
  --sl-body-background: #ffffff; /** color.body.background */
  --sl-body-foreground: #02242e; /** color.body.foreground */
  --sl-text-new-body-lg: 400 16px/24px roboto;
  --sl-text-new-body-md: 400 14px/20px roboto;
  --sl-text-new-body-sm: 400 12px/16px roboto;
  --sl-text-new-icon-solid: solid 16px font-awesome-7-pro;
  --sl-text-new-icon-outline: 400 16px font-awesome-7-pro;
  --sl-text-new-input-lg: 14px/32px roboto;
  --sl-text-new-input-md: 14px/24px roboto;
  --sl-text-new-heading-lg: 24px/32px roboto;
  --sl-text-new-heading-md: 16px/20px roboto;
  --sl-text-new-heading-sm: 14px/20px roboto;
  --sl-text-new-heading-xl: 32px/40px roboto;
  --sl-text-new-heading-2xl: 48px/48px roboto;
  --sl-text-new-typeset-fontFamily-body: roboto;
  --sl-text-new-typeset-fontFamily-icon: font-awesome-7-pro;
  --sl-text-new-typeset-fontFamily-heading: raleway;
  --sl-text-new-typeset-fontWeight-regular: 400;
  --sl-text-new-typeset-fontWeight-semiBold: 500;
  --sl-theme-name: Editorial Suite Light;
}