/* TODO: DEPRECATED */
/**
 * HELPER FUNCTIONS / MIXINS
 * ---------------------------------------------------------------------
 */
/*
  calculate the font size based on the following formula:
    size = base * ratio ^ step
  where: 
    ratio is the major second (1.125)
    step is the step in the scale (used as key)
    base is the base font size (14px for max, 11px for min)
    result is rounded to nearest integer (used as value)
  */
/**

debug utility mainly to have consistent and aligned debug messages

*/
/**
 * Returns a map for each typescale in display, 'cds.sys.typescale.headline title body, label. 
 * Each typescale has a role in large, medium and small
 * Each configuration has following keys:
 * - brand: refers to the key in ref-typeface map ('cds.ref.typeface.brand or 'cds.ref.typeface.plain by default')
 * - font-size: the key in the font-size-map 
 *              (default from -3 to 12 which refers to the scale in a ratio map for
                 max font-sizes at max screen sizes, default with minor second ratio)
 * - line-height: the factor to multiply the font-size defined by font-step (-3 to 12) * line-height
 * - weight: refers to the key in ref-typeface map for the weight of the font
 * - tracking: the amount of letter spacing
 */
/** Overrides Sass function that breaks css function. Fix that again */
/**
 *
  * @param {string} $type - 'th', 'td', 'header-row', 'row', 'first-row', 'last-row'
  * @param {string} $suffix - extra selector to append to the end of the selector
 */
:root {
  --cds-ref-typeface-brand: "Asap";
  --cds-ref-typeface-plain: "Open Sans";
  --cds-ref-typeface-weight-black: 900;
  --cds-ref-typeface-weight-extrabold: 800;
  --cds-ref-typeface-weight-bold: 700;
  --cds-ref-typeface-weight-semibold: 600;
  --cds-ref-typeface-weight-medium: 500;
  --cds-ref-typeface-weight-regular: 400;
  --cds-ref-typeface-weight-light: 300;
  --cds-ref-typeface-weight-extralight: 200;
  --cds-ref-typeface-weight-thin: 100;
  --cds-sys-typescale-display-large-brand: var(--cds-ref-typeface-brand);
  --cds-sys-typescale-display-large-line-height: clamp(1.38rem, 0.5rem + 4.42vw, 4.03rem);
  --cds-sys-typescale-display-large-font-size: clamp(1.23rem, 0.44rem + 3.95vw, 3.6rem);
  --cds-sys-typescale-display-large-tracking: -0.016rem;
  --cds-sys-typescale-display-large-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-display-medium-brand: var(--cds-ref-typeface-brand);
  --cds-sys-typescale-display-medium-line-height: clamp(1.3rem, 0.63rem + 3.33vw, 3.3rem);
  --cds-sys-typescale-display-medium-font-size: clamp(1.12rem, 0.55rem + 2.87vw, 2.84rem);
  --cds-sys-typescale-display-medium-tracking: 0;
  --cds-sys-typescale-display-medium-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-display-small-brand: var(--cds-ref-typeface-brand);
  --cds-sys-typescale-display-small-line-height: clamp(1.22rem, 0.73rem + 2.45vw, 2.69rem);
  --cds-sys-typescale-display-small-font-size: clamp(1.02rem, 0.61rem + 2.05vw, 2.25rem);
  --cds-sys-typescale-display-small-tracking: 0;
  --cds-sys-typescale-display-small-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-headline-large-brand: var(--cds-ref-typeface-brand);
  --cds-sys-typescale-headline-large-line-height: clamp(1.21rem, 0.78rem + 2.13vw, 2.49rem);
  --cds-sys-typescale-headline-large-font-size: clamp(0.97rem, 0.63rem + 1.72vw, 2rem);
  --cds-sys-typescale-headline-large-tracking: 0;
  --cds-sys-typescale-headline-large-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-headline-medium-brand: var(--cds-ref-typeface-brand);
  --cds-sys-typescale-headline-medium-line-height: clamp(1.18rem, 0.81rem + 1.83vw, 2.28rem);
  --cds-sys-typescale-headline-medium-font-size: clamp(0.92rem, 0.64rem + 1.42vw, 1.77rem);
  --cds-sys-typescale-headline-medium-tracking: 0;
  --cds-sys-typescale-headline-medium-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-headline-small-brand: var(--cds-ref-typeface-brand);
  --cds-sys-typescale-headline-small-line-height: clamp(1.17rem, 0.86rem + 1.55vw, 2.1rem);
  --cds-sys-typescale-headline-small-font-size: clamp(0.88rem, 0.65rem + 1.17vw, 1.58rem);
  --cds-sys-typescale-headline-small-tracking: 0;
  --cds-sys-typescale-headline-small-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-title-large-brand: var(--cds-ref-typeface-brand);
  --cds-sys-typescale-title-large-line-height: clamp(1.06rem, 0.82rem + 1.2vw, 1.78rem);
  --cds-sys-typescale-title-large-font-size: clamp(0.84rem, 0.65rem + 0.93vw, 1.4rem);
  --cds-sys-typescale-title-large-tracking: 0;
  --cds-sys-typescale-title-large-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-title-medium-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-title-medium-line-height: clamp(1.08rem, 0.95rem + 0.67vw, 1.48rem);
  --cds-sys-typescale-title-medium-font-size: clamp(0.72rem, 0.63rem + 0.43vw, 0.98rem);
  --cds-sys-typescale-title-medium-tracking: 0.009rem;
  --cds-sys-typescale-title-medium-weight: var(--cds-ref-typeface-weight-semibold);
  --cds-sys-typescale-title-small-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-title-small-line-height: clamp(0.98rem, 0.89rem + 0.45vw, 1.25rem);
  --cds-sys-typescale-title-small-font-size: clamp(0.69rem, 0.63rem + 0.32vw, 0.88rem);
  --cds-sys-typescale-title-small-tracking: 0.006rem;
  --cds-sys-typescale-title-small-weight: var(--cds-ref-typeface-weight-semibold);
  --cds-sys-typescale-body-large-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-body-large-line-height: clamp(1.08rem, 0.95rem + 0.67vw, 1.48rem);
  --cds-sys-typescale-body-large-font-size: clamp(0.72rem, 0.63rem + 0.43vw, 0.98rem);
  --cds-sys-typescale-body-large-tracking: 0.031rem;
  --cds-sys-typescale-body-large-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-body-medium-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-body-medium-line-height: clamp(0.98rem, 0.89rem + 0.45vw, 1.25rem);
  --cds-sys-typescale-body-medium-font-size: clamp(0.69rem, 0.63rem + 0.32vw, 0.88rem);
  --cds-sys-typescale-body-medium-tracking: 0.016rem;
  --cds-sys-typescale-body-medium-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-body-small-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-body-small-line-height: clamp(0.87rem, 0.82rem + 0.27vw, 1.03rem);
  --cds-sys-typescale-body-small-font-size: clamp(0.65rem, 0.61rem + 0.22vw, 0.78rem);
  --cds-sys-typescale-body-small-tracking: 0.025rem;
  --cds-sys-typescale-body-small-weight: var(--cds-ref-typeface-weight-regular);
  --cds-sys-typescale-label-large-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-label-large-line-height: clamp(0.94rem, 0.88rem + 0.28vw, 1.11rem);
  --cds-sys-typescale-label-large-font-size: clamp(0.65rem, 0.61rem + 0.22vw, 0.78rem);
  --cds-sys-typescale-label-large-tracking: 0.006rem;
  --cds-sys-typescale-label-large-weight: var(--cds-ref-typeface-weight-semibold);
  --cds-sys-typescale-label-medium-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-label-medium-line-height: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --cds-sys-typescale-label-medium-font-size: clamp(0.62rem, 0.6rem + 0.12vw, 0.69rem);
  --cds-sys-typescale-label-medium-tracking: 0.031rem;
  --cds-sys-typescale-label-medium-weight: var(--cds-ref-typeface-weight-semibold);
  --cds-sys-typescale-label-small-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-label-small-line-height: clamp(0.86rem, 0.85rem + 0.05vw, 0.89rem);
  --cds-sys-typescale-label-small-font-size: clamp(0.59rem, 0.58rem + 0.03vw, 0.61rem);
  --cds-sys-typescale-label-small-tracking: 0.031rem;
  --cds-sys-typescale-label-small-weight: var(--cds-ref-typeface-weight-semibold);
  --cds-sys-typescale-label-overline-brand: var(--cds-ref-typeface-plain);
  --cds-sys-typescale-label-overline-line-height: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --cds-sys-typescale-label-overline-font-size: clamp(0.62rem, 0.6rem + 0.12vw, 0.69rem);
  --cds-sys-typescale-label-overline-tracking: 0.2rem;
  --cds-sys-typescale-label-overline-weight: var(--cds-ref-typeface-weight-light);
  --cds-ref-palette-neutral-0: 0, 0, 0;
  --cds-ref-palette-neutral-4: 18, 13, 12;
  --cds-ref-palette-neutral-6: 24, 18, 17;
  --cds-ref-palette-neutral-10: 32, 26, 25;
  --cds-ref-palette-neutral-12: 37, 30, 29;
  --cds-ref-palette-neutral-17: 47, 40, 39;
  --cds-ref-palette-neutral-20: 54, 47, 45;
  --cds-ref-palette-neutral-22: 59, 51, 50;
  --cds-ref-palette-neutral-90: 237, 224, 221;
  --cds-ref-palette-neutral-92: 243, 229, 227;
  --cds-ref-palette-neutral-94: 248, 235, 233;
  --cds-ref-palette-neutral-95: 251, 238, 235;
  --cds-ref-palette-neutral-96: 254, 241, 238;
  --cds-ref-palette-neutral-98: 255, 248, 246;
  --cds-ref-palette-neutral-100: 255, 255, 255;
  --cds-ref-palette-neutral-variant-20: 59, 45, 43;
  --cds-ref-palette-neutral-variant-30: 83, 67, 64;
  --cds-ref-palette-neutral-variant-40: 108, 91, 88;
  --cds-ref-palette-neutral-variant-50: 133, 115, 112;
  --cds-ref-palette-neutral-variant-60: 160, 140, 137;
  --cds-ref-palette-neutral-variant-70: 188, 167, 163;
  --cds-ref-palette-neutral-variant-80: 216, 194, 190;
  --cds-ref-palette-neutral-variant-90: 245, 221, 217;
  --cds-ref-palette-primary-5: 44, 1, 0;
  --cds-ref-palette-primary-10: 64, 2, 0;
  --cds-ref-palette-primary-13: 75, 3, 0;
  --cds-ref-palette-primary-20: 96, 19, 9;
  --cds-ref-palette-primary-30: 127, 41, 28;
  --cds-ref-palette-primary-40: 159, 64, 49;
  --cds-ref-palette-primary-70: 255, 138, 118;
  --cds-ref-palette-primary-80: 255, 180, 167;
  --cds-ref-palette-primary-82: 255, 188, 176;
  --cds-ref-palette-primary-90: 255, 218, 212;
  --cds-ref-palette-primary-95: 255, 237, 234;
  --cds-ref-palette-primary-99: 255, 251, 255;
  --cds-ref-palette-primary-100: 255, 255, 255;
  --cds-ref-palette-secondary-5: 32, 11, 7;
  --cds-ref-palette-secondary-10: 44, 21, 17;
  --cds-ref-palette-secondary-13: 51, 27, 23;
  --cds-ref-palette-secondary-20: 68, 42, 37;
  --cds-ref-palette-secondary-30: 93, 63, 58;
  --cds-ref-palette-secondary-40: 119, 86, 81;
  --cds-ref-palette-secondary-80: 231, 189, 181;
  --cds-ref-palette-secondary-82: 237, 194, 187;
  --cds-ref-palette-secondary-90: 255, 218, 212;
  --cds-ref-palette-secondary-95: 255, 237, 234;
  --cds-ref-palette-secondary-99: 255, 251, 255;
  --cds-ref-palette-secondary-100: 255, 255, 255;
  --cds-ref-palette-tertiary-5: 24, 16, 0;
  --cds-ref-palette-tertiary-10: 37, 26, 0;
  --cds-ref-palette-tertiary-20: 61, 46, 4;
  --cds-ref-palette-tertiary-30: 86, 69, 25;
  --cds-ref-palette-tertiary-40: 111, 92, 46;
  --cds-ref-palette-tertiary-80: 221, 196, 140;
  --cds-ref-palette-tertiary-82: 227, 201, 145;
  --cds-ref-palette-tertiary-90: 250, 224, 166;
  --cds-ref-palette-tertiary-95: 255, 239, 209;
  --cds-ref-palette-tertiary-99: 255, 251, 255;
  --cds-ref-palette-tertiary-100: 255, 255, 255;
  --cds-ref-palette-error-5: 45, 0, 1;
  --cds-ref-palette-error-10: 65, 0, 2;
  --cds-ref-palette-error-13: 77, 0, 2;
  --cds-ref-palette-error-20: 105, 0, 5;
  --cds-ref-palette-error-30: 147, 0, 10;
  --cds-ref-palette-error-40: 186, 26, 26;
  --cds-ref-palette-error-80: 255, 180, 171;
  --cds-ref-palette-error-82: 255, 188, 179;
  --cds-ref-palette-error-90: 255, 218, 214;
  --cds-ref-palette-error-99: 255, 251, 255;
  --cds-ref-palette-error-100: 255, 255, 255;
  --cds-ref-palette-warn-5: 31, 12, 0;
  --cds-ref-palette-warn-10: 47, 21, 0;
  --cds-ref-palette-warn-13: 56, 26, 0;
  --cds-ref-palette-warn-20: 78, 38, 0;
  --cds-ref-palette-warn-30: 111, 57, 0;
  --cds-ref-palette-warn-40: 145, 76, 0;
  --cds-ref-palette-warn-80: 255, 183, 127;
  --cds-ref-palette-warn-82: 255, 191, 142;
  --cds-ref-palette-warn-90: 255, 220, 196;
  --cds-ref-palette-warn-99: 255, 251, 255;
  --cds-ref-palette-warn-100: 255, 255, 255;
  --cds-ref-palette-success-5: 0, 21, 2;
  --cds-ref-palette-success-10: 0, 34, 5;
  --cds-ref-palette-success-13: 0, 40, 6;
  --cds-ref-palette-success-20: 0, 57, 12;
  --cds-ref-palette-success-30: 0, 83, 22;
  --cds-ref-palette-success-40: 0, 110, 32;
  --cds-ref-palette-success-80: 120, 220, 122;
  --cds-ref-palette-success-82: 126, 226, 127;
  --cds-ref-palette-success-90: 148, 249, 148;
  --cds-ref-palette-success-99: 246, 255, 240;
  --cds-ref-palette-success-100: 255, 255, 255;
  --cds-ref-palette-highlight-5: 22, 16, 0;
  --cds-ref-palette-highlight-10: 34, 27, 0;
  --cds-ref-palette-highlight-13: 41, 33, 0;
  --cds-ref-palette-highlight-20: 58, 48, 0;
  --cds-ref-palette-highlight-30: 84, 70, 0;
  --cds-ref-palette-highlight-80: 233, 196, 0;
  --cds-ref-palette-highlight-82: 239, 201, 15;
  --cds-ref-palette-highlight-90: 255, 225, 110;
  --cds-ref-palette-highlight-95: 255, 240, 195;
  --cds-ref-palette-highlight-100: 255, 255, 255;
  --cds-sys-color-brand: var(--cds-ref-palette-primary-70);
  --cds-sys-color-surface: var(--cds-ref-palette-neutral-100);
  --cds-sys-color-on-surface: var(--cds-ref-palette-neutral-10);
  --cds-sys-color-surface-variant: var(--cds-ref-palette-neutral-variant-90);
  --cds-sys-color-on-surface-variant: var(--cds-ref-palette-neutral-variant-40);
  --cds-sys-color-surface-container-highest: var(--cds-ref-palette-neutral-90);
  --cds-sys-color-surface-container-high: var(--cds-ref-palette-neutral-92);
  --cds-sys-color-surface-container: var(--cds-ref-palette-neutral-94);
  --cds-sys-color-surface-container-low: var(--cds-ref-palette-neutral-96);
  --cds-sys-color-surface-container-lowest: var(--cds-ref-palette-neutral-98);
  --cds-sys-color-surface-inverse: var(--cds-ref-palette-neutral-20);
  --cds-sys-color-on-surface-inverse: var(--cds-ref-palette-neutral-95);
  --cds-sys-color-background: var(--cds-ref-palette-neutral-98);
  --cds-sys-color-on-background: var(--cds-ref-palette-neutral-10);
  --cds-sys-color-scrim: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-shadow: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-primary: var(--cds-ref-palette-primary-40);
  --cds-sys-color-on-primary: var(--cds-ref-palette-primary-99);
  --cds-sys-color-primary-container: var(--cds-ref-palette-primary-90);
  --cds-sys-color-on-primary-container: var(--cds-ref-palette-primary-10);
  --cds-sys-color-primary-fixed: var(--cds-ref-palette-primary-90);
  --cds-sys-color-on-primary-fixed: var(--cds-ref-palette-primary-10);
  --cds-sys-color-primary-fixed-dim: var(--cds-ref-palette-primary-80);
  --cds-sys-color-on-primary-fixed-variant: var(--cds-ref-palette-primary-30);
  --cds-sys-color-primary-inverse: var(--cds-ref-palette-primary-80);
  --cds-sys-color-secondary: var(--cds-ref-palette-secondary-40);
  --cds-sys-color-on-secondary: var(--cds-ref-palette-secondary-99);
  --cds-sys-color-secondary-container: var(--cds-ref-palette-secondary-90);
  --cds-sys-color-on-secondary-container: var(--cds-ref-palette-secondary-10);
  --cds-sys-color-secondary-fixed: var(--cds-ref-palette-secondary-90);
  --cds-sys-color-on-secondary-fixed: var(--cds-ref-palette-secondary-10);
  --cds-sys-color-secondary-fixed-dim: var(--cds-ref-palette-secondary-80);
  --cds-sys-color-on-secondary-fixed-variant: var(--cds-ref-palette-secondary-30);
  --cds-sys-color-tertiary: var(--cds-ref-palette-tertiary-40);
  --cds-sys-color-on-tertiary: var(--cds-ref-palette-tertiary-99);
  --cds-sys-color-tertiary-container: var(--cds-ref-palette-tertiary-90);
  --cds-sys-color-on-tertiary-container: var(--cds-ref-palette-tertiary-10);
  --cds-sys-color-tertiary-fixed: var(--cds-ref-palette-tertiary-90);
  --cds-sys-color-on-tertiary-fixed: var(--cds-ref-palette-tertiary-10);
  --cds-sys-color-tertiary-fixed-dim: var(--cds-ref-palette-tertiary-80);
  --cds-sys-color-on-tertiary-fixed-variant: var(--cds-ref-palette-tertiary-30);
  --cds-sys-color-error: var(--cds-ref-palette-error-40);
  --cds-sys-color-on-error: var(--cds-ref-palette-error-99);
  --cds-sys-color-error-container: var(--cds-ref-palette-error-90);
  --cds-sys-color-on-error-container: var(--cds-ref-palette-error-10);
  --cds-sys-color-warn: var(--cds-ref-palette-warn-40);
  --cds-sys-color-on-warn: var(--cds-ref-palette-warn-99);
  --cds-sys-color-warn-container: var(--cds-ref-palette-warn-90);
  --cds-sys-color-on-warn-container: var(--cds-ref-palette-warn-10);
  --cds-sys-color-success: var(--cds-ref-palette-success-40);
  --cds-sys-color-on-success: var(--cds-ref-palette-success-99);
  --cds-sys-color-success-container: var(--cds-ref-palette-success-90);
  --cds-sys-color-on-success-container: var(--cds-ref-palette-success-10);
  --cds-sys-color-excellent: var(--cds-ref-palette-highlight-80);
  --cds-sys-color-on-excellent: var(--cds-ref-palette-highlight-10);
  --cds-sys-color-excellent-container: var(--cds-ref-palette-highlight-90);
  --cds-sys-color-on-excellent-container: var(--cds-ref-palette-highlight-10);
  --cds-sys-color-highlight: var(--cds-ref-palette-highlight-90);
  --cds-sys-color-on-highlight: var(--cds-ref-palette-highlight-20);
  --cds-sys-color-highlight-container: var(--cds-ref-palette-highlight-95);
  --cds-sys-color-on-highlight-container: var(--cds-ref-palette-highlight-20);
  --cds-sys-color-stroke: var(--cds-ref-palette-neutral-variant-50);
  --cds-sys-color-stroke-variant: var(--cds-ref-palette-neutral-variant-80);
  --cds-sys-spacing-none: 0;
  --cds-sys-spacing-3xs: clamp(0.2rem, 0.18rem + 0.08vw, 0.25rem);
  --cds-sys-spacing-2xs: clamp(0.39rem, 0.35rem + 0.18vw, 0.5rem);
  --cds-sys-spacing-xs: clamp(0.59rem, 0.54rem + 0.27vw, 0.75rem);
  --cds-sys-spacing-s: clamp(0.79rem, 0.72rem + 0.35vw, 1rem);
  --cds-sys-spacing-m: clamp(1.18rem, 1.07rem + 0.53vw, 1.5rem);
  --cds-sys-spacing-l: clamp(1.57rem, 1.43rem + 0.72vw, 2rem);
  --cds-sys-spacing-xl: clamp(2.36rem, 2.15rem + 1.07vw, 3rem);
  --cds-sys-spacing-2xl: clamp(3.14rem, 2.85rem + 1.43vw, 4rem);
  --cds-sys-spacing-3xl: clamp(4.71rem, 4.28rem + 2.15vw, 6rem);
  --cds-sys-shape-none: 0;
  --cds-sys-shape-3xs: 0.06rem;
  --cds-sys-shape-2xs: 0.13rem;
  --cds-sys-shape-xs: 0.25rem;
  --cds-sys-shape-s: 0.5rem;
  --cds-sys-shape-m: 0.75rem;
  --cds-sys-shape-l: 1rem;
  --cds-sys-shape-xl: 1.75rem;
  --cds-sys-shape-full: 624.94rem;
  --cds-sys-elevation-level-0: 0px 0px 0px 0px rgba(var(--cds-sys-elevation-shadow-color), 0.3), 0px 0px 0px 0px rgba(var(--cds-sys-elevation-shadow-color), 0.15);
  --cds-sys-elevation-level-1: 0px 1px 2px 0px rgba(var(--cds-sys-elevation-shadow-color), 0.3), 0px 1px 3px 1px rgba(var(--cds-sys-elevation-shadow-color), 0.15);
  --cds-sys-elevation-level-2: 0px 1px 2px 0px rgba(var(--cds-sys-elevation-shadow-color), 0.3), 0px 2px 6px 2px rgba(var(--cds-sys-elevation-shadow-color), 0.15);
  --cds-sys-elevation-level-3: 0px 1px 3px 0px rgba(var(--cds-sys-elevation-shadow-color), 0.3), 0px 4px 8px 3px rgba(var(--cds-sys-elevation-shadow-color), 0.15);
  --cds-sys-elevation-level-4: 0px 2px 3px 0px rgba(var(--cds-sys-elevation-shadow-color), 0.3), 0px 6px 10px 4px rgba(var(--cds-sys-elevation-shadow-color), 0.15);
  --cds-sys-elevation-level-5: 0px 4px 4px 0px rgba(var(--cds-sys-elevation-shadow-color), 0.3), 0px 8px 12px 6px rgba(var(--cds-sys-elevation-shadow-color), 0.15);
  --cds-sys-elevation-shadow-color: var(--cds-sys-color-shadow);
  --cds-sys-opacity-full: 1;
  --cds-sys-opacity-high: 0.87;
  --cds-sys-opacity-medium: 0.6;
  --cds-sys-opacity-low: 0.38;
  --cds-sys-opacity-disabled: 0.38;
  --cds-sys-opacity-glass: 0.21;
  --cds-sys-opacity-hovered: 0.08;
  --cds-sys-opacity-focused: 0.1;
  --cds-sys-opacity-pressed: 0.12;
  --cds-sys-opacity-dragged: 0.16;
  --cds-sys-opacity-none: 0;
  --cds-sys-opacity-bg: var(--cds-sys-opacity-full);
  --cds-sys-opacity-text: var(--cds-sys-opacity-full);
  --cds-sys-opacity-fill: var(--cds-sys-opacity-full);
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-full);
  --cds-sys-opacity-border: var(--cds-sys-opacity-full);
  --cds-sys-opacity-icon: var(--cds-sys-opacity-full);
  --cds-sys-motion-duration-default: var(--cds-sys-motion-duration-medium-3);
  --cds-sys-motion-duration-none: 0;
  --cds-sys-motion-duration-short-1: 50ms;
  --cds-sys-motion-duration-short-2: 100ms;
  --cds-sys-motion-duration-short-3: 150ms;
  --cds-sys-motion-duration-short-4: 200ms;
  --cds-sys-motion-duration-medium-1: 250ms;
  --cds-sys-motion-duration-medium-2: 300ms;
  --cds-sys-motion-duration-medium-3: 350ms;
  --cds-sys-motion-duration-medium-4: 400ms;
  --cds-sys-motion-duration-long-1: 450ms;
  --cds-sys-motion-duration-long-2: 500ms;
  --cds-sys-motion-duration-long-3: 550ms;
  --cds-sys-motion-duration-long-4: 600ms;
  --cds-sys-motion-duration-extra-long-1: 700ms;
  --cds-sys-motion-duration-extra-long-2: 800ms;
  --cds-sys-motion-duration-extra-long-3: 900ms;
  --cds-sys-motion-duration-extra-long-4: 1000ms;
  --cds-sys-motion-duration-extra-long-5: 1500ms;
  --cds-sys-motion-ease-default: var(--cds-sys-motion-ease-emhasized);
  --cds-sys-motion-ease-linear: cubic-bezier(0, 0, 1, 1);
  --cds-sys-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cds-sys-motion-ease-standard-accelerate: cubic-bezier(0.3, 0, 0, 1);
  --cds-sys-motion-ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --cds-sys-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --cds-sys-motion-ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --cds-sys-motion-ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --cds-sys-filter-blur-none: 0;
  --cds-sys-filter-blur-3xs: 1px;
  --cds-sys-filter-blur-2xs: 2px;
  --cds-sys-filter-blur-xs: 4px;
  --cds-sys-filter-blur-s: 8px;
  --cds-sys-filter-blur-m: 12px;
  --cds-sys-filter-blur-l: 16px;
  --cds-sys-filter-blur-xl: 24px;
  --cds-sys-filter-blur-2xl: 32px;
  --cds-sys-filter-blur-3xl: 64px;
  --cds-sys-filter-drop-shadow-level-1: 0px 1px 2px rgba(var(--cds-sys-elevation-shadow-color), 0.3);
  --cds-sys-filter-drop-shadow-level-2: 0px 1px 2px rgba(var(--cds-sys-elevation-shadow-color), 0.3);
  --cds-sys-filter-drop-shadow-level-3: 0px 1px 3px rgba(var(--cds-sys-elevation-shadow-color), 0.3);
  --cds-sys-filter-drop-shadow-level-4: 0px 2px 3px rgba(var(--cds-sys-elevation-shadow-color), 0.3);
  --cds-sys-filter-drop-shadow-level-5: 0px 4px 4px rgba(var(--cds-sys-elevation-shadow-color), 0.3);
  --cds-sys-dimension-base-3xs: 12rem;
  --cds-sys-dimension-base-2xs: 16rem;
  --cds-sys-dimension-base-xs: 20rem;
  --cds-sys-dimension-base-s: 24rem;
  --cds-sys-dimension-base-m: 28rem;
  --cds-sys-dimension-base-l: 32rem;
  --cds-sys-dimension-base-xl: 36rem;
  --cds-sys-dimension-base-2xl: 42rem;
  --cds-sys-dimension-base-3xl: 48rem;
  --cds-sys-dimension-base-4xl: 56rem;
  --cds-sys-dimension-base-5xl: 64rem;
  --cds-sys-dimension-base-6xl: 72rem;
  --cds-sys-dimension-base-7xl: 80rem;
  --cds-sys-dimension-icon-xl: 2.5rem;
  --cds-sys-dimension-icon-3xl: 4rem;
  --cds-sys-dimension-row-s: 3rem;
  --cds-sys-dimension-row-m: 3.5rem;
}

.table {
  --cds-comp-table-border-color: var(--cds-sys-color-stroke-variant);
  --cds-comp-table-border-opacity: var(--cds-sys-opacity-border);
  --cds-comp-table-header-height: var(--cds-sys-dimension-row-m);
  --cds-comp-table-header-height-factor: 2;
  --cds-comp-table-header-label-brand: var(--cds-sys-typescale-label-large-brand);
  --cds-comp-table-header-label-line-height: var(--cds-sys-typescale-label-large-line-height);
  --cds-comp-table-header-label-font-size: var(--cds-sys-typescale-label-large-font-size);
  --cds-comp-table-header-label-tracking: var(--cds-sys-typescale-label-large-tracking);
  --cds-comp-table-header-label-weight: var(--cds-ref-typeface-weight-bold);
  --cds-comp-table-header-padding-inline: var(--cds-sys-spacing-xs);
  --cds-comp-table-header-padding-block: var(--cds-sys-spacing-2xs);
  --cds-comp-table-cell-text-brand: var(--cds-sys-typescale-body-medium-brand);
  --cds-comp-table-cell-text-line-height: var(--cds-sys-typescale-body-medium-line-height);
  --cds-comp-table-cell-text-font-size: var(--cds-sys-typescale-body-medium-font-size);
  --cds-comp-table-cell-text-tracking: var(--cds-sys-typescale-body-medium-tracking);
  --cds-comp-table-cell-text-weight: var(--cds-sys-typescale-body-medium-weight);
  --cds-comp-table-cell-padding-inline: var(--cds-sys-spacing-xs);
  --cds-comp-table-row-background-color: var(--cds-sys-color-surface);
  --cds-comp-table-row-odd-background-color: var(--cds-sys-color-surface-variant);
  --cds-comp-table-row-hover-background-color: var(--cds-sys-color-on-surface);
  --cds-comp-table-row-hover-opacity: var(--cds-sys-opacity-hovered);
  --cds-comp-table-row-hover-tranistion-duration: var(--cds-sys-motion-duration-default);
  --cds-comp-table-row-hover-tranistion-ease: var(--cds-sys-motion-ease-default);
  --cds-comp-table-group-label-brand: var(--cds-sys-typescale-label-large-brand);
  --cds-comp-table-group-label-line-height: var(--cds-sys-typescale-label-large-line-height);
  --cds-comp-table-group-label-font-size: var(--cds-sys-typescale-label-large-font-size);
  --cds-comp-table-group-label-tracking: var(--cds-sys-typescale-label-large-tracking);
  --cds-comp-table-group-label-weight: var(--cds-ref-typeface-weight-bold);
  --cds-comp-table-group-padding-inline: var(--cds-sys-spacing-xs);
  --cds-comp-table-group-padding-block: var(--cds-sys-spacing-2xs);
  --cds-comp-table-group-color: var(--cds-sys-color-on-surface);
  --cds-comp-table-group-bg: var(--cds-sys-color-surface-container);
  --cds-comp-table-group-divide-width: 3px;
  --cds-comp-table-border-radius: var(--cds-sys-shape-m);
}

.dark,
[data-theme=dark] {
  --cds-sys-color-brand: var(--cds-ref-palette-primary-70);
  --cds-sys-color-surface: var(--cds-ref-palette-neutral-6);
  --cds-sys-color-on-surface: var(--cds-ref-palette-neutral-90);
  --cds-sys-color-surface-variant: var(--cds-ref-palette-neutral-variant-30);
  --cds-sys-color-on-surface-variant: var(--cds-ref-palette-neutral-variant-80);
  --cds-sys-color-surface-container-highest: var(--cds-ref-palette-neutral-22);
  --cds-sys-color-surface-container-high: var(--cds-ref-palette-neutral-17);
  --cds-sys-color-surface-container: var(--cds-ref-palette-neutral-12);
  --cds-sys-color-surface-container-low: var(--cds-ref-palette-neutral-10);
  --cds-sys-color-surface-container-lowest: var(--cds-ref-palette-neutral-4);
  --cds-sys-color-surface-inverse: var(--cds-ref-palette-neutral-90);
  --cds-sys-color-on-surface-inverse: var(--cds-ref-palette-neutral-20);
  --cds-sys-color-background: var(--cds-ref-palette-neutral-6);
  --cds-sys-color-on-background: var(--cds-ref-palette-neutral-90);
  --cds-sys-color-scrim: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-shadow: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-primary: var(--cds-ref-palette-primary-80);
  --cds-sys-color-on-primary: var(--cds-ref-palette-primary-20);
  --cds-sys-color-primary-container: var(--cds-ref-palette-primary-30);
  --cds-sys-color-on-primary-container: var(--cds-ref-palette-primary-90);
  --cds-sys-color-primary-fixed: var(--cds-ref-palette-primary-90);
  --cds-sys-color-on-primary-fixed: var(--cds-ref-palette-primary-10);
  --cds-sys-color-primary-fixed-dim: var(--cds-ref-palette-primary-80);
  --cds-sys-color-on-primary-fixed-variant: var(--cds-ref-palette-primary-30);
  --cds-sys-color-primary-inverse: var(--cds-ref-palette-primary-40);
  --cds-sys-color-secondary: var(--cds-ref-palette-secondary-80);
  --cds-sys-color-on-secondary: var(--cds-ref-palette-secondary-20);
  --cds-sys-color-secondary-container: var(--cds-ref-palette-secondary-30);
  --cds-sys-color-on-secondary-container: var(--cds-ref-palette-secondary-90);
  --cds-sys-color-secondary-fixed: var(--cds-ref-palette-secondary-90);
  --cds-sys-color-on-secondary-fixed: var(--cds-ref-palette-secondary-10);
  --cds-sys-color-secondary-fixed-dim: var(--cds-ref-palette-secondary-80);
  --cds-sys-color-on-secondary-fixed-variant: var(--cds-ref-palette-secondary-30);
  --cds-sys-color-tertiary: var(--cds-ref-palette-tertiary-80);
  --cds-sys-color-on-tertiary: var(--cds-ref-palette-tertiary-20);
  --cds-sys-color-tertiary-container: var(--cds-ref-palette-tertiary-30);
  --cds-sys-color-on-tertiary-container: var(--cds-ref-palette-tertiary-90);
  --cds-sys-color-tertiary-fixed: var(--cds-ref-palette-tertiary-90);
  --cds-sys-color-on-tertiary-fixed: var(--cds-ref-palette-tertiary-10);
  --cds-sys-color-tertiary-fixed-dim: var(--cds-ref-palette-tertiary-80);
  --cds-sys-color-on-tertiary-fixed-variant: var(--cds-ref-palette-tertiary-30);
  --cds-sys-color-error: var(--cds-ref-palette-error-80);
  --cds-sys-color-on-error: var(--cds-ref-palette-error-20);
  --cds-sys-color-error-container: var(--cds-ref-palette-error-30);
  --cds-sys-color-on-error-container: var(--cds-ref-palette-error-90);
  --cds-sys-color-warn: var(--cds-ref-palette-warn-80);
  --cds-sys-color-on-warn: var(--cds-ref-palette-warn-20);
  --cds-sys-color-warn-container: var(--cds-ref-palette-warn-30);
  --cds-sys-color-on-warn-container: var(--cds-ref-palette-warn-90);
  --cds-sys-color-success: var(--cds-ref-palette-success-80);
  --cds-sys-color-on-success: var(--cds-ref-palette-success-20);
  --cds-sys-color-success-container: var(--cds-ref-palette-success-30);
  --cds-sys-color-on-success-container: var(--cds-ref-palette-success-90);
  --cds-sys-color-excellent: var(--cds-ref-palette-excellent-80);
  --cds-sys-color-on-excellent: var(--cds-ref-palette-excellent-20);
  --cds-sys-color-excellent-container: var(--cds-ref-palette-excellent-30);
  --cds-sys-color-on-excellent-container: var(--cds-ref-palette-excellent-90);
  --cds-sys-color-stroke: var(--cds-ref-palette-neutral-variant-60);
  --cds-sys-color-stroke-variant: var(--cds-ref-palette-neutral-variant-30);
}


[data-theme=light-medium-contrast] {
  --cds-sys-color-brand: var(--cds-ref-palette-primary-70);
  --cds-sys-color-surface: var(--cds-ref-palette-neutral-100);
  --cds-sys-color-on-surface: var(--cds-ref-palette-neutral-6);
  --cds-sys-color-surface-variant: var(--cds-ref-palette-neutral-variant-90);
  --cds-sys-color-on-surface-variant: var(--cds-ref-palette-neutral-variant-30);
  --cds-sys-color-surface-container-highest: var(--cds-ref-palette-neutral-90);
  --cds-sys-color-surface-container-high: var(--cds-ref-palette-neutral-92);
  --cds-sys-color-surface-container: var(--cds-ref-palette-neutral-94);
  --cds-sys-color-surface-container-low: var(--cds-ref-palette-neutral-96);
  --cds-sys-color-surface-container-lowest: var(--cds-ref-palette-neutral-98);
  --cds-sys-color-surface-inverse: var(--cds-ref-palette-neutral-20);
  --cds-sys-color-on-surface-inverse: var(--cds-ref-palette-neutral-95);
  --cds-sys-color-background: var(--cds-ref-palette-neutral-98);
  --cds-sys-color-on-background: var(--cds-ref-palette-neutral-10);
  --cds-sys-color-scrim: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-shadow: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-primary: var(--cds-ref-palette-primary-30);
  --cds-sys-color-on-primary: var(--cds-ref-palette-primary-100);
  --cds-sys-color-primary-container: var(--cds-ref-palette-primary-82);
  --cds-sys-color-on-primary-container: var(--cds-ref-palette-primary-5);
  --cds-sys-color-primary-fixed: var(--cds-ref-palette-primary-90);
  --cds-sys-color-on-primary-fixed: var(--cds-ref-palette-primary-5);
  --cds-sys-color-primary-fixed-dim: var(--cds-ref-palette-primary-82);
  --cds-sys-color-on-primary-fixed-variant: var(--cds-ref-palette-primary-20);
  --cds-sys-color-primary-inverse: var(--cds-ref-palette-primary-82);
  --cds-sys-color-secondary: var(--cds-ref-palette-secondary-30);
  --cds-sys-color-on-secondary: var(--cds-ref-palette-secondary-100);
  --cds-sys-color-secondary-container: var(--cds-ref-palette-secondary-82);
  --cds-sys-color-on-secondary-container: var(--cds-ref-palette-secondary-5);
  --cds-sys-color-secondary-fixed: var(--cds-ref-palette-secondary-90);
  --cds-sys-color-on-secondary-fixed: var(--cds-ref-palette-secondary-5);
  --cds-sys-color-secondary-fixed-dim: var(--cds-ref-palette-secondary-82);
  --cds-sys-color-on-secondary-fixed-variant: var(--cds-ref-palette-secondary-20);
  --cds-sys-color-tertiary: var(--cds-ref-palette-tertiary-30);
  --cds-sys-color-on-tertiary: var(--cds-ref-palette-tertiary-100);
  --cds-sys-color-tertiary-container: var(--cds-ref-palette-tertiary-82);
  --cds-sys-color-on-tertiary-container: var(--cds-ref-palette-tertiary-5);
  --cds-sys-color-tertiary-fixed: var(--cds-ref-palette-tertiary-90);
  --cds-sys-color-on-tertiary-fixed: var(--cds-ref-palette-tertiary-5);
  --cds-sys-color-tertiary-fixed-dim: var(--cds-ref-palette-tertiary-82);
  --cds-sys-color-on-tertiary-fixed-variant: var(--cds-ref-palette-tertiary-20);
  --cds-sys-color-error: var(--cds-ref-palette-error-30);
  --cds-sys-color-on-error: var(--cds-ref-palette-error-100);
  --cds-sys-color-error-container: var(--cds-ref-palette-error-82);
  --cds-sys-color-on-error-container: var(--cds-ref-palette-error-5);
  --cds-sys-color-warn: var(--cds-ref-palette-warn-30);
  --cds-sys-color-on-warn: var(--cds-ref-palette-warn-100);
  --cds-sys-color-warn-container: var(--cds-ref-palette-warn-82);
  --cds-sys-color-on-warn-container: var(--cds-ref-palette-warn-5);
  --cds-sys-color-success: var(--cds-ref-palette-success-30);
  --cds-sys-color-on-success: var(--cds-ref-palette-success-100);
  --cds-sys-color-success-container: var(--cds-ref-palette-success-82);
  --cds-sys-color-on-success-container: var(--cds-ref-palette-success-5);
  --cds-sys-color-excellent: var(--cds-ref-palette-highlight-30);
  --cds-sys-color-on-excellent: var(--cds-ref-palette-highlight-100);
  --cds-sys-color-excellent-container: var(--cds-ref-palette-highlight-82);
  --cds-sys-color-on-excellent-container: var(--cds-ref-palette-highlight-5);
  --cds-sys-color-highlight: var(--cds-ref-palette-highlight-30);
  --cds-sys-color-on-highlight: var(--cds-ref-palette-highlight-100);
  --cds-sys-color-highlight-container: var(--cds-ref-palette-highlight-82);
  --cds-sys-color-on-highlight-container: var(--cds-ref-palette-highlight-5);
  --cds-sys-color-stroke: var(--cds-ref-palette-neutral-variant-40);
  --cds-sys-color-stroke-variant: var(--cds-ref-palette-neutral-variant-70);
}


[data-theme=light-high-contrast] {
  --cds-sys-color-brand: var(--cds-ref-palette-primary-70);
  --cds-sys-color-surface: var(--cds-ref-palette-neutral-100);
  --cds-sys-color-on-surface: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-surface-variant: var(--cds-ref-palette-neutral-variant-90);
  --cds-sys-color-on-surface-variant: var(--cds-ref-palette-neutral-variant-20);
  --cds-sys-color-surface-container-highest: var(--cds-ref-palette-neutral-90);
  --cds-sys-color-surface-container-high: var(--cds-ref-palette-neutral-92);
  --cds-sys-color-surface-container: var(--cds-ref-palette-neutral-94);
  --cds-sys-color-surface-container-low: var(--cds-ref-palette-neutral-96);
  --cds-sys-color-surface-container-lowest: var(--cds-ref-palette-neutral-98);
  --cds-sys-color-surface-inverse: var(--cds-ref-palette-neutral-20);
  --cds-sys-color-on-surface-inverse: var(--cds-ref-palette-neutral-100);
  --cds-sys-color-background: var(--cds-ref-palette-neutral-98);
  --cds-sys-color-on-background: var(--cds-ref-palette-neutral-10);
  --cds-sys-color-scrim: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-shadow: var(--cds-ref-palette-neutral-0);
  --cds-sys-color-primary: var(--cds-ref-palette-primary-13);
  --cds-sys-color-on-primary: var(--cds-ref-palette-primary-100);
  --cds-sys-color-primary-container: var(--cds-ref-palette-primary-30);
  --cds-sys-color-on-primary-container: var(--cds-ref-palette-primary-100);
  --cds-sys-color-primary-fixed: var(--cds-ref-palette-primary-30);
  --cds-sys-color-on-primary-fixed: var(--cds-ref-palette-primary-100);
  --cds-sys-color-primary-fixed-dim: var(--cds-ref-palette-primary-20);
  --cds-sys-color-on-primary-fixed-variant: var(--cds-ref-palette-primary-95);
  --cds-sys-color-primary-inverse: var(--cds-ref-palette-primary-95);
  --cds-sys-color-secondary: var(--cds-ref-palette-secondary-13);
  --cds-sys-color-on-secondary: var(--cds-ref-palette-secondary-100);
  --cds-sys-color-secondary-container: var(--cds-ref-palette-secondary-30);
  --cds-sys-color-on-secondary-container: var(--cds-ref-palette-secondary-100);
  --cds-sys-color-secondary-fixed: var(--cds-ref-palette-secondary-30);
  --cds-sys-color-on-secondary-fixed: var(--cds-ref-palette-secondary-100);
  --cds-sys-color-secondary-fixed-dim: var(--cds-ref-palette-secondary-20);
  --cds-sys-color-on-secondary-fixed-variant: var(--cds-ref-palette-secondary-95);
  --cds-sys-color-tertiary: var(--cds-ref-palette-tertiary-30);
  --cds-sys-color-on-tertiary: var(--cds-ref-palette-tertiary-100);
  --cds-sys-color-tertiary-container: var(--cds-ref-palette-tertiary-30);
  --cds-sys-color-on-tertiary-container: var(--cds-ref-palette-tertiary-100);
  --cds-sys-color-tertiary-fixed: var(--cds-ref-palette-tertiary-30);
  --cds-sys-color-on-tertiary-fixed: var(--cds-ref-palette-tertiary-100);
  --cds-sys-color-tertiary-fixed-dim: var(--cds-ref-palette-tertiary-20);
  --cds-sys-color-on-tertiary-fixed-variant: var(--cds-ref-palette-tertiary-95);
  --cds-sys-color-error: var(--cds-ref-palette-error-13);
  --cds-sys-color-on-error: var(--cds-ref-palette-error-100);
  --cds-sys-color-error-container: var(--cds-ref-palette-error-30);
  --cds-sys-color-on-error-container: var(--cds-ref-palette-error-100);
  --cds-sys-color-warn: var(--cds-ref-palette-warn-13);
  --cds-sys-color-on-warn: var(--cds-ref-palette-warn-100);
  --cds-sys-color-warn-container: var(--cds-ref-palette-warn-30);
  --cds-sys-color-on-warn-container: var(--cds-ref-palette-warn-100);
  --cds-sys-color-success: var(--cds-ref-palette-success-13);
  --cds-sys-color-on-success: var(--cds-ref-palette-success-100);
  --cds-sys-color-success-container: var(--cds-ref-palette-success-30);
  --cds-sys-color-on-success-container: var(--cds-ref-palette-success-100);
  --cds-sys-color-excellent: var(--cds-ref-palette-highlight-13);
  --cds-sys-color-on-excellent: var(--cds-ref-palette-highlight-100);
  --cds-sys-color-excellent-container: var(--cds-ref-palette-highlight-30);
  --cds-sys-color-on-excellent-container: var(--cds-ref-palette-highlight-100);
  --cds-sys-color-highlight: var(--cds-ref-palette-highlight-13);
  --cds-sys-color-on-highlight: var(--cds-ref-palette-highlight-100);
  --cds-sys-color-highlight-container: var(--cds-ref-palette-highlight-30);
  --cds-sys-color-on-highlight-container: var(--cds-ref-palette-highlight-100);
  --cds-sys-color-stroke: var(--cds-ref-palette-neutral-variant-30);
  --cds-sys-color-stroke-variant: var(--cds-ref-palette-neutral-variant-60);
}

.weight-black {
  font-weight: var(--cds-ref-typeface-weight-black);
}

.weight-extrabold {
  font-weight: var(--cds-ref-typeface-weight-extrabold);
}

.weight-bold {
  font-weight: var(--cds-ref-typeface-weight-bold);
}

.weight-semibold {
  font-weight: var(--cds-ref-typeface-weight-semibold);
}

.weight-medium {
  font-weight: var(--cds-ref-typeface-weight-medium);
}

.weight-regular {
  font-weight: var(--cds-ref-typeface-weight-regular);
}

.weight-light {
  font-weight: var(--cds-ref-typeface-weight-light);
}

.weight-extralight {
  font-weight: var(--cds-ref-typeface-weight-extralight);
}

.weight-thin {
  font-weight: var(--cds-ref-typeface-weight-thin);
}

h1, .display-large {
  font-family: var(--cds-sys-typescale-display-large-brand);
  font-size: var(--cds-sys-typescale-display-large-font-size);
  font-weight: var(--cds-sys-typescale-display-large-weight);
  line-height: var(--cds-sys-typescale-display-large-line-height);
  letter-spacing: var(--cds-sys-typescale-display-large-tracking);
}

h2, .display-medium {
  font-family: var(--cds-sys-typescale-display-medium-brand);
  font-size: var(--cds-sys-typescale-display-medium-font-size);
  font-weight: var(--cds-sys-typescale-display-medium-weight);
  line-height: var(--cds-sys-typescale-display-medium-line-height);
  letter-spacing: var(--cds-sys-typescale-display-medium-tracking);
}

h3, .display-small {
  font-family: var(--cds-sys-typescale-display-small-brand);
  font-size: var(--cds-sys-typescale-display-small-font-size);
  font-weight: var(--cds-sys-typescale-display-small-weight);
  line-height: var(--cds-sys-typescale-display-small-line-height);
  letter-spacing: var(--cds-sys-typescale-display-small-tracking);
}

h4, .headline-large {
  font-family: var(--cds-sys-typescale-headline-large-brand);
  font-size: var(--cds-sys-typescale-headline-large-font-size);
  font-weight: var(--cds-sys-typescale-headline-large-weight);
  line-height: var(--cds-sys-typescale-headline-large-line-height);
  letter-spacing: var(--cds-sys-typescale-headline-large-tracking);
}

h5, .headline-medium {
  font-family: var(--cds-sys-typescale-headline-medium-brand);
  font-size: var(--cds-sys-typescale-headline-medium-font-size);
  font-weight: var(--cds-sys-typescale-headline-medium-weight);
  line-height: var(--cds-sys-typescale-headline-medium-line-height);
  letter-spacing: var(--cds-sys-typescale-headline-medium-tracking);
}

h6, .headline-small {
  font-family: var(--cds-sys-typescale-headline-small-brand);
  font-size: var(--cds-sys-typescale-headline-small-font-size);
  font-weight: var(--cds-sys-typescale-headline-small-weight);
  line-height: var(--cds-sys-typescale-headline-small-line-height);
  letter-spacing: var(--cds-sys-typescale-headline-small-tracking);
}

.title-large {
  font-family: var(--cds-sys-typescale-title-large-brand);
  font-size: var(--cds-sys-typescale-title-large-font-size);
  font-weight: var(--cds-sys-typescale-title-large-weight);
  line-height: var(--cds-sys-typescale-title-large-line-height);
  letter-spacing: var(--cds-sys-typescale-title-large-tracking);
}

.title-medium {
  font-family: var(--cds-sys-typescale-title-medium-brand);
  font-size: var(--cds-sys-typescale-title-medium-font-size);
  font-weight: var(--cds-sys-typescale-title-medium-weight);
  line-height: var(--cds-sys-typescale-title-medium-line-height);
  letter-spacing: var(--cds-sys-typescale-title-medium-tracking);
}

.title-small {
  font-family: var(--cds-sys-typescale-title-small-brand);
  font-size: var(--cds-sys-typescale-title-small-font-size);
  font-weight: var(--cds-sys-typescale-title-small-weight);
  line-height: var(--cds-sys-typescale-title-small-line-height);
  letter-spacing: var(--cds-sys-typescale-title-small-tracking);
}

.body-large {
  font-family: var(--cds-sys-typescale-body-large-brand);
  font-size: var(--cds-sys-typescale-body-large-font-size);
  font-weight: var(--cds-sys-typescale-body-large-weight);
  line-height: var(--cds-sys-typescale-body-large-line-height);
  letter-spacing: var(--cds-sys-typescale-body-large-tracking);
}

p, article, body, td, .body-medium {
  font-family: var(--cds-sys-typescale-body-medium-brand);
  font-size: var(--cds-sys-typescale-body-medium-font-size);
  font-weight: var(--cds-sys-typescale-body-medium-weight);
  line-height: var(--cds-sys-typescale-body-medium-line-height);
  letter-spacing: var(--cds-sys-typescale-body-medium-tracking);
}

small, .body-small {
  font-family: var(--cds-sys-typescale-body-small-brand);
  font-size: var(--cds-sys-typescale-body-small-font-size);
  font-weight: var(--cds-sys-typescale-body-small-weight);
  line-height: var(--cds-sys-typescale-body-small-line-height);
  letter-spacing: var(--cds-sys-typescale-body-small-tracking);
}

.label-large {
  font-family: var(--cds-sys-typescale-label-large-brand);
  font-size: var(--cds-sys-typescale-label-large-font-size);
  font-weight: var(--cds-sys-typescale-label-large-weight);
  line-height: var(--cds-sys-typescale-label-large-line-height);
  letter-spacing: var(--cds-sys-typescale-label-large-tracking);
}

th, .label-medium {
  font-family: var(--cds-sys-typescale-label-medium-brand);
  font-size: var(--cds-sys-typescale-label-medium-font-size);
  font-weight: var(--cds-sys-typescale-label-medium-weight);
  line-height: var(--cds-sys-typescale-label-medium-line-height);
  letter-spacing: var(--cds-sys-typescale-label-medium-tracking);
}

.label-small {
  font-family: var(--cds-sys-typescale-label-small-brand);
  font-size: var(--cds-sys-typescale-label-small-font-size);
  font-weight: var(--cds-sys-typescale-label-small-weight);
  line-height: var(--cds-sys-typescale-label-small-line-height);
  letter-spacing: var(--cds-sys-typescale-label-small-tracking);
}

.label-overline {
  font-family: var(--cds-sys-typescale-label-overline-brand);
  font-size: var(--cds-sys-typescale-label-overline-font-size);
  font-weight: var(--cds-sys-typescale-label-overline-weight);
  line-height: var(--cds-sys-typescale-label-overline-line-height);
  letter-spacing: var(--cds-sys-typescale-label-overline-tracking);
}

.transparent {
  background-color: transparent;
}

.brand {
  background-color: rgba(var(--cds-sys-color-brand), var(--cds-sys-opacity-bg));
}

.surface {
  background-color: rgba(var(--cds-sys-color-surface), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-text));
}

.bg-surface {
  background-color: rgba(var(--cds-sys-color-surface), var(--cds-sys-opacity-bg));
}

.on-surface {
  color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-text));
}

.surface-variant {
  background-color: rgba(var(--cds-sys-color-surface-variant), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-text));
}

.on-surface-variant {
  color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-text));
}

.surface-container-highest {
  background-color: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-opacity-bg));
}

.bg-surface-container-highest {
  background-color: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-opacity-bg));
}

.surface-container-high {
  background-color: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-opacity-bg));
}

.bg-surface-container-high {
  background-color: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-opacity-bg));
}

.surface-container {
  background-color: rgba(var(--cds-sys-color-surface-container), var(--cds-sys-opacity-bg));
}

.surface-container-low {
  background-color: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-opacity-bg));
}

.bg-surface-container-low {
  background-color: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-opacity-bg));
}

.surface-container-lowest {
  background-color: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-opacity-bg));
}

.bg-surface-container-lowest {
  background-color: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-opacity-bg));
}

.surface-inverse {
  background-color: rgba(var(--cds-sys-color-surface-inverse), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-surface-inverse), var(--cds-sys-opacity-text));
}

.background {
  background-color: rgba(var(--cds-sys-color-background), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-background), var(--cds-sys-opacity-text));
}

.bg-background {
  background-color: rgba(var(--cds-sys-color-background), var(--cds-sys-opacity-bg));
}

.on-background {
  color: rgba(var(--cds-sys-color-on-background), var(--cds-sys-opacity-text));
}

.scrim {
  background-color: rgba(var(--cds-sys-color-scrim), var(--cds-sys-opacity-bg));
}

.primary {
  background-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-text));
}

.bg-primary {
  background-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-bg));
}

.text-primary {
  color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-text));
}

.on-primary {
  color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-text));
}

.primary-container {
  background-color: rgba(var(--cds-sys-color-primary-container), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-text));
}

.bg-primary-container {
  background-color: rgba(var(--cds-sys-color-primary-container), var(--cds-sys-opacity-bg));
}

.on-primary-container {
  color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-text));
}

.primary-fixed {
  background-color: rgba(var(--cds-sys-color-primary-fixed), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-primary-fixed), var(--cds-sys-opacity-text));
}

.bg-primary-fixed {
  background-color: rgba(var(--cds-sys-color-primary-fixed), var(--cds-sys-opacity-bg));
}

.on-primary-fixed {
  color: rgba(var(--cds-sys-color-on-primary-fixed), var(--cds-sys-opacity-text));
}

.primary-fixed-dim {
  background-color: rgba(var(--cds-sys-color-primary-fixed-dim), var(--cds-sys-opacity-bg));
}

.on-primary-fixed-variant {
  color: rgba(var(--cds-sys-color-on-primary-fixed-variant), var(--cds-sys-opacity-text));
}

.secondary {
  background-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-text));
}

.bg-secondary {
  background-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-bg));
}

.text-secondary {
  color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-text));
}

.on-secondary {
  color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-text));
}

.secondary-container {
  background-color: rgba(var(--cds-sys-color-secondary-container), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-text));
}

.bg-secondary-container {
  background-color: rgba(var(--cds-sys-color-secondary-container), var(--cds-sys-opacity-bg));
}

.on-secondary-container {
  color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-text));
}

.secondary-fixed {
  background-color: rgba(var(--cds-sys-color-secondary-fixed), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-secondary-fixed), var(--cds-sys-opacity-text));
}

.bg-secondary-fixed {
  background-color: rgba(var(--cds-sys-color-secondary-fixed), var(--cds-sys-opacity-bg));
}

.on-secondary-fixed {
  color: rgba(var(--cds-sys-color-on-secondary-fixed), var(--cds-sys-opacity-text));
}

.secondary-fixed-dim {
  background-color: rgba(var(--cds-sys-color-secondary-fixed-dim), var(--cds-sys-opacity-bg));
}

.on-secondary-fixed-variant {
  color: rgba(var(--cds-sys-color-on-secondary-fixed-variant), var(--cds-sys-opacity-text));
}

.tertiary {
  background-color: rgba(var(--cds-sys-color-tertiary), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-tertiary), var(--cds-sys-opacity-text));
}

.bg-tertiary {
  background-color: rgba(var(--cds-sys-color-tertiary), var(--cds-sys-opacity-bg));
}

.text-tertiary {
  color: rgba(var(--cds-sys-color-tertiary), var(--cds-sys-opacity-text));
}

.error {
  background-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-text));
}

.bg-error {
  background-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-bg));
}

.text-error {
  color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-text));
}

.on-error {
  color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-text));
}

.error-container {
  background-color: rgba(var(--cds-sys-color-error-container), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-text));
}

.bg-error-container {
  background-color: rgba(var(--cds-sys-color-error-container), var(--cds-sys-opacity-bg));
}

.on-error-container {
  color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-text));
}

.warn {
  background-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-text));
}

.bg-warn {
  background-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-bg));
}

.text-warn {
  color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-text));
}

.on-warn {
  color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-text));
}

.warn-container {
  background-color: rgba(var(--cds-sys-color-warn-container), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-text));
}

.on-warn-container {
  color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-text));
}

.success {
  background-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-text));
}

.bg-success {
  background-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-bg));
}

.text-success {
  color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-text));
}

.on-success {
  color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-text));
}

.success-container {
  background-color: rgba(var(--cds-sys-color-success-container), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-text));
}

.bg-success-container {
  background-color: rgba(var(--cds-sys-color-success-container), var(--cds-sys-opacity-bg));
}

.on-success-container {
  color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-text));
}

.excellent {
  background-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-text));
}

.bg-excellent {
  background-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-bg));
}

.text-excellent {
  color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-text));
}

.on-excellent {
  color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-text));
}

.excellent-container {
  background-color: rgba(var(--cds-sys-color-excellent-container), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-text));
}

.on-excellent-container {
  color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-text));
}

.stroke {
  background-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-bg));
}

.border {
  border-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-transparent {
  border-color: transparent;
}

.border-b {
  border-block-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-b-transparent {
  border-block-color: transparent;
}

.border-i {
  border-inline-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-i-transparent {
  border-inline-color: transparent;
}

.border-bs {
  border-block-start-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-bs-transparent {
  border-block-start-color: transparent;
}

.border-be {
  border-block-end-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-be-transparent {
  border-block-end-color: transparent;
}

.border-is {
  border-inline-start-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-is-transparent {
  border-inline-start-color: transparent;
}

.border-ie {
  border-inline-end-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-ie-transparent {
  border-inline-end-color: transparent;
}

.border-on-surface {
  border-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-border));
}

.border-b-on-surface {
  border-block-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-border));
}

.border-i-on-surface {
  border-inline-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-border));
}

.border-bs-on-surface {
  border-block-start-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-border));
}

.border-be-on-surface {
  border-block-end-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-border));
}

.border-is-on-surface {
  border-inline-start-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-border));
}

.border-ie-on-surface {
  border-inline-end-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-border));
}

.border-on-surface-variant {
  border-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-border));
}

.border-b-on-surface-variant {
  border-block-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-border));
}

.border-i-on-surface-variant {
  border-inline-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-border));
}

.border-bs-on-surface-variant {
  border-block-start-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-border));
}

.border-be-on-surface-variant {
  border-block-end-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-border));
}

.border-is-on-surface-variant {
  border-inline-start-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-border));
}

.border-ie-on-surface-variant {
  border-inline-end-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-border));
}

.border-primary {
  border-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-border));
}

.border-b-primary {
  border-block-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-border));
}

.border-i-primary {
  border-inline-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-border));
}

.border-bs-primary {
  border-block-start-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-border));
}

.border-be-primary {
  border-block-end-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-border));
}

.border-is-primary {
  border-inline-start-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-border));
}

.border-ie-primary {
  border-inline-end-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-border));
}

.border-on-primary {
  border-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-border));
}

.border-b-on-primary {
  border-block-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-border));
}

.border-i-on-primary {
  border-inline-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-border));
}

.border-bs-on-primary {
  border-block-start-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-border));
}

.border-be-on-primary {
  border-block-end-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-border));
}

.border-is-on-primary {
  border-inline-start-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-border));
}

.border-ie-on-primary {
  border-inline-end-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-border));
}

.border-on-primary-container {
  border-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-border));
}

.border-b-on-primary-container {
  border-block-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-border));
}

.border-i-on-primary-container {
  border-inline-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-border));
}

.border-bs-on-primary-container {
  border-block-start-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-border));
}

.border-be-on-primary-container {
  border-block-end-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-border));
}

.border-is-on-primary-container {
  border-inline-start-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-border));
}

.border-ie-on-primary-container {
  border-inline-end-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-border));
}

.border-secondary {
  border-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-border));
}

.border-b-secondary {
  border-block-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-border));
}

.border-i-secondary {
  border-inline-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-border));
}

.border-bs-secondary {
  border-block-start-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-border));
}

.border-be-secondary {
  border-block-end-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-border));
}

.border-is-secondary {
  border-inline-start-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-border));
}

.border-ie-secondary {
  border-inline-end-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-border));
}

.border-on-secondary {
  border-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-border));
}

.border-b-on-secondary {
  border-block-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-border));
}

.border-i-on-secondary {
  border-inline-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-border));
}

.border-bs-on-secondary {
  border-block-start-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-border));
}

.border-be-on-secondary {
  border-block-end-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-border));
}

.border-is-on-secondary {
  border-inline-start-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-border));
}

.border-ie-on-secondary {
  border-inline-end-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-border));
}

.border-on-secondary-container {
  border-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-border));
}

.border-b-on-secondary-container {
  border-block-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-border));
}

.border-i-on-secondary-container {
  border-inline-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-border));
}

.border-bs-on-secondary-container {
  border-block-start-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-border));
}

.border-be-on-secondary-container {
  border-block-end-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-border));
}

.border-is-on-secondary-container {
  border-inline-start-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-border));
}

.border-ie-on-secondary-container {
  border-inline-end-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-border));
}

.border-error {
  border-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-border));
}

.border-b-error {
  border-block-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-border));
}

.border-i-error {
  border-inline-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-border));
}

.border-bs-error {
  border-block-start-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-border));
}

.border-be-error {
  border-block-end-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-border));
}

.border-is-error {
  border-inline-start-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-border));
}

.border-ie-error {
  border-inline-end-color: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-border));
}

.border-on-error {
  border-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-border));
}

.border-b-on-error {
  border-block-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-border));
}

.border-i-on-error {
  border-inline-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-border));
}

.border-bs-on-error {
  border-block-start-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-border));
}

.border-be-on-error {
  border-block-end-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-border));
}

.border-is-on-error {
  border-inline-start-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-border));
}

.border-ie-on-error {
  border-inline-end-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-border));
}

.border-on-error-container {
  border-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-border));
}

.border-b-on-error-container {
  border-block-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-border));
}

.border-i-on-error-container {
  border-inline-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-border));
}

.border-bs-on-error-container {
  border-block-start-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-border));
}

.border-be-on-error-container {
  border-block-end-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-border));
}

.border-is-on-error-container {
  border-inline-start-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-border));
}

.border-ie-on-error-container {
  border-inline-end-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-border));
}

.border-warn {
  border-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-border));
}

.border-b-warn {
  border-block-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-border));
}

.border-i-warn {
  border-inline-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-border));
}

.border-bs-warn {
  border-block-start-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-border));
}

.border-be-warn {
  border-block-end-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-border));
}

.border-is-warn {
  border-inline-start-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-border));
}

.border-ie-warn {
  border-inline-end-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-border));
}

.border-on-warn {
  border-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-border));
}

.border-b-on-warn {
  border-block-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-border));
}

.border-i-on-warn {
  border-inline-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-border));
}

.border-bs-on-warn {
  border-block-start-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-border));
}

.border-be-on-warn {
  border-block-end-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-border));
}

.border-is-on-warn {
  border-inline-start-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-border));
}

.border-ie-on-warn {
  border-inline-end-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-border));
}

.border-on-warn-container {
  border-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-border));
}

.border-b-on-warn-container {
  border-block-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-border));
}

.border-i-on-warn-container {
  border-inline-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-border));
}

.border-bs-on-warn-container {
  border-block-start-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-border));
}

.border-be-on-warn-container {
  border-block-end-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-border));
}

.border-is-on-warn-container {
  border-inline-start-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-border));
}

.border-ie-on-warn-container {
  border-inline-end-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-border));
}

.border-success {
  border-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-border));
}

.border-b-success {
  border-block-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-border));
}

.border-i-success {
  border-inline-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-border));
}

.border-bs-success {
  border-block-start-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-border));
}

.border-be-success {
  border-block-end-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-border));
}

.border-is-success {
  border-inline-start-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-border));
}

.border-ie-success {
  border-inline-end-color: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-border));
}

.border-on-success {
  border-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-border));
}

.border-b-on-success {
  border-block-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-border));
}

.border-i-on-success {
  border-inline-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-border));
}

.border-bs-on-success {
  border-block-start-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-border));
}

.border-be-on-success {
  border-block-end-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-border));
}

.border-is-on-success {
  border-inline-start-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-border));
}

.border-ie-on-success {
  border-inline-end-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-border));
}

.border-on-success-container {
  border-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-border));
}

.border-b-on-success-container {
  border-block-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-border));
}

.border-i-on-success-container {
  border-inline-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-border));
}

.border-bs-on-success-container {
  border-block-start-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-border));
}

.border-be-on-success-container {
  border-block-end-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-border));
}

.border-is-on-success-container {
  border-inline-start-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-border));
}

.border-ie-on-success-container {
  border-inline-end-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-border));
}

.border-excellent {
  border-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-border));
}

.border-b-excellent {
  border-block-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-border));
}

.border-i-excellent {
  border-inline-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-border));
}

.border-bs-excellent {
  border-block-start-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-border));
}

.border-be-excellent {
  border-block-end-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-border));
}

.border-is-excellent {
  border-inline-start-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-border));
}

.border-ie-excellent {
  border-inline-end-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-border));
}

.border-on-excellent {
  border-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-border));
}

.border-b-on-excellent {
  border-block-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-border));
}

.border-i-on-excellent {
  border-inline-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-border));
}

.border-bs-on-excellent {
  border-block-start-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-border));
}

.border-be-on-excellent {
  border-block-end-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-border));
}

.border-is-on-excellent {
  border-inline-start-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-border));
}

.border-ie-on-excellent {
  border-inline-end-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-border));
}

.border-on-excellent-container {
  border-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-border));
}

.border-b-on-excellent-container {
  border-block-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-border));
}

.border-i-on-excellent-container {
  border-inline-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-border));
}

.border-bs-on-excellent-container {
  border-block-start-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-border));
}

.border-be-on-excellent-container {
  border-block-end-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-border));
}

.border-is-on-excellent-container {
  border-inline-start-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-border));
}

.border-ie-on-excellent-container {
  border-inline-end-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-border));
}

.border-stroke {
  border-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-b-stroke {
  border-block-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-i-stroke {
  border-inline-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-bs-stroke {
  border-block-start-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-be-stroke {
  border-block-end-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-is-stroke {
  border-inline-start-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-ie-stroke {
  border-inline-end-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-border));
}

.border-stroke-variant {
  border-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-opacity-border));
}

.border-b-stroke-variant {
  border-block-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-opacity-border));
}

.border-i-stroke-variant {
  border-inline-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-opacity-border));
}

.border-bs-stroke-variant {
  border-block-start-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-opacity-border));
}

.border-be-stroke-variant {
  border-block-end-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-opacity-border));
}

.border-is-stroke-variant {
  border-inline-start-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-opacity-border));
}

.border-ie-stroke-variant {
  border-inline-end-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-opacity-border));
}

.ring {
  --cds-comp-ring-color: var(--cds-sys-color-secondary);
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface);
}

.ring-primary {
  --cds-comp-ring-color: var(--cds-sys-color-primary);
}

.ring-secondary {
  --cds-comp-ring-color: var(--cds-sys-color-secondary);
}

.ring-offset-surface {
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface);
}

.ring-offset-surface-variant {
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface-variant);
}

.ring-offset-surface-container-highest {
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface-container-highest);
}

.ring-offset-surface-container-high {
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface-container-high);
}

.ring-offset-surface-container {
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface-container);
}

.ring-offset-surface-container-low {
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface-container-low);
}

.ring-offset-surface-container-lowest {
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface-container-lowest);
}

.ring-offset-background {
  --cds-comp-ring-offset-color: var(--cds-sys-color-background);
}

.ring-offset-scrim {
  --cds-comp-ring-offset-color: var(--cds-sys-color-scrim);
}

.ring-offset-primary {
  --cds-comp-ring-offset-color: var(--cds-sys-color-primary);
}

.ring-offset-primary-container {
  --cds-comp-ring-offset-color: var(--cds-sys-color-primary-container);
}

.ring-offset-primary-fixed {
  --cds-comp-ring-offset-color: var(--cds-sys-color-primary-fixed);
}

.ring-offset-primary-fixed-dim {
  --cds-comp-ring-offset-color: var(--cds-sys-color-primary-fixed-dim);
}

.ring-offset-secondary {
  --cds-comp-ring-offset-color: var(--cds-sys-color-secondary);
}

.ring-offset-secondary-container {
  --cds-comp-ring-offset-color: var(--cds-sys-color-secondary-container);
}

.ring-offset-secondary-fixed {
  --cds-comp-ring-offset-color: var(--cds-sys-color-secondary-fixed);
}

.ring-offset-secondary-fixed-dim {
  --cds-comp-ring-offset-color: var(--cds-sys-color-secondary-fixed-dim);
}

.ring-offset-error {
  --cds-comp-ring-offset-color: var(--cds-sys-color-error);
}

.ring-offset-error-container {
  --cds-comp-ring-offset-color: var(--cds-sys-color-error-container);
}

.ring-offset-warn {
  --cds-comp-ring-offset-color: var(--cds-sys-color-warn);
}

.ring-offset-warn-container {
  --cds-comp-ring-offset-color: var(--cds-sys-color-warn-container);
}

.ring-offset-success {
  --cds-comp-ring-offset-color: var(--cds-sys-color-success);
}

.ring-offset-success-container {
  --cds-comp-ring-offset-color: var(--cds-sys-color-success-container);
}

.ring-offset-excellent {
  --cds-comp-ring-offset-color: var(--cds-sys-color-excellent);
}

.ring-offset-excellent-container {
  --cds-comp-ring-offset-color: var(--cds-sys-color-excellent-container);
}

.fill-current {
  fill: currentColor;
}

.fill-transparent {
  fill: transparent;
}

.fill-brand {
  fill: rgba(var(--cds-sys-color-brand), var(--cds-sys-opacity-fill));
}

.fill-surface {
  fill: rgba(var(--cds-sys-color-surface), var(--cds-sys-opacity-fill));
}

.fill-on-surface {
  fill: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-fill));
}

.fill-surface-variant {
  fill: rgba(var(--cds-sys-color-surface-variant), var(--cds-sys-opacity-fill));
}

.fill-on-surface-variant {
  fill: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-fill));
}

.fill-surface-container-highest {
  fill: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-opacity-fill));
}

.fill-surface-container-high {
  fill: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-opacity-fill));
}

.fill-surface-container {
  fill: rgba(var(--cds-sys-color-surface-container), var(--cds-sys-opacity-fill));
}

.fill-surface-container-low {
  fill: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-opacity-fill));
}

.fill-surface-container-lowest {
  fill: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-opacity-fill));
}

.fill-surface-inverse {
  fill: rgba(var(--cds-sys-color-surface-inverse), var(--cds-sys-opacity-fill));
}

.fill-on-surface-inverse {
  fill: rgba(var(--cds-sys-color-on-surface-inverse), var(--cds-sys-opacity-fill));
}

.fill-background {
  fill: rgba(var(--cds-sys-color-background), var(--cds-sys-opacity-fill));
}

.fill-on-background {
  fill: rgba(var(--cds-sys-color-on-background), var(--cds-sys-opacity-fill));
}

.fill-primary {
  fill: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-fill));
}

.fill-on-primary {
  fill: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-fill));
}

.fill-primary-container {
  fill: rgba(var(--cds-sys-color-primary-container), var(--cds-sys-opacity-fill));
}

.fill-on-primary-container {
  fill: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-fill));
}

.fill-primary-fixed {
  fill: rgba(var(--cds-sys-color-primary-fixed), var(--cds-sys-opacity-fill));
}

.fill-on-primary-fixed {
  fill: rgba(var(--cds-sys-color-on-primary-fixed), var(--cds-sys-opacity-fill));
}

.fill-primary-fixed-dim {
  fill: rgba(var(--cds-sys-color-primary-fixed-dim), var(--cds-sys-opacity-fill));
}

.fill-on-primary-fixed-variant {
  fill: rgba(var(--cds-sys-color-on-primary-fixed-variant), var(--cds-sys-opacity-fill));
}

.fill-primary-inverse {
  fill: rgba(var(--cds-sys-color-primary-inverse), var(--cds-sys-opacity-fill));
}

.fill-secondary {
  fill: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-fill));
}

.fill-on-secondary {
  fill: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-fill));
}

.fill-secondary-container {
  fill: rgba(var(--cds-sys-color-secondary-container), var(--cds-sys-opacity-fill));
}

.fill-on-secondary-container {
  fill: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-fill));
}

.fill-secondary-fixed {
  fill: rgba(var(--cds-sys-color-secondary-fixed), var(--cds-sys-opacity-fill));
}

.fill-on-secondary-fixed {
  fill: rgba(var(--cds-sys-color-on-secondary-fixed), var(--cds-sys-opacity-fill));
}

.fill-secondary-fixed-dim {
  fill: rgba(var(--cds-sys-color-secondary-fixed-dim), var(--cds-sys-opacity-fill));
}

.fill-on-secondary-fixed-variant {
  fill: rgba(var(--cds-sys-color-on-secondary-fixed-variant), var(--cds-sys-opacity-fill));
}

.fill-tertiary {
  fill: rgba(var(--cds-sys-color-tertiary), var(--cds-sys-opacity-fill));
}

.fill-on-tertiary {
  fill: rgba(var(--cds-sys-color-on-tertiary), var(--cds-sys-opacity-fill));
}

.fill-tertiary-container {
  fill: rgba(var(--cds-sys-color-tertiary-container), var(--cds-sys-opacity-fill));
}

.fill-on-tertiary-container {
  fill: rgba(var(--cds-sys-color-on-tertiary-container), var(--cds-sys-opacity-fill));
}

.fill-tertiary-fixed {
  fill: rgba(var(--cds-sys-color-tertiary-fixed), var(--cds-sys-opacity-fill));
}

.fill-on-tertiary-fixed {
  fill: rgba(var(--cds-sys-color-on-tertiary-fixed), var(--cds-sys-opacity-fill));
}

.fill-tertiary-fixed-dim {
  fill: rgba(var(--cds-sys-color-tertiary-fixed-dim), var(--cds-sys-opacity-fill));
}

.fill-on-tertiary-fixed-variant {
  fill: rgba(var(--cds-sys-color-on-tertiary-fixed-variant), var(--cds-sys-opacity-fill));
}

.fill-error {
  fill: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-fill));
}

.fill-on-error {
  fill: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-fill));
}

.fill-error-container {
  fill: rgba(var(--cds-sys-color-error-container), var(--cds-sys-opacity-fill));
}

.fill-on-error-container {
  fill: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-fill));
}

.fill-warn {
  fill: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-fill));
}

.fill-on-warn {
  fill: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-fill));
}

.fill-warn-container {
  fill: rgba(var(--cds-sys-color-warn-container), var(--cds-sys-opacity-fill));
}

.fill-on-warn-container {
  fill: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-fill));
}

.fill-success {
  fill: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-fill));
}

.fill-on-success {
  fill: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-fill));
}

.fill-success-container {
  fill: rgba(var(--cds-sys-color-success-container), var(--cds-sys-opacity-fill));
}

.fill-on-success-container {
  fill: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-fill));
}

.fill-excellent {
  fill: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-fill));
}

.fill-on-excellent {
  fill: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-fill));
}

.fill-excellent-container {
  fill: rgba(var(--cds-sys-color-excellent-container), var(--cds-sys-opacity-fill));
}

.fill-on-excellent-container {
  fill: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-fill));
}

.fill-highlight {
  fill: rgba(var(--cds-sys-color-highlight), var(--cds-sys-opacity-fill));
}

.fill-on-highlight {
  fill: rgba(var(--cds-sys-color-on-highlight), var(--cds-sys-opacity-fill));
}

.fill-highlight-container {
  fill: rgba(var(--cds-sys-color-highlight-container), var(--cds-sys-opacity-fill));
}

.fill-on-highlight-container {
  fill: rgba(var(--cds-sys-color-on-highlight-container), var(--cds-sys-opacity-fill));
}

.fill-stroke {
  fill: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-fill));
}

.stroke-current {
  stroke: currentColor;
}

.stroke-transparent {
  stroke: transparent;
}

.stroke-brand {
  stroke: rgba(var(--cds-sys-color-brand), var(--cds-sys-opacity-stroke));
}

.stroke-surface {
  stroke: rgba(var(--cds-sys-color-surface), var(--cds-sys-opacity-stroke));
}

.stroke-on-surface {
  stroke: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-opacity-stroke));
}

.stroke-surface-variant {
  stroke: rgba(var(--cds-sys-color-surface-variant), var(--cds-sys-opacity-stroke));
}

.stroke-on-surface-variant {
  stroke: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-opacity-stroke));
}

.stroke-surface-container-highest {
  stroke: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-opacity-stroke));
}

.stroke-surface-container-high {
  stroke: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-opacity-stroke));
}

.stroke-surface-container {
  stroke: rgba(var(--cds-sys-color-surface-container), var(--cds-sys-opacity-stroke));
}

.stroke-surface-container-low {
  stroke: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-opacity-stroke));
}

.stroke-surface-container-lowest {
  stroke: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-opacity-stroke));
}

.stroke-surface-inverse {
  stroke: rgba(var(--cds-sys-color-surface-inverse), var(--cds-sys-opacity-stroke));
}

.stroke-on-surface-inverse {
  stroke: rgba(var(--cds-sys-color-on-surface-inverse), var(--cds-sys-opacity-stroke));
}

.stroke-background {
  stroke: rgba(var(--cds-sys-color-background), var(--cds-sys-opacity-stroke));
}

.stroke-on-background {
  stroke: rgba(var(--cds-sys-color-on-background), var(--cds-sys-opacity-stroke));
}

.stroke-primary {
  stroke: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-stroke));
}

.stroke-on-primary {
  stroke: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-stroke));
}

.stroke-on-primary-container {
  stroke: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-opacity-stroke));
}

.stroke-primary-fixed {
  stroke: rgba(var(--cds-sys-color-primary-fixed), var(--cds-sys-opacity-stroke));
}

.stroke-on-primary-fixed {
  stroke: rgba(var(--cds-sys-color-on-primary-fixed), var(--cds-sys-opacity-stroke));
}

.stroke-primary-fixed-dim {
  stroke: rgba(var(--cds-sys-color-primary-fixed-dim), var(--cds-sys-opacity-stroke));
}

.stroke-on-primary-fixed-variant {
  stroke: rgba(var(--cds-sys-color-on-primary-fixed-variant), var(--cds-sys-opacity-stroke));
}

.stroke-secondary {
  stroke: rgba(var(--cds-sys-color-secondary), var(--cds-sys-opacity-stroke));
}

.stroke-on-secondary {
  stroke: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-opacity-stroke));
}

.stroke-on-secondary-container {
  stroke: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-opacity-stroke));
}

.stroke-secondary-fixed {
  stroke: rgba(var(--cds-sys-color-secondary-fixed), var(--cds-sys-opacity-stroke));
}

.stroke-on-secondary-fixed {
  stroke: rgba(var(--cds-sys-color-on-secondary-fixed), var(--cds-sys-opacity-stroke));
}

.stroke-secondary-fixed-dim {
  stroke: rgba(var(--cds-sys-color-secondary-fixed-dim), var(--cds-sys-opacity-stroke));
}

.stroke-on-secondary-fixed-variant {
  stroke: rgba(var(--cds-sys-color-on-secondary-fixed-variant), var(--cds-sys-opacity-stroke));
}

.stroke-tertiary {
  stroke: rgba(var(--cds-sys-color-tertiary), var(--cds-sys-opacity-stroke));
}

.stroke-on-tertiary {
  stroke: rgba(var(--cds-sys-color-on-tertiary), var(--cds-sys-opacity-stroke));
}

.stroke-on-tertiary-container {
  stroke: rgba(var(--cds-sys-color-on-tertiary-container), var(--cds-sys-opacity-stroke));
}

.stroke-tertiary-fixed {
  stroke: rgba(var(--cds-sys-color-tertiary-fixed), var(--cds-sys-opacity-stroke));
}

.stroke-on-tertiary-fixed {
  stroke: rgba(var(--cds-sys-color-on-tertiary-fixed), var(--cds-sys-opacity-stroke));
}

.stroke-tertiary-fixed-dim {
  stroke: rgba(var(--cds-sys-color-tertiary-fixed-dim), var(--cds-sys-opacity-stroke));
}

.stroke-on-tertiary-fixed-variant {
  stroke: rgba(var(--cds-sys-color-on-tertiary-fixed-variant), var(--cds-sys-opacity-stroke));
}

.stroke-error {
  stroke: rgba(var(--cds-sys-color-error), var(--cds-sys-opacity-stroke));
}

.stroke-on-error {
  stroke: rgba(var(--cds-sys-color-on-error), var(--cds-sys-opacity-stroke));
}

.stroke-on-error-container {
  stroke: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-opacity-stroke));
}

.stroke-warn {
  stroke: rgba(var(--cds-sys-color-warn), var(--cds-sys-opacity-stroke));
}

.stroke-on-warn {
  stroke: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-opacity-stroke));
}

.stroke-on-warn-container {
  stroke: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-opacity-stroke));
}

.stroke-success {
  stroke: rgba(var(--cds-sys-color-success), var(--cds-sys-opacity-stroke));
}

.stroke-on-success {
  stroke: rgba(var(--cds-sys-color-on-success), var(--cds-sys-opacity-stroke));
}

.stroke-on-success-container {
  stroke: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-opacity-stroke));
}

.stroke-excellent {
  stroke: rgba(var(--cds-sys-color-excellent), var(--cds-sys-opacity-stroke));
}

.stroke-on-excellent {
  stroke: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-opacity-stroke));
}

.stroke-on-excellent-container {
  stroke: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-opacity-stroke));
}

.stroke-highlight {
  stroke: rgba(var(--cds-sys-color-highlight), var(--cds-sys-opacity-stroke));
}

.stroke-on-highlight {
  stroke: rgba(var(--cds-sys-color-on-highlight), var(--cds-sys-opacity-stroke));
}

.stroke-on-highlight-container {
  stroke: rgba(var(--cds-sys-color-on-highlight-container), var(--cds-sys-opacity-stroke));
}

.stroke-stroke {
  stroke: rgba(var(--cds-sys-color-stroke), var(--cds-sys-opacity-stroke));
}

.stroke-stroke-variant {
  stroke: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-opacity-stroke));
}

.hover\:primary:hover {
  background-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-opacity-bg));
  color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-opacity-text));
}

.focus\:ring:focus {
  --cds-comp-ring-color: var(--cds-sys-color-secondary);
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface);
}

.focus-visible\:ring:focus-visible {
  --cds-comp-ring-color: var(--cds-sys-color-secondary);
  --cds-comp-ring-offset-color: var(--cds-sys-color-surface);
}

.corner-none {
  border-radius: var(--cds-sys-shape-none);
}

.corner-top-none {
  border-top-left-radius: var(--cds-sys-shape-none);
  border-top-right-radius: var(--cds-sys-shape-none);
}

.corner-bottom-none {
  border-bottom-left-radius: var(--cds-sys-shape-none);
  border-bottom-right-radius: var(--cds-sys-shape-none);
}

.corner-left-none {
  border-top-left-radius: var(--cds-sys-shape-none);
  border-bottom-left-radius: var(--cds-sys-shape-none);
}

.corner-right-none {
  border-top-right-radius: var(--cds-sys-shape-none);
  border-bottom-right-radius: var(--cds-sys-shape-none);
}

.corner-top-left-none {
  border-top-left-radius: var(--cds-sys-shape-none);
}

.corner-top-right-none {
  border-top-right-radius: var(--cds-sys-shape-none);
}

.corner-bottom-right-none {
  border-bottom-right-radius: var(--cds-sys-shape-none);
}

.corner-bottom-left-none {
  border-bottom-left-radius: var(--cds-sys-shape-none);
}

.corner-3xs {
  border-radius: var(--cds-sys-shape-3xs);
}

.corner-top-3xs {
  border-top-left-radius: var(--cds-sys-shape-3xs);
  border-top-right-radius: var(--cds-sys-shape-3xs);
}

.corner-bottom-3xs {
  border-bottom-left-radius: var(--cds-sys-shape-3xs);
  border-bottom-right-radius: var(--cds-sys-shape-3xs);
}

.corner-left-3xs {
  border-top-left-radius: var(--cds-sys-shape-3xs);
  border-bottom-left-radius: var(--cds-sys-shape-3xs);
}

.corner-right-3xs {
  border-top-right-radius: var(--cds-sys-shape-3xs);
  border-bottom-right-radius: var(--cds-sys-shape-3xs);
}

.corner-top-left-3xs {
  border-top-left-radius: var(--cds-sys-shape-3xs);
}

.corner-top-right-3xs {
  border-top-right-radius: var(--cds-sys-shape-3xs);
}

.corner-bottom-right-3xs {
  border-bottom-right-radius: var(--cds-sys-shape-3xs);
}

.corner-bottom-left-3xs {
  border-bottom-left-radius: var(--cds-sys-shape-3xs);
}

.corner-2xs {
  border-radius: var(--cds-sys-shape-2xs);
}

.corner-top-2xs {
  border-top-left-radius: var(--cds-sys-shape-2xs);
  border-top-right-radius: var(--cds-sys-shape-2xs);
}

.corner-bottom-2xs {
  border-bottom-left-radius: var(--cds-sys-shape-2xs);
  border-bottom-right-radius: var(--cds-sys-shape-2xs);
}

.corner-left-2xs {
  border-top-left-radius: var(--cds-sys-shape-2xs);
  border-bottom-left-radius: var(--cds-sys-shape-2xs);
}

.corner-right-2xs {
  border-top-right-radius: var(--cds-sys-shape-2xs);
  border-bottom-right-radius: var(--cds-sys-shape-2xs);
}

.corner-top-left-2xs {
  border-top-left-radius: var(--cds-sys-shape-2xs);
}

.corner-top-right-2xs {
  border-top-right-radius: var(--cds-sys-shape-2xs);
}

.corner-bottom-right-2xs {
  border-bottom-right-radius: var(--cds-sys-shape-2xs);
}

.corner-bottom-left-2xs {
  border-bottom-left-radius: var(--cds-sys-shape-2xs);
}

.corner-xs {
  border-radius: var(--cds-sys-shape-xs);
}

.corner-top-xs {
  border-top-left-radius: var(--cds-sys-shape-xs);
  border-top-right-radius: var(--cds-sys-shape-xs);
}

.corner-bottom-xs {
  border-bottom-left-radius: var(--cds-sys-shape-xs);
  border-bottom-right-radius: var(--cds-sys-shape-xs);
}

.corner-left-xs {
  border-top-left-radius: var(--cds-sys-shape-xs);
  border-bottom-left-radius: var(--cds-sys-shape-xs);
}

.corner-right-xs {
  border-top-right-radius: var(--cds-sys-shape-xs);
  border-bottom-right-radius: var(--cds-sys-shape-xs);
}

.corner-top-left-xs {
  border-top-left-radius: var(--cds-sys-shape-xs);
}

.corner-top-right-xs {
  border-top-right-radius: var(--cds-sys-shape-xs);
}

.corner-bottom-right-xs {
  border-bottom-right-radius: var(--cds-sys-shape-xs);
}

.corner-bottom-left-xs {
  border-bottom-left-radius: var(--cds-sys-shape-xs);
}

.corner-s {
  border-radius: var(--cds-sys-shape-s);
}

.corner-top-s {
  border-top-left-radius: var(--cds-sys-shape-s);
  border-top-right-radius: var(--cds-sys-shape-s);
}

.corner-bottom-s {
  border-bottom-left-radius: var(--cds-sys-shape-s);
  border-bottom-right-radius: var(--cds-sys-shape-s);
}

.corner-left-s {
  border-top-left-radius: var(--cds-sys-shape-s);
  border-bottom-left-radius: var(--cds-sys-shape-s);
}

.corner-right-s {
  border-top-right-radius: var(--cds-sys-shape-s);
  border-bottom-right-radius: var(--cds-sys-shape-s);
}

.corner-top-left-s {
  border-top-left-radius: var(--cds-sys-shape-s);
}

.corner-top-right-s {
  border-top-right-radius: var(--cds-sys-shape-s);
}

.corner-bottom-right-s {
  border-bottom-right-radius: var(--cds-sys-shape-s);
}

.corner-bottom-left-s {
  border-bottom-left-radius: var(--cds-sys-shape-s);
}

.corner-m {
  border-radius: var(--cds-sys-shape-m);
}

.corner-top-m {
  border-top-left-radius: var(--cds-sys-shape-m);
  border-top-right-radius: var(--cds-sys-shape-m);
}

.corner-bottom-m {
  border-bottom-left-radius: var(--cds-sys-shape-m);
  border-bottom-right-radius: var(--cds-sys-shape-m);
}

.corner-left-m {
  border-top-left-radius: var(--cds-sys-shape-m);
  border-bottom-left-radius: var(--cds-sys-shape-m);
}

.corner-right-m {
  border-top-right-radius: var(--cds-sys-shape-m);
  border-bottom-right-radius: var(--cds-sys-shape-m);
}

.corner-top-left-m {
  border-top-left-radius: var(--cds-sys-shape-m);
}

.corner-top-right-m {
  border-top-right-radius: var(--cds-sys-shape-m);
}

.corner-bottom-right-m {
  border-bottom-right-radius: var(--cds-sys-shape-m);
}

.corner-bottom-left-m {
  border-bottom-left-radius: var(--cds-sys-shape-m);
}

.corner-l {
  border-radius: var(--cds-sys-shape-l);
}

.corner-top-l {
  border-top-left-radius: var(--cds-sys-shape-l);
  border-top-right-radius: var(--cds-sys-shape-l);
}

.corner-bottom-l {
  border-bottom-left-radius: var(--cds-sys-shape-l);
  border-bottom-right-radius: var(--cds-sys-shape-l);
}

.corner-left-l {
  border-top-left-radius: var(--cds-sys-shape-l);
  border-bottom-left-radius: var(--cds-sys-shape-l);
}

.corner-right-l {
  border-top-right-radius: var(--cds-sys-shape-l);
  border-bottom-right-radius: var(--cds-sys-shape-l);
}

.corner-top-left-l {
  border-top-left-radius: var(--cds-sys-shape-l);
}

.corner-top-right-l {
  border-top-right-radius: var(--cds-sys-shape-l);
}

.corner-bottom-right-l {
  border-bottom-right-radius: var(--cds-sys-shape-l);
}

.corner-bottom-left-l {
  border-bottom-left-radius: var(--cds-sys-shape-l);
}

.corner-xl {
  border-radius: var(--cds-sys-shape-xl);
}

.corner-top-xl {
  border-top-left-radius: var(--cds-sys-shape-xl);
  border-top-right-radius: var(--cds-sys-shape-xl);
}

.corner-bottom-xl {
  border-bottom-left-radius: var(--cds-sys-shape-xl);
  border-bottom-right-radius: var(--cds-sys-shape-xl);
}

.corner-left-xl {
  border-top-left-radius: var(--cds-sys-shape-xl);
  border-bottom-left-radius: var(--cds-sys-shape-xl);
}

.corner-right-xl {
  border-top-right-radius: var(--cds-sys-shape-xl);
  border-bottom-right-radius: var(--cds-sys-shape-xl);
}

.corner-top-left-xl {
  border-top-left-radius: var(--cds-sys-shape-xl);
}

.corner-top-right-xl {
  border-top-right-radius: var(--cds-sys-shape-xl);
}

.corner-bottom-right-xl {
  border-bottom-right-radius: var(--cds-sys-shape-xl);
}

.corner-bottom-left-xl {
  border-bottom-left-radius: var(--cds-sys-shape-xl);
}

.corner-full {
  border-radius: var(--cds-sys-shape-full);
}

.corner-top-full {
  border-top-left-radius: var(--cds-sys-shape-full);
  border-top-right-radius: var(--cds-sys-shape-full);
}

.corner-bottom-full {
  border-bottom-left-radius: var(--cds-sys-shape-full);
  border-bottom-right-radius: var(--cds-sys-shape-full);
}

.corner-left-full {
  border-top-left-radius: var(--cds-sys-shape-full);
  border-bottom-left-radius: var(--cds-sys-shape-full);
}

.corner-right-full {
  border-top-right-radius: var(--cds-sys-shape-full);
  border-bottom-right-radius: var(--cds-sys-shape-full);
}

.corner-top-left-full {
  border-top-left-radius: var(--cds-sys-shape-full);
}

.corner-top-right-full {
  border-top-right-radius: var(--cds-sys-shape-full);
}

.corner-bottom-right-full {
  border-bottom-right-radius: var(--cds-sys-shape-full);
}

.corner-bottom-left-full {
  border-bottom-left-radius: var(--cds-sys-shape-full);
}

.corner-inherit {
  border-radius: inherit;
}

.p-none {
  padding: var(--cds-sys-spacing-none);
}

.p-b-none {
  padding-block: var(--cds-sys-spacing-none);
}

.p-i-none {
  padding-inline: var(--cds-sys-spacing-none);
}

.p-bs-none {
  padding-block-start: var(--cds-sys-spacing-none);
}

.p-be-none {
  padding-block-end: var(--cds-sys-spacing-none);
}

.p-is-none {
  padding-inline-start: var(--cds-sys-spacing-none);
}

.p-ie-none {
  padding-inline-end: var(--cds-sys-spacing-none);
}

.p-3xs {
  padding: var(--cds-sys-spacing-3xs);
}

.p-b-3xs {
  padding-block: var(--cds-sys-spacing-3xs);
}

.p-i-3xs {
  padding-inline: var(--cds-sys-spacing-3xs);
}

.p-bs-3xs {
  padding-block-start: var(--cds-sys-spacing-3xs);
}

.p-be-3xs {
  padding-block-end: var(--cds-sys-spacing-3xs);
}

.p-is-3xs {
  padding-inline-start: var(--cds-sys-spacing-3xs);
}

.p-ie-3xs {
  padding-inline-end: var(--cds-sys-spacing-3xs);
}

.p-2xs {
  padding: var(--cds-sys-spacing-2xs);
}

.p-b-2xs {
  padding-block: var(--cds-sys-spacing-2xs);
}

.p-i-2xs {
  padding-inline: var(--cds-sys-spacing-2xs);
}

.p-bs-2xs {
  padding-block-start: var(--cds-sys-spacing-2xs);
}

.p-be-2xs {
  padding-block-end: var(--cds-sys-spacing-2xs);
}

.p-is-2xs {
  padding-inline-start: var(--cds-sys-spacing-2xs);
}

.p-ie-2xs {
  padding-inline-end: var(--cds-sys-spacing-2xs);
}

.p-xs {
  padding: var(--cds-sys-spacing-xs);
}

.p-b-xs {
  padding-block: var(--cds-sys-spacing-xs);
}

.p-i-xs {
  padding-inline: var(--cds-sys-spacing-xs);
}

.p-bs-xs {
  padding-block-start: var(--cds-sys-spacing-xs);
}

.p-be-xs {
  padding-block-end: var(--cds-sys-spacing-xs);
}

.p-is-xs {
  padding-inline-start: var(--cds-sys-spacing-xs);
}

.p-ie-xs {
  padding-inline-end: var(--cds-sys-spacing-xs);
}

.p-s {
  padding: var(--cds-sys-spacing-s);
}

.p-b-s {
  padding-block: var(--cds-sys-spacing-s);
}

.p-i-s {
  padding-inline: var(--cds-sys-spacing-s);
}

.p-bs-s {
  padding-block-start: var(--cds-sys-spacing-s);
}

.p-be-s {
  padding-block-end: var(--cds-sys-spacing-s);
}

.p-is-s {
  padding-inline-start: var(--cds-sys-spacing-s);
}

.p-ie-s {
  padding-inline-end: var(--cds-sys-spacing-s);
}

.p-m {
  padding: var(--cds-sys-spacing-m);
}

.p-b-m {
  padding-block: var(--cds-sys-spacing-m);
}

.p-i-m {
  padding-inline: var(--cds-sys-spacing-m);
}

.p-bs-m {
  padding-block-start: var(--cds-sys-spacing-m);
}

.p-be-m {
  padding-block-end: var(--cds-sys-spacing-m);
}

.p-is-m {
  padding-inline-start: var(--cds-sys-spacing-m);
}

.p-ie-m {
  padding-inline-end: var(--cds-sys-spacing-m);
}

.p-l {
  padding: var(--cds-sys-spacing-l);
}

.p-b-l {
  padding-block: var(--cds-sys-spacing-l);
}

.p-i-l {
  padding-inline: var(--cds-sys-spacing-l);
}

.p-bs-l {
  padding-block-start: var(--cds-sys-spacing-l);
}

.p-be-l {
  padding-block-end: var(--cds-sys-spacing-l);
}

.p-is-l {
  padding-inline-start: var(--cds-sys-spacing-l);
}

.p-ie-l {
  padding-inline-end: var(--cds-sys-spacing-l);
}

.p-xl {
  padding: var(--cds-sys-spacing-xl);
}

.p-b-xl {
  padding-block: var(--cds-sys-spacing-xl);
}

.p-i-xl {
  padding-inline: var(--cds-sys-spacing-xl);
}

.p-bs-xl {
  padding-block-start: var(--cds-sys-spacing-xl);
}

.p-be-xl {
  padding-block-end: var(--cds-sys-spacing-xl);
}

.p-is-xl {
  padding-inline-start: var(--cds-sys-spacing-xl);
}

.p-ie-xl {
  padding-inline-end: var(--cds-sys-spacing-xl);
}

.p-2xl {
  padding: var(--cds-sys-spacing-2xl);
}

.p-b-2xl {
  padding-block: var(--cds-sys-spacing-2xl);
}

.p-i-2xl {
  padding-inline: var(--cds-sys-spacing-2xl);
}

.p-bs-2xl {
  padding-block-start: var(--cds-sys-spacing-2xl);
}

.p-be-2xl {
  padding-block-end: var(--cds-sys-spacing-2xl);
}

.p-is-2xl {
  padding-inline-start: var(--cds-sys-spacing-2xl);
}

.p-ie-2xl {
  padding-inline-end: var(--cds-sys-spacing-2xl);
}

.p-3xl {
  padding: var(--cds-sys-spacing-3xl);
}

.p-b-3xl {
  padding-block: var(--cds-sys-spacing-3xl);
}

.p-i-3xl {
  padding-inline: var(--cds-sys-spacing-3xl);
}

.p-bs-3xl {
  padding-block-start: var(--cds-sys-spacing-3xl);
}

.p-be-3xl {
  padding-block-end: var(--cds-sys-spacing-3xl);
}

.p-is-3xl {
  padding-inline-start: var(--cds-sys-spacing-3xl);
}

.p-ie-3xl {
  padding-inline-end: var(--cds-sys-spacing-3xl);
}

.m-none {
  margin: var(--cds-sys-spacing-none);
}

.m-b-none {
  margin-block: var(--cds-sys-spacing-none);
}

.m-i-none {
  margin-inline: var(--cds-sys-spacing-none);
}

.m-bs-none {
  margin-block-start: var(--cds-sys-spacing-none);
}

.m-be-none {
  margin-block-end: var(--cds-sys-spacing-none);
}

.m-is-none {
  margin-inline-start: var(--cds-sys-spacing-none);
}

.m-ie-none {
  margin-inline-end: var(--cds-sys-spacing-none);
}

.m-3xs {
  margin: var(--cds-sys-spacing-3xs);
}

.m-b-3xs {
  margin-block: var(--cds-sys-spacing-3xs);
}

.m-i-3xs {
  margin-inline: var(--cds-sys-spacing-3xs);
}

.m-bs-3xs {
  margin-block-start: var(--cds-sys-spacing-3xs);
}

.m-be-3xs {
  margin-block-end: var(--cds-sys-spacing-3xs);
}

.m-is-3xs {
  margin-inline-start: var(--cds-sys-spacing-3xs);
}

.m-ie-3xs {
  margin-inline-end: var(--cds-sys-spacing-3xs);
}

.m-2xs {
  margin: var(--cds-sys-spacing-2xs);
}

.m-b-2xs {
  margin-block: var(--cds-sys-spacing-2xs);
}

.m-i-2xs {
  margin-inline: var(--cds-sys-spacing-2xs);
}

.m-bs-2xs {
  margin-block-start: var(--cds-sys-spacing-2xs);
}

.m-be-2xs {
  margin-block-end: var(--cds-sys-spacing-2xs);
}

.m-is-2xs {
  margin-inline-start: var(--cds-sys-spacing-2xs);
}

.m-ie-2xs {
  margin-inline-end: var(--cds-sys-spacing-2xs);
}

.m-xs {
  margin: var(--cds-sys-spacing-xs);
}

.m-b-xs {
  margin-block: var(--cds-sys-spacing-xs);
}

.m-i-xs {
  margin-inline: var(--cds-sys-spacing-xs);
}

.m-bs-xs {
  margin-block-start: var(--cds-sys-spacing-xs);
}

.m-be-xs {
  margin-block-end: var(--cds-sys-spacing-xs);
}

.m-is-xs {
  margin-inline-start: var(--cds-sys-spacing-xs);
}

.m-ie-xs {
  margin-inline-end: var(--cds-sys-spacing-xs);
}

.m-s {
  margin: var(--cds-sys-spacing-s);
}

.m-b-s {
  margin-block: var(--cds-sys-spacing-s);
}

.m-i-s {
  margin-inline: var(--cds-sys-spacing-s);
}

.m-bs-s {
  margin-block-start: var(--cds-sys-spacing-s);
}

.m-be-s {
  margin-block-end: var(--cds-sys-spacing-s);
}

.m-is-s {
  margin-inline-start: var(--cds-sys-spacing-s);
}

.m-ie-s {
  margin-inline-end: var(--cds-sys-spacing-s);
}

.m-m {
  margin: var(--cds-sys-spacing-m);
}

.m-b-m {
  margin-block: var(--cds-sys-spacing-m);
}

.m-i-m {
  margin-inline: var(--cds-sys-spacing-m);
}

.m-bs-m {
  margin-block-start: var(--cds-sys-spacing-m);
}

.m-be-m {
  margin-block-end: var(--cds-sys-spacing-m);
}

.m-is-m {
  margin-inline-start: var(--cds-sys-spacing-m);
}

.m-ie-m {
  margin-inline-end: var(--cds-sys-spacing-m);
}

.m-l {
  margin: var(--cds-sys-spacing-l);
}

.m-b-l {
  margin-block: var(--cds-sys-spacing-l);
}

.m-i-l {
  margin-inline: var(--cds-sys-spacing-l);
}

.m-bs-l {
  margin-block-start: var(--cds-sys-spacing-l);
}

.m-be-l {
  margin-block-end: var(--cds-sys-spacing-l);
}

.m-is-l {
  margin-inline-start: var(--cds-sys-spacing-l);
}

.m-ie-l {
  margin-inline-end: var(--cds-sys-spacing-l);
}

.m-xl {
  margin: var(--cds-sys-spacing-xl);
}

.m-b-xl {
  margin-block: var(--cds-sys-spacing-xl);
}

.m-i-xl {
  margin-inline: var(--cds-sys-spacing-xl);
}

.m-bs-xl {
  margin-block-start: var(--cds-sys-spacing-xl);
}

.m-be-xl {
  margin-block-end: var(--cds-sys-spacing-xl);
}

.m-is-xl {
  margin-inline-start: var(--cds-sys-spacing-xl);
}

.m-ie-xl {
  margin-inline-end: var(--cds-sys-spacing-xl);
}

.m-2xl {
  margin: var(--cds-sys-spacing-2xl);
}

.m-b-2xl {
  margin-block: var(--cds-sys-spacing-2xl);
}

.m-i-2xl {
  margin-inline: var(--cds-sys-spacing-2xl);
}

.m-bs-2xl {
  margin-block-start: var(--cds-sys-spacing-2xl);
}

.m-be-2xl {
  margin-block-end: var(--cds-sys-spacing-2xl);
}

.m-is-2xl {
  margin-inline-start: var(--cds-sys-spacing-2xl);
}

.m-ie-2xl {
  margin-inline-end: var(--cds-sys-spacing-2xl);
}

.m-3xl {
  margin: var(--cds-sys-spacing-3xl);
}

.m-b-3xl {
  margin-block: var(--cds-sys-spacing-3xl);
}

.m-i-3xl {
  margin-inline: var(--cds-sys-spacing-3xl);
}

.m-bs-3xl {
  margin-block-start: var(--cds-sys-spacing-3xl);
}

.m-be-3xl {
  margin-block-end: var(--cds-sys-spacing-3xl);
}

.m-is-3xl {
  margin-inline-start: var(--cds-sys-spacing-3xl);
}

.m-ie-3xl {
  margin-inline-end: var(--cds-sys-spacing-3xl);
}

.-m-be-l {
  margin-block-end: calc(var(--cds-sys-spacing-l) * -1);
}

.-m-is-xl {
  margin-inline-start: calc(var(--cds-sys-spacing-xl) * -1);
}

.-m-ie-3xl {
  margin-inline-end: calc(var(--cds-sys-spacing-3xl) * -1);
}

.inset-none {
  inset: var(--cds-sys-spacing-none);
}

.inset-b-none {
  inset-block: var(--cds-sys-spacing-none);
}

.inset-i-none {
  inset-inline: var(--cds-sys-spacing-none);
}

.inset-bs-none {
  inset-block-start: var(--cds-sys-spacing-none);
}

.inset-be-none {
  inset-block-end: var(--cds-sys-spacing-none);
}

.inset-is-none {
  inset-inline-start: var(--cds-sys-spacing-none);
}

.inset-ie-none {
  inset-inline-end: var(--cds-sys-spacing-none);
}

.inset-3xs {
  inset: var(--cds-sys-spacing-3xs);
}

.inset-b-3xs {
  inset-block: var(--cds-sys-spacing-3xs);
}

.inset-i-3xs {
  inset-inline: var(--cds-sys-spacing-3xs);
}

.inset-bs-3xs {
  inset-block-start: var(--cds-sys-spacing-3xs);
}

.inset-be-3xs {
  inset-block-end: var(--cds-sys-spacing-3xs);
}

.inset-is-3xs {
  inset-inline-start: var(--cds-sys-spacing-3xs);
}

.inset-ie-3xs {
  inset-inline-end: var(--cds-sys-spacing-3xs);
}

.inset-2xs {
  inset: var(--cds-sys-spacing-2xs);
}

.inset-b-2xs {
  inset-block: var(--cds-sys-spacing-2xs);
}

.inset-i-2xs {
  inset-inline: var(--cds-sys-spacing-2xs);
}

.inset-bs-2xs {
  inset-block-start: var(--cds-sys-spacing-2xs);
}

.inset-be-2xs {
  inset-block-end: var(--cds-sys-spacing-2xs);
}

.inset-is-2xs {
  inset-inline-start: var(--cds-sys-spacing-2xs);
}

.inset-ie-2xs {
  inset-inline-end: var(--cds-sys-spacing-2xs);
}

.inset-xs {
  inset: var(--cds-sys-spacing-xs);
}

.inset-b-xs {
  inset-block: var(--cds-sys-spacing-xs);
}

.inset-i-xs {
  inset-inline: var(--cds-sys-spacing-xs);
}

.inset-bs-xs {
  inset-block-start: var(--cds-sys-spacing-xs);
}

.inset-be-xs {
  inset-block-end: var(--cds-sys-spacing-xs);
}

.inset-is-xs {
  inset-inline-start: var(--cds-sys-spacing-xs);
}

.inset-ie-xs {
  inset-inline-end: var(--cds-sys-spacing-xs);
}

.inset-s {
  inset: var(--cds-sys-spacing-s);
}

.inset-b-s {
  inset-block: var(--cds-sys-spacing-s);
}

.inset-i-s {
  inset-inline: var(--cds-sys-spacing-s);
}

.inset-bs-s {
  inset-block-start: var(--cds-sys-spacing-s);
}

.inset-be-s {
  inset-block-end: var(--cds-sys-spacing-s);
}

.inset-is-s {
  inset-inline-start: var(--cds-sys-spacing-s);
}

.inset-ie-s {
  inset-inline-end: var(--cds-sys-spacing-s);
}

.inset-m {
  inset: var(--cds-sys-spacing-m);
}

.inset-b-m {
  inset-block: var(--cds-sys-spacing-m);
}

.inset-i-m {
  inset-inline: var(--cds-sys-spacing-m);
}

.inset-bs-m {
  inset-block-start: var(--cds-sys-spacing-m);
}

.inset-be-m {
  inset-block-end: var(--cds-sys-spacing-m);
}

.inset-is-m {
  inset-inline-start: var(--cds-sys-spacing-m);
}

.inset-ie-m {
  inset-inline-end: var(--cds-sys-spacing-m);
}

.inset-l {
  inset: var(--cds-sys-spacing-l);
}

.inset-b-l {
  inset-block: var(--cds-sys-spacing-l);
}

.inset-i-l {
  inset-inline: var(--cds-sys-spacing-l);
}

.inset-bs-l {
  inset-block-start: var(--cds-sys-spacing-l);
}

.inset-be-l {
  inset-block-end: var(--cds-sys-spacing-l);
}

.inset-is-l {
  inset-inline-start: var(--cds-sys-spacing-l);
}

.inset-ie-l {
  inset-inline-end: var(--cds-sys-spacing-l);
}

.inset-xl {
  inset: var(--cds-sys-spacing-xl);
}

.inset-b-xl {
  inset-block: var(--cds-sys-spacing-xl);
}

.inset-i-xl {
  inset-inline: var(--cds-sys-spacing-xl);
}

.inset-bs-xl {
  inset-block-start: var(--cds-sys-spacing-xl);
}

.inset-be-xl {
  inset-block-end: var(--cds-sys-spacing-xl);
}

.inset-is-xl {
  inset-inline-start: var(--cds-sys-spacing-xl);
}

.inset-ie-xl {
  inset-inline-end: var(--cds-sys-spacing-xl);
}

.inset-2xl {
  inset: var(--cds-sys-spacing-2xl);
}

.inset-b-2xl {
  inset-block: var(--cds-sys-spacing-2xl);
}

.inset-i-2xl {
  inset-inline: var(--cds-sys-spacing-2xl);
}

.inset-bs-2xl {
  inset-block-start: var(--cds-sys-spacing-2xl);
}

.inset-be-2xl {
  inset-block-end: var(--cds-sys-spacing-2xl);
}

.inset-is-2xl {
  inset-inline-start: var(--cds-sys-spacing-2xl);
}

.inset-ie-2xl {
  inset-inline-end: var(--cds-sys-spacing-2xl);
}

.inset-3xl {
  inset: var(--cds-sys-spacing-3xl);
}

.inset-b-3xl {
  inset-block: var(--cds-sys-spacing-3xl);
}

.inset-i-3xl {
  inset-inline: var(--cds-sys-spacing-3xl);
}

.inset-bs-3xl {
  inset-block-start: var(--cds-sys-spacing-3xl);
}

.inset-be-3xl {
  inset-block-end: var(--cds-sys-spacing-3xl);
}

.inset-is-3xl {
  inset-inline-start: var(--cds-sys-spacing-3xl);
}

.inset-ie-3xl {
  inset-inline-end: var(--cds-sys-spacing-3xl);
}

.m-b-none {
  margin: var(--cds-sys-spacing-none);
}

.p-b-none {
  padding-bottom: var(--cds-sys-spacing-none);
}

.m-b-3xs {
  margin: var(--cds-sys-spacing-3xs);
}

.p-b-3xs {
  padding-bottom: var(--cds-sys-spacing-3xs);
}

.m-b-2xs {
  margin: var(--cds-sys-spacing-2xs);
}

.p-b-2xs {
  padding-bottom: var(--cds-sys-spacing-2xs);
}

.m-b-xs {
  margin: var(--cds-sys-spacing-xs);
}

.p-b-xs {
  padding-bottom: var(--cds-sys-spacing-xs);
}

.m-b-s {
  margin: var(--cds-sys-spacing-s);
}

.p-b-s {
  padding-bottom: var(--cds-sys-spacing-s);
}

.m-b-m {
  margin: var(--cds-sys-spacing-m);
}

.p-b-m {
  padding-bottom: var(--cds-sys-spacing-m);
}

.m-b-l {
  margin: var(--cds-sys-spacing-l);
}

.p-b-l {
  padding-bottom: var(--cds-sys-spacing-l);
}

.m-b-xl {
  margin: var(--cds-sys-spacing-xl);
}

.p-b-xl {
  padding-bottom: var(--cds-sys-spacing-xl);
}

.m-b-2xl {
  margin: var(--cds-sys-spacing-2xl);
}

.p-b-2xl {
  padding-bottom: var(--cds-sys-spacing-2xl);
}

.m-b-3xl {
  margin: var(--cds-sys-spacing-3xl);
}

.p-b-3xl {
  padding-bottom: var(--cds-sys-spacing-3xl);
}

.gap-none {
  gap: var(--cds-sys-spacing-none);
}

.row-gap-none {
  row-gap: var(--cds-sys-spacing-none);
}

.col-gap-none {
  column-gap: var(--cds-sys-spacing-none);
}

.gap-3xs {
  gap: var(--cds-sys-spacing-3xs);
}

.row-gap-3xs {
  row-gap: var(--cds-sys-spacing-3xs);
}

.col-gap-3xs {
  column-gap: var(--cds-sys-spacing-3xs);
}

.gap-2xs {
  gap: var(--cds-sys-spacing-2xs);
}

.row-gap-2xs {
  row-gap: var(--cds-sys-spacing-2xs);
}

.col-gap-2xs {
  column-gap: var(--cds-sys-spacing-2xs);
}

.gap-xs {
  gap: var(--cds-sys-spacing-xs);
}

.row-gap-xs {
  row-gap: var(--cds-sys-spacing-xs);
}

.col-gap-xs {
  column-gap: var(--cds-sys-spacing-xs);
}

.gap-s {
  gap: var(--cds-sys-spacing-s);
}

.row-gap-s {
  row-gap: var(--cds-sys-spacing-s);
}

.col-gap-s {
  column-gap: var(--cds-sys-spacing-s);
}

.gap-m {
  gap: var(--cds-sys-spacing-m);
}

.row-gap-m {
  row-gap: var(--cds-sys-spacing-m);
}

.col-gap-m {
  column-gap: var(--cds-sys-spacing-m);
}

.gap-l {
  gap: var(--cds-sys-spacing-l);
}

.row-gap-l {
  row-gap: var(--cds-sys-spacing-l);
}

.col-gap-l {
  column-gap: var(--cds-sys-spacing-l);
}

.gap-xl {
  gap: var(--cds-sys-spacing-xl);
}

.row-gap-xl {
  row-gap: var(--cds-sys-spacing-xl);
}

.col-gap-xl {
  column-gap: var(--cds-sys-spacing-xl);
}

.gap-2xl {
  gap: var(--cds-sys-spacing-2xl);
}

.row-gap-2xl {
  row-gap: var(--cds-sys-spacing-2xl);
}

.col-gap-2xl {
  column-gap: var(--cds-sys-spacing-2xl);
}

.gap-3xl {
  gap: var(--cds-sys-spacing-3xl);
}

.row-gap-3xl {
  row-gap: var(--cds-sys-spacing-3xl);
}

.col-gap-3xl {
  column-gap: var(--cds-sys-spacing-3xl);
}

.icon-size-xl {
  width: var(--cds-sys-dimension-icon-xl);
  height: var(--cds-sys-dimension-icon-xl);
  line-height: 1em;
}

.icon-size-xl.campus-icon {
  --cds-comp-icon-size: var(--cds-sys-dimension-icon-xl);
}

.icon-size-3xl {
  width: var(--cds-sys-dimension-icon-3xl);
  height: var(--cds-sys-dimension-icon-3xl);
  line-height: 1em;
}

.icon-size-3xl.campus-icon {
  --cds-comp-icon-size: var(--cds-sys-dimension-icon-3xl);
}

.w-3xs {
  width: var(--cds-sys-dimension-base-3xs);
}

.w-2xs {
  width: var(--cds-sys-dimension-base-2xs);
}

.w-s {
  width: var(--cds-sys-dimension-base-s);
}

.w-m {
  width: var(--cds-sys-dimension-base-m);
}

.inline-size-s {
  inline-size: var(--cds-sys-dimension-base-s);
}

.min-w-3xs {
  min-width: var(--cds-sys-dimension-base-3xs);
}

.max-w-2xs {
  max-width: var(--cds-sys-dimension-base-2xs);
}

.max-w-xs {
  max-width: var(--cds-sys-dimension-base-xs);
}

.max-w-s {
  max-width: var(--cds-sys-dimension-base-s);
}

.h-3xs {
  height: var(--cds-sys-dimension-base-3xs);
}

.h-2xs {
  height: var(--cds-sys-dimension-base-2xs);
}

.max-h-3xs {
  max-height: var(--cds-sys-dimension-base-3xs);
}
[class*=elevation-]:not([class*=mat-elevation-]) {
  box-shadow: var(--cds-sys-elevation-level, var(--cds-sys-elevation-level-0));
}

.elevation-0 {
  --cds-sys-elevation-level: var(--cds-sys-elevation-level-0);
}

.elevation-1 {
  --cds-sys-elevation-level: var(--cds-sys-elevation-level-1);
}

.elevation-2 {
  --cds-sys-elevation-level: var(--cds-sys-elevation-level-2);
}

.elevation-3 {
  --cds-sys-elevation-level: var(--cds-sys-elevation-level-3);
}

.elevation-4 {
  --cds-sys-elevation-level: var(--cds-sys-elevation-level-4);
}

.elevation-5 {
  --cds-sys-elevation-level: var(--cds-sys-elevation-level-5);
}

.hover\:elevation-1:hover {
  --cds-sys-elevation-level: var(--cds-sys-elevation-level-1);
}

.hover\:elevation-3:hover {
  --cds-sys-elevation-level: var(--cds-sys-elevation-level-3);
}
.opacity-full {
  opacity: var(--cds-sys-opacity-full);
}

.opacity-high {
  opacity: var(--cds-sys-opacity-high);
}

.opacity-medium {
  opacity: var(--cds-sys-opacity-medium);
}

.opacity-low {
  opacity: var(--cds-sys-opacity-low);
}

.opacity-disabled {
  opacity: var(--cds-sys-opacity-disabled);
}

.opacity-glass {
  opacity: var(--cds-sys-opacity-glass);
}

.opacity-hovered {
  opacity: var(--cds-sys-opacity-hovered);
}

.opacity-focused {
  opacity: var(--cds-sys-opacity-focused);
}

.opacity-pressed {
  opacity: var(--cds-sys-opacity-pressed);
}

.opacity-dragged {
  opacity: var(--cds-sys-opacity-dragged);
}

.opacity-none {
  opacity: var(--cds-sys-opacity-none);
}

.bg-opacity-full {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-full);
}

.text-opacity-full {
  --cds-sys-opacity-text: var(--cds-sys-opacity-full);
}

.fill-opacity-full {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-full);
}

.stroke-opacity-full {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-full);
}

.border-opacity-full {
  --cds-sys-opacity-border: var(--cds-sys-opacity-full);
}

.bg-opacity-high {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-high);
}

.text-opacity-high {
  --cds-sys-opacity-text: var(--cds-sys-opacity-high);
}

.fill-opacity-high {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-high);
}

.stroke-opacity-high {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-high);
}

.border-opacity-high {
  --cds-sys-opacity-border: var(--cds-sys-opacity-high);
}

.bg-opacity-medium {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-medium);
}

.text-opacity-medium {
  --cds-sys-opacity-text: var(--cds-sys-opacity-medium);
}

.fill-opacity-medium {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-medium);
}

.stroke-opacity-medium {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-medium);
}

.border-opacity-medium {
  --cds-sys-opacity-border: var(--cds-sys-opacity-medium);
}

.bg-opacity-low {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-low);
}

.text-opacity-low {
  --cds-sys-opacity-text: var(--cds-sys-opacity-low);
}

.fill-opacity-low {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-low);
}

.stroke-opacity-low {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-low);
}

.border-opacity-low {
  --cds-sys-opacity-border: var(--cds-sys-opacity-low);
}

.bg-opacity-disabled {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-disabled);
}

.text-opacity-disabled {
  --cds-sys-opacity-text: var(--cds-sys-opacity-disabled);
}

.fill-opacity-disabled {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-disabled);
}

.stroke-opacity-disabled {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-disabled);
}

.border-opacity-disabled {
  --cds-sys-opacity-border: var(--cds-sys-opacity-disabled);
}

.bg-opacity-glass {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-glass);
}

.text-opacity-glass {
  --cds-sys-opacity-text: var(--cds-sys-opacity-glass);
}

.fill-opacity-glass {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-glass);
}

.stroke-opacity-glass {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-glass);
}

.border-opacity-glass {
  --cds-sys-opacity-border: var(--cds-sys-opacity-glass);
}

.bg-opacity-hovered {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-hovered);
}

.text-opacity-hovered {
  --cds-sys-opacity-text: var(--cds-sys-opacity-hovered);
}

.fill-opacity-hovered {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-hovered);
}

.stroke-opacity-hovered {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-hovered);
}

.border-opacity-hovered {
  --cds-sys-opacity-border: var(--cds-sys-opacity-hovered);
}

.bg-opacity-focused {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-focused);
}

.text-opacity-focused {
  --cds-sys-opacity-text: var(--cds-sys-opacity-focused);
}

.fill-opacity-focused {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-focused);
}

.stroke-opacity-focused {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-focused);
}

.border-opacity-focused {
  --cds-sys-opacity-border: var(--cds-sys-opacity-focused);
}

.bg-opacity-pressed {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-pressed);
}

.text-opacity-pressed {
  --cds-sys-opacity-text: var(--cds-sys-opacity-pressed);
}

.fill-opacity-pressed {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-pressed);
}

.stroke-opacity-pressed {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-pressed);
}

.border-opacity-pressed {
  --cds-sys-opacity-border: var(--cds-sys-opacity-pressed);
}

.bg-opacity-dragged {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-dragged);
}

.text-opacity-dragged {
  --cds-sys-opacity-text: var(--cds-sys-opacity-dragged);
}

.fill-opacity-dragged {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-dragged);
}

.stroke-opacity-dragged {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-dragged);
}

.border-opacity-dragged {
  --cds-sys-opacity-border: var(--cds-sys-opacity-dragged);
}

.bg-opacity-none {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-none);
}

.text-opacity-none {
  --cds-sys-opacity-text: var(--cds-sys-opacity-none);
}

.fill-opacity-none {
  --cds-sys-opacity-fill: var(--cds-sys-opacity-none);
}

.stroke-opacity-none {
  --cds-sys-opacity-stroke: var(--cds-sys-opacity-none);
}

.border-opacity-none {
  --cds-sys-opacity-border: var(--cds-sys-opacity-none);
}

.group:hover .group-hover\:text-opacity-full {
  --cds-sys-opacity-text: var(--cds-sys-opacity-full);
}

.group:hover .group-hover\:bg-opacity-hovered {
  --cds-sys-opacity-bg: var(--cds-sys-opacity-hovered);
}

.filter {
  filter: blur(var(--cds-sys-filter-blur, var(--cds-sys-filter-blur-none))) brightness(var(--cds-sys-filter-brightness, 100%)) contrast(var(--cds-sys-filter-contrast, 100%)) drop-shadow(var(--cds-sys-filter-drop-shadow, 0 0 0 #000)) grayscale(var(--cds-sys-filter-grayscale, 0%)) hue-rotate(var(--cds-sys-filter-hue-rotate, 0deg)) invert(var(--cds-sys-filter-invert, 0%)) saturate(var(--cds-sys-filter-saturate, 100%)) sepia(var(--cds-sys-filter-sepia, 0%));
}

.backdrop-filter {
  -webkit-backdrop-filter: blur(var(--cds-sys-filter-backdrop-blur, var(--cds-sys-filter-blur-none))) brightness(var(--cds-sys-filter-backdrop-brightness, 100%)) contrast(var(--cds-sys-filter-backdrop-contrast, 100%)) grayscale(var(--cds-sys-filter-backdrop-grayscale, 0%)) hue-rotate(var(--cds-sys-filter-backdrop-hue-rotate, 0deg)) saturate(var(--cds-sys-filter-backdrop-saturate, 100%)) sepia(var(--cds-sys-filter-backdrop-sepia, 0%));
  backdrop-filter: blur(var(--cds-sys-filter-backdrop-blur, var(--cds-sys-filter-blur-none))) brightness(var(--cds-sys-filter-backdrop-brightness, 100%)) contrast(var(--cds-sys-filter-backdrop-contrast, 100%)) grayscale(var(--cds-sys-filter-backdrop-grayscale, 0%)) hue-rotate(var(--cds-sys-filter-backdrop-hue-rotate, 0deg)) saturate(var(--cds-sys-filter-backdrop-saturate, 100%)) sepia(var(--cds-sys-filter-backdrop-sepia, 0%));
}

.blur-none {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-none);
}

.blur-3xs {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-3xs);
}

.blur-2xs {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-2xs);
}

.blur-xs {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-xs);
}

.blur-s {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-s);
}

.blur-m {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-m);
}

.blur-l {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-l);
}

.blur-xl {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-xl);
}

.blur-2xl {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-2xl);
}

.blur-3xl {
  --cds-sys-filter-blur: var(--cds-sys-filter-blur-3xl);
}

.brightness-0 {
  --cds-sys-filter-brightness: 0;
}

.brightness-10 {
  --cds-sys-filter-brightness: 10%;
}

.brightness-20 {
  --cds-sys-filter-brightness: 20%;
}

.brightness-30 {
  --cds-sys-filter-brightness: 30%;
}

.brightness-40 {
  --cds-sys-filter-brightness: 40%;
}

.brightness-50 {
  --cds-sys-filter-brightness: 50%;
}

.brightness-60 {
  --cds-sys-filter-brightness: 60%;
}

.brightness-70 {
  --cds-sys-filter-brightness: 70%;
}

.brightness-80 {
  --cds-sys-filter-brightness: 80%;
}

.brightness-90 {
  --cds-sys-filter-brightness: 90%;
}

.brightness-100 {
  --cds-sys-filter-brightness: 100%;
}

.brightness-110 {
  --cds-sys-filter-brightness: 110%;
}

.brightness-120 {
  --cds-sys-filter-brightness: 120%;
}

.brightness-130 {
  --cds-sys-filter-brightness: 130%;
}

.brightness-140 {
  --cds-sys-filter-brightness: 140%;
}

.brightness-150 {
  --cds-sys-filter-brightness: 150%;
}

.brightness-160 {
  --cds-sys-filter-brightness: 160%;
}

.brightness-170 {
  --cds-sys-filter-brightness: 170%;
}

.brightness-180 {
  --cds-sys-filter-brightness: 180%;
}

.brightness-190 {
  --cds-sys-filter-brightness: 190%;
}

.brightness-200 {
  --cds-sys-filter-brightness: 200%;
}

.contrast-0 {
  --cds-sys-filter-contrast: 0;
}

.contrast-10 {
  --cds-sys-filter-contrast: 10%;
}

.contrast-20 {
  --cds-sys-filter-contrast: 20%;
}

.contrast-30 {
  --cds-sys-filter-contrast: 30%;
}

.contrast-40 {
  --cds-sys-filter-contrast: 40%;
}

.contrast-50 {
  --cds-sys-filter-contrast: 50%;
}

.contrast-60 {
  --cds-sys-filter-contrast: 60%;
}

.contrast-70 {
  --cds-sys-filter-contrast: 70%;
}

.contrast-80 {
  --cds-sys-filter-contrast: 80%;
}

.contrast-90 {
  --cds-sys-filter-contrast: 90%;
}

.contrast-100 {
  --cds-sys-filter-contrast: 100%;
}

.contrast-110 {
  --cds-sys-filter-contrast: 110%;
}

.contrast-120 {
  --cds-sys-filter-contrast: 120%;
}

.contrast-130 {
  --cds-sys-filter-contrast: 130%;
}

.contrast-140 {
  --cds-sys-filter-contrast: 140%;
}

.contrast-150 {
  --cds-sys-filter-contrast: 150%;
}

.contrast-160 {
  --cds-sys-filter-contrast: 160%;
}

.contrast-170 {
  --cds-sys-filter-contrast: 170%;
}

.contrast-180 {
  --cds-sys-filter-contrast: 180%;
}

.contrast-190 {
  --cds-sys-filter-contrast: 190%;
}

.contrast-200 {
  --cds-sys-filter-contrast: 200%;
}

.grayscale-0 {
  --cds-sys-filter-grayscale: 0;
}

.grayscale-10 {
  --cds-sys-filter-grayscale: 10%;
}

.grayscale-20 {
  --cds-sys-filter-grayscale: 20%;
}

.grayscale-30 {
  --cds-sys-filter-grayscale: 30%;
}

.grayscale-40 {
  --cds-sys-filter-grayscale: 40%;
}

.grayscale-50 {
  --cds-sys-filter-grayscale: 50%;
}

.grayscale-60 {
  --cds-sys-filter-grayscale: 60%;
}

.grayscale-70 {
  --cds-sys-filter-grayscale: 70%;
}

.grayscale-80 {
  --cds-sys-filter-grayscale: 80%;
}

.grayscale-90 {
  --cds-sys-filter-grayscale: 90%;
}

.grayscale-100 {
  --cds-sys-filter-grayscale: 100%;
}

.hue-rotate-0 {
  --cds-sys-filter-hue-rotate: 0;
}

.hue-rotate-15 {
  --cds-sys-filter-hue-rotate: 15deg;
}

.hue-rotate-30 {
  --cds-sys-filter-hue-rotate: 30deg;
}

.hue-rotate-60 {
  --cds-sys-filter-hue-rotate: 60deg;
}

.hue-rotate-90 {
  --cds-sys-filter-hue-rotate: 90deg;
}

.hue-rotate-180 {
  --cds-sys-filter-hue-rotate: 180deg;
}

.saturate-0 {
  --cds-sys-filter-saturate: 0;
}

.saturate-10 {
  --cds-sys-filter-saturate: 10%;
}

.saturate-20 {
  --cds-sys-filter-saturate: 20%;
}

.saturate-30 {
  --cds-sys-filter-saturate: 30%;
}

.saturate-40 {
  --cds-sys-filter-saturate: 40%;
}

.saturate-50 {
  --cds-sys-filter-saturate: 50%;
}

.saturate-60 {
  --cds-sys-filter-saturate: 60%;
}

.saturate-70 {
  --cds-sys-filter-saturate: 70%;
}

.saturate-80 {
  --cds-sys-filter-saturate: 80%;
}

.saturate-90 {
  --cds-sys-filter-saturate: 90%;
}

.saturate-100 {
  --cds-sys-filter-saturate: 100%;
}

.saturate-110 {
  --cds-sys-filter-saturate: 110%;
}

.saturate-120 {
  --cds-sys-filter-saturate: 120%;
}

.saturate-130 {
  --cds-sys-filter-saturate: 130%;
}

.saturate-140 {
  --cds-sys-filter-saturate: 140%;
}

.saturate-150 {
  --cds-sys-filter-saturate: 150%;
}

.saturate-160 {
  --cds-sys-filter-saturate: 160%;
}

.saturate-170 {
  --cds-sys-filter-saturate: 170%;
}

.saturate-180 {
  --cds-sys-filter-saturate: 180%;
}

.saturate-190 {
  --cds-sys-filter-saturate: 190%;
}

.saturate-200 {
  --cds-sys-filter-saturate: 200%;
}

.sepia-0 {
  --cds-sys-filter-sepia: 0;
}

.sepia-10 {
  --cds-sys-filter-sepia: 10%;
}

.sepia-20 {
  --cds-sys-filter-sepia: 20%;
}

.sepia-30 {
  --cds-sys-filter-sepia: 30%;
}

.sepia-40 {
  --cds-sys-filter-sepia: 40%;
}

.sepia-50 {
  --cds-sys-filter-sepia: 50%;
}

.sepia-60 {
  --cds-sys-filter-sepia: 60%;
}

.sepia-70 {
  --cds-sys-filter-sepia: 70%;
}

.sepia-80 {
  --cds-sys-filter-sepia: 80%;
}

.sepia-90 {
  --cds-sys-filter-sepia: 90%;
}

.sepia-100 {
  --cds-sys-filter-sepia: 100%;
}

.backdrop-blur-none {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-none);
}

.backdrop-blur-3xs {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-3xs);
}

.backdrop-blur-2xs {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-2xs);
}

.backdrop-blur-xs {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-xs);
}

.backdrop-blur-s {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-s);
}

.backdrop-blur-m {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-m);
}

.backdrop-blur-l {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-l);
}

.backdrop-blur-xl {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-xl);
}

.backdrop-blur-2xl {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-2xl);
}

.backdrop-blur-3xl {
  --cds-sys-filter-backdrop-blur: var(--cds-sys-filter-blur-3xl);
}

.backdrop-brightness-0 {
  --cds-sys-filter-backdrop-brightness: 0;
}

.backdrop-brightness-10 {
  --cds-sys-filter-backdrop-brightness: 10%;
}

.backdrop-brightness-20 {
  --cds-sys-filter-backdrop-brightness: 20%;
}

.backdrop-brightness-30 {
  --cds-sys-filter-backdrop-brightness: 30%;
}

.backdrop-brightness-40 {
  --cds-sys-filter-backdrop-brightness: 40%;
}

.backdrop-brightness-50 {
  --cds-sys-filter-backdrop-brightness: 50%;
}

.backdrop-brightness-60 {
  --cds-sys-filter-backdrop-brightness: 60%;
}

.backdrop-brightness-70 {
  --cds-sys-filter-backdrop-brightness: 70%;
}

.backdrop-brightness-80 {
  --cds-sys-filter-backdrop-brightness: 80%;
}

.backdrop-brightness-90 {
  --cds-sys-filter-backdrop-brightness: 90%;
}

.backdrop-brightness-100 {
  --cds-sys-filter-backdrop-brightness: 100%;
}

.backdrop-brightness-110 {
  --cds-sys-filter-backdrop-brightness: 110%;
}

.backdrop-brightness-120 {
  --cds-sys-filter-backdrop-brightness: 120%;
}

.backdrop-brightness-130 {
  --cds-sys-filter-backdrop-brightness: 130%;
}

.backdrop-brightness-140 {
  --cds-sys-filter-backdrop-brightness: 140%;
}

.backdrop-brightness-150 {
  --cds-sys-filter-backdrop-brightness: 150%;
}

.backdrop-brightness-160 {
  --cds-sys-filter-backdrop-brightness: 160%;
}

.backdrop-brightness-170 {
  --cds-sys-filter-backdrop-brightness: 170%;
}

.backdrop-brightness-180 {
  --cds-sys-filter-backdrop-brightness: 180%;
}

.backdrop-brightness-190 {
  --cds-sys-filter-backdrop-brightness: 190%;
}

.backdrop-brightness-200 {
  --cds-sys-filter-backdrop-brightness: 200%;
}

.backdrop-contrast-0 {
  --cds-sys-filter-backdrop-contrast: 0;
}

.backdrop-contrast-10 {
  --cds-sys-filter-backdrop-contrast: 10%;
}

.backdrop-contrast-20 {
  --cds-sys-filter-backdrop-contrast: 20%;
}

.backdrop-contrast-30 {
  --cds-sys-filter-backdrop-contrast: 30%;
}

.backdrop-contrast-40 {
  --cds-sys-filter-backdrop-contrast: 40%;
}

.backdrop-contrast-50 {
  --cds-sys-filter-backdrop-contrast: 50%;
}

.backdrop-contrast-60 {
  --cds-sys-filter-backdrop-contrast: 60%;
}

.backdrop-contrast-70 {
  --cds-sys-filter-backdrop-contrast: 70%;
}

.backdrop-contrast-80 {
  --cds-sys-filter-backdrop-contrast: 80%;
}

.backdrop-contrast-90 {
  --cds-sys-filter-backdrop-contrast: 90%;
}

.backdrop-contrast-100 {
  --cds-sys-filter-backdrop-contrast: 100%;
}

.backdrop-contrast-110 {
  --cds-sys-filter-backdrop-contrast: 110%;
}

.backdrop-contrast-120 {
  --cds-sys-filter-backdrop-contrast: 120%;
}

.backdrop-contrast-130 {
  --cds-sys-filter-backdrop-contrast: 130%;
}

.backdrop-contrast-140 {
  --cds-sys-filter-backdrop-contrast: 140%;
}

.backdrop-contrast-150 {
  --cds-sys-filter-backdrop-contrast: 150%;
}

.backdrop-contrast-160 {
  --cds-sys-filter-backdrop-contrast: 160%;
}

.backdrop-contrast-170 {
  --cds-sys-filter-backdrop-contrast: 170%;
}

.backdrop-contrast-180 {
  --cds-sys-filter-backdrop-contrast: 180%;
}

.backdrop-contrast-190 {
  --cds-sys-filter-backdrop-contrast: 190%;
}

.backdrop-contrast-200 {
  --cds-sys-filter-backdrop-contrast: 200%;
}

.backdrop-grayscale-0 {
  --cds-sys-filter-backdrop-grayscale: 0;
}

.backdrop-grayscale-10 {
  --cds-sys-filter-backdrop-grayscale: 10%;
}

.backdrop-grayscale-20 {
  --cds-sys-filter-backdrop-grayscale: 20%;
}

.backdrop-grayscale-30 {
  --cds-sys-filter-backdrop-grayscale: 30%;
}

.backdrop-grayscale-40 {
  --cds-sys-filter-backdrop-grayscale: 40%;
}

.backdrop-grayscale-50 {
  --cds-sys-filter-backdrop-grayscale: 50%;
}

.backdrop-grayscale-60 {
  --cds-sys-filter-backdrop-grayscale: 60%;
}

.backdrop-grayscale-70 {
  --cds-sys-filter-backdrop-grayscale: 70%;
}

.backdrop-grayscale-80 {
  --cds-sys-filter-backdrop-grayscale: 80%;
}

.backdrop-grayscale-90 {
  --cds-sys-filter-backdrop-grayscale: 90%;
}

.backdrop-grayscale-100 {
  --cds-sys-filter-backdrop-grayscale: 100%;
}

.backdrop-grayscale-150 {
  --cds-sys-filter-backdrop-grayscale: 150%;
}

.backdrop-hue-rotate-0 {
  --cds-sys-filter-backdrop-hue-rotate: 0;
}

.backdrop-hue-rotate-15 {
  --cds-sys-filter-backdrop-hue-rotate: 15deg;
}

.backdrop-hue-rotate-30 {
  --cds-sys-filter-backdrop-hue-rotate: 30deg;
}

.backdrop-hue-rotate-60 {
  --cds-sys-filter-backdrop-hue-rotate: 60deg;
}

.backdrop-hue-rotate-90 {
  --cds-sys-filter-backdrop-hue-rotate: 90deg;
}

.backdrop-hue-rotate-180 {
  --cds-sys-filter-backdrop-hue-rotate: 180deg;
}

.backdrop-saturate-0 {
  --cds-sys-filter-backdrop-saturate: 0;
}

.backdrop-saturate-10 {
  --cds-sys-filter-backdrop-saturate: 10%;
}

.backdrop-saturate-20 {
  --cds-sys-filter-backdrop-saturate: 20%;
}

.backdrop-saturate-30 {
  --cds-sys-filter-backdrop-saturate: 30%;
}

.backdrop-saturate-40 {
  --cds-sys-filter-backdrop-saturate: 40%;
}

.backdrop-saturate-50 {
  --cds-sys-filter-backdrop-saturate: 50%;
}

.backdrop-saturate-60 {
  --cds-sys-filter-backdrop-saturate: 60%;
}

.backdrop-saturate-70 {
  --cds-sys-filter-backdrop-saturate: 70%;
}

.backdrop-saturate-80 {
  --cds-sys-filter-backdrop-saturate: 80%;
}

.backdrop-saturate-90 {
  --cds-sys-filter-backdrop-saturate: 90%;
}

.backdrop-saturate-100 {
  --cds-sys-filter-backdrop-saturate: 100%;
}

.backdrop-saturate-110 {
  --cds-sys-filter-backdrop-saturate: 110%;
}

.backdrop-saturate-120 {
  --cds-sys-filter-backdrop-saturate: 120%;
}

.backdrop-saturate-130 {
  --cds-sys-filter-backdrop-saturate: 130%;
}

.backdrop-saturate-140 {
  --cds-sys-filter-backdrop-saturate: 140%;
}

.backdrop-saturate-150 {
  --cds-sys-filter-backdrop-saturate: 150%;
}

.backdrop-saturate-160 {
  --cds-sys-filter-backdrop-saturate: 160%;
}

.backdrop-saturate-170 {
  --cds-sys-filter-backdrop-saturate: 170%;
}

.backdrop-saturate-180 {
  --cds-sys-filter-backdrop-saturate: 180%;
}

.backdrop-saturate-190 {
  --cds-sys-filter-backdrop-saturate: 190%;
}

.backdrop-saturate-200 {
  --cds-sys-filter-backdrop-saturate: 200%;
}

.backdrop-sepia-0 {
  --cds-sys-filter-backdrop-sepia: 0;
}

.backdrop-sepia-10 {
  --cds-sys-filter-backdrop-sepia: 10%;
}

.backdrop-sepia-20 {
  --cds-sys-filter-backdrop-sepia: 20%;
}

.backdrop-sepia-30 {
  --cds-sys-filter-backdrop-sepia: 30%;
}

.backdrop-sepia-40 {
  --cds-sys-filter-backdrop-sepia: 40%;
}

.backdrop-sepia-50 {
  --cds-sys-filter-backdrop-sepia: 50%;
}

.backdrop-sepia-60 {
  --cds-sys-filter-backdrop-sepia: 60%;
}

.backdrop-sepia-70 {
  --cds-sys-filter-backdrop-sepia: 70%;
}

.backdrop-sepia-80 {
  --cds-sys-filter-backdrop-sepia: 80%;
}

.backdrop-sepia-90 {
  --cds-sys-filter-backdrop-sepia: 90%;
}

.backdrop-sepia-100 {
  --cds-sys-filter-backdrop-sepia: 100%;
}

.backdrop-sepia-150 {
  --cds-sys-filter-backdrop-sepia: 150%;
}

.drop-shadow-level-1 {
  --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-1);
}

.drop-shadow-level-2 {
  --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-2);
}

.drop-shadow-level-3 {
  --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-3);
}

.drop-shadow-level-4 {
  --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-4);
}

.drop-shadow-level-5 {
  --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-5);
}

.invert-0 {
  --cds-sys-filter-invert: 0;
}

.invert-10 {
  --cds-sys-filter-invert: 10%;
}

.invert-20 {
  --cds-sys-filter-invert: 20%;
}

.invert-30 {
  --cds-sys-filter-invert: 30%;
}

.invert-40 {
  --cds-sys-filter-invert: 40%;
}

.invert-50 {
  --cds-sys-filter-invert: 50%;
}

.invert-60 {
  --cds-sys-filter-invert: 60%;
}

.invert-70 {
  --cds-sys-filter-invert: 70%;
}

.invert-80 {
  --cds-sys-filter-invert: 80%;
}

.invert-90 {
  --cds-sys-filter-invert: 90%;
}

.invert-100 {
  --cds-sys-filter-invert: 100%;
}

[class*=transition-] {
  transition-timing-function: var(--cds-sys-motion-transition-ease, var(--cds-sys-motion-ease-default));
  transition-duration: var(--cds-sys-motion-transition-duration, var(--cds-sys-motion-duration-default));
  transition-delay: var(--cds-sys-motion-transition-delay, var(--cds-sys-motion-duration-none));
}

.transition-all {
  transition-property: all;
}

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, fill, stroke;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-transform {
  transition-property: transform;
}

.transition-elevation {
  transition-property: box-shadow;
}

.transition-corner {
  transition-property: border-radius;
}

.transition-dimension {
  transition-property: width, height, inline-size, block-size;
}

.transition-spacing {
  transition-property: margin, padding, gap;
}

.transition-input {
  transition-property: color, background-color, border-color, outline-color, fill, stroke, opacity, box-shadow, border-radius;
}

[class*=child-transition-] > * {
  transition-timing-function: var(--cds-sys-motion-child-transition-ease, var(--cds-sys-motion-ease-default));
  transition-duration: var(--cds-sys-motion-child-transition-duration, var(--cds-sys-motion-duration-default));
  transition-delay: var(--cds-sys-motion-child-transition-delay, var(--cds-sys-motion-duration-none));
}

.child-transition-all > * {
  transition-property: all;
}

[class*=animate-] {
  animation-timing-function: var(--cds-sys-motion-animate-ease, var(--cds-sys-motion-ease-linear));
  animation-duration: var(--cds-sys-motion-animate-duration, var(--cds-sys-motion-duration-long-4));
  animation-delay: var(--cds-sys-motion-animate-delay, var(--cds-sys-motion-duration-none));
}

[class*=transition-].ease-default {
  --cds-sys-motion-transition-ease: var(--cds-sys-motion-ease-default);
}

[class*=transition-].ease-linear {
  --cds-sys-motion-transition-ease: var(--cds-sys-motion-ease-linear);
}

[class*=transition-].ease-standard {
  --cds-sys-motion-transition-ease: var(--cds-sys-motion-ease-standard);
}

[class*=transition-].ease-standard-accelerate {
  --cds-sys-motion-transition-ease: var(--cds-sys-motion-ease-standard-accelerate);
}

[class*=transition-].ease-standard-decelerate {
  --cds-sys-motion-transition-ease: var(--cds-sys-motion-ease-standard-decelerate);
}

[class*=transition-].ease-emphasized {
  --cds-sys-motion-transition-ease: var(--cds-sys-motion-ease-emphasized);
}

[class*=transition-].ease-emphasized-accelerate {
  --cds-sys-motion-transition-ease: var(--cds-sys-motion-ease-emphasized-accelerate);
}

[class*=transition-].ease-emphasized-decelerate {
  --cds-sys-motion-transition-ease: var(--cds-sys-motion-ease-emphasized-decelerate);
}

[class*=transition-].duration-short-1 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-short-1);
}

[class*=transition-].duration-short-2 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-short-2);
}

[class*=transition-].duration-short-3 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-short-3);
}

[class*=transition-].duration-short-4 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-short-4);
}

[class*=transition-].duration-medium-1 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-medium-1);
}

[class*=transition-].duration-medium-2 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-medium-2);
}

[class*=transition-].duration-medium-3 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-medium-3);
}

[class*=transition-].duration-medium-4 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-medium-4);
}

[class*=transition-].duration-long-1 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-long-1);
}

[class*=transition-].duration-long-2 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-long-2);
}

[class*=transition-].duration-long-3 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-long-3);
}

[class*=transition-].duration-long-4 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-long-4);
}

[class*=transition-].duration-extra-long-1 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-extra-long-1);
}

[class*=transition-].duration-extra-long-2 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-extra-long-2);
}

[class*=transition-].duration-extra-long-3 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-extra-long-3);
}

[class*=transition-].duration-extra-long-4 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-extra-long-4);
}

[class*=transition-].duration-extra-long-5 {
  --cds-sys-motion-transition-duration: var(--cds-sys-motion-duration-extra-long-5);
}

[class*=transition-].delay-short-1 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-short-1);
}

[class*=transition-].delay-short-2 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-short-2);
}

[class*=transition-].delay-short-3 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-short-3);
}

[class*=transition-].delay-short-4 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-short-4);
}

[class*=transition-].delay-medium-1 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-medium-1);
}

[class*=transition-].delay-medium-2 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-medium-2);
}

[class*=transition-].delay-medium-3 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-medium-3);
}

[class*=transition-].delay-medium-4 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-medium-4);
}

[class*=transition-].delay-long-1 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-long-1);
}

[class*=transition-].delay-long-2 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-long-2);
}

[class*=transition-].delay-long-3 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-long-3);
}

[class*=transition-].delay-long-4 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-long-4);
}

[class*=transition-].delay-extra-long-1 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-extra-long-1);
}

[class*=transition-].delay-extra-long-2 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-extra-long-2);
}

[class*=transition-].delay-extra-long-3 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-extra-long-3);
}

[class*=transition-].delay-extra-long-4 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-extra-long-4);
}

[class*=transition-].delay-extra-long-5 {
  --cds-sys-motion-transition-delay: var(--cds-sys-motion-duration-extra-long-5);
}

[class*=child-transition-].ease-default {
  --cds-sys-motion-child-transition-ease: var(--cds-sys-motion-ease-default);
}

[class*=child-transition-].ease-linear {
  --cds-sys-motion-child-transition-ease: var(--cds-sys-motion-ease-linear);
}

[class*=child-transition-].ease-standard {
  --cds-sys-motion-child-transition-ease: var(--cds-sys-motion-ease-standard);
}

[class*=child-transition-].ease-standard-accelerate {
  --cds-sys-motion-child-transition-ease: var(--cds-sys-motion-ease-standard-accelerate);
}

[class*=child-transition-].ease-standard-decelerate {
  --cds-sys-motion-child-transition-ease: var(--cds-sys-motion-ease-standard-decelerate);
}

[class*=child-transition-].ease-emphasized {
  --cds-sys-motion-child-transition-ease: var(--cds-sys-motion-ease-emphasized);
}

[class*=child-transition-].ease-emphasized-accelerate {
  --cds-sys-motion-child-transition-ease: var(--cds-sys-motion-ease-emphasized-accelerate);
}

[class*=child-transition-].ease-emphasized-decelerate {
  --cds-sys-motion-child-transition-ease: var(--cds-sys-motion-ease-emphasized-decelerate);
}

[class*=child-transition-].duration-short-1 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-short-1);
}

[class*=child-transition-].duration-short-2 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-short-2);
}

[class*=child-transition-].duration-short-3 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-short-3);
}

[class*=child-transition-].duration-short-4 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-short-4);
}

[class*=child-transition-].duration-medium-1 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-medium-1);
}

[class*=child-transition-].duration-medium-2 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-medium-2);
}

[class*=child-transition-].duration-medium-3 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-medium-3);
}

[class*=child-transition-].duration-medium-4 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-medium-4);
}

[class*=child-transition-].duration-long-1 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-long-1);
}

[class*=child-transition-].duration-long-2 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-long-2);
}

[class*=child-transition-].duration-long-3 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-long-3);
}

[class*=child-transition-].duration-long-4 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-long-4);
}

[class*=child-transition-].duration-extra-long-1 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-extra-long-1);
}

[class*=child-transition-].duration-extra-long-2 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-extra-long-2);
}

[class*=child-transition-].duration-extra-long-3 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-extra-long-3);
}

[class*=child-transition-].duration-extra-long-4 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-extra-long-4);
}

[class*=child-transition-].duration-extra-long-5 {
  --cds-sys-motion-child-transition-duration: var(--cds-sys-motion-duration-extra-long-5);
}

[class*=child-transition-].delay-short-1 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-short-1);
}

[class*=child-transition-].delay-short-2 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-short-2);
}

[class*=child-transition-].delay-short-3 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-short-3);
}

[class*=child-transition-].delay-short-4 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-short-4);
}

[class*=child-transition-].delay-medium-1 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-medium-1);
}

[class*=child-transition-].delay-medium-2 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-medium-2);
}

[class*=child-transition-].delay-medium-3 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-medium-3);
}

[class*=child-transition-].delay-medium-4 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-medium-4);
}

[class*=child-transition-].delay-long-1 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-long-1);
}

[class*=child-transition-].delay-long-2 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-long-2);
}

[class*=child-transition-].delay-long-3 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-long-3);
}

[class*=child-transition-].delay-long-4 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-long-4);
}

[class*=child-transition-].delay-extra-long-1 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-extra-long-1);
}

[class*=child-transition-].delay-extra-long-2 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-extra-long-2);
}

[class*=child-transition-].delay-extra-long-3 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-extra-long-3);
}

[class*=child-transition-].delay-extra-long-4 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-extra-long-4);
}

[class*=child-transition-].delay-extra-long-5 {
  --cds-sys-motion-child-transition-delay: var(--cds-sys-motion-duration-extra-long-5);
}

[class*=animate-].ease-default {
  --cds-sys-motion-animate-ease: var(--cds-sys-motion-ease-default);
}

[class*=animate-].ease-linear {
  --cds-sys-motion-animate-ease: var(--cds-sys-motion-ease-linear);
}

[class*=animate-].ease-standard {
  --cds-sys-motion-animate-ease: var(--cds-sys-motion-ease-standard);
}

[class*=animate-].ease-standard-accelerate {
  --cds-sys-motion-animate-ease: var(--cds-sys-motion-ease-standard-accelerate);
}

[class*=animate-].ease-standard-decelerate {
  --cds-sys-motion-animate-ease: var(--cds-sys-motion-ease-standard-decelerate);
}

[class*=animate-].ease-emphasized {
  --cds-sys-motion-animate-ease: var(--cds-sys-motion-ease-emphasized);
}

[class*=animate-].ease-emphasized-accelerate {
  --cds-sys-motion-animate-ease: var(--cds-sys-motion-ease-emphasized-accelerate);
}

[class*=animate-].ease-emphasized-decelerate {
  --cds-sys-motion-animate-ease: var(--cds-sys-motion-ease-emphasized-decelerate);
}

[class*=animate-].duration-short-1 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-short-1);
}

[class*=animate-].duration-short-2 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-short-2);
}

[class*=animate-].duration-short-3 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-short-3);
}

[class*=animate-].duration-short-4 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-short-4);
}

[class*=animate-].duration-medium-1 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-medium-1);
}

[class*=animate-].duration-medium-2 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-medium-2);
}

[class*=animate-].duration-medium-3 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-medium-3);
}

[class*=animate-].duration-medium-4 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-medium-4);
}

[class*=animate-].duration-long-1 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-long-1);
}

[class*=animate-].duration-long-2 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-long-2);
}

[class*=animate-].duration-long-3 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-long-3);
}

[class*=animate-].duration-long-4 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-long-4);
}

[class*=animate-].duration-extra-long-1 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-extra-long-1);
}

[class*=animate-].duration-extra-long-2 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-extra-long-2);
}

[class*=animate-].duration-extra-long-3 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-extra-long-3);
}

[class*=animate-].duration-extra-long-4 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-extra-long-4);
}

[class*=animate-].duration-extra-long-5 {
  --cds-sys-motion-animate-duration: var(--cds-sys-motion-duration-extra-long-5);
}

[class*=animate-].delay-short-1 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-short-1);
}

[class*=animate-].delay-short-2 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-short-2);
}

[class*=animate-].delay-short-3 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-short-3);
}

[class*=animate-].delay-short-4 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-short-4);
}

[class*=animate-].delay-medium-1 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-medium-1);
}

[class*=animate-].delay-medium-2 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-medium-2);
}

[class*=animate-].delay-medium-3 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-medium-3);
}

[class*=animate-].delay-medium-4 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-medium-4);
}

[class*=animate-].delay-long-1 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-long-1);
}

[class*=animate-].delay-long-2 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-long-2);
}

[class*=animate-].delay-long-3 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-long-3);
}

[class*=animate-].delay-long-4 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-long-4);
}

[class*=animate-].delay-extra-long-1 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-extra-long-1);
}

[class*=animate-].delay-extra-long-2 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-extra-long-2);
}

[class*=animate-].delay-extra-long-3 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-extra-long-3);
}

[class*=animate-].delay-extra-long-4 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-extra-long-4);
}

[class*=animate-].delay-extra-long-5 {
  --cds-sys-motion-animate-delay: var(--cds-sys-motion-duration-extra-long-5);
}

.container {
  display: block;
  margin-inline: auto;
  max-width: var(--cds-comp-composition-container-max-width, var(--cds-sys-dimension-base-xl));
}
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

[class^=stack] > * {
  margin-block: 0;
}

[class^=stack]:only-child {
  block-size: 100%;
}

.stack > * + * {
  margin-block-start: var(--cds-comp-composition-stack-space, var(--cds-sys-spacing-s));
}

.stack-space-3xs > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-3xs);
}

.stack-space-2xs > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-2xs);
}

.stack-space-xs > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-xs);
}

.stack-space-s > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-s);
}

.stack-space-m > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-m);
}

.stack-space-l > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-l);
}

.stack-space-xl > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-xl);
}

.stack-space-2xl > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-2xl);
}

.stack-space-3xl > * + * {
  --cds-comp-composition-stack-space: var(--cds-sys-spacing-3xl);
}
.center {
  box-sizing: content-box;
  display: block;
  margin-inline: auto;
  max-width: 60ch;
}

.center-content {
  display: grid;
  place-content: center;
}

.cluster > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.cluster.center-content > *,
.cluster.center-content {
  justify-content: center;
}

.cluster > * {
  margin: calc(var(--cds-comp-composition-cluster-space, var(--cds-sys-spacing-s)) / 2 * -1);
}

.cluster > * > * {
  margin: calc(var(--cds-comp-composition-cluster-space, var(--cds-sys-spacing-s)) / 2);
}

.cluster-space-3xs {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-3xs);
}

.cluster-space-2xs {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-2xs);
}

.cluster-space-xs {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-xs);
}

.cluster-space-s {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-s);
}

.cluster-space-m {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-m);
}

.cluster-space-l {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-l);
}

.cluster-space-xl {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-xl);
}

.cluster-space-2xl {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-2xl);
}

.cluster-space-3xl {
  --cds-comp-composition-cluster-space: var(--cds-sys-spacing-3xl);
}
.switcher > * {
  display: flex;
  flex-wrap: wrap;
}

.switcher-max-3 > * > :nth-last-child(n+4),
.switcher-max-3 > * > :nth-last-child(n+4) ~ * {
  flex-basis: 100%;
}

.switcher > * {
  margin: calc(var(--cds-comp-composition-switcher-space, var(--cds-sys-spacing-m)) / 2 * -1);
}

.switcher > * > * {
  flex-grow: 1;
  flex-basis: calc((var(--cds-comp-composition-switcher-treshold, var(--cds-sys-dimension-base-m)) - 100%) * 999);
  margin: calc(var(--cds-comp-composition-switcher-space, var(--cds-sys-spacing-m)) / 2);
}

.switcher-space-3xs {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-3xs);
}

.switcher-space-2xs {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-2xs);
}

.switcher-space-xs {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-xs);
}

.switcher-space-s {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-s);
}

.switcher-space-m {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-m);
}

.switcher-space-l {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-l);
}

.switcher-space-xl {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-xl);
}

.switcher-space-2xl {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-2xl);
}

.switcher-space-3xl {
  --cds-comp-composition-switcher-space: var(--cds-sys-spacing-3xl);
}

.switcher-treshold-3xs {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-3xs);
}

.switcher-treshold-2xs {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-2xs);
}

.switcher-treshold-xs {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-xs);
}

.switcher-treshold-s {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-s);
}

.switcher-treshold-m {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-m);
}

.switcher-treshold-l {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-l);
}

.switcher-treshold-xl {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-xl);
}

.switcher-treshold-2xl {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-2xl);
}

.switcher-treshold-3xl {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-3xl);
}

.switcher-treshold-4xl {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-4xl);
}

.switcher-treshold-5xl {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-5xl);
}

.switcher-treshold-6xl {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-6xl);
}

.switcher-treshold-7xl {
  --cds-comp-composition-switcher-treshold: var(--cds-sys-dimension-base-7xl);
}
.reel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

.reel > img {
  height: 100%;
  flex-basis: auto;
  width: hidden;
}

.reel > * + * {
  margin-left: var(--cds-comp-composition-reel-space, var(--cds-sys-spacing-s));
}

.reel.overflowing {
  padding-bottom: var(--cds-comp-composition-reel-space, var(--cds-sys-spacing-s));
}

.reel-space-3xs {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-3xs);
}

.reel-space-2xs {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-2xs);
}

.reel-space-xs {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-xs);
}

.reel-space-s {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-s);
}

.reel-space-m {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-m);
}

.reel-space-l {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-l);
}

.reel-space-xl {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-xl);
}

.reel-space-2xl {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-2xl);
}

.reel-space-3xl {
  --cds-comp-composition-reel-space: var(--cds-sys-spacing-3xl);
}

.reel::-webkit-scrollbar {
  height: 1rem;
}

.reel::-webkit-scrollbar-track {
  background-color: rgba(var(--cds-comp-composition-reel-track-color, var(--cds-sys-color-secondary-container)), 1);
}

.reel::-webkit-scrollbar-thumb {
  background-color: rgba(var(--cds-comp-composition-reel-track-color, var(--cds-sys-color-secondary-container)), 1);
  background-image: linear-gradient(rgb(var(--cds-comp-composition-reel-track-color, var(--cds-sys-color-secondary-container))) 0, rgb(var(--cds-comp-composition-reel-track-color, var(--cds-sys-color-secondary-container))) 0.25rem, rgb(var(--cds-comp-composition-reel-thumb-color, var(--cds-sys-color-secondary))) 0.25rem, rgb(var(--cds-comp-composition-reel-thumb-color, var(--cds-sys-color-secondary))) 0.75rem, rgb(var(--cds-comp-composition-reel-track-color, var(--cds-sys-color-secondary-container))) 0.75rem);
}

.reel {
  height: var(--cds-comp-composition-reel-item-h, auto);
}

.reel-item-h-s {
  --cds-comp-composition-reel-item-h: var(--cds-sys-dimension-row-s);
}

.reel > * {
  flex: 0 0 var(--cds-comp-composition-reel-item-w, auto);
  max-width: var(--cds-comp-composition-reel-item-w, auto);
}

.reel-item-w-m {
  --cds-comp-composition-reel-item-w: var(--cds-sys-dimension-base-m);
}
.imposter {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  overflow: auto;
}

.imposter {
  position: var(--cds-comp-composition-imposter-position, absolute);
}

.imposter {
  max-height: calc(100% - var(--cds-comp-composition-imposter-margin, var(--cds-sys-spacing-none)) * 2);
  max-width: calc(100% - var(--cds-comp-composition-imposter-margin, var(--cds-sys-spacing-none)) * 2);
}

.imposter-margin-s {
  --cds-comp-composition-imposter-margin: var(--cds-sys-spacing-s);
}

.auto-grid {
  align-content: flex-start;
  display: grid;
  grid-template-columns: 100%;
}

.auto-grid {
  gap: var(--cds-comp-composition-auto-grid-space, var(--cds-sys-spacing-m));
}

.auto-grid-space-3xs {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-3xs);
}

.auto-grid-space-2xs {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-2xs);
}

.auto-grid-space-xs {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-xs);
}

.auto-grid-space-s {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-s);
}

.auto-grid-space-m {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-m);
}

.auto-grid-space-l {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-l);
}

.auto-grid-space-xl {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-xl);
}

.auto-grid-space-2xl {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-2xl);
}

.auto-grid-space-3xl {
  --cds-comp-composition-auto-grid-space: var(--cds-sys-spacing-3xl);
}

.auto-grid {
  grid-template-columns: repeat(var(--cds-comp-composition-auto-grid-track-list, auto-fill), minmax(var(--cds-comp-composition-auto-grid-min, var(--cds-sys-dimension-base-m)), 1fr));
}

.auto-grid-min-m {
  --cds-comp-composition-auto-grid-min: var(--cds-sys-dimension-base-m);
}

.auto-grid-fill {
  --cds-comp-composition-auto-grid-track-list: auto-fill;
}

.auto-grid-fit {
  --cds-comp-composition-auto-grid-track-list: auto-fit;
}
.table[class*=border-] {
  border-collapse: separate;
  border-spacing: 0;
}
.table[class*=border-] tbody > tr > td:not(.border-none), .table[class*=border-] tbody > tr.mat-row > td.mat-cell:not(.border-none),
.table[class*=border-] thead > tr > th:not(.border-none), .table[class*=border-] thead > tr.mat-header-row > th.mat-header-cell:not(.border-none) {
  border-color: rgba(var(--cds-comp-table-border-color), var(--cds-comp-table-border-opacity));
}
.table tbody > tr > td.border-none, .table tbody > tr.mat-row > td.mat-cell.border-none,
.table thead > tr > th.border-none, .table thead > tr.mat-header-row > th.mat-header-cell.border-none {
  border-style: none;
}
.table > thead > tr, .table thead > tr.mat-header-row {
  height: var(--cds-comp-table-header-height);
}
.table > thead > tr > th:not(.table-group), .table thead > tr.mat-header-row > th.mat-header-cell:not(.table-group) {
  position: relative;
  vertical-align: bottom;
  font-family: var(--cds-comp-table-header-label-brand);
  font-size: var(--cds-comp-table-header-label-font-size);
  font-weight: var(--cds-comp-table-header-label-weight);
  line-height: var(--cds-comp-table-header-label-line-height);
  letter-spacing: var(--cds-comp-table-header-label-tracking);
  padding-inline: var(--cds-comp-table-header-padding-inline);
  padding-block: var(--cds-comp-table-header-padding-block);
}
.table tbody > tr > td, .table tbody > tr.mat-row > td.mat-cell {
  font-family: var(--cds-comp-table-cell-text-brand);
  font-size: var(--cds-comp-table-cell-text-font-size);
  font-weight: var(--cds-comp-table-cell-text-weight);
  line-height: var(--cds-comp-table-cell-text-line-height);
  letter-spacing: var(--cds-comp-table-cell-text-tracking);
  padding-inline: var(--cds-comp-table-cell-padding-inline);
}
.table tr:first-child > td:first-child:not(.table-group), .table tr.mat-row:first-child > td:first-child:not(.table-group) {
  border-top-left-radius: var(--cds-comp-table-border-radius);
}
.table tr:first-child > td:last-child:not(.table-group), .table tr.mat-row:first-child > td:last-child:not(.table-group) {
  border-top-right-radius: var(--cds-comp-table-border-radius);
}
.table tr:last-child > td:first-child:not(.table-group), .table tr.mat-row:last-child > td:first-child:not(.table-group) {
  border-bottom-left-radius: var(--cds-comp-table-border-radius);
}
.table tr:last-child > td:last-child:not(.table-group), .table tr.mat-row:last-child > td:last-child:not(.table-group) {
  border-bottom-right-radius: var(--cds-comp-table-border-radius);
}
.table tr:first-child > td:last-child, .table tr.mat-row:first-child > td.mat-cell:last-child {
  border-top-right-radius: 0;
}