@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-cyrillic-ext.BeNbU08G.woff2') format('woff2');
  unicode-range:
    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-cyrillic.CD0kT8R4.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-greek-ext.CFAEQ5Ow.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-greek.Dsf7YjP7.woff2') format('woff2');
  unicode-range:
    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-vietnamese.CpqCnS2H.woff2') format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-latin-ext.Dl_ayf4-.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-latin.Cy4MYw_J.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-cyrillic-ext._dlW9xFb.woff2') format('woff2');
  unicode-range:
    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-cyrillic.D7dRslh9.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-greek-ext.Ct-Tf2bq.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-greek.DNcpQ8QC.woff2') format('woff2');
  unicode-range:
    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-vietnamese.BI5UxJD-.woff2') format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-latin-ext.DytegdRQ.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-latin.COaG5lWR.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/*
Some code points in Inter are not compatible with CJK languages.

https://www.unicode.org/L2/L2014/14006-sv-western-vs-cjk.pdf
https://www.unicode.org/L2/L2018/18013-svs-proposal.pdf
https://www.unicode.org/L2/L2018/18073-svs-proposal.pdf
https://www.unicode.org/L2/L2023/23212r-quotes-svs-proposal.pdf

https://github.com/w3c/clreq/blob/f837ffe4a5501e72c17bd02961ce1b440916624f/local.css#L4
& U+2015 (similar to U+2014 in Japanese)

All CJK languages: U+00B7, U+2013, U+2014, U+2015, U+2018, U+2019, U+201C, U+201D, U+2026, U+2E3A
zh's request: U+007E (Both are fine in ja because unused there)
zh's request but decision postponed: U+002F (Both are fine in ja; include it into Inter for the time being)
*/

@font-face {
  font-family: Inter4CJK;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-cyrillic-ext.BeNbU08G.woff2') format('woff2');
  unicode-range:
    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter4CJK;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-cyrillic.CD0kT8R4.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Inter4CJK;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-greek-ext.CFAEQ5Ow.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: Inter4CJK;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-greek.Dsf7YjP7.woff2') format('woff2');
  unicode-range:
    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: Inter4CJK;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-vietnamese.CpqCnS2H.woff2') format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter4CJK;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-latin-ext.Dl_ayf4-.woff2') format('woff2');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Exclude some ambiguous CJK characters. */
@font-face {
  font-family: Inter4CJK;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-latin.Cy4MYw_J.woff2') format('woff2');
  unicode-range:
    U+0000-007D, U+007F-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2016-2017,
    U+201A-201B, U+201E-2025, U+2027-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter4CJK;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-cyrillic-ext._dlW9xFb.woff2') format('woff2');
  unicode-range:
    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter4CJK;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-cyrillic.D7dRslh9.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Inter4CJK;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-greek-ext.Ct-Tf2bq.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: Inter4CJK;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-greek.DNcpQ8QC.woff2') format('woff2');
  unicode-range:
    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: Inter4CJK;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-vietnamese.BI5UxJD-.woff2') format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter4CJK;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-latin-ext.DytegdRQ.woff2') format('woff2');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Exclude some ambiguous CJK characters. */
@font-face {
  font-family: Inter4CJK;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-latin.COaG5lWR.woff2') format('woff2');
  unicode-range:
    U+0000-007D, U+007F-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2016-2017,
    U+201A-201B, U+201E-2025, U+2027-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Generate the subsetted fonts using: `pyftsubset <file>.woff2 --unicodes="<range>" --layout-features+=pnum,tnum --flavor=woff2 --output-file="inter-\3c style>-<subset>.woff2"` */
/**
 * Colors: Solid
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-white: #ffffff;
  --vp-c-black: #000000;

  --vp-c-neutral: var(--vp-c-black);
  --vp-c-neutral-inverse: var(--vp-c-white);
}

.dark {
  --vp-c-neutral: var(--vp-c-white);
  --vp-c-neutral-inverse: var(--vp-c-black);
}

/**
 * Colors: Palette
 *
 * The primitive colors used for accent colors. These colors are referenced
 * by functional colors such as "Text", "Background", or "Brand".
 *
 * Each colors have exact same color scale system with 3 levels of solid
 * colors with different brightness, and 1 soft color.
 *
 * - `XXX-1`: The most solid color used mainly for colored text. It must
 *   satisfy the contrast ratio against when used on top of `XXX-soft`.
 *
 * - `XXX-2`: The color used mainly for hover state of the button.
 *
 * - `XXX-3`: The color for solid background, such as bg color of the button.
 *    It must satisfy the contrast ratio with pure white (#ffffff) text on
 *    top of it.
 *
 * - `XXX-soft`: The color used for subtle background such as custom container
 *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
 *    on top of it.
 *
 *    The soft color must be semi transparent alpha channel. This is crucial
 *    because it allows adding multiple "soft" colors on top of each other
 *    to create a accent, such as when having inline code block inside
 *    custom containers.
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-gray-1: #dddde3;
  --vp-c-gray-2: #e4e4e9;
  --vp-c-gray-3: #ebebef;
  --vp-c-gray-soft: rgba(142, 150, 170, 0.14);

  --vp-c-indigo-1: #3451b2;
  --vp-c-indigo-2: #3a5ccc;
  --vp-c-indigo-3: #5672cd;
  --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);

  --vp-c-purple-1: #6f42c1;
  --vp-c-purple-2: #7e4cc9;
  --vp-c-purple-3: #8e5cd9;
  --vp-c-purple-soft: rgba(159, 122, 234, 0.14);

  --vp-c-green-1: #18794e;
  --vp-c-green-2: #299764;
  --vp-c-green-3: #30a46c;
  --vp-c-green-soft: rgba(16, 185, 129, 0.14);

  --vp-c-yellow-1: #915930;
  --vp-c-yellow-2: #946300;
  --vp-c-yellow-3: #9f6a00;
  --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);

  --vp-c-red-1: #b8272c;
  --vp-c-red-2: #d5393e;
  --vp-c-red-3: #e0575b;
  --vp-c-red-soft: rgba(244, 63, 94, 0.14);

  --vp-c-sponsor: #db2777;
}

.dark {
  --vp-c-gray-1: #515c67;
  --vp-c-gray-2: #414853;
  --vp-c-gray-3: #32363f;
  --vp-c-gray-soft: rgba(101, 117, 133, 0.16);

  --vp-c-indigo-1: #a8b1ff;
  --vp-c-indigo-2: #5c73e7;
  --vp-c-indigo-3: #3e63dd;
  --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);

  --vp-c-purple-1: #c8abfa;
  --vp-c-purple-2: #a879e6;
  --vp-c-purple-3: #8e5cd9;
  --vp-c-purple-soft: rgba(159, 122, 234, 0.16);

  --vp-c-green-1: #3dd68c;
  --vp-c-green-2: #30a46c;
  --vp-c-green-3: #298459;
  --vp-c-green-soft: rgba(16, 185, 129, 0.16);

  --vp-c-yellow-1: #f9b44e;
  --vp-c-yellow-2: #da8b17;
  --vp-c-yellow-3: #a46a0a;
  --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);

  --vp-c-red-1: #f66f81;
  --vp-c-red-2: #f14158;
  --vp-c-red-3: #b62a3c;
  --vp-c-red-soft: rgba(244, 63, 94, 0.16);
}

/**
 * Colors: Background
 *
 * - `bg`: The bg color used for main screen.
 *
 * - `bg-alt`: The alternative bg color used in places such as "sidebar",
 *   or "code block".
 *
 * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
 *   such as "dialog".
 *
 * - `bg-soft`: The bg color to slightly distinguish some components from
 *   the page. Used for things like "carbon ads" or "table".
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-bg: #ffffff;
  --vp-c-bg-alt: #f6f6f7;
  --vp-c-bg-elv: #ffffff;
  --vp-c-bg-soft: #f6f6f7;
}

.dark {
  --vp-c-bg: #1b1b1f;
  --vp-c-bg-alt: #161618;
  --vp-c-bg-elv: #202127;
  --vp-c-bg-soft: #202127;
}

/**
 * Colors: Borders
 *
 * - `divider`: This is used for separators. This is used to divide sections
 *   within the same components, such as having separator on "h2" heading.
 *
 * - `border`: This is designed for borders on interactive components.
 *   For example this should be used for a button outline.
 *
 * - `gutter`: This is used to divide components in the page. For example
 *   the header and the lest of the page.
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-border: #c2c2c4;
  --vp-c-divider: #e2e2e3;
  --vp-c-gutter: #e2e2e3;
}

.dark {
  --vp-c-border: #3c3f44;
  --vp-c-divider: #2e2e32;
  --vp-c-gutter: #000000;
}

/**
 * Colors: Text
 *
 * - `text-1`: Used for primary text.
 *
 * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
 *
 * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-text-1: #3c3c43;
  --vp-c-text-2: #67676c;
  --vp-c-text-3: #929295;
}

.dark {
  --vp-c-text-1: #dfdfd6;
  --vp-c-text-2: #98989f;
  --vp-c-text-3: #6a6a71;
}

/**
 * Colors: Function
 *
 * - `default`: The color used purely for subtle indication without any
 *   special meanings attached to it such as bg color for menu hover state.
 *
 * - `brand`: Used for primary brand colors, such as link text, button with
 *   brand theme, etc.
 *
 * - `tip`: Used to indicate useful information. The default theme uses the
 *   brand color for this by default.
 *
 * - `warning`: Used to indicate warning to the users. Used in custom
 *   container, badges, etc.
 *
 * - `danger`: Used to show error, or dangerous message to the users. Used
 *   in custom container, badges, etc.
 *
 * To understand the scaling system, refer to "Colors: Palette" section.
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-default-1: var(--vp-c-gray-1);
  --vp-c-default-2: var(--vp-c-gray-2);
  --vp-c-default-3: var(--vp-c-gray-3);
  --vp-c-default-soft: var(--vp-c-gray-soft);

  --vp-c-brand-1: var(--vp-c-indigo-1);
  --vp-c-brand-2: var(--vp-c-indigo-2);
  --vp-c-brand-3: var(--vp-c-indigo-3);
  --vp-c-brand-soft: var(--vp-c-indigo-soft);

  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
  --vp-c-brand: var(--vp-c-brand-1);

  --vp-c-tip-1: var(--vp-c-brand-1);
  --vp-c-tip-2: var(--vp-c-brand-2);
  --vp-c-tip-3: var(--vp-c-brand-3);
  --vp-c-tip-soft: var(--vp-c-brand-soft);

  --vp-c-note-1: var(--vp-c-brand-1);
  --vp-c-note-2: var(--vp-c-brand-2);
  --vp-c-note-3: var(--vp-c-brand-3);
  --vp-c-note-soft: var(--vp-c-brand-soft);

  --vp-c-success-1: var(--vp-c-green-1);
  --vp-c-success-2: var(--vp-c-green-2);
  --vp-c-success-3: var(--vp-c-green-3);
  --vp-c-success-soft: var(--vp-c-green-soft);

  --vp-c-important-1: var(--vp-c-purple-1);
  --vp-c-important-2: var(--vp-c-purple-2);
  --vp-c-important-3: var(--vp-c-purple-3);
  --vp-c-important-soft: var(--vp-c-purple-soft);

  --vp-c-warning-1: var(--vp-c-yellow-1);
  --vp-c-warning-2: var(--vp-c-yellow-2);
  --vp-c-warning-3: var(--vp-c-yellow-3);
  --vp-c-warning-soft: var(--vp-c-yellow-soft);

  --vp-c-danger-1: var(--vp-c-red-1);
  --vp-c-danger-2: var(--vp-c-red-2);
  --vp-c-danger-3: var(--vp-c-red-3);
  --vp-c-danger-soft: var(--vp-c-red-soft);

  --vp-c-caution-1: var(--vp-c-red-1);
  --vp-c-caution-2: var(--vp-c-red-2);
  --vp-c-caution-3: var(--vp-c-red-3);
  --vp-c-caution-soft: var(--vp-c-red-soft);
}

/**
 * Typography
 * -------------------------------------------------------------------------- */

:root {
  --vp-font-family-base:
    'Inter', -apple-system, BlinkMacSystemFont, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --vp-font-family-mono:
    ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
    'Courier New', monospace;
  font-optical-sizing: auto;
}

/* :root and [lang] have the same specificity.
   [lang] covers the case of e.g. <div lang="zh-CN"> in a non-Chinese page.
*/
/* Korean compatibility is unverified, so application of custom Inter to Korean is pending. */
[lang]:where(:lang(zh, ja)) {
  --vp-font-family-base:
    'Inter4CJK', -apple-system, BlinkMacSystemFont, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

[lang]:where(:lang(zh, ja, ko)) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    line-break: strict;
  }
}

/**
 * Shadows
 * -------------------------------------------------------------------------- */

:root {
  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --vp-shadow-5:
    0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
}

/**
 * Z-indexes
 * -------------------------------------------------------------------------- */

:root {
  --vp-z-index-footer: 10;
  --vp-z-index-local-nav: 20;
  --vp-z-index-nav: 30;
  --vp-z-index-layout-top: 40;
  --vp-z-index-backdrop: 50;
  --vp-z-index-sidebar: 60;
}

@media (min-width: 960px) {
  :root {
    --vp-z-index-sidebar: 25;
  }
}

/**
 * Layouts
 * -------------------------------------------------------------------------- */

:root {
  --vp-layout-max-width: 1440px;
}

/**
 * Component: Header Anchor
 * -------------------------------------------------------------------------- */

:root {
  --vp-header-anchor-symbol: '#';
}

/**
 * Component: Code
 * -------------------------------------------------------------------------- */

:root {
  --vp-code-line-height: 1.7;
  --vp-code-font-size: 0.875em;
  --vp-code-color: var(--vp-c-brand-1);
  --vp-code-link-color: var(--vp-c-brand-1);
  --vp-code-link-hover-color: var(--vp-c-brand-2);
  --vp-code-bg: var(--vp-c-default-soft);

  --vp-code-block-color: var(--vp-c-text-2);
  --vp-code-block-bg: var(--vp-c-bg-alt);
  --vp-code-block-divider-color: var(--vp-c-gutter);

  --vp-code-lang-color: var(--vp-c-text-2);

  --vp-code-line-highlight-color: var(--vp-c-default-soft);
  --vp-code-line-number-color: var(--vp-c-text-2);

  --vp-code-line-diff-add-color: var(--vp-c-success-soft);
  --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);

  --vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
  --vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);

  --vp-code-line-warning-color: var(--vp-c-warning-soft);
  --vp-code-line-error-color: var(--vp-c-danger-soft);

  --vp-code-copy-code-border-color: var(--vp-c-divider);
  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
  --vp-code-copy-code-active-text: var(--vp-c-text-2);
  --vp-code-copy-copied-text-content: 'Copied';

  --vp-code-tab-divider: var(--vp-code-block-divider-color);
  --vp-code-tab-text-color: var(--vp-c-text-2);
  --vp-code-tab-bg: var(--vp-code-block-bg);
  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
  --vp-code-tab-active-text-color: var(--vp-c-text-1);
  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
}

:lang(es),
:lang(pt) {
  --vp-code-copy-copied-text-content: 'Copiado';
}
:lang(fa) {
  --vp-code-copy-copied-text-content: 'کپی شد';
}
:lang(ko) {
  --vp-code-copy-copied-text-content: '복사됨';
}
:lang(ru) {
  --vp-code-copy-copied-text-content: 'Скопировано';
}
:lang(zh) {
  --vp-code-copy-copied-text-content: '已复制';
}
:lang(ja) {
  --vp-code-copy-copied-text-content: 'コピー完了';
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand-3);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-c-brand-1);

  --vp-button-alt-border: transparent;
  --vp-button-alt-text: var(--vp-c-text-1);
  --vp-button-alt-bg: var(--vp-c-default-3);
  --vp-button-alt-hover-border: transparent;
  --vp-button-alt-hover-text: var(--vp-c-text-1);
  --vp-button-alt-hover-bg: var(--vp-c-default-2);
  --vp-button-alt-active-border: transparent;
  --vp-button-alt-active-text: var(--vp-c-text-1);
  --vp-button-alt-active-bg: var(--vp-c-default-1);

  --vp-button-sponsor-border: var(--vp-c-text-2);
  --vp-button-sponsor-text: var(--vp-c-text-2);
  --vp-button-sponsor-bg: transparent;
  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
  --vp-button-sponsor-hover-bg: transparent;
  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
  --vp-button-sponsor-active-bg: transparent;
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-font-size: 14px;
  --vp-custom-block-code-font-size: 13px;

  --vp-custom-block-info-border: transparent;
  --vp-custom-block-info-text: var(--vp-c-text-1);
  --vp-custom-block-info-bg: var(--vp-c-default-soft);
  --vp-custom-block-info-code-bg: var(--vp-c-default-soft);

  --vp-custom-block-note-border: transparent;
  --vp-custom-block-note-text: var(--vp-c-text-1);
  --vp-custom-block-note-bg: var(--vp-c-default-soft);
  --vp-custom-block-note-code-bg: var(--vp-c-default-soft);

  --vp-custom-block-tip-border: transparent;
  --vp-custom-block-tip-text: var(--vp-c-text-1);
  --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
  --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);

  --vp-custom-block-important-border: transparent;
  --vp-custom-block-important-text: var(--vp-c-text-1);
  --vp-custom-block-important-bg: var(--vp-c-important-soft);
  --vp-custom-block-important-code-bg: var(--vp-c-important-soft);

  --vp-custom-block-warning-border: transparent;
  --vp-custom-block-warning-text: var(--vp-c-text-1);
  --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
  --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);

  --vp-custom-block-danger-border: transparent;
  --vp-custom-block-danger-text: var(--vp-c-text-1);
  --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
  --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);

  --vp-custom-block-caution-border: transparent;
  --vp-custom-block-caution-text: var(--vp-c-text-1);
  --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
  --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);

  --vp-custom-block-details-border: var(--vp-custom-block-info-border);
  --vp-custom-block-details-text: var(--vp-custom-block-info-text);
  --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
  --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
}

/**
 * Component: Input
 * -------------------------------------------------------------------------- */

:root {
  --vp-input-border-color: var(--vp-c-border);
  --vp-input-bg-color: var(--vp-c-bg-alt);

  --vp-input-switch-bg-color: var(--vp-c-default-soft);
}

/**
 * Component: Nav
 * -------------------------------------------------------------------------- */

:root {
  --vp-nav-height: 64px;
  --vp-nav-bg-color: var(--vp-c-bg);
  --vp-nav-screen-bg-color: var(--vp-c-bg);
  --vp-nav-logo-height: 24px;
}

.hide-nav {
  --vp-nav-height: 0px;
}

.hide-nav .VPSidebar {
  --vp-nav-height: 22px;
}

/**
 * Component: Local Nav
 * -------------------------------------------------------------------------- */

:root {
  --vp-local-nav-bg-color: var(--vp-c-bg);
}

/**
 * Component: Sidebar
 * -------------------------------------------------------------------------- */

:root {
  --vp-sidebar-width: 272px;
  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
}

/**
 * Colors Backdrop
 * -------------------------------------------------------------------------- */

:root {
  --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: var(--vp-c-brand-1);
  --vp-home-hero-name-background: transparent;

  --vp-home-hero-image-background-image: none;
  --vp-home-hero-image-filter: none;
}

/**
 * Component: Badge
 * -------------------------------------------------------------------------- */

:root {
  --vp-badge-info-border: transparent;
  --vp-badge-info-text: var(--vp-c-text-2);
  --vp-badge-info-bg: var(--vp-c-default-soft);

  --vp-badge-tip-border: transparent;
  --vp-badge-tip-text: var(--vp-c-tip-1);
  --vp-badge-tip-bg: var(--vp-c-tip-soft);

  --vp-badge-warning-border: transparent;
  --vp-badge-warning-text: var(--vp-c-warning-1);
  --vp-badge-warning-bg: var(--vp-c-warning-soft);

  --vp-badge-danger-border: transparent;
  --vp-badge-danger-text: var(--vp-c-danger-1);
  --vp-badge-danger-bg: var(--vp-c-danger-soft);
}

/**
 * Component: Carbon Ads
 * -------------------------------------------------------------------------- */

:root {
  --vp-carbon-ads-text-color: var(--vp-c-text-1);
  --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
  --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
  --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
  --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
}

/**
  * Component: Local Search
  * -------------------------------------------------------------------------- */

:root {
  --vp-local-search-bg: var(--vp-c-bg);
  --vp-local-search-result-bg: var(--vp-c-bg);
  --vp-local-search-result-border: var(--vp-c-divider);
  --vp-local-search-result-selected-bg: var(--vp-c-bg);
  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
  --vp-local-search-highlight-bg: var(--vp-c-brand-1);
  --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
}
@layer __vitepress_base {
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  html {
    line-height: 1.4;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
    margin: 0;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    line-height: 24px;
    font-family: var(--vp-font-family-base);
    font-size: 16px;
    font-weight: 400;
    color: var(--vp-c-text-1);
    background-color: var(--vp-c-bg);
    font-synthesis: style;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-autospace: normal;
    text-spacing-trim: normal;
  }

  main {
    display: block;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
  }

  p {
    margin: 0;
  }

  strong,
  b {
    font-weight: 600;
  }

  /**
     * Avoid 300ms click delay on touch devices that support the `touch-action`
     * CSS property.
     *
     * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
     * touch devices and IE Mobile 10-11 DON'T remove the click delay when
     * `<meta name="viewport" content="width=device-width">` is present.
     * However, they DO support removing the click delay via
     * `touch-action: manipulation`.
     *
     * See:
     * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
     * - http://caniuse.com/#feat=css-touch-action
     * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
     */
  a,
  area,
  button,
  [role='button'],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  ol,
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  blockquote {
    margin: 0;
  }

  pre,
  code,
  kbd,
  samp {
    font-family: var(--vp-font-family-mono);
    text-autospace: no-autospace;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
  }

  figure {
    margin: 0;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    border: 0;
    padding: 0;
    line-height: inherit;
    color: inherit;
  }

  button {
    padding: 0;
    font-family: inherit;
    background-color: transparent;
    background-image: none;
  }

  button:enabled,
  [role='button']:enabled {
    cursor: pointer;
  }

  button:focus,
  button:focus-visible {
    outline: 1px dotted;
    outline: 4px auto -webkit-focus-ring-color;
  }

  button:focus:not(:focus-visible) {
    outline: none !important;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
  }

  table {
    border-collapse: collapse;
  }

  input {
    background-color: transparent;
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: var(--vp-c-text-3);
  }

  input::-ms-input-placeholder,
  textarea::-ms-input-placeholder {
    color: var(--vp-c-text-3);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--vp-c-text-3);
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  textarea {
    resize: vertical;
  }

  select {
    -webkit-appearance: none;
  }

  fieldset {
    margin: 0;
    padding: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    overflow-wrap: break-word;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  vite-error-overlay {
    z-index: 9999;
  }

  mjx-container {
    overflow-x: auto;
  }

  mjx-container > svg {
    display: inline-block;
    margin: auto;
  }
}
[class^='vpi-'],
[class*=' vpi-'],
.vp-icon {
  width: 1em;
  height: 1em;
}
[class^='vpi-'].bg,
[class*=' vpi-'].bg,
.vp-icon.bg {
  background-size: 100% 100%;
  background-color: transparent;
}
[class^='vpi-']:not(.bg),
[class*=' vpi-']:not(.bg),
.vp-icon:not(.bg) {
  -webkit-mask: var(--icon) no-repeat;
  mask: var(--icon) no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: currentColor;
  color: inherit;
}

/* internal icons - used under ISC from https://lucide.dev/ */
.vpi-align-left {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12H3m14 6H3M21 6H3'/%3E%3C/svg%3E");
}
.vpi-arrow-right,
.vpi-arrow-down,
.vpi-arrow-left,
.vpi-arrow-up {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");
}
.vpi-chevron-right,
.vpi-chevron-down,
.vpi-chevron-left,
.vpi-chevron-up {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");
}
.vpi-chevron-down,
.vpi-arrow-down {
  /*rtl:ignore*/
  transform: rotate(90deg);
}
.vpi-chevron-left,
.vpi-arrow-left {
  /*rtl:ignore*/
  transform: rotate(180deg);
}
.vpi-chevron-up,
.vpi-arrow-up {
  /*rtl:ignore*/
  transform: rotate(-90deg);
}
.vpi-square-pen {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/g%3E%3C/svg%3E");
}
.vpi-plus {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7v14'/%3E%3C/svg%3E");
}
.vpi-sun {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/g%3E%3C/svg%3E");
}
.vpi-moon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3a6 6 0 0 0 9 9a9 9 0 1 1-9-9'/%3E%3C/svg%3E");
}
.vpi-more-horizontal {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.vpi-languages {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6'/%3E%3C/svg%3E");
}
.vpi-heart {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2c-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}
.vpi-search {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E");
}
.vpi-sparkles {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.vpi-layout-list {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7m-7 5h7m-7 6h7m-7 5h7'/%3E%3C/g%3E%3C/svg%3E");
}
.vpi-delete {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 0 0-1.344.519l-6.328 5.74a1 1 0 0 0 0 1.481l6.328 5.741A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm2 4l6 6m0-6l-6 6'/%3E%3C/svg%3E");
}
.vpi-corner-down-left {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3Cpath d='m9 10l-5 5l5 5'/%3E%3C/g%3E%3C/svg%3E");
}
:root {
  /* clipboard */
  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E");
  /* clipboard-check */
  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E");
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.custom-block {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 16px 16px 8px;
  line-height: 24px;
  font-size: var(--vp-custom-block-font-size);
  color: var(--vp-c-text-2);
}

.custom-block.info {
  border-color: var(--vp-custom-block-info-border);
  color: var(--vp-custom-block-info-text);
  background-color: var(--vp-custom-block-info-bg);
}

.custom-block.info a,
.custom-block.info code {
  color: var(--vp-c-brand-1);
}

.custom-block.info a:hover,
.custom-block.info a:hover > code {
  color: var(--vp-c-brand-2);
}

.custom-block.info code {
  background-color: var(--vp-custom-block-info-code-bg);
}

.custom-block.note {
  border-color: var(--vp-custom-block-note-border);
  color: var(--vp-custom-block-note-text);
  background-color: var(--vp-custom-block-note-bg);
}

.custom-block.note a,
.custom-block.note code {
  color: var(--vp-c-brand-1);
}

.custom-block.note a:hover,
.custom-block.note a:hover > code {
  color: var(--vp-c-brand-2);
}

.custom-block.note code {
  background-color: var(--vp-custom-block-note-code-bg);
}

.custom-block.tip {
  border-color: var(--vp-custom-block-tip-border);
  color: var(--vp-custom-block-tip-text);
  background-color: var(--vp-custom-block-tip-bg);
}

.custom-block.tip a,
.custom-block.tip code {
  color: var(--vp-c-tip-1);
}

.custom-block.tip a:hover,
.custom-block.tip a:hover > code {
  color: var(--vp-c-tip-2);
}

.custom-block.tip code {
  background-color: var(--vp-custom-block-tip-code-bg);
}

.custom-block.important {
  border-color: var(--vp-custom-block-important-border);
  color: var(--vp-custom-block-important-text);
  background-color: var(--vp-custom-block-important-bg);
}

.custom-block.important a,
.custom-block.important code {
  color: var(--vp-c-important-1);
}

.custom-block.important a:hover,
.custom-block.important a:hover > code {
  color: var(--vp-c-important-2);
}

.custom-block.important code {
  background-color: var(--vp-custom-block-important-code-bg);
}

.custom-block.warning {
  border-color: var(--vp-custom-block-warning-border);
  color: var(--vp-custom-block-warning-text);
  background-color: var(--vp-custom-block-warning-bg);
}

.custom-block.warning a,
.custom-block.warning code {
  color: var(--vp-c-warning-1);
}

.custom-block.warning a:hover,
.custom-block.warning a:hover > code {
  color: var(--vp-c-warning-2);
}

.custom-block.warning code {
  background-color: var(--vp-custom-block-warning-code-bg);
}

.custom-block.danger {
  border-color: var(--vp-custom-block-danger-border);
  color: var(--vp-custom-block-danger-text);
  background-color: var(--vp-custom-block-danger-bg);
}

.custom-block.danger a,
.custom-block.danger code {
  color: var(--vp-c-danger-1);
}

.custom-block.danger a:hover,
.custom-block.danger a:hover > code {
  color: var(--vp-c-danger-2);
}

.custom-block.danger code {
  background-color: var(--vp-custom-block-danger-code-bg);
}

.custom-block.caution {
  border-color: var(--vp-custom-block-caution-border);
  color: var(--vp-custom-block-caution-text);
  background-color: var(--vp-custom-block-caution-bg);
}

.custom-block.caution a,
.custom-block.caution code {
  color: var(--vp-c-caution-1);
}

.custom-block.caution a:hover,
.custom-block.caution a:hover > code {
  color: var(--vp-c-caution-2);
}

.custom-block.caution code {
  background-color: var(--vp-custom-block-caution-code-bg);
}

.custom-block.details {
  border-color: var(--vp-custom-block-details-border);
  color: var(--vp-custom-block-details-text);
  background-color: var(--vp-custom-block-details-bg);
}

.custom-block.details a {
  color: var(--vp-c-brand-1);
}

.custom-block.details a:hover,
.custom-block.details a:hover > code {
  color: var(--vp-c-brand-2);
}

.custom-block.details code {
  background-color: var(--vp-custom-block-details-code-bg);
}

.custom-block-title {
  font-weight: 600;
}

.custom-block p + p {
  margin: 8px 0;
}

.custom-block.details summary {
  margin: 0 0 8px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.custom-block.details summary + p {
  margin: 8px 0;
}

.custom-block a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.25s;
}

.custom-block a:hover {
  opacity: 0.75;
}

.custom-block code {
  font-size: var(--vp-custom-block-code-font-size);
}

.custom-block.custom-block th,
.custom-block.custom-block blockquote > p {
  font-size: var(--vp-custom-block-font-size);
  color: inherit;
}
.dark .shiki span {
  color: var(--shiki-dark, inherit);
  text-decoration: var(--shiki-dark-text-decoration, inherit);
  font-weight: var(--shiki-dark-font-weight, inherit);
}

html:not(.dark) .shiki span {
  color: var(--shiki-light, inherit);
  text-decoration: var(--shiki-light-text-decoration, inherit);
  font-weight: var(--shiki-light-font-weight, inherit);
}

.shiki span {
  unicode-bidi: isolate;
}
.vp-code-group {
  margin-top: 16px;
}

.vp-code-group .tabs {
  position: relative;
  display: flex;
  margin-right: -24px;
  margin-left: -24px;
  padding: 0 12px;
  background-color: var(--vp-code-tab-bg);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: inset 0 -1px var(--vp-code-tab-divider);
}

@media (min-width: 640px) {
  .vp-code-group .tabs {
    margin-right: 0;
    margin-left: 0;
    border-radius: 8px 8px 0 0;
  }
}

.vp-code-group .tabs input {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.vp-code-group .tabs label {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid transparent;
  padding: 0 12px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-code-tab-text-color);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s;
}

.vp-code-group .tabs label::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  z-index: 1;
  height: 2px;
  border-radius: 2px;
  content: '';
  background-color: transparent;
  transition: background-color 0.25s;
}

.vp-code-group label:hover {
  color: var(--vp-code-tab-hover-text-color);
}

.vp-code-group input:checked + label {
  color: var(--vp-code-tab-active-text-color);
}

.vp-code-group input:checked + label::after {
  background-color: var(--vp-code-tab-active-bar-color);
}

.vp-code-group div[class*='language-'],
.vp-block {
  display: none;
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.vp-code-group div[class*='language-'].active,
.vp-block.active {
  display: block;
}

.vp-block {
  padding: 20px 24px;
}
/**
 * Headings
 * -------------------------------------------------------------------------- */

.vp-doc h1,
.vp-doc h2,
.vp-doc h3,
.vp-doc h4,
.vp-doc h5,
.vp-doc h6 {
  position: relative;
  font-weight: 600;
  outline: none;
  scroll-margin-top: calc(
    var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 24px
  );
}

.vp-doc h1 {
  letter-spacing: -0.02em;
  line-height: 40px;
  font-size: 28px;
}

.vp-doc h2 {
  margin: 48px 0 16px;
  border-top: 1px solid var(--vp-c-divider);
  padding-top: 24px;
  letter-spacing: -0.02em;
  line-height: 32px;
  font-size: 24px;
}

.vp-doc h3 {
  margin: 32px 0 0;
  letter-spacing: -0.01em;
  line-height: 28px;
  font-size: 20px;
}

.vp-doc h4 {
  margin: 24px 0 0;
  letter-spacing: -0.01em;
  line-height: 24px;
  font-size: 18px;
}

.vp-doc .header-anchor {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -0.87em;
  font-weight: 500;
  user-select: none;
  opacity: 0;
  text-decoration: none;
  transition:
    color 0.25s,
    opacity 0.25s;
}

.vp-doc .header-anchor:before {
  content: var(--vp-header-anchor-symbol);
}

.vp-doc h1:hover .header-anchor,
.vp-doc h1 .header-anchor:focus,
.vp-doc h2:hover .header-anchor,
.vp-doc h2 .header-anchor:focus,
.vp-doc h3:hover .header-anchor,
.vp-doc h3 .header-anchor:focus,
.vp-doc h4:hover .header-anchor,
.vp-doc h4 .header-anchor:focus,
.vp-doc h5:hover .header-anchor,
.vp-doc h5 .header-anchor:focus,
.vp-doc h6:hover .header-anchor,
.vp-doc h6 .header-anchor:focus {
  opacity: 1;
}

@media (min-width: 768px) {
  .vp-doc h1 {
    letter-spacing: -0.02em;
    line-height: 40px;
    font-size: 32px;
  }
}

.vp-doc h2 .header-anchor {
  top: 24px;
}

/**
 * Paragraph and inline elements
 * -------------------------------------------------------------------------- */

.vp-doc p,
.vp-doc img,
.vp-doc summary {
  margin: 16px 0;
}

.vp-doc p {
  line-height: 28px;
}

.vp-doc blockquote {
  margin: 16px 0;
  border-left: 2px solid var(--vp-c-divider);
  padding-left: 16px;
  transition: border-color 0.5s;
  color: var(--vp-c-text-2);
}

.vp-doc blockquote > p {
  margin: 0;
  font-size: 16px;
  transition: color 0.5s;
}

.vp-doc a {
  font-weight: 500;
  color: var(--vp-c-brand-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:
    color 0.25s,
    opacity 0.25s;
}

.vp-doc a:hover {
  color: var(--vp-c-brand-2);
}

.vp-doc strong {
  font-weight: 600;
}

/**
 * Lists
 * -------------------------------------------------------------------------- */

.vp-doc ul,
.vp-doc ol {
  padding-left: 1.25rem;
  margin: 16px 0;
}

.vp-doc ul {
  list-style: disc;
}

.vp-doc ol {
  list-style: decimal;
}

.vp-doc li + li {
  margin-top: 8px;
}

.vp-doc li > ol,
.vp-doc li > ul {
  margin: 8px 0 0;
}

/**
 * Table
 * -------------------------------------------------------------------------- */

.vp-doc table {
  display: block;
  border-collapse: collapse;
  margin: 20px 0;
  overflow-x: auto;
}

.vp-doc tr {
  background-color: var(--vp-c-bg);
  border-top: 1px solid var(--vp-c-divider);
  transition: background-color 0.5s;
}

.vp-doc tr:nth-child(2n) {
  background-color: var(--vp-c-bg-soft);
}

.vp-doc th,
.vp-doc td {
  border: 1px solid var(--vp-c-divider);
  padding: 8px 16px;
}

.vp-doc th {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--vp-c-text-2);
  background-color: var(--vp-c-bg-soft);
}

.vp-doc td {
  font-size: 14px;
}

/**
 * Decorational elements
 * -------------------------------------------------------------------------- */

.vp-doc hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid var(--vp-c-divider);
}

/**
 * Custom Block
 * -------------------------------------------------------------------------- */

.vp-doc .custom-block {
  margin: 16px 0;
}

.vp-doc .custom-block p {
  margin: 8px 0;
  line-height: 24px;
}

.vp-doc .custom-block p:first-child {
  margin: 0;
}

.vp-doc .custom-block div[class*='language-'] {
  margin: 8px 0 !important;
  border-radius: 8px;
}

.vp-doc .custom-block div[class*='language-'] code {
  font-weight: 400;
  background-color: transparent;
}

.vp-doc .custom-block .vp-code-group,
.vp-doc .custom-block [class*='vp-code-block'] {
  margin-top: 8px;
}

.vp-doc .custom-block .vp-code-group .tabs {
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.vp-doc .custom-block .vp-code-group div[class*='language-'],
.vp-doc .custom-block [class*='vp-code-block'] div[class*='language-'] {
  margin-top: 0 !important;
}

/**
 * Code
 * -------------------------------------------------------------------------- */

/* inline code */
.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
  font-size: var(--vp-code-font-size);
  color: var(--vp-code-color);
}

.vp-doc :not(pre) > code {
  border-radius: 4px;
  padding: 3px 6px;
  background-color: var(--vp-code-bg);
  transition:
    color 0.25s,
    background-color 0.5s;
}

.vp-doc a > code {
  color: var(--vp-code-link-color);
}

.vp-doc a:hover > code {
  color: var(--vp-code-link-hover-color);
}

.vp-doc h1 > code,
.vp-doc h2 > code,
.vp-doc h3 > code,
.vp-doc h4 > code {
  font-size: 0.9em;
}

.vp-doc div[class*='language-'],
.vp-block {
  position: relative;
  margin: 16px -24px;
  background-color: var(--vp-code-block-bg);
  overflow-x: auto;
  transition: background-color 0.5s;
}

@media (min-width: 640px) {
  .vp-doc div[class*='language-'],
  .vp-block {
    border-radius: 8px;
    margin: 16px 0;
  }
}

@media (max-width: 639px) {
  .vp-doc li div[class*='language-'] {
    border-radius: 8px 0 0 8px;
  }
}

.vp-doc div[class*='language-'] + div[class*='language-'],
.vp-doc div[class$='-api'] + div[class*='language-'],
.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
  margin-top: -8px;
}

.vp-doc [class*='language-'] pre,
.vp-doc [class*='language-'] code {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

.vp-doc [class*='language-'] pre {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 20px 0;
  background: transparent;
  overflow-x: auto;
  /*rtl:ignore*/
  text-align: left;
}

.vp-doc [class*='language-'] code {
  display: block;
  padding: 0 24px;
  width: fit-content;
  min-width: 100%;
  line-height: var(--vp-code-line-height);
  font-size: var(--vp-code-font-size);
  color: var(--vp-code-block-color);
  transition: color 0.5s;
}

.vp-doc [class*='language-'] code .highlighted {
  background-color: var(--vp-code-line-highlight-color);
  transition: background-color 0.5s;
  margin: 0 -24px;
  padding: 0 24px;
  width: calc(100% + 2 * 24px);
  display: inline-block;
}

.vp-doc [class*='language-'] code .highlighted.error {
  background-color: var(--vp-code-line-error-color);
}

.vp-doc [class*='language-'] code .highlighted.warning {
  background-color: var(--vp-code-line-warning-color);
}

.vp-doc [class*='language-'] code .diff {
  transition: background-color 0.5s;
  margin: 0 -24px;
  padding: 0 24px;
  width: calc(100% + 2 * 24px);
  display: inline-block;
}

.vp-doc [class*='language-'] code .diff::before {
  position: absolute;
  left: 10px;
}

.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
  filter: blur(0.095rem);
  opacity: 0.4;
  transition:
    filter 0.35s,
    opacity 0.35s;
}

.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
  opacity: 0.7;
  transition:
    filter 0.35s,
    opacity 0.35s;
}

.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
  filter: blur(0);
  opacity: 1;
}

.vp-doc [class*='language-'] code .diff.remove {
  background-color: var(--vp-code-line-diff-remove-color);
  opacity: 0.7;
}

.vp-doc [class*='language-'] code .diff.remove::before {
  content: '-';
  color: var(--vp-code-line-diff-remove-symbol-color);
}

.vp-doc [class*='language-'] code .diff.add {
  background-color: var(--vp-code-line-diff-add-color);
}

.vp-doc [class*='language-'] code .diff.add::before {
  content: '+';
  color: var(--vp-code-line-diff-add-symbol-color);
}

.vp-doc div[class*='language-'].line-numbers-mode {
  /*rtl:ignore*/
  padding-left: 32px;
}

.vp-doc .line-numbers-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  /*rtl:ignore*/
  left: 0;
  z-index: 3;
  /*rtl:ignore*/
  border-right: 1px solid var(--vp-code-block-divider-color);
  padding-top: 20px;
  width: 32px;
  text-align: center;
  font-family: var(--vp-font-family-mono);
  line-height: var(--vp-code-line-height);
  font-size: var(--vp-code-font-size);
  color: var(--vp-code-line-number-color);
  transition:
    border-color 0.5s,
    color 0.5s;
}

.vp-doc [class*='language-'] > button.copy {
  /*rtl:ignore*/
  direction: ltr;
  position: absolute;
  top: 12px;
  /*rtl:ignore*/
  right: 12px;
  z-index: 3;
  border: 1px solid var(--vp-code-copy-code-border-color);
  border-radius: 4px;
  width: 40px;
  height: 40px;
  background-color: var(--vp-code-copy-code-bg);
  opacity: 0;
  cursor: pointer;
  background-image: var(--vp-icon-copy);
  background-position: 50%;
  background-size: 20px;
  background-repeat: no-repeat;
  transition:
    border-color 0.25s,
    background-color 0.25s,
    opacity 0.25s;
}

.vp-doc [class*='language-']:hover > button.copy,
.vp-doc [class*='language-'] > button.copy:focus {
  opacity: 1;
}

.vp-doc [class*='language-'] > button.copy:hover,
.vp-doc [class*='language-'] > button.copy.copied {
  border-color: var(--vp-code-copy-code-hover-border-color);
  background-color: var(--vp-code-copy-code-hover-bg);
}

.vp-doc [class*='language-'] > button.copy.copied,
.vp-doc [class*='language-'] > button.copy:hover.copied {
  /*rtl:ignore*/
  border-radius: 0 4px 4px 0;
  background-color: var(--vp-code-copy-code-hover-bg);
  background-image: var(--vp-icon-copied);
}

.vp-doc [class*='language-'] > button.copy.copied::before,
.vp-doc [class*='language-'] > button.copy:hover.copied::before {
  position: relative;
  top: -1px;
  /*rtl:ignore*/
  transform: translateX(calc(-100% - 1px));
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--vp-code-copy-code-hover-border-color);
  /*rtl:ignore*/
  border-right: 0;
  /*rtl:ignore*/
  border-radius: 4px 0 0 4px;
  padding: 0 10px;
  width: fit-content;
  height: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-code-copy-code-active-text);
  background-color: var(--vp-code-copy-code-hover-bg);
  white-space: nowrap;
  content: var(--vp-code-copy-copied-text-content);
}

.vp-doc [class*='language-'] > span.lang {
  position: absolute;
  top: 2px;
  /*rtl:ignore*/
  right: 8px;
  z-index: 2;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  color: var(--vp-code-lang-color);
  transition:
    color 0.4s,
    opacity 0.4s;
}

.vp-doc [class*='language-']:hover > button.copy + span.lang,
.vp-doc [class*='language-'] > button.copy:focus + span.lang {
  opacity: 0;
}

/**
 * Component: Team
 * -------------------------------------------------------------------------- */

.vp-doc .VPTeamMembers {
  margin-top: 24px;
}

.vp-doc .VPTeamMembers.small.count-1 .container {
  margin: 0 !important;
  max-width: calc((100% - 24px) / 2) !important;
}

.vp-doc .VPTeamMembers.small.count-2 .container,
.vp-doc .VPTeamMembers.small.count-3 .container {
  max-width: 100% !important;
}

.vp-doc .VPTeamMembers.medium.count-1 .container {
  margin: 0 !important;
  max-width: calc((100% - 24px) / 2) !important;
}

/**
 * External links
 * -------------------------------------------------------------------------- */

/* prettier-ignore */
:is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
  display: inline;
  margin-left: 4px;
  padding-left: 11px;
  background: currentColor;
  color: var(--vp-c-text-3);
  flex-shrink: 0;
  --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 11px 11px;
  mask-size: 11px 11px;
  /*rtl:raw:transform: scaleX(-1);*/
}

.vp-external-link-icon::after {
  content: '\2060';
}

/* prettier-ignore */
.external-link-icon-enabled :is(.vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
  content: '\2060';
  color: currentColor;
}
/**
 * VPSponsors styles are defined as global because a new class gets
 * allied in onMounted` hook and we can't use scoped style.
 */
.vp-sponsor {
  border-radius: 16px;
  overflow: hidden;
}

.vp-sponsor.aside {
  border-radius: 12px;
}

.vp-sponsor-section + .vp-sponsor-section {
  margin-top: 4px;
}

.vp-sponsor-tier {
  margin: 0 0 4px !important;
  text-align: center;
  letter-spacing: 1px !important;
  line-height: 24px;
  width: 100%;
  font-weight: 600;
  color: var(--vp-c-text-2);
  background-color: var(--vp-c-bg-soft);
}

.vp-sponsor.normal .vp-sponsor-tier {
  padding: 13px 0 11px;
  font-size: 14px;
}

.vp-sponsor.aside .vp-sponsor-tier {
  padding: 9px 0 7px;
  font-size: 12px;
}

.vp-sponsor-grid + .vp-sponsor-tier {
  margin-top: 4px;
}

.vp-sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vp-sponsor-grid.xmini .vp-sponsor-grid-link {
  height: 64px;
}
.vp-sponsor-grid.xmini .vp-sponsor-grid-image {
  max-width: 64px;
  max-height: 22px;
}

.vp-sponsor-grid.mini .vp-sponsor-grid-link {
  height: 72px;
}
.vp-sponsor-grid.mini .vp-sponsor-grid-image {
  max-width: 96px;
  max-height: 24px;
}

.vp-sponsor-grid.small .vp-sponsor-grid-link {
  height: 96px;
}
.vp-sponsor-grid.small .vp-sponsor-grid-image {
  max-width: 96px;
  max-height: 24px;
}

.vp-sponsor-grid.medium .vp-sponsor-grid-link {
  height: 112px;
}
.vp-sponsor-grid.medium .vp-sponsor-grid-image {
  max-width: 120px;
  max-height: 36px;
}

.vp-sponsor-grid.big .vp-sponsor-grid-link {
  height: 184px;
}
.vp-sponsor-grid.big .vp-sponsor-grid-image {
  max-width: 192px;
  max-height: 56px;
}

.vp-sponsor-grid[data-vp-grid='2'] .vp-sponsor-grid-item {
  width: calc((100% - 4px) / 2);
}

.vp-sponsor-grid[data-vp-grid='3'] .vp-sponsor-grid-item {
  width: calc((100% - 4px * 2) / 3);
}

.vp-sponsor-grid[data-vp-grid='4'] .vp-sponsor-grid-item {
  width: calc((100% - 4px * 3) / 4);
}

.vp-sponsor-grid[data-vp-grid='5'] .vp-sponsor-grid-item {
  width: calc((100% - 4px * 4) / 5);
}

.vp-sponsor-grid[data-vp-grid='6'] .vp-sponsor-grid-item {
  width: calc((100% - 4px * 5) / 6);
}

.vp-sponsor-grid-item {
  flex-shrink: 0;
  width: 100%;
  background-color: var(--vp-c-bg-soft);
  transition: background-color 0.25s;
}

.vp-sponsor-grid-item:hover {
  background-color: var(--vp-c-default-soft);
}

.vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
  filter: grayscale(0) invert(0);
}

.vp-sponsor-grid-item.empty:hover {
  background-color: var(--vp-c-bg-soft);
}

.dark .vp-sponsor-grid-item:hover {
  background-color: var(--vp-c-white);
}

.dark .vp-sponsor-grid-item.empty:hover {
  background-color: var(--vp-c-bg-soft);
}

.vp-sponsor-grid-link {
  display: flex;
}

.vp-sponsor-grid-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.vp-sponsor-grid-image {
  max-width: 100%;
  filter: grayscale(1);
  transition: filter 0.25s;
}

.dark .vp-sponsor-grid-image {
  filter: grayscale(1) invert(1);
}

.VPBadge {
  display: inline-block;
  margin-left: 2px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 10px;
  line-height: 22px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateY(-2px);
}
.VPBadge.small {
  padding: 0 6px;
  line-height: 18px;
  font-size: 10px;
  transform: translateY(-8px);
}
.VPDocFooter .VPBadge {
  display: none;
}
.vp-doc h1 > .VPBadge,
.vp-doc h2 > .VPBadge {
  margin: 0 0 0 2px;
  vertical-align: middle;
}
.vp-doc h2 > .VPBadge {
  padding: 0 8px;
}
.vp-doc h3 > .VPBadge {
  vertical-align: middle;
}
.vp-doc h4 > .VPBadge,
.vp-doc h5 > .VPBadge,
.vp-doc h6 > .VPBadge {
  vertical-align: middle;
  line-height: 18px;
}
.VPBadge.info {
  border-color: var(--vp-badge-info-border);
  color: var(--vp-badge-info-text);
  background-color: var(--vp-badge-info-bg);
}
.VPBadge.tip {
  border-color: var(--vp-badge-tip-border);
  color: var(--vp-badge-tip-text);
  background-color: var(--vp-badge-tip-bg);
}
.VPBadge.warning {
  border-color: var(--vp-badge-warning-border);
  color: var(--vp-badge-warning-text);
  background-color: var(--vp-badge-warning-bg);
}
.VPBadge.danger {
  border-color: var(--vp-badge-danger-border);
  color: var(--vp-badge-danger-text);
  background-color: var(--vp-badge-danger-bg);
}

.VPBackdrop[data-v-c79a1216] {
  position: fixed;
  top: 0;
  /*rtl:ignore*/
  right: 0;
  bottom: 0;
  /*rtl:ignore*/
  left: 0;
  z-index: var(--vp-z-index-backdrop);
  background: var(--vp-backdrop-bg-color);
  transition: opacity 0.5s;
}
.VPBackdrop.fade-enter-from[data-v-c79a1216],
.VPBackdrop.fade-leave-to[data-v-c79a1216] {
  opacity: 0;
}
.VPBackdrop.fade-leave-active[data-v-c79a1216] {
  transition-duration: .25s;
}
@media (min-width: 1280px) {
.VPBackdrop[data-v-c79a1216] {
    display: none;
}
}

.NotFound[data-v-829df670] {
  padding: 64px 24px 96px;
  text-align: center;
}
@media (min-width: 768px) {
.NotFound[data-v-829df670] {
    padding: 96px 32px 168px;
}
}
.code[data-v-829df670] {
  line-height: 64px;
  font-size: 64px;
  font-weight: 600;
}
.title[data-v-829df670] {
  padding-top: 12px;
  letter-spacing: 2px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 700;
}
.divider[data-v-829df670] {
  margin: 24px auto 18px;
  width: 64px;
  height: 1px;
  background-color: var(--vp-c-divider);
}
.quote[data-v-829df670] {
  margin: 0 auto;
  max-width: 256px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
.action[data-v-829df670] {
  padding-top: 20px;
}
.link[data-v-829df670] {
  display: inline-block;
  border: 1px solid var(--vp-c-brand-1);
  border-radius: 16px;
  padding: 3px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
  transition:
    border-color 0.25s,
    color 0.25s;
}
.link[data-v-829df670]:hover {
  border-color: var(--vp-c-brand-2);
  color: var(--vp-c-brand-2);
}

.root[data-v-1ce71065] {
  position: relative;
  z-index: 1;
}
.nested[data-v-1ce71065] {
  padding-right: 16px;
  padding-left: 16px;
}
.outline-link[data-v-1ce71065] {
  display: block;
  line-height: 32px;
  font-size: 14px;
  font-weight: 400;
  color: var(--vp-c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.5s;
}
.outline-link[data-v-1ce71065]:hover,
.outline-link.active[data-v-1ce71065] {
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.outline-link.nested[data-v-1ce71065] {
  padding-left: 13px;
}

.VPDocAsideOutline[data-v-208c587c] {
  display: none;
}
.VPDocAsideOutline.has-outline[data-v-208c587c] {
  display: block;
}
.content[data-v-208c587c] {
  position: relative;
  border-left: 1px solid var(--vp-c-divider);
  padding-left: 16px;
  font-size: 13px;
  font-weight: 500;
}
.outline-marker[data-v-208c587c] {
  position: absolute;
  top: 32px;
  left: -1px;
  z-index: 0;
  opacity: 0;
  width: 2px;
  border-radius: 2px;
  height: 18px;
  background-color: var(--vp-c-brand-1);
  transition:
    top 0.25s cubic-bezier(0, 1, 0.5, 1),
    background-color 0.5s,
    opacity 0.25s;
}
.outline-title[data-v-208c587c] {
  line-height: 32px;
  font-size: 14px;
  font-weight: 600;
}

.VPDocAside[data-v-62132652] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.spacer[data-v-62132652] {
  flex-grow: 1;
}
.VPDocAside[data-v-62132652] .spacer + .VPDocAsideSponsors,
.VPDocAside[data-v-62132652] .spacer + .VPDocAsideCarbonAds {
  margin-top: 24px;
}
.VPDocAside[data-v-62132652] .VPDocAsideSponsors + .VPDocAsideCarbonAds {
  margin-top: 16px;
}

.VPLastUpdated[data-v-3c637f39] {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
@media (min-width: 640px) {
.VPLastUpdated[data-v-3c637f39] {
    line-height: 32px;
    font-size: 14px;
    font-weight: 500;
}
}

.VPDocFooter[data-v-e29034c6] {
  margin-top: 64px;
}
.edit-info[data-v-e29034c6] {
  padding-bottom: 18px;
}
@media (min-width: 640px) {
.edit-info[data-v-e29034c6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
}
}
.edit-link-button[data-v-e29034c6] {
  display: flex;
  align-items: center;
  border: 0;
  line-height: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
  transition: color 0.25s;
}
.edit-link-button[data-v-e29034c6]:hover {
  color: var(--vp-c-brand-2);
}
.edit-link-icon[data-v-e29034c6] {
  margin-right: 8px;
}
.prev-next[data-v-e29034c6] {
  border-top: 1px solid var(--vp-c-divider);
  padding-top: 24px;
  display: grid;
  grid-row-gap: 8px;
}
@media (min-width: 640px) {
.prev-next[data-v-e29034c6] {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 16px;
}
}
.pager-link[data-v-e29034c6] {
  display: block;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  padding: 11px 16px 13px;
  width: 100%;
  height: 100%;
  transition: border-color 0.25s;
}
.pager-link[data-v-e29034c6]:hover {
  border-color: var(--vp-c-brand-1);
}
.pager-link.next[data-v-e29034c6] {
  margin-left: auto;
  text-align: right;
}
.desc[data-v-e29034c6] {
  display: block;
  line-height: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
.title[data-v-e29034c6] {
  display: block;
  line-height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
  transition: color 0.25s;
}

.VPDoc[data-v-7011f0d8] {
  padding: 32px 24px 96px;
  width: 100%;
}
@media (min-width: 768px) {
.VPDoc[data-v-7011f0d8] {
    padding: 48px 32px 128px;
}
}
@media (min-width: 960px) {
.VPDoc[data-v-7011f0d8] {
    padding: 48px 32px 0;
}
.VPDoc:not(.has-sidebar) .container[data-v-7011f0d8] {
    display: flex;
    justify-content: center;
    max-width: 992px;
}
.VPDoc:not(.has-sidebar) .content[data-v-7011f0d8] {
    max-width: 752px;
}
}
@media (min-width: 1280px) {
.VPDoc .container[data-v-7011f0d8] {
    display: flex;
    justify-content: center;
}
.VPDoc .aside[data-v-7011f0d8] {
    display: block;
}
}
@media (min-width: 1440px) {
.VPDoc:not(.has-sidebar) .content[data-v-7011f0d8] {
    max-width: 784px;
}
.VPDoc:not(.has-sidebar) .container[data-v-7011f0d8] {
    max-width: 1104px;
}
}
.container[data-v-7011f0d8] {
  margin: 0 auto;
  width: 100%;
}
.aside[data-v-7011f0d8] {
  position: relative;
  display: none;
  order: 2;
  flex-grow: 1;
  padding-left: 32px;
  width: 100%;
  max-width: 256px;
}
.left-aside[data-v-7011f0d8] {
  order: 1;
  padding-left: unset;
  padding-right: 32px;
}
.aside-container[data-v-7011f0d8] {
  position: fixed;
  top: 0;
  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
  width: 224px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.aside-container[data-v-7011f0d8]::-webkit-scrollbar {
  display: none;
}
.aside-curtain[data-v-7011f0d8] {
  position: fixed;
  bottom: 0;
  z-index: 10;
  width: 224px;
  height: 32px;
  background: linear-gradient(transparent, var(--vp-c-bg) 70%);
  pointer-events: none;
}
.aside-content[data-v-7011f0d8] {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
  padding-bottom: 32px;
}
.content[data-v-7011f0d8] {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 960px) {
.content[data-v-7011f0d8] {
    padding: 0 32px 128px;
}
}
@media (min-width: 1280px) {
.content[data-v-7011f0d8] {
    order: 1;
    margin: 0;
    min-width: 640px;
}
}
.content-container[data-v-7011f0d8] {
  margin: 0 auto;
}
.VPDoc.has-aside .content-container[data-v-7011f0d8] {
  max-width: 688px;
}

.container[data-v-8e2d4988] {
  margin: auto;
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
}
@media (min-width: 640px) {
.container[data-v-8e2d4988] {
    padding: 0 48px;
}
}
@media (min-width: 960px) {
.container[data-v-8e2d4988] {
    width: 100%;
    padding: 0 64px;
}
}
.vp-doc[data-v-8e2d4988] .VPHomeSponsors,
.vp-doc[data-v-8e2d4988] .VPTeamPage {
  margin-left: var(--vp-offset, calc(50% - 50vw));
  margin-right: var(--vp-offset, calc(50% - 50vw));
}
.vp-doc[data-v-8e2d4988] .VPHomeSponsors h2 {
  border-top: none;
  letter-spacing: normal;
}
.vp-doc[data-v-8e2d4988] .VPHomeSponsors a,
.vp-doc[data-v-8e2d4988] .VPTeamPage a {
  text-decoration: none;
}

html:not(.dark) .VPImage.dark[data-v-8426fc1a] {
  display: none;
}
.dark .VPImage.light[data-v-8426fc1a] {
  display: none;
}

.VPFeature[data-v-e5511d04] {
  display: block;
  border: 1px solid var(--vp-c-bg-soft);
  border-radius: 12px;
  height: 100%;
  background-color: var(--vp-c-bg-soft);
  transition: border-color 0.25s, background-color 0.25s;
}
.VPFeature.link[data-v-e5511d04]:hover {
  border-color: var(--vp-c-brand-1);
}
.box[data-v-e5511d04] {
  display: flex;
  flex-direction: column;
  padding: 24px;
  height: 100%;
}
.box[data-v-e5511d04] >  .VPImage {
  margin-bottom: 20px;
}
.icon[data-v-e5511d04] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 6px;
  background-color: var(--vp-c-default-soft);
  width: 48px;
  height: 48px;
  font-size: 24px;
  transition: background-color 0.25s;
}
.title[data-v-e5511d04] {
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
}
.details[data-v-e5511d04] {
  flex-grow: 1;
  padding-top: 8px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
ul.details[data-v-e5511d04] {
  list-style-type: disc;
  padding-left: 14px;
}
.link-text[data-v-e5511d04] {
  padding-top: 8px;
}
.link-text-value[data-v-e5511d04] {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}
.link-text-icon[data-v-e5511d04] {
  margin-left: 6px;
}

.VPFeatures[data-v-a6181336] {
  position: relative;
  padding: 0 24px;
}
@media (min-width: 640px) {
.VPFeatures[data-v-a6181336] {
    padding: 0 48px;
}
}
@media (min-width: 960px) {
.VPFeatures[data-v-a6181336] {
    padding: 0 64px;
}
}
.container[data-v-a6181336] {
  margin: 0 auto;
  max-width: 1152px;
}
.items[data-v-a6181336] {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}
.item[data-v-a6181336] {
  padding: 8px;
  width: 100%;
}
@media (min-width: 640px) {
.item.grid-2[data-v-a6181336],
  .item.grid-4[data-v-a6181336],
  .item.grid-6[data-v-a6181336] {
    width: calc(100% / 2);
}
}
@media (min-width: 768px) {
.item.grid-2[data-v-a6181336],
  .item.grid-4[data-v-a6181336] {
    width: calc(100% / 2);
}
.item.grid-3[data-v-a6181336],
  .item.grid-6[data-v-a6181336] {
    width: calc(100% / 3);
}
}
@media (min-width: 960px) {
.item.grid-4[data-v-a6181336] {
    width: calc(100% / 4);
}
}

.VPButton[data-v-b8c35b0d] {
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.VPButton[data-v-b8c35b0d]:active {
  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
}
.VPButton.medium[data-v-b8c35b0d] {
  border-radius: 20px;
  padding: 0 20px;
  line-height: 38px;
  font-size: 14px;
}
.VPButton.big[data-v-b8c35b0d] {
  border-radius: 24px;
  padding: 0 24px;
  line-height: 46px;
  font-size: 16px;
}
.VPButton.brand[data-v-b8c35b0d] {
  border-color: var(--vp-button-brand-border);
  color: var(--vp-button-brand-text);
  background-color: var(--vp-button-brand-bg);
}
.VPButton.brand[data-v-b8c35b0d]:hover {
  border-color: var(--vp-button-brand-hover-border);
  color: var(--vp-button-brand-hover-text);
  background-color: var(--vp-button-brand-hover-bg);
}
.VPButton.brand[data-v-b8c35b0d]:active {
  border-color: var(--vp-button-brand-active-border);
  color: var(--vp-button-brand-active-text);
  background-color: var(--vp-button-brand-active-bg);
}
.VPButton.alt[data-v-b8c35b0d] {
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}
.VPButton.alt[data-v-b8c35b0d]:hover {
  border-color: var(--vp-button-alt-hover-border);
  color: var(--vp-button-alt-hover-text);
  background-color: var(--vp-button-alt-hover-bg);
}
.VPButton.alt[data-v-b8c35b0d]:active {
  border-color: var(--vp-button-alt-active-border);
  color: var(--vp-button-alt-active-text);
  background-color: var(--vp-button-alt-active-bg);
}
.VPButton.sponsor[data-v-b8c35b0d] {
  border-color: var(--vp-button-sponsor-border);
  color: var(--vp-button-sponsor-text);
  background-color: var(--vp-button-sponsor-bg);
}
.VPButton.sponsor[data-v-b8c35b0d]:hover {
  border-color: var(--vp-button-sponsor-hover-border);
  color: var(--vp-button-sponsor-hover-text);
  background-color: var(--vp-button-sponsor-hover-bg);
}
.VPButton.sponsor[data-v-b8c35b0d]:active {
  border-color: var(--vp-button-sponsor-active-border);
  color: var(--vp-button-sponsor-active-text);
  background-color: var(--vp-button-sponsor-active-bg);
}

.VPHero[data-v-e62e4946] {
  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
}
@media (min-width: 640px) {
.VPHero[data-v-e62e4946] {
    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
}
}
@media (min-width: 960px) {
.VPHero[data-v-e62e4946] {
    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
}
}
.container[data-v-e62e4946] {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1152px;
}
@media (min-width: 960px) {
.container[data-v-e62e4946] {
    flex-direction: row;
}
}
.main[data-v-e62e4946] {
  position: relative;
  z-index: 10;
  order: 2;
  flex-grow: 1;
  flex-shrink: 0;
}
.VPHero.has-image .container[data-v-e62e4946] {
  text-align: center;
}
@media (min-width: 960px) {
.VPHero.has-image .container[data-v-e62e4946] {
    text-align: left;
}
}
@media (min-width: 960px) {
.main[data-v-e62e4946] {
    order: 1;
    width: calc((100% / 3) * 2);
}
.VPHero.has-image .main[data-v-e62e4946] {
    max-width: 592px;
}
}
.heading[data-v-e62e4946] {
  display: flex;
  flex-direction: column;
}
.name,
.text {
&[data-v-e62e4946] {
  width: fit-content;
  max-width: 392px;
  letter-spacing: -0.4px;
  line-height: 40px;
  font-size: 32px;
  font-weight: 700;
  white-space: pre-wrap;
  }
&[data-v-e62e4946]:lang(ja) {
    font-feature-settings: 'palt';
    word-break: auto-phrase;
}
}
.VPHero.has-image .name[data-v-e62e4946],
.VPHero.has-image .text[data-v-e62e4946] {
  margin: 0 auto;
}
.name[data-v-e62e4946] {
  color: var(--vp-home-hero-name-color);
}
.clip[data-v-e62e4946] {
  background: var(--vp-home-hero-name-background);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--vp-home-hero-name-color);
}
@media (min-width: 640px) {
.name[data-v-e62e4946],
  .text[data-v-e62e4946] {
    max-width: 576px;
    line-height: 56px;
    font-size: 48px;
}
}
@media (min-width: 960px) {
.name[data-v-e62e4946],
  .text[data-v-e62e4946] {
    line-height: 64px;
    font-size: 56px;
}
.VPHero.has-image .name[data-v-e62e4946],
  .VPHero.has-image .text[data-v-e62e4946] {
    margin: 0;
}
}
.tagline[data-v-e62e4946] {
  padding-top: 8px;
  max-width: 392px;
  line-height: 28px;
  font-size: 18px;
  font-weight: 500;
  white-space: pre-wrap;
  color: var(--vp-c-text-2);
}
.VPHero.has-image .tagline[data-v-e62e4946] {
  margin: 0 auto;
}
@media (min-width: 640px) {
.tagline[data-v-e62e4946] {
    padding-top: 12px;
    max-width: 576px;
    line-height: 32px;
    font-size: 20px;
}
}
@media (min-width: 960px) {
.tagline[data-v-e62e4946] {
    line-height: 36px;
    font-size: 24px;
}
.VPHero.has-image .tagline[data-v-e62e4946] {
    margin: 0;
}
}
.actions[data-v-e62e4946] {
  display: flex;
  flex-wrap: wrap;
  margin: -6px;
  padding-top: 24px;
}
.VPHero.has-image .actions[data-v-e62e4946] {
  justify-content: center;
}
@media (min-width: 640px) {
.actions[data-v-e62e4946] {
    padding-top: 32px;
}
}
@media (min-width: 960px) {
.VPHero.has-image .actions[data-v-e62e4946] {
    justify-content: flex-start;
}
}
.action[data-v-e62e4946] {
  flex-shrink: 0;
  padding: 6px;
}
.image[data-v-e62e4946] {
  order: 1;
  margin: -76px -24px -48px;
}
@media (min-width: 640px) {
.image[data-v-e62e4946] {
    margin: -108px -24px -48px;
}
}
@media (min-width: 960px) {
.image[data-v-e62e4946] {
    flex-grow: 1;
    order: 2;
    margin: 0;
    min-height: 100%;
}
}
.image-container[data-v-e62e4946] {
  position: relative;
  margin: 0 auto;
  width: 320px;
  height: 320px;
}
@media (min-width: 640px) {
.image-container[data-v-e62e4946] {
    width: 392px;
    height: 392px;
}
}
@media (min-width: 960px) {
.image-container[data-v-e62e4946] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /*rtl:ignore*/
    transform: translate(-32px, -32px);
}
}
.image-bg[data-v-e62e4946] {
  position: absolute;
  top: 50%;
  /*rtl:ignore*/
  left: 50%;
  border-radius: 50%;
  width: 192px;
  height: 192px;
  background-image: var(--vp-home-hero-image-background-image);
  filter: var(--vp-home-hero-image-filter);
  /*rtl:ignore*/
  transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
.image-bg[data-v-e62e4946] {
    width: 256px;
    height: 256px;
}
}
@media (min-width: 960px) {
.image-bg[data-v-e62e4946] {
    width: 320px;
    height: 320px;
}
}
[data-v-e62e4946] .image-src {
  position: absolute;
  top: 50%;
  /*rtl:ignore*/
  left: 50%;
  max-width: 192px;
  max-height: 192px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*rtl:ignore*/
  transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
[data-v-e62e4946] .image-src {
    max-width: 256px;
    max-height: 256px;
}
}
@media (min-width: 960px) {
[data-v-e62e4946] .image-src {
    max-width: 320px;
    max-height: 320px;
}
}

.VPHome[data-v-2862d62e] {
  margin-bottom: 96px;
}
@media (min-width: 768px) {
.VPHome[data-v-2862d62e] {
    margin-bottom: 128px;
}
}

.VPContent[data-v-7948e71f] {
  flex-grow: 1;
  flex-shrink: 0;
  margin: var(--vp-layout-top-height, 0px) auto 0;
  width: 100%;
}
.VPContent.is-home[data-v-7948e71f] {
  width: 100%;
  max-width: 100%;
}
.VPContent.has-sidebar[data-v-7948e71f] {
  margin: 0;
}
@media (min-width: 960px) {
.VPContent[data-v-7948e71f] {
    padding-top: var(--vp-nav-height);
}
.VPContent.has-sidebar[data-v-7948e71f] {
    margin: var(--vp-layout-top-height, 0px) 0 0;
    padding-left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.VPContent.has-sidebar[data-v-7948e71f] {
    padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}

.VPFooter[data-v-c3855bb3] {
  position: relative;
  z-index: var(--vp-z-index-footer);
  border-top: 1px solid var(--vp-c-gutter);
  padding: 32px 24px;
  background-color: var(--vp-c-bg);
}
.VPFooter.has-sidebar[data-v-c3855bb3] {
  display: none;
}
.VPFooter[data-v-c3855bb3] a {
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition: color 0.25s;
}
.VPFooter[data-v-c3855bb3] a:hover {
  color: var(--vp-c-text-1);
}
@media (min-width: 768px) {
.VPFooter[data-v-c3855bb3] {
    padding: 32px;
}
}
.container[data-v-c3855bb3] {
  margin: 0 auto;
  max-width: var(--vp-layout-max-width);
  text-align: center;
}
.message[data-v-c3855bb3],
.copyright[data-v-c3855bb3] {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}

.VPLocalNavOutlineDropdown button[data-v-0bf0e06f] {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
  position: relative;
}
.VPLocalNavOutlineDropdown button[data-v-0bf0e06f]:hover {
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.VPLocalNavOutlineDropdown button.open[data-v-0bf0e06f] {
  color: var(--vp-c-text-1);
}
.icon[data-v-0bf0e06f] {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  font-size: 14px;
  transform: rotate(0) /*rtl:rotate(180deg)*/;
  transition: transform 0.25s;
}
@media (min-width: 960px) {
.VPLocalNavOutlineDropdown button[data-v-0bf0e06f] {
    font-size: 14px;
}
.icon[data-v-0bf0e06f] {
    font-size: 16px;
}
}
.open > .icon[data-v-0bf0e06f] {
  /*rtl:ignore*/
  transform: rotate(90deg);
}
.items[data-v-0bf0e06f] {
  position: absolute;
  top: 40px;
  right: 16px;
  left: 16px;
  display: grid;
  gap: 1px;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  background-color: var(--vp-c-gutter);
  max-height: calc(var(--vp-vh, 100vh) - 86px);
  overflow: hidden auto;
  box-shadow: var(--vp-shadow-3);
}
@media (min-width: 960px) {
.items[data-v-0bf0e06f] {
    right: auto;
    left: calc(var(--vp-sidebar-width) + 32px);
    width: 320px;
}
}
.header[data-v-0bf0e06f] {
  background-color: var(--vp-c-bg-soft);
}
.top-link[data-v-0bf0e06f] {
  display: block;
  padding: 0 16px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}
.outline[data-v-0bf0e06f] {
  padding: 8px 0;
  background-color: var(--vp-c-bg-soft);
}
.flyout-enter-active[data-v-0bf0e06f] {
  transition: all 0.2s ease-out;
}
.flyout-leave-active[data-v-0bf0e06f] {
  transition: all 0.15s ease-in;
}
.flyout-enter-from[data-v-0bf0e06f],
.flyout-leave-to[data-v-0bf0e06f] {
  opacity: 0;
  transform: translateY(-16px);
}

.VPLocalNav[data-v-db738f89] {
  position: sticky;
  top: 0;
  /*rtl:ignore*/
  left: 0;
  z-index: var(--vp-z-index-local-nav);
  border-bottom: 1px solid var(--vp-c-gutter);
  padding-top: var(--vp-layout-top-height, 0px);
  width: 100%;
  background-color: var(--vp-local-nav-bg-color);
}
.VPLocalNav.fixed[data-v-db738f89] {
  position: fixed;
}
@media (min-width: 960px) {
.VPLocalNav[data-v-db738f89] {
    top: var(--vp-nav-height);
}
.VPLocalNav.has-sidebar[data-v-db738f89] {
    padding-left: var(--vp-sidebar-width);
}
.VPLocalNav.empty[data-v-db738f89] {
    display: none;
}
}
@media (min-width: 1280px) {
.VPLocalNav[data-v-db738f89] {
    display: none;
}
}
.container[data-v-db738f89] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu[data-v-db738f89] {
  display: flex;
  align-items: center;
  line-height: 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
}
.menu[data-v-db738f89]:hover {
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
@media (min-width: 960px) {
.menu[data-v-db738f89] {
    display: none;
}
}
.menu-icon[data-v-db738f89] {
  margin-right: 8px;
  font-size: 14px;
}
.menu[data-v-db738f89],[data-v-db738f89] .VPLocalNavOutlineDropdown > button {
  padding: 12px 24px 11px;
}
@media (min-width: 768px) {
.menu[data-v-db738f89],[data-v-db738f89] .VPLocalNavOutlineDropdown > button {
    padding: 12px 32px 11px;
}
}

.VPSwitch[data-v-1d5665e3] {
  position: relative;
  border-radius: 11px;
  display: block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--vp-input-border-color);
  background-color: var(--vp-input-switch-bg-color);
  transition: border-color 0.25s !important;
}
.VPSwitch[data-v-1d5665e3]:hover {
  border-color: var(--vp-c-brand-1);
}
.check[data-v-1d5665e3] {
  position: absolute;
  top: 1px;
  /*rtl:ignore*/
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--vp-c-neutral-inverse);
  box-shadow: var(--vp-shadow-1);
  transition: transform 0.25s !important;
}
.icon[data-v-1d5665e3] {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
}
.icon[data-v-1d5665e3] [class^='vpi-'] {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  color: var(--vp-c-text-2);
}
.dark .icon[data-v-1d5665e3] [class^='vpi-'] {
  color: var(--vp-c-text-1);
  transition: opacity 0.25s !important;
}

.sun[data-v-5337faa4] {
  opacity: 1;
}
.moon[data-v-5337faa4] {
  opacity: 0;
}
.dark .sun[data-v-5337faa4] {
  opacity: 0;
}
.dark .moon[data-v-5337faa4] {
  opacity: 1;
}
.dark .VPSwitchAppearance[data-v-5337faa4] .check {
  /*rtl:ignore*/
  transform: translateX(18px);
}

.VPNavBarAppearance[data-v-6c893767] {
  display: none;
}
@media (min-width: 1280px) {
.VPNavBarAppearance[data-v-6c893767] {
    display: flex;
    align-items: center;
}
}

.VPMenuGroup + .VPMenuLink[data-v-fff73daa] {
  margin: 12px -12px 0;
  border-top: 1px solid var(--vp-c-divider);
  padding: 12px 12px 0;
}
.link[data-v-fff73daa] {
  display: block;
  border-radius: 6px;
  padding: 0 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  text-align: left;
  white-space: nowrap;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.link[data-v-fff73daa]:hover {
  color: var(--vp-c-brand-1);
  background-color: var(--vp-c-default-soft);
}
.link.active[data-v-fff73daa] {
  color: var(--vp-c-brand-1);
}

.VPMenuGroup[data-v-1963e1bb] {
  margin: 12px -12px 0;
  border-top: 1px solid var(--vp-c-divider);
  padding: 12px 12px 0;
}
.VPMenuGroup[data-v-1963e1bb]:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.VPMenuGroup + .VPMenuGroup[data-v-1963e1bb] {
  margin-top: 12px;
  border-top: 1px solid var(--vp-c-divider);
}
.title[data-v-1963e1bb] {
  padding: 0 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vp-c-text-2);
  white-space: nowrap;
  transition: color 0.25s;
}

.VPMenu[data-v-25a6cce8] {
  border-radius: 12px;
  padding: 12px;
  min-width: 128px;
  border: 1px solid var(--vp-c-divider);
  background-color: var(--vp-c-bg-elv);
  box-shadow: var(--vp-shadow-3);
  transition: background-color 0.5s;
  max-height: calc(100vh - var(--vp-nav-height));
  overflow-y: auto;
}
.VPMenu[data-v-25a6cce8] .group {
  margin: 0 -12px;
  padding: 0 12px 12px;
}
.VPMenu[data-v-25a6cce8] .group + .group {
  border-top: 1px solid var(--vp-c-divider);
  padding: 11px 12px 12px;
}
.VPMenu[data-v-25a6cce8] .group:last-child {
  padding-bottom: 0;
}
.VPMenu[data-v-25a6cce8] .group + .item {
  border-top: 1px solid var(--vp-c-divider);
  padding: 11px 16px 0;
}
.VPMenu[data-v-25a6cce8] .item {
  padding: 0 16px;
  white-space: nowrap;
}
.VPMenu[data-v-25a6cce8] .label {
  flex-grow: 1;
  line-height: 28px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
}
.VPMenu[data-v-25a6cce8] .action {
  padding-left: 24px;
}

.VPFlyout[data-v-42cb505d] {
  position: relative;
}
.VPFlyout[data-v-42cb505d]:hover {
  color: var(--vp-c-brand-1);
  transition: color 0.25s;
}
.VPFlyout:hover .text[data-v-42cb505d] {
  color: var(--vp-c-text-2);
}
.VPFlyout:hover .icon[data-v-42cb505d] {
  fill: var(--vp-c-text-2);
}
.VPFlyout.active .text[data-v-42cb505d] {
  color: var(--vp-c-brand-1);
}
.VPFlyout.active:hover .text[data-v-42cb505d] {
  color: var(--vp-c-brand-2);
}
.button[aria-expanded="false"] + .menu[data-v-42cb505d] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
}
.VPFlyout:hover .menu[data-v-42cb505d],
.button[aria-expanded="true"] + .menu[data-v-42cb505d] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.button[data-v-42cb505d] {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: var(--vp-nav-height);
  color: var(--vp-c-text-1);
  transition: color 0.5s;
}
.text[data-v-42cb505d] {
  display: flex;
  align-items: center;
  line-height: var(--vp-nav-height);
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.option-icon[data-v-42cb505d] {
  margin-right: 0px;
  font-size: 16px;
}
.text-icon[data-v-42cb505d] {
  margin-left: 4px;
  font-size: 14px;
}
.icon[data-v-42cb505d] {
  font-size: 20px;
  transition: fill 0.25s;
}
.menu[data-v-42cb505d] {
  position: absolute;
  top: calc(var(--vp-nav-height) / 2 + 20px);
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
}

.VPSocialLink[data-v-b2b39822] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
}
.VPSocialLink[data-v-b2b39822]:hover {
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.VPSocialLink[data-v-b2b39822] >  svg,
.VPSocialLink[data-v-b2b39822] >  [class^="vpi-social-"] {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.VPSocialLinks[data-v-aab4b505] {
  display: flex;
  justify-content: center;
}

.VPNavBarExtra[data-v-f9c1cef3] {
  display: none;
  margin-right: -12px;
}
@media (min-width: 768px) {
.VPNavBarExtra[data-v-f9c1cef3] {
    display: block;
}
}
@media (min-width: 1280px) {
.VPNavBarExtra[data-v-f9c1cef3] {
    display: none;
}
}
.trans-title[data-v-f9c1cef3] {
  padding: 0 24px 0 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vp-c-text-1);
}
.item.appearance[data-v-f9c1cef3],
.item.social-links[data-v-f9c1cef3] {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.item.appearance[data-v-f9c1cef3] {
  min-width: 176px;
}
.appearance-action[data-v-f9c1cef3] {
  margin-right: -2px;
}
.social-links-list[data-v-f9c1cef3] {
  margin: -4px -8px;
}

.VPNavBarHamburger[data-v-e5dd9c1c] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: var(--vp-nav-height);
}
@media (min-width: 768px) {
.VPNavBarHamburger[data-v-e5dd9c1c] {
    display: none;
}
}
.container[data-v-e5dd9c1c] {
  position: relative;
  width: 16px;
  height: 14px;
  overflow: hidden;
}
.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]    { top: 0; left: 0; transform: translateX(4px);
}
.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c] { top: 6px; left: 0; transform: translateX(0);
}
.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c] { top: 12px; left: 0; transform: translateX(8px);
}
.VPNavBarHamburger.active .top[data-v-e5dd9c1c]    { top: 6px; transform: translateX(0) rotate(225deg);
}
.VPNavBarHamburger.active .middle[data-v-e5dd9c1c] { top: 6px; transform: translateX(16px);
}
.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c] { top: 6px; transform: translateX(0) rotate(135deg);
}
.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],
.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],
.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c] {
  background-color: var(--vp-c-text-2);
  transition: top .25s, background-color .25s, transform .25s;
}
.top[data-v-e5dd9c1c],
.middle[data-v-e5dd9c1c],
.bottom[data-v-e5dd9c1c] {
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: var(--vp-c-text-1);
  transition: top .25s, background-color .5s, transform .25s;
}
.top[data-v-e5dd9c1c]    { top: 0; left: 0; transform: translateX(0);
}
.middle[data-v-e5dd9c1c] { top: 6px; left: 0; transform: translateX(8px);
}
.bottom[data-v-e5dd9c1c] { top: 12px; left: 0; transform: translateX(4px);
}

.VPNavBarMenuLink[data-v-6500c4c4] {
  display: flex;
  align-items: center;
  padding: 0 12px;
  line-height: var(--vp-nav-height);
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.VPNavBarMenuLink.active[data-v-6500c4c4] {
  color: var(--vp-c-brand-1);
}
.VPNavBarMenuLink[data-v-6500c4c4]:hover {
  color: var(--vp-c-brand-1);
}

.VPNavBarMenu[data-v-7b3e138d] {
  display: none;
}
@media (min-width: 768px) {
.VPNavBarMenu[data-v-7b3e138d] {
    display: flex;
}
}

.VPNavBarAskAiButton[data-v-4eb17e89] {
  display: flex;
  align-items: center;
  height: var(--vp-nav-height);
  padding: 8px 14px;
  font-size: 20px;
}
@media (min-width: 768px) {
.VPNavBarAskAiButton[data-v-4eb17e89] {
    height: auto;
    padding: 11.5px;
    transition: color 0.3s ease;
    background-color: var(--vp-c-bg-alt);
    border-radius: 8px;
    font-size: 15px;
    color: var(--vp-c-text-2);
}
.VPNavBarAskAiButton[data-v-4eb17e89]:hover {
    color: var(--vp-c-brand-1);
}
}

.VPNavBarSearchButton[data-v-baa3be99] {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--vp-nav-height);
  padding: 8px 14px;
  font-size: 20px;
}
.text[data-v-baa3be99],
.keys[data-v-baa3be99],
:root.mac .key-ctrl[data-v-baa3be99],
:root:not(.mac) .key-cmd[data-v-baa3be99] {
  display: none;
}
kbd[data-v-baa3be99] {
  font-family: inherit;
  font-weight: 500;
}
@media (min-width: 768px) {
.VPNavBarSearchButton[data-v-baa3be99] {
    height: auto;
    padding: 8px 12px;
    background-color: var(--vp-c-bg-alt);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
    color: var(--vp-c-text-2);
}
.text[data-v-baa3be99] {
    display: inline;
    font-size: 13px;
}
.keys[data-v-baa3be99] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border: 1px solid var(--vp-c-divider);
    border-radius: 4px;
    font-size: 12px;
}
}

.VPNavBarSearch[data-v-2fc7f2c6] {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
.VPNavBarSearch[data-v-2fc7f2c6] {
    gap: 8px;
    flex-grow: 1;
    padding-left: 24px;
}
}
@media (min-width: 960px) {
.VPNavBarSearch[data-v-2fc7f2c6] {
    padding-left: 32px;
}
}

.VPNavBarSocialLinks[data-v-0394ad82] {
  display: none;
}
@media (min-width: 1280px) {
.VPNavBarSocialLinks[data-v-0394ad82] {
    display: flex;
    align-items: center;
}
}

.title[data-v-1e38c6bc] {
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  width: 100%;
  height: var(--vp-nav-height);
  font-size: 16px;
  font-weight: 600;
  color: var(--vp-c-text-1);
  transition: opacity 0.25s;
}
@media (min-width: 960px) {
.title[data-v-1e38c6bc] {
    flex-shrink: 0;
}
.VPNavBarTitle.has-sidebar .title[data-v-1e38c6bc] {
    border-bottom-color: var(--vp-c-divider);
}
}
[data-v-1e38c6bc] .logo {
  margin-right: 8px;
  height: var(--vp-nav-logo-height);
}

.VPNavBarTranslations[data-v-c70a0580] {
  display: none;
}
@media (min-width: 1280px) {
.VPNavBarTranslations[data-v-c70a0580] {
    display: flex;
    align-items: center;
}
}
.title[data-v-c70a0580] {
  padding: 0 24px 0 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vp-c-text-1);
}

.VPNavBar[data-v-9ca1369d] {
  position: relative;
  height: var(--vp-nav-height);
  pointer-events: none;
  white-space: nowrap;
  transition: background-color 0.25s;
}
.VPNavBar.screen-open[data-v-9ca1369d] {
  transition: none;
  background-color: var(--vp-nav-bg-color);
  border-bottom: 1px solid var(--vp-c-divider);
}
.VPNavBar[data-v-9ca1369d]:not(.home) {
  background-color: var(--vp-nav-bg-color);
}
@media (min-width: 960px) {
.VPNavBar[data-v-9ca1369d]:not(.home) {
    background-color: transparent;
}
.VPNavBar[data-v-9ca1369d]:not(.has-sidebar):not(.home.top) {
    background-color: var(--vp-nav-bg-color);
}
}
.wrapper[data-v-9ca1369d] {
  padding: 0 8px 0 24px;
}
@media (min-width: 768px) {
.wrapper[data-v-9ca1369d] {
    padding: 0 32px;
}
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .wrapper[data-v-9ca1369d] {
    padding: 0;
}
}
.container[data-v-9ca1369d] {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: calc(var(--vp-layout-max-width) - 64px);
  height: var(--vp-nav-height);
  pointer-events: none;
}
.container > .title[data-v-9ca1369d],
.container > .content[data-v-9ca1369d] {
  pointer-events: none;
}
.container[data-v-9ca1369d] * {
  pointer-events: auto;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .container[data-v-9ca1369d] {
    max-width: 100%;
}
}
.title[data-v-9ca1369d] {
  flex-shrink: 0;
  height: calc(var(--vp-nav-height) - 1px);
  transition: background-color 0.5s;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .title[data-v-9ca1369d] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 0 32px;
    width: var(--vp-sidebar-width);
    height: var(--vp-nav-height);
    background-color: transparent;
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .title[data-v-9ca1369d] {
    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
}
}
.content[data-v-9ca1369d] {
  flex-grow: 1;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .content[data-v-9ca1369d] {
    position: relative;
    z-index: 1;
    padding-left: var(--vp-sidebar-width);
    padding-right: 32px;
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .content[data-v-9ca1369d] {
    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
    padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
}
}
.content-body[data-v-9ca1369d] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: var(--vp-nav-height);
  transition: background-color 0.5s;
}
@media (min-width: 960px) {
.VPNavBar:not(.home.top) .content-body[data-v-9ca1369d] {
    position: relative;
    background-color: var(--vp-nav-bg-color);
}
.VPNavBar:not(.has-sidebar):not(.home.top) .content-body[data-v-9ca1369d] {
    background-color: transparent;
}
.content-body[data-v-9ca1369d] {
    margin-right: -100vw;
    padding-right: 100vw;
}
}
.menu + .translations[data-v-9ca1369d]::before,
.menu + .appearance[data-v-9ca1369d]::before,
.menu + .social-links[data-v-9ca1369d]::before,
.translations + .appearance[data-v-9ca1369d]::before,
.appearance + .social-links[data-v-9ca1369d]::before {
  margin-right: 8px;
  margin-left: 8px;
  width: 1px;
  height: 24px;
  background-color: var(--vp-c-divider);
  content: "";
}
.menu + .appearance[data-v-9ca1369d]::before,
.translations + .appearance[data-v-9ca1369d]::before {
  margin-right: 16px;
}
.appearance + .social-links[data-v-9ca1369d]::before {
  margin-left: 16px;
}
.social-links[data-v-9ca1369d] {
  margin-right: -8px;
}
.divider[data-v-9ca1369d] {
  width: 100%;
  height: 1px;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .divider[data-v-9ca1369d] {
    padding-left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .divider[data-v-9ca1369d] {
    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}
.divider-line[data-v-9ca1369d] {
  width: 100%;
  height: 1px;
  transition: background-color 0.5s;
}
.VPNavBar:not(.home) .divider-line[data-v-9ca1369d] {
  background-color: var(--vp-c-gutter);
}
@media (min-width: 960px) {
.VPNavBar:not(.home.top) .divider-line[data-v-9ca1369d] {
    background-color: var(--vp-c-gutter);
}
.VPNavBar:not(.has-sidebar):not(.home.top) .divider[data-v-9ca1369d] {
    background-color: var(--vp-c-gutter);
}
}

.VPNavScreenAppearance[data-v-b44890b2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  padding: 12px 14px 12px 16px;
  background-color: var(--vp-c-bg-soft);
}
.text[data-v-b44890b2] {
  line-height: 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}

.VPNavScreenMenuGroupLink[data-v-817c38e5] {
  display: block;
  margin-left: 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 400;
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.VPNavScreenMenuGroupLink[data-v-817c38e5]:hover {
  color: var(--vp-c-brand-1);
}
.VPNavScreenMenuGroupLink.active[data-v-817c38e5] {
  color: var(--vp-c-brand-1);
}

.VPNavScreenMenuGroupSection[data-v-4b7a798b] {
  display: block;
}
.title[data-v-4b7a798b] {
  line-height: 32px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vp-c-text-2);
  transition: color 0.25s;
}

.VPNavScreenMenuGroup[data-v-956364f9] {
  border-bottom: 1px solid var(--vp-c-divider);
  height: 48px;
  overflow: hidden;
  transition: border-color 0.5s;
}
.VPNavScreenMenuGroup .items[data-v-956364f9] {
  visibility: hidden;
}
.VPNavScreenMenuGroup.open .items[data-v-956364f9] {
  visibility: visible;
}
.VPNavScreenMenuGroup.open[data-v-956364f9] {
  padding-bottom: 10px;
  height: auto;
}
.VPNavScreenMenuGroup.open .button[data-v-956364f9] {
  padding-bottom: 6px;
  color: var(--vp-c-brand-1);
}
.VPNavScreenMenuGroup.open .button-icon[data-v-956364f9] {
  /*rtl:ignore*/
  transform: rotate(45deg);
}
.button[data-v-956364f9] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px 11px 0;
  width: 100%;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.button[data-v-956364f9]:hover {
  color: var(--vp-c-brand-1);
}
.button-icon[data-v-956364f9] {
  transition: transform 0.25s;
}
.group[data-v-956364f9]:first-child {
  padding-top: 0px;
}
.group + .group[data-v-956364f9],
.group + .item[data-v-956364f9] {
  padding-top: 4px;
}

.VPNavScreenMenuLink[data-v-364bacd3] {
  display: block;
  border-bottom: 1px solid var(--vp-c-divider);
  padding: 12px 0 11px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  transition:
    border-color 0.25s,
    color 0.25s;
}
.VPNavScreenMenuLink[data-v-364bacd3]:hover {
  color: var(--vp-c-brand-1);
}
.VPNavScreenMenuLink.active[data-v-364bacd3] {
  color: var(--vp-c-brand-1);
}

.VPNavScreenTranslations[data-v-2d6f5788] {
  height: 24px;
  overflow: hidden;
}
.VPNavScreenTranslations.open[data-v-2d6f5788] {
  height: auto;
}
.title[data-v-2d6f5788] {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
}
.icon[data-v-2d6f5788] {
  font-size: 16px;
}
.icon.lang[data-v-2d6f5788] {
  margin-right: 8px;
}
.icon.chevron[data-v-2d6f5788] {
  margin-left: 4px;
}
.list[data-v-2d6f5788] {
  padding: 4px 0 0 24px;
}
.link[data-v-2d6f5788] {
  line-height: 32px;
  font-size: 13px;
  color: var(--vp-c-text-1);
}

.VPNavScreen[data-v-05f3d7bc] {
  position: fixed;
  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
  /*rtl:ignore*/
  right: 0;
  bottom: 0;
  /*rtl:ignore*/
  left: 0;
  padding: 0 32px;
  width: 100%;
  background-color: var(--vp-nav-screen-bg-color);
  overflow-y: auto;
  transition: background-color 0.25s;
  pointer-events: auto;
}
.VPNavScreen.fade-enter-active[data-v-05f3d7bc],
.VPNavScreen.fade-leave-active[data-v-05f3d7bc] {
  transition: opacity 0.25s;
}
.VPNavScreen.fade-enter-active .container[data-v-05f3d7bc],
.VPNavScreen.fade-leave-active .container[data-v-05f3d7bc] {
  transition: transform 0.25s ease;
}
.VPNavScreen.fade-enter-from[data-v-05f3d7bc],
.VPNavScreen.fade-leave-to[data-v-05f3d7bc] {
  opacity: 0;
}
.VPNavScreen.fade-enter-from .container[data-v-05f3d7bc],
.VPNavScreen.fade-leave-to .container[data-v-05f3d7bc] {
  transform: translateY(-8px);
}
@media (min-width: 768px) {
.VPNavScreen[data-v-05f3d7bc] {
    display: none;
}
}
.container[data-v-05f3d7bc] {
  margin: 0 auto;
  padding: 24px 0 96px;
  max-width: 288px;
}
.menu + .translations[data-v-05f3d7bc],
.menu + .appearance[data-v-05f3d7bc],
.translations + .appearance[data-v-05f3d7bc] {
  margin-top: 24px;
}
.menu + .social-links[data-v-05f3d7bc] {
  margin-top: 16px;
}
.appearance + .social-links[data-v-05f3d7bc] {
  margin-top: 16px;
}

.VPNav[data-v-9f75dce3] {
  position: relative;
  top: var(--vp-layout-top-height, 0px);
  /*rtl:ignore*/
  left: 0;
  z-index: var(--vp-z-index-nav);
  width: 100%;
  pointer-events: none;
  transition: background-color 0.5s;
}
@media (min-width: 960px) {
.VPNav[data-v-9f75dce3] {
    position: fixed;
}
}

.VPSidebarItem.level-0[data-v-d81de50c] {
  padding-bottom: 24px;
}
.VPSidebarItem.collapsed.level-0[data-v-d81de50c] {
  padding-bottom: 10px;
}
.item[data-v-d81de50c] {
  position: relative;
  display: flex;
  width: 100%;
}
.VPSidebarItem.collapsible > .item[data-v-d81de50c] {
  cursor: pointer;
}
.indicator[data-v-d81de50c] {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: -17px;
  width: 2px;
  border-radius: 2px;
  transition: background-color 0.25s;
}
.VPSidebarItem.level-2.is-active > .item > .indicator[data-v-d81de50c],
.VPSidebarItem.level-3.is-active > .item > .indicator[data-v-d81de50c],
.VPSidebarItem.level-4.is-active > .item > .indicator[data-v-d81de50c],
.VPSidebarItem.level-5.is-active > .item > .indicator[data-v-d81de50c] {
  background-color: var(--vp-c-brand-1);
}
.link[data-v-d81de50c] {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.text[data-v-d81de50c] {
  flex-grow: 1;
  padding: 4px 0;
  line-height: 24px;
  font-size: 14px;
  transition: color 0.25s;
}
.VPSidebarItem.level-0 .text[data-v-d81de50c] {
  font-weight: 700;
  color: var(--vp-c-text-1);
}
.VPSidebarItem.level-1 .text[data-v-d81de50c],
.VPSidebarItem.level-2 .text[data-v-d81de50c],
.VPSidebarItem.level-3 .text[data-v-d81de50c],
.VPSidebarItem.level-4 .text[data-v-d81de50c],
.VPSidebarItem.level-5 .text[data-v-d81de50c] {
  font-weight: 500;
  color: var(--vp-c-text-2);
}
.VPSidebarItem.level-0.is-link > .item > .link:hover .text[data-v-d81de50c],
.VPSidebarItem.level-1.is-link > .item > .link:hover .text[data-v-d81de50c],
.VPSidebarItem.level-2.is-link > .item > .link:hover .text[data-v-d81de50c],
.VPSidebarItem.level-3.is-link > .item > .link:hover .text[data-v-d81de50c],
.VPSidebarItem.level-4.is-link > .item > .link:hover .text[data-v-d81de50c],
.VPSidebarItem.level-5.is-link > .item > .link:hover .text[data-v-d81de50c] {
  color: var(--vp-c-brand-1);
}
.VPSidebarItem.level-0.has-active > .item > .text[data-v-d81de50c],
.VPSidebarItem.level-1.has-active > .item > .text[data-v-d81de50c],
.VPSidebarItem.level-2.has-active > .item > .text[data-v-d81de50c],
.VPSidebarItem.level-3.has-active > .item > .text[data-v-d81de50c],
.VPSidebarItem.level-4.has-active > .item > .text[data-v-d81de50c],
.VPSidebarItem.level-5.has-active > .item > .text[data-v-d81de50c],
.VPSidebarItem.level-0.has-active > .item > .link > .text[data-v-d81de50c],
.VPSidebarItem.level-1.has-active > .item > .link > .text[data-v-d81de50c],
.VPSidebarItem.level-2.has-active > .item > .link > .text[data-v-d81de50c],
.VPSidebarItem.level-3.has-active > .item > .link > .text[data-v-d81de50c],
.VPSidebarItem.level-4.has-active > .item > .link > .text[data-v-d81de50c],
.VPSidebarItem.level-5.has-active > .item > .link > .text[data-v-d81de50c] {
  color: var(--vp-c-text-1);
}
.VPSidebarItem.level-0.is-active > .item .link > .text[data-v-d81de50c],
.VPSidebarItem.level-1.is-active > .item .link > .text[data-v-d81de50c],
.VPSidebarItem.level-2.is-active > .item .link > .text[data-v-d81de50c],
.VPSidebarItem.level-3.is-active > .item .link > .text[data-v-d81de50c],
.VPSidebarItem.level-4.is-active > .item .link > .text[data-v-d81de50c],
.VPSidebarItem.level-5.is-active > .item .link > .text[data-v-d81de50c] {
  color: var(--vp-c-brand-1);
}
.caret[data-v-d81de50c] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -7px;
  width: 32px;
  height: 32px;
  color: var(--vp-c-text-3);
  cursor: pointer;
  transition: color 0.25s;
  flex-shrink: 0;
}
.item:hover .caret[data-v-d81de50c] {
  color: var(--vp-c-text-2);
}
.item:hover .caret[data-v-d81de50c]:hover {
  color: var(--vp-c-text-1);
}
.caret-icon[data-v-d81de50c] {
  font-size: 18px;
  /*rtl:ignore*/
  transform: rotate(90deg);
  transition: transform 0.25s;
}
.VPSidebarItem.collapsed .caret-icon[data-v-d81de50c] {
  transform: rotate(0)/*rtl:rotate(180deg)*/;
}
.VPSidebarItem.level-1 .items[data-v-d81de50c],
.VPSidebarItem.level-2 .items[data-v-d81de50c],
.VPSidebarItem.level-3 .items[data-v-d81de50c],
.VPSidebarItem.level-4 .items[data-v-d81de50c],
.VPSidebarItem.level-5 .items[data-v-d81de50c] {
  border-left: 1px solid var(--vp-c-divider);
  padding-left: 16px;
}
.VPSidebarItem.collapsed .items[data-v-d81de50c] {
  display: none;
}

.no-transition[data-v-8d50c081] .caret-icon {
  transition: none;
}
.group + .group[data-v-8d50c081] {
  border-top: 1px solid var(--vp-c-divider);
  padding-top: 10px;
}
@media (min-width: 960px) {
.group[data-v-8d50c081] {
    padding-top: 10px;
    width: calc(var(--vp-sidebar-width) - 64px);
}
}

.VPSidebar[data-v-af661f50] {
  position: fixed;
  top: var(--vp-layout-top-height, 0px);
  bottom: 0;
  left: 0;
  z-index: var(--vp-z-index-sidebar);
  padding: 32px 32px 96px;
  width: calc(100vw - 64px);
  max-width: 320px;
  background-color: var(--vp-sidebar-bg-color);
  opacity: 0;
  box-shadow: var(--vp-c-shadow-3);
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: opacity 0.5s, transform 0.25s ease;
  overscroll-behavior: contain;
}
.VPSidebar.open[data-v-af661f50] {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.25s,
    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.dark .VPSidebar[data-v-af661f50] {
  box-shadow: var(--vp-shadow-1);
}
@media (min-width: 960px) {
.VPSidebar[data-v-af661f50] {
    padding-top: var(--vp-nav-height);
    width: var(--vp-sidebar-width);
    max-width: 100%;
    background-color: var(--vp-sidebar-bg-color);
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transform: translateX(0);
}
}
@media (min-width: 1440px) {
.VPSidebar[data-v-af661f50] {
    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
}
}
@media (min-width: 960px) {
.curtain[data-v-af661f50] {
    position: sticky;
    top: calc(var(--vp-nav-height) * -1);
    left: 0;
    z-index: 1;
    margin-top: calc(var(--vp-nav-height) * -1);
    margin-right: -32px;
    margin-left: -32px;
    height: var(--vp-nav-height);
    background-color: var(--vp-sidebar-bg-color);
}
}
.nav[data-v-af661f50] {
  outline: 0;
}

.VPSkipLink[data-v-414181b2] {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 8px 16px;
  z-index: 999;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: var(--vp-c-brand-1);
  box-shadow: var(--vp-shadow-3);
  background-color: var(--vp-c-bg);
}
.VPSkipLink[data-v-414181b2]:focus {
  height: auto;
  width: auto;
  clip: auto;
  clip-path: none;
}
@media (min-width: 1280px) {
.VPSkipLink[data-v-414181b2] {
    top: 14px;
    left: 16px;
}
}

.Layout[data-v-0cf61682] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

:root {
  --vp-plugin-tabs-tab-text-color: var(--vp-c-text-2);
  --vp-plugin-tabs-tab-active-text-color: var(--vp-c-text-1);
  --vp-plugin-tabs-tab-hover-text-color: var(--vp-c-text-1);
  --vp-plugin-tabs-tab-bg: var(--vp-c-bg-soft);
  --vp-plugin-tabs-tab-divider: var(--vp-c-divider);
  --vp-plugin-tabs-tab-active-bar-color: var(--vp-c-brand-1);
}
.plugin-tabs {
  margin: 16px 0;
  background-color: var(--vp-plugin-tabs-tab-bg);
  border-radius: 8px;
}
.plugin-tabs--tab-list {
  position: relative;
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
}
.plugin-tabs--tab-list::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--vp-plugin-tabs-tab-divider);
}
.plugin-tabs--tab {
  position: relative;
  padding: 0 12px;
  line-height: 48px;
  border-bottom: 2px solid transparent;
  color: var(--vp-plugin-tabs-tab-text-color);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.25s;
}
.plugin-tabs--tab[aria-selected='true'] {
  color: var(--vp-plugin-tabs-tab-active-text-color);
}
.plugin-tabs--tab:hover {
  color: var(--vp-plugin-tabs-tab-hover-text-color);
}
.plugin-tabs--tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 8px;
  right: 8px;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.25s;
  z-index: 1;
}
.plugin-tabs--tab[aria-selected='true']::after {
  background-color: var(--vp-plugin-tabs-tab-active-bar-color);
}
.plugin-tabs[data-variant='code'] {
  margin-top: 16px;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0;
}
.plugin-tabs[data-variant='code'] .plugin-tabs--tab-list {
  margin-right: -24px;
  margin-left: -24px;
  background-color: var(--vp-code-tab-bg);
  box-shadow: inset 0 -1px var(--vp-code-tab-divider);
}
@media (min-width: 640px) {
.plugin-tabs[data-variant='code'] .plugin-tabs--tab-list {
    margin-right: 0;
    margin-left: 0;
    border-radius: 8px 8px 0 0;
}
}
.plugin-tabs[data-variant='code'] .plugin-tabs--tab-list::after {
  display: none;
}
.plugin-tabs[data-variant='code'] .plugin-tabs--tab {
  color: var(--vp-code-tab-text-color);
}
.plugin-tabs[data-variant='code'] .plugin-tabs--tab[aria-selected='true'] {
  color: var(--vp-code-tab-active-text-color);
}
.plugin-tabs[data-variant='code'] .plugin-tabs--tab:hover {
  color: var(--vp-code-tab-hover-text-color);
}
.plugin-tabs[data-variant='code'] .plugin-tabs--tab[aria-selected='true']::after {
  background-color: var(--vp-code-tab-active-bar-color);
}

.plugin-tabs--content[data-v-7d212f86] {
  padding: 16px;
}
.plugin-tabs--content[data-is-print='true'][data-v-7d212f86]:not(:last-child) {
  border-bottom: 2px solid var(--vp-plugin-tabs-tab-divider);
}
.plugin-tabs--content[data-v-7d212f86] > :first-child:first-child {
  margin-top: 0;
}
.plugin-tabs--content[data-v-7d212f86] > :last-child:last-child {
  margin-bottom: 0;
}
.plugin-tabs--content[data-v-7d212f86] >  div[class*='language-'] {
  border-radius: 8px;
  margin: 16px 0px;
}
:root:not(.dark)
  .plugin-tabs:not([data-variant='code'])
  .plugin-tabs--content[data-v-7d212f86]
  div[class*='language-'] {
  background-color: var(--vp-c-bg);
}
.plugin-tabs[data-variant='code'] .plugin-tabs--content[data-v-7d212f86] {
  padding: 0;
}
.plugin-tabs[data-variant='code'] .plugin-tabs--content[data-v-7d212f86] >  div[class*='language-'] {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin: 0 -24px !important;
}
@media (min-width: 640px) {
.plugin-tabs[data-variant='code'] .plugin-tabs--content[data-v-7d212f86] >  div[class*='language-'] {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
}

a[data-v-98c4c563], a img[data-v-98c4c563] { height: inherit;
}

footer {
&[data-v-458e8850] {
  background-color: var(--footer-background);
  padding: 2% 10%;
}
.links {
&[data-v-458e8850] {
    display: flex;
    gap: 1rem;
}
a[data-v-458e8850] {
      color: var(--vp-c-brand-1);
      text-decoration: underline;
}
}
}
@media (min-width: 1440px) {
footer.sidepanel-fix[data-v-458e8850] {
    padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px + 10%);
}
}
@media (min-width: 960px) and (max-width: 1439px) {
footer.sidepanel-fix[data-v-458e8850] {
    padding-left: calc(var(--vp-sidebar-width) + 10%);
}
}

.NotFound[data-v-5f7b469a] { padding: 64px 24px 96px; text-align: center;
}
@media (min-width: 768px) {
.NotFound[data-v-5f7b469a] { padding: 96px 32px 168px;
}
}
.layout[data-v-5f7b469a] { max-width: 1152px; margin: 0 auto;
}
.bg[data-v-5f7b469a] { background-color: var(--vp-c-bg-alt); border-radius: 8px; padding: 40px 28px 32px;
}
@media (min-width: 640px) {
.bg[data-v-5f7b469a] { padding: 48px 48px 40px;
}
}
.code[data-v-5f7b469a] { line-height: 64px; font-size: 64px; font-weight: 600; margin: 0; color: var(--vp-c-text-2);
}
.title[data-v-5f7b469a] { padding-top: 12px; letter-spacing: 2px; line-height: 20px; font-size: 20px; font-weight: 700; color: var(--vp-c-text-1); margin: 0;
}
.divider[data-v-5f7b469a] { margin: 24px auto 18px; width: 64px; height: 1px; background-color: var(--vp-c-divider);
}
.quote[data-v-5f7b469a] { margin: 0 auto; max-width: 256px; font-size: 14px; font-weight: 500; color: var(--vp-c-text-2); border: none; padding: 0;
}
.action[data-v-5f7b469a] { padding-top: 20px;
}
.link[data-v-5f7b469a] { display: inline-block; border: 1px solid var(--vp-c-brand-1); border-radius: 16px; padding: 3px 16px; font-size: 14px; font-weight: 500; color: var(--vp-c-brand-1); transition: border-color 0.25s, color 0.25s; text-decoration: none;
}
.link[data-v-5f7b469a]:hover { border-color: var(--vp-c-brand-2); color: var(--vp-c-brand-2);
}

.safe-image-not-found p[data-v-657c8953] {
    margin: 0;
    color: var(--mate-text-danger);
}

.viewer-thumbnail-bg[data-v-fbbcfec8] {
    display: block;
    padding: 12px;
    background-color: white;
    cursor: pointer;
    transition: opacity 0.2s ease;
    min-width: 40px;
}
.viewer-thumbnail[data-v-fbbcfec8], .viewer-image[data-v-fbbcfec8] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.viewer-modal[data-v-fbbcfec8] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    animation: fadeIn-fbbcfec8 0.2s ease;
}
@keyframes fadeIn-fbbcfec8 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.viewer-container[data-v-fbbcfec8] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}
.viewer-container[data-v-fbbcfec8] > * { pointer-events: auto;
}
.viewer-close[data-v-fbbcfec8], .viewer-link[data-v-fbbcfec8], .viewer-controls[data-v-fbbcfec8] {
    border: 1px solid var(--mate-dark-background-base);
    background: var(--mate-light-background-highlighted);
    color: var(--mate-light-body) !important;
    opacity: 96%;
}
.viewer-close[data-v-fbbcfec8] {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewer-link[data-v-fbbcfec8] {
    position: absolute;
    top: 20px;
    right: 70px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewer-controls[data-v-fbbcfec8] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 25px;
    padding: 8px 16px;
    z-index: 10;
}
.viewer-btn[data-v-fbbcfec8] {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewer-btn[data-v-fbbcfec8]:disabled { opacity: 0.5; cursor: not-allowed;
}
.viewer-zoom-level[data-v-fbbcfec8] {
    font-size: 14px;
    font-weight: 500;
    min-width: 50px;
    text-align: center;
    color: var(--mate-light-body) !important;
}
.viewer-image-container[data-v-fbbcfec8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.viewer-image[data-v-fbbcfec8] {
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 140px);
    object-fit: contain;
    transition: transform 0.2s ease;
    transform-origin: center;
    cursor: grab;
    user-select: none;
}
.viewer-image.dragging[data-v-fbbcfec8] { cursor: grabbing; transition: none;
}

vaadin-card[data-v-5fb04b41] {
    display: block;
    border: 1px solid var(--vp-c-bg-soft);
    border-radius: 12px;
    height: 100%;
    background-color: var(--vp-c-bg-soft);
    transition: border-color 0.25s, background-color 0.25s;
}
vaadin-card[data-v-5fb04b41]:hover { border-color: var(--vp-c-brand-1);
}

.vitepress-card-container[data-v-2093bdea] {
    display: grid;
    grid-template-columns: repeat(var(--desktop-cols), 1fr);
    gap: 12px;
}
.vitepress-card-separator[data-v-2093bdea] { margin-top: 24px;
}
@media (max-width: 768px) {
.vitepress-card-container[data-v-2093bdea] { grid-template-columns: repeat(var(--mobile-cols), 1fr);
}
}

.version-switcher[data-v-c4d4a8d8] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.version-select[data-v-c4d4a8d8] {
    font-size: 14px;
    padding: 4px 8px;
    background-color: var(--vp-c-bg);
    color: var(--vp-c-text-1);
    cursor: pointer;
}

.examples-loader[data-v-c8a400c9] {
  margin-top: 48px;
  border-top: 1px solid var(--vp-c-divider);
  padding-top: 24px;
}
.examples-title[data-v-c8a400c9] {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--vp-c-text-1);
  border: none !important;
  padding: 0 !important;
}
.examples-tabs[data-v-c8a400c9] {
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  overflow: hidden;
}
.examples-tab-list[data-v-c8a400c9] {
  display: flex;
  background: var(--vp-c-bg-soft);
  border-bottom: 1px solid var(--vp-c-divider);
}
.examples-tab-btn[data-v-c8a400c9] {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}
.examples-tab-btn[data-v-c8a400c9]:hover {
  color: var(--vp-c-text-1);
}
.examples-tab-btn.active[data-v-c8a400c9] {
  color: var(--vp-c-brand-1);
  border-bottom-color: var(--vp-c-brand-1);
}
.examples-tab-content[data-v-c8a400c9] {
  padding: 24px;
  background: var(--vp-c-bg);
}

/* Dark-Mode-Overrides passend zu github-dark */
html.dark .hljs {
  background: #0d1117;
  color: #e6edf3;
}
html.dark .hljs-doctag,
html.dark .hljs-keyword,
html.dark .hljs-meta .hljs-keyword,
html.dark .hljs-template-tag,
html.dark .hljs-template-variable,
html.dark .hljs-type,
html.dark .hljs-variable.language_ {
  color: #ff7b72;
}
html.dark .hljs-title,
html.dark .hljs-title.class_,
html.dark .hljs-title.class_.inherited__,
html.dark .hljs-title.function_ {
  color: #d2a8ff;
}
html.dark .hljs-attr,
html.dark .hljs-attribute,
html.dark .hljs-literal,
html.dark .hljs-meta,
html.dark .hljs-number,
html.dark .hljs-operator,
html.dark .hljs-selector-attr,
html.dark .hljs-selector-class,
html.dark .hljs-selector-id,
html.dark .hljs-variable {
  color: #79c0ff;
}
html.dark .hljs-built_in,
html.dark .hljs-symbol {
  color: #ffa657;
}
html.dark .hljs-comment,
html.dark .hljs-code,
html.dark .hljs-formula {
  color: #8b949e;
}
html.dark .hljs-name,
html.dark .hljs-quote,
html.dark .hljs-selector-tag,
html.dark .hljs-selector-pseudo {
  color: #7ee787;
}
html.dark .hljs-subst {
  color: #e6edf3;
}
html.dark .hljs-section {
  color: #1f6feb;
  font-weight: bold;
}
html.dark .hljs-string,
html.dark .hljs-regexp {
  color: #a5d6ff;
}
html.dark .hljs-addition {
  color: #aff5b4;
  background-color: #033a16;
}
html.dark .hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c;
}

/* ── FAB ──────────────────────────────────────────────────────── */
.chatbot-fab[data-v-7badbd1d] {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: none;
  background: var(--vp-c-brand-1, #3451b2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: background 0.2s, transform 0.2s;
}
.chatbot-fab[data-v-7badbd1d]:hover { background: var(--vp-c-brand-2, #2a3f9e);
}
.chatbot-fab[data-v-7badbd1d]:active { transform: scale(0.95);
}
.chatbot-fab svg[data-v-7badbd1d] {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chatbot-fab.open svg[data-v-7badbd1d] { fill: none;
}

/* ── Window ───────────────────────────────────────────────────── */
.chatbot-window[data-v-7badbd1d] {
  position: fixed;
  bottom: 5.25rem;
  right: 1.5rem;
  z-index: 999;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  background: var(--vp-c-bg, #fff);
  border: 1px solid var(--vp-c-divider, #e2e2e2);
  border-radius: 0.875rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────── */
.chatbot-header[data-v-7badbd1d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--vp-c-brand-1, #3451b2);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}
.chatbot-close[data-v-7badbd1d] {
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
}
.chatbot-close[data-v-7badbd1d]:hover { background: rgba(255,255,255,0.15);
}

/* ── Messages ─────────────────────────────────────────────────── */
.chatbot-messages[data-v-7badbd1d] {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.chatbot-bubble[data-v-7badbd1d] {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chatbot-bubble.user[data-v-7badbd1d] {
  align-self: flex-end;
  background: var(--vp-c-brand-1, #3451b2);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}
.chatbot-bubble.assistant[data-v-7badbd1d] {
  align-self: flex-start;
  background: var(--vp-c-bg-soft, #f6f6f7);
  color: var(--vp-c-text-1, #213547);
  border-bottom-left-radius: 0.25rem;
}
.bubble-text code[data-v-7badbd1d] {
  font-family: monospace;
  font-size: 0.82em;
  background: rgba(0, 0, 0, 0.07);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.chatbot-bubble.user .bubble-text code[data-v-7badbd1d] {
  background: rgba(255, 255, 255, 0.2);
}
.bubble-text a[data-v-7badbd1d] {
  color: inherit;
  text-decoration: underline;
}
.stream-cursor[data-v-7badbd1d] {
  opacity: 0.5;
  animation: blink-7badbd1d 1s step-start infinite;
}
@keyframes blink-7badbd1d {
0%, 100% { opacity: 0.5;
}
50%       { opacity: 0;
}
}

/* ── Input row ────────────────────────────────────────────────── */
.chatbot-input-row[data-v-7badbd1d] {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--vp-c-divider, #e2e2e2);
  background: var(--vp-c-bg, #fff);
}
.chatbot-input[data-v-7badbd1d] {
  flex: 1;
  resize: none;
  border: 1px solid var(--vp-c-divider, #e2e2e2);
  border-radius: 0.5rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--vp-c-bg-soft, #f6f6f7);
  color: var(--vp-c-text-1, #213547);
  line-height: 1.4;
  max-height: 6rem;
  overflow-y: auto;
  outline: none;
}
.chatbot-input[data-v-7badbd1d]:focus { border-color: var(--vp-c-brand-1, #3451b2);
}
.chatbot-input[data-v-7badbd1d]:disabled { opacity: 0.5;
}
.chatbot-send[data-v-7badbd1d] {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: var(--vp-c-brand-1, #3451b2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.chatbot-send[data-v-7badbd1d]:hover:not(:disabled) { background: var(--vp-c-brand-2, #2a3f9e);
}
.chatbot-send[data-v-7badbd1d]:disabled { opacity: 0.4; cursor: not-allowed;
}
.chatbot-send svg[data-v-7badbd1d] {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Transition ───────────────────────────────────────────────── */
.chatbot-slide-enter-active[data-v-7badbd1d],
.chatbot-slide-leave-active[data-v-7badbd1d] {
  transition: opacity 0.2s, transform 0.2s;
}
.chatbot-slide-enter-from[data-v-7badbd1d],
.chatbot-slide-leave-to[data-v-7badbd1d] {
  opacity: 0;
  transform: translateY(0.75rem) scale(0.97);
}
:root {
  --vp-c-bg: var(--mate-background-base); /* previously #ffffff */
  --vp-c-bg-alt: var(--mate-gray-30); /* previously #f6f6f7 */
  --vp-c-bg-elv: var(--mate-gray-40); /* previously #ffffff */
  --vp-c-bg-soft: var(--mate-gray-20); /* previously #f6f6f7 */
  --vp-c-black: var(--mate-white-and-black-black); /* previously #000000 */
  --vp-c-border: var(--mate-border-base); /* previously #c2c2c4 */
  --vp-c-dark-bg: var(--mate-background-base); /* previously #1b1b1f */
  --vp-c-dark-bg-alt: var(--mate-gray-70); /* previously #161618 */
  --vp-c-dark-bg-elv: var(--mate-gray-100); /* previously #202127 */
  --vp-c-dark-bg-soft: var(--mate-gray-100); /* previously #202127 */
  --vp-c-dark-border: var(--mate-gray-80); /* previously #3c3f44 */
  --vp-c-dark-divider: var(--mate-gray-80); /* previously #2e2e32 */
  --vp-c-dark-gray-1: var(--mate-gray-60); /* previously #515c67 */
  --vp-c-dark-gray-2: var(--mate-gray-70); /* previously #414853 */
  --vp-c-dark-gray-3: var(--mate-gray-80); /* previously #32363f */
  --vp-c-dark-gray-soft: var(--mate-blue-20); /* previously #657585 */
  --vp-c-dark-green-1: var(--mate-teal-10); /* previously #3dd68c */
  --vp-c-dark-green-2: var(--mate-cyan-100); /* previously #30a46c */
  --vp-c-dark-green-3: var(--mate-cyan-80); /* previously #298459 */
  --vp-c-dark-green-soft: var(--mate-cyan-50); /* previously #10b981 */
  --vp-c-dark-gutter: var(--mate-gray-80); /* previously #000000 */
  --vp-c-dark-indigo-1: var(--mate-purple-10); /* previously #a8b1ff */
  --vp-c-dark-indigo-2: var(--mate-purple-40); /* previously #5c73e7 */
  --vp-c-dark-indigo-3: var(--mate-purple-50); /* previously #3e63dd */
  --vp-c-dark-indigo-soft: var(--mate-purple-20); /* previously #646cff */
  --vp-c-dark-purple-1: var(--mate-magenta-20); /* previously #c8abfa */
  --vp-c-dark-purple-2: var(--mate-magenta-30); /* previously #a879e6 */
  --vp-c-dark-purple-3: var(--mate-magenta-50); /* previously #8e5cd9 */
  --vp-c-dark-purple-soft: var(--mate-magenta-40); /* previously #9f7aea */
  --vp-c-dark-red-1: var(--mate-red-10); /* previously #f66f81 */
  --vp-c-dark-red-2: var(--mate-red-40); /* previously #f14158 */
  --vp-c-dark-red-3: var(--mate-red-70); /* previously #b62a3c */
  --vp-c-dark-red-soft: var(--mate-red-20); /* previously #f43f5e */
  --vp-c-dark-text-1: var(--mate-text-body); /* previously #dfdfd6 */
  --vp-c-dark-text-2: var(--mate-text-secondary); /* previously #98989f */
  --vp-c-dark-text-3: var(--mate-text-tertiary); /* previously #6a6a71 */
  --vp-c-dark-yellow-1: var(--mate-green-30); /* previously #f9b44e */
  --vp-c-dark-yellow-2: var(--mate-green-60); /* previously #da8b17 */
  --vp-c-dark-yellow-3: var(--mate-green-90); /* previously #a46a0a */
  --vp-c-dark-yellow-soft: var(--mate-green-10); /* previously #eab308 */
  --vp-c-divider: var(--mate-border-base); /* previously #e2e2e3 */
  --vp-c-gray-1: var(--mate-blue-50); /* previously #dddde3 */
  --vp-c-gray-2: var(--mate-cyan-10); /* previously #e4e4e9 */
  --vp-c-gray-3: var(--mate-blue-10); /* previously #ebebef */
  --vp-c-gray-soft: var(--mate-blue-30); /* previously #8e96aa */
  --vp-c-green-1: var(--mate-cyan-70); /* previously #18794e */
  --vp-c-green-2: var(--mate-cyan-90); /* previously #299764 */
  --vp-c-green-3: var(--mate-teal-20); /* previously #30a46c */
  --vp-c-green-soft: var(--mate-cyan-60); /* previously #10b981 */
  --vp-c-gutter: var(--mate-gray-80); /* previously #e2e2e3 */
  --vp-c-indigo-1: var(--mate-magenta-100); /* previously #3451b2 */
  --vp-c-indigo-2: var(--mate-purple-60); /* previously #3a5ccc */
  --vp-c-indigo-3: var(--mate-purple-70); /* previously #5672cd */
  --vp-c-indigo-soft: var(--mate-purple-30); /* previously #646cff */
  --vp-c-purple-1: var(--mate-magenta-80); /* previously #6f42c1 */
  --vp-c-purple-2: var(--mate-magenta-70); /* previously #7e4cc9 */
  --vp-c-purple-3: var(--mate-magenta-60); /* previously #8e5cd9 */
  --vp-c-purple-soft: var(--mate-magenta-90); /* previously #9f7aea */
  --vp-c-red-1: var(--mate-red-60); /* previously #b8272c */
  --vp-c-red-2: var(--mate-red-50); /* previously #d5393e */
  --vp-c-red-3: var(--mate-red-100); /* previously #e0575b */
  --vp-c-red-soft: var(--mate-red-30); /* previously #f43f5e */
  --vp-c-sponsor: var(--mate-magenta-10); /* previously #db2777 */
  --vp-c-text-1: var(--mate-text-body); /* previously #3c3c43 */
  --vp-c-text-2: var(--mate-text-secondary); /* previously #67676c */
  --vp-c-text-3: var(--mate-text-tertiary); /* previously #929295 */
  --vp-c-white: var(--mate-white-and-black-white); /* previously #ffffff */
  --vp-c-yellow-1: var(--mate-yellow-60); /* previously #915930 */
  --vp-c-yellow-2: var(--mate-yellow-70); /* previously #946300 */
  --vp-c-yellow-3: var(--mate-yellow-80); /* previously #9f6a00 */
  --vp-c-yellow-soft: var(--mate-yellow-20); /* previously #eab308 */
}

:root {
  --vp-c-neutral: var(--vp-c-black);
  --vp-c-neutral-inverse: var(--vp-c-white);
}

.dark {
  --vp-c-neutral: var(--vp-c-white);
  --vp-c-neutral-inverse: var(--vp-c-black);

  --vp-c-gray-1: var(--vp-c-dark-gray-1);
  --vp-c-gray-2: var(--vp-c-dark-gray-2);
  --vp-c-gray-3: var(--vp-c-dark-gray-3);
  --vp-c-gray-soft: var(--vp-c-dark-gray-soft);

  --vp-c-indigo-1: var(--vp-c-dark-indigo-1);
  --vp-c-indigo-2: var(--vp-c-dark-indigo-2);
  --vp-c-indigo-3: var(--vp-c-dark-indigo-3);
  --vp-c-indigo-soft: var(--vp-c-dark-indigo-soft);

  --vp-c-purple-1: var(--vp-c-dark-purple-1);
  --vp-c-purple-2: var(--vp-c-dark-purple-2);
  --vp-c-purple-3: var(--vp-c-dark-purple-3);
  --vp-c-purple-soft: var(--vp-c-dark-purple-soft);

  --vp-c-green-1: var(--vp-c-dark-green-1);
  --vp-c-green-2: var(--vp-c-dark-green-2);
  --vp-c-green-3: var(--vp-c-dark-green-3);
  --vp-c-green-soft: var(--vp-c-dark-green-soft);

  --vp-c-yellow-1: var(--vp-c-dark-yellow-1);
  --vp-c-yellow-2: var(--vp-c-dark-yellow-2);
  --vp-c-yellow-3: var(--vp-c-dark-yellow-3);
  --vp-c-yellow-soft: var(--vp-c-dark-yellow-soft);

  --vp-c-red-1: var(--vp-c-dark-red-1);
  --vp-c-red-2: var(--vp-c-dark-red-2);
  --vp-c-red-3: var(--vp-c-dark-red-3);
  --vp-c-red-soft: var(--vp-c-dark-red-soft);

  --vp-c-bg: var(--vp-c-dark-bg);
  --vp-c-bg-alt: var(--vp-c-dark-bg-alt);
  --vp-c-bg-elv: var(--vp-c-dark-bg-elv);
  --vp-c-bg-soft: var(--vp-c-dark-bg-soft);

  --vp-c-border: var(--vp-c-dark-border);
  --vp-c-divider: var(--vp-c-dark-divider);
  --vp-c-gutter: var(--vp-c-dark-gutter);

  --vp-c-text-1: var(--vp-c-dark-text-1);
  --vp-c-text-2: var(--vp-c-dark-text-2);
  --vp-c-text-3: var(--vp-c-dark-text-3);
}

/**
 * Colors: Function
 *
 * - `default`: The color used purely for subtle indication without any
 *   special meanings attached to it such as bg color for menu hover state.
 *
 * - `brand`: Used for primary brand colors, such as link text, button with
 *   brand theme, etc.
 *
 * - `tip`: Used to indicate useful information. The default theme uses the
 *   brand color for this by default.
 *
 * - `warning`: Used to indicate warning to the users. Used in custom
 *   container, badges, etc.
 *
 * - `danger`: Used to show error, or dangerous message to the users. Used
 *   in custom container, badges, etc.
 *
 * To understand the scaling system, refer to "Colors: Palette" section.
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-default-1: var(--vp-c-gray-1);
  --vp-c-default-2: var(--vp-c-gray-2);
  --vp-c-default-3: var(--vp-c-gray-3);
  --vp-c-default-soft: var(--vp-c-gray-soft);

  --vp-c-brand-1: var(--vp-c-indigo-1);
  --vp-c-brand-2: var(--vp-c-indigo-2);
  --vp-c-brand-3: var(--vp-c-indigo-3);
  --vp-c-brand-soft: var(--vp-c-indigo-soft);

  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
  --vp-c-brand: var(--vp-c-brand-1);

  --vp-c-tip-1: var(--vp-c-brand-1);
  --vp-c-tip-2: var(--vp-c-brand-2);
  --vp-c-tip-3: var(--vp-c-brand-3);
  --vp-c-tip-soft: var(--vp-c-brand-soft);

  --vp-c-note-1: var(--vp-c-brand-1);
  --vp-c-note-2: var(--vp-c-brand-2);
  --vp-c-note-3: var(--vp-c-brand-3);
  --vp-c-note-soft: var(--vp-c-brand-soft);

  --vp-c-success-1: var(--vp-c-green-1);
  --vp-c-success-2: var(--vp-c-green-2);
  --vp-c-success-3: var(--vp-c-green-3);
  --vp-c-success-soft: var(--vp-c-green-soft);

  --vp-c-important-1: var(--vp-c-purple-1);
  --vp-c-important-2: var(--vp-c-purple-2);
  --vp-c-important-3: var(--vp-c-purple-3);
  --vp-c-important-soft: var(--vp-c-purple-soft);

  --vp-c-warning-1: var(--vp-c-yellow-1);
  --vp-c-warning-2: var(--vp-c-yellow-2);
  --vp-c-warning-3: var(--vp-c-yellow-3);
  --vp-c-warning-soft: var(--vp-c-yellow-soft);

  --vp-c-danger-1: var(--vp-c-red-1);
  --vp-c-danger-2: var(--vp-c-red-2);
  --vp-c-danger-3: var(--vp-c-red-3);
  --vp-c-danger-soft: var(--vp-c-red-soft);

  --vp-c-caution-1: var(--vp-c-red-1);
  --vp-c-caution-2: var(--vp-c-red-2);
  --vp-c-caution-3: var(--vp-c-red-3);
  --vp-c-caution-soft: var(--vp-c-red-soft);
}

/**
 * Typography
 * -------------------------------------------------------------------------- */

:root {
  --vp-font-family-base:
    'Inter', -apple-system, BlinkMacSystemFont, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --vp-font-family-mono:
    ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
    'Courier New', monospace;
  font-optical-sizing: auto;
}

/* :root and [lang] have the same specificity.
   [lang] covers the case of e.g. <div lang="zh-CN"> in a non-Chinese page.
*/
/* Korean compatibility is unverified, so application of custom Inter to Korean is pending. */
[lang]:where(:lang(zh, ja)) {
  --vp-font-family-base:
    'Inter4CJK', -apple-system, BlinkMacSystemFont, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

[lang]:where(:lang(zh, ja, ko)) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    line-break: strict;
  }
}

/**
 * Shadows
 * -------------------------------------------------------------------------- */

:root {
  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --vp-shadow-5:
    0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
}

/**
 * Z-indexes
 * -------------------------------------------------------------------------- */

:root {
  --vp-z-index-footer: 10;
  --vp-z-index-local-nav: 20;
  --vp-z-index-nav: 30;
  --vp-z-index-layout-top: 40;
  --vp-z-index-backdrop: 50;
  --vp-z-index-sidebar: 60;
}

@media (min-width: 960px) {
  :root {
    --vp-z-index-sidebar: 25;
  }
}

/**
 * Layouts
 * -------------------------------------------------------------------------- */

:root {
  --vp-layout-max-width: 1440px;
}

/**
 * Component: Header Anchor
 * -------------------------------------------------------------------------- */

:root {
  --vp-header-anchor-symbol: '#';
}

/**
 * Component: Code
 * -------------------------------------------------------------------------- */

:root {
  --vp-code-line-height: 1.7;
  --vp-code-font-size: 0.875em;
  --vp-code-color: var(--vp-c-brand-1);
  --vp-code-link-color: var(--vp-c-brand-1);
  --vp-code-link-hover-color: var(--vp-c-brand-2);
  --vp-code-bg: var(--vp-c-default-soft);

  --vp-code-block-color: var(--vp-c-text-2);
  --vp-code-block-bg: var(--vp-c-bg-alt);
  --vp-code-block-divider-color: var(--vp-c-gutter);

  --vp-code-lang-color: var(--vp-c-text-2);

  --vp-code-line-highlight-color: var(--vp-c-default-soft);
  --vp-code-line-number-color: var(--vp-c-text-2);

  --vp-code-line-diff-add-color: var(--vp-c-success-soft);
  --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);

  --vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
  --vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);

  --vp-code-line-warning-color: var(--vp-c-warning-soft);
  --vp-code-line-error-color: var(--vp-c-danger-soft);

  --vp-code-copy-code-border-color: var(--vp-c-divider);
  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
  --vp-code-copy-code-active-text: var(--vp-c-text-2);
  --vp-code-copy-copied-text-content: 'Copied';

  --vp-code-tab-divider: var(--vp-code-block-divider-color);
  --vp-code-tab-text-color: var(--vp-c-text-2);
  --vp-code-tab-bg: var(--vp-code-block-bg);
  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
  --vp-code-tab-active-text-color: var(--vp-c-text-1);
  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
}

:lang(es),
:lang(pt) {
  --vp-code-copy-copied-text-content: 'Copiado';
}
:lang(fa) {
  --vp-code-copy-copied-text-content: 'کپی شد';
}
:lang(ko) {
  --vp-code-copy-copied-text-content: '복사됨';
}
:lang(ru) {
  --vp-code-copy-copied-text-content: 'Скопировано';
}
:lang(zh) {
  --vp-code-copy-copied-text-content: '已复制';
}
:lang(ja) {
  --vp-code-copy-copied-text-content: 'コピー完了';
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand-3);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-c-brand-1);

  --vp-button-alt-border: transparent;
  --vp-button-alt-text: var(--vp-c-text-1);
  --vp-button-alt-bg: var(--vp-c-default-3);
  --vp-button-alt-hover-border: transparent;
  --vp-button-alt-hover-text: var(--vp-c-text-1);
  --vp-button-alt-hover-bg: var(--vp-c-default-2);
  --vp-button-alt-active-border: transparent;
  --vp-button-alt-active-text: var(--vp-c-text-1);
  --vp-button-alt-active-bg: var(--vp-c-default-1);

  --vp-button-sponsor-border: var(--vp-c-text-2);
  --vp-button-sponsor-text: var(--vp-c-text-2);
  --vp-button-sponsor-bg: transparent;
  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
  --vp-button-sponsor-hover-bg: transparent;
  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
  --vp-button-sponsor-active-bg: transparent;
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-font-size: 14px;
  --vp-custom-block-code-font-size: 13px;

  --vp-custom-block-info-border: transparent;
  --vp-custom-block-info-text: var(--vp-c-text-1);
  --vp-custom-block-info-bg: var(--vp-c-default-soft);
  --vp-custom-block-info-code-bg: var(--vp-c-default-soft);

  --vp-custom-block-note-border: transparent;
  --vp-custom-block-note-text: var(--vp-c-text-1);
  --vp-custom-block-note-bg: var(--vp-c-default-soft);
  --vp-custom-block-note-code-bg: var(--vp-c-default-soft);

  --vp-custom-block-tip-border: transparent;
  --vp-custom-block-tip-text: var(--vp-c-text-1);
  --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
  --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);

  --vp-custom-block-important-border: transparent;
  --vp-custom-block-important-text: var(--vp-c-text-1);
  --vp-custom-block-important-bg: var(--vp-c-important-soft);
  --vp-custom-block-important-code-bg: var(--vp-c-important-soft);

  --vp-custom-block-warning-border: transparent;
  --vp-custom-block-warning-text: var(--vp-c-text-1);
  --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
  --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);

  --vp-custom-block-danger-border: transparent;
  --vp-custom-block-danger-text: var(--vp-c-text-1);
  --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
  --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);

  --vp-custom-block-caution-border: transparent;
  --vp-custom-block-caution-text: var(--vp-c-text-1);
  --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
  --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);

  --vp-custom-block-details-border: var(--vp-custom-block-info-border);
  --vp-custom-block-details-text: var(--vp-custom-block-info-text);
  --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
  --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
}

/**
 * Component: Input
 * -------------------------------------------------------------------------- */

:root {
  --vp-input-border-color: var(--vp-c-border);
  --vp-input-bg-color: var(--vp-c-bg-alt);

  --vp-input-switch-bg-color: var(--vp-c-default-soft);
}

/**
 * Component: Nav
 * -------------------------------------------------------------------------- */

:root {
  --vp-nav-height: 64px;
  --vp-nav-bg-color: var(--vp-c-bg);
  --vp-nav-screen-bg-color: var(--vp-c-bg);
  --vp-nav-logo-height: 24px;
}

.hide-nav {
  --vp-nav-height: 0px;
}

.hide-nav .VPSidebar {
  --vp-nav-height: 22px;
}

/**
 * Component: Local Nav
 * -------------------------------------------------------------------------- */

:root {
  --vp-local-nav-bg-color: var(--vp-c-bg);
}

/**
 * Component: Sidebar
 * -------------------------------------------------------------------------- */

:root {
  --vp-sidebar-width: 272px;
  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
}

/**
 * Colors Backdrop
 * -------------------------------------------------------------------------- */

:root {
  --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: var(--vp-c-brand-1);
  --vp-home-hero-name-background: transparent;

  --vp-home-hero-image-background-image: none;
  --vp-home-hero-image-filter: none;
}

/**
 * Component: Badge
 * -------------------------------------------------------------------------- */

:root {
  --vp-badge-info-border: transparent;
  --vp-badge-info-text: var(--vp-c-text-2);
  --vp-badge-info-bg: var(--vp-c-default-soft);

  --vp-badge-tip-border: transparent;
  --vp-badge-tip-text: var(--vp-c-tip-1);
  --vp-badge-tip-bg: var(--vp-c-tip-soft);

  --vp-badge-warning-border: transparent;
  --vp-badge-warning-text: var(--vp-c-warning-1);
  --vp-badge-warning-bg: var(--vp-c-warning-soft);

  --vp-badge-danger-border: transparent;
  --vp-badge-danger-text: var(--vp-c-danger-1);
  --vp-badge-danger-bg: var(--vp-c-danger-soft);
}

/**
 * Component: Carbon Ads
 * -------------------------------------------------------------------------- */

:root {
  --vp-carbon-ads-text-color: var(--vp-c-text-1);
  --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
  --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
  --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
  --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
}

/**
  * Component: Local Search
  * -------------------------------------------------------------------------- */

:root {
  --vp-local-search-bg: var(--vp-c-bg);
  --vp-local-search-result-bg: var(--vp-c-bg);
  --vp-local-search-result-border: var(--vp-c-divider);
  --vp-local-search-result-selected-bg: var(--vp-c-bg);
  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
  --vp-local-search-highlight-bg: var(--vp-c-brand-1);
  --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
}
.no-title .custom-block-title { display: none; }

.vp-doc .custom-block { border-radius: 8px; padding: 16px; margin: 16px 0; border: none; }

.vp-doc .custom-block .custom-block-title { font-weight: 600; margin-bottom: 8px; line-height: 1.4; }

.vp-doc .custom-block p { color: var(--mate-text-body); margin: 0; }

.vp-doc .custom-block.info { background-color: var(--mate-signal-info-light); }
.vp-doc .custom-block.info .custom-block-title { color: var(--mate-text-info); }

.vp-doc .custom-block.warning { background-color: var(--mate-signal-warning-light); }
.vp-doc .custom-block.warning .custom-block-title { color: var(--mate-text-warning); }

.vp-doc .custom-block.danger { background-color: var(--mate-signal-danger-light); }
.vp-doc .custom-block.danger .custom-block-title { color: var(--mate-text-danger); }

.vp-doc .custom-block.tip { background-color: var(--mate-signal-success-light); }
.vp-doc .custom-block.tip .custom-block-title { color: var(--mate-text-success); }

.vp-doc .custom-block.details { background-color: var(--mate-signal-neutral-light); border: 1px solid var(--mate-border-base); }
.vp-doc .custom-block.details .custom-block-title { color: var(--mate-text-neutral); }

.info.custom-block {
  background-color: var(--mate-illustrations-illustration-background);
}




:root {
  --footer-background: var(--mate-background-highlighted);

  --vp-c-bg-soft: var(--mate-background-highlighted);


  --vp-c-divider: var(--mate-border-light);
  --vp-c-border: var(--mate-border-base);
  --vp-c-gutter: var(--mate-border-base);


  --vp-c-brand-1: var(--mate-text-primary);
  --vp-c-brand-2: var(--mate-text-secondary);
  --vp-c-brand-3: var(--mate-text-tertiary);


  --vp-code-bg: var(--mate-background-highlighted) !important;
  --vp-sidebar-bg-color: var(--mate-background-base);
}


.outline-marker {
  display: none;
}


.code-examples {
  margin: 2rem 0;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  overflow: hidden;
}

.code-examples .tab-panel {
  padding: 2% 5% !important;
}

.VPSidebar, .VPCustomSidebar {
  border: solid;
  border-color: var(--mate-border-light);
  border-width: 0 1px 0 0;
}

.VPContent footer {
  margin-left: 0;
}

@media (min-width: 960px) {
  .VPLayout > footer {
    padding-left: var(--vp-sidebar-width, 272px);
  }
}

.VPSidebarItem * {
  margin: 0;
}

thead:has(tr > th:empty) {
  display: none;
}

.divider-line {
  background-color: var(--mate-border-light) !important;
}

.VPLocalNav {
  border-bottom: 1px solid var(--mate-border-light) !important;
}

.VPNavBarSearchButton {
  background-color: var(--mate-background-base) !important;
  border: solid;
  border-color: var(--mate-border-light);
  border-width: 1px;
}

.vp-doc th {
  background-color: var(--mate-background-highlighted);
}

.vp-doc tr:nth-child(2n) {
  background-color: var(--mate-background-base);
}

.vp-doc tr {
  background-color: var(--mate-background-base);
}

.badge-new {
  margin-left: 4px;
  padding: 2px 6px;
  font-size: 0.7rem;
  border-radius: 999px;
  background: #ff3e3e;
  color: white;
  font-weight: bold;

  &::after {
    content: 'Neu';
  }
}
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #24292e;
  background: #ffffff
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}
.home-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.home-feature-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vp-c-divider);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.home-feature-item:hover {
    border-color: var(--vp-c-brand-1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.home-feature-item img {
    width: 100%;
    height: auto;
    display: block;
}
.home-feature-body {
    padding: 16px;
}
.home-feature-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--vp-c-text-1);
}
.home-feature-details {
    font-size: 14px;
    margin: 0;
    color: var(--vp-c-text-2);
    line-height: 1.5;
}
@media (max-width: 768px) {
.home-features-grid {
      grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.home-features-grid {
      grid-template-columns: 1fr;
}
}
.VPHero {
.container {
      background-image: url("/images/home/background-mate.svg");
      --vp-hero-header-text-color: var(--mate-dark-text-heading); 
      --vp-hero-header-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      --vp-hero-name-clip-text-color: var(--mate-dark-text-heading); /* Not working!! */
      --vp-hero-name-clip-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      --vp-hero-tagline-text-color: var(--mate-dark-text-heading); 
      --vp-hero-tagline-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      background-size: cover;
      background-position: center;
      padding: 5%;
.main {
h1 {
span.text {
            color: var(--vp-hero-header-text-color);
            text-shadow: var(--vp-hero-header-text-shadow);
}
span.name.clip {
            --vp-home-hero-name-color: var(--vp-hero-name-clip-text-color);
            text-shadow:  var(--vp-hero-name-clip-text-shadow);
}
}
p.tagline {
          color: var(--vp-hero-tagline-text-color);
          text-shadow:  var(--vp-hero-tagline-text-shadow);
}
}
}
}

.color-token {
    width: 200px;
    height: 20px;
}
.color-token {
    --mate-red-10: #fff1f1;
    --mate-red-20: #ffd7d9;
    --mate-red-30: #ffb3b8;
    --mate-red-40: #ff8389;
    --mate-red-50: #fa4d56;
    --mate-red-60: #e22c36;
    --mate-red-70: #a2191f;
    --mate-red-80: #750e13;
    --mate-red-90: #520408;
    --mate-red-100: #2d0709;
    --mate-magenta-10: #fff0f7;
    --mate-magenta-20: #ffd6e8;
    --mate-magenta-30: #ffafd2;
    --mate-magenta-40: #ff7eb6;
    --mate-magenta-50: #ee5396;
    --mate-magenta-60: #d02670;
    --mate-magenta-70: #9f1853;
    --mate-magenta-80: #740937;
    --mate-magenta-90: #510224;
    --mate-magenta-100: #2a0a18;
    --mate-purple-10: #f6f2ff;
    --mate-purple-20: #e8daff;
    --mate-purple-30: #d4bbff;
    --mate-purple-40: #be95ff;
    --mate-purple-50: #a56eff;
    --mate-purple-60: #8a3ffc;
    --mate-purple-70: #6929c4;
    --mate-purple-80: #491d8b;
    --mate-purple-90: #31135e;
    --mate-purple-100: #1c0f30;
    --mate-blue-10: #e6f0fc;
    --mate-blue-20: #c2dbf7;
    --mate-blue-30: #91bff1;
    --mate-blue-40: #5ea1ea;
    --mate-blue-50: #2e84e4;
    --mate-blue-60: #276ae1;
    --mate-blue-70: #0059bd;
    --mate-blue-80: #004b9e;
    --mate-blue-90: #00336b;
    --mate-blue-100: #001e40;
    --mate-cyan-10: #e6f1f6;
    --mate-cyan-20: #c2dee9;
    --mate-cyan-30: #91c4d8;
    --mate-cyan-40: #5ea9c6;
    --mate-cyan-50: #2e8fb5;
    --mate-cyan-60: #0076a5;
    --mate-cyan-70: #00648c;
    --mate-cyan-80: #005475;
    --mate-cyan-90: #00354a;
    --mate-cyan-100: #001b26;
    --mate-teal-10: #d9fbfb;
    --mate-teal-20: #9ef0f0;
    --mate-teal-30: #3ddbd9;
    --mate-teal-40: #08bdba;
    --mate-teal-50: #009d9a;
    --mate-teal-60: #007d79;
    --mate-teal-70: #005d5d;
    --mate-teal-80: #004144;
    --mate-teal-90: #022b30;
    --mate-teal-100: #081a1c;
    --mate-green-10: #defbe6;
    --mate-green-20: #a7f0ba;
    --mate-green-30: #6fdc8c;
    --mate-green-40: #42be65;
    --mate-green-50: #24a148;
    --mate-green-60: #1d873c;
    --mate-green-70: #0e6027;
    --mate-green-80: #044317;
    --mate-green-90: #022d0d;
    --mate-green-100: #071908;
    --mate-orange-10: #fff2e8;
    --mate-orange-20: #ffd9be;
    --mate-orange-30: #ffb784;
    --mate-orange-40: #ff832b;
    --mate-orange-50: #eb6200;
    --mate-orange-60: #c75300;
    --mate-orange-70: #8a3800;
    --mate-orange-80: #5e2900;
    --mate-orange-90: #3e1a00;
    --mate-orange-100: #231000;
    --mate-yellow-10: #fcf4d6;
    --mate-yellow-20: #fddc69;
    --mate-yellow-30: #f1c21b;
    --mate-yellow-40: #d2a106;
    --mate-yellow-50: #b28600;
    --mate-yellow-60: #8e6a00;
    --mate-yellow-70: #684e00;
    --mate-yellow-80: #483700;
    --mate-yellow-90: #302400;
    --mate-yellow-100: #1c1500;
    --mate-gray-10: #f2f4f8;
    --mate-gray-20: #dde1e6;
    --mate-gray-30: #c1c7cd;
    --mate-gray-40: #a2a9b0;
    --mate-gray-50: #878d96;
    --mate-gray-60: #6e7881;
    --mate-gray-70: #4d5358;
    --mate-gray-80: #343a3f;
    --mate-gray-90: #21272a;
    --mate-gray-100: #111518;

    --mate-white-and-black-white: #ffffff;
    --mate-white-and-black-black: #000000;
    --mate-light-components-calendar-event-background-magenta: #D0267024;
    --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-light-components-calendar-event-background-yellow: #F1C21B24;
    --mate-light-components-calendar-event-background-cyan: #0076A51F;
    --mate-light-components-calendar-event-background-teal: #007D791F;
    --mate-light-components-date-picker-gradient-background-visible: #001F420D;
    --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
    --mate-light-components-grid-border: #CCD2D9;
    --mate-light-components-grid-background-selected: #E5F1FF;
    --mate-light-components-grid-background-hover: #E5F1FF;
    --mate-light-components-grid-background-edited: #FCF3D1;
    --mate-light-components-grid-background-danger: #FDE8E9;
    --mate-light-components-akdb-logo-1: #00A1E0;
    --mate-light-components-akdb-logo-2: #003979;
    --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
    --mate-light-shades-base-contrast-5pct: #f2f3f5;
    --mate-light-shades-contrast-5pct: #001F420d;
    --mate-light-shades-contrast-10pct: #001F421a;
    --mate-light-shades-contrast-20pct: #001F4233;
    --mate-light-shades-contrast-30pct: #001F424d;
    --mate-light-shades-contrast-40pct: #001F4260;
    --mate-light-shades-contrast-50pct: #001F4282;
    --mate-light-shades-contrast-60pct: #001F429c;
    --mate-light-shades-contrast-70pct: #001F42b3;
    --mate-light-shades-contrast-80pct: #001F42c0;
    --mate-light-shades-contrast-90pct: #001F42e6;
    --mate-light-shades-shade-10pct: #001F421a;
    --mate-light-shades-shade-20pct: #001F4233;
    --mate-light-shades-shade-30pct: #001F424d;
    --mate-light-shades-shade-40pct: #001F4260;
    --mate-light-shades-shade-50pct: #001F4282;
    --mate-light-signal-danger-light: #e7131d1a;
    --mate-light-signal-info-light: #3392ff21;
    --mate-light-signal-success-light: #1688381a;
    --mate-light-signal-warning-light: #ff6a0038;
    --mate-light-signal-primary-light: #3392ff21;
    --mate-dark-components-calendar-event-background-magenta: #D0267024;
    --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
    --mate-dark-components-calendar-event-background-cyan: #0076A51F;
    --mate-dark-components-calendar-event-background-teal: #007D791F;
    --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
    --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
    --mate-dark-components-grid-border: #484F54;
    --mate-dark-components-grid-background-selected: #243546;
    --mate-dark-components-grid-background-hover: #243546;
    --mate-dark-components-grid-background-edited: #4A4627;
    --mate-dark-components-grid-background-danger: #3C2D31;
    --mate-dark-components-other-stepper-gradient-background: #21272A00;
    --mate-dark-components-other-global-header-background: #353B3F;
    --mate-dark-shades-base-contrast-5pct: #282e32;
    --mate-dark-shades-contrast-5pct: #e8f1fc09;
    --mate-dark-shades-contrast-10pct: #e8f1fc1a;
    --mate-dark-shades-contrast-20pct: #e8f1fc33;
    --mate-dark-shades-contrast-30pct: #e8f1fc4d;
    --mate-dark-shades-contrast-40pct: #e8f1fc60;
    --mate-dark-shades-contrast-50pct: #e8f1fc80;
    --mate-dark-shades-contrast-60pct: #e8f1fc9c;
    --mate-dark-shades-contrast-70pct: #e8f1fcb3;
    --mate-dark-shades-contrast-80pct: #e8f1fcc0;
    --mate-dark-shades-contrast-90pct: #e8f1fce6;
    --mate-dark-shades-shade-10pct: #05050512;
    --mate-dark-shades-shade-20pct: #090a0b3b;
    --mate-dark-shades-shade-30pct: #0d0f1152;
    --mate-dark-shades-shade-40pct: #11141869;
    --mate-dark-shades-shade-50pct: #14191f80;
    --mate-dark-signal-danger-light: #e7555d24;
    --mate-dark-signal-info-light: #3392ff21;
    --mate-dark-signal-success-light: #0ff5541a;
    --mate-dark-signal-warning-light: #ff6a0024;
    --mate-dark-signal-primary-light: #3392ff38;
    --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
    --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
    --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
    --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
    --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
    --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
    --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
    --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
    --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
    --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
    --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
    --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
    --mate-light-components-x-range-chart-2: var(--mate-purple-100);
    --mate-light-components-x-range-chart-3: var(--mate-teal-100);
    --mate-light-components-x-range-chart-4: var(--mate-orange-100);
    --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
    --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
    --mate-light-components-x-range-chart-7: var(--mate-green-100);
    --mate-light-components-x-range-chart-8: var(--mate-gray-100);
    --mate-light-components-x-range-chart-9: var(--mate-blue-100);
    --mate-light-components-x-range-chart-10: var(--mate-red-100);
    --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
    --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
    --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-illustrations-illustration-background: var(--mate-gray-10);
    --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
    --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
    --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
    --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
    --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
    --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
    --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
    --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
    --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
    --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
    --mate-light-shades-base: var(--mate-white-and-black-white);
    --mate-light-shades-contrast-100pct: var(--mate-blue-100);
    --mate-light-signal-danger: var(--mate-red-60);
    --mate-light-signal-info: var(--mate-blue-60);
    --mate-light-signal-success: var(--mate-green-60);
    --mate-light-signal-warning: var(--mate-orange-60);
    --mate-light-signal-primary: var(--mate-blue-60);
    --mate-light-signal-neutral: var(--mate-gray-60);
    --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
    --mate-light-icon-danger: var(--mate-red-60);
    --mate-light-icon-success: var(--mate-green-60);
    --mate-light-icon-warning: var(--mate-orange-60);
    --mate-light-icon-info: var(--mate-blue-60);
    --mate-light-icon-neutral: var(--mate-gray-60);
    --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
    --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-icon-interactive-active: var(--mate-blue-70);
    --mate-light-icon-interactive-selected: var(--mate-blue-70);
    --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
    --mate-light-interactive-focus: var(--mate-blue-100);
    --mate-light-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-interactive-danger-hover: var(--mate-red-70);
    --mate-light-interactive-danger-active: var(--mate-red-80);
    --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-interactive-hover: var(--mate-blue-70);
    --mate-light-interactive-active: var(--mate-blue-80);
    --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
    --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
    --mate-light-data-1: var(--mate-magenta-60);
    --mate-light-data-2: var(--mate-purple-60);
    --mate-light-data-3: var(--mate-teal-60);
    --mate-light-data-4: var(--mate-orange-60);
    --mate-light-data-5: var(--mate-cyan-60);
    --mate-light-data-6: var(--mate-yellow-60);
    --mate-light-data-7: var(--mate-green-60);
    --mate-light-data-8: var(--mate-gray-60);
    --mate-light-data-9: var(--mate-blue-60);
    --mate-light-data-10: var(--mate-red-60);
    --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
    --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
    --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
    --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-text-danger: var(--mate-red-70);
    --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
    --mate-light-text-info: var(--mate-blue-70);
    --mate-light-text-info-contrast: var(--mate-white-and-black-white);
    --mate-light-text-success: var(--mate-green-70);
    --mate-light-text-success-contrast: var(--mate-white-and-black-white);
    --mate-light-text-warning: var(--mate-orange-70);
    --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
    --mate-light-text-primary: var(--mate-blue-70);
    --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
    --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
    --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
    --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
    --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
    --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
    --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
    --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
    --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
    --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
    --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
    --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
    --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
    --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
    --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
    --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
    --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
    --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
    --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
    --mate-dark-components-x-range-chart-7: var(--mate-green-10);
    --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
    --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
    --mate-dark-components-x-range-chart-10: var(--mate-red-10);
    --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
    --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
    --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
    --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
    --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
    --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
    --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
    --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
    --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
    --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
    --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
    --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
    --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
    --mate-dark-shades-base: var(--mate-gray-90);
    --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
    --mate-dark-signal-danger: var(--mate-red-50);
    --mate-dark-signal-info: var(--mate-blue-50);
    --mate-dark-signal-success: var(--mate-green-50);
    --mate-dark-signal-warning: var(--mate-orange-50);
    --mate-dark-signal-primary: var(--mate-blue-50);
    --mate-dark-signal-neutral: var(--mate-gray-50);
    --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-icon-danger: var(--mate-red-50);
    --mate-dark-icon-success: var(--mate-green-50);
    --mate-dark-icon-warning: var(--mate-orange-50);
    --mate-dark-icon-info: var(--mate-blue-50);
    --mate-dark-icon-neutral: var(--mate-gray-50);
    --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-icon-interactive-active: var(--mate-blue-30);
    --mate-dark-icon-interactive-selected: var(--mate-blue-30);
    --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
    --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-interactive-focus: var(--mate-blue-10);
    --mate-dark-interactive-contrast: var(--mate-gray-100);
    --mate-dark-interactive-danger-hover: var(--mate-red-40);
    --mate-dark-interactive-danger-active: var(--mate-red-30);
    --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-interactive-hover: var(--mate-blue-40);
    --mate-dark-interactive-active: var(--mate-blue-30);
    --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
    --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
    --mate-dark-data-1: var(--mate-magenta-50);
    --mate-dark-data-2: var(--mate-purple-50);
    --mate-dark-data-3: var(--mate-teal-50);
    --mate-dark-data-4: var(--mate-orange-50);
    --mate-dark-data-5: var(--mate-cyan-50);
    --mate-dark-data-6: var(--mate-yellow-50);
    --mate-dark-data-7: var(--mate-green-50);
    --mate-dark-data-8: var(--mate-gray-50);
    --mate-dark-data-9: var(--mate-blue-50);
    --mate-dark-data-10: var(--mate-red-50);
    --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-text-danger: var(--mate-red-30);
    --mate-dark-text-danger-contrast: var(--mate-gray-100);
    --mate-dark-text-info: var(--mate-blue-30);
    --mate-dark-text-info-contrast: var(--mate-gray-100);
    --mate-dark-text-success: var(--mate-green-30);
    --mate-dark-text-success-contrast: var(--mate-gray-100);
    --mate-dark-text-warning: var(--mate-orange-30);
    --mate-dark-text-warning-contrast: var(--mate-gray-100);
    --mate-dark-text-primary: var(--mate-blue-30);
    --mate-dark-text-primary-contrast: var(--mate-gray-100);
    --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
    --mate-dark-text-neutral-contrast: var(--mate-gray-100);
    --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
    --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
    --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
    --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
    --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
    --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
    --mate-light-components-field-background: var(--mate-light-shades-base);
    --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
    --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
    --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
    --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
    --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
    --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
    --mate-light-interactive-enabled: var(--mate-light-signal-primary);
    --mate-light-interactive-selected: var(--mate-light-signal-primary);
    --mate-light-background-base: var(--mate-light-shades-base);
    --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
    --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
    --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
    --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
    --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
    --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
    --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
    --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
    --mate-dark-components-field-background: var(--mate-dark-shades-base);
    --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
    --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
    --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
    --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
    --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
    --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
    --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
    --mate-dark-background-base: var(--mate-dark-shades-base);
    --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
    --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}

.material-icons {
    --icon-size: var(--mate-desktop-icon-sizing-md);
    width: var(--icon-size);
    height: var(--icon-size);
    font-size: var(--icon-size);
    color: var(--mate-light-icon-not-interactive);
    background-color: white;
}
.material-icons {
    --mate-desktop-icon-sizing-sm: 1rem;
    --mate-desktop-icon-sizing-sm-md: 1.25rem;
    --mate-desktop-icon-sizing-md: 1.5rem;
    --mate-desktop-icon-sizing-lg: 2rem;

    --mate-red-10: #fff1f1;
    --mate-red-20: #ffd7d9;
    --mate-red-30: #ffb3b8;
    --mate-red-40: #ff8389;
    --mate-red-50: #fa4d56;
    --mate-red-60: #e22c36;
    --mate-red-70: #a2191f;
    --mate-red-80: #750e13;
    --mate-red-90: #520408;
    --mate-red-100: #2d0709;
    --mate-magenta-10: #fff0f7;
    --mate-magenta-20: #ffd6e8;
    --mate-magenta-30: #ffafd2;
    --mate-magenta-40: #ff7eb6;
    --mate-magenta-50: #ee5396;
    --mate-magenta-60: #d02670;
    --mate-magenta-70: #9f1853;
    --mate-magenta-80: #740937;
    --mate-magenta-90: #510224;
    --mate-magenta-100: #2a0a18;
    --mate-purple-10: #f6f2ff;
    --mate-purple-20: #e8daff;
    --mate-purple-30: #d4bbff;
    --mate-purple-40: #be95ff;
    --mate-purple-50: #a56eff;
    --mate-purple-60: #8a3ffc;
    --mate-purple-70: #6929c4;
    --mate-purple-80: #491d8b;
    --mate-purple-90: #31135e;
    --mate-purple-100: #1c0f30;
    --mate-blue-10: #e6f0fc;
    --mate-blue-20: #c2dbf7;
    --mate-blue-30: #91bff1;
    --mate-blue-40: #5ea1ea;
    --mate-blue-50: #2e84e4;
    --mate-blue-60: #276ae1;
    --mate-blue-70: #0059bd;
    --mate-blue-80: #004b9e;
    --mate-blue-90: #00336b;
    --mate-blue-100: #001e40;
    --mate-cyan-10: #e6f1f6;
    --mate-cyan-20: #c2dee9;
    --mate-cyan-30: #91c4d8;
    --mate-cyan-40: #5ea9c6;
    --mate-cyan-50: #2e8fb5;
    --mate-cyan-60: #0076a5;
    --mate-cyan-70: #00648c;
    --mate-cyan-80: #005475;
    --mate-cyan-90: #00354a;
    --mate-cyan-100: #001b26;
    --mate-teal-10: #d9fbfb;
    --mate-teal-20: #9ef0f0;
    --mate-teal-30: #3ddbd9;
    --mate-teal-40: #08bdba;
    --mate-teal-50: #009d9a;
    --mate-teal-60: #007d79;
    --mate-teal-70: #005d5d;
    --mate-teal-80: #004144;
    --mate-teal-90: #022b30;
    --mate-teal-100: #081a1c;
    --mate-green-10: #defbe6;
    --mate-green-20: #a7f0ba;
    --mate-green-30: #6fdc8c;
    --mate-green-40: #42be65;
    --mate-green-50: #24a148;
    --mate-green-60: #1d873c;
    --mate-green-70: #0e6027;
    --mate-green-80: #044317;
    --mate-green-90: #022d0d;
    --mate-green-100: #071908;
    --mate-orange-10: #fff2e8;
    --mate-orange-20: #ffd9be;
    --mate-orange-30: #ffb784;
    --mate-orange-40: #ff832b;
    --mate-orange-50: #eb6200;
    --mate-orange-60: #c75300;
    --mate-orange-70: #8a3800;
    --mate-orange-80: #5e2900;
    --mate-orange-90: #3e1a00;
    --mate-orange-100: #231000;
    --mate-yellow-10: #fcf4d6;
    --mate-yellow-20: #fddc69;
    --mate-yellow-30: #f1c21b;
    --mate-yellow-40: #d2a106;
    --mate-yellow-50: #b28600;
    --mate-yellow-60: #8e6a00;
    --mate-yellow-70: #684e00;
    --mate-yellow-80: #483700;
    --mate-yellow-90: #302400;
    --mate-yellow-100: #1c1500;
    --mate-gray-10: #f2f4f8;
    --mate-gray-20: #dde1e6;
    --mate-gray-30: #c1c7cd;
    --mate-gray-40: #a2a9b0;
    --mate-gray-50: #878d96;
    --mate-gray-60: #6e7881;
    --mate-gray-70: #4d5358;
    --mate-gray-80: #343a3f;
    --mate-gray-90: #21272a;
    --mate-gray-100: #111518;

    --mate-white-and-black-white: #ffffff;
    --mate-white-and-black-black: #000000;
    --mate-light-components-calendar-event-background-magenta: #D0267024;
    --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-light-components-calendar-event-background-yellow: #F1C21B24;
    --mate-light-components-calendar-event-background-cyan: #0076A51F;
    --mate-light-components-calendar-event-background-teal: #007D791F;
    --mate-light-components-date-picker-gradient-background-visible: #001F420D;
    --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
    --mate-light-components-grid-border: #CCD2D9;
    --mate-light-components-grid-background-selected: #E5F1FF;
    --mate-light-components-grid-background-hover: #E5F1FF;
    --mate-light-components-grid-background-edited: #FCF3D1;
    --mate-light-components-grid-background-danger: #FDE8E9;
    --mate-light-components-akdb-logo-1: #00A1E0;
    --mate-light-components-akdb-logo-2: #003979;
    --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
    --mate-light-shades-base-contrast-5pct: #f2f3f5;
    --mate-light-shades-contrast-5pct: #001F420d;
    --mate-light-shades-contrast-10pct: #001F421a;
    --mate-light-shades-contrast-20pct: #001F4233;
    --mate-light-shades-contrast-30pct: #001F424d;
    --mate-light-shades-contrast-40pct: #001F4260;
    --mate-light-shades-contrast-50pct: #001F4282;
    --mate-light-shades-contrast-60pct: #001F429c;
    --mate-light-shades-contrast-70pct: #001F42b3;
    --mate-light-shades-contrast-80pct: #001F42c0;
    --mate-light-shades-contrast-90pct: #001F42e6;
    --mate-light-shades-shade-10pct: #001F421a;
    --mate-light-shades-shade-20pct: #001F4233;
    --mate-light-shades-shade-30pct: #001F424d;
    --mate-light-shades-shade-40pct: #001F4260;
    --mate-light-shades-shade-50pct: #001F4282;
    --mate-light-signal-danger-light: #e7131d1a;
    --mate-light-signal-info-light: #3392ff21;
    --mate-light-signal-success-light: #1688381a;
    --mate-light-signal-warning-light: #ff6a0038;
    --mate-light-signal-primary-light: #3392ff21;
    --mate-dark-components-calendar-event-background-magenta: #D0267024;
    --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
    --mate-dark-components-calendar-event-background-cyan: #0076A51F;
    --mate-dark-components-calendar-event-background-teal: #007D791F;
    --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
    --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
    --mate-dark-components-grid-border: #484F54;
    --mate-dark-components-grid-background-selected: #243546;
    --mate-dark-components-grid-background-hover: #243546;
    --mate-dark-components-grid-background-edited: #4A4627;
    --mate-dark-components-grid-background-danger: #3C2D31;
    --mate-dark-components-other-stepper-gradient-background: #21272A00;
    --mate-dark-components-other-global-header-background: #353B3F;
    --mate-dark-shades-base-contrast-5pct: #282e32;
    --mate-dark-shades-contrast-5pct: #e8f1fc09;
    --mate-dark-shades-contrast-10pct: #e8f1fc1a;
    --mate-dark-shades-contrast-20pct: #e8f1fc33;
    --mate-dark-shades-contrast-30pct: #e8f1fc4d;
    --mate-dark-shades-contrast-40pct: #e8f1fc60;
    --mate-dark-shades-contrast-50pct: #e8f1fc80;
    --mate-dark-shades-contrast-60pct: #e8f1fc9c;
    --mate-dark-shades-contrast-70pct: #e8f1fcb3;
    --mate-dark-shades-contrast-80pct: #e8f1fcc0;
    --mate-dark-shades-contrast-90pct: #e8f1fce6;
    --mate-dark-shades-shade-10pct: #05050512;
    --mate-dark-shades-shade-20pct: #090a0b3b;
    --mate-dark-shades-shade-30pct: #0d0f1152;
    --mate-dark-shades-shade-40pct: #11141869;
    --mate-dark-shades-shade-50pct: #14191f80;
    --mate-dark-signal-danger-light: #e7555d24;
    --mate-dark-signal-info-light: #3392ff21;
    --mate-dark-signal-success-light: #0ff5541a;
    --mate-dark-signal-warning-light: #ff6a0024;
    --mate-dark-signal-primary-light: #3392ff38;
    --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
    --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
    --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
    --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
    --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
    --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
    --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
    --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
    --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
    --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
    --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
    --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
    --mate-light-components-x-range-chart-2: var(--mate-purple-100);
    --mate-light-components-x-range-chart-3: var(--mate-teal-100);
    --mate-light-components-x-range-chart-4: var(--mate-orange-100);
    --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
    --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
    --mate-light-components-x-range-chart-7: var(--mate-green-100);
    --mate-light-components-x-range-chart-8: var(--mate-gray-100);
    --mate-light-components-x-range-chart-9: var(--mate-blue-100);
    --mate-light-components-x-range-chart-10: var(--mate-red-100);
    --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
    --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
    --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-illustrations-illustration-background: var(--mate-gray-10);
    --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
    --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
    --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
    --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
    --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
    --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
    --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
    --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
    --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
    --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
    --mate-light-shades-base: var(--mate-white-and-black-white);
    --mate-light-shades-contrast-100pct: var(--mate-blue-100);
    --mate-light-signal-danger: var(--mate-red-60);
    --mate-light-signal-info: var(--mate-blue-60);
    --mate-light-signal-success: var(--mate-green-60);
    --mate-light-signal-warning: var(--mate-orange-60);
    --mate-light-signal-primary: var(--mate-blue-60);
    --mate-light-signal-neutral: var(--mate-gray-60);
    --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
    --mate-light-icon-danger: var(--mate-red-60);
    --mate-light-icon-success: var(--mate-green-60);
    --mate-light-icon-warning: var(--mate-orange-60);
    --mate-light-icon-info: var(--mate-blue-60);
    --mate-light-icon-neutral: var(--mate-gray-60);
    --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
    --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-icon-interactive-active: var(--mate-blue-70);
    --mate-light-icon-interactive-selected: var(--mate-blue-70);
    --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
    --mate-light-interactive-focus: var(--mate-blue-100);
    --mate-light-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-interactive-danger-hover: var(--mate-red-70);
    --mate-light-interactive-danger-active: var(--mate-red-80);
    --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-interactive-hover: var(--mate-blue-70);
    --mate-light-interactive-active: var(--mate-blue-80);
    --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
    --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
    --mate-light-data-1: var(--mate-magenta-60);
    --mate-light-data-2: var(--mate-purple-60);
    --mate-light-data-3: var(--mate-teal-60);
    --mate-light-data-4: var(--mate-orange-60);
    --mate-light-data-5: var(--mate-cyan-60);
    --mate-light-data-6: var(--mate-yellow-60);
    --mate-light-data-7: var(--mate-green-60);
    --mate-light-data-8: var(--mate-gray-60);
    --mate-light-data-9: var(--mate-blue-60);
    --mate-light-data-10: var(--mate-red-60);
    --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
    --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
    --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
    --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-text-danger: var(--mate-red-70);
    --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
    --mate-light-text-info: var(--mate-blue-70);
    --mate-light-text-info-contrast: var(--mate-white-and-black-white);
    --mate-light-text-success: var(--mate-green-70);
    --mate-light-text-success-contrast: var(--mate-white-and-black-white);
    --mate-light-text-warning: var(--mate-orange-70);
    --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
    --mate-light-text-primary: var(--mate-blue-70);
    --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
    --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
    --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
    --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
    --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
    --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
    --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
    --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
    --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
    --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
    --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
    --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
    --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
    --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
    --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
    --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
    --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
    --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
    --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
    --mate-dark-components-x-range-chart-7: var(--mate-green-10);
    --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
    --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
    --mate-dark-components-x-range-chart-10: var(--mate-red-10);
    --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
    --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
    --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
    --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
    --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
    --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
    --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
    --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
    --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
    --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
    --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
    --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
    --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
    --mate-dark-shades-base: var(--mate-gray-90);
    --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
    --mate-dark-signal-danger: var(--mate-red-50);
    --mate-dark-signal-info: var(--mate-blue-50);
    --mate-dark-signal-success: var(--mate-green-50);
    --mate-dark-signal-warning: var(--mate-orange-50);
    --mate-dark-signal-primary: var(--mate-blue-50);
    --mate-dark-signal-neutral: var(--mate-gray-50);
    --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-icon-danger: var(--mate-red-50);
    --mate-dark-icon-success: var(--mate-green-50);
    --mate-dark-icon-warning: var(--mate-orange-50);
    --mate-dark-icon-info: var(--mate-blue-50);
    --mate-dark-icon-neutral: var(--mate-gray-50);
    --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-icon-interactive-active: var(--mate-blue-30);
    --mate-dark-icon-interactive-selected: var(--mate-blue-30);
    --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
    --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-interactive-focus: var(--mate-blue-10);
    --mate-dark-interactive-contrast: var(--mate-gray-100);
    --mate-dark-interactive-danger-hover: var(--mate-red-40);
    --mate-dark-interactive-danger-active: var(--mate-red-30);
    --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-interactive-hover: var(--mate-blue-40);
    --mate-dark-interactive-active: var(--mate-blue-30);
    --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
    --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
    --mate-dark-data-1: var(--mate-magenta-50);
    --mate-dark-data-2: var(--mate-purple-50);
    --mate-dark-data-3: var(--mate-teal-50);
    --mate-dark-data-4: var(--mate-orange-50);
    --mate-dark-data-5: var(--mate-cyan-50);
    --mate-dark-data-6: var(--mate-yellow-50);
    --mate-dark-data-7: var(--mate-green-50);
    --mate-dark-data-8: var(--mate-gray-50);
    --mate-dark-data-9: var(--mate-blue-50);
    --mate-dark-data-10: var(--mate-red-50);
    --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-text-danger: var(--mate-red-30);
    --mate-dark-text-danger-contrast: var(--mate-gray-100);
    --mate-dark-text-info: var(--mate-blue-30);
    --mate-dark-text-info-contrast: var(--mate-gray-100);
    --mate-dark-text-success: var(--mate-green-30);
    --mate-dark-text-success-contrast: var(--mate-gray-100);
    --mate-dark-text-warning: var(--mate-orange-30);
    --mate-dark-text-warning-contrast: var(--mate-gray-100);
    --mate-dark-text-primary: var(--mate-blue-30);
    --mate-dark-text-primary-contrast: var(--mate-gray-100);
    --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
    --mate-dark-text-neutral-contrast: var(--mate-gray-100);
    --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
    --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
    --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
    --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
    --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
    --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
    --mate-light-components-field-background: var(--mate-light-shades-base);
    --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
    --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
    --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
    --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
    --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
    --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
    --mate-light-interactive-enabled: var(--mate-light-signal-primary);
    --mate-light-interactive-selected: var(--mate-light-signal-primary);
    --mate-light-background-base: var(--mate-light-shades-base);
    --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
    --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
    --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
    --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
    --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
    --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
    --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
    --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
    --mate-dark-components-field-background: var(--mate-dark-shades-base);
    --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
    --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
    --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
    --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
    --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
    --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
    --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
    --mate-dark-background-base: var(--mate-dark-shades-base);
    --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
    --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}

.color-token {
    width: 200px;
    height: 20px;
}
.color-token {
    --mate-red-10: #fff1f1;
    --mate-red-20: #ffd7d9;
    --mate-red-30: #ffb3b8;
    --mate-red-40: #ff8389;
    --mate-red-50: #fa4d56;
    --mate-red-60: #e22c36;
    --mate-red-70: #a2191f;
    --mate-red-80: #750e13;
    --mate-red-90: #520408;
    --mate-red-100: #2d0709;
    --mate-magenta-10: #fff0f7;
    --mate-magenta-20: #ffd6e8;
    --mate-magenta-30: #ffafd2;
    --mate-magenta-40: #ff7eb6;
    --mate-magenta-50: #ee5396;
    --mate-magenta-60: #d02670;
    --mate-magenta-70: #9f1853;
    --mate-magenta-80: #740937;
    --mate-magenta-90: #510224;
    --mate-magenta-100: #2a0a18;
    --mate-purple-10: #f6f2ff;
    --mate-purple-20: #e8daff;
    --mate-purple-30: #d4bbff;
    --mate-purple-40: #be95ff;
    --mate-purple-50: #a56eff;
    --mate-purple-60: #8a3ffc;
    --mate-purple-70: #6929c4;
    --mate-purple-80: #491d8b;
    --mate-purple-90: #31135e;
    --mate-purple-100: #1c0f30;
    --mate-blue-10: #e6f0fc;
    --mate-blue-20: #c2dbf7;
    --mate-blue-30: #91bff1;
    --mate-blue-40: #5ea1ea;
    --mate-blue-50: #2e84e4;
    --mate-blue-60: #276ae1;
    --mate-blue-70: #0059bd;
    --mate-blue-80: #004b9e;
    --mate-blue-90: #00336b;
    --mate-blue-100: #001e40;
    --mate-cyan-10: #e6f1f6;
    --mate-cyan-20: #c2dee9;
    --mate-cyan-30: #91c4d8;
    --mate-cyan-40: #5ea9c6;
    --mate-cyan-50: #2e8fb5;
    --mate-cyan-60: #0076a5;
    --mate-cyan-70: #00648c;
    --mate-cyan-80: #005475;
    --mate-cyan-90: #00354a;
    --mate-cyan-100: #001b26;
    --mate-teal-10: #d9fbfb;
    --mate-teal-20: #9ef0f0;
    --mate-teal-30: #3ddbd9;
    --mate-teal-40: #08bdba;
    --mate-teal-50: #009d9a;
    --mate-teal-60: #007d79;
    --mate-teal-70: #005d5d;
    --mate-teal-80: #004144;
    --mate-teal-90: #022b30;
    --mate-teal-100: #081a1c;
    --mate-green-10: #defbe6;
    --mate-green-20: #a7f0ba;
    --mate-green-30: #6fdc8c;
    --mate-green-40: #42be65;
    --mate-green-50: #24a148;
    --mate-green-60: #1d873c;
    --mate-green-70: #0e6027;
    --mate-green-80: #044317;
    --mate-green-90: #022d0d;
    --mate-green-100: #071908;
    --mate-orange-10: #fff2e8;
    --mate-orange-20: #ffd9be;
    --mate-orange-30: #ffb784;
    --mate-orange-40: #ff832b;
    --mate-orange-50: #eb6200;
    --mate-orange-60: #c75300;
    --mate-orange-70: #8a3800;
    --mate-orange-80: #5e2900;
    --mate-orange-90: #3e1a00;
    --mate-orange-100: #231000;
    --mate-yellow-10: #fcf4d6;
    --mate-yellow-20: #fddc69;
    --mate-yellow-30: #f1c21b;
    --mate-yellow-40: #d2a106;
    --mate-yellow-50: #b28600;
    --mate-yellow-60: #8e6a00;
    --mate-yellow-70: #684e00;
    --mate-yellow-80: #483700;
    --mate-yellow-90: #302400;
    --mate-yellow-100: #1c1500;
    --mate-gray-10: #f2f4f8;
    --mate-gray-20: #dde1e6;
    --mate-gray-30: #c1c7cd;
    --mate-gray-40: #a2a9b0;
    --mate-gray-50: #878d96;
    --mate-gray-60: #6e7881;
    --mate-gray-70: #4d5358;
    --mate-gray-80: #343a3f;
    --mate-gray-90: #21272a;
    --mate-gray-100: #111518;

    --mate-white-and-black-white: #ffffff;
    --mate-white-and-black-black: #000000;
    --mate-light-components-calendar-event-background-magenta: #D0267024;
    --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-light-components-calendar-event-background-yellow: #F1C21B24;
    --mate-light-components-calendar-event-background-cyan: #0076A51F;
    --mate-light-components-calendar-event-background-teal: #007D791F;
    --mate-light-components-date-picker-gradient-background-visible: #001F420D;
    --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
    --mate-light-components-grid-border: #CCD2D9;
    --mate-light-components-grid-background-selected: #E5F1FF;
    --mate-light-components-grid-background-hover: #E5F1FF;
    --mate-light-components-grid-background-edited: #FCF3D1;
    --mate-light-components-grid-background-danger: #FDE8E9;
    --mate-light-components-akdb-logo-1: #00A1E0;
    --mate-light-components-akdb-logo-2: #003979;
    --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
    --mate-light-shades-base-contrast-5pct: #f2f3f5;
    --mate-light-shades-contrast-5pct: #001F420d;
    --mate-light-shades-contrast-10pct: #001F421a;
    --mate-light-shades-contrast-20pct: #001F4233;
    --mate-light-shades-contrast-30pct: #001F424d;
    --mate-light-shades-contrast-40pct: #001F4260;
    --mate-light-shades-contrast-50pct: #001F4282;
    --mate-light-shades-contrast-60pct: #001F429c;
    --mate-light-shades-contrast-70pct: #001F42b3;
    --mate-light-shades-contrast-80pct: #001F42c0;
    --mate-light-shades-contrast-90pct: #001F42e6;
    --mate-light-shades-shade-10pct: #001F421a;
    --mate-light-shades-shade-20pct: #001F4233;
    --mate-light-shades-shade-30pct: #001F424d;
    --mate-light-shades-shade-40pct: #001F4260;
    --mate-light-shades-shade-50pct: #001F4282;
    --mate-light-signal-danger-light: #e7131d1a;
    --mate-light-signal-info-light: #3392ff21;
    --mate-light-signal-success-light: #1688381a;
    --mate-light-signal-warning-light: #ff6a0038;
    --mate-light-signal-primary-light: #3392ff21;
    --mate-dark-components-calendar-event-background-magenta: #D0267024;
    --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
    --mate-dark-components-calendar-event-background-cyan: #0076A51F;
    --mate-dark-components-calendar-event-background-teal: #007D791F;
    --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
    --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
    --mate-dark-components-grid-border: #484F54;
    --mate-dark-components-grid-background-selected: #243546;
    --mate-dark-components-grid-background-hover: #243546;
    --mate-dark-components-grid-background-edited: #4A4627;
    --mate-dark-components-grid-background-danger: #3C2D31;
    --mate-dark-components-other-stepper-gradient-background: #21272A00;
    --mate-dark-components-other-global-header-background: #353B3F;
    --mate-dark-shades-base-contrast-5pct: #282e32;
    --mate-dark-shades-contrast-5pct: #e8f1fc09;
    --mate-dark-shades-contrast-10pct: #e8f1fc1a;
    --mate-dark-shades-contrast-20pct: #e8f1fc33;
    --mate-dark-shades-contrast-30pct: #e8f1fc4d;
    --mate-dark-shades-contrast-40pct: #e8f1fc60;
    --mate-dark-shades-contrast-50pct: #e8f1fc80;
    --mate-dark-shades-contrast-60pct: #e8f1fc9c;
    --mate-dark-shades-contrast-70pct: #e8f1fcb3;
    --mate-dark-shades-contrast-80pct: #e8f1fcc0;
    --mate-dark-shades-contrast-90pct: #e8f1fce6;
    --mate-dark-shades-shade-10pct: #05050512;
    --mate-dark-shades-shade-20pct: #090a0b3b;
    --mate-dark-shades-shade-30pct: #0d0f1152;
    --mate-dark-shades-shade-40pct: #11141869;
    --mate-dark-shades-shade-50pct: #14191f80;
    --mate-dark-signal-danger-light: #e7555d24;
    --mate-dark-signal-info-light: #3392ff21;
    --mate-dark-signal-success-light: #0ff5541a;
    --mate-dark-signal-warning-light: #ff6a0024;
    --mate-dark-signal-primary-light: #3392ff38;
    --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
    --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
    --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
    --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
    --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
    --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
    --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
    --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
    --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
    --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
    --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
    --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
    --mate-light-components-x-range-chart-2: var(--mate-purple-100);
    --mate-light-components-x-range-chart-3: var(--mate-teal-100);
    --mate-light-components-x-range-chart-4: var(--mate-orange-100);
    --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
    --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
    --mate-light-components-x-range-chart-7: var(--mate-green-100);
    --mate-light-components-x-range-chart-8: var(--mate-gray-100);
    --mate-light-components-x-range-chart-9: var(--mate-blue-100);
    --mate-light-components-x-range-chart-10: var(--mate-red-100);
    --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
    --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
    --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-illustrations-illustration-background: var(--mate-gray-10);
    --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
    --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
    --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
    --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
    --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
    --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
    --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
    --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
    --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
    --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
    --mate-light-shades-base: var(--mate-white-and-black-white);
    --mate-light-shades-contrast-100pct: var(--mate-blue-100);
    --mate-light-signal-danger: var(--mate-red-60);
    --mate-light-signal-info: var(--mate-blue-60);
    --mate-light-signal-success: var(--mate-green-60);
    --mate-light-signal-warning: var(--mate-orange-60);
    --mate-light-signal-primary: var(--mate-blue-60);
    --mate-light-signal-neutral: var(--mate-gray-60);
    --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
    --mate-light-icon-danger: var(--mate-red-60);
    --mate-light-icon-success: var(--mate-green-60);
    --mate-light-icon-warning: var(--mate-orange-60);
    --mate-light-icon-info: var(--mate-blue-60);
    --mate-light-icon-neutral: var(--mate-gray-60);
    --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
    --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-icon-interactive-active: var(--mate-blue-70);
    --mate-light-icon-interactive-selected: var(--mate-blue-70);
    --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
    --mate-light-interactive-focus: var(--mate-blue-100);
    --mate-light-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-interactive-danger-hover: var(--mate-red-70);
    --mate-light-interactive-danger-active: var(--mate-red-80);
    --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-interactive-hover: var(--mate-blue-70);
    --mate-light-interactive-active: var(--mate-blue-80);
    --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
    --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
    --mate-light-data-1: var(--mate-magenta-60);
    --mate-light-data-2: var(--mate-purple-60);
    --mate-light-data-3: var(--mate-teal-60);
    --mate-light-data-4: var(--mate-orange-60);
    --mate-light-data-5: var(--mate-cyan-60);
    --mate-light-data-6: var(--mate-yellow-60);
    --mate-light-data-7: var(--mate-green-60);
    --mate-light-data-8: var(--mate-gray-60);
    --mate-light-data-9: var(--mate-blue-60);
    --mate-light-data-10: var(--mate-red-60);
    --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
    --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
    --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
    --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-text-danger: var(--mate-red-70);
    --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
    --mate-light-text-info: var(--mate-blue-70);
    --mate-light-text-info-contrast: var(--mate-white-and-black-white);
    --mate-light-text-success: var(--mate-green-70);
    --mate-light-text-success-contrast: var(--mate-white-and-black-white);
    --mate-light-text-warning: var(--mate-orange-70);
    --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
    --mate-light-text-primary: var(--mate-blue-70);
    --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
    --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
    --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
    --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
    --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
    --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
    --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
    --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
    --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
    --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
    --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
    --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
    --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
    --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
    --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
    --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
    --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
    --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
    --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
    --mate-dark-components-x-range-chart-7: var(--mate-green-10);
    --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
    --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
    --mate-dark-components-x-range-chart-10: var(--mate-red-10);
    --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
    --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
    --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
    --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
    --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
    --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
    --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
    --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
    --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
    --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
    --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
    --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
    --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
    --mate-dark-shades-base: var(--mate-gray-90);
    --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
    --mate-dark-signal-danger: var(--mate-red-50);
    --mate-dark-signal-info: var(--mate-blue-50);
    --mate-dark-signal-success: var(--mate-green-50);
    --mate-dark-signal-warning: var(--mate-orange-50);
    --mate-dark-signal-primary: var(--mate-blue-50);
    --mate-dark-signal-neutral: var(--mate-gray-50);
    --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-icon-danger: var(--mate-red-50);
    --mate-dark-icon-success: var(--mate-green-50);
    --mate-dark-icon-warning: var(--mate-orange-50);
    --mate-dark-icon-info: var(--mate-blue-50);
    --mate-dark-icon-neutral: var(--mate-gray-50);
    --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-icon-interactive-active: var(--mate-blue-30);
    --mate-dark-icon-interactive-selected: var(--mate-blue-30);
    --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
    --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-interactive-focus: var(--mate-blue-10);
    --mate-dark-interactive-contrast: var(--mate-gray-100);
    --mate-dark-interactive-danger-hover: var(--mate-red-40);
    --mate-dark-interactive-danger-active: var(--mate-red-30);
    --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-interactive-hover: var(--mate-blue-40);
    --mate-dark-interactive-active: var(--mate-blue-30);
    --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
    --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
    --mate-dark-data-1: var(--mate-magenta-50);
    --mate-dark-data-2: var(--mate-purple-50);
    --mate-dark-data-3: var(--mate-teal-50);
    --mate-dark-data-4: var(--mate-orange-50);
    --mate-dark-data-5: var(--mate-cyan-50);
    --mate-dark-data-6: var(--mate-yellow-50);
    --mate-dark-data-7: var(--mate-green-50);
    --mate-dark-data-8: var(--mate-gray-50);
    --mate-dark-data-9: var(--mate-blue-50);
    --mate-dark-data-10: var(--mate-red-50);
    --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-text-danger: var(--mate-red-30);
    --mate-dark-text-danger-contrast: var(--mate-gray-100);
    --mate-dark-text-info: var(--mate-blue-30);
    --mate-dark-text-info-contrast: var(--mate-gray-100);
    --mate-dark-text-success: var(--mate-green-30);
    --mate-dark-text-success-contrast: var(--mate-gray-100);
    --mate-dark-text-warning: var(--mate-orange-30);
    --mate-dark-text-warning-contrast: var(--mate-gray-100);
    --mate-dark-text-primary: var(--mate-blue-30);
    --mate-dark-text-primary-contrast: var(--mate-gray-100);
    --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
    --mate-dark-text-neutral-contrast: var(--mate-gray-100);
    --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
    --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
    --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
    --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
    --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
    --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
    --mate-light-components-field-background: var(--mate-light-shades-base);
    --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
    --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
    --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
    --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
    --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
    --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
    --mate-light-interactive-enabled: var(--mate-light-signal-primary);
    --mate-light-interactive-selected: var(--mate-light-signal-primary);
    --mate-light-background-base: var(--mate-light-shades-base);
    --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
    --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
    --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
    --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
    --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
    --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
    --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
    --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
    --mate-dark-components-field-background: var(--mate-dark-shades-base);
    --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
    --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
    --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
    --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
    --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
    --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
    --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
    --mate-dark-background-base: var(--mate-dark-shades-base);
    --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
    --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}

.material-icons {
    --icon-size: var(--mate-desktop-icon-sizing-md);
    width: var(--icon-size);
    height: var(--icon-size);
    font-size: var(--icon-size);
    color: var(--mate-light-icon-not-interactive);
    background-color: white;
}
.material-icons {
    --mate-desktop-icon-sizing-sm: 1rem;
    --mate-desktop-icon-sizing-sm-md: 1.25rem;
    --mate-desktop-icon-sizing-md: 1.5rem;
    --mate-desktop-icon-sizing-lg: 2rem;

    --mate-red-10: #fff1f1;
    --mate-red-20: #ffd7d9;
    --mate-red-30: #ffb3b8;
    --mate-red-40: #ff8389;
    --mate-red-50: #fa4d56;
    --mate-red-60: #e22c36;
    --mate-red-70: #a2191f;
    --mate-red-80: #750e13;
    --mate-red-90: #520408;
    --mate-red-100: #2d0709;
    --mate-magenta-10: #fff0f7;
    --mate-magenta-20: #ffd6e8;
    --mate-magenta-30: #ffafd2;
    --mate-magenta-40: #ff7eb6;
    --mate-magenta-50: #ee5396;
    --mate-magenta-60: #d02670;
    --mate-magenta-70: #9f1853;
    --mate-magenta-80: #740937;
    --mate-magenta-90: #510224;
    --mate-magenta-100: #2a0a18;
    --mate-purple-10: #f6f2ff;
    --mate-purple-20: #e8daff;
    --mate-purple-30: #d4bbff;
    --mate-purple-40: #be95ff;
    --mate-purple-50: #a56eff;
    --mate-purple-60: #8a3ffc;
    --mate-purple-70: #6929c4;
    --mate-purple-80: #491d8b;
    --mate-purple-90: #31135e;
    --mate-purple-100: #1c0f30;
    --mate-blue-10: #e6f0fc;
    --mate-blue-20: #c2dbf7;
    --mate-blue-30: #91bff1;
    --mate-blue-40: #5ea1ea;
    --mate-blue-50: #2e84e4;
    --mate-blue-60: #276ae1;
    --mate-blue-70: #0059bd;
    --mate-blue-80: #004b9e;
    --mate-blue-90: #00336b;
    --mate-blue-100: #001e40;
    --mate-cyan-10: #e6f1f6;
    --mate-cyan-20: #c2dee9;
    --mate-cyan-30: #91c4d8;
    --mate-cyan-40: #5ea9c6;
    --mate-cyan-50: #2e8fb5;
    --mate-cyan-60: #0076a5;
    --mate-cyan-70: #00648c;
    --mate-cyan-80: #005475;
    --mate-cyan-90: #00354a;
    --mate-cyan-100: #001b26;
    --mate-teal-10: #d9fbfb;
    --mate-teal-20: #9ef0f0;
    --mate-teal-30: #3ddbd9;
    --mate-teal-40: #08bdba;
    --mate-teal-50: #009d9a;
    --mate-teal-60: #007d79;
    --mate-teal-70: #005d5d;
    --mate-teal-80: #004144;
    --mate-teal-90: #022b30;
    --mate-teal-100: #081a1c;
    --mate-green-10: #defbe6;
    --mate-green-20: #a7f0ba;
    --mate-green-30: #6fdc8c;
    --mate-green-40: #42be65;
    --mate-green-50: #24a148;
    --mate-green-60: #1d873c;
    --mate-green-70: #0e6027;
    --mate-green-80: #044317;
    --mate-green-90: #022d0d;
    --mate-green-100: #071908;
    --mate-orange-10: #fff2e8;
    --mate-orange-20: #ffd9be;
    --mate-orange-30: #ffb784;
    --mate-orange-40: #ff832b;
    --mate-orange-50: #eb6200;
    --mate-orange-60: #c75300;
    --mate-orange-70: #8a3800;
    --mate-orange-80: #5e2900;
    --mate-orange-90: #3e1a00;
    --mate-orange-100: #231000;
    --mate-yellow-10: #fcf4d6;
    --mate-yellow-20: #fddc69;
    --mate-yellow-30: #f1c21b;
    --mate-yellow-40: #d2a106;
    --mate-yellow-50: #b28600;
    --mate-yellow-60: #8e6a00;
    --mate-yellow-70: #684e00;
    --mate-yellow-80: #483700;
    --mate-yellow-90: #302400;
    --mate-yellow-100: #1c1500;
    --mate-gray-10: #f2f4f8;
    --mate-gray-20: #dde1e6;
    --mate-gray-30: #c1c7cd;
    --mate-gray-40: #a2a9b0;
    --mate-gray-50: #878d96;
    --mate-gray-60: #6e7881;
    --mate-gray-70: #4d5358;
    --mate-gray-80: #343a3f;
    --mate-gray-90: #21272a;
    --mate-gray-100: #111518;

    --mate-white-and-black-white: #ffffff;
    --mate-white-and-black-black: #000000;
    --mate-light-components-calendar-event-background-magenta: #D0267024;
    --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-light-components-calendar-event-background-yellow: #F1C21B24;
    --mate-light-components-calendar-event-background-cyan: #0076A51F;
    --mate-light-components-calendar-event-background-teal: #007D791F;
    --mate-light-components-date-picker-gradient-background-visible: #001F420D;
    --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
    --mate-light-components-grid-border: #CCD2D9;
    --mate-light-components-grid-background-selected: #E5F1FF;
    --mate-light-components-grid-background-hover: #E5F1FF;
    --mate-light-components-grid-background-edited: #FCF3D1;
    --mate-light-components-grid-background-danger: #FDE8E9;
    --mate-light-components-akdb-logo-1: #00A1E0;
    --mate-light-components-akdb-logo-2: #003979;
    --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
    --mate-light-shades-base-contrast-5pct: #f2f3f5;
    --mate-light-shades-contrast-5pct: #001F420d;
    --mate-light-shades-contrast-10pct: #001F421a;
    --mate-light-shades-contrast-20pct: #001F4233;
    --mate-light-shades-contrast-30pct: #001F424d;
    --mate-light-shades-contrast-40pct: #001F4260;
    --mate-light-shades-contrast-50pct: #001F4282;
    --mate-light-shades-contrast-60pct: #001F429c;
    --mate-light-shades-contrast-70pct: #001F42b3;
    --mate-light-shades-contrast-80pct: #001F42c0;
    --mate-light-shades-contrast-90pct: #001F42e6;
    --mate-light-shades-shade-10pct: #001F421a;
    --mate-light-shades-shade-20pct: #001F4233;
    --mate-light-shades-shade-30pct: #001F424d;
    --mate-light-shades-shade-40pct: #001F4260;
    --mate-light-shades-shade-50pct: #001F4282;
    --mate-light-signal-danger-light: #e7131d1a;
    --mate-light-signal-info-light: #3392ff21;
    --mate-light-signal-success-light: #1688381a;
    --mate-light-signal-warning-light: #ff6a0038;
    --mate-light-signal-primary-light: #3392ff21;
    --mate-dark-components-calendar-event-background-magenta: #D0267024;
    --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
    --mate-dark-components-calendar-event-background-cyan: #0076A51F;
    --mate-dark-components-calendar-event-background-teal: #007D791F;
    --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
    --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
    --mate-dark-components-grid-border: #484F54;
    --mate-dark-components-grid-background-selected: #243546;
    --mate-dark-components-grid-background-hover: #243546;
    --mate-dark-components-grid-background-edited: #4A4627;
    --mate-dark-components-grid-background-danger: #3C2D31;
    --mate-dark-components-other-stepper-gradient-background: #21272A00;
    --mate-dark-components-other-global-header-background: #353B3F;
    --mate-dark-shades-base-contrast-5pct: #282e32;
    --mate-dark-shades-contrast-5pct: #e8f1fc09;
    --mate-dark-shades-contrast-10pct: #e8f1fc1a;
    --mate-dark-shades-contrast-20pct: #e8f1fc33;
    --mate-dark-shades-contrast-30pct: #e8f1fc4d;
    --mate-dark-shades-contrast-40pct: #e8f1fc60;
    --mate-dark-shades-contrast-50pct: #e8f1fc80;
    --mate-dark-shades-contrast-60pct: #e8f1fc9c;
    --mate-dark-shades-contrast-70pct: #e8f1fcb3;
    --mate-dark-shades-contrast-80pct: #e8f1fcc0;
    --mate-dark-shades-contrast-90pct: #e8f1fce6;
    --mate-dark-shades-shade-10pct: #05050512;
    --mate-dark-shades-shade-20pct: #090a0b3b;
    --mate-dark-shades-shade-30pct: #0d0f1152;
    --mate-dark-shades-shade-40pct: #11141869;
    --mate-dark-shades-shade-50pct: #14191f80;
    --mate-dark-signal-danger-light: #e7555d24;
    --mate-dark-signal-info-light: #3392ff21;
    --mate-dark-signal-success-light: #0ff5541a;
    --mate-dark-signal-warning-light: #ff6a0024;
    --mate-dark-signal-primary-light: #3392ff38;
    --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
    --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
    --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
    --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
    --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
    --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
    --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
    --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
    --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
    --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
    --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
    --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
    --mate-light-components-x-range-chart-2: var(--mate-purple-100);
    --mate-light-components-x-range-chart-3: var(--mate-teal-100);
    --mate-light-components-x-range-chart-4: var(--mate-orange-100);
    --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
    --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
    --mate-light-components-x-range-chart-7: var(--mate-green-100);
    --mate-light-components-x-range-chart-8: var(--mate-gray-100);
    --mate-light-components-x-range-chart-9: var(--mate-blue-100);
    --mate-light-components-x-range-chart-10: var(--mate-red-100);
    --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
    --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
    --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-illustrations-illustration-background: var(--mate-gray-10);
    --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
    --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
    --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
    --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
    --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
    --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
    --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
    --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
    --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
    --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
    --mate-light-shades-base: var(--mate-white-and-black-white);
    --mate-light-shades-contrast-100pct: var(--mate-blue-100);
    --mate-light-signal-danger: var(--mate-red-60);
    --mate-light-signal-info: var(--mate-blue-60);
    --mate-light-signal-success: var(--mate-green-60);
    --mate-light-signal-warning: var(--mate-orange-60);
    --mate-light-signal-primary: var(--mate-blue-60);
    --mate-light-signal-neutral: var(--mate-gray-60);
    --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
    --mate-light-icon-danger: var(--mate-red-60);
    --mate-light-icon-success: var(--mate-green-60);
    --mate-light-icon-warning: var(--mate-orange-60);
    --mate-light-icon-info: var(--mate-blue-60);
    --mate-light-icon-neutral: var(--mate-gray-60);
    --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
    --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-icon-interactive-active: var(--mate-blue-70);
    --mate-light-icon-interactive-selected: var(--mate-blue-70);
    --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
    --mate-light-interactive-focus: var(--mate-blue-100);
    --mate-light-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-interactive-danger-hover: var(--mate-red-70);
    --mate-light-interactive-danger-active: var(--mate-red-80);
    --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-interactive-hover: var(--mate-blue-70);
    --mate-light-interactive-active: var(--mate-blue-80);
    --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
    --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
    --mate-light-data-1: var(--mate-magenta-60);
    --mate-light-data-2: var(--mate-purple-60);
    --mate-light-data-3: var(--mate-teal-60);
    --mate-light-data-4: var(--mate-orange-60);
    --mate-light-data-5: var(--mate-cyan-60);
    --mate-light-data-6: var(--mate-yellow-60);
    --mate-light-data-7: var(--mate-green-60);
    --mate-light-data-8: var(--mate-gray-60);
    --mate-light-data-9: var(--mate-blue-60);
    --mate-light-data-10: var(--mate-red-60);
    --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
    --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
    --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
    --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-text-danger: var(--mate-red-70);
    --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
    --mate-light-text-info: var(--mate-blue-70);
    --mate-light-text-info-contrast: var(--mate-white-and-black-white);
    --mate-light-text-success: var(--mate-green-70);
    --mate-light-text-success-contrast: var(--mate-white-and-black-white);
    --mate-light-text-warning: var(--mate-orange-70);
    --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
    --mate-light-text-primary: var(--mate-blue-70);
    --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
    --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
    --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
    --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
    --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
    --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
    --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
    --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
    --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
    --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
    --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
    --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
    --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
    --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
    --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
    --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
    --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
    --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
    --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
    --mate-dark-components-x-range-chart-7: var(--mate-green-10);
    --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
    --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
    --mate-dark-components-x-range-chart-10: var(--mate-red-10);
    --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
    --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
    --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
    --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
    --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
    --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
    --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
    --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
    --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
    --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
    --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
    --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
    --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
    --mate-dark-shades-base: var(--mate-gray-90);
    --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
    --mate-dark-signal-danger: var(--mate-red-50);
    --mate-dark-signal-info: var(--mate-blue-50);
    --mate-dark-signal-success: var(--mate-green-50);
    --mate-dark-signal-warning: var(--mate-orange-50);
    --mate-dark-signal-primary: var(--mate-blue-50);
    --mate-dark-signal-neutral: var(--mate-gray-50);
    --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-icon-danger: var(--mate-red-50);
    --mate-dark-icon-success: var(--mate-green-50);
    --mate-dark-icon-warning: var(--mate-orange-50);
    --mate-dark-icon-info: var(--mate-blue-50);
    --mate-dark-icon-neutral: var(--mate-gray-50);
    --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-icon-interactive-active: var(--mate-blue-30);
    --mate-dark-icon-interactive-selected: var(--mate-blue-30);
    --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
    --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-interactive-focus: var(--mate-blue-10);
    --mate-dark-interactive-contrast: var(--mate-gray-100);
    --mate-dark-interactive-danger-hover: var(--mate-red-40);
    --mate-dark-interactive-danger-active: var(--mate-red-30);
    --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-interactive-hover: var(--mate-blue-40);
    --mate-dark-interactive-active: var(--mate-blue-30);
    --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
    --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
    --mate-dark-data-1: var(--mate-magenta-50);
    --mate-dark-data-2: var(--mate-purple-50);
    --mate-dark-data-3: var(--mate-teal-50);
    --mate-dark-data-4: var(--mate-orange-50);
    --mate-dark-data-5: var(--mate-cyan-50);
    --mate-dark-data-6: var(--mate-yellow-50);
    --mate-dark-data-7: var(--mate-green-50);
    --mate-dark-data-8: var(--mate-gray-50);
    --mate-dark-data-9: var(--mate-blue-50);
    --mate-dark-data-10: var(--mate-red-50);
    --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-text-danger: var(--mate-red-30);
    --mate-dark-text-danger-contrast: var(--mate-gray-100);
    --mate-dark-text-info: var(--mate-blue-30);
    --mate-dark-text-info-contrast: var(--mate-gray-100);
    --mate-dark-text-success: var(--mate-green-30);
    --mate-dark-text-success-contrast: var(--mate-gray-100);
    --mate-dark-text-warning: var(--mate-orange-30);
    --mate-dark-text-warning-contrast: var(--mate-gray-100);
    --mate-dark-text-primary: var(--mate-blue-30);
    --mate-dark-text-primary-contrast: var(--mate-gray-100);
    --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
    --mate-dark-text-neutral-contrast: var(--mate-gray-100);
    --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
    --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
    --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
    --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
    --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
    --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
    --mate-light-components-field-background: var(--mate-light-shades-base);
    --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
    --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
    --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
    --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
    --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
    --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
    --mate-light-interactive-enabled: var(--mate-light-signal-primary);
    --mate-light-interactive-selected: var(--mate-light-signal-primary);
    --mate-light-background-base: var(--mate-light-shades-base);
    --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
    --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
    --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
    --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
    --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
    --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
    --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
    --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
    --mate-dark-components-field-background: var(--mate-dark-shades-base);
    --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
    --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
    --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
    --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
    --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
    --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
    --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
    --mate-dark-background-base: var(--mate-dark-shades-base);
    --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
    --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}

.color-token {
    width: 200px;
    height: 20px;
}
.color-token {
    --mate-red-10: #fff1f1;
    --mate-red-20: #ffd7d9;
    --mate-red-30: #ffb3b8;
    --mate-red-40: #ff8389;
    --mate-red-50: #fa4d56;
    --mate-red-60: #e22c36;
    --mate-red-70: #a2191f;
    --mate-red-80: #750e13;
    --mate-red-90: #520408;
    --mate-red-100: #2d0709;
    --mate-magenta-10: #fff0f7;
    --mate-magenta-20: #ffd6e8;
    --mate-magenta-30: #ffafd2;
    --mate-magenta-40: #ff7eb6;
    --mate-magenta-50: #ee5396;
    --mate-magenta-60: #d02670;
    --mate-magenta-70: #9f1853;
    --mate-magenta-80: #740937;
    --mate-magenta-90: #510224;
    --mate-magenta-100: #2a0a18;
    --mate-purple-10: #f6f2ff;
    --mate-purple-20: #e8daff;
    --mate-purple-30: #d4bbff;
    --mate-purple-40: #be95ff;
    --mate-purple-50: #a56eff;
    --mate-purple-60: #8a3ffc;
    --mate-purple-70: #6929c4;
    --mate-purple-80: #491d8b;
    --mate-purple-90: #31135e;
    --mate-purple-100: #1c0f30;
    --mate-blue-10: #e6f0fc;
    --mate-blue-20: #c2dbf7;
    --mate-blue-30: #91bff1;
    --mate-blue-40: #5ea1ea;
    --mate-blue-50: #2e84e4;
    --mate-blue-60: #276ae1;
    --mate-blue-70: #0059bd;
    --mate-blue-80: #004b9e;
    --mate-blue-90: #00336b;
    --mate-blue-100: #001e40;
    --mate-cyan-10: #e6f1f6;
    --mate-cyan-20: #c2dee9;
    --mate-cyan-30: #91c4d8;
    --mate-cyan-40: #5ea9c6;
    --mate-cyan-50: #2e8fb5;
    --mate-cyan-60: #0076a5;
    --mate-cyan-70: #00648c;
    --mate-cyan-80: #005475;
    --mate-cyan-90: #00354a;
    --mate-cyan-100: #001b26;
    --mate-teal-10: #d9fbfb;
    --mate-teal-20: #9ef0f0;
    --mate-teal-30: #3ddbd9;
    --mate-teal-40: #08bdba;
    --mate-teal-50: #009d9a;
    --mate-teal-60: #007d79;
    --mate-teal-70: #005d5d;
    --mate-teal-80: #004144;
    --mate-teal-90: #022b30;
    --mate-teal-100: #081a1c;
    --mate-green-10: #defbe6;
    --mate-green-20: #a7f0ba;
    --mate-green-30: #6fdc8c;
    --mate-green-40: #42be65;
    --mate-green-50: #24a148;
    --mate-green-60: #1d873c;
    --mate-green-70: #0e6027;
    --mate-green-80: #044317;
    --mate-green-90: #022d0d;
    --mate-green-100: #071908;
    --mate-orange-10: #fff2e8;
    --mate-orange-20: #ffd9be;
    --mate-orange-30: #ffb784;
    --mate-orange-40: #ff832b;
    --mate-orange-50: #eb6200;
    --mate-orange-60: #c75300;
    --mate-orange-70: #8a3800;
    --mate-orange-80: #5e2900;
    --mate-orange-90: #3e1a00;
    --mate-orange-100: #231000;
    --mate-yellow-10: #fcf4d6;
    --mate-yellow-20: #fddc69;
    --mate-yellow-30: #f1c21b;
    --mate-yellow-40: #d2a106;
    --mate-yellow-50: #b28600;
    --mate-yellow-60: #8e6a00;
    --mate-yellow-70: #684e00;
    --mate-yellow-80: #483700;
    --mate-yellow-90: #302400;
    --mate-yellow-100: #1c1500;
    --mate-gray-10: #f2f4f8;
    --mate-gray-20: #dde1e6;
    --mate-gray-30: #c1c7cd;
    --mate-gray-40: #a2a9b0;
    --mate-gray-50: #878d96;
    --mate-gray-60: #6e7881;
    --mate-gray-70: #4d5358;
    --mate-gray-80: #343a3f;
    --mate-gray-90: #21272a;
    --mate-gray-100: #111518;

    --mate-white-and-black-white: #ffffff;
    --mate-white-and-black-black: #000000;
    --mate-light-components-calendar-event-background-magenta: #D0267024;
    --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-light-components-calendar-event-background-yellow: #F1C21B24;
    --mate-light-components-calendar-event-background-cyan: #0076A51F;
    --mate-light-components-calendar-event-background-teal: #007D791F;
    --mate-light-components-date-picker-gradient-background-visible: #001F420D;
    --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
    --mate-light-components-grid-border: #CCD2D9;
    --mate-light-components-grid-background-selected: #E5F1FF;
    --mate-light-components-grid-background-hover: #E5F1FF;
    --mate-light-components-grid-background-edited: #FCF3D1;
    --mate-light-components-grid-background-danger: #FDE8E9;
    --mate-light-components-akdb-logo-1: #00A1E0;
    --mate-light-components-akdb-logo-2: #003979;
    --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
    --mate-light-shades-base-contrast-5pct: #f2f3f5;
    --mate-light-shades-contrast-5pct: #001F420d;
    --mate-light-shades-contrast-10pct: #001F421a;
    --mate-light-shades-contrast-20pct: #001F4233;
    --mate-light-shades-contrast-30pct: #001F424d;
    --mate-light-shades-contrast-40pct: #001F4260;
    --mate-light-shades-contrast-50pct: #001F4282;
    --mate-light-shades-contrast-60pct: #001F429c;
    --mate-light-shades-contrast-70pct: #001F42b3;
    --mate-light-shades-contrast-80pct: #001F42c0;
    --mate-light-shades-contrast-90pct: #001F42e6;
    --mate-light-shades-shade-10pct: #001F421a;
    --mate-light-shades-shade-20pct: #001F4233;
    --mate-light-shades-shade-30pct: #001F424d;
    --mate-light-shades-shade-40pct: #001F4260;
    --mate-light-shades-shade-50pct: #001F4282;
    --mate-light-signal-danger-light: #e7131d1a;
    --mate-light-signal-info-light: #3392ff21;
    --mate-light-signal-success-light: #1688381a;
    --mate-light-signal-warning-light: #ff6a0038;
    --mate-light-signal-primary-light: #3392ff21;
    --mate-dark-components-calendar-event-background-magenta: #D0267024;
    --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
    --mate-dark-components-calendar-event-background-cyan: #0076A51F;
    --mate-dark-components-calendar-event-background-teal: #007D791F;
    --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
    --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
    --mate-dark-components-grid-border: #484F54;
    --mate-dark-components-grid-background-selected: #243546;
    --mate-dark-components-grid-background-hover: #243546;
    --mate-dark-components-grid-background-edited: #4A4627;
    --mate-dark-components-grid-background-danger: #3C2D31;
    --mate-dark-components-other-stepper-gradient-background: #21272A00;
    --mate-dark-components-other-global-header-background: #353B3F;
    --mate-dark-shades-base-contrast-5pct: #282e32;
    --mate-dark-shades-contrast-5pct: #e8f1fc09;
    --mate-dark-shades-contrast-10pct: #e8f1fc1a;
    --mate-dark-shades-contrast-20pct: #e8f1fc33;
    --mate-dark-shades-contrast-30pct: #e8f1fc4d;
    --mate-dark-shades-contrast-40pct: #e8f1fc60;
    --mate-dark-shades-contrast-50pct: #e8f1fc80;
    --mate-dark-shades-contrast-60pct: #e8f1fc9c;
    --mate-dark-shades-contrast-70pct: #e8f1fcb3;
    --mate-dark-shades-contrast-80pct: #e8f1fcc0;
    --mate-dark-shades-contrast-90pct: #e8f1fce6;
    --mate-dark-shades-shade-10pct: #05050512;
    --mate-dark-shades-shade-20pct: #090a0b3b;
    --mate-dark-shades-shade-30pct: #0d0f1152;
    --mate-dark-shades-shade-40pct: #11141869;
    --mate-dark-shades-shade-50pct: #14191f80;
    --mate-dark-signal-danger-light: #e7555d24;
    --mate-dark-signal-info-light: #3392ff21;
    --mate-dark-signal-success-light: #0ff5541a;
    --mate-dark-signal-warning-light: #ff6a0024;
    --mate-dark-signal-primary-light: #3392ff38;
    --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
    --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
    --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
    --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
    --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
    --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
    --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
    --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
    --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
    --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
    --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
    --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
    --mate-light-components-x-range-chart-2: var(--mate-purple-100);
    --mate-light-components-x-range-chart-3: var(--mate-teal-100);
    --mate-light-components-x-range-chart-4: var(--mate-orange-100);
    --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
    --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
    --mate-light-components-x-range-chart-7: var(--mate-green-100);
    --mate-light-components-x-range-chart-8: var(--mate-gray-100);
    --mate-light-components-x-range-chart-9: var(--mate-blue-100);
    --mate-light-components-x-range-chart-10: var(--mate-red-100);
    --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
    --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
    --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-illustrations-illustration-background: var(--mate-gray-10);
    --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
    --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
    --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
    --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
    --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
    --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
    --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
    --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
    --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
    --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
    --mate-light-shades-base: var(--mate-white-and-black-white);
    --mate-light-shades-contrast-100pct: var(--mate-blue-100);
    --mate-light-signal-danger: var(--mate-red-60);
    --mate-light-signal-info: var(--mate-blue-60);
    --mate-light-signal-success: var(--mate-green-60);
    --mate-light-signal-warning: var(--mate-orange-60);
    --mate-light-signal-primary: var(--mate-blue-60);
    --mate-light-signal-neutral: var(--mate-gray-60);
    --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
    --mate-light-icon-danger: var(--mate-red-60);
    --mate-light-icon-success: var(--mate-green-60);
    --mate-light-icon-warning: var(--mate-orange-60);
    --mate-light-icon-info: var(--mate-blue-60);
    --mate-light-icon-neutral: var(--mate-gray-60);
    --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
    --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-icon-interactive-active: var(--mate-blue-70);
    --mate-light-icon-interactive-selected: var(--mate-blue-70);
    --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
    --mate-light-interactive-focus: var(--mate-blue-100);
    --mate-light-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-interactive-danger-hover: var(--mate-red-70);
    --mate-light-interactive-danger-active: var(--mate-red-80);
    --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-interactive-hover: var(--mate-blue-70);
    --mate-light-interactive-active: var(--mate-blue-80);
    --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
    --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
    --mate-light-data-1: var(--mate-magenta-60);
    --mate-light-data-2: var(--mate-purple-60);
    --mate-light-data-3: var(--mate-teal-60);
    --mate-light-data-4: var(--mate-orange-60);
    --mate-light-data-5: var(--mate-cyan-60);
    --mate-light-data-6: var(--mate-yellow-60);
    --mate-light-data-7: var(--mate-green-60);
    --mate-light-data-8: var(--mate-gray-60);
    --mate-light-data-9: var(--mate-blue-60);
    --mate-light-data-10: var(--mate-red-60);
    --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
    --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
    --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
    --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-text-danger: var(--mate-red-70);
    --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
    --mate-light-text-info: var(--mate-blue-70);
    --mate-light-text-info-contrast: var(--mate-white-and-black-white);
    --mate-light-text-success: var(--mate-green-70);
    --mate-light-text-success-contrast: var(--mate-white-and-black-white);
    --mate-light-text-warning: var(--mate-orange-70);
    --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
    --mate-light-text-primary: var(--mate-blue-70);
    --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
    --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
    --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
    --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
    --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
    --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
    --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
    --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
    --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
    --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
    --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
    --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
    --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
    --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
    --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
    --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
    --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
    --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
    --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
    --mate-dark-components-x-range-chart-7: var(--mate-green-10);
    --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
    --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
    --mate-dark-components-x-range-chart-10: var(--mate-red-10);
    --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
    --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
    --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
    --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
    --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
    --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
    --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
    --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
    --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
    --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
    --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
    --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
    --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
    --mate-dark-shades-base: var(--mate-gray-90);
    --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
    --mate-dark-signal-danger: var(--mate-red-50);
    --mate-dark-signal-info: var(--mate-blue-50);
    --mate-dark-signal-success: var(--mate-green-50);
    --mate-dark-signal-warning: var(--mate-orange-50);
    --mate-dark-signal-primary: var(--mate-blue-50);
    --mate-dark-signal-neutral: var(--mate-gray-50);
    --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-icon-danger: var(--mate-red-50);
    --mate-dark-icon-success: var(--mate-green-50);
    --mate-dark-icon-warning: var(--mate-orange-50);
    --mate-dark-icon-info: var(--mate-blue-50);
    --mate-dark-icon-neutral: var(--mate-gray-50);
    --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-icon-interactive-active: var(--mate-blue-30);
    --mate-dark-icon-interactive-selected: var(--mate-blue-30);
    --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
    --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-interactive-focus: var(--mate-blue-10);
    --mate-dark-interactive-contrast: var(--mate-gray-100);
    --mate-dark-interactive-danger-hover: var(--mate-red-40);
    --mate-dark-interactive-danger-active: var(--mate-red-30);
    --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-interactive-hover: var(--mate-blue-40);
    --mate-dark-interactive-active: var(--mate-blue-30);
    --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
    --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
    --mate-dark-data-1: var(--mate-magenta-50);
    --mate-dark-data-2: var(--mate-purple-50);
    --mate-dark-data-3: var(--mate-teal-50);
    --mate-dark-data-4: var(--mate-orange-50);
    --mate-dark-data-5: var(--mate-cyan-50);
    --mate-dark-data-6: var(--mate-yellow-50);
    --mate-dark-data-7: var(--mate-green-50);
    --mate-dark-data-8: var(--mate-gray-50);
    --mate-dark-data-9: var(--mate-blue-50);
    --mate-dark-data-10: var(--mate-red-50);
    --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-text-danger: var(--mate-red-30);
    --mate-dark-text-danger-contrast: var(--mate-gray-100);
    --mate-dark-text-info: var(--mate-blue-30);
    --mate-dark-text-info-contrast: var(--mate-gray-100);
    --mate-dark-text-success: var(--mate-green-30);
    --mate-dark-text-success-contrast: var(--mate-gray-100);
    --mate-dark-text-warning: var(--mate-orange-30);
    --mate-dark-text-warning-contrast: var(--mate-gray-100);
    --mate-dark-text-primary: var(--mate-blue-30);
    --mate-dark-text-primary-contrast: var(--mate-gray-100);
    --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
    --mate-dark-text-neutral-contrast: var(--mate-gray-100);
    --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
    --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
    --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
    --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
    --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
    --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
    --mate-light-components-field-background: var(--mate-light-shades-base);
    --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
    --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
    --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
    --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
    --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
    --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
    --mate-light-interactive-enabled: var(--mate-light-signal-primary);
    --mate-light-interactive-selected: var(--mate-light-signal-primary);
    --mate-light-background-base: var(--mate-light-shades-base);
    --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
    --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
    --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
    --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
    --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
    --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
    --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
    --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
    --mate-dark-components-field-background: var(--mate-dark-shades-base);
    --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
    --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
    --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
    --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
    --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
    --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
    --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
    --mate-dark-background-base: var(--mate-dark-shades-base);
    --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
    --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}

.material-icons {
    --icon-size: var(--mate-desktop-icon-sizing-md);
    width: var(--icon-size);
    height: var(--icon-size);
    font-size: var(--icon-size);
    color: var(--mate-light-icon-not-interactive);
    background-color: white;
}
.material-icons {
    --mate-desktop-icon-sizing-sm: 1rem;
    --mate-desktop-icon-sizing-sm-md: 1.25rem;
    --mate-desktop-icon-sizing-md: 1.5rem;
    --mate-desktop-icon-sizing-lg: 2rem;

    --mate-red-10: #fff1f1;
    --mate-red-20: #ffd7d9;
    --mate-red-30: #ffb3b8;
    --mate-red-40: #ff8389;
    --mate-red-50: #fa4d56;
    --mate-red-60: #e22c36;
    --mate-red-70: #a2191f;
    --mate-red-80: #750e13;
    --mate-red-90: #520408;
    --mate-red-100: #2d0709;
    --mate-magenta-10: #fff0f7;
    --mate-magenta-20: #ffd6e8;
    --mate-magenta-30: #ffafd2;
    --mate-magenta-40: #ff7eb6;
    --mate-magenta-50: #ee5396;
    --mate-magenta-60: #d02670;
    --mate-magenta-70: #9f1853;
    --mate-magenta-80: #740937;
    --mate-magenta-90: #510224;
    --mate-magenta-100: #2a0a18;
    --mate-purple-10: #f6f2ff;
    --mate-purple-20: #e8daff;
    --mate-purple-30: #d4bbff;
    --mate-purple-40: #be95ff;
    --mate-purple-50: #a56eff;
    --mate-purple-60: #8a3ffc;
    --mate-purple-70: #6929c4;
    --mate-purple-80: #491d8b;
    --mate-purple-90: #31135e;
    --mate-purple-100: #1c0f30;
    --mate-blue-10: #e6f0fc;
    --mate-blue-20: #c2dbf7;
    --mate-blue-30: #91bff1;
    --mate-blue-40: #5ea1ea;
    --mate-blue-50: #2e84e4;
    --mate-blue-60: #276ae1;
    --mate-blue-70: #0059bd;
    --mate-blue-80: #004b9e;
    --mate-blue-90: #00336b;
    --mate-blue-100: #001e40;
    --mate-cyan-10: #e6f1f6;
    --mate-cyan-20: #c2dee9;
    --mate-cyan-30: #91c4d8;
    --mate-cyan-40: #5ea9c6;
    --mate-cyan-50: #2e8fb5;
    --mate-cyan-60: #0076a5;
    --mate-cyan-70: #00648c;
    --mate-cyan-80: #005475;
    --mate-cyan-90: #00354a;
    --mate-cyan-100: #001b26;
    --mate-teal-10: #d9fbfb;
    --mate-teal-20: #9ef0f0;
    --mate-teal-30: #3ddbd9;
    --mate-teal-40: #08bdba;
    --mate-teal-50: #009d9a;
    --mate-teal-60: #007d79;
    --mate-teal-70: #005d5d;
    --mate-teal-80: #004144;
    --mate-teal-90: #022b30;
    --mate-teal-100: #081a1c;
    --mate-green-10: #defbe6;
    --mate-green-20: #a7f0ba;
    --mate-green-30: #6fdc8c;
    --mate-green-40: #42be65;
    --mate-green-50: #24a148;
    --mate-green-60: #1d873c;
    --mate-green-70: #0e6027;
    --mate-green-80: #044317;
    --mate-green-90: #022d0d;
    --mate-green-100: #071908;
    --mate-orange-10: #fff2e8;
    --mate-orange-20: #ffd9be;
    --mate-orange-30: #ffb784;
    --mate-orange-40: #ff832b;
    --mate-orange-50: #eb6200;
    --mate-orange-60: #c75300;
    --mate-orange-70: #8a3800;
    --mate-orange-80: #5e2900;
    --mate-orange-90: #3e1a00;
    --mate-orange-100: #231000;
    --mate-yellow-10: #fcf4d6;
    --mate-yellow-20: #fddc69;
    --mate-yellow-30: #f1c21b;
    --mate-yellow-40: #d2a106;
    --mate-yellow-50: #b28600;
    --mate-yellow-60: #8e6a00;
    --mate-yellow-70: #684e00;
    --mate-yellow-80: #483700;
    --mate-yellow-90: #302400;
    --mate-yellow-100: #1c1500;
    --mate-gray-10: #f2f4f8;
    --mate-gray-20: #dde1e6;
    --mate-gray-30: #c1c7cd;
    --mate-gray-40: #a2a9b0;
    --mate-gray-50: #878d96;
    --mate-gray-60: #6e7881;
    --mate-gray-70: #4d5358;
    --mate-gray-80: #343a3f;
    --mate-gray-90: #21272a;
    --mate-gray-100: #111518;

    --mate-white-and-black-white: #ffffff;
    --mate-white-and-black-black: #000000;
    --mate-light-components-calendar-event-background-magenta: #D0267024;
    --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-light-components-calendar-event-background-yellow: #F1C21B24;
    --mate-light-components-calendar-event-background-cyan: #0076A51F;
    --mate-light-components-calendar-event-background-teal: #007D791F;
    --mate-light-components-date-picker-gradient-background-visible: #001F420D;
    --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
    --mate-light-components-grid-border: #CCD2D9;
    --mate-light-components-grid-background-selected: #E5F1FF;
    --mate-light-components-grid-background-hover: #E5F1FF;
    --mate-light-components-grid-background-edited: #FCF3D1;
    --mate-light-components-grid-background-danger: #FDE8E9;
    --mate-light-components-akdb-logo-1: #00A1E0;
    --mate-light-components-akdb-logo-2: #003979;
    --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
    --mate-light-shades-base-contrast-5pct: #f2f3f5;
    --mate-light-shades-contrast-5pct: #001F420d;
    --mate-light-shades-contrast-10pct: #001F421a;
    --mate-light-shades-contrast-20pct: #001F4233;
    --mate-light-shades-contrast-30pct: #001F424d;
    --mate-light-shades-contrast-40pct: #001F4260;
    --mate-light-shades-contrast-50pct: #001F4282;
    --mate-light-shades-contrast-60pct: #001F429c;
    --mate-light-shades-contrast-70pct: #001F42b3;
    --mate-light-shades-contrast-80pct: #001F42c0;
    --mate-light-shades-contrast-90pct: #001F42e6;
    --mate-light-shades-shade-10pct: #001F421a;
    --mate-light-shades-shade-20pct: #001F4233;
    --mate-light-shades-shade-30pct: #001F424d;
    --mate-light-shades-shade-40pct: #001F4260;
    --mate-light-shades-shade-50pct: #001F4282;
    --mate-light-signal-danger-light: #e7131d1a;
    --mate-light-signal-info-light: #3392ff21;
    --mate-light-signal-success-light: #1688381a;
    --mate-light-signal-warning-light: #ff6a0038;
    --mate-light-signal-primary-light: #3392ff21;
    --mate-dark-components-calendar-event-background-magenta: #D0267024;
    --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
    --mate-dark-components-calendar-event-background-cyan: #0076A51F;
    --mate-dark-components-calendar-event-background-teal: #007D791F;
    --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
    --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
    --mate-dark-components-grid-border: #484F54;
    --mate-dark-components-grid-background-selected: #243546;
    --mate-dark-components-grid-background-hover: #243546;
    --mate-dark-components-grid-background-edited: #4A4627;
    --mate-dark-components-grid-background-danger: #3C2D31;
    --mate-dark-components-other-stepper-gradient-background: #21272A00;
    --mate-dark-components-other-global-header-background: #353B3F;
    --mate-dark-shades-base-contrast-5pct: #282e32;
    --mate-dark-shades-contrast-5pct: #e8f1fc09;
    --mate-dark-shades-contrast-10pct: #e8f1fc1a;
    --mate-dark-shades-contrast-20pct: #e8f1fc33;
    --mate-dark-shades-contrast-30pct: #e8f1fc4d;
    --mate-dark-shades-contrast-40pct: #e8f1fc60;
    --mate-dark-shades-contrast-50pct: #e8f1fc80;
    --mate-dark-shades-contrast-60pct: #e8f1fc9c;
    --mate-dark-shades-contrast-70pct: #e8f1fcb3;
    --mate-dark-shades-contrast-80pct: #e8f1fcc0;
    --mate-dark-shades-contrast-90pct: #e8f1fce6;
    --mate-dark-shades-shade-10pct: #05050512;
    --mate-dark-shades-shade-20pct: #090a0b3b;
    --mate-dark-shades-shade-30pct: #0d0f1152;
    --mate-dark-shades-shade-40pct: #11141869;
    --mate-dark-shades-shade-50pct: #14191f80;
    --mate-dark-signal-danger-light: #e7555d24;
    --mate-dark-signal-info-light: #3392ff21;
    --mate-dark-signal-success-light: #0ff5541a;
    --mate-dark-signal-warning-light: #ff6a0024;
    --mate-dark-signal-primary-light: #3392ff38;
    --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
    --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
    --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
    --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
    --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
    --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
    --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
    --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
    --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
    --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
    --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
    --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
    --mate-light-components-x-range-chart-2: var(--mate-purple-100);
    --mate-light-components-x-range-chart-3: var(--mate-teal-100);
    --mate-light-components-x-range-chart-4: var(--mate-orange-100);
    --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
    --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
    --mate-light-components-x-range-chart-7: var(--mate-green-100);
    --mate-light-components-x-range-chart-8: var(--mate-gray-100);
    --mate-light-components-x-range-chart-9: var(--mate-blue-100);
    --mate-light-components-x-range-chart-10: var(--mate-red-100);
    --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
    --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
    --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-illustrations-illustration-background: var(--mate-gray-10);
    --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
    --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
    --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
    --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
    --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
    --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
    --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
    --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
    --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
    --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
    --mate-light-shades-base: var(--mate-white-and-black-white);
    --mate-light-shades-contrast-100pct: var(--mate-blue-100);
    --mate-light-signal-danger: var(--mate-red-60);
    --mate-light-signal-info: var(--mate-blue-60);
    --mate-light-signal-success: var(--mate-green-60);
    --mate-light-signal-warning: var(--mate-orange-60);
    --mate-light-signal-primary: var(--mate-blue-60);
    --mate-light-signal-neutral: var(--mate-gray-60);
    --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
    --mate-light-icon-danger: var(--mate-red-60);
    --mate-light-icon-success: var(--mate-green-60);
    --mate-light-icon-warning: var(--mate-orange-60);
    --mate-light-icon-info: var(--mate-blue-60);
    --mate-light-icon-neutral: var(--mate-gray-60);
    --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
    --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-icon-interactive-active: var(--mate-blue-70);
    --mate-light-icon-interactive-selected: var(--mate-blue-70);
    --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
    --mate-light-interactive-focus: var(--mate-blue-100);
    --mate-light-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-interactive-danger-hover: var(--mate-red-70);
    --mate-light-interactive-danger-active: var(--mate-red-80);
    --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-interactive-hover: var(--mate-blue-70);
    --mate-light-interactive-active: var(--mate-blue-80);
    --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
    --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
    --mate-light-data-1: var(--mate-magenta-60);
    --mate-light-data-2: var(--mate-purple-60);
    --mate-light-data-3: var(--mate-teal-60);
    --mate-light-data-4: var(--mate-orange-60);
    --mate-light-data-5: var(--mate-cyan-60);
    --mate-light-data-6: var(--mate-yellow-60);
    --mate-light-data-7: var(--mate-green-60);
    --mate-light-data-8: var(--mate-gray-60);
    --mate-light-data-9: var(--mate-blue-60);
    --mate-light-data-10: var(--mate-red-60);
    --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
    --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
    --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
    --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-text-danger: var(--mate-red-70);
    --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
    --mate-light-text-info: var(--mate-blue-70);
    --mate-light-text-info-contrast: var(--mate-white-and-black-white);
    --mate-light-text-success: var(--mate-green-70);
    --mate-light-text-success-contrast: var(--mate-white-and-black-white);
    --mate-light-text-warning: var(--mate-orange-70);
    --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
    --mate-light-text-primary: var(--mate-blue-70);
    --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
    --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
    --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
    --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
    --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
    --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
    --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
    --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
    --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
    --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
    --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
    --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
    --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
    --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
    --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
    --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
    --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
    --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
    --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
    --mate-dark-components-x-range-chart-7: var(--mate-green-10);
    --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
    --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
    --mate-dark-components-x-range-chart-10: var(--mate-red-10);
    --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
    --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
    --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
    --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
    --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
    --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
    --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
    --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
    --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
    --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
    --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
    --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
    --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
    --mate-dark-shades-base: var(--mate-gray-90);
    --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
    --mate-dark-signal-danger: var(--mate-red-50);
    --mate-dark-signal-info: var(--mate-blue-50);
    --mate-dark-signal-success: var(--mate-green-50);
    --mate-dark-signal-warning: var(--mate-orange-50);
    --mate-dark-signal-primary: var(--mate-blue-50);
    --mate-dark-signal-neutral: var(--mate-gray-50);
    --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-icon-danger: var(--mate-red-50);
    --mate-dark-icon-success: var(--mate-green-50);
    --mate-dark-icon-warning: var(--mate-orange-50);
    --mate-dark-icon-info: var(--mate-blue-50);
    --mate-dark-icon-neutral: var(--mate-gray-50);
    --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-icon-interactive-active: var(--mate-blue-30);
    --mate-dark-icon-interactive-selected: var(--mate-blue-30);
    --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
    --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-interactive-focus: var(--mate-blue-10);
    --mate-dark-interactive-contrast: var(--mate-gray-100);
    --mate-dark-interactive-danger-hover: var(--mate-red-40);
    --mate-dark-interactive-danger-active: var(--mate-red-30);
    --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-interactive-hover: var(--mate-blue-40);
    --mate-dark-interactive-active: var(--mate-blue-30);
    --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
    --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
    --mate-dark-data-1: var(--mate-magenta-50);
    --mate-dark-data-2: var(--mate-purple-50);
    --mate-dark-data-3: var(--mate-teal-50);
    --mate-dark-data-4: var(--mate-orange-50);
    --mate-dark-data-5: var(--mate-cyan-50);
    --mate-dark-data-6: var(--mate-yellow-50);
    --mate-dark-data-7: var(--mate-green-50);
    --mate-dark-data-8: var(--mate-gray-50);
    --mate-dark-data-9: var(--mate-blue-50);
    --mate-dark-data-10: var(--mate-red-50);
    --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-text-danger: var(--mate-red-30);
    --mate-dark-text-danger-contrast: var(--mate-gray-100);
    --mate-dark-text-info: var(--mate-blue-30);
    --mate-dark-text-info-contrast: var(--mate-gray-100);
    --mate-dark-text-success: var(--mate-green-30);
    --mate-dark-text-success-contrast: var(--mate-gray-100);
    --mate-dark-text-warning: var(--mate-orange-30);
    --mate-dark-text-warning-contrast: var(--mate-gray-100);
    --mate-dark-text-primary: var(--mate-blue-30);
    --mate-dark-text-primary-contrast: var(--mate-gray-100);
    --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
    --mate-dark-text-neutral-contrast: var(--mate-gray-100);
    --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
    --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
    --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
    --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
    --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
    --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
    --mate-light-components-field-background: var(--mate-light-shades-base);
    --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
    --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
    --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
    --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
    --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
    --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
    --mate-light-interactive-enabled: var(--mate-light-signal-primary);
    --mate-light-interactive-selected: var(--mate-light-signal-primary);
    --mate-light-background-base: var(--mate-light-shades-base);
    --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
    --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
    --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
    --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
    --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
    --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
    --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
    --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
    --mate-dark-components-field-background: var(--mate-dark-shades-base);
    --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
    --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
    --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
    --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
    --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
    --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
    --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
    --mate-dark-background-base: var(--mate-dark-shades-base);
    --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
    --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}

.color-token {
    width: 200px;
    height: 20px;
}
.color-token {
    --mate-red-10: #fff1f1;
    --mate-red-20: #ffd7d9;
    --mate-red-30: #ffb3b8;
    --mate-red-40: #ff8389;
    --mate-red-50: #fa4d56;
    --mate-red-60: #e22c36;
    --mate-red-70: #a2191f;
    --mate-red-80: #750e13;
    --mate-red-90: #520408;
    --mate-red-100: #2d0709;
    --mate-magenta-10: #fff0f7;
    --mate-magenta-20: #ffd6e8;
    --mate-magenta-30: #ffafd2;
    --mate-magenta-40: #ff7eb6;
    --mate-magenta-50: #ee5396;
    --mate-magenta-60: #d02670;
    --mate-magenta-70: #9f1853;
    --mate-magenta-80: #740937;
    --mate-magenta-90: #510224;
    --mate-magenta-100: #2a0a18;
    --mate-purple-10: #f6f2ff;
    --mate-purple-20: #e8daff;
    --mate-purple-30: #d4bbff;
    --mate-purple-40: #be95ff;
    --mate-purple-50: #a56eff;
    --mate-purple-60: #8a3ffc;
    --mate-purple-70: #6929c4;
    --mate-purple-80: #491d8b;
    --mate-purple-90: #31135e;
    --mate-purple-100: #1c0f30;
    --mate-blue-10: #e6f0fc;
    --mate-blue-20: #c2dbf7;
    --mate-blue-30: #91bff1;
    --mate-blue-40: #5ea1ea;
    --mate-blue-50: #2e84e4;
    --mate-blue-60: #276ae1;
    --mate-blue-70: #0059bd;
    --mate-blue-80: #004b9e;
    --mate-blue-90: #00336b;
    --mate-blue-100: #001e40;
    --mate-cyan-10: #e6f1f6;
    --mate-cyan-20: #c2dee9;
    --mate-cyan-30: #91c4d8;
    --mate-cyan-40: #5ea9c6;
    --mate-cyan-50: #2e8fb5;
    --mate-cyan-60: #0076a5;
    --mate-cyan-70: #00648c;
    --mate-cyan-80: #005475;
    --mate-cyan-90: #00354a;
    --mate-cyan-100: #001b26;
    --mate-teal-10: #d9fbfb;
    --mate-teal-20: #9ef0f0;
    --mate-teal-30: #3ddbd9;
    --mate-teal-40: #08bdba;
    --mate-teal-50: #009d9a;
    --mate-teal-60: #007d79;
    --mate-teal-70: #005d5d;
    --mate-teal-80: #004144;
    --mate-teal-90: #022b30;
    --mate-teal-100: #081a1c;
    --mate-green-10: #defbe6;
    --mate-green-20: #a7f0ba;
    --mate-green-30: #6fdc8c;
    --mate-green-40: #42be65;
    --mate-green-50: #24a148;
    --mate-green-60: #1d873c;
    --mate-green-70: #0e6027;
    --mate-green-80: #044317;
    --mate-green-90: #022d0d;
    --mate-green-100: #071908;
    --mate-orange-10: #fff2e8;
    --mate-orange-20: #ffd9be;
    --mate-orange-30: #ffb784;
    --mate-orange-40: #ff832b;
    --mate-orange-50: #eb6200;
    --mate-orange-60: #c75300;
    --mate-orange-70: #8a3800;
    --mate-orange-80: #5e2900;
    --mate-orange-90: #3e1a00;
    --mate-orange-100: #231000;
    --mate-yellow-10: #fcf4d6;
    --mate-yellow-20: #fddc69;
    --mate-yellow-30: #f1c21b;
    --mate-yellow-40: #d2a106;
    --mate-yellow-50: #b28600;
    --mate-yellow-60: #8e6a00;
    --mate-yellow-70: #684e00;
    --mate-yellow-80: #483700;
    --mate-yellow-90: #302400;
    --mate-yellow-100: #1c1500;
    --mate-gray-10: #f2f4f8;
    --mate-gray-20: #dde1e6;
    --mate-gray-30: #c1c7cd;
    --mate-gray-40: #a2a9b0;
    --mate-gray-50: #878d96;
    --mate-gray-60: #6e7881;
    --mate-gray-70: #4d5358;
    --mate-gray-80: #343a3f;
    --mate-gray-90: #21272a;
    --mate-gray-100: #111518;

    --mate-white-and-black-white: #ffffff;
    --mate-white-and-black-black: #000000;
    --mate-light-components-calendar-event-background-magenta: #D0267024;
    --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-light-components-calendar-event-background-yellow: #F1C21B24;
    --mate-light-components-calendar-event-background-cyan: #0076A51F;
    --mate-light-components-calendar-event-background-teal: #007D791F;
    --mate-light-components-date-picker-gradient-background-visible: #001F420D;
    --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
    --mate-light-components-grid-border: #CCD2D9;
    --mate-light-components-grid-background-selected: #E5F1FF;
    --mate-light-components-grid-background-hover: #E5F1FF;
    --mate-light-components-grid-background-edited: #FCF3D1;
    --mate-light-components-grid-background-danger: #FDE8E9;
    --mate-light-components-akdb-logo-1: #00A1E0;
    --mate-light-components-akdb-logo-2: #003979;
    --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
    --mate-light-shades-base-contrast-5pct: #f2f3f5;
    --mate-light-shades-contrast-5pct: #001F420d;
    --mate-light-shades-contrast-10pct: #001F421a;
    --mate-light-shades-contrast-20pct: #001F4233;
    --mate-light-shades-contrast-30pct: #001F424d;
    --mate-light-shades-contrast-40pct: #001F4260;
    --mate-light-shades-contrast-50pct: #001F4282;
    --mate-light-shades-contrast-60pct: #001F429c;
    --mate-light-shades-contrast-70pct: #001F42b3;
    --mate-light-shades-contrast-80pct: #001F42c0;
    --mate-light-shades-contrast-90pct: #001F42e6;
    --mate-light-shades-shade-10pct: #001F421a;
    --mate-light-shades-shade-20pct: #001F4233;
    --mate-light-shades-shade-30pct: #001F424d;
    --mate-light-shades-shade-40pct: #001F4260;
    --mate-light-shades-shade-50pct: #001F4282;
    --mate-light-signal-danger-light: #e7131d1a;
    --mate-light-signal-info-light: #3392ff21;
    --mate-light-signal-success-light: #1688381a;
    --mate-light-signal-warning-light: #ff6a0038;
    --mate-light-signal-primary-light: #3392ff21;
    --mate-dark-components-calendar-event-background-magenta: #D0267024;
    --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
    --mate-dark-components-calendar-event-background-cyan: #0076A51F;
    --mate-dark-components-calendar-event-background-teal: #007D791F;
    --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
    --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
    --mate-dark-components-grid-border: #484F54;
    --mate-dark-components-grid-background-selected: #243546;
    --mate-dark-components-grid-background-hover: #243546;
    --mate-dark-components-grid-background-edited: #4A4627;
    --mate-dark-components-grid-background-danger: #3C2D31;
    --mate-dark-components-other-stepper-gradient-background: #21272A00;
    --mate-dark-components-other-global-header-background: #353B3F;
    --mate-dark-shades-base-contrast-5pct: #282e32;
    --mate-dark-shades-contrast-5pct: #e8f1fc09;
    --mate-dark-shades-contrast-10pct: #e8f1fc1a;
    --mate-dark-shades-contrast-20pct: #e8f1fc33;
    --mate-dark-shades-contrast-30pct: #e8f1fc4d;
    --mate-dark-shades-contrast-40pct: #e8f1fc60;
    --mate-dark-shades-contrast-50pct: #e8f1fc80;
    --mate-dark-shades-contrast-60pct: #e8f1fc9c;
    --mate-dark-shades-contrast-70pct: #e8f1fcb3;
    --mate-dark-shades-contrast-80pct: #e8f1fcc0;
    --mate-dark-shades-contrast-90pct: #e8f1fce6;
    --mate-dark-shades-shade-10pct: #05050512;
    --mate-dark-shades-shade-20pct: #090a0b3b;
    --mate-dark-shades-shade-30pct: #0d0f1152;
    --mate-dark-shades-shade-40pct: #11141869;
    --mate-dark-shades-shade-50pct: #14191f80;
    --mate-dark-signal-danger-light: #e7555d24;
    --mate-dark-signal-info-light: #3392ff21;
    --mate-dark-signal-success-light: #0ff5541a;
    --mate-dark-signal-warning-light: #ff6a0024;
    --mate-dark-signal-primary-light: #3392ff38;
    --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
    --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
    --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
    --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
    --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
    --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
    --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
    --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
    --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
    --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
    --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
    --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
    --mate-light-components-x-range-chart-2: var(--mate-purple-100);
    --mate-light-components-x-range-chart-3: var(--mate-teal-100);
    --mate-light-components-x-range-chart-4: var(--mate-orange-100);
    --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
    --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
    --mate-light-components-x-range-chart-7: var(--mate-green-100);
    --mate-light-components-x-range-chart-8: var(--mate-gray-100);
    --mate-light-components-x-range-chart-9: var(--mate-blue-100);
    --mate-light-components-x-range-chart-10: var(--mate-red-100);
    --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
    --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
    --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-illustrations-illustration-background: var(--mate-gray-10);
    --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
    --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
    --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
    --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
    --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
    --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
    --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
    --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
    --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
    --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
    --mate-light-shades-base: var(--mate-white-and-black-white);
    --mate-light-shades-contrast-100pct: var(--mate-blue-100);
    --mate-light-signal-danger: var(--mate-red-60);
    --mate-light-signal-info: var(--mate-blue-60);
    --mate-light-signal-success: var(--mate-green-60);
    --mate-light-signal-warning: var(--mate-orange-60);
    --mate-light-signal-primary: var(--mate-blue-60);
    --mate-light-signal-neutral: var(--mate-gray-60);
    --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
    --mate-light-icon-danger: var(--mate-red-60);
    --mate-light-icon-success: var(--mate-green-60);
    --mate-light-icon-warning: var(--mate-orange-60);
    --mate-light-icon-info: var(--mate-blue-60);
    --mate-light-icon-neutral: var(--mate-gray-60);
    --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
    --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-icon-interactive-active: var(--mate-blue-70);
    --mate-light-icon-interactive-selected: var(--mate-blue-70);
    --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
    --mate-light-interactive-focus: var(--mate-blue-100);
    --mate-light-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-interactive-danger-hover: var(--mate-red-70);
    --mate-light-interactive-danger-active: var(--mate-red-80);
    --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-interactive-hover: var(--mate-blue-70);
    --mate-light-interactive-active: var(--mate-blue-80);
    --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
    --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
    --mate-light-data-1: var(--mate-magenta-60);
    --mate-light-data-2: var(--mate-purple-60);
    --mate-light-data-3: var(--mate-teal-60);
    --mate-light-data-4: var(--mate-orange-60);
    --mate-light-data-5: var(--mate-cyan-60);
    --mate-light-data-6: var(--mate-yellow-60);
    --mate-light-data-7: var(--mate-green-60);
    --mate-light-data-8: var(--mate-gray-60);
    --mate-light-data-9: var(--mate-blue-60);
    --mate-light-data-10: var(--mate-red-60);
    --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
    --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
    --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
    --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-text-danger: var(--mate-red-70);
    --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
    --mate-light-text-info: var(--mate-blue-70);
    --mate-light-text-info-contrast: var(--mate-white-and-black-white);
    --mate-light-text-success: var(--mate-green-70);
    --mate-light-text-success-contrast: var(--mate-white-and-black-white);
    --mate-light-text-warning: var(--mate-orange-70);
    --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
    --mate-light-text-primary: var(--mate-blue-70);
    --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
    --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
    --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
    --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
    --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
    --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
    --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
    --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
    --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
    --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
    --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
    --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
    --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
    --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
    --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
    --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
    --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
    --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
    --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
    --mate-dark-components-x-range-chart-7: var(--mate-green-10);
    --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
    --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
    --mate-dark-components-x-range-chart-10: var(--mate-red-10);
    --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
    --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
    --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
    --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
    --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
    --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
    --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
    --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
    --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
    --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
    --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
    --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
    --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
    --mate-dark-shades-base: var(--mate-gray-90);
    --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
    --mate-dark-signal-danger: var(--mate-red-50);
    --mate-dark-signal-info: var(--mate-blue-50);
    --mate-dark-signal-success: var(--mate-green-50);
    --mate-dark-signal-warning: var(--mate-orange-50);
    --mate-dark-signal-primary: var(--mate-blue-50);
    --mate-dark-signal-neutral: var(--mate-gray-50);
    --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-icon-danger: var(--mate-red-50);
    --mate-dark-icon-success: var(--mate-green-50);
    --mate-dark-icon-warning: var(--mate-orange-50);
    --mate-dark-icon-info: var(--mate-blue-50);
    --mate-dark-icon-neutral: var(--mate-gray-50);
    --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-icon-interactive-active: var(--mate-blue-30);
    --mate-dark-icon-interactive-selected: var(--mate-blue-30);
    --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
    --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-interactive-focus: var(--mate-blue-10);
    --mate-dark-interactive-contrast: var(--mate-gray-100);
    --mate-dark-interactive-danger-hover: var(--mate-red-40);
    --mate-dark-interactive-danger-active: var(--mate-red-30);
    --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-interactive-hover: var(--mate-blue-40);
    --mate-dark-interactive-active: var(--mate-blue-30);
    --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
    --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
    --mate-dark-data-1: var(--mate-magenta-50);
    --mate-dark-data-2: var(--mate-purple-50);
    --mate-dark-data-3: var(--mate-teal-50);
    --mate-dark-data-4: var(--mate-orange-50);
    --mate-dark-data-5: var(--mate-cyan-50);
    --mate-dark-data-6: var(--mate-yellow-50);
    --mate-dark-data-7: var(--mate-green-50);
    --mate-dark-data-8: var(--mate-gray-50);
    --mate-dark-data-9: var(--mate-blue-50);
    --mate-dark-data-10: var(--mate-red-50);
    --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-text-danger: var(--mate-red-30);
    --mate-dark-text-danger-contrast: var(--mate-gray-100);
    --mate-dark-text-info: var(--mate-blue-30);
    --mate-dark-text-info-contrast: var(--mate-gray-100);
    --mate-dark-text-success: var(--mate-green-30);
    --mate-dark-text-success-contrast: var(--mate-gray-100);
    --mate-dark-text-warning: var(--mate-orange-30);
    --mate-dark-text-warning-contrast: var(--mate-gray-100);
    --mate-dark-text-primary: var(--mate-blue-30);
    --mate-dark-text-primary-contrast: var(--mate-gray-100);
    --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
    --mate-dark-text-neutral-contrast: var(--mate-gray-100);
    --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
    --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
    --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
    --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
    --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
    --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
    --mate-light-components-field-background: var(--mate-light-shades-base);
    --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
    --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
    --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
    --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
    --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
    --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
    --mate-light-interactive-enabled: var(--mate-light-signal-primary);
    --mate-light-interactive-selected: var(--mate-light-signal-primary);
    --mate-light-background-base: var(--mate-light-shades-base);
    --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
    --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
    --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
    --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
    --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
    --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
    --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
    --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
    --mate-dark-components-field-background: var(--mate-dark-shades-base);
    --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
    --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
    --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
    --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
    --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
    --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
    --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
    --mate-dark-background-base: var(--mate-dark-shades-base);
    --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
    --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}

.material-icons {
    --icon-size: var(--mate-desktop-icon-sizing-md);
    width: var(--icon-size);
    height: var(--icon-size);
    font-size: var(--icon-size);
    color: var(--mate-light-icon-not-interactive);
    background-color: white;
}
.material-icons {
    --mate-desktop-icon-sizing-sm: 1rem;
    --mate-desktop-icon-sizing-sm-md: 1.25rem;
    --mate-desktop-icon-sizing-md: 1.5rem;
    --mate-desktop-icon-sizing-lg: 2rem;

    --mate-red-10: #fff1f1;
    --mate-red-20: #ffd7d9;
    --mate-red-30: #ffb3b8;
    --mate-red-40: #ff8389;
    --mate-red-50: #fa4d56;
    --mate-red-60: #e22c36;
    --mate-red-70: #a2191f;
    --mate-red-80: #750e13;
    --mate-red-90: #520408;
    --mate-red-100: #2d0709;
    --mate-magenta-10: #fff0f7;
    --mate-magenta-20: #ffd6e8;
    --mate-magenta-30: #ffafd2;
    --mate-magenta-40: #ff7eb6;
    --mate-magenta-50: #ee5396;
    --mate-magenta-60: #d02670;
    --mate-magenta-70: #9f1853;
    --mate-magenta-80: #740937;
    --mate-magenta-90: #510224;
    --mate-magenta-100: #2a0a18;
    --mate-purple-10: #f6f2ff;
    --mate-purple-20: #e8daff;
    --mate-purple-30: #d4bbff;
    --mate-purple-40: #be95ff;
    --mate-purple-50: #a56eff;
    --mate-purple-60: #8a3ffc;
    --mate-purple-70: #6929c4;
    --mate-purple-80: #491d8b;
    --mate-purple-90: #31135e;
    --mate-purple-100: #1c0f30;
    --mate-blue-10: #e6f0fc;
    --mate-blue-20: #c2dbf7;
    --mate-blue-30: #91bff1;
    --mate-blue-40: #5ea1ea;
    --mate-blue-50: #2e84e4;
    --mate-blue-60: #276ae1;
    --mate-blue-70: #0059bd;
    --mate-blue-80: #004b9e;
    --mate-blue-90: #00336b;
    --mate-blue-100: #001e40;
    --mate-cyan-10: #e6f1f6;
    --mate-cyan-20: #c2dee9;
    --mate-cyan-30: #91c4d8;
    --mate-cyan-40: #5ea9c6;
    --mate-cyan-50: #2e8fb5;
    --mate-cyan-60: #0076a5;
    --mate-cyan-70: #00648c;
    --mate-cyan-80: #005475;
    --mate-cyan-90: #00354a;
    --mate-cyan-100: #001b26;
    --mate-teal-10: #d9fbfb;
    --mate-teal-20: #9ef0f0;
    --mate-teal-30: #3ddbd9;
    --mate-teal-40: #08bdba;
    --mate-teal-50: #009d9a;
    --mate-teal-60: #007d79;
    --mate-teal-70: #005d5d;
    --mate-teal-80: #004144;
    --mate-teal-90: #022b30;
    --mate-teal-100: #081a1c;
    --mate-green-10: #defbe6;
    --mate-green-20: #a7f0ba;
    --mate-green-30: #6fdc8c;
    --mate-green-40: #42be65;
    --mate-green-50: #24a148;
    --mate-green-60: #1d873c;
    --mate-green-70: #0e6027;
    --mate-green-80: #044317;
    --mate-green-90: #022d0d;
    --mate-green-100: #071908;
    --mate-orange-10: #fff2e8;
    --mate-orange-20: #ffd9be;
    --mate-orange-30: #ffb784;
    --mate-orange-40: #ff832b;
    --mate-orange-50: #eb6200;
    --mate-orange-60: #c75300;
    --mate-orange-70: #8a3800;
    --mate-orange-80: #5e2900;
    --mate-orange-90: #3e1a00;
    --mate-orange-100: #231000;
    --mate-yellow-10: #fcf4d6;
    --mate-yellow-20: #fddc69;
    --mate-yellow-30: #f1c21b;
    --mate-yellow-40: #d2a106;
    --mate-yellow-50: #b28600;
    --mate-yellow-60: #8e6a00;
    --mate-yellow-70: #684e00;
    --mate-yellow-80: #483700;
    --mate-yellow-90: #302400;
    --mate-yellow-100: #1c1500;
    --mate-gray-10: #f2f4f8;
    --mate-gray-20: #dde1e6;
    --mate-gray-30: #c1c7cd;
    --mate-gray-40: #a2a9b0;
    --mate-gray-50: #878d96;
    --mate-gray-60: #6e7881;
    --mate-gray-70: #4d5358;
    --mate-gray-80: #343a3f;
    --mate-gray-90: #21272a;
    --mate-gray-100: #111518;

    --mate-white-and-black-white: #ffffff;
    --mate-white-and-black-black: #000000;
    --mate-light-components-calendar-event-background-magenta: #D0267024;
    --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-light-components-calendar-event-background-yellow: #F1C21B24;
    --mate-light-components-calendar-event-background-cyan: #0076A51F;
    --mate-light-components-calendar-event-background-teal: #007D791F;
    --mate-light-components-date-picker-gradient-background-visible: #001F420D;
    --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
    --mate-light-components-grid-border: #CCD2D9;
    --mate-light-components-grid-background-selected: #E5F1FF;
    --mate-light-components-grid-background-hover: #E5F1FF;
    --mate-light-components-grid-background-edited: #FCF3D1;
    --mate-light-components-grid-background-danger: #FDE8E9;
    --mate-light-components-akdb-logo-1: #00A1E0;
    --mate-light-components-akdb-logo-2: #003979;
    --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
    --mate-light-shades-base-contrast-5pct: #f2f3f5;
    --mate-light-shades-contrast-5pct: #001F420d;
    --mate-light-shades-contrast-10pct: #001F421a;
    --mate-light-shades-contrast-20pct: #001F4233;
    --mate-light-shades-contrast-30pct: #001F424d;
    --mate-light-shades-contrast-40pct: #001F4260;
    --mate-light-shades-contrast-50pct: #001F4282;
    --mate-light-shades-contrast-60pct: #001F429c;
    --mate-light-shades-contrast-70pct: #001F42b3;
    --mate-light-shades-contrast-80pct: #001F42c0;
    --mate-light-shades-contrast-90pct: #001F42e6;
    --mate-light-shades-shade-10pct: #001F421a;
    --mate-light-shades-shade-20pct: #001F4233;
    --mate-light-shades-shade-30pct: #001F424d;
    --mate-light-shades-shade-40pct: #001F4260;
    --mate-light-shades-shade-50pct: #001F4282;
    --mate-light-signal-danger-light: #e7131d1a;
    --mate-light-signal-info-light: #3392ff21;
    --mate-light-signal-success-light: #1688381a;
    --mate-light-signal-warning-light: #ff6a0038;
    --mate-light-signal-primary-light: #3392ff21;
    --mate-dark-components-calendar-event-background-magenta: #D0267024;
    --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
    --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
    --mate-dark-components-calendar-event-background-cyan: #0076A51F;
    --mate-dark-components-calendar-event-background-teal: #007D791F;
    --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
    --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
    --mate-dark-components-grid-border: #484F54;
    --mate-dark-components-grid-background-selected: #243546;
    --mate-dark-components-grid-background-hover: #243546;
    --mate-dark-components-grid-background-edited: #4A4627;
    --mate-dark-components-grid-background-danger: #3C2D31;
    --mate-dark-components-other-stepper-gradient-background: #21272A00;
    --mate-dark-components-other-global-header-background: #353B3F;
    --mate-dark-shades-base-contrast-5pct: #282e32;
    --mate-dark-shades-contrast-5pct: #e8f1fc09;
    --mate-dark-shades-contrast-10pct: #e8f1fc1a;
    --mate-dark-shades-contrast-20pct: #e8f1fc33;
    --mate-dark-shades-contrast-30pct: #e8f1fc4d;
    --mate-dark-shades-contrast-40pct: #e8f1fc60;
    --mate-dark-shades-contrast-50pct: #e8f1fc80;
    --mate-dark-shades-contrast-60pct: #e8f1fc9c;
    --mate-dark-shades-contrast-70pct: #e8f1fcb3;
    --mate-dark-shades-contrast-80pct: #e8f1fcc0;
    --mate-dark-shades-contrast-90pct: #e8f1fce6;
    --mate-dark-shades-shade-10pct: #05050512;
    --mate-dark-shades-shade-20pct: #090a0b3b;
    --mate-dark-shades-shade-30pct: #0d0f1152;
    --mate-dark-shades-shade-40pct: #11141869;
    --mate-dark-shades-shade-50pct: #14191f80;
    --mate-dark-signal-danger-light: #e7555d24;
    --mate-dark-signal-info-light: #3392ff21;
    --mate-dark-signal-success-light: #0ff5541a;
    --mate-dark-signal-warning-light: #ff6a0024;
    --mate-dark-signal-primary-light: #3392ff38;
    --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
    --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
    --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
    --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
    --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
    --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
    --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
    --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
    --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
    --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
    --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
    --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
    --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
    --mate-light-components-x-range-chart-2: var(--mate-purple-100);
    --mate-light-components-x-range-chart-3: var(--mate-teal-100);
    --mate-light-components-x-range-chart-4: var(--mate-orange-100);
    --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
    --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
    --mate-light-components-x-range-chart-7: var(--mate-green-100);
    --mate-light-components-x-range-chart-8: var(--mate-gray-100);
    --mate-light-components-x-range-chart-9: var(--mate-blue-100);
    --mate-light-components-x-range-chart-10: var(--mate-red-100);
    --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
    --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
    --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
    --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-illustrations-illustration-background: var(--mate-gray-10);
    --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
    --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
    --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
    --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
    --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
    --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
    --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
    --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
    --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
    --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
    --mate-light-shades-base: var(--mate-white-and-black-white);
    --mate-light-shades-contrast-100pct: var(--mate-blue-100);
    --mate-light-signal-danger: var(--mate-red-60);
    --mate-light-signal-info: var(--mate-blue-60);
    --mate-light-signal-success: var(--mate-green-60);
    --mate-light-signal-warning: var(--mate-orange-60);
    --mate-light-signal-primary: var(--mate-blue-60);
    --mate-light-signal-neutral: var(--mate-gray-60);
    --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
    --mate-light-icon-danger: var(--mate-red-60);
    --mate-light-icon-success: var(--mate-green-60);
    --mate-light-icon-warning: var(--mate-orange-60);
    --mate-light-icon-info: var(--mate-blue-60);
    --mate-light-icon-neutral: var(--mate-gray-60);
    --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
    --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
    --mate-light-icon-interactive-active: var(--mate-blue-70);
    --mate-light-icon-interactive-selected: var(--mate-blue-70);
    --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
    --mate-light-interactive-focus: var(--mate-blue-100);
    --mate-light-interactive-contrast: var(--mate-white-and-black-white);
    --mate-light-interactive-danger-hover: var(--mate-red-70);
    --mate-light-interactive-danger-active: var(--mate-red-80);
    --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-interactive-hover: var(--mate-blue-70);
    --mate-light-interactive-active: var(--mate-blue-80);
    --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
    --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
    --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
    --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
    --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
    --mate-light-data-1: var(--mate-magenta-60);
    --mate-light-data-2: var(--mate-purple-60);
    --mate-light-data-3: var(--mate-teal-60);
    --mate-light-data-4: var(--mate-orange-60);
    --mate-light-data-5: var(--mate-cyan-60);
    --mate-light-data-6: var(--mate-yellow-60);
    --mate-light-data-7: var(--mate-green-60);
    --mate-light-data-8: var(--mate-gray-60);
    --mate-light-data-9: var(--mate-blue-60);
    --mate-light-data-10: var(--mate-red-60);
    --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
    --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
    --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
    --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
    --mate-light-text-danger: var(--mate-red-70);
    --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
    --mate-light-text-info: var(--mate-blue-70);
    --mate-light-text-info-contrast: var(--mate-white-and-black-white);
    --mate-light-text-success: var(--mate-green-70);
    --mate-light-text-success-contrast: var(--mate-white-and-black-white);
    --mate-light-text-warning: var(--mate-orange-70);
    --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
    --mate-light-text-primary: var(--mate-blue-70);
    --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
    --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
    --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
    --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
    --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
    --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
    --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
    --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
    --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
    --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
    --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
    --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
    --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
    --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
    --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
    --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
    --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
    --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
    --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
    --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
    --mate-dark-components-x-range-chart-7: var(--mate-green-10);
    --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
    --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
    --mate-dark-components-x-range-chart-10: var(--mate-red-10);
    --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
    --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
    --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
    --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
    --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
    --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
    --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
    --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
    --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
    --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
    --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
    --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
    --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
    --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
    --mate-dark-shades-base: var(--mate-gray-90);
    --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
    --mate-dark-signal-danger: var(--mate-red-50);
    --mate-dark-signal-info: var(--mate-blue-50);
    --mate-dark-signal-success: var(--mate-green-50);
    --mate-dark-signal-warning: var(--mate-orange-50);
    --mate-dark-signal-primary: var(--mate-blue-50);
    --mate-dark-signal-neutral: var(--mate-gray-50);
    --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-icon-danger: var(--mate-red-50);
    --mate-dark-icon-success: var(--mate-green-50);
    --mate-dark-icon-warning: var(--mate-orange-50);
    --mate-dark-icon-info: var(--mate-blue-50);
    --mate-dark-icon-neutral: var(--mate-gray-50);
    --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-icon-interactive-active: var(--mate-blue-30);
    --mate-dark-icon-interactive-selected: var(--mate-blue-30);
    --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
    --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-interactive-focus: var(--mate-blue-10);
    --mate-dark-interactive-contrast: var(--mate-gray-100);
    --mate-dark-interactive-danger-hover: var(--mate-red-40);
    --mate-dark-interactive-danger-active: var(--mate-red-30);
    --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-interactive-hover: var(--mate-blue-40);
    --mate-dark-interactive-active: var(--mate-blue-30);
    --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
    --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
    --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
    --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
    --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
    --mate-dark-data-1: var(--mate-magenta-50);
    --mate-dark-data-2: var(--mate-purple-50);
    --mate-dark-data-3: var(--mate-teal-50);
    --mate-dark-data-4: var(--mate-orange-50);
    --mate-dark-data-5: var(--mate-cyan-50);
    --mate-dark-data-6: var(--mate-yellow-50);
    --mate-dark-data-7: var(--mate-green-50);
    --mate-dark-data-8: var(--mate-gray-50);
    --mate-dark-data-9: var(--mate-blue-50);
    --mate-dark-data-10: var(--mate-red-50);
    --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
    --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
    --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
    --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
    --mate-dark-text-danger: var(--mate-red-30);
    --mate-dark-text-danger-contrast: var(--mate-gray-100);
    --mate-dark-text-info: var(--mate-blue-30);
    --mate-dark-text-info-contrast: var(--mate-gray-100);
    --mate-dark-text-success: var(--mate-green-30);
    --mate-dark-text-success-contrast: var(--mate-gray-100);
    --mate-dark-text-warning: var(--mate-orange-30);
    --mate-dark-text-warning-contrast: var(--mate-gray-100);
    --mate-dark-text-primary: var(--mate-blue-30);
    --mate-dark-text-primary-contrast: var(--mate-gray-100);
    --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
    --mate-dark-text-neutral-contrast: var(--mate-gray-100);
    --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
    --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
    --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
    --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
    --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
    --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
    --mate-light-components-field-background: var(--mate-light-shades-base);
    --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
    --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
    --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
    --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
    --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
    --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
    --mate-light-interactive-enabled: var(--mate-light-signal-primary);
    --mate-light-interactive-selected: var(--mate-light-signal-primary);
    --mate-light-background-base: var(--mate-light-shades-base);
    --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
    --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
    --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
    --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
    --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
    --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
    --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
    --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
    --mate-dark-components-field-background: var(--mate-dark-shades-base);
    --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
    --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
    --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
    --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
    --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
    --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
    --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
    --mate-dark-background-base: var(--mate-dark-shades-base);
    --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
    --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}

.VPLocalSearchBox[data-v-d148552d] {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
}
.backdrop[data-v-d148552d] {
  position: absolute;
  inset: 0;
  background: var(--vp-backdrop-bg-color);
  transition: opacity 0.5s;
}
.shell[data-v-d148552d] {
  position: relative;
  padding: 12px;
  margin: 64px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--vp-local-search-bg);
  width: min(100vw - 60px, 900px);
  height: min-content;
  max-height: min(100vh - 128px, 900px);
  border-radius: 6px;
}
@media (max-width: 767px) {
.shell[data-v-d148552d] {
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
}
}
.search-bar[data-v-d148552d] {
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: text;
}
@media (max-width: 767px) {
.search-bar[data-v-d148552d] {
    padding: 0 8px;
}
}
.search-bar[data-v-d148552d]:focus-within {
  border-color: var(--vp-c-brand-1);
}
.local-search-icon[data-v-d148552d] {
  display: block;
  font-size: 18px;
}
.navigate-icon[data-v-d148552d] {
  display: block;
  font-size: 14px;
}
.search-icon[data-v-d148552d] {
  margin: 8px;
}
@media (max-width: 767px) {
.search-icon[data-v-d148552d] {
    display: none;
}
}
.search-input[data-v-d148552d] {
  padding: 6px 12px;
  font-size: inherit;
  width: 100%;
}
.search-input[data-v-d148552d]::-webkit-search-cancel-button {
  display: none;
}
@media (max-width: 767px) {
.search-input[data-v-d148552d] {
    padding: 6px 4px;
}
}
.search-actions[data-v-d148552d] {
  display: flex;
  gap: 4px;
}
@media (any-pointer: coarse) {
.search-actions[data-v-d148552d] {
    gap: 8px;
}
}
@media (min-width: 769px) {
.search-actions.before[data-v-d148552d] {
    display: none;
}
}
.search-actions button[data-v-d148552d] {
  padding: 8px;
}
.search-actions button[data-v-d148552d]:not([disabled]):hover,
.toggle-layout-button.detailed-list[data-v-d148552d] {
  color: var(--vp-c-brand-1);
}
.search-actions button.clear-button[data-v-d148552d]:disabled {
  opacity: 0.37;
}
.search-loading[data-v-d148552d] {
  visibility: hidden;
  margin: 8px;
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--vp-c-divider);
  border-top-color: var(--vp-c-brand-1);
  border-radius: 50%;
}
.search-loading.active[data-v-d148552d] {
  visibility: visible;
  animation: local-search-loading-d148552d 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.search-loading.active[data-v-d148552d] {
    animation: none;
}
}
@keyframes local-search-loading-d148552d {
to {
    transform: rotate(360deg);
}
}
.search-keyboard-shortcuts[data-v-d148552d] {
  font-size: 0.8rem;
  opacity: 75%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  line-height: 14px;
}
.search-keyboard-shortcuts span[data-v-d148552d] {
  display: flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 767px) {
.search-keyboard-shortcuts[data-v-d148552d] {
    display: none;
}
}
.search-keyboard-shortcuts kbd[data-v-d148552d] {
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  padding: 3px 6px;
  min-width: 24px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgba(128, 128, 128, 0.15);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.results[data-v-d148552d] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.result[data-v-d148552d] {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  transition: none;
  line-height: 1rem;
  border: solid 2px var(--vp-local-search-result-border);
  outline: none;
}
.result > div[data-v-d148552d] {
  margin: 12px;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 767px) {
.result > div[data-v-d148552d] {
    margin: 8px;
}
}
.titles[data-v-d148552d] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: relative;
  z-index: 1001;
  padding: 2px 0;
}
.title[data-v-d148552d] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.title.main[data-v-d148552d] {
  font-weight: 500;
}
.title-icon[data-v-d148552d] {
  opacity: 0.5;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}
.title svg[data-v-d148552d] {
  opacity: 0.5;
}
.result.selected[data-v-d148552d] {
  --vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);
  border-color: var(--vp-local-search-result-selected-border);
}
.excerpt-wrapper[data-v-d148552d] {
  position: relative;
}
.excerpt[data-v-d148552d] {
  opacity: 50%;
  pointer-events: none;
  max-height: 140px;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}
.result.selected .excerpt[data-v-d148552d] {
  opacity: 1;
}
.excerpt[data-v-d148552d] * {
  font-size: 0.8rem !important;
  line-height: 130% !important;
}
.titles[data-v-d148552d] mark,
.excerpt[data-v-d148552d] mark {
  background-color: var(--vp-local-search-highlight-bg);
  color: var(--vp-local-search-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}
.excerpt[data-v-d148552d] .vp-code-group .tabs {
  display: none;
}
.excerpt[data-v-d148552d] .vp-code-group div[class*='language-'] {
  border-radius: 8px !important;
}
.excerpt-gradient-bottom[data-v-d148552d] {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(transparent, var(--vp-local-search-result-bg));
  z-index: 1000;
}
.excerpt-gradient-top[data-v-d148552d] {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(var(--vp-local-search-result-bg), transparent);
  z-index: 1000;
}
.result.selected .titles[data-v-d148552d],
.result.selected .title-icon[data-v-d148552d] {
  color: var(--vp-c-brand-1) !important;
}
.no-results[data-v-d148552d] {
  font-size: 0.9rem;
  text-align: center;
  padding: 12px;
}
svg[data-v-d148552d] {
  flex: none;
}
/**
 * MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
 */

:root {
  --mate-red-10: #fff1f1;
  --mate-red-20: #ffd7d9;
  --mate-red-30: #ffb3b8;
  --mate-red-40: #ff8389;
  --mate-red-50: #fa4d56;
  --mate-red-60: #e22c36;
  --mate-red-70: #a2191f;
  --mate-red-80: #750e13;
  --mate-red-90: #520408;
  --mate-red-100: #2d0709;
  --mate-magenta-10: #fff0f7;
  --mate-magenta-20: #ffd6e8;
  --mate-magenta-30: #ffafd2;
  --mate-magenta-40: #ff7eb6;
  --mate-magenta-50: #ee5396;
  --mate-magenta-60: #d02670;
  --mate-magenta-70: #9f1853;
  --mate-magenta-80: #740937;
  --mate-magenta-90: #510224;
  --mate-magenta-100: #2a0a18;
  --mate-purple-10: #f6f2ff;
  --mate-purple-20: #e8daff;
  --mate-purple-30: #d4bbff;
  --mate-purple-40: #be95ff;
  --mate-purple-50: #a56eff;
  --mate-purple-60: #8a3ffc;
  --mate-purple-70: #6929c4;
  --mate-purple-80: #491d8b;
  --mate-purple-90: #31135e;
  --mate-purple-100: #1c0f30;
  --mate-blue-10: #e6f0fc;
  --mate-blue-20: #c2dbf7;
  --mate-blue-30: #91bff1;
  --mate-blue-40: #5ea1ea;
  --mate-blue-50: #2e84e4;
  --mate-blue-60: #276ae1;
  --mate-blue-70: #0059bd;
  --mate-blue-80: #004b9e;
  --mate-blue-90: #00336b;
  --mate-blue-100: #001e40;
  --mate-cyan-10: #e6f1f6;
  --mate-cyan-20: #c2dee9;
  --mate-cyan-30: #91c4d8;
  --mate-cyan-40: #5ea9c6;
  --mate-cyan-50: #2e8fb5;
  --mate-cyan-60: #0076a5;
  --mate-cyan-70: #00648c;
  --mate-cyan-80: #005475;
  --mate-cyan-90: #00354a;
  --mate-cyan-100: #001b26;
  --mate-teal-10: #d9fbfb;
  --mate-teal-20: #9ef0f0;
  --mate-teal-30: #3ddbd9;
  --mate-teal-40: #08bdba;
  --mate-teal-50: #009d9a;
  --mate-teal-60: #007d79;
  --mate-teal-70: #005d5d;
  --mate-teal-80: #004144;
  --mate-teal-90: #022b30;
  --mate-teal-100: #081a1c;
  --mate-green-10: #defbe6;
  --mate-green-20: #a7f0ba;
  --mate-green-30: #6fdc8c;
  --mate-green-40: #42be65;
  --mate-green-50: #24a148;
  --mate-green-60: #1d873c;
  --mate-green-70: #0e6027;
  --mate-green-80: #044317;
  --mate-green-90: #022d0d;
  --mate-green-100: #071908;
  --mate-orange-10: #fff2e8;
  --mate-orange-20: #ffd9be;
  --mate-orange-30: #ffb784;
  --mate-orange-40: #ff832b;
  --mate-orange-50: #eb6200;
  --mate-orange-60: #c75300;
  --mate-orange-70: #8a3800;
  --mate-orange-80: #5e2900;
  --mate-orange-90: #3e1a00;
  --mate-orange-100: #231000;
  --mate-yellow-10: #fcf4d6;
  --mate-yellow-20: #fddc69;
  --mate-yellow-30: #f1c21b;
  --mate-yellow-40: #d2a106;
  --mate-yellow-50: #b28600;
  --mate-yellow-60: #8e6a00;
  --mate-yellow-70: #684e00;
  --mate-yellow-80: #483700;
  --mate-yellow-90: #302400;
  --mate-yellow-100: #1c1500;
  --mate-gray-10: #f2f4f8;
  --mate-gray-20: #dde1e6;
  --mate-gray-30: #c1c7cd;
  --mate-gray-40: #a2a9b0;
  --mate-gray-50: #878d96;
  --mate-gray-60: #6e7881;
  --mate-gray-70: #4d5358;
  --mate-gray-80: #343a3f;
  --mate-gray-90: #21272a;
  --mate-gray-100: #111518;
  --mate-white-and-black-white: #ffffff;
  --mate-white-and-black-black: #000000;
}
/**
 * MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
 */

:root {
  --mate-typography-font-sizing-100: 1rem;
  --mate-typography-font-sizing-112: 1.125rem;
  --mate-typography-font-sizing-125: 1.25rem;
  --mate-typography-font-sizing-150: 1.5rem;
  --mate-typography-font-sizing-175: 1.75rem;
  --mate-typography-font-sizing-200: 2rem;
  --mate-typography-font-sizing-225: 2.25rem;
  --mate-typography-font-sizing-075: 0.75rem;
  --mate-typography-font-sizing-087: 0.875rem;
  --mate-typography-font-family: 'Segoe UI', Roboto, 'San Francisco', 'Helvetica Neue', Arial, sans-serif;
  --mate-typography-font-family-icon: 'Material Symbols', 'Material Icons';
  --mate-typography-font-weight-regular: 400;
  --mate-typography-font-weight-medium: 600;
  --mate-typography-font-weight-bold: 700;
  --mate-sizing-100: 1rem;
  --mate-sizing-150: 1.5rem;
  --mate-sizing-200: 2rem;
  --mate-sizing-225: 2.25rem;
  --mate-sizing-250: 2.5rem;
  --mate-sizing-300: 3rem;
  --mate-sizing-350: 3.5rem;
  --mate-sizing-400: 4rem;
  --mate-sizing-012: 0.125rem;
  --mate-sizing-025: 0.25rem;
  --mate-sizing-050: 0.5rem;
  --mate-spacing-100: 1rem;
  --mate-spacing-125: 1.25rem;
  --mate-spacing-150: 1.5rem;
  --mate-spacing-200: 2rem;
  --mate-spacing-250: 2.5rem;
  --mate-spacing-300: 3rem;
  --mate-spacing-350: 3.5rem;
  --mate-spacing-000: 0;
  --mate-spacing-012: 0.125rem;
  --mate-spacing-025: 0.25rem;
  --mate-spacing-050: 0.5rem;
  --mate-spacing-075: 0.75rem;
  --mate-border-width-006: 0.063rem;
  --mate-border-width-012: 0.125rem;
  --mate-border-width-025: 0.25rem;
  --mate-border-radius-012: 0.125rem;
  --mate-border-radius-025: 0.25rem;
  --mate-border-radius-050: 0.5rem;
}
/**
 * MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
 */

:root {
  --mate-light-components-calendar-event-background-magenta: #D0267024;
  --mate-light-components-calendar-event-background-purple: #8A3FFC1F;
  --mate-light-components-calendar-event-background-yellow: #F1C21B24;
  --mate-light-components-calendar-event-background-cyan: #0076A51F;
  --mate-light-components-calendar-event-background-teal: #007D791F;
  --mate-light-components-date-picker-gradient-background-visible: #001F420D;
  --mate-light-components-date-picker-gradient-background-not-visible: #001F4200;
  --mate-light-components-grid-border: #CCD2D9;
  --mate-light-components-grid-background-selected: #E5F1FF;
  --mate-light-components-grid-background-hover: #E5F1FF;
  --mate-light-components-grid-background-edited: #FCF3D1;
  --mate-light-components-grid-background-danger: #FDE8E9;
  --mate-light-components-akdb-logo-1: #00A1E0;
  --mate-light-components-akdb-logo-2: #003979;
  --mate-light-components-other-stepper-gradient-background: #FFFFFF00;
  --mate-light-shades-base-contrast-5pct: #f2f3f5;
  --mate-light-shades-contrast-5pct: #001F420d;
  --mate-light-shades-contrast-10pct: #001F421a;
  --mate-light-shades-contrast-20pct: #001F4233;
  --mate-light-shades-contrast-30pct: #001F424d;
  --mate-light-shades-contrast-40pct: #001F4260;
  --mate-light-shades-contrast-50pct: #001F4282;
  --mate-light-shades-contrast-60pct: #001F429c;
  --mate-light-shades-contrast-70pct: #001F42b3;
  --mate-light-shades-contrast-80pct: #001F42c0;
  --mate-light-shades-contrast-90pct: #001F42e6;
  --mate-light-shades-shade-10pct: #001F421a;
  --mate-light-shades-shade-20pct: #001F4233;
  --mate-light-shades-shade-30pct: #001F424d;
  --mate-light-shades-shade-40pct: #001F4260;
  --mate-light-shades-shade-50pct: #001F4282;
  --mate-light-signal-danger-light: #e7131d1a;
  --mate-light-signal-info-light: #3392ff21;
  --mate-light-signal-success-light: #1688381a;
  --mate-light-signal-warning-light: #ff6a0038;
  --mate-light-signal-primary-light: #3392ff21;
  --mate-dark-components-calendar-event-background-magenta: #D0267024;
  --mate-dark-components-calendar-event-background-purple: #8A3FFC1F;
  --mate-dark-components-calendar-event-background-yellow: #F1C21B24;
  --mate-dark-components-calendar-event-background-cyan: #0076A51F;
  --mate-dark-components-calendar-event-background-teal: #007D791F;
  --mate-dark-components-date-picker-gradient-background-visible: #1115180D;
  --mate-dark-components-date-picker-gradient-background-not-visible: #11151800;
  --mate-dark-components-grid-border: #484F54;
  --mate-dark-components-grid-background-selected: #243546;
  --mate-dark-components-grid-background-hover: #243546;
  --mate-dark-components-grid-background-edited: #4A4627;
  --mate-dark-components-grid-background-danger: #3C2D31;
  --mate-dark-components-other-stepper-gradient-background: #21272A00;
  --mate-dark-components-other-global-header-background: #353B3F;
  --mate-dark-shades-base-contrast-5pct: #282e32;
  --mate-dark-shades-contrast-5pct: #e8f1fc09;
  --mate-dark-shades-contrast-10pct: #e8f1fc1a;
  --mate-dark-shades-contrast-20pct: #e8f1fc33;
  --mate-dark-shades-contrast-30pct: #e8f1fc4d;
  --mate-dark-shades-contrast-40pct: #e8f1fc60;
  --mate-dark-shades-contrast-50pct: #e8f1fc80;
  --mate-dark-shades-contrast-60pct: #e8f1fc9c;
  --mate-dark-shades-contrast-70pct: #e8f1fcb3;
  --mate-dark-shades-contrast-80pct: #e8f1fcc0;
  --mate-dark-shades-contrast-90pct: #e8f1fce6;
  --mate-dark-shades-shade-10pct: #05050512;
  --mate-dark-shades-shade-20pct: #090a0b3b;
  --mate-dark-shades-shade-30pct: #0d0f1152;
  --mate-dark-shades-shade-40pct: #11141869;
  --mate-dark-shades-shade-50pct: #14191f80;
  --mate-dark-signal-danger-light: #e7555d24;
  --mate-dark-signal-info-light: #3392ff21;
  --mate-dark-signal-success-light: #0ff5541a;
  --mate-dark-signal-warning-light: #ff6a0024;
  --mate-dark-signal-primary-light: #3392ff38;
  --mate-light-border-base: var(--mate-light-shades-contrast-50pct);
  --mate-light-border-light: var(--mate-light-shades-contrast-20pct);
  --mate-light-components-calendar-event-background-blue: var(--mate-light-signal-info-light);
  --mate-light-components-calendar-event-background-red: var(--mate-light-signal-danger-light);
  --mate-light-components-calendar-event-background-orange: var(--mate-light-signal-warning-light);
  --mate-light-components-calendar-event-background-green: var(--mate-light-signal-success-light);
  --mate-light-components-calendar-event-line-magenta: var(--mate-magenta-60);
  --mate-light-components-calendar-event-line-purple: var(--mate-purple-60);
  --mate-light-components-calendar-event-line-yellow: var(--mate-yellow-60);
  --mate-light-components-calendar-event-line-cyan: var(--mate-cyan-60);
  --mate-light-components-calendar-event-line-teal: var(--mate-teal-60);
  --mate-light-components-date-picker-separator: var(--mate-light-shades-contrast-40pct);
  --mate-light-components-field-background-disabled: var(--mate-light-shades-contrast-5pct);
  --mate-light-components-field-border-enabled: var(--mate-light-shades-contrast-50pct);
  --mate-light-components-field-border-hover: var(--mate-light-shades-contrast-90pct);
  --mate-light-components-field-border-disabled: var(--mate-light-shades-contrast-20pct);
  --mate-light-components-field-border-read-only: var(--mate-light-shades-contrast-50pct);
  --mate-light-components-x-range-chart-1: var(--mate-magenta-100);
  --mate-light-components-x-range-chart-2: var(--mate-purple-100);
  --mate-light-components-x-range-chart-3: var(--mate-teal-100);
  --mate-light-components-x-range-chart-4: var(--mate-orange-100);
  --mate-light-components-x-range-chart-5: var(--mate-cyan-100);
  --mate-light-components-x-range-chart-6: var(--mate-yellow-100);
  --mate-light-components-x-range-chart-7: var(--mate-green-100);
  --mate-light-components-x-range-chart-8: var(--mate-gray-100);
  --mate-light-components-x-range-chart-9: var(--mate-blue-100);
  --mate-light-components-x-range-chart-10: var(--mate-red-100);
  --mate-light-components-split-layout-handle: var(--mate-light-shades-contrast-30pct);
  --mate-light-components-split-layout-border-hover: var(--mate-light-shades-contrast-90pct);
  --mate-light-components-other-button-border-disabled: var(--mate-light-shades-contrast-20pct);
  --mate-light-components-other-loading-indicator-background: var(--mate-light-shades-contrast-10pct);
  --mate-light-components-other-multiselect-chip-background: var(--mate-light-shades-contrast-20pct);
  --mate-light-components-other-global-header-background: var(--mate-light-shades-base-contrast-5pct);
  --mate-light-illustrations-illustration-background: var(--mate-gray-10);
  --mate-light-illustrations-illustration-color-success: var(--mate-green-60);
  --mate-light-illustrations-illustration-color-warning: var(--mate-orange-60);
  --mate-light-illustrations-illustration-color-error: var(--mate-red-60);
  --mate-light-illustrations-illustration-stroke: var(--mate-blue-90);
  --mate-light-illustrations-illustration-color-level-1: var(--mate-white-and-black-white);
  --mate-light-illustrations-illustration-color-level-2: var(--mate-blue-20);
  --mate-light-illustrations-illustration-color-level-3: var(--mate-blue-30);
  --mate-light-illustrations-illustration-color-level-4: var(--mate-blue-40);
  --mate-light-illustrations-illustration-color-level-5: var(--mate-blue-50);
  --mate-light-illustrations-illustration-color-level-6: var(--mate-blue-90);
  --mate-light-shades-base: var(--mate-white-and-black-white);
  --mate-light-shades-contrast-100pct: var(--mate-blue-100);
  --mate-light-signal-danger: var(--mate-red-60);
  --mate-light-signal-info: var(--mate-blue-60);
  --mate-light-signal-success: var(--mate-green-60);
  --mate-light-signal-warning: var(--mate-orange-60);
  --mate-light-signal-primary: var(--mate-blue-60);
  --mate-light-signal-neutral: var(--mate-gray-60);
  --mate-light-signal-neutral-light: var(--mate-light-shades-contrast-5pct);
  --mate-light-icon-danger: var(--mate-red-60);
  --mate-light-icon-success: var(--mate-green-60);
  --mate-light-icon-warning: var(--mate-orange-60);
  --mate-light-icon-info: var(--mate-blue-60);
  --mate-light-icon-neutral: var(--mate-gray-60);
  --mate-light-icon-interactive-enabled: var(--mate-light-shades-contrast-60pct);
  --mate-light-icon-interactive-hover: var(--mate-light-shades-contrast-90pct);
  --mate-light-icon-interactive-active: var(--mate-blue-70);
  --mate-light-icon-interactive-selected: var(--mate-blue-70);
  --mate-light-icon-interactive-disabled: var(--mate-light-shades-contrast-30pct);
  --mate-light-icon-interactive-contrast: var(--mate-white-and-black-white);
  --mate-light-icon-not-interactive: var(--mate-light-shades-contrast-70pct);
  --mate-light-interactive-focus: var(--mate-blue-100);
  --mate-light-interactive-contrast: var(--mate-white-and-black-white);
  --mate-light-interactive-danger-hover: var(--mate-red-70);
  --mate-light-interactive-danger-active: var(--mate-red-80);
  --mate-light-interactive-danger-disabled: var(--mate-light-shades-contrast-5pct);
  --mate-light-interactive-hover: var(--mate-blue-70);
  --mate-light-interactive-active: var(--mate-blue-80);
  --mate-light-interactive-disabled: var(--mate-light-shades-contrast-5pct);
  --mate-light-background-highlighted: var(--mate-light-shades-base-contrast-5pct);
  --mate-light-background-interactive-hover: var(--mate-light-shades-contrast-5pct);
  --mate-light-background-interactive-active: var(--mate-light-signal-primary-light);
  --mate-light-background-interactive-selected: var(--mate-light-signal-primary-light);
  --mate-light-background-interactive-disabled: var(--mate-light-shades-contrast-10pct);
  --mate-light-background-danger-hover: var(--mate-light-shades-contrast-5pct);
  --mate-light-background-danger-active: var(--mate-light-signal-danger-light);
  --mate-light-data-1: var(--mate-magenta-60);
  --mate-light-data-2: var(--mate-purple-60);
  --mate-light-data-3: var(--mate-teal-60);
  --mate-light-data-4: var(--mate-orange-60);
  --mate-light-data-5: var(--mate-cyan-60);
  --mate-light-data-6: var(--mate-yellow-60);
  --mate-light-data-7: var(--mate-green-60);
  --mate-light-data-8: var(--mate-gray-60);
  --mate-light-data-9: var(--mate-blue-60);
  --mate-light-data-10: var(--mate-red-60);
  --mate-light-text-body: var(--mate-light-shades-contrast-90pct);
  --mate-light-text-secondary: var(--mate-light-shades-contrast-70pct);
  --mate-light-text-tertiary: var(--mate-light-shades-contrast-60pct);
  --mate-light-text-disabled: var(--mate-light-shades-contrast-30pct);
  --mate-light-text-danger: var(--mate-red-70);
  --mate-light-text-danger-contrast: var(--mate-white-and-black-white);
  --mate-light-text-info: var(--mate-blue-70);
  --mate-light-text-info-contrast: var(--mate-white-and-black-white);
  --mate-light-text-success: var(--mate-green-70);
  --mate-light-text-success-contrast: var(--mate-white-and-black-white);
  --mate-light-text-warning: var(--mate-orange-70);
  --mate-light-text-warning-contrast: var(--mate-white-and-black-white);
  --mate-light-text-primary: var(--mate-blue-70);
  --mate-light-text-primary-contrast: var(--mate-white-and-black-white);
  --mate-light-text-neutral: var(--mate-light-shades-contrast-80pct);
  --mate-light-text-neutral-contrast: var(--mate-white-and-black-white);
  --mate-dark-border-base: var(--mate-dark-shades-contrast-50pct);
  --mate-dark-border-light: var(--mate-dark-shades-contrast-20pct);
  --mate-dark-components-calendar-event-background-blue: var(--mate-dark-signal-info-light);
  --mate-dark-components-calendar-event-background-red: var(--mate-dark-signal-danger-light);
  --mate-dark-components-calendar-event-background-orange: var(--mate-dark-signal-warning-light);
  --mate-dark-components-calendar-event-background-green: var(--mate-dark-signal-success-light);
  --mate-dark-components-calendar-event-line-magenta: var(--mate-magenta-50);
  --mate-dark-components-calendar-event-line-purple: var(--mate-purple-50);
  --mate-dark-components-calendar-event-line-yellow: var(--mate-yellow-50);
  --mate-dark-components-calendar-event-line-cyan: var(--mate-cyan-50);
  --mate-dark-components-calendar-event-line-teal: var(--mate-teal-50);
  --mate-dark-components-date-picker-separator: var(--mate-dark-shades-contrast-40pct);
  --mate-dark-components-field-background-disabled: var(--mate-dark-shades-contrast-5pct);
  --mate-dark-components-field-border-enabled: var(--mate-dark-shades-contrast-50pct);
  --mate-dark-components-field-border-hover: var(--mate-dark-shades-contrast-90pct);
  --mate-dark-components-field-border-disabled: var(--mate-dark-shades-contrast-20pct);
  --mate-dark-components-field-border-read-only: var(--mate-dark-shades-contrast-50pct);
  --mate-dark-components-x-range-chart-1: var(--mate-magenta-10);
  --mate-dark-components-x-range-chart-2: var(--mate-purple-10);
  --mate-dark-components-x-range-chart-3: var(--mate-teal-10);
  --mate-dark-components-x-range-chart-4: var(--mate-orange-10);
  --mate-dark-components-x-range-chart-5: var(--mate-cyan-10);
  --mate-dark-components-x-range-chart-6: var(--mate-yellow-10);
  --mate-dark-components-x-range-chart-7: var(--mate-green-10);
  --mate-dark-components-x-range-chart-8: var(--mate-gray-10);
  --mate-dark-components-x-range-chart-9: var(--mate-blue-10);
  --mate-dark-components-x-range-chart-10: var(--mate-red-10);
  --mate-dark-components-akdb-logo-1: var(--mate-white-and-black-white);
  --mate-dark-components-akdb-logo-2: var(--mate-white-and-black-white);
  --mate-dark-components-split-layout-handle: var(--mate-dark-shades-contrast-30pct);
  --mate-dark-components-split-layout-border-hover: var(--mate-dark-shades-contrast-90pct);
  --mate-dark-components-other-button-border-disabled: var(--mate-dark-shades-contrast-20pct);
  --mate-dark-components-other-loading-indicator-background: var(--mate-dark-shades-contrast-10pct);
  --mate-dark-components-other-multiselect-chip-background: var(--mate-dark-shades-contrast-20pct);
  --mate-dark-components-other-side-panel-badge: var(--mate-blue-40);
  --mate-dark-illustrations-illustration-background: var(--mate-blue-80);
  --mate-dark-illustrations-illustration-color-success: var(--mate-green-40);
  --mate-dark-illustrations-illustration-color-warning: var(--mate-orange-40);
  --mate-dark-illustrations-illustration-color-error: var(--mate-red-50);
  --mate-dark-illustrations-illustration-stroke: var(--mate-blue-20);
  --mate-dark-illustrations-illustration-color-level-1: var(--mate-blue-100);
  --mate-dark-illustrations-illustration-color-level-2: var(--mate-blue-70);
  --mate-dark-illustrations-illustration-color-level-3: var(--mate-blue-60);
  --mate-dark-illustrations-illustration-color-level-4: var(--mate-blue-50);
  --mate-dark-illustrations-illustration-color-level-5: var(--mate-blue-40);
  --mate-dark-illustrations-illustration-color-level-6: var(--mate-blue-20);
  --mate-dark-shades-base: var(--mate-gray-90);
  --mate-dark-shades-contrast-100pct: var(--mate-blue-10);
  --mate-dark-signal-danger: var(--mate-red-50);
  --mate-dark-signal-info: var(--mate-blue-50);
  --mate-dark-signal-success: var(--mate-green-50);
  --mate-dark-signal-warning: var(--mate-orange-50);
  --mate-dark-signal-primary: var(--mate-blue-50);
  --mate-dark-signal-neutral: var(--mate-gray-50);
  --mate-dark-signal-neutral-light: var(--mate-dark-shades-contrast-5pct);
  --mate-dark-icon-danger: var(--mate-red-50);
  --mate-dark-icon-success: var(--mate-green-50);
  --mate-dark-icon-warning: var(--mate-orange-50);
  --mate-dark-icon-info: var(--mate-blue-50);
  --mate-dark-icon-neutral: var(--mate-gray-50);
  --mate-dark-icon-interactive-enabled: var(--mate-dark-shades-contrast-60pct);
  --mate-dark-icon-interactive-hover: var(--mate-dark-shades-contrast-90pct);
  --mate-dark-icon-interactive-active: var(--mate-blue-30);
  --mate-dark-icon-interactive-selected: var(--mate-blue-30);
  --mate-dark-icon-interactive-disabled: var(--mate-dark-shades-contrast-30pct);
  --mate-dark-icon-interactive-contrast: var(--mate-gray-100);
  --mate-dark-icon-not-interactive: var(--mate-dark-shades-contrast-70pct);
  --mate-dark-interactive-focus: var(--mate-blue-10);
  --mate-dark-interactive-contrast: var(--mate-gray-100);
  --mate-dark-interactive-danger-hover: var(--mate-red-40);
  --mate-dark-interactive-danger-active: var(--mate-red-30);
  --mate-dark-interactive-danger-disabled: var(--mate-dark-shades-contrast-5pct);
  --mate-dark-interactive-hover: var(--mate-blue-40);
  --mate-dark-interactive-active: var(--mate-blue-30);
  --mate-dark-interactive-disabled: var(--mate-dark-shades-contrast-5pct);
  --mate-dark-background-highlighted: var(--mate-dark-shades-base-contrast-5pct);
  --mate-dark-background-interactive-hover: var(--mate-dark-shades-contrast-5pct);
  --mate-dark-background-interactive-active: var(--mate-dark-signal-primary-light);
  --mate-dark-background-interactive-selected: var(--mate-dark-signal-primary-light);
  --mate-dark-background-interactive-disabled: var(--mate-dark-shades-contrast-20pct);
  --mate-dark-background-danger-hover: var(--mate-dark-shades-contrast-5pct);
  --mate-dark-background-danger-active: var(--mate-dark-signal-danger-light);
  --mate-dark-data-1: var(--mate-magenta-50);
  --mate-dark-data-2: var(--mate-purple-50);
  --mate-dark-data-3: var(--mate-teal-50);
  --mate-dark-data-4: var(--mate-orange-50);
  --mate-dark-data-5: var(--mate-cyan-50);
  --mate-dark-data-6: var(--mate-yellow-50);
  --mate-dark-data-7: var(--mate-green-50);
  --mate-dark-data-8: var(--mate-gray-50);
  --mate-dark-data-9: var(--mate-blue-50);
  --mate-dark-data-10: var(--mate-red-50);
  --mate-dark-text-body: var(--mate-dark-shades-contrast-90pct);
  --mate-dark-text-secondary: var(--mate-dark-shades-contrast-70pct);
  --mate-dark-text-tertiary: var(--mate-dark-shades-contrast-60pct);
  --mate-dark-text-disabled: var(--mate-dark-shades-contrast-30pct);
  --mate-dark-text-danger: var(--mate-red-30);
  --mate-dark-text-danger-contrast: var(--mate-gray-100);
  --mate-dark-text-info: var(--mate-blue-30);
  --mate-dark-text-info-contrast: var(--mate-gray-100);
  --mate-dark-text-success: var(--mate-green-30);
  --mate-dark-text-success-contrast: var(--mate-gray-100);
  --mate-dark-text-warning: var(--mate-orange-30);
  --mate-dark-text-warning-contrast: var(--mate-gray-100);
  --mate-dark-text-primary: var(--mate-blue-30);
  --mate-dark-text-primary-contrast: var(--mate-gray-100);
  --mate-dark-text-neutral: var(--mate-dark-shades-contrast-80pct);
  --mate-dark-text-neutral-contrast: var(--mate-gray-100);
  --mate-light-components-calendar-event-background-gray: var(--mate-light-signal-neutral-light);
  --mate-light-components-calendar-event-line-blue: var(--mate-light-signal-info);
  --mate-light-components-calendar-event-line-red: var(--mate-light-signal-danger);
  --mate-light-components-calendar-event-line-orange: var(--mate-light-signal-warning);
  --mate-light-components-calendar-event-line-green: var(--mate-light-signal-success);
  --mate-light-components-calendar-event-line-gray: var(--mate-light-signal-neutral);
  --mate-light-components-field-background: var(--mate-light-shades-base);
  --mate-light-components-field-border-active: var(--mate-light-components-field-border-enabled);
  --mate-light-components-other-checkbox-background: var(--mate-light-shades-base);
  --mate-light-components-other-overlay-background: var(--mate-light-shades-base);
  --mate-light-components-other-side-panel-badge: var(--mate-light-signal-info);
  --mate-light-interactive-danger-enabled: var(--mate-light-signal-danger);
  --mate-light-interactive-danger-selected: var(--mate-light-signal-danger);
  --mate-light-interactive-enabled: var(--mate-light-signal-primary);
  --mate-light-interactive-selected: var(--mate-light-signal-primary);
  --mate-light-background-base: var(--mate-light-shades-base);
  --mate-light-background-interactive-enabled: var(--mate-light-shades-base);
  --mate-light-text-heading: var(--mate-light-shades-contrast-100pct);
  --mate-dark-components-calendar-event-background-gray: var(--mate-dark-signal-neutral-light);
  --mate-dark-components-calendar-event-line-blue: var(--mate-dark-signal-info);
  --mate-dark-components-calendar-event-line-red: var(--mate-dark-signal-danger);
  --mate-dark-components-calendar-event-line-orange: var(--mate-dark-signal-warning);
  --mate-dark-components-calendar-event-line-green: var(--mate-dark-signal-success);
  --mate-dark-components-calendar-event-line-gray: var(--mate-dark-signal-neutral);
  --mate-dark-components-field-background: var(--mate-dark-shades-base);
  --mate-dark-components-field-border-active: var(--mate-dark-components-field-border-enabled);
  --mate-dark-components-other-checkbox-background: var(--mate-dark-shades-base);
  --mate-dark-components-other-overlay-background: var(--mate-dark-shades-base);
  --mate-dark-interactive-danger-enabled: var(--mate-dark-signal-danger);
  --mate-dark-interactive-danger-selected: var(--mate-dark-signal-danger);
  --mate-dark-interactive-enabled: var(--mate-dark-signal-primary);
  --mate-dark-interactive-selected: var(--mate-dark-signal-primary);
  --mate-dark-background-base: var(--mate-dark-shades-base);
  --mate-dark-background-interactive-enabled: var(--mate-dark-shades-base);
  --mate-dark-text-heading: var(--mate-dark-shades-contrast-100pct);
}
/**
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

:root,
[theme~="light"] {
  --mate-border-base: var(--mate-light-border-base);
  --mate-border-light: var(--mate-light-border-light);
  --mate-components-calendar-event-background-blue: var(--mate-light-components-calendar-event-background-blue);
  --mate-components-calendar-event-background-red: var(--mate-light-components-calendar-event-background-red);
  --mate-components-calendar-event-background-orange: var(--mate-light-components-calendar-event-background-orange);
  --mate-components-calendar-event-background-green: var(--mate-light-components-calendar-event-background-green);
  --mate-components-calendar-event-background-gray: var(--mate-light-components-calendar-event-background-gray);
  --mate-components-calendar-event-background-magenta: var(--mate-light-components-calendar-event-background-magenta);
  --mate-components-calendar-event-background-purple: var(--mate-light-components-calendar-event-background-purple);
  --mate-components-calendar-event-background-yellow: var(--mate-light-components-calendar-event-background-yellow);
  --mate-components-calendar-event-background-cyan: var(--mate-light-components-calendar-event-background-cyan);
  --mate-components-calendar-event-background-teal: var(--mate-light-components-calendar-event-background-teal);
  --mate-components-calendar-event-line-blue: var(--mate-light-components-calendar-event-line-blue);
  --mate-components-calendar-event-line-red: var(--mate-light-components-calendar-event-line-red);
  --mate-components-calendar-event-line-orange: var(--mate-light-components-calendar-event-line-orange);
  --mate-components-calendar-event-line-green: var(--mate-light-components-calendar-event-line-green);
  --mate-components-calendar-event-line-gray: var(--mate-light-components-calendar-event-line-gray);
  --mate-components-calendar-event-line-magenta: var(--mate-light-components-calendar-event-line-magenta);
  --mate-components-calendar-event-line-purple: var(--mate-light-components-calendar-event-line-purple);
  --mate-components-calendar-event-line-yellow: var(--mate-light-components-calendar-event-line-yellow);
  --mate-components-calendar-event-line-cyan: var(--mate-light-components-calendar-event-line-cyan);
  --mate-components-calendar-event-line-teal: var(--mate-light-components-calendar-event-line-teal);
  --mate-components-date-picker-gradient-background-visible: var(--mate-light-components-date-picker-gradient-background-visible);
  --mate-components-date-picker-gradient-background-not-visible: var(--mate-light-components-date-picker-gradient-background-not-visible);
  --mate-components-date-picker-separator: var(--mate-light-components-date-picker-separator);
  --mate-components-field-background: var(--mate-light-components-field-background);
  --mate-components-field-background-disabled: var(--mate-light-components-field-background-disabled);
  --mate-components-field-border-enabled: var(--mate-light-components-field-border-enabled);
  --mate-components-field-border-hover: var(--mate-light-components-field-border-hover);
  --mate-components-field-border-active: var(--mate-light-components-field-border-active);
  --mate-components-field-border-disabled: var(--mate-light-components-field-border-disabled);
  --mate-components-field-border-read-only: var(--mate-light-components-field-border-read-only);
  --mate-components-x-range-chart-1: var(--mate-light-components-x-range-chart-1);
  --mate-components-x-range-chart-2: var(--mate-light-components-x-range-chart-2);
  --mate-components-x-range-chart-3: var(--mate-light-components-x-range-chart-3);
  --mate-components-x-range-chart-4: var(--mate-light-components-x-range-chart-4);
  --mate-components-x-range-chart-5: var(--mate-light-components-x-range-chart-5);
  --mate-components-x-range-chart-6: var(--mate-light-components-x-range-chart-6);
  --mate-components-x-range-chart-7: var(--mate-light-components-x-range-chart-7);
  --mate-components-x-range-chart-8: var(--mate-light-components-x-range-chart-8);
  --mate-components-x-range-chart-9: var(--mate-light-components-x-range-chart-9);
  --mate-components-x-range-chart-10: var(--mate-light-components-x-range-chart-10);
  --mate-components-grid-border: var(--mate-light-components-grid-border);
  --mate-components-grid-background-selected: var(--mate-light-components-grid-background-selected);
  --mate-components-grid-background-hover: var(--mate-light-components-grid-background-hover);
  --mate-components-grid-background-edited: var(--mate-light-components-grid-background-edited);
  --mate-components-grid-background-danger: var(--mate-light-components-grid-background-danger);
  --mate-components-akdb-logo-1: var(--mate-light-components-akdb-logo-1);
  --mate-components-akdb-logo-2: var(--mate-light-components-akdb-logo-2);
  --mate-components-split-layout-handle: var(--mate-light-components-split-layout-handle);
  --mate-components-split-layout-border-hover: var(--mate-light-components-split-layout-border-hover);
  --mate-components-other-stepper-gradient-background: var(--mate-light-components-other-stepper-gradient-background);
  --mate-components-other-button-border-disabled: var(--mate-light-components-other-button-border-disabled);
  --mate-components-other-checkbox-background: var(--mate-light-components-other-checkbox-background);
  --mate-components-other-overlay-background: var(--mate-light-components-other-overlay-background);
  --mate-components-other-loading-indicator-background: var(--mate-light-components-other-loading-indicator-background);
  --mate-components-other-multiselect-chip-background: var(--mate-light-components-other-multiselect-chip-background);
  --mate-components-other-side-panel-badge: var(--mate-light-components-other-side-panel-badge);
  --mate-components-other-global-header-background: var(--mate-light-components-other-global-header-background);
  --mate-illustrations-illustration-background: var(--mate-light-illustrations-illustration-background);
  --mate-illustrations-illustration-color-success: var(--mate-light-illustrations-illustration-color-success);
  --mate-illustrations-illustration-color-warning: var(--mate-light-illustrations-illustration-color-warning);
  --mate-illustrations-illustration-color-error: var(--mate-light-illustrations-illustration-color-error);
  --mate-illustrations-illustration-stroke: var(--mate-light-illustrations-illustration-stroke);
  --mate-illustrations-illustration-color-level-1: var(--mate-light-illustrations-illustration-color-level-1);
  --mate-illustrations-illustration-color-level-2: var(--mate-light-illustrations-illustration-color-level-2);
  --mate-illustrations-illustration-color-level-3: var(--mate-light-illustrations-illustration-color-level-3);
  --mate-illustrations-illustration-color-level-4: var(--mate-light-illustrations-illustration-color-level-4);
  --mate-illustrations-illustration-color-level-5: var(--mate-light-illustrations-illustration-color-level-5);
  --mate-illustrations-illustration-color-level-6: var(--mate-light-illustrations-illustration-color-level-6);
  --mate-shades-base: var(--mate-light-shades-base);
  --mate-shades-base-contrast-5pct: var(--mate-light-shades-base-contrast-5pct);
  --mate-shades-contrast-5pct: var(--mate-light-shades-contrast-5pct);
  --mate-shades-contrast-10pct: var(--mate-light-shades-contrast-10pct);
  --mate-shades-contrast-20pct: var(--mate-light-shades-contrast-20pct);
  --mate-shades-contrast-30pct: var(--mate-light-shades-contrast-30pct);
  --mate-shades-contrast-40pct: var(--mate-light-shades-contrast-40pct);
  --mate-shades-contrast-50pct: var(--mate-light-shades-contrast-50pct);
  --mate-shades-contrast-60pct: var(--mate-light-shades-contrast-60pct);
  --mate-shades-contrast-70pct: var(--mate-light-shades-contrast-70pct);
  --mate-shades-contrast-80pct: var(--mate-light-shades-contrast-80pct);
  --mate-shades-contrast-90pct: var(--mate-light-shades-contrast-90pct);
  --mate-shades-contrast-100pct: var(--mate-light-shades-contrast-100pct);
  --mate-shades-shade-10pct: var(--mate-light-shades-shade-10pct);
  --mate-shades-shade-20pct: var(--mate-light-shades-shade-20pct);
  --mate-shades-shade-30pct: var(--mate-light-shades-shade-30pct);
  --mate-shades-shade-40pct: var(--mate-light-shades-shade-40pct);
  --mate-shades-shade-50pct: var(--mate-light-shades-shade-50pct);
  --mate-signal-danger: var(--mate-light-signal-danger);
  --mate-signal-danger-light: var(--mate-light-signal-danger-light);
  --mate-signal-info: var(--mate-light-signal-info);
  --mate-signal-info-light: var(--mate-light-signal-info-light);
  --mate-signal-success: var(--mate-light-signal-success);
  --mate-signal-success-light: var(--mate-light-signal-success-light);
  --mate-signal-warning: var(--mate-light-signal-warning);
  --mate-signal-warning-light: var(--mate-light-signal-warning-light);
  --mate-signal-primary: var(--mate-light-signal-primary);
  --mate-signal-primary-light: var(--mate-light-signal-primary-light);
  --mate-signal-neutral: var(--mate-light-signal-neutral);
  --mate-signal-neutral-light: var(--mate-light-signal-neutral-light);
  --mate-icon-danger: var(--mate-light-icon-danger);
  --mate-icon-success: var(--mate-light-icon-success);
  --mate-icon-warning: var(--mate-light-icon-warning);
  --mate-icon-info: var(--mate-light-icon-info);
  --mate-icon-neutral: var(--mate-light-icon-neutral);
  --mate-icon-interactive-enabled: var(--mate-light-icon-interactive-enabled);
  --mate-icon-interactive-hover: var(--mate-light-icon-interactive-hover);
  --mate-icon-interactive-active: var(--mate-light-icon-interactive-active);
  --mate-icon-interactive-selected: var(--mate-light-icon-interactive-selected);
  --mate-icon-interactive-disabled: var(--mate-light-icon-interactive-disabled);
  --mate-icon-interactive-contrast: var(--mate-light-icon-interactive-contrast);
  --mate-icon-not-interactive: var(--mate-light-icon-not-interactive);
  --mate-interactive-focus: var(--mate-light-interactive-focus);
  --mate-interactive-contrast: var(--mate-light-interactive-contrast);
  --mate-interactive-danger-enabled: var(--mate-light-interactive-danger-enabled);
  --mate-interactive-danger-hover: var(--mate-light-interactive-danger-hover);
  --mate-interactive-danger-active: var(--mate-light-interactive-danger-active);
  --mate-interactive-danger-selected: var(--mate-light-interactive-danger-selected);
  --mate-interactive-danger-disabled: var(--mate-light-interactive-danger-disabled);
  --mate-interactive-enabled: var(--mate-light-interactive-enabled);
  --mate-interactive-hover: var(--mate-light-interactive-hover);
  --mate-interactive-active: var(--mate-light-interactive-active);
  --mate-interactive-selected: var(--mate-light-interactive-selected);
  --mate-interactive-disabled: var(--mate-light-interactive-disabled);
  --mate-background-base: var(--mate-light-background-base);
  --mate-background-highlighted: var(--mate-light-background-highlighted);
  --mate-background-interactive-enabled: var(--mate-light-background-interactive-enabled);
  --mate-background-interactive-hover: var(--mate-light-background-interactive-hover);
  --mate-background-interactive-active: var(--mate-light-background-interactive-active);
  --mate-background-interactive-selected: var(--mate-light-background-interactive-selected);
  --mate-background-interactive-disabled: var(--mate-light-background-interactive-disabled);
  --mate-background-danger-hover: var(--mate-light-background-danger-hover);
  --mate-background-danger-active: var(--mate-light-background-danger-active);
  --mate-data-1: var(--mate-light-data-1);
  --mate-data-2: var(--mate-light-data-2);
  --mate-data-3: var(--mate-light-data-3);
  --mate-data-4: var(--mate-light-data-4);
  --mate-data-5: var(--mate-light-data-5);
  --mate-data-6: var(--mate-light-data-6);
  --mate-data-7: var(--mate-light-data-7);
  --mate-data-8: var(--mate-light-data-8);
  --mate-data-9: var(--mate-light-data-9);
  --mate-data-10: var(--mate-light-data-10);
  --mate-text-heading: var(--mate-light-text-heading);
  --mate-text-body: var(--mate-light-text-body);
  --mate-text-secondary: var(--mate-light-text-secondary);
  --mate-text-tertiary: var(--mate-light-text-tertiary);
  --mate-text-disabled: var(--mate-light-text-disabled);
  --mate-text-danger: var(--mate-light-text-danger);
  --mate-text-danger-contrast: var(--mate-light-text-danger-contrast);
  --mate-text-info: var(--mate-light-text-info);
  --mate-text-info-contrast: var(--mate-light-text-info-contrast);
  --mate-text-success: var(--mate-light-text-success);
  --mate-text-success-contrast: var(--mate-light-text-success-contrast);
  --mate-text-warning: var(--mate-light-text-warning);
  --mate-text-warning-contrast: var(--mate-light-text-warning-contrast);
  --mate-text-primary: var(--mate-light-text-primary);
  --mate-text-primary-contrast: var(--mate-light-text-primary-contrast);
  --mate-text-neutral: var(--mate-light-text-neutral);
  --mate-text-neutral-contrast: var(--mate-light-text-neutral-contrast);
}

[theme~="dark"] {
  --mate-border-base: var(--mate-dark-border-base);
  --mate-border-light: var(--mate-dark-border-light);
  --mate-components-calendar-event-background-blue: var(--mate-dark-components-calendar-event-background-blue);
  --mate-components-calendar-event-background-red: var(--mate-dark-components-calendar-event-background-red);
  --mate-components-calendar-event-background-orange: var(--mate-dark-components-calendar-event-background-orange);
  --mate-components-calendar-event-background-green: var(--mate-dark-components-calendar-event-background-green);
  --mate-components-calendar-event-background-gray: var(--mate-dark-components-calendar-event-background-gray);
  --mate-components-calendar-event-background-magenta: var(--mate-dark-components-calendar-event-background-magenta);
  --mate-components-calendar-event-background-purple: var(--mate-dark-components-calendar-event-background-purple);
  --mate-components-calendar-event-background-yellow: var(--mate-dark-components-calendar-event-background-yellow);
  --mate-components-calendar-event-background-cyan: var(--mate-dark-components-calendar-event-background-cyan);
  --mate-components-calendar-event-background-teal: var(--mate-dark-components-calendar-event-background-teal);
  --mate-components-calendar-event-line-blue: var(--mate-dark-components-calendar-event-line-blue);
  --mate-components-calendar-event-line-red: var(--mate-dark-components-calendar-event-line-red);
  --mate-components-calendar-event-line-orange: var(--mate-dark-components-calendar-event-line-orange);
  --mate-components-calendar-event-line-green: var(--mate-dark-components-calendar-event-line-green);
  --mate-components-calendar-event-line-gray: var(--mate-dark-components-calendar-event-line-gray);
  --mate-components-calendar-event-line-magenta: var(--mate-dark-components-calendar-event-line-magenta);
  --mate-components-calendar-event-line-purple: var(--mate-dark-components-calendar-event-line-purple);
  --mate-components-calendar-event-line-yellow: var(--mate-dark-components-calendar-event-line-yellow);
  --mate-components-calendar-event-line-cyan: var(--mate-dark-components-calendar-event-line-cyan);
  --mate-components-calendar-event-line-teal: var(--mate-dark-components-calendar-event-line-teal);
  --mate-components-date-picker-gradient-background-visible: var(--mate-dark-components-date-picker-gradient-background-visible);
  --mate-components-date-picker-gradient-background-not-visible: var(--mate-dark-components-date-picker-gradient-background-not-visible);
  --mate-components-date-picker-separator: var(--mate-dark-components-date-picker-separator);
  --mate-components-field-background: var(--mate-dark-components-field-background);
  --mate-components-field-background-disabled: var(--mate-dark-components-field-background-disabled);
  --mate-components-field-border-enabled: var(--mate-dark-components-field-border-enabled);
  --mate-components-field-border-hover: var(--mate-dark-components-field-border-hover);
  --mate-components-field-border-active: var(--mate-dark-components-field-border-active);
  --mate-components-field-border-disabled: var(--mate-dark-components-field-border-disabled);
  --mate-components-field-border-read-only: var(--mate-dark-components-field-border-read-only);
  --mate-components-x-range-chart-1: var(--mate-dark-components-x-range-chart-1);
  --mate-components-x-range-chart-2: var(--mate-dark-components-x-range-chart-2);
  --mate-components-x-range-chart-3: var(--mate-dark-components-x-range-chart-3);
  --mate-components-x-range-chart-4: var(--mate-dark-components-x-range-chart-4);
  --mate-components-x-range-chart-5: var(--mate-dark-components-x-range-chart-5);
  --mate-components-x-range-chart-6: var(--mate-dark-components-x-range-chart-6);
  --mate-components-x-range-chart-7: var(--mate-dark-components-x-range-chart-7);
  --mate-components-x-range-chart-8: var(--mate-dark-components-x-range-chart-8);
  --mate-components-x-range-chart-9: var(--mate-dark-components-x-range-chart-9);
  --mate-components-x-range-chart-10: var(--mate-dark-components-x-range-chart-10);
  --mate-components-grid-border: var(--mate-dark-components-grid-border);
  --mate-components-grid-background-selected: var(--mate-dark-components-grid-background-selected);
  --mate-components-grid-background-hover: var(--mate-dark-components-grid-background-hover);
  --mate-components-grid-background-edited: var(--mate-dark-components-grid-background-edited);
  --mate-components-grid-background-danger: var(--mate-dark-components-grid-background-danger);
  --mate-components-akdb-logo-1: var(--mate-dark-components-akdb-logo-1);
  --mate-components-akdb-logo-2: var(--mate-dark-components-akdb-logo-2);
  --mate-components-split-layout-handle: var(--mate-dark-components-split-layout-handle);
  --mate-components-split-layout-border-hover: var(--mate-dark-components-split-layout-border-hover);
  --mate-components-other-stepper-gradient-background: var(--mate-dark-components-other-stepper-gradient-background);
  --mate-components-other-button-border-disabled: var(--mate-dark-components-other-button-border-disabled);
  --mate-components-other-checkbox-background: var(--mate-dark-components-other-checkbox-background);
  --mate-components-other-overlay-background: var(--mate-dark-components-other-overlay-background);
  --mate-components-other-loading-indicator-background: var(--mate-dark-components-other-loading-indicator-background);
  --mate-components-other-multiselect-chip-background: var(--mate-dark-components-other-multiselect-chip-background);
  --mate-components-other-side-panel-badge: var(--mate-dark-components-other-side-panel-badge);
  --mate-components-other-global-header-background: var(--mate-dark-components-other-global-header-background);
  --mate-illustrations-illustration-background: var(--mate-dark-illustrations-illustration-background);
  --mate-illustrations-illustration-color-success: var(--mate-dark-illustrations-illustration-color-success);
  --mate-illustrations-illustration-color-warning: var(--mate-dark-illustrations-illustration-color-warning);
  --mate-illustrations-illustration-color-error: var(--mate-dark-illustrations-illustration-color-error);
  --mate-illustrations-illustration-stroke: var(--mate-dark-illustrations-illustration-stroke);
  --mate-illustrations-illustration-color-level-1: var(--mate-dark-illustrations-illustration-color-level-1);
  --mate-illustrations-illustration-color-level-2: var(--mate-dark-illustrations-illustration-color-level-2);
  --mate-illustrations-illustration-color-level-3: var(--mate-dark-illustrations-illustration-color-level-3);
  --mate-illustrations-illustration-color-level-4: var(--mate-dark-illustrations-illustration-color-level-4);
  --mate-illustrations-illustration-color-level-5: var(--mate-dark-illustrations-illustration-color-level-5);
  --mate-illustrations-illustration-color-level-6: var(--mate-dark-illustrations-illustration-color-level-6);
  --mate-shades-base: var(--mate-dark-shades-base);
  --mate-shades-base-contrast-5pct: var(--mate-dark-shades-base-contrast-5pct);
  --mate-shades-contrast-5pct: var(--mate-dark-shades-contrast-5pct);
  --mate-shades-contrast-10pct: var(--mate-dark-shades-contrast-10pct);
  --mate-shades-contrast-20pct: var(--mate-dark-shades-contrast-20pct);
  --mate-shades-contrast-30pct: var(--mate-dark-shades-contrast-30pct);
  --mate-shades-contrast-40pct: var(--mate-dark-shades-contrast-40pct);
  --mate-shades-contrast-50pct: var(--mate-dark-shades-contrast-50pct);
  --mate-shades-contrast-60pct: var(--mate-dark-shades-contrast-60pct);
  --mate-shades-contrast-70pct: var(--mate-dark-shades-contrast-70pct);
  --mate-shades-contrast-80pct: var(--mate-dark-shades-contrast-80pct);
  --mate-shades-contrast-90pct: var(--mate-dark-shades-contrast-90pct);
  --mate-shades-contrast-100pct: var(--mate-dark-shades-contrast-100pct);
  --mate-shades-shade-10pct: var(--mate-dark-shades-shade-10pct);
  --mate-shades-shade-20pct: var(--mate-dark-shades-shade-20pct);
  --mate-shades-shade-30pct: var(--mate-dark-shades-shade-30pct);
  --mate-shades-shade-40pct: var(--mate-dark-shades-shade-40pct);
  --mate-shades-shade-50pct: var(--mate-dark-shades-shade-50pct);
  --mate-signal-danger: var(--mate-dark-signal-danger);
  --mate-signal-danger-light: var(--mate-dark-signal-danger-light);
  --mate-signal-info: var(--mate-dark-signal-info);
  --mate-signal-info-light: var(--mate-dark-signal-info-light);
  --mate-signal-success: var(--mate-dark-signal-success);
  --mate-signal-success-light: var(--mate-dark-signal-success-light);
  --mate-signal-warning: var(--mate-dark-signal-warning);
  --mate-signal-warning-light: var(--mate-dark-signal-warning-light);
  --mate-signal-primary: var(--mate-dark-signal-primary);
  --mate-signal-primary-light: var(--mate-dark-signal-primary-light);
  --mate-signal-neutral: var(--mate-dark-signal-neutral);
  --mate-signal-neutral-light: var(--mate-dark-signal-neutral-light);
  --mate-icon-danger: var(--mate-dark-icon-danger);
  --mate-icon-success: var(--mate-dark-icon-success);
  --mate-icon-warning: var(--mate-dark-icon-warning);
  --mate-icon-info: var(--mate-dark-icon-info);
  --mate-icon-neutral: var(--mate-dark-icon-neutral);
  --mate-icon-interactive-enabled: var(--mate-dark-icon-interactive-enabled);
  --mate-icon-interactive-hover: var(--mate-dark-icon-interactive-hover);
  --mate-icon-interactive-active: var(--mate-dark-icon-interactive-active);
  --mate-icon-interactive-selected: var(--mate-dark-icon-interactive-selected);
  --mate-icon-interactive-disabled: var(--mate-dark-icon-interactive-disabled);
  --mate-icon-interactive-contrast: var(--mate-dark-icon-interactive-contrast);
  --mate-icon-not-interactive: var(--mate-dark-icon-not-interactive);
  --mate-interactive-focus: var(--mate-dark-interactive-focus);
  --mate-interactive-contrast: var(--mate-dark-interactive-contrast);
  --mate-interactive-danger-enabled: var(--mate-dark-interactive-danger-enabled);
  --mate-interactive-danger-hover: var(--mate-dark-interactive-danger-hover);
  --mate-interactive-danger-active: var(--mate-dark-interactive-danger-active);
  --mate-interactive-danger-selected: var(--mate-dark-interactive-danger-selected);
  --mate-interactive-danger-disabled: var(--mate-dark-interactive-danger-disabled);
  --mate-interactive-enabled: var(--mate-dark-interactive-enabled);
  --mate-interactive-hover: var(--mate-dark-interactive-hover);
  --mate-interactive-active: var(--mate-dark-interactive-active);
  --mate-interactive-selected: var(--mate-dark-interactive-selected);
  --mate-interactive-disabled: var(--mate-dark-interactive-disabled);
  --mate-background-base: var(--mate-dark-background-base);
  --mate-background-highlighted: var(--mate-dark-background-highlighted);
  --mate-background-interactive-enabled: var(--mate-dark-background-interactive-enabled);
  --mate-background-interactive-hover: var(--mate-dark-background-interactive-hover);
  --mate-background-interactive-active: var(--mate-dark-background-interactive-active);
  --mate-background-interactive-selected: var(--mate-dark-background-interactive-selected);
  --mate-background-interactive-disabled: var(--mate-dark-background-interactive-disabled);
  --mate-background-danger-hover: var(--mate-dark-background-danger-hover);
  --mate-background-danger-active: var(--mate-dark-background-danger-active);
  --mate-data-1: var(--mate-dark-data-1);
  --mate-data-2: var(--mate-dark-data-2);
  --mate-data-3: var(--mate-dark-data-3);
  --mate-data-4: var(--mate-dark-data-4);
  --mate-data-5: var(--mate-dark-data-5);
  --mate-data-6: var(--mate-dark-data-6);
  --mate-data-7: var(--mate-dark-data-7);
  --mate-data-8: var(--mate-dark-data-8);
  --mate-data-9: var(--mate-dark-data-9);
  --mate-data-10: var(--mate-dark-data-10);
  --mate-text-heading: var(--mate-dark-text-heading);
  --mate-text-body: var(--mate-dark-text-body);
  --mate-text-secondary: var(--mate-dark-text-secondary);
  --mate-text-tertiary: var(--mate-dark-text-tertiary);
  --mate-text-disabled: var(--mate-dark-text-disabled);
  --mate-text-danger: var(--mate-dark-text-danger);
  --mate-text-danger-contrast: var(--mate-dark-text-danger-contrast);
  --mate-text-info: var(--mate-dark-text-info);
  --mate-text-info-contrast: var(--mate-dark-text-info-contrast);
  --mate-text-success: var(--mate-dark-text-success);
  --mate-text-success-contrast: var(--mate-dark-text-success-contrast);
  --mate-text-warning: var(--mate-dark-text-warning);
  --mate-text-warning-contrast: var(--mate-dark-text-warning-contrast);
  --mate-text-primary: var(--mate-dark-text-primary);
  --mate-text-primary-contrast: var(--mate-dark-text-primary-contrast);
  --mate-text-neutral: var(--mate-dark-text-neutral);
  --mate-text-neutral-contrast: var(--mate-dark-text-neutral-contrast);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mate-border-base: var(--mate-dark-border-base);
    --mate-border-light: var(--mate-dark-border-light);
    --mate-components-calendar-event-background-blue: var(--mate-dark-components-calendar-event-background-blue);
    --mate-components-calendar-event-background-red: var(--mate-dark-components-calendar-event-background-red);
    --mate-components-calendar-event-background-orange: var(--mate-dark-components-calendar-event-background-orange);
    --mate-components-calendar-event-background-green: var(--mate-dark-components-calendar-event-background-green);
    --mate-components-calendar-event-background-gray: var(--mate-dark-components-calendar-event-background-gray);
    --mate-components-calendar-event-background-magenta: var(--mate-dark-components-calendar-event-background-magenta);
    --mate-components-calendar-event-background-purple: var(--mate-dark-components-calendar-event-background-purple);
    --mate-components-calendar-event-background-yellow: var(--mate-dark-components-calendar-event-background-yellow);
    --mate-components-calendar-event-background-cyan: var(--mate-dark-components-calendar-event-background-cyan);
    --mate-components-calendar-event-background-teal: var(--mate-dark-components-calendar-event-background-teal);
    --mate-components-calendar-event-line-blue: var(--mate-dark-components-calendar-event-line-blue);
    --mate-components-calendar-event-line-red: var(--mate-dark-components-calendar-event-line-red);
    --mate-components-calendar-event-line-orange: var(--mate-dark-components-calendar-event-line-orange);
    --mate-components-calendar-event-line-green: var(--mate-dark-components-calendar-event-line-green);
    --mate-components-calendar-event-line-gray: var(--mate-dark-components-calendar-event-line-gray);
    --mate-components-calendar-event-line-magenta: var(--mate-dark-components-calendar-event-line-magenta);
    --mate-components-calendar-event-line-purple: var(--mate-dark-components-calendar-event-line-purple);
    --mate-components-calendar-event-line-yellow: var(--mate-dark-components-calendar-event-line-yellow);
    --mate-components-calendar-event-line-cyan: var(--mate-dark-components-calendar-event-line-cyan);
    --mate-components-calendar-event-line-teal: var(--mate-dark-components-calendar-event-line-teal);
    --mate-components-date-picker-gradient-background-visible: var(--mate-dark-components-date-picker-gradient-background-visible);
    --mate-components-date-picker-gradient-background-not-visible: var(--mate-dark-components-date-picker-gradient-background-not-visible);
    --mate-components-date-picker-separator: var(--mate-dark-components-date-picker-separator);
    --mate-components-field-background: var(--mate-dark-components-field-background);
    --mate-components-field-background-disabled: var(--mate-dark-components-field-background-disabled);
    --mate-components-field-border-enabled: var(--mate-dark-components-field-border-enabled);
    --mate-components-field-border-hover: var(--mate-dark-components-field-border-hover);
    --mate-components-field-border-active: var(--mate-dark-components-field-border-active);
    --mate-components-field-border-disabled: var(--mate-dark-components-field-border-disabled);
    --mate-components-field-border-read-only: var(--mate-dark-components-field-border-read-only);
    --mate-components-x-range-chart-1: var(--mate-dark-components-x-range-chart-1);
    --mate-components-x-range-chart-2: var(--mate-dark-components-x-range-chart-2);
    --mate-components-x-range-chart-3: var(--mate-dark-components-x-range-chart-3);
    --mate-components-x-range-chart-4: var(--mate-dark-components-x-range-chart-4);
    --mate-components-x-range-chart-5: var(--mate-dark-components-x-range-chart-5);
    --mate-components-x-range-chart-6: var(--mate-dark-components-x-range-chart-6);
    --mate-components-x-range-chart-7: var(--mate-dark-components-x-range-chart-7);
    --mate-components-x-range-chart-8: var(--mate-dark-components-x-range-chart-8);
    --mate-components-x-range-chart-9: var(--mate-dark-components-x-range-chart-9);
    --mate-components-x-range-chart-10: var(--mate-dark-components-x-range-chart-10);
    --mate-components-grid-border: var(--mate-dark-components-grid-border);
    --mate-components-grid-background-selected: var(--mate-dark-components-grid-background-selected);
    --mate-components-grid-background-hover: var(--mate-dark-components-grid-background-hover);
    --mate-components-grid-background-edited: var(--mate-dark-components-grid-background-edited);
    --mate-components-grid-background-danger: var(--mate-dark-components-grid-background-danger);
    --mate-components-akdb-logo-1: var(--mate-dark-components-akdb-logo-1);
    --mate-components-akdb-logo-2: var(--mate-dark-components-akdb-logo-2);
    --mate-components-split-layout-handle: var(--mate-dark-components-split-layout-handle);
    --mate-components-split-layout-border-hover: var(--mate-dark-components-split-layout-border-hover);
    --mate-components-other-stepper-gradient-background: var(--mate-dark-components-other-stepper-gradient-background);
    --mate-components-other-button-border-disabled: var(--mate-dark-components-other-button-border-disabled);
    --mate-components-other-checkbox-background: var(--mate-dark-components-other-checkbox-background);
    --mate-components-other-overlay-background: var(--mate-dark-components-other-overlay-background);
    --mate-components-other-loading-indicator-background: var(--mate-dark-components-other-loading-indicator-background);
    --mate-components-other-multiselect-chip-background: var(--mate-dark-components-other-multiselect-chip-background);
    --mate-components-other-side-panel-badge: var(--mate-dark-components-other-side-panel-badge);
    --mate-components-other-global-header-background: var(--mate-dark-components-other-global-header-background);
    --mate-illustrations-illustration-background: var(--mate-dark-illustrations-illustration-background);
    --mate-illustrations-illustration-color-success: var(--mate-dark-illustrations-illustration-color-success);
    --mate-illustrations-illustration-color-warning: var(--mate-dark-illustrations-illustration-color-warning);
    --mate-illustrations-illustration-color-error: var(--mate-dark-illustrations-illustration-color-error);
    --mate-illustrations-illustration-stroke: var(--mate-dark-illustrations-illustration-stroke);
    --mate-illustrations-illustration-color-level-1: var(--mate-dark-illustrations-illustration-color-level-1);
    --mate-illustrations-illustration-color-level-2: var(--mate-dark-illustrations-illustration-color-level-2);
    --mate-illustrations-illustration-color-level-3: var(--mate-dark-illustrations-illustration-color-level-3);
    --mate-illustrations-illustration-color-level-4: var(--mate-dark-illustrations-illustration-color-level-4);
    --mate-illustrations-illustration-color-level-5: var(--mate-dark-illustrations-illustration-color-level-5);
    --mate-illustrations-illustration-color-level-6: var(--mate-dark-illustrations-illustration-color-level-6);
    --mate-shades-base: var(--mate-dark-shades-base);
    --mate-shades-base-contrast-5pct: var(--mate-dark-shades-base-contrast-5pct);
    --mate-shades-contrast-5pct: var(--mate-dark-shades-contrast-5pct);
    --mate-shades-contrast-10pct: var(--mate-dark-shades-contrast-10pct);
    --mate-shades-contrast-20pct: var(--mate-dark-shades-contrast-20pct);
    --mate-shades-contrast-30pct: var(--mate-dark-shades-contrast-30pct);
    --mate-shades-contrast-40pct: var(--mate-dark-shades-contrast-40pct);
    --mate-shades-contrast-50pct: var(--mate-dark-shades-contrast-50pct);
    --mate-shades-contrast-60pct: var(--mate-dark-shades-contrast-60pct);
    --mate-shades-contrast-70pct: var(--mate-dark-shades-contrast-70pct);
    --mate-shades-contrast-80pct: var(--mate-dark-shades-contrast-80pct);
    --mate-shades-contrast-90pct: var(--mate-dark-shades-contrast-90pct);
    --mate-shades-contrast-100pct: var(--mate-dark-shades-contrast-100pct);
    --mate-shades-shade-10pct: var(--mate-dark-shades-shade-10pct);
    --mate-shades-shade-20pct: var(--mate-dark-shades-shade-20pct);
    --mate-shades-shade-30pct: var(--mate-dark-shades-shade-30pct);
    --mate-shades-shade-40pct: var(--mate-dark-shades-shade-40pct);
    --mate-shades-shade-50pct: var(--mate-dark-shades-shade-50pct);
    --mate-signal-danger: var(--mate-dark-signal-danger);
    --mate-signal-danger-light: var(--mate-dark-signal-danger-light);
    --mate-signal-info: var(--mate-dark-signal-info);
    --mate-signal-info-light: var(--mate-dark-signal-info-light);
    --mate-signal-success: var(--mate-dark-signal-success);
    --mate-signal-success-light: var(--mate-dark-signal-success-light);
    --mate-signal-warning: var(--mate-dark-signal-warning);
    --mate-signal-warning-light: var(--mate-dark-signal-warning-light);
    --mate-signal-primary: var(--mate-dark-signal-primary);
    --mate-signal-primary-light: var(--mate-dark-signal-primary-light);
    --mate-signal-neutral: var(--mate-dark-signal-neutral);
    --mate-signal-neutral-light: var(--mate-dark-signal-neutral-light);
    --mate-icon-danger: var(--mate-dark-icon-danger);
    --mate-icon-success: var(--mate-dark-icon-success);
    --mate-icon-warning: var(--mate-dark-icon-warning);
    --mate-icon-info: var(--mate-dark-icon-info);
    --mate-icon-neutral: var(--mate-dark-icon-neutral);
    --mate-icon-interactive-enabled: var(--mate-dark-icon-interactive-enabled);
    --mate-icon-interactive-hover: var(--mate-dark-icon-interactive-hover);
    --mate-icon-interactive-active: var(--mate-dark-icon-interactive-active);
    --mate-icon-interactive-selected: var(--mate-dark-icon-interactive-selected);
    --mate-icon-interactive-disabled: var(--mate-dark-icon-interactive-disabled);
    --mate-icon-interactive-contrast: var(--mate-dark-icon-interactive-contrast);
    --mate-icon-not-interactive: var(--mate-dark-icon-not-interactive);
    --mate-interactive-focus: var(--mate-dark-interactive-focus);
    --mate-interactive-contrast: var(--mate-dark-interactive-contrast);
    --mate-interactive-danger-enabled: var(--mate-dark-interactive-danger-enabled);
    --mate-interactive-danger-hover: var(--mate-dark-interactive-danger-hover);
    --mate-interactive-danger-active: var(--mate-dark-interactive-danger-active);
    --mate-interactive-danger-selected: var(--mate-dark-interactive-danger-selected);
    --mate-interactive-danger-disabled: var(--mate-dark-interactive-danger-disabled);
    --mate-interactive-enabled: var(--mate-dark-interactive-enabled);
    --mate-interactive-hover: var(--mate-dark-interactive-hover);
    --mate-interactive-active: var(--mate-dark-interactive-active);
    --mate-interactive-selected: var(--mate-dark-interactive-selected);
    --mate-interactive-disabled: var(--mate-dark-interactive-disabled);
    --mate-background-base: var(--mate-dark-background-base);
    --mate-background-highlighted: var(--mate-dark-background-highlighted);
    --mate-background-interactive-enabled: var(--mate-dark-background-interactive-enabled);
    --mate-background-interactive-hover: var(--mate-dark-background-interactive-hover);
    --mate-background-interactive-active: var(--mate-dark-background-interactive-active);
    --mate-background-interactive-selected: var(--mate-dark-background-interactive-selected);
    --mate-background-interactive-disabled: var(--mate-dark-background-interactive-disabled);
    --mate-background-danger-hover: var(--mate-dark-background-danger-hover);
    --mate-background-danger-active: var(--mate-dark-background-danger-active);
    --mate-data-1: var(--mate-dark-data-1);
    --mate-data-2: var(--mate-dark-data-2);
    --mate-data-3: var(--mate-dark-data-3);
    --mate-data-4: var(--mate-dark-data-4);
    --mate-data-5: var(--mate-dark-data-5);
    --mate-data-6: var(--mate-dark-data-6);
    --mate-data-7: var(--mate-dark-data-7);
    --mate-data-8: var(--mate-dark-data-8);
    --mate-data-9: var(--mate-dark-data-9);
    --mate-data-10: var(--mate-dark-data-10);
    --mate-text-heading: var(--mate-dark-text-heading);
    --mate-text-body: var(--mate-dark-text-body);
    --mate-text-secondary: var(--mate-dark-text-secondary);
    --mate-text-tertiary: var(--mate-dark-text-tertiary);
    --mate-text-disabled: var(--mate-dark-text-disabled);
    --mate-text-danger: var(--mate-dark-text-danger);
    --mate-text-danger-contrast: var(--mate-dark-text-danger-contrast);
    --mate-text-info: var(--mate-dark-text-info);
    --mate-text-info-contrast: var(--mate-dark-text-info-contrast);
    --mate-text-success: var(--mate-dark-text-success);
    --mate-text-success-contrast: var(--mate-dark-text-success-contrast);
    --mate-text-warning: var(--mate-dark-text-warning);
    --mate-text-warning-contrast: var(--mate-dark-text-warning-contrast);
    --mate-text-primary: var(--mate-dark-text-primary);
    --mate-text-primary-contrast: var(--mate-dark-text-primary-contrast);
    --mate-text-neutral: var(--mate-dark-text-neutral);
    --mate-text-neutral-contrast: var(--mate-dark-text-neutral-contrast);
  }
}/**
 * MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
 */

:root {
  --mate-desktop-typography-heading-xs-line-height: 1.3rem;
  --mate-desktop-typography-heading-sm-line-height: 1.5rem;
  --mate-desktop-typography-heading-md-line-height: 1.7rem;
  --mate-desktop-typography-heading-lg-line-height: 1.9rem;
  --mate-desktop-typography-heading-xl-line-height: 1.9rem;
  --mate-desktop-typography-heading-xxl-line-height: 2.25rem;
  --mate-desktop-typography-body-xs-regular-line-height: 1.125rem;
  --mate-desktop-typography-body-xs-medium-line-height: 1.125rem;
  --mate-desktop-typography-body-xs-bold-line-height: 1.125rem;
  --mate-desktop-typography-body-sm-regular-line-height: 1.3rem;
  --mate-desktop-typography-body-sm-medium-line-height: 1.3rem;
  --mate-desktop-typography-body-sm-bold-line-height: 1.3rem;
  --mate-desktop-typography-body-md-regular-line-height: 1.5rem;
  --mate-desktop-typography-body-md-medium-line-height: 1.5rem;
  --mate-desktop-typography-body-md-bold-line-height: 1.5rem;
  --mate-desktop-typography-body-lg-regular-line-height: 1.7rem;
  --mate-desktop-typography-body-lg-medium-line-height: 1.7rem;
  --mate-desktop-typography-body-lg-bold-line-height: 1.7rem;
  --mate-desktop-typography-label-xs-regular-line-height: 1.125rem;
  --mate-desktop-typography-label-xs-medium-line-height: 1.125rem;
  --mate-desktop-typography-label-xs-bold-line-height: 1.125rem;
  --mate-desktop-typography-label-sm-regular-line-height: 1.3rem;
  --mate-desktop-typography-label-sm-medium-line-height: 1.3rem;
  --mate-desktop-typography-label-sm-bold-line-height: 1.3rem;
  --mate-desktop-typography-label-md-regular-line-height: 1.5rem;
  --mate-desktop-typography-label-md-medium-line-height: 1.5rem;
  --mate-desktop-typography-label-md-bold-line-height: 1.5rem;
  --mate-desktop-typography-label-lg-regular-line-height: 1.7rem;
  --mate-desktop-typography-label-lg-medium-line-height: 1.7rem;
  --mate-desktop-typography-label-lg-bold-line-height: 1.7rem;
  --mate-desktop-icon-sizing-sm-md: 1.25rem;
  --mate-desktop-components-input-error-icon-container: 1.3rem;
  --mate-desktop-components-input-help-icon-container: 1.5rem;
  --mate-desktop-components-input-lookup-divider-height: 2.125rem;
  --mate-desktop-components-facets-info-icon-container-sm: 1.3rem;
  --mate-desktop-components-facets-info-icon-container-md: 1.5rem;
  --mate-desktop-components-facets-info-icon-container-lg: 1.7rem;
  --mate-desktop-components-radio-button-small-circle: 0.375rem;
  --mate-desktop-components-checkbox-checkbox-size: 1.125rem;
  --mate-mobile-typography-heading-xs-line-height: 1.4rem;
  --mate-mobile-typography-heading-sm-line-height: 1.7rem;
  --mate-mobile-typography-heading-md-line-height: 1.9rem;
  --mate-mobile-typography-heading-lg-line-height: 1.9rem;
  --mate-mobile-typography-heading-xl-line-height: 2.5rem;
  --mate-mobile-typography-heading-xxl-line-height: 2.5rem;
  --mate-mobile-typography-body-xs-regular-line-height: 1.3rem;
  --mate-mobile-typography-body-xs-medium-line-height: 1.3rem;
  --mate-mobile-typography-body-xs-bold-line-height: 1.3rem;
  --mate-mobile-typography-body-sm-regular-line-height: 1.5rem;
  --mate-mobile-typography-body-sm-medium-line-height: 1.5rem;
  --mate-mobile-typography-body-sm-bold-line-height: 1.5rem;
  --mate-mobile-typography-body-md-regular-line-height: 1.7rem;
  --mate-mobile-typography-body-md-medium-line-height: 1.7rem;
  --mate-mobile-typography-body-md-bold-line-height: 1.7rem;
  --mate-mobile-typography-body-lg-regular-line-height: 1.875rem;
  --mate-mobile-typography-body-lg-medium-line-height: 1.875rem;
  --mate-mobile-typography-body-lg-bold-line-height: 1.875rem;
  --mate-mobile-typography-label-xs-regular-line-height: 1.3rem;
  --mate-mobile-typography-label-xs-medium-line-height: 1.3rem;
  --mate-mobile-typography-label-xs-bold-line-height: 1.3rem;
  --mate-mobile-typography-label-sm-regular-line-height: 1.5rem;
  --mate-mobile-typography-label-sm-medium-line-height: 1.5rem;
  --mate-mobile-typography-label-sm-bold-line-height: 1.5rem;
  --mate-mobile-typography-label-md-regular-line-height: 1.7rem;
  --mate-mobile-typography-label-md-medium-line-height: 1.7rem;
  --mate-mobile-typography-label-md-bold-line-height: 1.7rem;
  --mate-mobile-typography-label-lg-regular-line-height: 1.875rem;
  --mate-mobile-typography-label-lg-medium-line-height: 1.875rem;
  --mate-mobile-typography-label-lg-bold-line-height: 1.875rem;
  --mate-mobile-icon-sizing-sm-md: 1.625rem;
  --mate-mobile-components-input-error-icon-container: 1.5rem;
  --mate-mobile-components-input-help-icon-container: 1.7rem;
  --mate-mobile-components-input-lookup-divider-height: 2.875rem;
  --mate-mobile-components-facets-info-icon-container-sm: 1.5rem;
  --mate-mobile-components-facets-info-icon-container-md: 1.7rem;
  --mate-mobile-components-facets-info-icon-container-lg: 1.875rem;
  --mate-mobile-components-radio-button-small-circle: 0.5625rem;
  --mate-mobile-components-checkbox-checkbox-size: 1.5rem;
  --mate-desktop-typography-heading-xs-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-heading-xs-font-size: var(--mate-typography-font-sizing-100);
  --mate-desktop-typography-heading-xs-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-heading-sm-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-heading-sm-font-size: var(--mate-typography-font-sizing-112);
  --mate-desktop-typography-heading-sm-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-heading-md-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-heading-md-font-size: var(--mate-typography-font-sizing-125);
  --mate-desktop-typography-heading-md-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-heading-lg-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-heading-lg-font-size: var(--mate-typography-font-sizing-150);
  --mate-desktop-typography-heading-lg-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-heading-xl-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-heading-xl-font-size: var(--mate-typography-font-sizing-175);
  --mate-desktop-typography-heading-xl-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-heading-xxl-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-heading-xxl-font-size: var(--mate-typography-font-sizing-200);
  --mate-desktop-typography-heading-xxl-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-body-xs-regular-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-xs-regular-font-size: var(--mate-typography-font-sizing-075);
  --mate-desktop-typography-body-xs-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-desktop-typography-body-xs-medium-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-xs-medium-font-size: var(--mate-typography-font-sizing-075);
  --mate-desktop-typography-body-xs-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-body-xs-bold-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-xs-bold-font-size: var(--mate-typography-font-sizing-075);
  --mate-desktop-typography-body-xs-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-body-sm-regular-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-sm-regular-font-size: var(--mate-typography-font-sizing-087);
  --mate-desktop-typography-body-sm-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-desktop-typography-body-sm-medium-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-sm-medium-font-size: var(--mate-typography-font-sizing-087);
  --mate-desktop-typography-body-sm-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-body-sm-bold-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-sm-bold-font-size: var(--mate-typography-font-sizing-087);
  --mate-desktop-typography-body-sm-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-body-md-regular-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-md-regular-font-size: var(--mate-typography-font-sizing-100);
  --mate-desktop-typography-body-md-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-desktop-typography-body-md-medium-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-md-medium-font-size: var(--mate-typography-font-sizing-100);
  --mate-desktop-typography-body-md-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-body-md-bold-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-md-bold-font-size: var(--mate-typography-font-sizing-100);
  --mate-desktop-typography-body-md-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-body-lg-regular-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-lg-regular-font-size: var(--mate-typography-font-sizing-112);
  --mate-desktop-typography-body-lg-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-desktop-typography-body-lg-medium-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-lg-medium-font-size: var(--mate-typography-font-sizing-112);
  --mate-desktop-typography-body-lg-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-body-lg-bold-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-body-lg-bold-font-size: var(--mate-typography-font-sizing-112);
  --mate-desktop-typography-body-lg-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-label-xs-regular-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-xs-regular-font-size: var(--mate-typography-font-sizing-075);
  --mate-desktop-typography-label-xs-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-desktop-typography-label-xs-medium-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-xs-medium-font-size: var(--mate-typography-font-sizing-075);
  --mate-desktop-typography-label-xs-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-label-xs-bold-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-xs-bold-font-size: var(--mate-typography-font-sizing-075);
  --mate-desktop-typography-label-xs-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-label-sm-regular-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-sm-regular-font-size: var(--mate-typography-font-sizing-087);
  --mate-desktop-typography-label-sm-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-desktop-typography-label-sm-medium-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-sm-medium-font-size: var(--mate-typography-font-sizing-087);
  --mate-desktop-typography-label-sm-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-label-sm-bold-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-sm-bold-font-size: var(--mate-typography-font-sizing-087);
  --mate-desktop-typography-label-sm-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-label-md-regular-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-md-regular-font-size: var(--mate-typography-font-sizing-100);
  --mate-desktop-typography-label-md-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-desktop-typography-label-md-medium-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-md-medium-font-size: var(--mate-typography-font-sizing-100);
  --mate-desktop-typography-label-md-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-label-md-bold-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-md-bold-font-size: var(--mate-typography-font-sizing-100);
  --mate-desktop-typography-label-md-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-typography-label-lg-regular-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-lg-regular-font-size: var(--mate-typography-font-sizing-112);
  --mate-desktop-typography-label-lg-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-desktop-typography-label-lg-medium-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-lg-medium-font-size: var(--mate-typography-font-sizing-112);
  --mate-desktop-typography-label-lg-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-desktop-typography-label-lg-bold-font-family: var(--mate-typography-font-family);
  --mate-desktop-typography-label-lg-bold-font-size: var(--mate-typography-font-sizing-112);
  --mate-desktop-typography-label-lg-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-desktop-sizing-xxxxs: var(--mate-sizing-012);
  --mate-desktop-sizing-xxxs: var(--mate-sizing-025);
  --mate-desktop-sizing-xxs: var(--mate-sizing-050);
  --mate-desktop-sizing-xs: var(--mate-sizing-100);
  --mate-desktop-sizing-sm: var(--mate-sizing-150);
  --mate-desktop-sizing-md: var(--mate-sizing-200);
  --mate-desktop-sizing-md-lg: var(--mate-sizing-225);
  --mate-desktop-sizing-lg: var(--mate-sizing-250);
  --mate-desktop-sizing-xl: var(--mate-sizing-300);
  --mate-desktop-sizing-xxl: var(--mate-sizing-350);
  --mate-desktop-sizing-xxxl: var(--mate-sizing-400);
  --mate-desktop-spacing-zero: var(--mate-spacing-000);
  --mate-desktop-spacing-xxxs: var(--mate-spacing-012);
  --mate-desktop-spacing-xxs: var(--mate-spacing-025);
  --mate-desktop-spacing-xs: var(--mate-spacing-050);
  --mate-desktop-spacing-sm: var(--mate-spacing-075);
  --mate-desktop-spacing-md: var(--mate-spacing-100);
  --mate-desktop-spacing-lg: var(--mate-spacing-125);
  --mate-desktop-spacing-xl: var(--mate-spacing-150);
  --mate-desktop-spacing-xxl: var(--mate-spacing-200);
  --mate-desktop-spacing-xxxl: var(--mate-spacing-250);
  --mate-desktop-corner-radius-sm: var(--mate-border-radius-012);
  --mate-desktop-corner-radius-md: var(--mate-border-radius-025);
  --mate-desktop-corner-radius-lg: var(--mate-border-radius-050);
  --mate-desktop-border-width-sm: var(--mate-border-width-006);
  --mate-desktop-border-width-md: var(--mate-border-width-012);
  --mate-desktop-border-width-lg: var(--mate-border-width-025);
  --mate-mobile-typography-heading-xs-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-heading-xs-font-size: var(--mate-typography-font-sizing-112);
  --mate-mobile-typography-heading-xs-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-heading-sm-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-heading-sm-font-size: var(--mate-typography-font-sizing-125);
  --mate-mobile-typography-heading-sm-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-heading-md-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-heading-md-font-size: var(--mate-typography-font-sizing-150);
  --mate-mobile-typography-heading-md-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-heading-lg-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-heading-lg-font-size: var(--mate-typography-font-sizing-175);
  --mate-mobile-typography-heading-lg-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-heading-xl-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-heading-xl-font-size: var(--mate-typography-font-sizing-200);
  --mate-mobile-typography-heading-xl-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-heading-xxl-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-heading-xxl-font-size: var(--mate-typography-font-sizing-200);
  --mate-mobile-typography-heading-xxl-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-body-xs-regular-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-xs-regular-font-size: var(--mate-typography-font-sizing-087);
  --mate-mobile-typography-body-xs-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-mobile-typography-body-xs-medium-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-xs-medium-font-size: var(--mate-typography-font-sizing-087);
  --mate-mobile-typography-body-xs-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-body-xs-bold-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-xs-bold-font-size: var(--mate-typography-font-sizing-087);
  --mate-mobile-typography-body-xs-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-body-sm-regular-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-sm-regular-font-size: var(--mate-typography-font-sizing-100);
  --mate-mobile-typography-body-sm-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-mobile-typography-body-sm-medium-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-sm-medium-font-size: var(--mate-typography-font-sizing-100);
  --mate-mobile-typography-body-sm-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-body-sm-bold-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-sm-bold-font-size: var(--mate-typography-font-sizing-100);
  --mate-mobile-typography-body-sm-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-body-md-regular-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-md-regular-font-size: var(--mate-typography-font-sizing-112);
  --mate-mobile-typography-body-md-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-mobile-typography-body-md-medium-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-md-medium-font-size: var(--mate-typography-font-sizing-112);
  --mate-mobile-typography-body-md-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-body-md-bold-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-md-bold-font-size: var(--mate-typography-font-sizing-112);
  --mate-mobile-typography-body-md-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-body-lg-regular-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-lg-regular-font-size: var(--mate-typography-font-sizing-125);
  --mate-mobile-typography-body-lg-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-mobile-typography-body-lg-medium-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-lg-medium-font-size: var(--mate-typography-font-sizing-125);
  --mate-mobile-typography-body-lg-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-body-lg-bold-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-body-lg-bold-font-size: var(--mate-typography-font-sizing-125);
  --mate-mobile-typography-body-lg-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-label-xs-regular-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-xs-regular-font-size: var(--mate-typography-font-sizing-087);
  --mate-mobile-typography-label-xs-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-mobile-typography-label-xs-medium-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-xs-medium-font-size: var(--mate-typography-font-sizing-087);
  --mate-mobile-typography-label-xs-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-label-xs-bold-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-xs-bold-font-size: var(--mate-typography-font-sizing-087);
  --mate-mobile-typography-label-xs-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-label-sm-regular-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-sm-regular-font-size: var(--mate-typography-font-sizing-100);
  --mate-mobile-typography-label-sm-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-mobile-typography-label-sm-medium-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-sm-medium-font-size: var(--mate-typography-font-sizing-100);
  --mate-mobile-typography-label-sm-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-label-sm-bold-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-sm-bold-font-size: var(--mate-typography-font-sizing-100);
  --mate-mobile-typography-label-sm-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-label-md-regular-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-md-regular-font-size: var(--mate-typography-font-sizing-112);
  --mate-mobile-typography-label-md-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-mobile-typography-label-md-medium-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-md-medium-font-size: var(--mate-typography-font-sizing-112);
  --mate-mobile-typography-label-md-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-label-md-bold-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-md-bold-font-size: var(--mate-typography-font-sizing-112);
  --mate-mobile-typography-label-md-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-typography-label-lg-regular-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-lg-regular-font-size: var(--mate-typography-font-sizing-125);
  --mate-mobile-typography-label-lg-regular-font-weight: var(--mate-typography-font-weight-regular);
  --mate-mobile-typography-label-lg-medium-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-lg-medium-font-size: var(--mate-typography-font-sizing-125);
  --mate-mobile-typography-label-lg-medium-font-weight: var(--mate-typography-font-weight-medium);
  --mate-mobile-typography-label-lg-bold-font-family: var(--mate-typography-font-family);
  --mate-mobile-typography-label-lg-bold-font-size: var(--mate-typography-font-sizing-125);
  --mate-mobile-typography-label-lg-bold-font-weight: var(--mate-typography-font-weight-bold);
  --mate-mobile-sizing-xxxxs: var(--mate-sizing-012);
  --mate-mobile-sizing-xxxs: var(--mate-sizing-025);
  --mate-mobile-sizing-xxs: var(--mate-sizing-050);
  --mate-mobile-sizing-xs: var(--mate-sizing-100);
  --mate-mobile-sizing-sm: var(--mate-sizing-150);
  --mate-mobile-sizing-md: var(--mate-sizing-200);
  --mate-mobile-sizing-md-lg: var(--mate-sizing-225);
  --mate-mobile-sizing-lg: var(--mate-sizing-250);
  --mate-mobile-sizing-xl: var(--mate-sizing-300);
  --mate-mobile-sizing-xxl: var(--mate-sizing-350);
  --mate-mobile-sizing-xxxl: var(--mate-sizing-400);
  --mate-mobile-spacing-zero: var(--mate-spacing-000);
  --mate-mobile-spacing-xxxs: var(--mate-spacing-025);
  --mate-mobile-spacing-xxs: var(--mate-spacing-050);
  --mate-mobile-spacing-xs: var(--mate-spacing-075);
  --mate-mobile-spacing-sm: var(--mate-spacing-100);
  --mate-mobile-spacing-md: var(--mate-spacing-125);
  --mate-mobile-spacing-lg: var(--mate-spacing-150);
  --mate-mobile-spacing-xl: var(--mate-spacing-200);
  --mate-mobile-spacing-xxl: var(--mate-spacing-250);
  --mate-mobile-spacing-xxxl: var(--mate-spacing-300);
  --mate-mobile-corner-radius-sm: var(--mate-border-radius-012);
  --mate-mobile-corner-radius-md: var(--mate-border-radius-025);
  --mate-mobile-corner-radius-lg: var(--mate-border-radius-050);
  --mate-mobile-border-width-sm: var(--mate-border-width-006);
  --mate-mobile-border-width-md: var(--mate-border-width-012);
  --mate-mobile-border-width-lg: var(--mate-border-width-025);
  --mate-desktop-spacing-padding: var(--mate-desktop-spacing-md);
  --mate-desktop-spacing-margin: var(--mate-desktop-spacing-md);
  --mate-desktop-touch-target-touch-target-height: var(--mate-desktop-sizing-md-lg);
  --mate-desktop-icon-sizing-sm: var(--mate-desktop-sizing-xs);
  --mate-desktop-icon-sizing-md: var(--mate-desktop-sizing-sm);
  --mate-desktop-icon-sizing-lg: var(--mate-desktop-sizing-md);
  --mate-desktop-components-input-chips-height: var(--mate-desktop-sizing-sm);
  --mate-desktop-components-input-input-height: var(--mate-desktop-sizing-md-lg);
  --mate-desktop-components-global-header-global-header-height: var(--mate-desktop-sizing-xxl);
  --mate-desktop-components-notification-bar-close-button-container: var(--mate-desktop-sizing-md);
  --mate-desktop-components-stepper-stepper-height: var(--mate-desktop-sizing-xxl);
  --mate-desktop-components-button-button-height: var(--mate-desktop-sizing-md-lg);
  --mate-mobile-spacing-padding: var(--mate-mobile-spacing-md);
  --mate-mobile-spacing-margin: var(--mate-mobile-spacing-md);
  --mate-mobile-touch-target-touch-target-height: var(--mate-mobile-sizing-xl);
  --mate-mobile-icon-sizing-sm: var(--mate-mobile-sizing-sm);
  --mate-mobile-icon-sizing-md: var(--mate-mobile-sizing-md);
  --mate-mobile-icon-sizing-lg: var(--mate-mobile-sizing-lg);
  --mate-mobile-components-input-chips-height: var(--mate-mobile-sizing-md);
  --mate-mobile-components-input-input-height: var(--mate-mobile-sizing-xl);
  --mate-mobile-components-global-header-global-header-height: var(--mate-mobile-sizing-xxxl);
  --mate-mobile-components-notification-bar-close-button-container: var(--mate-mobile-sizing-lg);
  --mate-mobile-components-stepper-stepper-height: var(--mate-mobile-sizing-xxxl);
  --mate-mobile-components-button-button-height: var(--mate-mobile-sizing-xl);
}
/**
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

:root,
[theme~="desktop"] {
  --mate-typography-heading-xs-font-family: var(--mate-desktop-typography-heading-xs-font-family);
  --mate-typography-heading-xs-font-size: var(--mate-desktop-typography-heading-xs-font-size);
  --mate-typography-heading-xs-line-height: var(--mate-desktop-typography-heading-xs-line-height);
  --mate-typography-heading-xs-font-weight: var(--mate-desktop-typography-heading-xs-font-weight);
  --mate-typography-heading-sm-font-family: var(--mate-desktop-typography-heading-sm-font-family);
  --mate-typography-heading-sm-font-size: var(--mate-desktop-typography-heading-sm-font-size);
  --mate-typography-heading-sm-line-height: var(--mate-desktop-typography-heading-sm-line-height);
  --mate-typography-heading-sm-font-weight: var(--mate-desktop-typography-heading-sm-font-weight);
  --mate-typography-heading-md-font-family: var(--mate-desktop-typography-heading-md-font-family);
  --mate-typography-heading-md-font-size: var(--mate-desktop-typography-heading-md-font-size);
  --mate-typography-heading-md-line-height: var(--mate-desktop-typography-heading-md-line-height);
  --mate-typography-heading-md-font-weight: var(--mate-desktop-typography-heading-md-font-weight);
  --mate-typography-heading-lg-font-family: var(--mate-desktop-typography-heading-lg-font-family);
  --mate-typography-heading-lg-font-size: var(--mate-desktop-typography-heading-lg-font-size);
  --mate-typography-heading-lg-line-height: var(--mate-desktop-typography-heading-lg-line-height);
  --mate-typography-heading-lg-font-weight: var(--mate-desktop-typography-heading-lg-font-weight);
  --mate-typography-heading-xl-font-family: var(--mate-desktop-typography-heading-xl-font-family);
  --mate-typography-heading-xl-font-size: var(--mate-desktop-typography-heading-xl-font-size);
  --mate-typography-heading-xl-line-height: var(--mate-desktop-typography-heading-xl-line-height);
  --mate-typography-heading-xl-font-weight: var(--mate-desktop-typography-heading-xl-font-weight);
  --mate-typography-heading-xxl-font-family: var(--mate-desktop-typography-heading-xxl-font-family);
  --mate-typography-heading-xxl-font-size: var(--mate-desktop-typography-heading-xxl-font-size);
  --mate-typography-heading-xxl-line-height: var(--mate-desktop-typography-heading-xxl-line-height);
  --mate-typography-heading-xxl-font-weight: var(--mate-desktop-typography-heading-xxl-font-weight);
  --mate-typography-body-xs-regular-font-family: var(--mate-desktop-typography-body-xs-regular-font-family);
  --mate-typography-body-xs-regular-font-size: var(--mate-desktop-typography-body-xs-regular-font-size);
  --mate-typography-body-xs-regular-line-height: var(--mate-desktop-typography-body-xs-regular-line-height);
  --mate-typography-body-xs-regular-font-weight: var(--mate-desktop-typography-body-xs-regular-font-weight);
  --mate-typography-body-xs-medium-font-family: var(--mate-desktop-typography-body-xs-medium-font-family);
  --mate-typography-body-xs-medium-font-size: var(--mate-desktop-typography-body-xs-medium-font-size);
  --mate-typography-body-xs-medium-line-height: var(--mate-desktop-typography-body-xs-medium-line-height);
  --mate-typography-body-xs-medium-font-weight: var(--mate-desktop-typography-body-xs-medium-font-weight);
  --mate-typography-body-xs-bold-font-family: var(--mate-desktop-typography-body-xs-bold-font-family);
  --mate-typography-body-xs-bold-font-size: var(--mate-desktop-typography-body-xs-bold-font-size);
  --mate-typography-body-xs-bold-line-height: var(--mate-desktop-typography-body-xs-bold-line-height);
  --mate-typography-body-xs-bold-font-weight: var(--mate-desktop-typography-body-xs-bold-font-weight);
  --mate-typography-body-sm-regular-font-family: var(--mate-desktop-typography-body-sm-regular-font-family);
  --mate-typography-body-sm-regular-font-size: var(--mate-desktop-typography-body-sm-regular-font-size);
  --mate-typography-body-sm-regular-line-height: var(--mate-desktop-typography-body-sm-regular-line-height);
  --mate-typography-body-sm-regular-font-weight: var(--mate-desktop-typography-body-sm-regular-font-weight);
  --mate-typography-body-sm-medium-font-family: var(--mate-desktop-typography-body-sm-medium-font-family);
  --mate-typography-body-sm-medium-font-size: var(--mate-desktop-typography-body-sm-medium-font-size);
  --mate-typography-body-sm-medium-line-height: var(--mate-desktop-typography-body-sm-medium-line-height);
  --mate-typography-body-sm-medium-font-weight: var(--mate-desktop-typography-body-sm-medium-font-weight);
  --mate-typography-body-sm-bold-font-family: var(--mate-desktop-typography-body-sm-bold-font-family);
  --mate-typography-body-sm-bold-font-size: var(--mate-desktop-typography-body-sm-bold-font-size);
  --mate-typography-body-sm-bold-line-height: var(--mate-desktop-typography-body-sm-bold-line-height);
  --mate-typography-body-sm-bold-font-weight: var(--mate-desktop-typography-body-sm-bold-font-weight);
  --mate-typography-body-md-regular-font-family: var(--mate-desktop-typography-body-md-regular-font-family);
  --mate-typography-body-md-regular-font-size: var(--mate-desktop-typography-body-md-regular-font-size);
  --mate-typography-body-md-regular-line-height: var(--mate-desktop-typography-body-md-regular-line-height);
  --mate-typography-body-md-regular-font-weight: var(--mate-desktop-typography-body-md-regular-font-weight);
  --mate-typography-body-md-medium-font-family: var(--mate-desktop-typography-body-md-medium-font-family);
  --mate-typography-body-md-medium-font-size: var(--mate-desktop-typography-body-md-medium-font-size);
  --mate-typography-body-md-medium-line-height: var(--mate-desktop-typography-body-md-medium-line-height);
  --mate-typography-body-md-medium-font-weight: var(--mate-desktop-typography-body-md-medium-font-weight);
  --mate-typography-body-md-bold-font-family: var(--mate-desktop-typography-body-md-bold-font-family);
  --mate-typography-body-md-bold-font-size: var(--mate-desktop-typography-body-md-bold-font-size);
  --mate-typography-body-md-bold-line-height: var(--mate-desktop-typography-body-md-bold-line-height);
  --mate-typography-body-md-bold-font-weight: var(--mate-desktop-typography-body-md-bold-font-weight);
  --mate-typography-body-lg-regular-font-family: var(--mate-desktop-typography-body-lg-regular-font-family);
  --mate-typography-body-lg-regular-font-size: var(--mate-desktop-typography-body-lg-regular-font-size);
  --mate-typography-body-lg-regular-line-height: var(--mate-desktop-typography-body-lg-regular-line-height);
  --mate-typography-body-lg-regular-font-weight: var(--mate-desktop-typography-body-lg-regular-font-weight);
  --mate-typography-body-lg-medium-font-family: var(--mate-desktop-typography-body-lg-medium-font-family);
  --mate-typography-body-lg-medium-font-size: var(--mate-desktop-typography-body-lg-medium-font-size);
  --mate-typography-body-lg-medium-line-height: var(--mate-desktop-typography-body-lg-medium-line-height);
  --mate-typography-body-lg-medium-font-weight: var(--mate-desktop-typography-body-lg-medium-font-weight);
  --mate-typography-body-lg-bold-font-family: var(--mate-desktop-typography-body-lg-bold-font-family);
  --mate-typography-body-lg-bold-font-size: var(--mate-desktop-typography-body-lg-bold-font-size);
  --mate-typography-body-lg-bold-line-height: var(--mate-desktop-typography-body-lg-bold-line-height);
  --mate-typography-body-lg-bold-font-weight: var(--mate-desktop-typography-body-lg-bold-font-weight);
  --mate-typography-label-xs-regular-font-family: var(--mate-desktop-typography-label-xs-regular-font-family);
  --mate-typography-label-xs-regular-font-size: var(--mate-desktop-typography-label-xs-regular-font-size);
  --mate-typography-label-xs-regular-line-height: var(--mate-desktop-typography-label-xs-regular-line-height);
  --mate-typography-label-xs-regular-font-weight: var(--mate-desktop-typography-label-xs-regular-font-weight);
  --mate-typography-label-xs-medium-font-family: var(--mate-desktop-typography-label-xs-medium-font-family);
  --mate-typography-label-xs-medium-font-size: var(--mate-desktop-typography-label-xs-medium-font-size);
  --mate-typography-label-xs-medium-line-height: var(--mate-desktop-typography-label-xs-medium-line-height);
  --mate-typography-label-xs-medium-font-weight: var(--mate-desktop-typography-label-xs-medium-font-weight);
  --mate-typography-label-xs-bold-font-family: var(--mate-desktop-typography-label-xs-bold-font-family);
  --mate-typography-label-xs-bold-font-size: var(--mate-desktop-typography-label-xs-bold-font-size);
  --mate-typography-label-xs-bold-line-height: var(--mate-desktop-typography-label-xs-bold-line-height);
  --mate-typography-label-xs-bold-font-weight: var(--mate-desktop-typography-label-xs-bold-font-weight);
  --mate-typography-label-sm-regular-font-family: var(--mate-desktop-typography-label-sm-regular-font-family);
  --mate-typography-label-sm-regular-font-size: var(--mate-desktop-typography-label-sm-regular-font-size);
  --mate-typography-label-sm-regular-line-height: var(--mate-desktop-typography-label-sm-regular-line-height);
  --mate-typography-label-sm-regular-font-weight: var(--mate-desktop-typography-label-sm-regular-font-weight);
  --mate-typography-label-sm-medium-font-family: var(--mate-desktop-typography-label-sm-medium-font-family);
  --mate-typography-label-sm-medium-font-size: var(--mate-desktop-typography-label-sm-medium-font-size);
  --mate-typography-label-sm-medium-line-height: var(--mate-desktop-typography-label-sm-medium-line-height);
  --mate-typography-label-sm-medium-font-weight: var(--mate-desktop-typography-label-sm-medium-font-weight);
  --mate-typography-label-sm-bold-font-family: var(--mate-desktop-typography-label-sm-bold-font-family);
  --mate-typography-label-sm-bold-font-size: var(--mate-desktop-typography-label-sm-bold-font-size);
  --mate-typography-label-sm-bold-line-height: var(--mate-desktop-typography-label-sm-bold-line-height);
  --mate-typography-label-sm-bold-font-weight: var(--mate-desktop-typography-label-sm-bold-font-weight);
  --mate-typography-label-md-regular-font-family: var(--mate-desktop-typography-label-md-regular-font-family);
  --mate-typography-label-md-regular-font-size: var(--mate-desktop-typography-label-md-regular-font-size);
  --mate-typography-label-md-regular-line-height: var(--mate-desktop-typography-label-md-regular-line-height);
  --mate-typography-label-md-regular-font-weight: var(--mate-desktop-typography-label-md-regular-font-weight);
  --mate-typography-label-md-medium-font-family: var(--mate-desktop-typography-label-md-medium-font-family);
  --mate-typography-label-md-medium-font-size: var(--mate-desktop-typography-label-md-medium-font-size);
  --mate-typography-label-md-medium-line-height: var(--mate-desktop-typography-label-md-medium-line-height);
  --mate-typography-label-md-medium-font-weight: var(--mate-desktop-typography-label-md-medium-font-weight);
  --mate-typography-label-md-bold-font-family: var(--mate-desktop-typography-label-md-bold-font-family);
  --mate-typography-label-md-bold-font-size: var(--mate-desktop-typography-label-md-bold-font-size);
  --mate-typography-label-md-bold-line-height: var(--mate-desktop-typography-label-md-bold-line-height);
  --mate-typography-label-md-bold-font-weight: var(--mate-desktop-typography-label-md-bold-font-weight);
  --mate-typography-label-lg-regular-font-family: var(--mate-desktop-typography-label-lg-regular-font-family);
  --mate-typography-label-lg-regular-font-size: var(--mate-desktop-typography-label-lg-regular-font-size);
  --mate-typography-label-lg-regular-line-height: var(--mate-desktop-typography-label-lg-regular-line-height);
  --mate-typography-label-lg-regular-font-weight: var(--mate-desktop-typography-label-lg-regular-font-weight);
  --mate-typography-label-lg-medium-font-family: var(--mate-desktop-typography-label-lg-medium-font-family);
  --mate-typography-label-lg-medium-font-size: var(--mate-desktop-typography-label-lg-medium-font-size);
  --mate-typography-label-lg-medium-line-height: var(--mate-desktop-typography-label-lg-medium-line-height);
  --mate-typography-label-lg-medium-font-weight: var(--mate-desktop-typography-label-lg-medium-font-weight);
  --mate-typography-label-lg-bold-font-family: var(--mate-desktop-typography-label-lg-bold-font-family);
  --mate-typography-label-lg-bold-font-size: var(--mate-desktop-typography-label-lg-bold-font-size);
  --mate-typography-label-lg-bold-line-height: var(--mate-desktop-typography-label-lg-bold-line-height);
  --mate-typography-label-lg-bold-font-weight: var(--mate-desktop-typography-label-lg-bold-font-weight);
  --mate-sizing-xxxxs: var(--mate-desktop-sizing-xxxxs);
  --mate-sizing-xxxs: var(--mate-desktop-sizing-xxxs);
  --mate-sizing-xxs: var(--mate-desktop-sizing-xxs);
  --mate-sizing-xs: var(--mate-desktop-sizing-xs);
  --mate-sizing-sm: var(--mate-desktop-sizing-sm);
  --mate-sizing-md: var(--mate-desktop-sizing-md);
  --mate-sizing-md-lg: var(--mate-desktop-sizing-md-lg);
  --mate-sizing-lg: var(--mate-desktop-sizing-lg);
  --mate-sizing-xl: var(--mate-desktop-sizing-xl);
  --mate-sizing-xxl: var(--mate-desktop-sizing-xxl);
  --mate-sizing-xxxl: var(--mate-desktop-sizing-xxxl);
  --mate-spacing-zero: var(--mate-desktop-spacing-zero);
  --mate-spacing-xxxs: var(--mate-desktop-spacing-xxxs);
  --mate-spacing-xxs: var(--mate-desktop-spacing-xxs);
  --mate-spacing-xs: var(--mate-desktop-spacing-xs);
  --mate-spacing-sm: var(--mate-desktop-spacing-sm);
  --mate-spacing-md: var(--mate-desktop-spacing-md);
  --mate-spacing-lg: var(--mate-desktop-spacing-lg);
  --mate-spacing-xl: var(--mate-desktop-spacing-xl);
  --mate-spacing-xxl: var(--mate-desktop-spacing-xxl);
  --mate-spacing-xxxl: var(--mate-desktop-spacing-xxxl);
  --mate-spacing-padding: var(--mate-desktop-spacing-padding);
  --mate-spacing-margin: var(--mate-desktop-spacing-margin);
  --mate-corner-radius-sm: var(--mate-desktop-corner-radius-sm);
  --mate-corner-radius-md: var(--mate-desktop-corner-radius-md);
  --mate-corner-radius-lg: var(--mate-desktop-corner-radius-lg);
  --mate-border-width-sm: var(--mate-desktop-border-width-sm);
  --mate-border-width-md: var(--mate-desktop-border-width-md);
  --mate-border-width-lg: var(--mate-desktop-border-width-lg);
  --mate-touch-target-touch-target-height: var(--mate-desktop-touch-target-touch-target-height);
  --mate-icon-sizing-sm: var(--mate-desktop-icon-sizing-sm);
  --mate-icon-sizing-sm-md: var(--mate-desktop-icon-sizing-sm-md);
  --mate-icon-sizing-md: var(--mate-desktop-icon-sizing-md);
  --mate-icon-sizing-lg: var(--mate-desktop-icon-sizing-lg);
  --mate-components-input-chips-height: var(--mate-desktop-components-input-chips-height);
  --mate-components-input-input-height: var(--mate-desktop-components-input-input-height);
  --mate-components-input-error-icon-container: var(--mate-desktop-components-input-error-icon-container);
  --mate-components-input-help-icon-container: var(--mate-desktop-components-input-help-icon-container);
  --mate-components-input-lookup-divider-height: var(--mate-desktop-components-input-lookup-divider-height);
  --mate-components-facets-info-icon-container-sm: var(--mate-desktop-components-facets-info-icon-container-sm);
  --mate-components-facets-info-icon-container-md: var(--mate-desktop-components-facets-info-icon-container-md);
  --mate-components-facets-info-icon-container-lg: var(--mate-desktop-components-facets-info-icon-container-lg);
  --mate-components-global-header-global-header-height: var(--mate-desktop-components-global-header-global-header-height);
  --mate-components-notification-bar-close-button-container: var(--mate-desktop-components-notification-bar-close-button-container);
  --mate-components-stepper-stepper-height: var(--mate-desktop-components-stepper-stepper-height);
  --mate-components-button-button-height: var(--mate-desktop-components-button-button-height);
  --mate-components-radio-button-small-circle: var(--mate-desktop-components-radio-button-small-circle);
  --mate-components-checkbox-checkbox-size: var(--mate-desktop-components-checkbox-checkbox-size);
}

[theme~="mobile"] {
  --mate-typography-heading-xs-font-family: var(--mate-mobile-typography-heading-xs-font-family);
  --mate-typography-heading-xs-font-size: var(--mate-mobile-typography-heading-xs-font-size);
  --mate-typography-heading-xs-line-height: var(--mate-mobile-typography-heading-xs-line-height);
  --mate-typography-heading-xs-font-weight: var(--mate-mobile-typography-heading-xs-font-weight);
  --mate-typography-heading-sm-font-family: var(--mate-mobile-typography-heading-sm-font-family);
  --mate-typography-heading-sm-font-size: var(--mate-mobile-typography-heading-sm-font-size);
  --mate-typography-heading-sm-line-height: var(--mate-mobile-typography-heading-sm-line-height);
  --mate-typography-heading-sm-font-weight: var(--mate-mobile-typography-heading-sm-font-weight);
  --mate-typography-heading-md-font-family: var(--mate-mobile-typography-heading-md-font-family);
  --mate-typography-heading-md-font-size: var(--mate-mobile-typography-heading-md-font-size);
  --mate-typography-heading-md-line-height: var(--mate-mobile-typography-heading-md-line-height);
  --mate-typography-heading-md-font-weight: var(--mate-mobile-typography-heading-md-font-weight);
  --mate-typography-heading-lg-font-family: var(--mate-mobile-typography-heading-lg-font-family);
  --mate-typography-heading-lg-font-size: var(--mate-mobile-typography-heading-lg-font-size);
  --mate-typography-heading-lg-line-height: var(--mate-mobile-typography-heading-lg-line-height);
  --mate-typography-heading-lg-font-weight: var(--mate-mobile-typography-heading-lg-font-weight);
  --mate-typography-heading-xl-font-family: var(--mate-mobile-typography-heading-xl-font-family);
  --mate-typography-heading-xl-font-size: var(--mate-mobile-typography-heading-xl-font-size);
  --mate-typography-heading-xl-line-height: var(--mate-mobile-typography-heading-xl-line-height);
  --mate-typography-heading-xl-font-weight: var(--mate-mobile-typography-heading-xl-font-weight);
  --mate-typography-heading-xxl-font-family: var(--mate-mobile-typography-heading-xxl-font-family);
  --mate-typography-heading-xxl-font-size: var(--mate-mobile-typography-heading-xxl-font-size);
  --mate-typography-heading-xxl-line-height: var(--mate-mobile-typography-heading-xxl-line-height);
  --mate-typography-heading-xxl-font-weight: var(--mate-mobile-typography-heading-xxl-font-weight);
  --mate-typography-body-xs-regular-font-family: var(--mate-mobile-typography-body-xs-regular-font-family);
  --mate-typography-body-xs-regular-font-size: var(--mate-mobile-typography-body-xs-regular-font-size);
  --mate-typography-body-xs-regular-line-height: var(--mate-mobile-typography-body-xs-regular-line-height);
  --mate-typography-body-xs-regular-font-weight: var(--mate-mobile-typography-body-xs-regular-font-weight);
  --mate-typography-body-xs-medium-font-family: var(--mate-mobile-typography-body-xs-medium-font-family);
  --mate-typography-body-xs-medium-font-size: var(--mate-mobile-typography-body-xs-medium-font-size);
  --mate-typography-body-xs-medium-line-height: var(--mate-mobile-typography-body-xs-medium-line-height);
  --mate-typography-body-xs-medium-font-weight: var(--mate-mobile-typography-body-xs-medium-font-weight);
  --mate-typography-body-xs-bold-font-family: var(--mate-mobile-typography-body-xs-bold-font-family);
  --mate-typography-body-xs-bold-font-size: var(--mate-mobile-typography-body-xs-bold-font-size);
  --mate-typography-body-xs-bold-line-height: var(--mate-mobile-typography-body-xs-bold-line-height);
  --mate-typography-body-xs-bold-font-weight: var(--mate-mobile-typography-body-xs-bold-font-weight);
  --mate-typography-body-sm-regular-font-family: var(--mate-mobile-typography-body-sm-regular-font-family);
  --mate-typography-body-sm-regular-font-size: var(--mate-mobile-typography-body-sm-regular-font-size);
  --mate-typography-body-sm-regular-line-height: var(--mate-mobile-typography-body-sm-regular-line-height);
  --mate-typography-body-sm-regular-font-weight: var(--mate-mobile-typography-body-sm-regular-font-weight);
  --mate-typography-body-sm-medium-font-family: var(--mate-mobile-typography-body-sm-medium-font-family);
  --mate-typography-body-sm-medium-font-size: var(--mate-mobile-typography-body-sm-medium-font-size);
  --mate-typography-body-sm-medium-line-height: var(--mate-mobile-typography-body-sm-medium-line-height);
  --mate-typography-body-sm-medium-font-weight: var(--mate-mobile-typography-body-sm-medium-font-weight);
  --mate-typography-body-sm-bold-font-family: var(--mate-mobile-typography-body-sm-bold-font-family);
  --mate-typography-body-sm-bold-font-size: var(--mate-mobile-typography-body-sm-bold-font-size);
  --mate-typography-body-sm-bold-line-height: var(--mate-mobile-typography-body-sm-bold-line-height);
  --mate-typography-body-sm-bold-font-weight: var(--mate-mobile-typography-body-sm-bold-font-weight);
  --mate-typography-body-md-regular-font-family: var(--mate-mobile-typography-body-md-regular-font-family);
  --mate-typography-body-md-regular-font-size: var(--mate-mobile-typography-body-md-regular-font-size);
  --mate-typography-body-md-regular-line-height: var(--mate-mobile-typography-body-md-regular-line-height);
  --mate-typography-body-md-regular-font-weight: var(--mate-mobile-typography-body-md-regular-font-weight);
  --mate-typography-body-md-medium-font-family: var(--mate-mobile-typography-body-md-medium-font-family);
  --mate-typography-body-md-medium-font-size: var(--mate-mobile-typography-body-md-medium-font-size);
  --mate-typography-body-md-medium-line-height: var(--mate-mobile-typography-body-md-medium-line-height);
  --mate-typography-body-md-medium-font-weight: var(--mate-mobile-typography-body-md-medium-font-weight);
  --mate-typography-body-md-bold-font-family: var(--mate-mobile-typography-body-md-bold-font-family);
  --mate-typography-body-md-bold-font-size: var(--mate-mobile-typography-body-md-bold-font-size);
  --mate-typography-body-md-bold-line-height: var(--mate-mobile-typography-body-md-bold-line-height);
  --mate-typography-body-md-bold-font-weight: var(--mate-mobile-typography-body-md-bold-font-weight);
  --mate-typography-body-lg-regular-font-family: var(--mate-mobile-typography-body-lg-regular-font-family);
  --mate-typography-body-lg-regular-font-size: var(--mate-mobile-typography-body-lg-regular-font-size);
  --mate-typography-body-lg-regular-line-height: var(--mate-mobile-typography-body-lg-regular-line-height);
  --mate-typography-body-lg-regular-font-weight: var(--mate-mobile-typography-body-lg-regular-font-weight);
  --mate-typography-body-lg-medium-font-family: var(--mate-mobile-typography-body-lg-medium-font-family);
  --mate-typography-body-lg-medium-font-size: var(--mate-mobile-typography-body-lg-medium-font-size);
  --mate-typography-body-lg-medium-line-height: var(--mate-mobile-typography-body-lg-medium-line-height);
  --mate-typography-body-lg-medium-font-weight: var(--mate-mobile-typography-body-lg-medium-font-weight);
  --mate-typography-body-lg-bold-font-family: var(--mate-mobile-typography-body-lg-bold-font-family);
  --mate-typography-body-lg-bold-font-size: var(--mate-mobile-typography-body-lg-bold-font-size);
  --mate-typography-body-lg-bold-line-height: var(--mate-mobile-typography-body-lg-bold-line-height);
  --mate-typography-body-lg-bold-font-weight: var(--mate-mobile-typography-body-lg-bold-font-weight);
  --mate-typography-label-xs-regular-font-family: var(--mate-mobile-typography-label-xs-regular-font-family);
  --mate-typography-label-xs-regular-font-size: var(--mate-mobile-typography-label-xs-regular-font-size);
  --mate-typography-label-xs-regular-line-height: var(--mate-mobile-typography-label-xs-regular-line-height);
  --mate-typography-label-xs-regular-font-weight: var(--mate-mobile-typography-label-xs-regular-font-weight);
  --mate-typography-label-xs-medium-font-family: var(--mate-mobile-typography-label-xs-medium-font-family);
  --mate-typography-label-xs-medium-font-size: var(--mate-mobile-typography-label-xs-medium-font-size);
  --mate-typography-label-xs-medium-line-height: var(--mate-mobile-typography-label-xs-medium-line-height);
  --mate-typography-label-xs-medium-font-weight: var(--mate-mobile-typography-label-xs-medium-font-weight);
  --mate-typography-label-xs-bold-font-family: var(--mate-mobile-typography-label-xs-bold-font-family);
  --mate-typography-label-xs-bold-font-size: var(--mate-mobile-typography-label-xs-bold-font-size);
  --mate-typography-label-xs-bold-line-height: var(--mate-mobile-typography-label-xs-bold-line-height);
  --mate-typography-label-xs-bold-font-weight: var(--mate-mobile-typography-label-xs-bold-font-weight);
  --mate-typography-label-sm-regular-font-family: var(--mate-mobile-typography-label-sm-regular-font-family);
  --mate-typography-label-sm-regular-font-size: var(--mate-mobile-typography-label-sm-regular-font-size);
  --mate-typography-label-sm-regular-line-height: var(--mate-mobile-typography-label-sm-regular-line-height);
  --mate-typography-label-sm-regular-font-weight: var(--mate-mobile-typography-label-sm-regular-font-weight);
  --mate-typography-label-sm-medium-font-family: var(--mate-mobile-typography-label-sm-medium-font-family);
  --mate-typography-label-sm-medium-font-size: var(--mate-mobile-typography-label-sm-medium-font-size);
  --mate-typography-label-sm-medium-line-height: var(--mate-mobile-typography-label-sm-medium-line-height);
  --mate-typography-label-sm-medium-font-weight: var(--mate-mobile-typography-label-sm-medium-font-weight);
  --mate-typography-label-sm-bold-font-family: var(--mate-mobile-typography-label-sm-bold-font-family);
  --mate-typography-label-sm-bold-font-size: var(--mate-mobile-typography-label-sm-bold-font-size);
  --mate-typography-label-sm-bold-line-height: var(--mate-mobile-typography-label-sm-bold-line-height);
  --mate-typography-label-sm-bold-font-weight: var(--mate-mobile-typography-label-sm-bold-font-weight);
  --mate-typography-label-md-regular-font-family: var(--mate-mobile-typography-label-md-regular-font-family);
  --mate-typography-label-md-regular-font-size: var(--mate-mobile-typography-label-md-regular-font-size);
  --mate-typography-label-md-regular-line-height: var(--mate-mobile-typography-label-md-regular-line-height);
  --mate-typography-label-md-regular-font-weight: var(--mate-mobile-typography-label-md-regular-font-weight);
  --mate-typography-label-md-medium-font-family: var(--mate-mobile-typography-label-md-medium-font-family);
  --mate-typography-label-md-medium-font-size: var(--mate-mobile-typography-label-md-medium-font-size);
  --mate-typography-label-md-medium-line-height: var(--mate-mobile-typography-label-md-medium-line-height);
  --mate-typography-label-md-medium-font-weight: var(--mate-mobile-typography-label-md-medium-font-weight);
  --mate-typography-label-md-bold-font-family: var(--mate-mobile-typography-label-md-bold-font-family);
  --mate-typography-label-md-bold-font-size: var(--mate-mobile-typography-label-md-bold-font-size);
  --mate-typography-label-md-bold-line-height: var(--mate-mobile-typography-label-md-bold-line-height);
  --mate-typography-label-md-bold-font-weight: var(--mate-mobile-typography-label-md-bold-font-weight);
  --mate-typography-label-lg-regular-font-family: var(--mate-mobile-typography-label-lg-regular-font-family);
  --mate-typography-label-lg-regular-font-size: var(--mate-mobile-typography-label-lg-regular-font-size);
  --mate-typography-label-lg-regular-line-height: var(--mate-mobile-typography-label-lg-regular-line-height);
  --mate-typography-label-lg-regular-font-weight: var(--mate-mobile-typography-label-lg-regular-font-weight);
  --mate-typography-label-lg-medium-font-family: var(--mate-mobile-typography-label-lg-medium-font-family);
  --mate-typography-label-lg-medium-font-size: var(--mate-mobile-typography-label-lg-medium-font-size);
  --mate-typography-label-lg-medium-line-height: var(--mate-mobile-typography-label-lg-medium-line-height);
  --mate-typography-label-lg-medium-font-weight: var(--mate-mobile-typography-label-lg-medium-font-weight);
  --mate-typography-label-lg-bold-font-family: var(--mate-mobile-typography-label-lg-bold-font-family);
  --mate-typography-label-lg-bold-font-size: var(--mate-mobile-typography-label-lg-bold-font-size);
  --mate-typography-label-lg-bold-line-height: var(--mate-mobile-typography-label-lg-bold-line-height);
  --mate-typography-label-lg-bold-font-weight: var(--mate-mobile-typography-label-lg-bold-font-weight);
  --mate-sizing-xxxxs: var(--mate-mobile-sizing-xxxxs);
  --mate-sizing-xxxs: var(--mate-mobile-sizing-xxxs);
  --mate-sizing-xxs: var(--mate-mobile-sizing-xxs);
  --mate-sizing-xs: var(--mate-mobile-sizing-xs);
  --mate-sizing-sm: var(--mate-mobile-sizing-sm);
  --mate-sizing-md: var(--mate-mobile-sizing-md);
  --mate-sizing-md-lg: var(--mate-mobile-sizing-md-lg);
  --mate-sizing-lg: var(--mate-mobile-sizing-lg);
  --mate-sizing-xl: var(--mate-mobile-sizing-xl);
  --mate-sizing-xxl: var(--mate-mobile-sizing-xxl);
  --mate-sizing-xxxl: var(--mate-mobile-sizing-xxxl);
  --mate-spacing-zero: var(--mate-mobile-spacing-zero);
  --mate-spacing-xxxs: var(--mate-mobile-spacing-xxxs);
  --mate-spacing-xxs: var(--mate-mobile-spacing-xxs);
  --mate-spacing-xs: var(--mate-mobile-spacing-xs);
  --mate-spacing-sm: var(--mate-mobile-spacing-sm);
  --mate-spacing-md: var(--mate-mobile-spacing-md);
  --mate-spacing-lg: var(--mate-mobile-spacing-lg);
  --mate-spacing-xl: var(--mate-mobile-spacing-xl);
  --mate-spacing-xxl: var(--mate-mobile-spacing-xxl);
  --mate-spacing-xxxl: var(--mate-mobile-spacing-xxxl);
  --mate-spacing-padding: var(--mate-mobile-spacing-padding);
  --mate-spacing-margin: var(--mate-mobile-spacing-margin);
  --mate-corner-radius-sm: var(--mate-mobile-corner-radius-sm);
  --mate-corner-radius-md: var(--mate-mobile-corner-radius-md);
  --mate-corner-radius-lg: var(--mate-mobile-corner-radius-lg);
  --mate-border-width-sm: var(--mate-mobile-border-width-sm);
  --mate-border-width-md: var(--mate-mobile-border-width-md);
  --mate-border-width-lg: var(--mate-mobile-border-width-lg);
  --mate-touch-target-touch-target-height: var(--mate-mobile-touch-target-touch-target-height);
  --mate-icon-sizing-sm: var(--mate-mobile-icon-sizing-sm);
  --mate-icon-sizing-sm-md: var(--mate-mobile-icon-sizing-sm-md);
  --mate-icon-sizing-md: var(--mate-mobile-icon-sizing-md);
  --mate-icon-sizing-lg: var(--mate-mobile-icon-sizing-lg);
  --mate-components-input-chips-height: var(--mate-mobile-components-input-chips-height);
  --mate-components-input-input-height: var(--mate-mobile-components-input-input-height);
  --mate-components-input-error-icon-container: var(--mate-mobile-components-input-error-icon-container);
  --mate-components-input-help-icon-container: var(--mate-mobile-components-input-help-icon-container);
  --mate-components-input-lookup-divider-height: var(--mate-mobile-components-input-lookup-divider-height);
  --mate-components-facets-info-icon-container-sm: var(--mate-mobile-components-facets-info-icon-container-sm);
  --mate-components-facets-info-icon-container-md: var(--mate-mobile-components-facets-info-icon-container-md);
  --mate-components-facets-info-icon-container-lg: var(--mate-mobile-components-facets-info-icon-container-lg);
  --mate-components-global-header-global-header-height: var(--mate-mobile-components-global-header-global-header-height);
  --mate-components-notification-bar-close-button-container: var(--mate-mobile-components-notification-bar-close-button-container);
  --mate-components-stepper-stepper-height: var(--mate-mobile-components-stepper-stepper-height);
  --mate-components-button-button-height: var(--mate-mobile-components-button-button-height);
  --mate-components-radio-button-small-circle: var(--mate-mobile-components-radio-button-small-circle);
  --mate-components-checkbox-checkbox-size: var(--mate-mobile-components-checkbox-checkbox-size);
}

@media (pointer: coarse) and (hover: none) {
  :root {
    --mate-typography-heading-xs-font-family: var(--mate-mobile-typography-heading-xs-font-family);
    --mate-typography-heading-xs-font-size: var(--mate-mobile-typography-heading-xs-font-size);
    --mate-typography-heading-xs-line-height: var(--mate-mobile-typography-heading-xs-line-height);
    --mate-typography-heading-xs-font-weight: var(--mate-mobile-typography-heading-xs-font-weight);
    --mate-typography-heading-sm-font-family: var(--mate-mobile-typography-heading-sm-font-family);
    --mate-typography-heading-sm-font-size: var(--mate-mobile-typography-heading-sm-font-size);
    --mate-typography-heading-sm-line-height: var(--mate-mobile-typography-heading-sm-line-height);
    --mate-typography-heading-sm-font-weight: var(--mate-mobile-typography-heading-sm-font-weight);
    --mate-typography-heading-md-font-family: var(--mate-mobile-typography-heading-md-font-family);
    --mate-typography-heading-md-font-size: var(--mate-mobile-typography-heading-md-font-size);
    --mate-typography-heading-md-line-height: var(--mate-mobile-typography-heading-md-line-height);
    --mate-typography-heading-md-font-weight: var(--mate-mobile-typography-heading-md-font-weight);
    --mate-typography-heading-lg-font-family: var(--mate-mobile-typography-heading-lg-font-family);
    --mate-typography-heading-lg-font-size: var(--mate-mobile-typography-heading-lg-font-size);
    --mate-typography-heading-lg-line-height: var(--mate-mobile-typography-heading-lg-line-height);
    --mate-typography-heading-lg-font-weight: var(--mate-mobile-typography-heading-lg-font-weight);
    --mate-typography-heading-xl-font-family: var(--mate-mobile-typography-heading-xl-font-family);
    --mate-typography-heading-xl-font-size: var(--mate-mobile-typography-heading-xl-font-size);
    --mate-typography-heading-xl-line-height: var(--mate-mobile-typography-heading-xl-line-height);
    --mate-typography-heading-xl-font-weight: var(--mate-mobile-typography-heading-xl-font-weight);
    --mate-typography-heading-xxl-font-family: var(--mate-mobile-typography-heading-xxl-font-family);
    --mate-typography-heading-xxl-font-size: var(--mate-mobile-typography-heading-xxl-font-size);
    --mate-typography-heading-xxl-line-height: var(--mate-mobile-typography-heading-xxl-line-height);
    --mate-typography-heading-xxl-font-weight: var(--mate-mobile-typography-heading-xxl-font-weight);
    --mate-typography-body-xs-regular-font-family: var(--mate-mobile-typography-body-xs-regular-font-family);
    --mate-typography-body-xs-regular-font-size: var(--mate-mobile-typography-body-xs-regular-font-size);
    --mate-typography-body-xs-regular-line-height: var(--mate-mobile-typography-body-xs-regular-line-height);
    --mate-typography-body-xs-regular-font-weight: var(--mate-mobile-typography-body-xs-regular-font-weight);
    --mate-typography-body-xs-medium-font-family: var(--mate-mobile-typography-body-xs-medium-font-family);
    --mate-typography-body-xs-medium-font-size: var(--mate-mobile-typography-body-xs-medium-font-size);
    --mate-typography-body-xs-medium-line-height: var(--mate-mobile-typography-body-xs-medium-line-height);
    --mate-typography-body-xs-medium-font-weight: var(--mate-mobile-typography-body-xs-medium-font-weight);
    --mate-typography-body-xs-bold-font-family: var(--mate-mobile-typography-body-xs-bold-font-family);
    --mate-typography-body-xs-bold-font-size: var(--mate-mobile-typography-body-xs-bold-font-size);
    --mate-typography-body-xs-bold-line-height: var(--mate-mobile-typography-body-xs-bold-line-height);
    --mate-typography-body-xs-bold-font-weight: var(--mate-mobile-typography-body-xs-bold-font-weight);
    --mate-typography-body-sm-regular-font-family: var(--mate-mobile-typography-body-sm-regular-font-family);
    --mate-typography-body-sm-regular-font-size: var(--mate-mobile-typography-body-sm-regular-font-size);
    --mate-typography-body-sm-regular-line-height: var(--mate-mobile-typography-body-sm-regular-line-height);
    --mate-typography-body-sm-regular-font-weight: var(--mate-mobile-typography-body-sm-regular-font-weight);
    --mate-typography-body-sm-medium-font-family: var(--mate-mobile-typography-body-sm-medium-font-family);
    --mate-typography-body-sm-medium-font-size: var(--mate-mobile-typography-body-sm-medium-font-size);
    --mate-typography-body-sm-medium-line-height: var(--mate-mobile-typography-body-sm-medium-line-height);
    --mate-typography-body-sm-medium-font-weight: var(--mate-mobile-typography-body-sm-medium-font-weight);
    --mate-typography-body-sm-bold-font-family: var(--mate-mobile-typography-body-sm-bold-font-family);
    --mate-typography-body-sm-bold-font-size: var(--mate-mobile-typography-body-sm-bold-font-size);
    --mate-typography-body-sm-bold-line-height: var(--mate-mobile-typography-body-sm-bold-line-height);
    --mate-typography-body-sm-bold-font-weight: var(--mate-mobile-typography-body-sm-bold-font-weight);
    --mate-typography-body-md-regular-font-family: var(--mate-mobile-typography-body-md-regular-font-family);
    --mate-typography-body-md-regular-font-size: var(--mate-mobile-typography-body-md-regular-font-size);
    --mate-typography-body-md-regular-line-height: var(--mate-mobile-typography-body-md-regular-line-height);
    --mate-typography-body-md-regular-font-weight: var(--mate-mobile-typography-body-md-regular-font-weight);
    --mate-typography-body-md-medium-font-family: var(--mate-mobile-typography-body-md-medium-font-family);
    --mate-typography-body-md-medium-font-size: var(--mate-mobile-typography-body-md-medium-font-size);
    --mate-typography-body-md-medium-line-height: var(--mate-mobile-typography-body-md-medium-line-height);
    --mate-typography-body-md-medium-font-weight: var(--mate-mobile-typography-body-md-medium-font-weight);
    --mate-typography-body-md-bold-font-family: var(--mate-mobile-typography-body-md-bold-font-family);
    --mate-typography-body-md-bold-font-size: var(--mate-mobile-typography-body-md-bold-font-size);
    --mate-typography-body-md-bold-line-height: var(--mate-mobile-typography-body-md-bold-line-height);
    --mate-typography-body-md-bold-font-weight: var(--mate-mobile-typography-body-md-bold-font-weight);
    --mate-typography-body-lg-regular-font-family: var(--mate-mobile-typography-body-lg-regular-font-family);
    --mate-typography-body-lg-regular-font-size: var(--mate-mobile-typography-body-lg-regular-font-size);
    --mate-typography-body-lg-regular-line-height: var(--mate-mobile-typography-body-lg-regular-line-height);
    --mate-typography-body-lg-regular-font-weight: var(--mate-mobile-typography-body-lg-regular-font-weight);
    --mate-typography-body-lg-medium-font-family: var(--mate-mobile-typography-body-lg-medium-font-family);
    --mate-typography-body-lg-medium-font-size: var(--mate-mobile-typography-body-lg-medium-font-size);
    --mate-typography-body-lg-medium-line-height: var(--mate-mobile-typography-body-lg-medium-line-height);
    --mate-typography-body-lg-medium-font-weight: var(--mate-mobile-typography-body-lg-medium-font-weight);
    --mate-typography-body-lg-bold-font-family: var(--mate-mobile-typography-body-lg-bold-font-family);
    --mate-typography-body-lg-bold-font-size: var(--mate-mobile-typography-body-lg-bold-font-size);
    --mate-typography-body-lg-bold-line-height: var(--mate-mobile-typography-body-lg-bold-line-height);
    --mate-typography-body-lg-bold-font-weight: var(--mate-mobile-typography-body-lg-bold-font-weight);
    --mate-typography-label-xs-regular-font-family: var(--mate-mobile-typography-label-xs-regular-font-family);
    --mate-typography-label-xs-regular-font-size: var(--mate-mobile-typography-label-xs-regular-font-size);
    --mate-typography-label-xs-regular-line-height: var(--mate-mobile-typography-label-xs-regular-line-height);
    --mate-typography-label-xs-regular-font-weight: var(--mate-mobile-typography-label-xs-regular-font-weight);
    --mate-typography-label-xs-medium-font-family: var(--mate-mobile-typography-label-xs-medium-font-family);
    --mate-typography-label-xs-medium-font-size: var(--mate-mobile-typography-label-xs-medium-font-size);
    --mate-typography-label-xs-medium-line-height: var(--mate-mobile-typography-label-xs-medium-line-height);
    --mate-typography-label-xs-medium-font-weight: var(--mate-mobile-typography-label-xs-medium-font-weight);
    --mate-typography-label-xs-bold-font-family: var(--mate-mobile-typography-label-xs-bold-font-family);
    --mate-typography-label-xs-bold-font-size: var(--mate-mobile-typography-label-xs-bold-font-size);
    --mate-typography-label-xs-bold-line-height: var(--mate-mobile-typography-label-xs-bold-line-height);
    --mate-typography-label-xs-bold-font-weight: var(--mate-mobile-typography-label-xs-bold-font-weight);
    --mate-typography-label-sm-regular-font-family: var(--mate-mobile-typography-label-sm-regular-font-family);
    --mate-typography-label-sm-regular-font-size: var(--mate-mobile-typography-label-sm-regular-font-size);
    --mate-typography-label-sm-regular-line-height: var(--mate-mobile-typography-label-sm-regular-line-height);
    --mate-typography-label-sm-regular-font-weight: var(--mate-mobile-typography-label-sm-regular-font-weight);
    --mate-typography-label-sm-medium-font-family: var(--mate-mobile-typography-label-sm-medium-font-family);
    --mate-typography-label-sm-medium-font-size: var(--mate-mobile-typography-label-sm-medium-font-size);
    --mate-typography-label-sm-medium-line-height: var(--mate-mobile-typography-label-sm-medium-line-height);
    --mate-typography-label-sm-medium-font-weight: var(--mate-mobile-typography-label-sm-medium-font-weight);
    --mate-typography-label-sm-bold-font-family: var(--mate-mobile-typography-label-sm-bold-font-family);
    --mate-typography-label-sm-bold-font-size: var(--mate-mobile-typography-label-sm-bold-font-size);
    --mate-typography-label-sm-bold-line-height: var(--mate-mobile-typography-label-sm-bold-line-height);
    --mate-typography-label-sm-bold-font-weight: var(--mate-mobile-typography-label-sm-bold-font-weight);
    --mate-typography-label-md-regular-font-family: var(--mate-mobile-typography-label-md-regular-font-family);
    --mate-typography-label-md-regular-font-size: var(--mate-mobile-typography-label-md-regular-font-size);
    --mate-typography-label-md-regular-line-height: var(--mate-mobile-typography-label-md-regular-line-height);
    --mate-typography-label-md-regular-font-weight: var(--mate-mobile-typography-label-md-regular-font-weight);
    --mate-typography-label-md-medium-font-family: var(--mate-mobile-typography-label-md-medium-font-family);
    --mate-typography-label-md-medium-font-size: var(--mate-mobile-typography-label-md-medium-font-size);
    --mate-typography-label-md-medium-line-height: var(--mate-mobile-typography-label-md-medium-line-height);
    --mate-typography-label-md-medium-font-weight: var(--mate-mobile-typography-label-md-medium-font-weight);
    --mate-typography-label-md-bold-font-family: var(--mate-mobile-typography-label-md-bold-font-family);
    --mate-typography-label-md-bold-font-size: var(--mate-mobile-typography-label-md-bold-font-size);
    --mate-typography-label-md-bold-line-height: var(--mate-mobile-typography-label-md-bold-line-height);
    --mate-typography-label-md-bold-font-weight: var(--mate-mobile-typography-label-md-bold-font-weight);
    --mate-typography-label-lg-regular-font-family: var(--mate-mobile-typography-label-lg-regular-font-family);
    --mate-typography-label-lg-regular-font-size: var(--mate-mobile-typography-label-lg-regular-font-size);
    --mate-typography-label-lg-regular-line-height: var(--mate-mobile-typography-label-lg-regular-line-height);
    --mate-typography-label-lg-regular-font-weight: var(--mate-mobile-typography-label-lg-regular-font-weight);
    --mate-typography-label-lg-medium-font-family: var(--mate-mobile-typography-label-lg-medium-font-family);
    --mate-typography-label-lg-medium-font-size: var(--mate-mobile-typography-label-lg-medium-font-size);
    --mate-typography-label-lg-medium-line-height: var(--mate-mobile-typography-label-lg-medium-line-height);
    --mate-typography-label-lg-medium-font-weight: var(--mate-mobile-typography-label-lg-medium-font-weight);
    --mate-typography-label-lg-bold-font-family: var(--mate-mobile-typography-label-lg-bold-font-family);
    --mate-typography-label-lg-bold-font-size: var(--mate-mobile-typography-label-lg-bold-font-size);
    --mate-typography-label-lg-bold-line-height: var(--mate-mobile-typography-label-lg-bold-line-height);
    --mate-typography-label-lg-bold-font-weight: var(--mate-mobile-typography-label-lg-bold-font-weight);
    --mate-sizing-xxxxs: var(--mate-mobile-sizing-xxxxs);
    --mate-sizing-xxxs: var(--mate-mobile-sizing-xxxs);
    --mate-sizing-xxs: var(--mate-mobile-sizing-xxs);
    --mate-sizing-xs: var(--mate-mobile-sizing-xs);
    --mate-sizing-sm: var(--mate-mobile-sizing-sm);
    --mate-sizing-md: var(--mate-mobile-sizing-md);
    --mate-sizing-md-lg: var(--mate-mobile-sizing-md-lg);
    --mate-sizing-lg: var(--mate-mobile-sizing-lg);
    --mate-sizing-xl: var(--mate-mobile-sizing-xl);
    --mate-sizing-xxl: var(--mate-mobile-sizing-xxl);
    --mate-sizing-xxxl: var(--mate-mobile-sizing-xxxl);
    --mate-spacing-zero: var(--mate-mobile-spacing-zero);
    --mate-spacing-xxxs: var(--mate-mobile-spacing-xxxs);
    --mate-spacing-xxs: var(--mate-mobile-spacing-xxs);
    --mate-spacing-xs: var(--mate-mobile-spacing-xs);
    --mate-spacing-sm: var(--mate-mobile-spacing-sm);
    --mate-spacing-md: var(--mate-mobile-spacing-md);
    --mate-spacing-lg: var(--mate-mobile-spacing-lg);
    --mate-spacing-xl: var(--mate-mobile-spacing-xl);
    --mate-spacing-xxl: var(--mate-mobile-spacing-xxl);
    --mate-spacing-xxxl: var(--mate-mobile-spacing-xxxl);
    --mate-spacing-padding: var(--mate-mobile-spacing-padding);
    --mate-spacing-margin: var(--mate-mobile-spacing-margin);
    --mate-corner-radius-sm: var(--mate-mobile-corner-radius-sm);
    --mate-corner-radius-md: var(--mate-mobile-corner-radius-md);
    --mate-corner-radius-lg: var(--mate-mobile-corner-radius-lg);
    --mate-border-width-sm: var(--mate-mobile-border-width-sm);
    --mate-border-width-md: var(--mate-mobile-border-width-md);
    --mate-border-width-lg: var(--mate-mobile-border-width-lg);
    --mate-touch-target-touch-target-height: var(--mate-mobile-touch-target-touch-target-height);
    --mate-icon-sizing-sm: var(--mate-mobile-icon-sizing-sm);
    --mate-icon-sizing-sm-md: var(--mate-mobile-icon-sizing-sm-md);
    --mate-icon-sizing-md: var(--mate-mobile-icon-sizing-md);
    --mate-icon-sizing-lg: var(--mate-mobile-icon-sizing-lg);
    --mate-components-input-chips-height: var(--mate-mobile-components-input-chips-height);
    --mate-components-input-input-height: var(--mate-mobile-components-input-input-height);
    --mate-components-input-error-icon-container: var(--mate-mobile-components-input-error-icon-container);
    --mate-components-input-help-icon-container: var(--mate-mobile-components-input-help-icon-container);
    --mate-components-input-lookup-divider-height: var(--mate-mobile-components-input-lookup-divider-height);
    --mate-components-facets-info-icon-container-sm: var(--mate-mobile-components-facets-info-icon-container-sm);
    --mate-components-facets-info-icon-container-md: var(--mate-mobile-components-facets-info-icon-container-md);
    --mate-components-facets-info-icon-container-lg: var(--mate-mobile-components-facets-info-icon-container-lg);
    --mate-components-global-header-global-header-height: var(--mate-mobile-components-global-header-global-header-height);
    --mate-components-notification-bar-close-button-container: var(--mate-mobile-components-notification-bar-close-button-container);
    --mate-components-stepper-stepper-height: var(--mate-mobile-components-stepper-stepper-height);
    --mate-components-button-button-height: var(--mate-mobile-components-button-button-height);
    --mate-components-radio-button-small-circle: var(--mate-mobile-components-radio-button-small-circle);
    --mate-components-checkbox-checkbox-size: var(--mate-mobile-components-checkbox-checkbox-size);
  }
}/**
 * MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
 */

:root {
  --mate-style-shadow-xs: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
  --mate-style-shadow-s: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
  --mate-style-shadow-m: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20);
  --mate-style-shadow-l: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
  --mate-style-shadow-xl: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-anchor-nav > vaadin-tabs:not([theme*="stepper"]):not([theme*="bottom"]) {
	&::after {
		box-shadow: unset;
	}
}

vaadin-tabs[slot="tabs"] {
    background: var(--mate-background-base);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-app-layout {

	&::part(navbar) {
		z-index: 2;
	}

	&::part(application-bar) {
		position: fixed;
		z-index: 1;
		border-inline-end-style: solid;

		display: flex;
		flex-direction: column;
	}

	&::part(drawer) {
		border-inline-end: none;
		overflow: hidden;
	}

	&[overlay]::part(drawer) {
		box-shadow: var(--mate-style-shadow-s);
	}

	&[drawer-opened]::part(open-drawer),
	&:not([has-drawer])::part(-toggle-drawer),
	&[has-application-bar]::part(toggle-drawer),
	&[has-navbar]:not([has-application-bar])::part(drawer-bottom),
	&[has-navbar]:not([has-application-bar])::part(open-drawer),
	&:not([has-application-bar])::part(application-bar),
	&:not([drawer-opened])::part(splitter) {
		display: none;
	}

	&::part(splitter) {
		position: fixed;
		cursor: ew-resize;
		z-index: 1;
	}

	&[overlay]::part(splitter) {
		z-index: 2;
	}

	&::part(handle) {
		position: absolute;
	}

	&[dragging]::part(handle),
	&[dragging] > * {
		pointer-events: none;
	}

	&::part(close-drawer),
	&::part(open-drawer),
	&::part(toggle-drawer) {
		box-sizing: unset;
		background: unset;
		padding: unset;
		cursor: pointer;
		border-style: solid;
	}


	&::part(close-drawer)::after,
	&::part(open-drawer)::after,
	&::part(toggle-drawer)::after {
		display: flex;
		align-items: center;
	}

	&::part(open-drawer) {
		border-left: unset;
	}

	&::part(close-drawer),
	&::part(toggle-drawer) {
		border: unset;
	}

	&::part(open-drawer) {
		position: absolute;
	}

	&::part(toggle-drawer)::after {
		content: "menu" / "";
	}

	&[drawer-opened]::part(toggle-drawer)::after {
		content: "close" / "";
	}

	&::part(open-drawer)::after {
		content: "chevron_right" / "";
	}

	&::part(close-drawer)::after {
		content: "chevron_left" / "";
	}

	&::part(application-bar-separator),
	&::part(drawer-bottom) {
		flex-grow: 1;
	}

	&::part(drawer-bottom) {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
	}

	&::part(drawer-rule) {
		margin: unset;
		border: unset;
		border-top-style: solid;
	}

	> [slot="application-bar"] {
		height: 100%;
	}

	&::part(logo) {
		flex-shrink: 0;
	}

	&:dir(rtl) {
		&::part(open-drawer)::after  {
			content: "keyboard_double_arrow_left" / "";
		}

		&::part(close-drawer)::after {
			content: "keyboard_double_arrow_right" / "";
		}
	}

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

span[theme~="badge"] {
	display: inline-flex;
	align-items: center;
	height: fit-content;
	max-width: fit-content;
    text-overflow: ellipsis;
    overflow: hidden;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

div[theme~="block-layout"] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	> :nth-child(-n+3) {
		grid-column: span 4;
	}
}

.block-container {
	container: block / inline-size;
}

div[theme~="block-layout"][theme~="layout-6-6"] > :nth-child(3),
div[theme~="block-layout"][theme~="layout-8-4"] > :nth-child(3),
div[theme~="block-layout"][theme~="layout-4-8"] > :nth-child(3),
div[theme~="block-layout"][theme~="layout-12"] > :nth-child(n+2),
div[theme~="block-layout"] > :nth-child(n+4) {
	display: none;
}

/* medium */
@container block (768px < width <= 1120px) {
	div[theme~="block-layout"] {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
	
	div[theme~="block-layout"] > :nth-child(3),
	div[theme~="block-layout"][theme~="layout-8-4"] > :nth-child(-n+3),
	div[theme~="block-layout"][theme~="layout-4-8"] > :nth-child(-n+3) {
		grid-column: span 8;
	}
	
	div[theme~="block-layout"][theme~="layout-12"] > :nth-child(-n+3) {
		grid-column: span 8;
	}
}

/* large */
@container block (width > 1120px) {	
	div[theme~="block-layout"] {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	
	div[theme~="block-layout"][theme~="layout-6-6"] > :nth-child(-n+3) {
		grid-column: span 6;
	}
	
	div[theme~="block-layout"][theme~="layout-8-4"] > :nth-child(1),
	div[theme~="block-layout"][theme~="layout-4-8"] > :nth-child(2) {
		grid-column: span 8;
	}
	
	div[theme~="block-layout"][theme~="layout-12"] > :nth-child(-n+3) {
		grid-column: span 12;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-breadcrumb {
    --vcf-breadcrumb-separator-symbol: "/";
    --vcf-breadcrumb-separator-font-family: inherit;


    &:focus-within::part(link) {
        outline-style: solid;
    }

    > a {
        text-decoration: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: var(--mate-typography-body-md-regular-font-family);
        font-size: var(--mate-typography-body-md-regular-font-size);
        font-style: normal;
        font-weight: 400;
        line-height: var(--mate-typography-body-md-regular-line-height);
    }

    a.breadcrumb-anchor.add-mobile-back-icon::before {
        vertical-align: text-top;
        content: "chevron_left" / "";
        font-family: var(--mate-typography-font-family-icon);
    }
}

vaadin-popover[theme~="hidden-breadcrumbs"] {

    &::part(overlay) {
        border-style: solid;
    }

    a {
        text-decoration: none !important;
        align-self: stretch;

        &:focus {
            outline-style: solid;
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-button,
vaadin-menu-bar-button {
    background-color: unset;
    margin: 0;
    min-width: unset;
    height: unset;
    border-radius: unset;
    border-style: unset;
    padding: unset;
    white-space: nowrap;
    gap: 0;

    display: inline-flex;

    &[focused] {
        outline-style: solid;
    }

    /* baseline fix when having only icons */
    &::before {
        content: "\2003" / "";
        width: 0;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-form::part(default-error),
mate-callout {
	box-sizing: border-box;
	grid-template-columns: 1fr;
	display: grid;
	align-items: baseline;
}

mate-form,
mate-callout {

	&::part(title),
	&::part(text) {
		grid-column: 1;
	}

	&[has-title] {
		&::part(title) {
			grid-row: 1;
		}

		&::part(text) {
			grid-column: 1 / span 2;
		}
	}

	&::part(title) {
		min-width: 0;
	}
}

mate-form:not([has-error-title]),
mate-callout:not([has-title]) {
	&::part(text) {
		grid-row: 1;
	}
}

mate-form::part(default-error),
mate-callout[theme~="info"],
mate-callout[theme~="warning"],
mate-callout[theme~="danger"],
mate-callout[theme~="error"],
mate-callout[theme~="success"] {
	grid-template-columns: auto 1fr;
}

mate-form,
mate-callout[theme~="info"],
mate-callout[theme~="warning"],
mate-callout[theme~="danger"],
mate-callout[theme~="error"],
mate-callout[theme~="success"] {
	&::part(state) {
		grid-column: 1;
	}

	&::part(title),
	&:not([has-title])::part(text) {
		grid-column: 2;
	}
}

mate-callout {
	&[theme~="info"]::part(state)::after {
		content: "info" / "";
	}

	&[theme~="success"]::part(state)::after {
		content: "check_circle" / "";
	}

	&[theme~="warning"]::part(state)::after {
		content: "warning" / "";
	}
}

mate-form::part(state)::after,
mate-callout[theme~="danger"]::part(state)::after,
mate-callout[theme~="error"]::part(state)::after {
	content: "error" / "";
}

mate-callout:not([theme*="info"]):not([theme*="warning"]):not([theme*="danger"]):not([theme*="error"]):not([theme*="success"]) {
	&:not([theme*="secondary"]) {
		border-style: solid;
	}

	&::part(state) {
		display: none;
	}
}/*
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-card {
    border-style: solid;

    /* missing in vaadin and should be removed asap */
    &[theme~="cover-media"] {
        > [slot="media"] {
            border-radius: inherit;
            border-end-end-radius: 0;
            border-end-start-radius: 0;
            margin-inline: calc(var(--_padding) * -1);
            margin-top: calc(var(--_padding) * -1);
            max-width: none;
            width: calc(100% + var(--_padding) * 2);
        }

        &[theme~="horizontal"] > [slot="media"] {
            border-radius: inherit;
            border-end-end-radius: 0;
            border-start-end-radius: 0;
            height: calc(100% + var(--_padding) * 2);
            margin-inline-end: 0;
            width: calc(100% + var(--_padding));
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-chart, vaadin-chart-series {
    font-family: var(--mate-typography-font-family);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-dashboard-widget {

    &[editable] {
        --vaadin-dashboard-widget-shadow: var(--mate-style-shadow-xs);
    }

    &::part(header) {
        display: flex;
        align-items: baseline;
        border-bottom-style: solid;
    }

    &::part(remove-button) {
        cursor: pointer;
    }

    &::part(move-button) {
        cursor: move;
    }

    &::part(resize-button) {
        cursor: nw-resize;
    }

    &:not([editable]) {
        &::part(move-button),
        &::part(resize-button),
        &::part(remove-button) {
            display: none;
        }
    }

    &::part(move-button)::before {
        content: "drag_indicator";
    }

    &::part(resize-apply-button)::before,
    &::part(move-apply-button)::before {
        content: "check";
    }

    &::part(move-forward-button)::before {
        content: "chevron_right";
    }

    &::part(move-backward-button)::before {
        content: "chevron_left";
    }

    &::part(remove-button)::before {
        content: "close";
    }

    &::part(resize-button) {
        transform: rotate(90deg);
    }

    &::part(resize-button)::before {
        content: "pan_zoom";
    }

    &::part(resize-shrink-width-button)::before,
    &::part(resize-shrink-height-button)::before {
        content: "remove";
    }

    &::part(resize-grow-width-button)::before,
    &::part(resize-grow-height-button)::before {
        content: "add";
    }

    &::part(content) {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
    }

    > * {
        flex-grow: 1;
    }
    /*fix*/
    &::before {
        z-index: 1;
    }

    &::part(content) {
        transition: 200ms;
        transition-property: filter, opacity;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
    }

    &[resize-mode]::part(content),
    &[move-mode]::part(content) {
        opacity: 0.75;
        filter: blur(10px);
        clip-path: inset(0);
        transition-duration: 50ms;
    }
}

vaadin-dashboard-section {
    &::part(title) {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-date-picker::part(toggle-button) {
	display: flex;
}

vaadin-date-picker::part(toggle-button):before {
	cursor: pointer;
	content: "calendar_today" / "";
}

vaadin-date-picker-overlay::part(overlay) {
    overflow: hidden;
	flex-direction: column;
    box-shadow: var(--mate-style-shadow-m);
    border-style: solid;
}

vaadin-date-picker-overlay-content {
    position: relative;
    cursor: default;
    flex-direction: column;
    outline: none;
}

vaadin-date-picker-year {
    &::part(year-number),
    &::part(year-separator){
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: unset;
    }

    &::part(year-separator)::after {
        content: '\2022';
    }
}

vaadin-month-calendar {
    user-select: none;
    text-align: center;

    &::part(date) {
        font-weight: normal;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
    }

    &::part(focused) {
        outline-style: solid;
    }

    &::part(today) {
        text-decoration: underline;
    }
}

vaadin-date-picker-year-scroller {
    border-inline-start: unset;

    &::before {
        border: unset;
        z-index: 1;
    }
}

vaadin-time-picker::part(toggle-button) {
    display: flex;
}

vaadin-time-picker::part(toggle-button)::before {
    cursor: pointer;
    content: "schedule" / "";
}

vaadin-date-picker[disabled]::part(toggle-button)::before,
vaadin-time-picker[disabled]::part(toggle-button)::before {
    cursor: default;
    pointer-events: none;
}

vaadin-date-picker[readonly]::part(toggle-button),
vaadin-time-picker[readonly]::part(toggle-button) {
    display: none;
}

vaadin-time-picker-overlay::part(overlay) {
    box-shadow: var(--mate-style-shadow-s);
}

vaadin-time-picker-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;

    outline: none;
    cursor: pointer;

    &::part(checkmark)::before {
        content: "\2003";
    }

    &[selected]::part(checkmark)::before {
        content: "check" / "";
    }

    &[focused] {
        outline-style: solid;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-accordion-heading,
vaadin-details-summary {
	display: flex;
	align-items: center;
}

vaadin-accordion-panel[focused] vaadin-accordion-heading,
vaadin-details[focused] vaadin-details-summary  {
	outline-style: solid;
}

vaadin-details-summary::part(header),
vaadin-details-summary::part(title),
vaadin-details-summary::part(content) {
	flex-grow: 1;
}

vaadin-accordion-heading::part(content),
vaadin-details-summary,
mate-details-summary::part(toggle),
mate-details-summary::part(toggle-end) {
	cursor: pointer;
}

vaadin-accordion-panel:not(:last-of-type) {
	border-bottom: solid;
}

mate-details-summary::part(title) {
	display: flex;
}

mate-details-summary::part(title),
mate-details-summary::part(header) {
	align-items: center;
}

vaadin-accordion-heading::part(toggle)::before,
vaadin-details-summary::part(toggle)::before,
vaadin-details[theme~="object-header"] > mate-details-summary::part(toggle),
vaadin-details:not([theme*="object-header"]) > mate-details-summary::part(toggle-end),
vaadin-details:not([theme*="object-header"]) > mate-details-summary > [slot="sub-title"] {
	display: none;
}

vaadin-accordion-heading::part(toggle),
vaadin-details-summary::part(toggle) {
	rotate: unset !important;
}

vaadin-accordion-heading::part(toggle)::after,
vaadin-details-summary::part(toggle)::after,
mate-details-summary::part(toggle)::after {
	cursor: pointer;
	display: inline-block;
	content: "chevron_right" / "";
}

vaadin-accordion-heading:dir(rtl)::part(toggle)::after,
vaadin-details-summary:dir(rtl)::part(toggle)::after,
mate-details-summary:dir(rtl)::part(toggle)::after {
	content: "chevron_left" / "";
}

vaadin-accordion-panel[opened] > vaadin-accordion-heading::part(toggle)::after,
vaadin-details[opened] > vaadin-details-summary::part(toggle)::after,
vaadin-details[opened] > mate-details-summary::part(toggle)::after {
	content: "expand_more" / "";
}

mate-details-summary::part(toggle-end)::after {
	content: "Ausklappen";
}

vaadin-details[opened] > mate-details-summary::part(toggle-end)::after {
	content: "Zuklappen";
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-dialog::part(overlay) {
	border-style: solid;

	&:focus {
		outline-style: solid;
	}
}

vaadin-dialog::part(header) {
	display: flex;
	border-bottom-style: solid;
	align-items: center;
}
    
vaadin-dialog::part(footer) {
	border-top-style: solid;
	flex-direction: row;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: unset !important;
}

vaadin-dialog::part(dialog-content) {
    overflow-y: auto;
}

vaadin-dialog::part(overlay) {
    font-family: var(--mate-typography-font-family);
    overflow: hidden;
}

vaadin-dialog[theme~="progress"]::part(content) {
	display: flex;
	flex-direction: column;
	align-items: center;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-auto-select-combo-box,
vaadin-select,
vaadin-combo-box,
vaadin-multi-select-combo-box {

	&[readonly]::part(toggle-button)::before {
		display: none;
	}

	&::part(toggle-button)::before {
		cursor: pointer;
		content: "expand_more" / "";
        mask-image: none;
        background: inherit;
	}

	&[opened]::part(toggle-button)::before {
		content: "expand_less" / "";
	}
}

vaadin-multi-select-combo-box-chip {
	border: unset;

}

vaadin-multi-select-combo-box-chip::part(remove-button)::before {
	cursor: pointer;
	content: "close" / "";
    mask-image: none;
    background: inherit;
    color: var(--mate-icon-interactive-enabled);
}

vaadin-select-value-button > vaadin-select-item {
	background-color: unset !important;
}

vaadin-multi-select-combo-box-chip[slot="overflow"] {
	&[count="1"] {
		margin-inline-start: 0;
	}

	&::after,
	&::before {
		top: 0;
		width: 100%;
		height: 100%;
		border-left-style: solid;
	}

}

vaadin-combo-box-item,
vaadin-multi-select-combo-box-item {
	border-radius: 0;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-facet {

	display: flex;

	&::part(value) {
		flex-grow: 1;
	}

	&::part(key) {
		flex-shrink: 0;
		text-wrap: nowrap;
	}

	&::part(key),
	&::part(value) {
		overflow: hidden;
	}

	> [default-key] {
		white-space: nowrap;
		overflow: hidden;
	}

	&[theme~="kpi"]::part(value) {
		flex-grow: 1;
		display: flex;
		align-items: center;
	}

	&::part(default-key),
	&::part(default-value) {
		display: block;
		height: 100%;
	}

	&[has-key-tooltip]::part(key-tooltip-indicator)::after,
	&[has-value-tooltip]::part(value-tooltip-indicator)::after {
		content: 'info' / '';
	}
}

mate-facet-list:not([theme*="inline"]) > mate-facet,
mate-facet[theme~="text"],
mate-facet[theme~="kpi"] {
	flex-direction: column;
}

mate-facet-list {
	align-items: stretch;

    &::part(default-title) {
        align-items: center;
    }

	&[theme~="empty-header"]::part(default-title) {
		display: block;
	}

	&[theme~="empty-header"]::part(default-title)::after {
		content: '\2003' / '';
	}

	> mate-facet {

		&::part(value) {
			display: flex;
			flex-grow: 1;
		}

        &::part(key) {
			display: flex;
		}

		&::part(default-key),
		&::part(default-value) {
			align-items: center;
		}
	}

	> mate-facet::part(default-value) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	&[theme~="inline"] {

		> mate-facet {
			flex-direction: row;

			&::part(default-value) {
				white-space: nowrap;
			}

			&::part(key) {
				flex-shrink: 0.25;
			}

			&::part(value) {
				flex-shrink: 0.75;
			}

			&::part(default-value) {
				min-width: 0;
			}
		}

		&[theme~="right-aligned"] {
            > mate-facet::part(value) {
                justify-content: flex-end;
            }

			&::part(default-value) {
                flex-direction: row-reverse;
            }
        }
	}
}

mate-facet-list[theme~="inline"][theme~="key-separator"] > mate-facet,
mate-facet-list[theme~="inline"] > mate-facet[theme~="key-separator"] {
	&[has-key]::part(key)::after {
		content: ":";
	}
}

mate-facet-list[theme~="inline"][theme~="empty-value-indicator"] > mate-facet,
mate-facet-list[theme~="inline"] > mate-facet[theme~="empty-value-indicator"] {
	&:not([has-value])::part(value)::before {
		content: "-";
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-filter-panel {
	container: filter / inline-size;
	&::part(header) {
		height: var(--mate-sizing-md);
	}

	&[header-hidden]::part(header) {
		display: none;
	}

	&::part(header),
	&::part(header-left) {
		overflow: visible;
		display: flex;
		align-items: center;
	}

	&::part(actions),
	&::part(header-right) {
		flex-grow: 1;
		display: flex;
		justify-content: flex-end;
		overflow: visible;
	}

	&::part(content) {
		display: grid;
		align-items: baseline;
		overflow: visible;
	}

	&[collapsed]::part(content) {
		display: none;
	}

	&::part(content) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	&::part(actions) {
		grid-column: 1 / 3;
	}

	&::part(toggle),
	&::part(search),
	&::part(reset) {
		cursor: pointer;
	}

    &::part(toggle):focus,
    &::part(search):focus,
    &::part(reset):focus {
        outline-style: solid;
    }

    &::part(reset) {
		background: unset;
        border-style: solid;
	}

	&::part(search) {
		border-color: transparent;
	}

	&::part(toggle) {
		background: unset;
		border-color: transparent;
		cursor: pointer;
		white-space: nowrap;
        border-style: solid;
	}

    gap: var(--mate-spacing-md);
}

@container filter (768px < width <= 1120px) {
	mate-filter-panel::part(content) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	mate-filter-panel::part(actions) {
		grid-column: 3 / 5;
	}
}

@container filter (width > 1120px) {
	mate-filter-panel::part(content) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	mate-filter-panel::part(actions) {
		grid-column: 5 / 7;
	}
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-form-layout,
div[theme~="form-layout"] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	height: fit-content;

	> * {
		grid-column: span 2;
	}

	> h1, > h2, > h3, > h4, > h5, > h6,
	> [cols="4"],
	> [colspan="2"] {
		grid-column: span 4;
	}

	> [cols="3"] {
		grid-column: span 3;
	}

	> [cols="1"] {
		grid-column: span 1;
	}
}

mate-floating-layout,
div[theme~="floating-layout"] {
	display: flex;
	flex-wrap: wrap;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

@container form (768px < width) {
	mate-form > :nth-of-type(2n):not([slot="top"]) {
		grid-column: 2;
	}
}

/* medium */
@container form (768px < width <= 1120px) {
	mate-form::part(top),
	mate-form::part(form-content) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* large */
@container form (width > 1120px) {
	mate-form::part(top),
	mate-form::part(form-content) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-grid,
vaadin-grid-pro {

	/* for pagination */
    overflow: var(--_mate-component-grid-overflow);
    display: flex;
    flex-direction: column;

	&::part(cell) {
		align-items: unset;
	}

	&::part(cell)::after {
		display: none !important;
	}

	&::part(focused-cell)::after {
		content: "";
		outline-style: solid;
	}

	&::part(highlighted-row)::before {
		content: "";
		position: absolute;
		top: 0;
		z-index: 3;
		pointer-events: none;
		width: 100%;
		height: 100%;
		box-shadow: inset 0 0 0 2px var(--mate-signal-info);
	}

	&::part(info-icon)::after {
		content: "info" / "";;
	}

	&::part(error-icon)::after {
		content: "error" / "";
	}

	&::part(editable-icon)::after {
		content: "edit" / "";
	}

	.row-action:not([disabled]) {
		cursor: pointer;
	}

	.row-action[disabled] > span[theme~="icon"] {
		color: var(--mate-icon-interactive-disabled);
	}
}

vaadin-grid::part(details-collapsed-icon)::after,
vaadin-grid-pro::part(details-collapsed-icon)::after,
vaadin-grid::part(details-expanded-icon)::after,
vaadin-grid-pro::part(details-expanded-icon)::after,
vaadin-grid-tree-toggle::part(toggle)::before,
vaadin-grid-tree-toggle:not([leaf]) {
	cursor: pointer;
}

vaadin-grid::part(details-collapsed-icon)::after,
vaadin-grid-pro::part(details-collapsed-icon)::after,
vaadin-grid-tree-toggle::part(toggle)::before {
	content: "chevron_right" / "";
}
vaadin-grid::part(details-expanded-icon)::after,
vaadin-grid-pro::part(details-expanded-icon)::after,
vaadin-grid-tree-toggle[expanded]::part(toggle)::before {
	content: "expand_more" / "";
}

vaadin-grid-tree-toggle::part(toggle)::before {
	transform: none !important;
	rotate: none !important;
	mask: unset;
	background: unset;
}

vaadin-grid-tree-toggle {
	display: flex;
}mate-grid-pagination {

    display: flex;
    align-items: center;

    border-top-style: solid;

    &::part(text) {
        flex-grow: 1;
        text-align: center;
    }

    &::part(first),
    &::part(last),
    &::part(previous),
    &::part(next) {
        border: unset;
        background-color: unset;
        padding: unset;
        cursor: pointer;
    }

    &::part(first)::after {
        content: "keyboard_double_arrow_left" / "";
    }

    &::part(last)::after {
        content: "keyboard_double_arrow_right" / "";
    }

    &::part(previous)::after {
        content: "keyboard_arrow_left" / "";
    }

    &::part(next)::after {
        content: "keyboard_arrow_right" / "";
    }
}

mate-grid-reorder {
    &::part(reorder-button)  {
        background: unset;
        border-color: transparent;
        cursor: pointer;
        white-space: nowrap;
    }

    &::part(disabled-reorder-button) {
        cursor: unset;;
    }
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-icon,
span[theme~="icon"] {

	font-family: var(--mate-typography-font-family-icon);
	display: flex;

    &[has-notification] {
        position: relative;

        &::after {
            position: absolute;
            text-align: center;
            content: var(--_mate-component-icon-notification-count);
        }
    }

    /* baseline fix */
    &::before {
        content: '\2003' / '';
        width: 0;
    }
}

mate-icon[theme~="filled"],
span[theme~="icon"][theme~="filled"] {
	font-variation-settings: 'FILL' 1;
}@font-face {
    font-family: 'Material Symbols';
    src: url('/assets/material-symbols.Ccx5NVy2.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

*::part(error-message)::before,
*::part(clear-button)::before,
vaadin-password-field-button::before,
vaadin-number-field[step-buttons-visible]::part(decrease-button)::before,
vaadin-number-field[step-buttons-visible]::part(increase-button)::before {
	mask-image: none;
	background: unset;
}

*::part(clear-button)::before {
	content: "close" / "";
}

*::part(error-message) {
	align-items: baseline;
}

*::part(error-message)::before {
	content: "error" / "";
}

vaadin-password-field-button::before {
	content: "visibility" / "";
}

vaadin-password-field[password-visible] > vaadin-password-field-button::before {
	content: "visibility_off" / ""
}

vaadin-number-field::part(decrease-button)::before {
	content: "remove" / "";
}

vaadin-number-field::part(increase-button)::before {
	content: "add" / "";
}

vaadin-grid-cell-content > vaadin-big-decimal-field,
vaadin-grid-cell-content > vaadin-custom-field,
vaadin-grid-cell-content > vaadin-password-field,
vaadin-grid-cell-content > vaadin-email-field,
vaadin-grid-cell-content > vaadin-number-field,
vaadin-grid-cell-content > vaadin-combo-box,
vaadin-grid-cell-content > vaadin-multi-select-combo-box,
vaadin-grid-cell-content > vaadin-select,
vaadin-grid-cell-content > vaadin-date-picker,
vaadin-grid-cell-content > vaadin-time-picker,
vaadin-grid-cell-content > vaadin-date-time-picker,
vaadin-grid-cell-content > vaadin-text-field,
vaadin-grid-cell-content > vaadin-grid-pro-edit-text-field,
vaadin-grid-cell-content > vaadin-grid-pro-edit-checkbox,
vaadin-grid-cell-content > vaadin-grid-pro-edit-select {
	width: 100%;
	--vaadin-input-field-value-line-height: var(--mate-typography-body-md-regular-line-height);
	--vaadin-input-field-padding: 0;
	--vaadin-input-field-top-start-radius: 0;
	--vaadin-input-field-top-end-radius: 0;
	--vaadin-input-field-bottom-start-radius: 0;
	--vaadin-input-field-bottom-end-radius: 0;
	--vaadin-input-field-border-width: 0;

	&::part(input-field) {
		min-height: unset !important;
		outline: none !important;
		background-color: inherit !important;
	}
}

vaadin-grid-cell-content:has(vaadin-big-decimal-field),
vaadin-grid-cell-content:has(vaadin-custom-field),
vaadin-grid-cell-content:has(vaadin-password-field),
vaadin-grid-cell-content:has(vaadin-email-field),
vaadin-grid-cell-content:has(vaadin-number-field),
vaadin-grid-cell-content:has(vaadin-combo-box),
vaadin-grid-cell-content:has(vaadin-multi-select-combo-box),
vaadin-grid-cell-content:has(vaadin-select),
vaadin-grid-cell-content:has(vaadin-date-picker),
vaadin-grid-cell-content:has(vaadin-time-picker),
vaadin-grid-cell-content:has(vaadin-date-time-picker),
vaadin-grid-cell-content:has(vaadin-text-field),
vaadin-grid-cell-content:has(vaadin-grid-pro-edit-text-field),
vaadin-grid-cell-content:has(vaadin-grid-pro-edit-checkbox),
vaadin-grid-cell-content:has(vaadin-grid-pro-edit-select) {
	line-height: 0;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-custom-field,
vaadin-checkbox-group,
vaadin-radio-group,
vaadin-password-field,
vaadin-email-field,
vaadin-text-area,
vaadin-number-field,
vaadin-combo-box,
vaadin-multi-select-combo-box,
vaadin-select,
vaadin-date-picker,
vaadin-time-picker,
vaadin-date-time-picker,
vaadin-text-field {

	&:not([has-label])::before,
	&:not([has-label])::part(label) {
		display: none;
	}

	&[has-label][has-tooltip] > label::after {
		content: "info" / "";
	}

	&::part(label) {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&[required]::part(required-indicator)::after {
		content: "*" / "";
        font-family: var(--mate-typography-font-family);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/


:not(vaadin-menu-bar-button) > vaadin-menu-bar-item,
vaadin-context-menu-item,
vaadin-select-item,
vaadin-multi-select-combo-box-item,
vaadin-combo-box-item {
    align-items: center;
    box-sizing: border-box;
    outline: none;
    cursor: default;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:not([hidden]) {
        display: flex;
    }

    &::part(checkmark)::before {
        content: "\2003";
        mask-image: none;
        background: inherit;
    }

    &[selected]::part(checkmark)::before {
        content: "check" / "";
    }

    &:not([disabled]):not([mate-disabled]):not([focused]):hover {
        cursor: pointer;
    }

    &[focused]:not([disabled]):not([mate-disabled]) {
        outline-style: solid;
    }

    &[tabindex]::before {
        font-family: var(--mate-typography-font-family-icon);
    }

    &::part(content) {
        overflow-wrap: break-word;
        flex: auto;
    }
}

vaadin-menu-bar vaadin-menu-bar-item[theme~="has-icon"] > .text {
    display: none;
}

vaadin-menu-bar-overlay::part(overlay),
vaadin-context-menu-overlay::part(overlay),
vaadin-select-overlay::part(overlay),
vaadin-context-menu::part(overlay),
vaadin-multi-select-combo-box-overlay::part(overlay),
vaadin-combo-box-overlay::part(overlay),
vaadin-context-menu-list-box,
vaadin-menu-bar-submenu::part(content),
vaadin-menu-bar-submenu::part(overlay),
vaadin-menu-bar::part(overlay) {
    box-shadow: var(--mate-style-shadow-l);
    border-radius: var(--mate-corner-radius-sm);
}

vaadin-menu-bar-submenu::part(overlay),
vaadin-context-menu::part(content),
vaadin-menu-bar-submenu::part(content),
vaadin-select::part(content) {
    padding: 0;

}

vaadin-context-menu::part(checkmark) {
    visibility: hidden;
}

:not(vaadin-menu-bar-button) > vaadin-menu-bar-item::after {
    mask-image: none;
    background: inherit;
}

vaadin-context-menu-item[aria-haspopup='true']::after {
    content: "expand_more" / "";
    mask-image: none;
    background: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:not(vaadin-menu-bar-button) > vaadin-menu-bar-item[aria-haspopup='true']::after {
    content: "expand_more" / "";
}

vaadin-select-value-button::part(label) {
    display: flex;
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-lookup-field {

    > vaadin-button[slot="search-button-slot"] {

        /* baseline fix */
        &::before {
            content: '\2003' / '';
            width: 0;
        }

        &::after {
            content: 'search' / '';
        }

        > vaadin-icon  {
            display: none !important;
        }

        border-style: solid;
        padding: var(--mate-spacing-xxs);
    }

    > [slot="field"] {

        ::before {
            box-sizing: unset;
            align-items: unset;
            display: inline-block;
        }
    }

    /* fix outline when focusing input and fix border when hovering */
    > [slot="field"]:hover,
    > [slot="field"][focused] {
        z-index: 1;
    }

    vaadin-text-field > vaadin-icon[slot="suffix"]::before {
        content: "search" / "";
    }

    &::part(container) {
        align-items: flex-end;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-menu-bar {

	&::part(container) {
		overflow: visible;
	}

	&[theme~="split"] {

		vaadin-menu-bar-button[first-visible] {
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
		}

		vaadin-menu-bar-button[last-visible] {
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
			padding: var(--mate-spacing-xxs) !important;
		}

		/* additional fix for overlap */
		vaadin-menu-bar-button:hover,
		vaadin-menu-bar-button:active,
		vaadin-menu-bar-button[focused] {
			z-index: 2;
		}
	}
}

vaadin-menu-bar-button {

	&[slot="overflow"]::part(label)::after {
		content: "more_vert" / "";
	}

	&[aria-haspopup]:not([slot="overflow"])::part(suffix)::after {
		content: "expand_more" / "";
        background: unset;
        mask-image: unset;
	}

	&[aria-haspopup][aria-expanded="true"]:not([slot="overflow"])::part(suffix)::after {
		content: "expand_less" / "";
	}

	&[slot="overflow"]::part(label)::after {
		opacity: 1;
	}

	/* workaround as long as text is not changeable */
	&[slot="overflow"] div {
		display: none;
	}

}

vaadin-list-item,
vaadin-context-menu-item,
vaadin-menu-bar-item {
	outline: none;

	&::part(content) {
		display: flex;
	}

	&::part(checkmark) {
		display: none;
	}

	&[theme~="has-hint"] > .text {
		flex-grow: 1;
	}
}

list-box::part(items),
vaadin-context-menu-list-box::part(items),
vaadin-menu-bar-list-box::part(items) {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

vaadin-list-item,
vaadin-menu-bar-item:not(vaadin-menu-bar-button > vaadin-menu-bar-item) {
	min-height: unset;
	border-radius: 0;
}

vaadin-menu-bar-overlay::part(content) {
	padding: 0;
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-message-item {

	&::part(default-title) {
		font-family: var(--mate-typography-label-md-medium-font-family);
		font-size: var(--mate-typography-label-md-medium-font-size);
		font-weight: var(--mate-typography-label-md-medium-font-weight);
		line-height: var(--mate-typography-label-md-medium-line-height);
	}

	&::part(text) {
		white-space: normal;
	}

	&[max-lines]:not([expanded])::part(text) {
		line-clamp: var(--_mate-component-message-item-max-lines);
		-webkit-line-clamp: var(--_mate-component-message-item-max-lines);
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}

	&::part(toggle) {
		padding: unset;
		border: unset;
		background-color: unset;
		cursor: pointer;
		white-space: nowrap;
	}
}/*
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-month-picker-calendar {

    > [slot="prev-year"]::part(label),
    > [slot="next-year"]::part(label),
    > [slot="prev-year"]::part(label)::before,
    > [slot="next-year"]::part(label)::before {
        rotate: unset;
        mask: unset;
        background: unset;
    }

    > [slot="prev-year"]::part(label)::before {
        content: 'chevron_left' / '';
    }

    > [slot="next-year"]::part(label)::before {
        content: 'chevron_right' / '';
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-notification-card::part(overlay) {
    border-style: solid;
    overflow: hidden;
    box-shadow: var(--mate-style-shadow-m);
}

vaadin-notification-card::part(content) {
	display: flex;
	align-items: baseline;
    padding: 0 !important;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-notification-bar {
	align-items: baseline;
	flex-grow: 1;
    padding: unset;

	&:not([close-button-visible])::part(close) {
		display: none;
	}

	&::part(container),
	&::part(action) {
		display: flex;
		flex-grow: 1;
	}

	&::part(container) {
		align-items: baseline;
		flex-wrap: wrap;
	}

	&::part(action) {
		justify-content: flex-end;
	}

	&::part(close) {
		padding: unset;
		border: unset;
		background-color: unset;
		cursor: pointer;
	}

	&:not([theme~="success"]):not([theme~="warning"]):not([theme~="danger"]):not([theme~="error"])::part(state)::after {
		content: "info" / "";
	}

	&[theme~="success"]::part(state)::after {
		content: "check_circle" / "";
	}

	&[theme~="warning"]::part(state)::after {
		content: "warning" / "";
	}

	&[theme~="danger"]::part(state)::after,
	&[theme~="error"]::part(state)::after{
		content: "error" / "";
	}

	&::part(close)::after {
		content: "close" / "";
	}
}

:not(vaadin-notification-card) > mate-notification-bar {
    border-style: solid;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-pdf-viewer {

    border: var(--mate-border-width-sm) solid var(--mate-border-base);

    &::part(toolbar-button toolbar-button-toogle-sidebar) {
        border: none !important;
    }

    &::part(viewer-container):focus {
        outline-style: solid;
    }

    &::part(toolbar) {
        border-bottom: unset;
    }

    vaadin-button.toolbar-button {

        &:is(#previousPage, #nextPage, #sidebarToggle)::before {
            mask-image: unset !important;
            background-color: unset;
            font-family: var(--mate-typography-font-family-icon);
        }

        &#previousPage::before {
            content: "expand_less" / "";
        }

        &#nextPage::before {
            content: "expand_more" / "";
        }

        &#sidebarToggle::before {
            content: "chevron_right" / "";
        }

        &#sidebarToggle:has(vaadin-icon.sidebarOpen)::before {
            content: "chevron_left" / "";
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-popover {

    &::part(overlay) {
        background-image: unset;
        font-weight: unset;
        font-family: unset;
        letter-spacing: unset;

        box-shadow: var(--mate-style-shadow-xl);
    }

    &::part(overlay):focus-visible {
        outline-style: solid;
    }
}

vaadin-popover-overlay:not([theme*="hidden-breadcrumbs"]) {
   
    &::part(arrow) {
        display: none;
        position: absolute;
    }

    &[theme~="arrow"]::part(arrow) {
        display: block;
    }

    &[theme~="arrow"][position^="top"]::part(arrow),
    &[theme~="arrow"][position^="bottom"]::part(arrow) {
        border-inline-start-style: solid;
        border-inline-end-style: solid;
    }

    &[theme~="arrow"][position^="bottom"][top-aligned]::part(arrow),
    &[theme~="arrow"][position^="top"][top-aligned]::part(arrow) {
        top: -8px;
        border-bottom-style: solid;
    }

    &[theme~="arrow"][position^="bottom"]::part(arrow), 
    &[theme~="arrow"][position^="top"]::part(arrow) {
        transform: translateX(-50%);
    }

    &[theme~="arrow"][position="start"][top-aligned]::part(arrow), 
    &[theme~="arrow"][position="end"][top-aligned]::part(arrow) {
        top: 50%;
        transform: translateY(-50%);
    }
    
    &[theme~="arrow"][position^="start"][start-aligned]::part(arrow), 
    &[theme~="arrow"][position^="end"][start-aligned]::part(arrow) {
        border-inline-end-style: solid;
    }

    &[theme~="arrow"][position^="start"]::part(arrow), 
    &[theme~="arrow"][position^="end"]::part(arrow) {
        border-top-style: solid;
        border-bottom-style: solid;
    }

    &::part(overlay) {
        border-style: solid;
    }

}

mate-popover-content {

    &::part(header) {
        align-items: center;
        border-bottom-style: solid;
    }

    &::part(footer) {
        border-top-style: solid;
        justify-content: flex-end;
    }

    &::part(close) {
        padding: unset;
        border: unset;
        background-color: unset;
        cursor: pointer;
    }

    &::part(close)::after {
        content: "close" / "";
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-progress-bar::part(bar) {
	height: 100%;
}

vaadin-progress-bar::part(value) {
    transform: none;
}

span[theme~="spinner"] {
	display: block;
	position: relative;
	overflow: hidden;
}

span[theme~="spinner"]::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
    
	content: '\2003';
	display: block;
	box-sizing: border-box;
	border-radius: 50%;
	border-style: solid;
	animation: spinner .8s linear infinite;
}

@keyframes spinner {
	to {transform: rotate(360deg);}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-radio-group,
vaadin-checkbox-group {
    &::part(group-field) {
        flex-direction: row;
        flex-wrap: wrap;
    }

    &[theme="vertical"]::part(group-field) {
        flex-direction: column;
    }
}

vaadin-checkbox::part(checkbox)::after {
    font-family: var(--mate-typography-font-family-icon);
    content: "check_small" / "";
    mask-image: none;
    background: none;
    font-size: var(--mate-icon-sizing-sm-md);
    line-height: var(--mate-icon-sizing-sm-md);
}

vaadin-checkbox[indeterminate]::part(checkbox)::after {
    content: "check_indeterminate_small" / "";
}


vaadin-checkbox,
vaadin-radio-button {
    --vaadin-checkbox-font-weight: var(--mate-typography-label-md-regular-font-weight);
    --vaadin-radio-button-label-font-weight: var(--mate-typography-label-md-regular-font-weight);

    --vaadin-checkbox-label-line-height: var(--mate-typography-label-md-regular-line-height);
    --vaadin-radio-button-label-line-height: var(--mate-typography-label-md-regular-line-height);

    --vaadin-radio-button-label-font-size: var(--mate-typography-label-md-regular-font-size);
    --vaadin-checkbox-label-font-size: var(--mate-typography-label-md-regular-font-size);

    vertical-align: middle;
    align-items: center;

    > label {
        white-space: nowrap;
        word-break: keep-all;
        font-family: var(--mate-typography-label-md-regular-font-family);
    }
}


vaadin-radio-button[focused]::part(radio),
vaadin-checkbox[focused]::part(checkbox) {
        outline-style: solid;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-custom-field[theme~="range-selector"] {
	&::part(input-fields) {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
	}

	> :not(:first-of-type)::part(input-field) {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	> :not(:last-of-type)::part(input-field) {
		border-start-end-radius: 0;
		border-end-end-radius: 0;
	}

	/* additional fix for overlap */
	> :not(:last-of-type):hover::part(input-field),
	> :not(:last-of-type):active::part(input-field),
	> :not(:last-of-type)[focused]::part(input-field) {
		z-index: 2;
	}

	> * {
		flex-grow: 1;
	}
}

mate-form-layout > vaadin-custom-field[theme~="range-selector"],
mate-filter-panel > vaadin-custom-field[theme~="range-selector"] {
	grid-column: span 2;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-radio-group[theme~="segmented"],
vaadin-checkbox-group[theme~="segmented"] {
    gap: unset;

    &::part(group-field) {
        flex-wrap: unset;
        padding: unset;
    }

    vaadin-radio-button,
    vaadin-checkbox {

        display: inline-flex;
        border-style: solid;
        box-sizing: border-box;
        align-items: center;

        &::part(radio),
        &::part(checkbox) {
            display: none !important;
        }

        &[focused] {
            outline-style: solid;
        }

        &[disabled] {
            cursor: default;
        }

        &:not([disabled]) {
            &[checked] {
                > [slot="label"]:not(:has(span[theme*="icon"])):not(:has(mate-icon)),
                > [slot="label"] > :not(span[theme*="icon"]):not(mate-icon) {
                    text-decoration: underline;
                }
            }
        }

        &::before {
            display: none;
        }

        > input {
            width: 0;
            margin: unset !important;
            margin-inline-end: unset !important;
        }
    }

    /* baseline fix */
    &::before {
        content: "\2003" / "";
        display: block;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-side-nav {
    display: block;
    min-width: unset;
    overflow-y: auto;

    &::part(children) {
        gap: unset;
    }
}

vaadin-side-nav-item {
    font-size: inherit;
    line-height: inherit;

    gap: unset;

    &::part(content)::before {
        display: none;
    }

    &::part(toggle-button),
    &::part(toggle-button)::before {
        rotate: unset !important;
    }

    &[has-children] {

        &::part(toggle-button) {
            display: flex;
            align-items: center;
            justify-content: center;
        }

		&::part(toggle-button)::before {
			content: "chevron_right" / "";
            mask-image: unset;
            background: unset;
            display: inline-flex;
            align-items: center;
            justify-content: center;
		}

		&:dir(rtl)::part(toggle-button)::before {
			content: "chevron_left" / "";
		}

		&[expanded]::part(toggle-button)::before {
			content: "expand_more" / "";
		}

        &::part(children) {
            gap: unset;
        }
    }

    &::part(link) {
          width: unset;
          gap: unset;
          padding: unset;
          transition: unset;
          min-height: unset;
          border-radius: unset;
          padding-inline-start: unset;
          line-height: inherit;
          cursor: pointer !important;
          background-color: unset !important;
      }

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-split-layout {

    &::part(splitter)::before {
        content: '';
        position: absolute;
        z-index: -1;
    }

    &:not([orientation="vertical"])::part(splitter) {
        cursor: ew-resize;
    }

    &[orientation="vertical"]::part(splitter) {
        cursor: ns-resize;
    }

    &:not([orientation="vertical"])::part(splitter)::before {
        top: 0;
    }

    &[orientation="vertical"]::part(splitter)::before {
        left: 0;
    }

    &[orientation="vertical"]::part(splitter)::before {
        width: 100%;
    }

}

vaadin-split-layout[splitter-hidden]::part(splitter) {
    display: none;
}

mate-split-layout-right {

    transition: width 200ms, visibility 200ms;

    &:not([tabbed])::part(tabs) {
        display: none;
    }

    &:not([opened]) {
        &:not([tabbed]) {
            flex: unset !important;
            visibility: hidden;
        }

        &[tabbed] {
            &::part(content) {
                visibility: hidden;
            }
        }
    }

    &::part(tabs) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
}

mate-split-layout-header {
    border-bottom-style: solid;

    &::part(header) {
        align-self: stretch;
        align-items: center;
    }

    &::part(sub-header) {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }

    &::part(title) {
        overflow: hidden;
    }

    &::part(close) {
        padding: unset;
        border: unset;
        background-color: unset;
        cursor: pointer;
    }

    &::part(close)::after {
        content: "close" / "";
    }
}

vaadin-horizontal-layout[theme~="split-layout-footer"] {
    border-top-style: solid;
    justify-content: flex-end;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

/* fix vertical scrolling in firefox */
@supports (scrollbar-width: none) {
    vaadin-tabs[orientation="vertical"]::part(tabs) {
        overflow-y: auto !important;
        scrollbar-width: none;
    }
}

vaadin-tabs:dir(rtl) {
	&::part(forward-button)::after {
		content: "arrow_circle_left" / "";
	}

	&::part(back-button)::after {
		content: "arrow_circle_right" / "";
	}

	&[theme~="stepper"] {
		> vaadin-tab:not(:last-child)::after {
			content: "arrow_left" / "";
		}
	}
}

vaadin-tabs {

	&::part(tabs) {
		margin: 0 !important;
        gap: unset;
	}

    &:not([overflow*="end"])::part(forward-button) {
        display: none;
    }

    &:not([overflow*="start"])::part(back-button) {
        display: none;
    }

    &::part(forward-button),
    &::part(back-button) {
        max-height: 100%;
    }

	&::part(forward-button)::after {
		content: "arrow_circle_right" / "";
	}

    &::part(forward-button)::before,
    &::part(back-button)::before {
        content: none;
    }

	&::part(back-button)::after {
		content: "arrow_circle_left" / "";
	}

    &[orientation="vertical"] {
        &::part(forward-button),
        &::part(back-button) {
            max-width: 100%;
        }

        &::part(forward-button)::after {
            content: "arrow_circle_down" / "";
        }

        &::part(back-button)::after {
            content: "arrow_circle_up" / "";
        }
    }

    &[orientation="vertical"] {
        max-height: unset;
    }

    &[theme~="anchor"],
	&[theme~="stepper"] {
        position: relative;

        &::after {
            position: absolute;
            z-index: -1;
            content: "";
            bottom: 0;
            inset-inline-start: 0;
            inset-inline-end: 0;
            height: 0;

            border-bottom-style: solid;
        }

        > vaadin-tab {
            position: relative;
        }

		> vaadin-tab[selected]::before {
			bottom: 0;
            content: '';
            display: block;
            overflow: visible;
            border-top-style: solid;
            border-bottom-style: solid;
        }
	}

	&[theme~="stepper"] {

        > vaadin-tab {
            overflow: visible;
        }

        > vaadin-tab::after {
            content: "arrow_right" / "";
        }

        > vaadin-tab:last-of-type::after {
            display: none;
        }
    }

    &[theme~="side-panel-tabs"],
    &[theme~="application-bar"] {
        > vaadin-tab {
            display: flex;
            justify-content: center;
            align-items: center;
            height: unset;
        }
    }

    &[theme~="side-panel-tabs"] {
        > vaadin-tab {

            box-sizing: border-box;

            &[hint]::after {
                content: '';
                position: absolute;
                border-radius: 50%;
            }
        }
    }
}

vaadin-tab {
	font-weight: var(--mate-typography-font-weight-medium);
    border-radius: unset;
    padding: unset;
    
     &[disabled] {
        opacity: unset;
        cursor: inherit;
    }

    &::before {
        position: absolute;
    }

    &::after,
    &::before {
        transition: unset;
        transform: unset;
        opacity: unset;
        background-color: unset;
        box-shadow: none;
        left: unset;
        width: unset;
    }
}

vaadin-tabs::part(forward-button)::after,
vaadin-tabs::part(back-button)::after,
vaadin-tab:not([disabled]) {
    cursor: pointer;
}

/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-toolbar {
	align-items: baseline;

	&[theme~="danger"]::part(status-icon)::after,
	&[theme~="error"]::part(status-icon)::after {
		content: "error" / "";
	}

	&:not([theme*="danger"]):not([theme*="error"])::part(status-icon)::after {
		content: "info" / "";
	}

	&::part(loading-indicator)::after {
		content: '\2003';
		display: block;
		box-sizing: border-box;
		border-radius: 50%;
		border-style: solid;
		animation: spinner .8s linear infinite;
	}
}
/*
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-toolbar-layout {

    > vaadin-button[slot="overflow-button"] {
        gap: 0;

        /* baseline fix */
        &::before {
            content: '\2003' / '';
            width: 0;
        }

        &::after {
            content: "more_vert" / "";
        }

        > vaadin-icon {
            display: none !important;
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-tooltip {

    &::part(overlay) {
        border-radius: 0;
        box-shadow: none;
        padding: unset;
    }

    &::part(content) {
        border-style: solid;
        white-space: pre-line;
    }
}

.mate-has-tooltip::after {
    content: "info" / "";
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body,
.mate-body {
	font-family: var(--mate-typography-font-family);
}

.mate-text-no-margins {
	margin: 0 !important; 
	margin-block-start: 0;
	margin-block-end: 0;
}

.mate-link {
	cursor: pointer;
	text-decoration: underline;
}

hr {
	margin-block-start: unset;
    margin-block-end: unset;
    margin-inline-start: unset;
    margin-inline-end: unset;
	border-style: none;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-custom-field:has(vaadin-upload)::part(input-fields) {
	border-style: dashed;
}

vaadin-upload-file::part(commands),
vaadin-upload::part(drop-label) {
	display: flex;
}

vaadin-upload::part(primary-buttons) {
	display: flex;
}

vaadin-upload,
vaadin-upload-file-list::part(list),
vaadin-upload-file-list > li {
	display: flex;
	flex-direction: column;
}

vaadin-upload-file::part(row) {
	align-items: center;
}

vaadin-upload-file {
	align-items: baseline;

	&::part(row),
	&::part(info),
	&::part(meta) {
		display: flex;
	}

	&::part(row) {
		align-items: baseline;
	}

	&::part(info) {
		flex-grow: 1;
	}

	&::part(meta) {
		flex-direction: column;
	}
}

vaadin-upload-icon::after {
	content: "file_upload" / "";
}

vaadin-upload-file::part(done-icon)::after {
	content: "check" / "";
}

vaadin-upload-file::part(warning-icon)::after {
	content: "error_outline" / "";
}

vaadin-upload-file::part(start-button)::after {
	content: "play_arrow" / "";
}

vaadin-upload-file::part(retry-button)::after {
	content: "refresh" / "";
}

vaadin-upload-file::part(remove-button)::after {
	content: "delete_outline" / "";
}

vaadin-upload-icon,
vaadin-upload-file::part(start-button),
vaadin-upload-file::part(retry-button),
vaadin-upload-file::part(remove-button),
vaadin-upload-file::part(done-icon),
vaadin-upload-file::part(warning-icon) {
	padding: 0;
}

vaadin-upload-icon::before,
vaadin-upload-file::part(start-button)::before,
vaadin-upload-file::part(retry-button)::before,
vaadin-upload-file::part(remove-button)::before,
vaadin-upload-file::part(done-icon)::before,
vaadin-upload-file::part(warning-icon)::before {
	display: none;
}

vaadin-upload-file[complete]::part(done-icon),
vaadin-upload-file[error]::part(warning-icon) {
	display: block;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-anchor-nav {
    &::part(container) {
        background: var(--mate-background-base);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-app-layout {

	&::part(navbar) {
		background-color: var(--mate-components-other-global-header-background);
	}

	&::part(application-bar) {
		border-inline-end-color: var(--mate-border-base);
	}

	&::part(drawer) {
		background-color: var(--mate-background-base);
	}

	&::part(backdrop) {
		opacity: unset;
		background-color: var(--mate-shades-contrast-20pct);
	}

	&::part(splitter) {
		background-color: var(--mate-border-base);
		--_mate-split-layout-toggler-color: var(--mate-shades-contrast-30pct);
	}

	&::part(splitter):hover:not(:active) {
		background-color: var(--mate-shades-contrast-90pct);
		--_mate-split-layout-toggler-color: var(--mate-shades-contrast-90pct);
	}

	&::part(splitter):active {
		background-color: var(--mate-signal-primary);
		--_mate-split-layout-toggler-color: var(--mate-signal-primary);
	}

	&::part(handle) {
		background-color: var(--_mate-split-layout-toggler-color);
	}

	&::part(logo-1) {
		fill: var(--mate-components-akdb-logo-1);
	}

	&::part(logo-2) {
		fill: var(--mate-components-akdb-logo-2);
	}

	&::part(close-drawer)::after,
	&::part(open-drawer)::after,
	&::part(toggle-drawer)::after {
		color: var(--mate-icon-interactive-enabled);
	}

	&::part(drawer-rule) {
		border-top-color: var(--mate-border-base);
	}

	&::part(open-drawer) {
		border-top-color: var(--mate-border-base);
		border-right-color: var(--mate-border-base);
		border-bottom-color: var(--mate-border-base);
		background-color: var(--mate-background-base);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

span[theme~="badge"] {

	&:not([theme*="neutral"]):not([theme*="warning"]):not([theme*="success"]):not([theme*="danger"]):not([theme*="error"]) {
		background-color: var(--mate-signal-info-light);
		color: var(--mate-text-info);

		> mate-icon,
		> span[theme~="icon"] {
			color: var(--mate-text-info);
		}
	}

	&[theme~="neutral"] {
		background-color: var(--mate-signal-neutral-light);
		color: var(--mate-text-neutral);

		> mate-icon,
		> span[theme~="icon"] {
			color: var(--mate-text-neutral);
		}
	}

	&[theme~="warning"] {
		background-color: var(--mate-signal-warning-light);
		color: var(--mate-text-warning);

		> mate-icon,
		> span[theme~="icon"] {
			color: var(--mate-text-warning);
		}
	}

	&[theme~="success"] {
		background-color: var(--mate-signal-success-light);
		color: var(--mate-text-success);

		> mate-icon,
		> span[theme~="icon"] {
			color: var(--mate-text-success);
		}
	}

	&[theme~="danger"],
	&[theme~="error"]{
		background-color: var(--mate-signal-danger-light);
		color: var(--mate-text-danger);

		> mate-icon,
		> span[theme~="icon"] {
			color: var(--mate-text-danger);
		}
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-breadcrumb {
    --vcf-breadcrumb-separator-color: var(--mate-text-body);
    --vcf-breadcrumb-link-focus-ring-color: var(--mate-interactive-focus);

    color: var(--mate-text-primary);

    > a:-webkit-any-link {
        color: var(--mate-text-primary);
    }

    a.breadcrumb-anchor.add-mobile-back-icon::before {
        color: var(--mate-icon-interactive-enabled) !important;
    }

    &[aria-current="page"] {
        color: var(--mate-text-disabled);
    }

    &[part="ellipsis"] {
        color: var(--mate-text-disabled);
    }

    &:focus-within::part(link) {
        outline-color: var(--mate-interactive-focus);
    }
}

vcf-breadcrumb:has(a:focus)::part(link),
vcf-breadcrumb[part="ellipsis"]:has(a[aria-expanded="false"])::part(link),
vcf-breadcrumb[part="ellipsis"] vaadin-popover a:focus {
    outline: var(--vcf-breadcrumb-link-focus-ring-color) solid 2px !important;
    outline-offset: 2px !important;
}

vaadin-popover[theme~="hidden-breadcrumbs"] {

    &::part(overlay) {
        border-color: var(--mate-border-base);
    }

    a {
        color: var(--mate-text-body) !important;

        &:focus {
            outline-color: var(--mate-interactive-focus);
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-button,
vaadin-menu-bar-button {

	color: var(--mate-text-primary);

	&:not([theme*="primary"]):not([theme*="tertiary"]):not([theme*="icon"]) {
		&:not([theme*="danger"]),
		&:not([theme*="error"]) {
			border-color: var(--mate-interactive-enabled);

			&:hover:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				border-color: var(--mate-interactive-hover);
				background-color: var(--mate-background-interactive-hover);
			}

			&:active:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				border-color: var(--mate-interactive-active);
				background-color: var(--mate-background-interactive-active);
			}
		}

		&:has(> vaadin-context-menu-item[mate-disabled]),
		&[mate-disabled],
		&[disabled] {
			color: var(--mate-text-disabled);
			border-color: var(--mate-shades-contrast-20pct);
		}
	}

	&[theme~="primary"]:not([theme*="icon"]) {

		border-color: transparent;

		&:not([theme*="danger"]),
		&:not([theme*="error"]){
			color: var(--mate-text-primary-contrast);
			background-color: var(--mate-interactive-enabled);

			&:hover:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				background-color: var(--mate-interactive-hover);
			}

			&:active:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				background-color: var(--mate-interactive-active);
			}
		}

		&:has(> vaadin-context-menu-item[mate-disabled]),
		&[mate-disabled],
		&[disabled] {
			color: var(--mate-text-disabled);
			background-color: var(--mate-background-interactive-disabled);
		}
	}

	&[theme~="tertiary"]:not([theme*="icon"]) {

		border-color: transparent;

		&:not([theme*="danger"]),
		&:not([theme*="error"]){
			color: var(--mate-text-primary);

			&:hover:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				border-color: var(--mate-interactive-hover);
				background-color: var(--mate-background-interactive-hover);
			}

			&:active:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				border-color: var(--mate-interactive-active);
				background-color: var(--mate-background-interactive-active);
			}
		}

		&:has(> vaadin-context-menu-item[mate-disabled]),
		&[mate-disabled],
		&[disabled] {
			color: var(--mate-text-disabled);
		}
	}

	&[theme~="danger"]:not([theme*="icon"]):not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])),
	&[theme~="error"]:not([theme*="icon"]):not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])){
		&:not([theme*="primary"]):not([theme*="tertiary"]) {
			color: var(--mate-text-danger);
			border-color: var(--mate-interactive-danger-enabled);

			&:hover:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				border-color: var(--mate-interactive-danger-hover);
				background-color: var(--mate-background-danger-hover);
			}

			&:active:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				border-color: var(--mate-interactive-danger-active);
				background-color: var(--mate-background-danger-active);
			}
		}

		&[theme~="primary"] {
			color: var(--mate-text-danger-contrast);
			background-color: var(--mate-interactive-danger-enabled);
			border-color: transparent !important;

			&:hover:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				background-color: var(--mate-interactive-danger-hover);
			}

			&:active:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				background-color: var(--mate-interactive-danger-active);
			}
		}

		&[theme~="tertiary"] {
			color: var(--mate-text-danger);
			border-color: transparent;

			&:hover:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				border-color: var(--mate-interactive-danger-hover);
				background-color: var(--mate-background-danger-hover);
			}

			&:active:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
				border-color: var(--mate-interactive-danger-active);
				background-color: var(--mate-background-danger-active);
			}
		}
	}
}

vaadin-button:not([theme~="icon"]),
vaadin-menu-bar-item:not([theme~="icon"]) {
    > mate-icon,
    > span[theme~="icon"] {
        color: inherit;
    }
}

vaadin-button[theme~="icon"],
vaadin-menu-bar-item[theme~="icon"],
vaadin-menu-bar-button[theme~="icon"],
span[theme~="icon"] {
    color: var(--mate-icon-neutral);

    &:hover,
    &:hover > mate-icon,
    &:hover > span[theme~="icon"] {
        color: var(--mate-icon-interactive-hover);
        background-color: unset;
    }

    &:active,
    &:active > mate-icon,
    &:active > span[theme~="icon"] {
        color: var(--mate-icon-interactive-active);
    }

    &[disabled],
    &[disabled] > mate-icon,
    &[disabled]> span[theme~="icon"] {
        color: var(--mate-icon-interactive-disabled);
    }
}

vaadin-button[disabled] {
    opacity: unset;
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-callout {
	background-color: var(--mate-background-base);

	&[theme~="secondary"] {
		background-color: var(--mate-signal-neutral-light);

		&::part(title) {
			color: var(--mate-text-neutral);
		}
	}

	&[theme~="info"] {
		background-color: var(--mate-signal-info-light);

		&::part(title) {
			color: var(--mate-text-info);
		}

		&::part(state) {
			color: var(--mate-icon-info);
		}
	}

	&[theme~="success"] {
		background-color: var(--mate-signal-success-light);

		&::part(title) {
			color: var(--mate-text-success);
		}

		&::part(state) {
			color: var(--mate-icon-success);
		}
	}

	&[theme~="warning"] {
		background-color: var(--mate-signal-warning-light);

		&::part(title) {
			color: var(--mate-text-warning);
		}

		&::part(state) {
			color: var(--mate-icon-warning);
		}
	}

	&:not([theme*="info"]):not([theme*="warning"]):not([theme*="danger"]):not([theme*="error"]):not([theme*="success"]) {

		&:not([theme*="secondary"]) {
			border-color: var(--mate-border-base);
		}
	}
}

mate-form::part(default-error),
mate-callout[theme~="danger"],
mate-callout[theme~="error"] {
	background-color: var(--mate-signal-danger-light);
}

mate-form,
mate-callout[theme~="danger"],
mate-callout[theme~="error"] {

	&::part(title) {
		color: var(--mate-text-danger);
	}

	&::part(state) {
		color: var(--mate-icon-danger);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-card {
    --vaadin-card-title-color: var(--mate-text-heading);
    --vaadin-card-subtitle-color: var(--mate-text-secondary);

    border-color: var(--mate-components-field-border-enabled);
    background: var(--mate-background-base);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-chart,
vaadin-chart-series {

    --highcharts-background-color: var(--mate-background-base);

    --highcharts-color-0: var(--mate-data-1);
    --highcharts-color-1: var(--mate-data-2);
    --highcharts-color-2: var(--mate-data-3);
    --highcharts-color-3: var(--mate-data-4);
    --highcharts-color-4: var(--mate-data-5);
    --highcharts-color-5: var(--mate-data-6);
    --highcharts-color-6: var(--mate-data-7);
    --highcharts-color-7: var(--mate-data-8);
    --highcharts-color-8: var(--mate-data-9);
    --highcharts-color-9: var(--mate-data-10);
    --_color-0: var(--mate-data-1);

    --vaadin-charts-title-label: var(--mate-text-heading);
    --vaadin-charts-axis-title: var(--mate-shades-contrast-90pct);
    --vaadin-charts-axis-label: var(--mate-shades-contrast-90pct);
}

.x-range {
    --highcharts-color-0: var(--mate-components-x-range-chart-1);
    --highcharts-color-1: var(--mate-components-x-range-chart-2);
    --highcharts-color-2: var(--mate-components-x-range-chart-3);
    --highcharts-color-3: var(--mate-components-x-range-chart-4);
    --highcharts-color-4: var(--mate-components-x-range-chart-5);
    --highcharts-color-5: var(--mate-components-x-range-chart-6);
    --highcharts-color-6: var(--mate-components-x-range-chart-7);
    --highcharts-color-7: var(--mate-components-x-range-chart-8);
    --highcharts-color-8: var(--mate-components-x-range-chart-9);
    --highcharts-color-9: var(--mate-components-x-range-chart-10);
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-dashboard-widget {
    --vaadin-dashboard-widget-background: var(--mate-background-base);
    --vaadin-dashboard-widget-border-color: var(--mate-border-base);
    --vaadin-dashboard-widget-title-color: var(--mate-text-body);
    --vaadin-dashboard-drop-target-border-color: var(--mate-border-base);
    --vaadin-dashboard-drop-target-background: var(--mate-shades-contrast-20pct);

    &::part(header) {
        border-bottom-color: var(--mate-border-base);
    }

    &[selected] {
        background: var(--mate-shades-contrast-10pct);
    }

    &[move-mode] {
        background: var(--mate-shades-contrast-20pct);
    }

    &::part(move-button),
    &::part(resize-button),
    &::part(remove-button) {
        color: var(--mate-icon-interactive-enabled);
        outline-color: var(--mate-interactive-focus);
    }

    &::part(move-apply-button),
    &::part(move-forward-button),
    &::part(move-backward-button),
    &::part(resize-apply-button),
    &::part(resize-shrink-width-button),
    &::part(resize-shrink-height-button),
    &::part(resize-grow-width-button),
    &::part(resize-grow-height-button) {
        color: var(--mate-text-primary-contrast);
        background-color: var(--mate-interactive-enabled);
        outline-color: var(--mate-interactive-focus);
    }
}

vaadin-dashboard-section {
    &::part(title) {
        color: var(--mate-text-body);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-date-picker::part(toggle-button)::before {
    color: var(--mate-icon-interactive-enabled);
}

vaadin-date-picker::part(overlay) {
    background-color: var(--mate-background-base);
    border-color: var(--mate-border-base);
}

vaadin-date-picker-year {

    &::part(year-number) {
        color: var(--mate-text-tertiary);
    }

    &[current]::part(year-number) {
        color: var(--mate-text-primary);
    }

    &::part(year-separator)::after {
        color: var(--mate-shades-contrast-40pct);
    }
}

vaadin-month-calendar {
    &::part(date) {
        color: var(--mate-text-body);
    }

    &::part(date):hover {
        background-color: var(--mate-interactive-hover);
        color: var(--mate-text-primary-contrast);
    }

    &::part(weekday) {
        color: var(--mate-text-tertiary);
    }

    &::part(selected) {
        background-color: var(--mate-interactive-selected);
        color: var(--mate-text-primary-contrast);
    }

    &::part(today) {
        color: var(--mate-text-primary);
    }

    /*
        Overwrite when today is selected
        so that they not overwrite each other
    */
    &::part(today selected) {
        color: var(--mate-text-primary-contrast);
    }

    &::part(month-header) {
        color: var(--mate-text-heading);
    }
}

vaadin-date-picker-year-scroller {
    mask-image: linear-gradient(180deg, rgba(0, 31, 66, 0.00) 0%, #001F42 17.84%, #001F42 83.1%, rgba(0, 31, 66, 0.00) 100%);
}

vaadin-date-picker-month-scroller {
    mask-image: linear-gradient(180deg, rgba(196, 196, 196, 0.00) 0%, #C4C4C4 17.84%, #C4C4C4 83.1%, rgba(196, 196, 196, 0.00) 100%);
}

vaadin-date-picker-year-scroller {
    background-color: var(--mate-components-date-picker-gradient-background-visible);
    border-radius: 0 3px 3px 0;
    background: var(--mate-background-highlighted, #282E32);
}

vaadin-date-picker-year-scroller::before {
    background-color: var(--mate-components-other-overlay-background);
}

vaadin-time-picker::part(toggle-button)::before {
    color: var(--mate-icon-interactive-enabled);
}

vaadin-date-picker[invalid]::part(toggle-button)::before,
vaadin-time-picker[invalid]::part(toggle-button)::before {
    color: var(--mate-icon-interactive-enabled);
}

vaadin-date-picker[disabled]::part(toggle-button)::before,
vaadin-time-picker[disabled]::part(toggle-button)::before {
    color: var(--mate-icon-interactive-disabled);
}

vaadin-time-picker::part(overlay) {
    background-color: var(--mate-background-base);
}

vaadin-time-picker-item:not([disabled]):not([focused]):hover {
    background-color: var(--mate-background-interactive-hover);
}

vaadin-time-picker-item:not([disabled])[selected] {
    background-color: var(--mate-background-interactive-selected);
}

vaadin-time-picker-item {
    background-color: var(--mate-background-interactive-enabled);
    color: var(--mate-text-body);

    &[selected]::part(checkmark)::before {
        color: var(--mate-text-primary);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-accordion-heading,
vaadin-details-summary,
mate-details-summary::part(header) {
	color: var(--mate-text-secondary);
}

vaadin-details[theme~="object-header"] > mate-details-summary::part(header) {
	color: var(--mate-text-heading);
}

vaadin-accordion-panel[disabled] vaadin-accordion-heading,
vaadin-details[disabled] vaadin-details-summary {
	color: var(--mate-text-disabled);
}

vaadin-accordion-heading::part(toggle)::after,
vaadin-details-summary::part(toggle)::after,
mate-details-summary::part(toggle)::after {
	color: var(--mate-icon-interactive-enabled);
}

vaadin-accordion-panel[disabled] vaadin-accordion-heading::part(toggle)::after,
vaadin-details[disabled] vaadin-details-summary::part(toggle)::after,
vaadin-details[disabled] mate-details-summary::part(toggle)::after {
	color: var(--mate-icon-interactive-disabled);
}

mate-details-summary::part(toggle-end) {
	color: var(--mate-text-primary);
}

vaadin-details[disabled] mate-details-summary::part(toggle-end) {
	color: var(--mate-text-disabled);
}

&:not([theme*="mate-mobile"]),
&:not([theme*="mate-mobile"]) {

	vaadin-accordion-panel:not(:last-of-type) {
		border-bottom-color: var(--mate-border-light);
	}
}

&[theme~="mate-mobile"],
&[theme~="mate-mobile"] {

	vaadin-accordion-panel {
		background-color: var(--mate-background-highlighted);

		&:not(:last-of-type) {
			border-bottom-color: var(--mate-background-base);
		}
	}
}

mate-details-summary > [slot="sub-title"] {
	color: var(--mate-text-secondary);
}

mate-details-summary > vaadin-button[slot="toggle"] > span[theme="icon"]::after {
	color: var(--mate-icon-interactive-enabled);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-dialog {

	--vaadin-overlay-backdrop-background: var(--mate-shades-shade-30pct);

	&::part(overlay) {
		background-color: var(--mate-background-base);
		color: var(--mate-text-body);
		border-color: var(--mate-border-base);
	}

	&::part(header) {
		border-bottom-color: var(--mate-border-light);
	}

	&::part(dialog-content) {
		background-color: var( --mate-background-base);
	}

	&::part(footer) {
		background-color: var(--mate-background-highlighted);
		border-top-color: var(--mate-border-light);
	}

    &::part(title) {
        color: var(--mate-text-heading);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/


vaadin-multi-select-combo-box-chip {
    background-color: var(--mate-components-other-multiselect-chip-background);

    &[slot="overflow"]::before,
    &[slot="overflow"]::after {
        border-color: var(--mate-components-other-multiselect-chip-background);
    }

    &::part(label) {
        color: var(--mate-text-body);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-facet {

	&::part(key) {
		color: var(--mate-text-secondary);
	}

	&::part(value) {
		color: var(--mate-text-body);
	}

	&[theme~="success"]::part(value) {
		color: var(--mate-text-success);
	}

	&[theme~="warning"]::part(value) {
		color: var(--mate-text-warning);
	}

	&[theme~="danger"]::part(value),
	&[theme~="error"]::part(value){
		color: var(--mate-text-danger);
	}

	> [default-key],
	> [default-value] {
		&::after {
			color: var(--mate-text-secondary);
		}
	}
}

mate-facet-list::part(default-title) {
	color: var(--mate-text-secondary);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-filter-panel {

	&::part(reset),
	&::part(search),
	&::part(toggle) {
		outline-color: var(--mate-interactive-focus);
	}

	&::part(toggle) {
		color: var(--mate-text-primary);
	}

    &::part(toggle):hover{
        border-color: var(--mate-interactive-hover);
        background-color: var(--mate-background-interactive-hover);
    }

    &::part(toggle):active {
        border-color: var(--mate-interactive-active);
        background-color: var(--mate-background-interactive-active);
    }

    &::part(reset) {
		color: var(--mate-text-primary);
		border-color: var(--mate-interactive-enabled);
	}

    &::part(reset):hover {
        border-color: var(--mate-interactive-hover);
        background-color: var(--mate-background-interactive-hover);
    }

    &::part(reset):active {
        border-color: var(--mate-interactive-active);
        background-color: var(--mate-background-interactive-active);
    }

    &::part(search) {
		color: var(--mate-text-primary-contrast);
		background-color: var(--mate-interactive-enabled);
	}

    &::part(search):hover {
        background-color: var(--mate-interactive-hover);
    }

    &::part(search):active {
        background-color: var(--mate-interactive-active);
    }
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-grid,
vaadin-grid-pro {

	--vaadin-grid-border-color: var(--mate-border-base);
	--vaadin-grid-row-background-color: var(--mate-background-interactive-enabled);
	--vaadin-grid-row-selected-background-color: var(--mate-components-grid-background-selected);

	background-color: var(--mate-background-base);

	&::part(focused-cell) {
		outline-color: var(--mate-interactive-focus);
        outline-style: solid;
	}

	&::part(header-cell) {
		color: var(--mate-text-heading);
	}

	&::part(cell):hover:not(:active) {
		--vaadin-grid-cell-background-color: var(--mate-components-grid-background-hover);
	}

	&::part(cell):active {
		--vaadin-grid-cell-background-color: var(--mate-background-highlighted);
	}

	&::part(body-cell) {
		color: var(--mate-text-body);
	}

	&::part(details-cell) {
		--vaadin-grid-cell-background-color: var(--mate-background-highlighted);
	}

	&::part(highlighted-cell) {
		--vaadin-grid-cell-background-color: var(--mate-signal-info-light);
	}

	&::part(error-cell) {
		--vaadin-grid-cell-background-color: var(--mate-components-grid-background-danger) !important;
	}

	&::part(edited-cell) {
		--vaadin-grid-cell-background-color: var(--mate-components-grid-background-edited) !important;
	}

	&::part(disabled-row) {
		color: var(--mate-text-disabled);
	}

	&::part(error-icon)::after {
		color: var(--mate-icon-danger);
	}

	&::part(info-icon)::after,
	&::part(editable-icon)::after {
		color: var(--mate-icon-neutral);
	}
}

vaadin-grid-pro {
	[theme~="grid-pro-editor"] {
		&::part(input-field) {
			background-color: transparent;
		}
	}
}

vaadin-grid::part(details-collapsed-icon)::after,
vaadin-grid-pro::part(details-collapsed-icon)::after,
vaadin-grid::part(details-expanded-icon)::after,
vaadin-grid-pro::part(details-expanded-icon)::after,
vaadin-grid-tree-toggle::part(toggle)::before {
	color: var(--mate-icon-interactive-enabled);
}

vaadin-grid-sorter[direction] {
	color: var(--mate-text-heading);
}

vaadin-grid-sorter::part(indicators)::before  {
	color: var(--mate-icon-interactive-enabled);
}

vaadin-grid-sorter[direction]::part(indicators)::before {
	color: var(--mate-icon-interactive-enabled);
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-grid-pagination {

    border-top-color: var(--mate-border-base);

    &::part(first)::after,
    &::part(previous)::after,
    &::part(next)::after,
    &::part(last)::after {
        color: var(--mate-icon-interactive-enabled);
    }
}

mate-grid-reorder {
    &::part(reorder-button)  {
        color: var(--mate-text-primary);
    }

    &::part(disabled-reorder-button)  {
        color: var(--mate-text-disabled);
    }
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-icon,
span[theme~="icon"] {

	&[theme~="info"] {
		color: var(--mate-icon-info);
	}

	&[theme~="success"] {
		color: var(--mate-icon-success);
	}

	&[theme~="warning"] {
		color: var(--mate-icon-warning);
	}

	&[theme~="error"] {
		color: var(--mate-icon-danger);
	}

	&[has-notification]::after {
		color: var(--mate-text-danger-contrast);
		background-color: var(--mate-signal-danger);
	}
}

mate-icon {
    color: var(--mate-icon-interactive-enabled);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-big-decimal-field,
vaadin-custom-field,
vaadin-checkbox-group,
vaadin-radio-group,
vaadin-password-field,
vaadin-email-field,
vaadin-text-area,
vaadin-number-field,
vaadin-combo-box,
vaadin-multi-select-combo-box,
vaadin-select,
vaadin-date-picker,
vaadin-time-picker,
vaadin-date-time-picker,
vaadin-text-field {

	> input,
	> textarea {

		&::placeholder {
			color: var(--mate-text-tertiary) !important;
		}
	}

	&::part(input-field) {
		color: var(--mate-text-body);
		border-color: var(--mate-shades-contrast-50pct);
		background-color: var(--mate-background-base);
	}

	&::part(clear-button),
	&::part(toggle-button),
	vaadin-password-field-button,
	&::part(decrease-button),
	&::part(increase-button) {
		color: var(--mate-icon-interactive-enabled);
	}

	&[disabled] {
		&::part(input-field) {
			color: var(--mate-text-disabled);
			border-color: var(--mate-components-field-border-disabled);
			background-color: var(--mate-components-field-background-disabled);
		}

		vaadin-select-value-button vaadin-select-item {
			color: var(--mate-text-disabled);
		}

		&::part(clear-button),
		&::part(toggle-button),
		vaadin-password-field-button,
		&::part(decrease-button),
		&::part(increase-button) {
			color: var(--mate-icon-interactive-disabled);
		}
	}

	&[readonly]::part(input-field) {
		border-color: var(--mate-shades-contrast-50pct);
	}

	&:hover:not([disabled]):not([readonly])::part(input-field) {
		border-color: var(--mate-shades-contrast-90pct);
	}

	&[invalid]::part(input-field) {
		background-color: var(--mate-signal-danger-light);
		border-color: var(--mate-signal-danger);
	}

	&[invalid]:hover:not([disabled]):not([readonly])::part(input-field) {
		border-color: var(--mate-interactive-danger-hover);
	}

	&::part(error-message) {
		color: var(--mate-text-danger);
	}

	div[slot~="error-message"]::before {
		color: var(--mate-icon-danger);
	}

	&::part(helper-text) {
		color: var(--mate-text-tertiary);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-dialog::part(overlay),
vaadin-custom-field::part(input-field),
vaadin-checkbox-group::part(input-field),
vaadin-radio-group::part(input-field),
vaadin-checkbox::part(checkbox),
vaadin-radio-button::part(radio),
vaadin-password-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-number-field::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-multi-select-combo-box::part(input-field),
vaadin-select::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-date-time-picker::part(input-field),
vaadin-text-field::part(input-field),
vaadin-tab,
vaadin-button,
vaadin-menu-bar-button,
vaadin-upload-file:focus-visible,
vaadin-upload-file::part(start-button):focus-visible,
vaadin-upload-file::part(retry-button):focus-visible,
vaadin-upload-file::part(remove-button):focus-visible {
	outline-color: var(--mate-interactive-focus);
}

::selection {
	background-color: var(--mate-interactive-selected);
	color: var(--mate-text-primary-contrast);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/


vaadin-custom-field,
vaadin-checkbox-group,
vaadin-radio-group,
vaadin-password-field,
vaadin-email-field,
vaadin-text-area,
vaadin-number-field,
vaadin-combo-box,
vaadin-multi-select-combo-box,
vaadin-select,
vaadin-date-picker,
vaadin-time-picker,
vaadin-date-time-picker,
vaadin-text-field,
vaadin-radio-button,
vaadin-checkbox {

	> label,
	&::part(label) {
		color: var(--mate-text-secondary);
	}

	&:hover > label,
	&:hover::part(label) {
		color: var(--mate-text-body);
	}
	
	&[focused] > label,
	&[focused]::part(label) {
		color: var(--mate-text-primary);
	}

	&[disabled] > label,
	&[disabled]::part(label) {
		color: var(--mate-text-disabled);
	}

	&[invalid] > label,
	&[invalid]::part(label) {
		color: var(--mate-text-danger);
	}

	&::part(required-indicator)::after {
		color: var(--mate-signal-info);
	}
}

:is(vaadin-checkbox,vaadin-radio-button) > label {
	color: var(--mate-text-secondary);
}

vaadin-checkbox,
vaadin-radio-button {
	&[focused] > label,
	&[focused]::part(label) {
		color: var(--mate-text-secondary);
	}

	&:hover > label,
	&:hover::part(label) {
		color: var(--mate-text-secondary);
	}
}

/*
	Invalid is the same as the default
*/

:is(vaadin-checkbox,vaadin-radio-button)[disabled] > label {
	color: var(--mate-text-disabled);
}

/*
	Because of vaadin odd beheavior, we need to reset readonly
*/

:is(vaadin-checkbox,vaadin-radio-button)[readonly] > label,
:is(vaadin-checkbox-group,vaadin-radio-group)[readonly] > :is(vaadin-checkbox,vaadin-radio-button) > label {
	color: var(--mate-text-secondary) ;
	opacity: unset;
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-menu-bar-list-box,
vaadin-context-menu-list-box,
vaadin-select-list-box,
vaadin-multi-select-combo-box-scroller,
vaadin-combo-box-scroller {
    background-color: var(--mate-background-base);
    border-color: var(--mate-border-base);
}

:not(vaadin-menu-bar-button) > vaadin-menu-bar-item,
vaadin-context-menu-item,
vaadin-select-item,
vaadin-multi-select-combo-box-item,
vaadin-combo-box-item {
    color: var(--mate-text-body);

    &[selected]::part(checkmark)::before {
        color: var(--mate-text-primary);
    }

    &:not([disabled]):not([mate-disabled]):not([focused]):hover {
        background-color: var(--mate-background-interactive-hover);
    }

    &:not([disabled]):not([mate-disabled]):active {
        background-color: var(--mate-background-interactive-active);
    }

    &:not([disabled]):not([mate-disabled])[selected] {
        background-color: var(--mate-background-interactive-selected);
    }

    &[mate-disabled],
    &[disabled] {
        color: var(--mate-text-disabled);
        opacity: 1;
    }

    &[tabindex]::before {
        color: var(--mate-icon-interactive-enabled);
    }

    &[theme~="has-hint"] > .hint {
        color: var(--mate-text-neutral);
    }
}

vaadin-menu-bar-overlay::part(overlay),
vaadin-context-menu-overlay::part(overlay),
vaadin-select-overlay::part(overlay),
vaadin-multi-select-combo-box-overlay::part(overlay),
vaadin-combo-box-overlay::part(overlay) {
    background-color: var(--mate-background-base);
}

vaadin-context-menu-item[aria-haspopup='true']::after,
:not(vaadin-menu-bar-button) > vaadin-menu-bar-item[aria-haspopup='true']::after {
    color: var(--mate-icon-interactive-enabled);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-lookup-field {

    --_mate-lookup-button-border-color: var(--mate-shades-contrast-50pct);

    > vaadin-button[slot="search-button-slot"] {
        color: var(--mate-icon-interactive-enabled);
        border-color: var(--_mate-lookup-button-border-color) !important;
        background-color: var(--mate-background-base);
    }

    &:not([disabled]):not([readonly]) > vaadin-button[slot="search-button-slot"]:hover {
        --_mate-lookup-button-border-color: var(--mate-shades-contrast-90pct);
    }

    vaadin-text-field > vaadin-icon[slot="suffix"]::before {
        color: var(--mate-icon-interactive-enabled);

    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-message-item::part(toggle) {
	color: var(--mate-text-primary);
}

.mate-message-state-indicator {
	&.unread {
		background-color: var(--mate-icon-info);
	}
}/*
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-month-picker-calendar {
    &::part(month) {

    }

    &::part(month):hover {
        color: var(--mate-text-primary-contrast);
        background-color: var(--mate-interactive-hover);
    }

    &::part(selected-month) {
        color: var(--mate-text-primary-contrast);
        background-color: var(--mate-interactive-selected);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-notification-card::part(overlay) {
    border-top-color: var(--mate-border-base);
    border-inline-start-color: var(--mate-border-base);
    border-inline-end-color: var(--mate-border-base);
    background-color: var(--mate-background-base);
    color: var(--mate-text-body);
    box-shadow: var(--mate-style-shadow-l);
}

vaadin-notification-card:not([theme*="success"]):not([theme*="warning"]):not([theme*="danger"]):not([theme*="error"])::part(overlay) {
    border-bottom-color: var(--mate-signal-info);
}

vaadin-notification-card[theme~="success"]::part(overlay) {
    border-bottom-color: var(--mate-signal-success);
}

vaadin-notification-card[theme~="warning"]::part(overlay) {
    border-bottom-color: var(--mate-signal-warning);
}

vaadin-notification-card[theme~="danger"]::part(overlay),
vaadin-notification-card[theme~="error"]::part(overlay){
    border-bottom-color: var(--mate-signal-danger);
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-notification-card > mate-notification-bar {
	color: var(--mate-text-body);
	background-color: var(--mate-background-base);

    &::part(close) {
        color: var(--mate-icon-interactive-enabled);
    }
}

vaadin-notification-card:not([theme*="success"]):not([theme*="warning"]):not([theme*="danger"]):not([theme*="error"]) mate-notification-bar::part(state)  {
	color: var(--mate-icon-info);
}

vaadin-notification-card[theme~="success"] mate-notification-bar::part(state) {
	color: var(--mate-icon-success);
}

vaadin-notification-card[theme~="warning"] mate-notification-bar::part(state)  {
	color: var(--mate-icon-warning);
}

vaadin-notification-card[theme~="danger"] mate-notification-bar::part(state),
vaadin-notification-card[theme~="error"] mate-notification-bar::part(state) {
	color: var(--mate-icon-danger);
}

:not(vaadin-notification-card) > mate-notification-bar {
	color: var(--mate-text-body);

	&:not([theme*="warning"]):not([theme*="danger"]):not([theme*="error"]) {
		background-color: var(--mate-signal-info-light);
		border-color: var(--mate-signal-info);

		&::part(state) {
			color: var(--mate-icon-info);
		}
	}

	&[theme~="warning"] {
		background-color: var(--mate-signal-warning-light);
		border-color: var(--mate-signal-warning);

		&::part(state) {
			color: var(--mate-icon-warning);
		}
	}

	&[theme~="danger"],
	&[theme~="error"] {
		background-color: var(--mate-signal-danger-light);
		border-color: var(--mate-signal-danger);

		&::part(state) {
			color: var(--mate-icon-danger);
		}
	}

	&::part(state),
	&::part(close)  {
		color: var(--mate-icon-interactive-enabled);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-pdf-viewer {
    --pdf-viewer-background-color: var(--mate-background-base);
    --pdf-viewer-container-background-color: var(--mate-background-highlighted);
    --pdf-viewer-border-color: var(--mate-border-base);

    &::part(viewer-container):focus {
        outline-color: var(--mate-interactive-focus);
    }

    &::part(toolbar) {
        background-color: var(--mate-background-base);
    }

    &::part(toolbar-pages),
    &::part(toolbar-text) {
        color: var(--mate-text-secondary);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-progress-bar::part(bar) {
	background-color: var(--mate-shades-contrast-10pct);
	border: none;
}

vaadin-progress-bar::part(value) {
	background-color: var(--mate-signal-primary);
}

span[theme~="spinner"]::before {
	background-color: var(--mate-background-base);
	border-color: var(--mate-shades-contrast-10pct);
	border-top-color: var(--mate-signal-primary);
	border-inline-start-color: var(--mate-signal-primary);
	border-inline-end-color: var(--mate-signal-primary);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-popover {

    &::part(overlay) {
        color: unset;
        background: var(--mate-background-base);
    }

    &::part(overlay):focus-visible {
        outline-color: var(--mate-interactive-focus);
    }
}

vaadin-popover:not([theme*="hidden-breadcrumbs"]) {

    &[theme~="arrow"][position^="bottom"][top-aligned]::part(arrow),
    &[theme~="arrow"][position^="top"][top-aligned]::part(arrow) {
        border-bottom-color: var(--mate-shades-base);
    }

    &[theme~="arrow"][position^="start"][start-aligned]::part(arrow),
    &[theme~="arrow"][position^="end"][start-aligned]::part(arrow) {
        border-inline-end-color: var(--mate-shades-base);
        filter: drop-shadow(-1px 0px 0px var(--mate-border-base));
    }

    &[theme~="arrow"][position^="start"]::part(arrow),
    &[theme~="arrow"][position^="end"]::part(arrow) {
        border-top-color: transparent;
        border-bottom-color: transparent;
        filter: drop-shadow(1px 0px 0px var(--mate-border-base));
    }

    &::part(overlay) {
        border-color: var(--mate-border-base);
    }

}

mate-popover-content {

    &::part(header) {
        border-bottom: 1px solid var(--mate-border-base);
    }

    &::part(title) {
        color: var(--mate-text-heading);
    }

    &::part(close) {
        color: var(--mate-icon-interactive-enabled);
    }

    &::part(footer) {
        border-top-color: var(--mate-border-base);
        background-color: var(--mate-background-highlighted);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

/*
	Label: check label.css
*/


/*
	Checkbox and radio-button styles
*/

/* Default */

vaadin-checkbox,vaadin-radio-button {
    --check-radio-color: var(--mate-background-base);
    --check-radio-background-color: var(--mate-background-interactive-enabled);
    --check-radio-border-color: var(--mate-components-field-border-enabled);

    --vaadin-checkbox-checkmark-color: var(--check-radio-color);
    --vaadin-checkbox-background: var(--check-radio-background-color);
    --vaadin-checkbox-border-color: var(--check-radio-border-color);

    --vaadin-radio-button-dot-color: var(--check-radio-color);
    --vaadin-radio-button-background: var(--check-radio-background-color);
    --vaadin-radio-button-border-color: var(--check-radio-border-color);

    &:is([checked],[indeterminate]) {
        --check-radio-background-color: var(--mate-interactive-selected);
        --check-radio-border-color: var(--mate-interactive-selected);
    }
}

/* Hovered not active */

:is(vaadin-checkbox,vaadin-radio-button):hover:not([active]) {
    --check-radio-background-color: var(--mate-background-interactive-hover);
    --check-radio-border-color: var(--mate-components-field-border-hover);

    &:is([checked],[indeterminate]) {
        --check-radio-background-color: var(--mate-interactive-hover);
        --check-radio-border-color: var(--mate-interactive-hover);
    }
}

/* Active */

:is(vaadin-checkbox,vaadin-radio-button)[active] {
    --check-radio-background-color: var(--mate-background-interactive-active);
    --check-radio-border-color: var(--mate-interactive-active);

    &:is([checked],[indeterminate]) {
        --check-radio-background-color: var(--mate-interactive-active);
        --check-radio-border-color: var(--mate-interactive-active);
    }
}


/* Invalid */

:is(vaadin-checkbox,vaadin-radio-button)[invalid],
:is(vaadin-checkbox-group,vaadin-radio-group)[invalid] > :is(vaadin-checkbox,vaadin-radio-button) {
    /* Default background */
    --check-radio-border-color: var(--mate-interactive-danger-active);

    &:is([checked],[indeterminate]) {
        --check-radio-background-color: var(--mate-interactive-danger-selected);
        --check-radio-border-color: var(--mate-interactive-danger-selected);
    }
}

/* Invalid, hovered, not active */

:is(vaadin-checkbox,vaadin-radio-button)[invalid]:hover:not([active]),
:is(vaadin-checkbox-group,vaadin-radio-group)[invalid] > :is(vaadin-checkbox,vaadin-radio-button):hover:not([active]) {
    /* Default background */
    --check-radio-border-color: var(--mate-interactive-danger-active);

    &:is([checked],[indeterminate]) {
        --check-radio-background-color: var(--mate-interactive-danger-hover);
        --check-radio-border-color: var(--mate-interactive-danger-hover);
    }
}

/* Invalid, active */

:is(vaadin-checkbox,vaadin-radio-button)[invalid][active],
:is(vaadin-checkbox-group,vaadin-radio-group)[invalid] > :is(vaadin-checkbox,vaadin-radio-button)[active] {
    --check-radio-background-color: var(--mate-background-danger-active);
    --check-radio-border-color: var(--mate-interactive-danger-active);

    &:is([checked],[indeterminate]) {
        --check-radio-background-color: var(--mate-interactive-danger-active);
        --check-radio-border-color: var(--mate-interactive-danger-active);
    }
}


/* Disabled */

:is(vaadin-checkbox,vaadin-radio-button)[disabled],
:is(vaadin-checkbox,vaadin-radio-button)[disabled][active],
:is(vaadin-checkbox,vaadin-radio-button)[disabled]:hover:not([active]) {
    --check-radio-background-color: var(--mate-components-field-background-disabled);
    --check-radio-border-color: var(--mate-components-field-border-disabled);

    &:is([checked],[indeterminate]) {
        --check-radio-color: var(--mate-icon-interactive-disabled);
    }
}


/* Readonly */

:is(vaadin-checkbox,vaadin-radio-button)[readonly],
:is(vaadin-checkbox-group,vaadin-radio-group)[readonly] > :is(vaadin-checkbox,vaadin-radio-button),
:is(vaadin-checkbox,vaadin-radio-button)[readonly][active],
:is(vaadin-checkbox-group,vaadin-radio-group)[readonly] > :is(vaadin-checkbox,vaadin-radio-button)[active],
:is(vaadin-checkbox,vaadin-radio-button)[readonly],
:is(vaadin-checkbox-group,vaadin-radio-group)[readonly] > :is(vaadin-checkbox,vaadin-radio-button):hover:not([active]) {
    --check-radio-background-color: var(--mate-components-field-background-disabled);
    --check-radio-border-color: var(--mate-components-field-border-disabled);

    &:is([checked],[indeterminate]) {
        --check-radio-color: var(--mate-icon-interactive-disabled);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-radio-group[theme~="segmented"],
vaadin-checkbox-group[theme~="segmented"] {

    > vaadin-radio-button,
    > vaadin-checkbox {

        label {
            color: var(--mate-text-primary);
        }

        border-color: var(--mate-interactive-enabled);

        span[theme~="icon"] {
            color: var(--mate-text-primary);

            &[theme~="error"] {
                color: var(--mate-icon-danger);
            }
        }

        &[focused] {
            outline-color: var(--mate-interactive-focus);
        }

        &[disabled] {
            color: var(--mate-text-disabled);

            &:first-of-type {
                border-inline-start-color: var(--mate-interactive-disabled);
            }

            &:last-of-type {
                border-inline-end-color: var(--mate-interactive-disabled);
            }
        }

        &:not([disabled]) {
            color: var(--mate-text-primary);

            &[checked] {
                background-color: var(--mate-background-interactive-selected);
            }

            &:hover:not([checked]) {
                background-color: var(--mate-background-interactive-hover);
            }
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-side-nav-item {

	&::part(toggle-button)::before {
		color: var(--mate-icon-neutral);
	}

	&:hover:not(:active):not([current]):not(:has(vaadin-side-nav-item:hover))::part(content) {
		background-color: var(--mate-background-interactive-hover);
	}

	&:active:not(:has(vaadin-side-nav-item:active))::part(content) {
		background-color: var(--mate-background-interactive-active);
	}

	&::part(link) {
		color: var(--mate-text-body);
	}

	&[current]::part(link) {
		color: var(--mate-text-primary);
	}

	&[current]::part(content) {
		background-color: var(--mate-background-interactive-selected);
		color: var(--mate-text-primary);
	}

	&::part(content) {
		color: var(--mate-text-body);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-split-layout,
.mate-split-layout {

	&::part(splitter) {
		--vaadin-split-layout-handle-background: var(--mate-border-base);
		--vaadin-split-layout-splitter-background: var(--mate-border-base);
	}

	&::part(splitter):hover:not(:active) {
		--vaadin-split-layout-handle-background: var(--mate-shades-contrast-90pct);
		--vaadin-split-layout-splitter-background: var(--mate-shades-contrast-90pct);
	}

	&::part(splitter):active {
		--vaadin-split-layout-handle-background: var(--mate-signal-primary);
		--vaadin-split-layout-splitter-background: var(--mate-signal-primary);
	}
}

mate-split-layout-right {

	&::part(tabs) {
		background-color: var(--mate-background-highlighted);
	}

	> vaadin-tabs[theme~="side-panel-tabs"] {

		> vaadin-tab {

			border-color: transparent;

			span[theme~="icon"] {
				color: var(--mate-icon-interactive-enabled);
			}

			&:focus {
				outline-color: var(--mate-interactive-focus);
			}

			&:not([disabled]):not([active]):not([this-ist-more-important]):hover {
				background-color: var(--mate-background-interactive-hover);
				border-color: var(--mate-border-base);
				color: var(--mate-icon-interactive-hover);

				span[theme~="icon"] {
					color: var(--mate-icon-interactive-hover);
				}
			}

			&:not([disabled]):not(:hover):not([active]):not([this-ist-more-important])[selected] {
				background-color: var(--mate-background-interactive-selected);
				border-color: var(--mate-border-base);
				color: var(--mate-icon-interactive-selected);

				span[theme~="icon"] {
					color: var(--mate-icon-interactive-selected);
				}
			}

			&[hint]::after {
				background-color: var(--mate-signal-info);
			}
		}
	}
}

mate-split-layout-header {
	border-bottom-color: var(--mate-border-light);

	&::part(close) {
		color: var(--mate-icon-interactive-enabled);
	}
}

vaadin-horizontal-layout[theme~="split-layout-footer"] {
	border-top-color: var(--mate-border-light);
	background-color: var(--mate-background-highlighted);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/
vaadin-tabs {

	&::part(forward-button),
	&::part(back-button) {
        background-color: unset;
	}

	&::part(forward-button)::after,
	&::part(back-button)::after {
		color: var(--mate-icon-interactive-enabled);
	}

	> vaadin-tab {
		color: var(--mate-text-secondary);
	}

	> vaadin-tab[disabled] {
		color: var(--mate-text-disabled);
	}

	&:not([theme*="stepper"]):not([theme*="anchor"]):not([theme*="application-bar"]):not([theme*="side-panel-tabs"]) {

		> vaadin-tab:not([disabled])[selected] span[theme~="icon"] {
			color: var(--mate-text-primary-contrast);
		}

		> vaadin-tab:not([disabled]):not(:hover):not([active])[selected] {
			color: var(--mate-text-primary-contrast);
			background-color: var(--mate-interactive-selected);
		}

		> vaadin-tab:not([disabled])[active] {
			color: var(--mate-text-primary-contrast);
			background-color: var(--mate-interactive-active);
		}

		> vaadin-tab:not([disabled]):not([active]):hover {
			color: var(--mate-text-primary-contrast);
			background-color: var(--mate-interactive-hover);
		}

		> vaadin-tab:not([disabled]):hover span[theme~="icon"] {
			color: var(--mate-text-primary-contrast);
		}

		> vaadin-tab[disabled]{
			background-color: var(--mate-shades-contrast-5pct);
		}
	}

    &[theme~="anchor"],
    &[theme~="stepper"] {
        &::after {
            color: var(--mate-border-base);
        }

        > vaadin-tab:not([disabled])[selected] {
            background-color: inherit;
        }
    }

    &:not([orientation='vertical']):not([theme*="application-bar"]):not([theme*="side-panel-tabs"]) {
        &[overflow~='start']::part(tabs) {
            mask-image: linear-gradient(90deg, transparent 0%, black 128px);
        }

        &[overflow~='end']::part(tabs) {
            mask-image: linear-gradient(90deg, black calc(100% - 128px), transparent 100%);
        }

        &[overflow~='start'][overflow~='end']::part(tabs) {
            mask-image: linear-gradient(90deg, transparent 0, black 128px, black calc(100% - 128px), transparent 100%);
        }
    }



    &[theme~="anchor"] {
        > vaadin-tab {
            &:not([selected]):not([active]):not([disabled]):not(:hover) {
                color: var(--mate-text-secondary);
            }

            &:hover:not([active]) {
                color: var(--mate-text-body);
            }

            &[active] {
                color: var(--mate-text-body);
            }

            &[selected]:not(:active):not(:hover) {
                color: var(--mate-text-primary);
            }

            &[selected]::before {
                color: var(--mate-interactive-selected);
            }
        }
    }

    &[theme~="stepper"] {
        > vaadin-tab {
            &:not([selected]):not([active]):not([disabled]):not([invalid]):not(:hover) {
                color: var(--mate-text-secondary);
                &::after {
                    color: var(--mate-icon-not-interactive);
                }
            }

            &:hover:not([active]):not([invalid]),
            &:hover:not([active]):not([invalid])::after {
                color: var(--mate-text-body);
            }

            &[active]:not([invalid]) {
                color: var(--mate-text-body);
            }

            &[selected]:not([active]):not([invalid]):not(:hover) {
                color: var(--mate-text-primary);
                &::before {
                    color: var(--mate-interactive-selected);
                }
            }

            &[invalid]:not([disabled]) {
                color: var(--mate-text-danger);

                &::after {
                    color: var(--mate-text-danger);
                }

                &:hover:not([active])::before {
                    color: var(--mate-interactive-danger-hover);
                }

                &[active]::before {
                    color: var(--mate-interactive-danger-active);
                }

                &[selected]:not(:active):not(:hover)::before {
                    color: var(--mate-interactive-danger-selected);
                }
            }
        }
    }

	&[theme~="application-bar"] {
		> vaadin-tab {
			background-color: unset;
			color: var(--mate-icon-interactive-enabled);

			&:hover:not([active]) {
				background-color: var(--mate-background-interactive-hover);
				color: var(--mate-icon-interactive-hover);
			}

			&[active] {
				background-color: var(--mate-background-interactive-active);
				color: var(--mate-icon-interactive-active);
			}

			&[selected] {
				background-color: var(--mate-background-interactive-selected);
				color: var(--mate-icon-interactive-selected);
			}

			> * {
				color: inherit;
			}
		}
	}

	&[theme~="side-panel-tabs"] {
		> vaadin-tab {
			background-color: unset;
			border-color: var(--mate-border-base);
			border-inline-end-color: transparent;
			color: var(--mate-icon-interactive-enabled);

			&:not(:hover):not([selected]) {
				border-top-color: transparent;
				border-inline-start-color: transparent;
				border-bottom-color: transparent;
			}

			&:hover:not([active]) {
				background-color: var(--mate-background-interactive-hover);
				color: var(--mate-icon-interactive-hover);
			}

			&[active] {
				background-color: var(--mate-background-interactive-active);
				color: var(--mate-icon-interactive-active);
			}

			&[selected] {
				background-color: var(--mate-background-interactive-selected);
				color: var(--mate-icon-interactive-selected);
			}

			&[hint]::after {
				background-color: var(--mate-dark-components-other-side-panel-badge);
			}

			> * {
				color: inherit;
			}
		}
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-toolbar {

	&[theme~="error"],
	&[theme~="danger"] {

		&::part(status) {
			color: var(--mate-text-danger);
		}

		&::part(status-icon)::after {
			color: var(--mate-icon-danger);
		}
	}

	&::part(status-icon)::after {
		color: var(--mate-icon-info);
	}

	&::part(loading-indicator)::after {
		background-color: var(--mate-background-base);
		border-color: var(--mate-shades-contrast-10pct);
		border-top-color: var(--mate-signal-primary);
		border-inline-start-color: var(--mate-signal-primary);
		border-inline-end-color: var(--mate-signal-primary);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/


vaadin-tooltip::part(content) {
    background-color: var(--mate-background-base);
    border-color: var(--mate-border-base);
    color: var(--mate-text-body);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body {
	background-color: var(--mate-background-base);
	color: var(--mate-text-body);
}

.mate-link {
	&:not(:hover):not(:active):not(:visited):not(.visited) {
		color: var(--mate-text-primary);
	}

	&:visited,
	&.visited {
		text-decoration: underline;

		&:not(:hover):not(:active) {
			color: var(--mate-text-primary);
		}
	}

	&:active {
		color: var(--mate-text-body);
	}

	&:hover:not(:active) {
		color: var(--mate-text-body);
	}
}

hr {
	border-top-color: var(--mate-border-base);
}

h1,
h2,
h3,
h4,
h5,
h6,
.mate-heading-xs,
.mate-heading-s,
.mate-heading-m,
.mate-heading-l,
.mate-heading-xl,
.mate-heading-xxl {
	color: var(--mate-text-heading);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-custom-field:has(vaadin-upload)::part(input-fields) {
	border-color: var(--mate-border-base);
}

vaadin-upload {
    border-style: none;

    &::part(primary-buttons),
    &::part(drop-label) {
        color: var(--mate-text-secondary);
    }
}

vaadin-upload-file {
    &:not([focused]),
    &::part(name),
    &::part(status) {
        color: var(--mate-text-secondary);
    }
}

vaadin-upload-file[error]::part(error) {
	color: var(--mate-text-danger);
}

vaadin-upload-file::part(done-icon)::after {
	color: var(--mate-icon-success);
}

vaadin-upload-file::part(warning-icon)::after {
	color: var(--mate-icon-danger);
}

vaadin-upload-file::part(start-button)::after {
	color: var(--mate-signal-primary);
}

vaadin-upload-file::part(remove-button)::after,
vaadin-upload-file::part(retry-button)::after,
vaadin-upload-icon::after {
    color: var(--mate-icon-neutral);
}

vaadin-upload-file:hover {
    &::part(remove-button)::after,
    &::part(retry-button)::after {
        color: var(--mate-icon-interactive-hover);
    }
}

vaadin-upload-file:active {
    &::part(remove-button)::after,
    &::part(retry-button)::after {
        color: var(--mate-icon-interactive-active);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	span[theme~="badge"] {
		color: FieldText;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-button,
	vaadin-menu-bar-button {

		color: ButtonText;

		/* hide visible outline */
		&:not([focused]):not(:focus-visible) {
			outline: none;
		}

		&:not([theme*="icon"]) {

			&:not([theme*="primary"]):not([theme*="tertiary"]) {
				border-color: ButtonBorder;

				&:has(> vaadin-context-menu-item[mate-disabled]),
				&[mate-disabled],
				&[disabled] {
					color: GrayText;
					border-color: GrayText;
				}
			}

			&[theme~="primary"] {
				/* remove the background on the text node */
				forced-color-adjust: none;

				color: Canvas;
				border-color: ButtonBorder;
				background-color: ButtonBorder;

				&:has(> vaadin-context-menu-item[mate-disabled]),
				&[mate-disabled],
				&[disabled] {
					border-color: GrayText;
					background-color: GrayText;
				}
			}

			&[theme~="tertiary"] {
				border-color: Canvas;

				&:hover:not([disabled]):not([mate-disabled]):not(:has(> vaadin-context-menu-item[mate-disabled])) {
					border-color: ButtonBorder;
				}

				&:has(> vaadin-context-menu-item[mate-disabled]),
				&[mate-disabled],
				&[disabled] {
					color: GrayText;
				}
			}
		}

		mate-icon,
		span[theme~="icon"] {
			&::before {
				line-height: inherit;
			}
		}
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

    vaadin-dialog-overlay::part(overlay):focus {
        outline: 1px solid Highlight;
    }

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-accordion-heading,
	vaadin-details-summary {
		color: ButtonText;
	}

	vaadin-accordion-panel[disabled] vaadin-accordion-heading,
	vaadin-details[disabled] vaadin-details-summary {
		color: GrayText;
	}

	vaadin-accordion-heading::part(toggle)::after,
	vaadin-details-summary::part(toggle)::after {
		color: ButtonText;
	}

	vaadin-accordion-panel[disabled] vaadin-accordion-heading::part(toggle)::after,
	vaadin-details[disabled] vaadin-details-summary::part(toggle)::after {
		color: GrayText;
	}

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-dialog::part(overlay):focus {
		outline: 1px solid Highlight;
	}

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vcf-auto-select-combo-box,
	vaadin-select,
	vaadin-combo-box,
	vaadin-multi-select-combo-box {

		&[disabled]::part(toggle-button)::before {
			color: GrayText;
		}

		&[invalid]::part(toggle-button)::before,
		&::part(toggle-button)::before {
			color: FieldText;
		}
	}

	vaadin-multi-select-combo-box-chip::part(remove-button)::before {
		color: FieldText;
	}

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-grid::part(details-toggle-cell)::after,
	vaadin-grid-pro::part(details-toggleable-cell)::after,
	vaadin-grid-tree-toggle::part(toggle)::before {
		color: FieldText;
	}

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	mate-icon,
	span[theme~="icon"] {
		color: FieldText;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-big-decimal-field,
	vaadin-custom-field,
	vaadin-checkbox-group,
	vaadin-radio-group,
	vaadin-password-field,
	vaadin-email-field,
	vaadin-text-area,
	vaadin-number-field,
	vaadin-combo-box,
	vaadin-multi-select-combo-box,
	vaadin-select,
	vaadin-date-picker,
	vaadin-time-picker,
	vaadin-date-time-picker,
	vaadin-text-field {

		&:not([focused])::part(input-field) {
			outline: none;
		}

		&[disabled] {
			&::part(label){
				color: GrayText;
			}

			&::part(input-field) {
				border-color: GrayText;
				color: GrayText;
			}
		}
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	outline-color: Highlight;

	::selection {
		background-color: Highlight;
		color: HighlightText;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

    vaadin-menu-bar-list-box,
    vaadin-context-menu-list-box,
    vaadin-select-list-box,
    vaadin-multi-select-combo-box-scroller,
    vaadin-combo-box-scroller {
        background-color: white;
    }

    vaadin-menu-bar-overlay vaadin-menu-bar-item,
    vaadin-context-menu-item,
    vaadin-select-item,
    vaadin-multi-select-combo-box-item,
    vaadin-combo-box-item {

        &[selected]::part(checkmark)::before {
            color: FieldText;
        }
    }

    vaadin-menu-bar-overlay::part(overlay),
    vaadin-context-menu-overlay::part(overlay),
    vaadin-select-overlay::part(overlay),
    vaadin-multi-select-combo-box-overlay::part(overlay),
    vaadin-combo-box-overlay::part(overlay) {
        outline: 3px solid;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	mate-notification-bar {
		background-color: Canvas;
	}

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-progress-bar::part(value) {
		background-color: FieldText;
		border-radius: 0;
	}

	span[theme~="spinner"] {
		forced-color-adjust: none;
	}

	span[theme~="spinner"]::before {
		border-top-color: FieldText;
		border-inline-start-color: FieldText;
		border-inline-end-color: FieldText;
		border-bottom-color: Canvas;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-checkbox::part(checkbox)::before,
	vaadin-radio-button::part(radio)::before {
		opacity: 0 !important;
	}

	vaadin-radio-button:not([focused])::part(radio),
	vaadin-checkbox:not([focused])::part(checkbox) {
		outline: none;
	}

	vaadin-radio-button::part(radio)::after,
	vaadin-checkbox::part(checkbox)::after {
		outline: none;
	}

	vaadin-radio-button[focused]::part(radio),
	vaadin-checkbox[focused]::part(checkbox){
		outline-color: SelectedItem;
	}

	vaadin-radio-group[disabled] vaadin-radio-button,
	vaadin-checkbox-group[disabled] vaadin-checkbox,
	:not(vaadin-radio-group) > vaadin-radio-button[disabled],
	:not(vaadin-checkbox-group) > vaadin-checkbox[disabled] {
		> label {
			color: GrayText;
		}

		&::part(radio),
		&::part(checkbox) {
			border-color: GrayText;
		}

		&::part(radio)::after,
		&::part(checkbox)::after{
			color: GrayText;
		}
	}

	vaadin-radio-group[readonly] vaadin-radio-button::part(radio) {
		outline-color: transparent;
	}

	vaadin-radio-button[focused]::part(radio),
	vaadin-checkbox[focused]::part(checkbox) {
		outline-color: Highlight;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-split-layout,
	.mate-split-layout {

		&::part(splitter) {
			outline-color: ButtonText;
			--_mate-split-layout-toggler-color: ButtonText;
		}

		&::part(splitter):hover:not(:active) {
			background-color: ButtonText;
			--_mate-split-layout-toggler-color: ButtonText;
		}

		&::part(splitter):active {
			outline-color: Highlight;
			background-color: Highlight;
			--_mate-split-layout-toggler-color: Highlight;
		}

		&::part(handle) {
			background-color: var(--_mate-split-layout-toggler-color);
		}
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-tabs {
		> vaadin-tab {
			&[disabled] {
				color: GrayText;
			}
			&[selected] {
				color: Highlight;
			}
			&:hover {
				color: Highlight;
			}
		}
	}


	vaadin-tabs::part(forward-button)::after,
	vaadin-tabs::part(back-button)::after {
		color: ButtonText;
	}

	vaadin-tabs[theme~="stepper"] {
		border-bottom: 1px solid ButtonBorder;

		> vaadin-tab {
			border: none;

			&[selected] {
				color: Highlight;
			}

			&:hover {
				color: Highlight;
			}

			::after {
				color: ButtonText;
				&:hover {
					color: ButtonText;
				}
			}
		}

		> vaadin-tab:disabled {
			color: GrayText;
		}
	}

	vaadin-tabs[theme~="bottom"] {
		> vaadin-tab[selected]:not([disabled]) {
			border-width: 0;
		}

		> vaadin-tab[selected] {
			color: Highlight;

			&:hover {
				color: Highlight;
			}
		}
	}

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	color: FieldText;
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

body[theme~="mate-high-contrast"],
.app-root[theme~="mate-high-contrast"] {

	vaadin-upload-icon::after {
		color: Fieldtext;
	}

	vaadin-upload-file::part(remove-button)::after {
		color: FieldText;
	}

	vaadin-upload-file::part(retry-button)::after {
		color: FieldText;
	}

	vaadin-upload-file::part(warning-icon)::after {
		color: FieldText;
	}

	vaadin-upload-file::part(done-icon)::after {
		color: FieldText;
	}


	vaadin-upload-file:focus-visible,
	vaadin-upload-file::part(start-button):focus-visible,
	vaadin-upload-file::part(retry-button):focus-visible,
	vaadin-upload-file::part(remove-button):focus-visible {
		outline: 1px solid Highlight;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-app-layout {

	--_mate-app-layout-application-bar-width: calc(var(--mate-icon-sizing-md) + 2 * var(--mate-spacing-xs) + 2 * var(--mate-spacing-xs));
	--_mate-app-layout-splitter-left: 16rem;
	--_mate-app-layout-splitter-width: var(--mate-border-width-sm);
	--_vaadin-app-layout-drawer-width: calc(var(--_mate-app-layout-splitter-left) - 2 * var(--mate-spacing-xs));

	--vaadin-app-layout-drawer-offset-left: 0;

	&[drawer-opened]:not([overlay]) {
		--vaadin-app-layout-drawer-offset-left: calc(var(--_mate-app-layout-splitter-left) + var(--_mate-app-layout-splitter-width));
	}

	&[has-application-bar] {
		--vaadin-app-layout-drawer-offset-left: var(--_mate-app-layout-application-bar-width);
	}

	&::part(drawer) {
		width: var(--_mate-app-layout-splitter-left);
	}

	&[has-application-bar]:not([overlay])::part(drawer) {
		margin-inline-start: var(--_mate-app-layout-application-bar-width);
		width: calc(var(--_mate-app-layout-splitter-left) - var(--_mate-app-layout-application-bar-width));
	}

	&::part(application-bar) {
		top: var(--vaadin-app-layout-navbar-offset-top);
		bottom: 0;
		width: var(--_mate-app-layout-application-bar-width);
		border-inline-end-width: var(--mate-border-width-sm);
	}

	&::part(navbar) {
		gap: var(--mate-spacing-md);
        padding: var(--mate-spacing-sm) var(--mate-spacing-padding);
		display: flex;
		align-items: center;
	}

	&::part(drawer) {
		gap: var(--mate-spacing-margin);
		padding: var(--mate-spacing-xs);
	}

	&::part(drawer-bottom) {
		gap: var(--mate-spacing-xs);
	}

	&::part(splitter) {
		left: var(--_mate-app-layout-splitter-left);
		top: var(--vaadin-app-layout-navbar-offset-top);
		bottom: 0;
		width: var(--_mate-app-layout-splitter-width);
	}

	&[overlay]::part(splitter) {
		top: 0;
	}

	&::part(handle) {
		border-radius: var(--mate-corner-radius-sm);
	}

	&::part(handle) {
		top: calc(50% - var(--mate-sizing-md-lg) / 2);
		left: -1px;
		width: 3px;
		height: var(--mate-sizing-md-lg);
	}

	&::part(close-drawer),
	&::part(open-drawer),
	&::part(toggle-drawer),
	&::part(close-drawer)::after,
	&::part(open-drawer)::after,
	&::part(toggle-drawer)::after {
		width: var(--mate-icon-sizing-md);
		height: var(--mate-icon-sizing-md);
	}

	&::part(close-drawer)::after,
	&::part(open-drawer)::after,
	&::part(toggle-drawer)::after {
		font-family: var(--mate-typography-font-family-icon);
		font-size: var(--mate-icon-sizing-md);
		font-weight: var(--mate-typography-font-weight-regular);
	}

	&::part(open-drawer) {
		left: var(--mate-border-width-sm);
		bottom: var(--mate-spacing-xs);

		border-width: var(--mate-border-width-sm);

		border-top-right-radius: var(--mate-corner-radius-md);
		border-bottom-right-radius: var(--mate-corner-radius-md);
	}

	&[has-application-bar]::part(open-drawer) {
		left: calc(var(--_mate-app-layout-application-bar-width) + var(--mate-border-width-sm));
		bottom: var(--mate-spacing-xs);
	}

	&::part(drawer-rule) {
		width: 100%;
		border-top-width: var(--mate-border-width-sm);
		border-bottom-width: 0;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

span[theme~="badge"] {
	gap: var(--mate-spacing-xxs);

	font-family: var(--mate-typography-body-md-regular-font-family);
	line-height: var(--mate-typography-body-md-regular-line-height);
	font-size: var(--mate-typography-body-md-regular-font-size);
	font-weight: var(--mate-typography-body-md-regular-font-weight);

	padding-inline-start: var(--mate-spacing-xs);
	padding-inline-end: var(--mate-spacing-xs);
	border-radius: var(--mate-corner-radius-sm);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

div[theme~="block-layout"][theme~="padding"] {
    padding-top: var(--mate-spacing-padding);
    padding-inline-start: var(--mate-spacing-padding);
    padding-inline-end: var(--mate-spacing-padding);
}

div[theme~="block-layout"][theme~="padding"]:not([theme*="double-bottom-padding"]) {
    padding-bottom: var(--mate-spacing-padding);
}

div[theme~="block-layout"][theme~="double-bottom-padding"] {
    padding-bottom: var(--mate-spacing-xxl);
}

div[theme~="block-layout"][theme~="spacing"] {
	row-gap: var(--mate-spacing-margin);
   	column-gap: var(--mate-spacing-margin);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-breadcrumb {
    --vcf-breadcrumb-separator-padding: 0 var(--mate-spacing-xxs) 0 var(--mate-spacing-xxs);

    &:focus-within::part(link) {
        outline-width: 2px;
    }

    &::part(separator)::after,
    > a {
        font-family: var(--mate-typography-body-sm-regular-font-family);
        font-size: var(--mate-typography-body-sm-regular-font-size);
        font-style: normal;
        font-weight: var(--mate-typography-body-sm-regular-font-weight);
        line-height: var(--mate-typography-body-sm-regular-line-height);
    }

    a.breadcrumb-anchor.add-mobile-back-icon::before {
        font-size: var(--mate-icon-sizing-md);
    }
}

vaadin-popover[theme~="hidden-breadcrumbs"] {

    &::part(overlay) {
        border-radius: var(--mate-corner-radius-sm);
        border-width: var(--mate-border-width-sm);
        box-shadow: var(--mate-style-shadow-m);
    }

    a {
        padding: var(--mate-spacing-xs);

        font-family: var(--mate-typography-body-sm-regular-font-family);
        font-size: var(--mate-typography-body-sm-regular-font-size);
        font-style: normal;
        font-weight: var(--mate-typography-body-sm-regular-font-weight);
        line-height: var(--mate-typography-body-sm-regular-line-height);

        &:focus {
            outline-width: 2px;
            outline-offset: -2px;
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-button,
vaadin-menu-bar-button {

	font-size: var(--mate-typography-label-md-medium-font-size);
	font-weight: var(--mate-typography-label-md-medium-font-weight);
	line-height: var(--mate-typography-label-md-medium-line-height);
	font-family: var(--mate-typography-label-md-medium-font-family);

	&:has([slot="prefix"])::part(label) {
		margin-inline-start: var(--mate-spacing-xxs);
	}

	&:has([slot="suffix"])::part(label) {
		margin-inline-end: var(--mate-spacing-xxs);
	}

	&:not([theme*="icon"]) {
		border-style: solid;
		border-width: var(--mate-border-width-sm);
		border-radius: var(--mate-corner-radius-md);
		height: var(--mate-components-button-button-height);
	}

	&:not([theme*="icon"]):not([theme*="padding"]){
		padding-inline-start: var(--mate-spacing-padding);
		padding-inline-end: var(--mate-spacing-padding);
	}

	&[theme*="padding"] {
		width: var(--mate-components-button-button-height);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-form::part(default-error),
mate-callout {
	padding: var(--mate-spacing-padding);
	border-radius: var(--mate-corner-radius-lg);
	border-width: var(--mate-border-width-sm);

	column-gap: var(--mate-spacing-xs);
	row-gap: var(--mate-spacing-xs);
}

mate-form,
mate-callout {

	&::part(title) {
		font-family: var(--mate-typography-heading-md-font-family);
		font-size: var(--mate-typography-heading-md-font-size);
		font-weight: var(--mate-typography-heading-md-font-weight);
		line-height: var(--mate-typography-heading-md-line-height);
	}

	&::part(state)::after {
		display: block;
		font-family: var(--mate-typography-font-family-icon);
		width: var(--mate-icon-sizing-md);
		height: var(--mate-icon-sizing-md);
		font-size: var(--mate-icon-sizing-md);
		line-height: var(--mate-icon-sizing-md);
		font-weight: var(--mate-typography-font-weight-regular);

		/* baseline fix */
		transform: translateY(0.2em);
	}
}/*
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-card {
    --vaadin-card-title-font-size: var(--mate-typography-heading-md-font-size);
    --vaadin-card-title-font-weight: var(--mate-typography-heading-md-font-weight);
    --vaadin-card-title-line-height: var(--mate-typography-heading-md-line-height);

    --vaadin-card-subtitle-font-size: var(--mate-typography-body-md-regular-font-size);
    --vaadin-card-subtitle-font-weight: var(--mate-typography-body-md-regular-font-weight);
    --vaadin-card-subtitle-line-height: var(--mate-typography-body-md-regular-line-height);

    border-width: var(--mate-border-width-sm);
    border-radius: var(--mate-corner-radius-lg);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-dashboard {
    --vaadin-dashboard-gap: var(--mate-spacing-margin);

    --vaadin-dashboard-widget-border-radius: var(--mate-corner-radius-lg);
    --vaadin-dashboard-widget-border-width: var(--mate-border-width-sm);
}

vaadin-dashboard-widget {

    --vaadin-dashboard-widget-title-font-size: var(--mate-typography-heading-xs-font-size);
    --vaadin-dashboard-widget-title-font-weight: var(--mate-typography-heading-xs-font-weight);
    --vaadin-dashboard-widget-title-line-height: var(--mate-typography-heading-xs-line-height);
    --vaadin-dashboard-widget-header-gap: var(--mate-spacing-md);

    &::part(header) {
        font-family: var(--mate-typography-heading-xs-font-family);
    }

    &::part(move-button),
    &::part(move-apply-button),
    &::part(move-forward-button),
    &::part(move-backward-button),
    &::part(resize-button),
    &::part(resize-apply-button),
    &::part(resize-shrink-width-button),
    &::part(resize-shrink-height-button),
    &::part(resize-grow-width-button),
    &::part(resize-grow-height-button),
    &::part(remove-button) {
        font-family: var(--mate-typography-font-family-icon);
        font-weight: var(--mate-typography-font-weight-regular);
        font-size: var(--mate-icon-sizing-md);
        line-height: var(--mate-icon-sizing-md);
    }

    &::part(move-button),
    &::part(move-apply-button),
    &::part(move-forward-button),
    &::part(move-backward-button),
    &::part(resize-button),
    &::part(resize-apply-button),
    &::part(resize-shrink-width-button),
    &::part(resize-shrink-height-button),
    &::part(resize-grow-width-button),
    &::part(resize-grow-height-button),
    &::part(remove-button),
    &::part(move-button)::before,
    &::part(move-apply-button)::before,
    &::part(move-forward-button)::before,
    &::part(move-backward-button)::before,
    &::part(resize-button)::before,
    &::part(resize-apply-button)::before,
    &::part(resize-shrink-width-button)::before,
    &::part(resize-shrink-height-button)::before,
    &::part(resize-grow-width-button)::before,
    &::part(resize-grow-height-button)::before,
    &::part(remove-button)::before {
        height: var(--mate-icon-sizing-md);
        width: var(--mate-icon-sizing-md);
    }

    &::part(header) {
        padding: var(--mate-spacing-md);
        min-height: calc(var(--mate-icon-sizing-md) + 2 * var(--mate-spacing-sm));
        border-bottom-width: var(--mate-border-width-sm);
    }

    &[theme~="padding"]::part(content) {
        padding: var(--mate-spacing-md);
    }
}

vaadin-dashboard-section {
    &::part(title) {
        font-family: var(--mate-typography-heading-xs-font-family);
        font-size: var(--mate-typography-heading-xs-font-size);
        font-style: normal;
        font-weight: var(--mate-typography-heading-xs-font-weight);
        line-height: var(--mate-typography-heading-xs-line-height);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-date-picker,
vaadin-time-picker {

    &::part(toggle-button)::before {
        font-family: var(--mate-typography-font-family-icon);
        font-weight: var(--mate-typography-font-weight-regular);
        font-size: var(--mate-icon-sizing-md);
        line-height: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        width: var(--mate-icon-sizing-md);
    }
}

vaadin-date-picker::part(overlay) {
    height: fit-content;
	margin-bottom: var(--mate-spacing-xs);
    border-radius: var(--mate-corner-radius-md);
    border-width: var(--mate-border-width-sm);
}

vaadin-time-picker-scroller,
vaadin-date-picker-overlay-content {
    font-family: var(--mate-typography-body-sm-regular-font-family);
    font-weight: var(--mate-typography-body-sm-regular-font-weight);
    font-size: var(--mate-typography-body-sm-regular-font-size);
    line-height: var(--mate-typography-body-sm-regular-line-height);
    font-size: var(--mate-typography-body-sm-regular-font-size);
}

vaadin-date-picker-overlay-content {
    &::part(toolbar){
        padding-inline-start: var(--mate-spacing-padding);
        padding-inline-end: var(--mate-spacing-padding);
        gap: var(--mate-spacing-margin);
    }
}

vaadin-date-picker-year {
    &::part(year-separator){
        height: 50%;
    }
}

vaadin-month-calendar {
    padding: var(--mate-spacing-xs) var(--mate-spacing-xs);

    &::part(focused selected) {
        outline: var(--mate-interactive-focus) var(--mate-sizing-xxxxs) solid;
    }

    &::part(focused)::after {
            outline-color: var(--mate-interactive-focus);
    }

    &::part(date) {
        padding: 0;
        border-radius: var(--mate-border-width-lg);


        font-family: var(--mate-typography-body-md-regular-font-family);
        font-size: var(--mate-typography-body-md-regular-font-size);
        font-style: normal;
        font-weight: var(--mate-typography-body-md-regular-font-weight);
        line-height: var(--mate-typography-body-md-regular-line-height);
    }

    &::part(month-header) {
        margin-bottom: var(--mate-spacing-xs);
        font-family: var(--mate-typography-heading-xs-font-family);
        font-weight: var(--mate-typography-heading-xs-font-weight);
        font-size: var(--mate-typography-heading-xs-font-size);
        line-height: var(--mate-typography-heading-xs-line-height);
        font-size: var(--mate-typography-heading-xs-font-size);
    }

    &::part(weekday) {
        margin-bottom: unset;
        font-size: var(--mate-typography-body-sm-regular-font-size);
        line-height: var(--mate-typography-body-sm-regular-line-height);
        font-weight: var(--mate-typography-body-sm-regular-font-weight);
    }

    &::part(weekdays) {
        margin-bottom: var(--mate-spacing-xs);
        font-family: var(--mate-typography-body-sm-regular-font-family);
        font-size: var(--mate-typography-body-sm-regular-font-size);
        font-style: normal;
        font-weight: var(--mate-typography-body-sm-regular-font-weight);
        line-height: var(--mate-typography-body-sm-regular-line-height);
    }
}

vaadin-date-picker-year-scroller {
    &::before {
        width: 0;
        height: 0;
        border-top: calc(var(--mate-spacing-sm) / 2) solid transparent;
        border-left: var(--mate-spacing-sm) solid var(--mate-components-other-overlay-background);
        border-bottom: calc(var(--mate-spacing-sm) / 2) solid transparent;
    }
}

vaadin-time-picker-item {
    border-radius: 0;

    &::part(checkmark)::before {
        font-family: var(--mate-typography-font-family-icon);
        font-weight: var(--mate-typography-font-weight-regular);
        font-size: var(--mate-icon-sizing-md);
        line-height: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        width: var(--mate-icon-sizing-md);
        mask-image: none;
        background: unset;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-details-summary::part(header),
vaadin-accordion-heading,
vaadin-details-summary {
	font-family: var(--mate-typography-body-md-medium-font-family);
	font-size: var(--mate-typography-body-md-medium-font-size);
	line-height: var(--mate-typography-body-md-medium-line-height);
	font-weight: var(--mate-typography-body-md-medium-font-weight);
}

vaadin-details[theme~="object-header"] > mate-details-summary::part(header) {
	font-family: var(--mate-typography-heading-lg-font-family);
	font-size: var(--mate-typography-heading-lg-font-size);
	line-height: var(--mate-typography-heading-lg-line-height);
	font-weight: var(--mate-typography-heading-lg-font-weight);
}

vaadin-accordion-heading::part(toggle)::after,
vaadin-accordion-heading::part(toggle),
vaadin-details-summary::part(toggle)::after,
vaadin-details-summary::part(toggle),
mate-details-summary::part(toggle)::after,
mate-details-summary::part(toggle) {
	font-family: var(--mate-typography-font-family-icon);
	font-weight: var(--mate-typography-font-weight-regular);
	font-size: var(--mate-icon-sizing-md);
	line-height: var(--mate-icon-sizing-md);
	height: var(--mate-icon-sizing-md);
	width: var(--mate-icon-sizing-md);
}

mate-details-summary::part(toggle-end) {
	font-family: var(--mate-typography-label-md-medium-font-family);
	font-size: var(--mate-typography-label-md-medium-font-size);
	line-height: var(--mate-typography-label-md-medium-line-height);
	font-weight: var(--mate-typography-label-md-medium-font-weight);
}

vaadin-accordion-panel:not(:last-of-type) {
	border-bottom-width: var(--mate-border-width-sm);
}

vaadin-details::part(content),
vaadin-accordion-panel::part(content) {
	padding-top: var(--mate-spacing-xxs);
	padding-bottom: var(--mate-spacing-xxs);
	padding-inline-start: var(--mate-spacing-xs);
}

mate-details-summary::part(header),
mate-details-summary::part(title) {
	gap: var(--mate-spacing-margin);
}

mate-details-summary > [slot="sub-title"] {
	font-family: var(--mate-typography-body-lg-medium-font-family);
	font-size: var(--mate-typography-body-lg-medium-font-size);
	line-height: var(--mate-typography-body-lg-medium-line-height);
	font-weight: var(--mate-typography-body-lg-medium-font-weight);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-dialog::part(overlay) {
	border-radius: var(--mate-corner-radius-lg);
	border-width: var(--mate-border-width-sm);
}

vaadin-dialog::part(header) {
	padding: var(--mate-spacing-sm) var(--mate-spacing-padding);
	border-bottom-width: var(--mate-border-width-sm);
}

vaadin-dialog::part(header):not(.empty) {
	min-height: var(--mate-sizing-xl);
}

vaadin-dialog::part(content) {
	padding: var(--mate-spacing-padding);
}
    
vaadin-dialog::part(footer) {
	border-top-width: var(--mate-border-width-sm);
	padding: var(--mate-spacing-xs) var(--mate-spacing-padding);
	gap: var(--mate-spacing-sm);
}

vaadin-dialog:not([theme~="medium"]):not([theme~="large"]):not([theme~="progress"])::part(overlay) {
	min-width: 25rem;
	max-width: 40rem;
	width: 50%;
}

vaadin-dialog[theme~="large"]::part(overlay) {
	min-width: 40rem;
	width: 90%;
}
      
vaadin-dialog[theme~="medium"]::part(overlay) {
	min-width: 40rem;
	max-width: 75rem;
	width: 70%;
}

vaadin-dialog[theme~="progress"]::part(content) {
	gap: var(--mate-spacing-margin);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-multi-select-combo-box {
    min-width: 15rem;

    --vaadin-chip-height: var(--mate-components-input-chips-height);
    --vaadin-chip-padding: var(--mate-spacing-xxxs) var(--mate-spacing-xxs);
    --vaadin-multi-select-combo-box-chips-gap: var(--mate-spacing-xs);
    --vaadin-chip-border-radius: var(--mate-corner-radius-sm);
}

vaadin-select::part(toggle-button)::before,
vaadin-combo-box::part(toggle-button)::before,
vaadin-multi-select-combo-box::part(toggle-button)::before {
    font-family: var(--mate-typography-font-family-icon);
    font-weight: var(--mate-typography-font-weight-regular);
    font-size: var(--mate-icon-sizing-md);
    line-height: var(--mate-icon-sizing-md);
    height: var(--mate-icon-sizing-md);
    width: var(--mate-icon-sizing-md);
}

vaadin-multi-select-combo-box-chip::part(remove-button)::before {
    font-family: var(--mate-typography-font-family-icon);
    font-weight: var(--mate-typography-font-weight-regular);
    font-size: var(--mate-icon-sizing-sm);
    line-height: var(--mate-icon-sizing-sm);
    height: var(--mate-icon-sizing-sm);
    width: var(--mate-icon-sizing-sm);
}

vaadin-multi-select-combo-box-chip {
    --vaadin-chip-padding: var(--mate-spacing-xxxs) var(--mate-spacing-xxs);
    padding: var(--vaadin-chip-padding);
    height: var(--mate-components-input-chips-height);

    font-family: var(--mate-typography-body-sm-regular-font-family);
    font-size: var(--mate-typography-body-sm-regular-font-size);
    line-height: var(--mate-typography-body-sm-regular-line-height);
    font-weight: var(--mate-typography-body-sm-regular-font-weight);
    font-size: var(--mate-typography-body-sm-regular-font-size);
}

vaadin-multi-select-combo-box-chip[slot="overflow"] {

    margin-inline-start: calc((var(--mate-spacing-xxxs) + var(--mate-sizing-xxxs)) * 2);

    &[count="2"] {
        margin-inline-start: calc(var(--mate-spacing-xxxs) + var(--mate-sizing-xxxs));
    }

    &::after,
    &::before {
        border-left-width: var(--mate-sizing-xxxs);
        border-radius: var(--mate-corner-radius-sm);
    }

    &::after {
        left: calc(-1 * (var(--mate-spacing-xxxs) + var(--mate-sizing-xxxs)) * 2);
    }

    &::before {
        left: calc(-1 * (var(--mate-spacing-xxxs) + var(--mate-sizing-xxxs)));
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-facet {

	&[theme~="kpi"] {

		&::part(key) {
			font-family: var(--mate-typography-body-sm-regular-font-family);
			font-size: var(--mate-typography-body-sm-regular-font-size);
			font-weight: var(--mate-typography-body-sm-regular-font-weight);
			line-height: var(--mate-typography-body-sm-regular-line-height);
		}

		&::part(value) {
			gap: var(--mate-spacing-xs);

			font-family: var(--mate-typography-heading-lg-font-family);
			font-size: var(--mate-typography-heading-lg-font-size);
			font-weight: var(--mate-typography-heading-lg-font-weight);
			line-height: var(--mate-typography-heading-lg-line-height);

			align-items: center;
		}
	}

	&[theme~="text"] {
		gap: var(--mate-spacing-xxs);

		&::part(key) {
			font-family: var(--mate-typography-label-md-bold-font-family);
			font-size: var(--mate-typography-label-md-bold-font-size);
			font-weight: var(--mate-typography-label-md-bold-font-weight);
			line-height: var(--mate-typography-label-md-bold-line-height);
		}

		&::part(value) {
			font-family: var(--mate-typography-body-md-regular-font-family);
			font-size: var(--mate-typography-body-md-regular-font-size);
			font-weight: var(--mate-typography-body-md-regular-font-weight);
			line-height: var(--mate-typography-body-md-regular-line-height);

			max-width: 80ch;
		}

		&[theme~="compact"]::part(value) {
			max-width: 55ch;
		}
	}

	&::part(key-tooltip-indicator)::after,
	&::part(value-tooltip-indicator)::after {
		font-family: var(--mate-typography-font-family-icon);
		width: var(--mate-icon-sizing-md);
		height: var(--mate-icon-sizing-md);
		font-size: var(--mate-icon-sizing-md);
		font-weight: var(--mate-typography-font-weight-regular);
	}
}

mate-facet-list {

	gap: var(--mate-spacing-xxs);

	&::part(default-title) {
		font-family: var(--mate-typography-label-md-bold-font-family);
		font-size: var(--mate-typography-label-md-bold-font-size);
		font-weight: var(--mate-typography-label-md-bold-font-weight);
		line-height: var(--mate-typography-label-md-bold-line-height);
	}

	&:not([theme*="small"]):not([theme*="large"]) > mate-facet {
		&::part(key) {
			font-family: var(--mate-typography-body-md-regular-font-family);
			font-size: var(--mate-typography-body-md-regular-font-size);
			font-weight: var(--mate-typography-body-md-regular-font-weight);
			line-height: var(--mate-typography-body-md-regular-line-height);
		}

		&::part(value) {
			font-family: var(--mate-typography-body-md-medium-font-family);
			font-size: var(--mate-typography-body-md-medium-font-size);
			font-weight: var(--mate-typography-body-md-medium-font-weight);
			line-height: var(--mate-typography-body-md-medium-line-height);
		}
	}

	&[theme~="small"] > mate-facet {
		&::part(key) {
			font-family: var(--mate-typography-body-sm-regular-font-family);
			font-size: var(--mate-typography-body-sm-regular-font-size);
			font-weight: var(--mate-typography-body-sm-regular-font-weight);
			line-height: var(--mate-typography-body-sm-regular-line-height);
		}

		&::part(value) {
			font-family: var(--mate-typography-body-sm-medium-font-family);
			font-size: var(--mate-typography-body-sm-medium-font-size);
			font-weight: var(--mate-typography-body-sm-medium-font-weight);
			line-height: var(--mate-typography-body-sm-medium-line-height);
		}
	}

	&[theme~="large"] > mate-facet {
		&::part(key) {
			font-family: var(--mate-typography-body-lg-regular-font-family);
			font-size: var(--mate-typography-body-lg-regular-font-size);
			font-weight: var(--mate-typography-body-lg-regular-font-weight);
			line-height: var(--mate-typography-body-lg-regular-line-height);
		}

		&::part(value) {
			font-family: var(--mate-typography-body-lg-medium-font-family);
			font-size: var(--mate-typography-body-lg-medium-font-size);
			font-weight: var(--mate-typography-body-lg-medium-font-weight);
			line-height: var(--mate-typography-body-lg-medium-line-height);
		}
	}

	> mate-facet::part(default-key) {
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	&:not([theme*="inline"]) {

		> mate-facet::part(default-value) {
			-webkit-line-clamp: 2;
			line-clamp: 2;
		}
	}

	&[theme~="inline"] {
		> mate-facet {
			gap: var(--mate-spacing-xs);

			&::part(default-value) {
				max-width: 80ch;
				-webkit-line-clamp: 1;
				line-clamp: 1;
			}
		}
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-vertical-layout,
vaadin-horizontal-layout,
mate-floating-layout,
div[theme~="floating-layout"],
mate-form-layout,
div[theme~="form-layout"] {

	&[theme~="spacing"] {
		gap: var(--mate-spacing-margin);
	}

	&[theme~="padding"] {
		padding: var(--mate-spacing-padding);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-filter-panel {

	&::part(search),
	&::part(reset),
	&::part(toggle) {
		font-size: var(--mate-typography-label-md-medium-font-size);
		font-weight: var(--mate-typography-label-md-medium-font-weight);
		line-height: var(--mate-typography-label-md-medium-line-height);
		font-family: var(--mate-typography-label-md-medium-font-family);

		height: var(--mate-components-button-button-height);

		outline-width: var(--mate-sizing-xxxxs);
		outline-offset: var(--mate-sizing-xxxxs);

		box-sizing: border-box;

		padding-inline-start: var(--mate-spacing-padding);
		padding-inline-end: var(--mate-spacing-padding);

        border-radius: var(--mate-corner-radius-md);
	}

	&::part(search),
	&::part(reset),
    &::part(toggle) {
		border-width: var(--mate-border-width-sm);
	}

	&::part(collapsed),
	&::part(expanded),
	&::part(actions),
	&::part(content) {
		gap: var(--mate-spacing-md);
	}

	&::part(header),
	&::part(expanded),
	&::part(collapsed) {
		align-items: baseline;
	}

}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-filter-panel-reorder {
	padding: var(--mate-spacing-xs);
	gap: var(--mate-spacing-md);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-grid,
vaadin-grid-pro {

	--vaadin-grid-border-radius: 0;
	--vaadin-grid-cell-padding: 0;
	--vaadin-grid-tree-toggle-level-offset: var(--mate-spacing-xs);
	--vaadin-grid-border-width: var(--mate-border-width-sm);
	--vaadin-grid-row-border-width: var(--mate-border-width-sm);
	--vaadin-grid-column-border-width: var(--mate-border-width-sm);

	&::part(cell) {
		font-family: var(--mate-typography-body-md-regular-font-family);
		font-size: var(--mate-typography-body-md-regular-font-size);
		font-weight: var(--mate-typography-body-md-regular-font-weight);
		line-height: var(--mate-typography-body-md-regular-line-height);
	}

	&::part(header-cell) {
		padding: var(--mate-spacing-sm) var(--mate-spacing-xs);
	}

    &::part(focused-cell) {
        outline-width: var(--mate-sizing-xxxxs);
        outline-offset: calc(-1 * var(--mate-sizing-xxxxs));
    }

	&::part(body-cell) {
		padding: var(--mate-spacing-xxs) var(--mate-spacing-xs);
	}

	vaadin-checkbox {
		padding-top: var(--mate-sizing-xxxxs);

		&.vaadin-grid-select-all-checkbox {
			padding-top: var(--mate-sizing-xxs);
		}
	}
}

vaadin-grid::part(info-icon),
vaadin-grid::part(error-icon),
vaadin-grid::part(editable-icon),
vaadin-grid::part(details-collapsed-icon),
vaadin-grid::part(details-expanded-icon),
vaadin-grid::part(details-toggle-cell),
vaadin-grid-pro::part(info-icon),
vaadin-grid-pro::part(error-icon),
vaadin-grid-pro::part(editable-icon),
vaadin-grid-pro::part(details-collapsed-icon),
vaadin-grid-pro::part(details-expanded-icon),
vaadin-grid-tree-toggle::part(toggle),
vaadin-grid::part(info-icon)::after,
vaadin-grid::part(error-icon)::after,
vaadin-grid::part(editable-icon)::after,
vaadin-grid::part(details-collapsed-icon)::after,
vaadin-grid::part(details-expanded-icon)::after,
vaadin-grid::part(details-toggle-cell)::after,
vaadin-grid-pro::part(info-icon)::after,
vaadin-grid-pro::part(error-icon)::after,
vaadin-grid-pro::part(editable-icon)::after,
vaadin-grid-pro::part(details-collapsed-icon)::after,
vaadin-grid-pro::part(details-expanded-icon)::after,
vaadin-grid-tree-toggle::part(toggle)::before {
	font-family: var(--mate-typography-font-family-icon);
	width: var(--mate-icon-sizing-md);
	height: var(--mate-icon-sizing-md);
	font-size: var(--mate-icon-sizing-md);
	font-weight: var(--mate-typography-font-weight-regular);
}

vaadin-grid-sorter::part(indicators) {
	margin-inline-start: var(--mate-spacing-xs);
}

vaadin-grid-pro::part(editing-cell) {
	min-height: calc(2 * var(--mate-spacing-xxs) + var(--mate-typography-body-md-regular-line-height));
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-grid-pagination {
    padding: var(--mate-spacing-sm);
    gap: var(--mate-spacing-margin);
    height: var(--mate-sizing-md);

    border-top-width: var(--mate-border-width-sm);

    &::part(first)::after,
    &::part(previous)::after,
    &::part(next)::after,
    &::part(last)::after {
        font-family: var(--mate-typography-font-family-icon);
        width: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        font-size: var(--mate-icon-sizing-md);
        font-weight: var(--mate-typography-font-weight-regular);
    }
}

mate-grid-reorder {
    &::part(reorder-button)  {
        font-size: var(--mate-typography-label-md-medium-font-size);
        font-weight: var(--mate-typography-label-md-medium-font-weight);
        line-height: var(--mate-typography-label-md-medium-line-height);
        font-family: var(--mate-typography-label-md-medium-font-family);

        height: var(--mate-components-button-button-height);

        outline-width: var(--mate-sizing-xxxxs);
        outline-offset: var(--mate-sizing-xxxxs);

        box-sizing: border-box;

        padding-inline-start: var(--mate-spacing-padding);
        padding-inline-end: var(--mate-spacing-padding);
    }
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-icon,
span[theme~="icon"] {
	font-weight: var(--mate-typography-font-weight-regular);

    &:not([theme*="small"]):not([theme*="large"]) {
        font-size: var(--mate-icon-sizing-md);
        line-height: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        width: var(--mate-icon-sizing-md);
    }

	&[theme~="small"] {
		font-size: var(--mate-icon-sizing-sm);
		line-height: var(--mate-icon-sizing-sm);
		height: var(--mate-icon-sizing-sm);
		width: var(--mate-icon-sizing-sm);
	}
	
	&[theme~="large"] {
        font-size: var(--mate-icon-sizing-lg);
        line-height: var(--mate-icon-sizing-lg);
        height: var(--mate-icon-sizing-lg);
        width: var(--mate-icon-sizing-lg);
	}

    &[has-notification]::after {
        right: 0;
        top: 0;
        margin-top: -0.25rem;
        margin-inline-end: -0.25rem;
        border-radius: 50%;
        inset-inline-end: 0;
        width: 1rem;
        height: 1rem;
        font-size: 8px;
        line-height: 14px;
        font-weight: var(--mate-typography-font-weight-medium);
    }

    /* baseline fix */
    &:not([theme*="small"]):not([theme*="large"])::before {
        line-height: 50%;
    }
}

mate-icon:dir(rtl) ,
span[theme~="icon"]:dir(rtl)  {
    &[has-notification]:dir(rtl)::after {
        left: 0;
        right: unset;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-big-decimal-field,
vaadin-custom-field,
vaadin-password-field,
vaadin-email-field,
vaadin-text-area,
vaadin-checkbox-group,
vaadin-radio-group,
vaadin-number-field,
vaadin-combo-box,
vaadin-multi-select-combo-box,
vaadin-select,
vaadin-date-picker,
vaadin-time-picker,
vaadin-date-time-picker,
vaadin-text-field {

	--vaadin-input-field-padding: var(--mate-spacing-xxs) var(--mate-spacing-xs);

	--vaadin-input-field-value-font-size: var(--mate-typography-body-md-regular-font-size);

	--vaadin-field-baseline-input-height: var(--mate-components-input-input-height);
	--vaadin-input-field-value-line-height: var(--mate-typography-body-md-regular-line-height);
	--vaadin-input-field-value-font-weight: var(--mate-typography-body-md-regular-font-weight);

	--vaadin-input-field-gap: var(--mate-spacing-xxs);

	--vaadin-input-field-border-width: var(--mate-border-width-sm);
	--vaadin-input-field-border-radius: var(--mate-corner-radius-md);

	--vaadin-input-field-error-font-size: var(--mate-typography-body-sm-regular-font-size);
	--vaadin-input-field-error-line-height: var(--mate-typography-body-sm-regular-line-height);
	--vaadin-input-field-error-font-weight: var(--mate-typography-body-sm-regular-font-weight);

	--vaadin-input-field-helper-font-size: var(--mate-typography-body-sm-regular-font-size);
	--vaadin-input-field-helper-line-height: var(--mate-typography-body-sm-regular-line-height);
	--vaadin-input-field-helper-font-weight: var(--mate-typography-body-sm-regular-font-weight);

	--vaadin-input-field-container-gap: var(--mate-spacing-xxs);
	--vaadin-checkbox-group-gap: var(--vaadin-input-field-container-gap);
	--vaadin-radio-group-gap: var(--vaadin-input-field-container-gap);

	&::part(input-field) {
		min-height: var(--mate-components-input-input-height);
	}

    &::part(label) {
        margin-bottom: unset;
    }

    &::part(helper-text),
    &::part(error-message){
        margin-top: unset;
    }

	/* Fix height including border */
	&::before {
		line-height: calc(var(--vaadin-input-field-value-line-height) + 2 * var(--mate-border-width-sm));
	}

	&[has-error-message]::part(error-message)::before {
		font-family: var(--mate-typography-font-family-icon);
		font-weight: var(--mate-typography-font-weight-regular);
		font-size: var(--mate-icon-sizing-sm);
		line-height: var(--mate-icon-sizing-sm);
		height: var(--mate-icon-sizing-sm);
		width: var(--mate-icon-sizing-sm);

		/* baseline fix */
		transform: translateY(0.2em);
	}

	&[clear-button-visible]::part(clear-button)::before,
	vaadin-password-field-button::before,
	&[step-buttons-visible]::part(decrease-button)::before,
	&[step-buttons-visible]::part(increase-button)::before,
	&[clear-button-visible][has-value]::part(clear-button),
	vaadin-password-field-button,
	&[step-buttons-visible]::part(decrease-button),
	&[step-buttons-visible]::part(increase-button) {
		font-family: var(--mate-typography-font-family-icon);
		font-weight: var(--mate-typography-font-weight-regular);
		font-size: var(--mate-icon-sizing-md);
		line-height: var(--mate-icon-sizing-md);
		height: var(--mate-icon-sizing-md);
		width: var(--mate-icon-sizing-md);
	}
}

/* Allow auto-expand for multi-select-combo-box */
vaadin-big-decimal-field,
vaadin-custom-field,
vaadin-password-field,
vaadin-email-field,
vaadin-checkbox-group,
vaadin-radio-group,
vaadin-number-field,
vaadin-combo-box,
vaadin-multi-select-combo-box:not([auto-expand-vertically]),
vaadin-select,
vaadin-date-picker,
vaadin-time-picker,
vaadin-date-time-picker,
vaadin-text-field {

    &::part(input-field) {
        max-height: var(--mate-components-input-input-height);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-dialog-overlay::part(overlay),
vaadin-custom-field::part(input-field),
vaadin-checkbox::part(checkbox),
vaadin-radio-button::part(radio),
vaadin-password-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-number-field::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-multi-select-combo-box::part(input-field),
vaadin-select::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-date-time-picker::part(input-field),
vaadin-text-field::part(input-field),
vaadin-button,
vaadin-menu-bar-button,
mate-filter-panel::part(search),
mate-filter-panel::part(reset),
mate-filter-panel::part(toggle),
vcf-pdf-viewer::part(viewer-container):focus,
vaadin-popover::part(overlay):focus-visible,
vaadin-radio-group[theme~="segmented"] > vaadin-radio-button[focused],
vaadin-checkbox-group[theme~="segmented"] > vaadin-checkbox[focused],
vaadin-upload-file::part(start-button):focus-visible,
vaadin-upload-file::part(retry-button):focus-visible,
vaadin-upload-file::part(remove-button):focus-visible {
	outline-width: var(--mate-sizing-xxxxs);
	outline-offset: var(--mate-sizing-xxxxs);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-custom-field,
vaadin-checkbox-group,
vaadin-radio-group,
vaadin-password-field,
vaadin-email-field,
vaadin-text-area,
vaadin-number-field,
vaadin-combo-box,
vaadin-multi-select-combo-box,
vaadin-select,
vaadin-date-picker,
vaadin-time-picker,
vaadin-date-time-picker,
vaadin-text-field {

	--vaadin-input-field-label-font-size: var(--mate-typography-label-md-regular-font-size);
	--vaadin-input-field-label-line-height: var(--mate-typography-label-md-regular-line-height);
	--vaadin-input-field-label-font-weight: var(--mate-typography-label-md-regular-font-weight);

	&[has-label][has-tooltip] > label::after {
		font-family: var(--mate-typography-font-family-icon);
		font-size: var(--mate-typography-label-md-regular-font-size);
		width: var(--mate-typography-label-md-regular-font-size);
		height: var(--mate-typography-label-md-regular-font-size);
        padding-inline-start: var(--mate-spacing-xxxs);

		vertical-align: bottom;
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/


:not(vaadin-menu-bar-button) > vaadin-menu-bar-item,
vaadin-context-menu-item,
vaadin-select-item,
vaadin-multi-select-combo-box-item,
vaadin-combo-box-item {
    font-family: var(--mate-typography-body-md-regular-font-family);
    font-size: var(--mate-typography-body-md-regular-font-size);
    font-weight: var(--mate-typography-body-md-regular-font-weight);
    line-height: var(--mate-typography-body-md-regular-line-height);

    gap: var(--mate-spacing-xxs);

    &::part(checkmark),
    &::part(checkmark)::before{
        font-family: var(--mate-typography-font-family-icon);
        width: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        font-size: var(--mate-icon-sizing-md);
        font-weight: var(--mate-icon-sizing-md);
    }

    &[tabindex]::before {
        font-size: var(--mate-sizing-sm);
        margin-inline-end: var(--mate-spacing-xs);
    }

    &::part(content) {
        min-width: 1px;
    }

    &[focused]:not([disabled]):not([mate-disabled]) {
        outline-offset: calc(-1 * var(--mate-sizing-xxxxs));
    }

    &[theme~="has-icon"] > .text {
        margin-left: var(--mate-spacing-md);
    }
}

vaadin-context-menu-item[aria-haspopup='true']::after,
:not(vaadin-menu-bar-button) > vaadin-menu-bar-item[aria-haspopup='true']::after {
    font-family: var(--mate-typography-font-family-icon);
    width: var(--mate-icon-sizing-md);
    height: var(--mate-icon-sizing-md);
    font-size: var(--mate-icon-sizing-md);
    font-weight: var(--mate-icon-sizing-md);
}

vaadin-menu-bar-overlay::part(overlay),
vaadin-context-menu-overlay::part(overlay),
vaadin-context-menu::part(overlay),
vaadin-select-overlay::part(overlay),
vaadin-multi-select-combo-box-overlay::part(overlay),
vaadin-combo-box-overlay::part(overlay) {
    border-width: var(--mate-sizing-xxxxs);
    border-radius: var(--mate-corner-radius-sm);
}

vaadin-menu-bar-list-box,
vaadin-context-menu-list-box,
vaadin-select-list-box,
vaadin-multi-select-combo-box-scroller,
vaadin-combo-box-scroller {
    --vaadin-item-overlay-padding: 0;
}

vaadin-select-item {
    border-radius: 0;
}

vaadin-select-value-button {
    min-height: var(--mate-sizing-md);

    &::part(label) {
        height: var(--mate-sizing-md);
    }
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-lookup-field {
    /*to hide vaadin search icon with svg*/
    --vaadin-icon-visual-size: 0;

    > vaadin-button[slot="search-button-slot"] {
        height: var(--mate-components-input-input-height);
        border-width: var(--mate-border-width-sm)!important;
        border-start-end-radius: var(--mate-corner-radius-md);
        border-start-start-radius: 0;
        border-end-end-radius: var(--mate-corner-radius-md);
        border-end-start-radius: 0;
    }

    > vaadin-button[slot="search-button-slot"]::after,
    vaadin-text-field > vaadin-icon[slot="suffix"]::before {
        font-family: var(--mate-typography-font-family-icon);
        width: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        font-size: var(--mate-icon-sizing-md);
        font-weight: var(--mate-typography-font-weight-regular);
        align-items: center;
        display: flex;
    }


    > [slot="field"] {

        padding: unset;

        /* move the input into the button to hide the border */
        margin-inline-end: calc(-1 * var(--mate-border-width-sm));

        &::part(input-field) {
            padding: var(--mate-spacing-xxs) var(--mate-spacing-xxs) var(--mate-spacing-xxs) var(--mate-spacing-xs);
        }

        &::part(input-field) {
            border-start-end-radius: 0;
            border-end-end-radius: 0;
        }

        ::before {
            margin-top: unset;
            height: unset;
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-menu-bar:not([theme*="split"])::part(container) {
	gap: var(--mate-spacing-margin);
}

vaadin-menu-bar-button[slot="overflow"]::part(label)::after,
vaadin-menu-bar-button[aria-haspopup]:not([slot="overflow"])::part(suffix)::after {
	font-family: var(--mate-typography-font-family-icon);
	width: var(--mate-icon-sizing-md);
	height: var(--mate-icon-sizing-md);
	font-size: var(--mate-icon-sizing-md);
	line-height: var(--mate-icon-sizing-md);
	font-weight: var(--mate-icon-sizing-md);
}

vaadin-menu-bar[theme~="split"] > [last-visible] {
	width: var(--mate-components-button-button-height);
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-message-item {
	gap: var(--mate-spacing-050);

	&::part(toggle) {
		font-size: var(--mate-typography-label-md-medium-font-size);
		font-weight: var(--mate-typography-label-md-medium-font-weight);
		line-height: var(--mate-typography-label-md-medium-line-height);
		font-family: var(--mate-typography-label-md-medium-font-family);
	}
}

.mate-message-state-indicator {
	width: var(--mate-typography-font-sizing-087);
	height: var(--mate-typography-font-sizing-087);
	border-radius: 50%;
	margin-top: var(--mate-sizing-xxxs);
}/*
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-month-picker-calendar {

    &::part(header) {
        padding-bottom: var(--mate-spacing-xl);
    }

    &::part(month-grid) {
        gap: var(--mate-spacing-md);
    }

    &::part(month) {
        width: 64px;
        border-radius: var(--mate-corner-radius-md);
    }

    > [slot="year-label"] {
        font-family: var(--mate-typography-heading-lg-font-family);
        font-size: var(--mate-typography-heading-lg-font-size);
        font-weight: var(--mate-typography-heading-lg-font-weight);
        line-height: var(--mate-typography-heading-lg-line-height);
    }

    &::part(month) {
        font-family: var(--mate-typography-body-md-regular-font-family);
        font-size: var(--mate-typography-body-md-regular-font-size);
        font-weight: var(--mate-typography-body-md-regular-font-weight);
        line-height: var(--mate-typography-body-md-regular-line-height);
    }

    > [slot="prev-year"]::part(label)::before,
    > [slot="next-year"]::part(label)::before {
        font-family: var(--mate-typography-font-family-icon);
        width: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        font-size: var(--mate-icon-sizing-md);
        font-weight: var(--mate-typography-font-weight-regular);
    }
}

vcf-month-picker > vaadin-popover::part(content) {
    padding: var(--mate-spacing-md);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-notification-card::part(overlay) {
    border-radius: var(--mate-corner-radius-lg);
    border-top-width: var(--mate-border-width-sm);
    border-left-width: var(--mate-border-width-sm);
    border-right-width: var(--mate-border-width-sm);
    border-bottom-width: var(--mate-border-width-md);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-notification-bar {
	padding-inline-start: var(--mate-spacing-md);
	padding-inline-end: var(--mate-spacing-md);
	padding-top: var(--mate-spacing-xs);
	padding-bottom: var(--mate-spacing-xs);

	&::part(action) {
		gap: var(--mate-spacing-md);
	}

    &::part(container) {
        gap: var(--mate-spacing-md);
    }

	&::part(close) {
		margin-inline-start: var(--mate-spacing-md);
	}

	&::part(text),
	&::part(state) {
		margin-inline-end: var(--mate-spacing-md);
	}

	&::part(state)::after,
	&::part(close)::after {
		font-family: var(--mate-typography-font-family-icon);
		font-size: var(--mate-icon-sizing-md);
		font-weight: var(--mate-typography-font-weight-regular);
		/* baseline aligned */
		vertical-align: -0.4rem;
	}

    &::part(content) {
        font-family: var(--mate-typography-body-md-regular-font-family);
        font-size: var(--mate-typography-body-md-regular-font-size);
        font-style: normal;
        font-weight: var(--mate-typography-body-md-regular-font-weight);
        line-height: var(--mate-typography-body-md-regular-line-height);
    }

}

:not(vaadin-notification-card) > mate-notification-bar {
	padding: var(--mate-spacing-padding);
	border-top-width: var(--mate-border-width-sm);
	border-inline-start-width: var(--mate-border-width-lg);
	border-inline-end-width: var(--mate-border-width-sm);
	border-bottom-width: var(--mate-border-width-sm);

	&::part(close) {
		margin-inline-start: var(--mate-spacing-xs);
	}

	&::part(text),
	&::part(state) {
		margin-inline-end: var(--mate-spacing-xs);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-pdf-viewer {
    --pdf-viewer-border-radius: var(--mate-corner-radius-lg);

    &::part(toolbar-zoom) {
        width: 16rem;
    }

    &::part(toolbar) {
         height: var(--mate-components-input-input-height);
         border-radius: var(--pdf-viewer-border-radius);
     }

    &::part(toolbar-pages) {
        justify-content: normal;
    }
}

vcf-pdf-viewer:not([data-application-theme="lumo"]){
    vaadin-button.toolbar-button {
        width: var(--mate-icon-sizing-md)!important;
        height: var(--mate-icon-sizing-md)!important;
    }
}

vcf-pdf-viewer vaadin-button.toolbar-button:is(#previousPage, #nextPage, #sidebarToggle)::before {
    width: var(--mate-icon-sizing-md);
    height: var(--mate-icon-sizing-md);
    font-size: var(--mate-icon-sizing-md);
    line-height: var(--mate-icon-sizing-md);
    font-weight: var(--mate-typography-font-weight-regular);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-popover {

    &::part(overlay) {
        font-size: unset;
        line-height: unset;
        font-weight: unset;
        letter-spacing: unset;
    }

    &::part(content) {
        padding: unset;
    }
}

vaadin-popover-overlay:not([theme*="hidden-breadcrumbs"]) {
   
    &::part(arrow) {
        height: 0;
        width: 0;
    }

    &[theme~="arrow"][position^="top"]::part(arrow),
    &[theme~="arrow"][position^="bottom"]::part(arrow) {
        border-inline-start-width: 10px;
        border-inline-end-width: 10px;
    }

    &[theme~="arrow"][position^="bottom"][top-aligned]::part(arrow),
    &[theme~="arrow"][position^="top"][top-aligned]::part(arrow) {
        border-bottom-width: 10px;
    }

    &[theme~="arrow"][position^="bottom"]::part(arrow), 
    &[theme~="arrow"][position^="top"]::part(arrow) {
        inset-inline-start: 50%;
    }
    
    &[theme~="arrow"][position^="start"][start-aligned]::part(arrow), 
    &[theme~="arrow"][position^="end"][start-aligned]::part(arrow) {
        inset-inline-start: -8px;
        border-inline-end-width: 10px;
    }

    &[theme~="arrow"][position^="start"]::part(arrow), 
    &[theme~="arrow"][position^="end"]::part(arrow) {
        border-top-width: 10px;
        border-bottom-width: 10px;
    }

    &[theme~="arrow"][position^="top"]::part(overlay) {
        margin-bottom: 10px;
    }

    &[theme~="arrow"][position^="bottom"]::part(overlay) {
        margin-top: 10px;
    }

    &[theme~="arrow"][position^="start"]::part(overlay) {
        margin-inline-end: 10px;
    }

    &[theme~="arrow"][position^="end"]::part(overlay) {
        margin-inline-start: 10px;
    }

    &::part(overlay) {
        border-width: var(--mate-border-width-sm);
        border-radius: var(--mate-corner-radius-lg);
    }
}

mate-popover-content {

    &::part(header) {
        font-family: var(--mate-typography-heading-xs-font-family);
        font-size: var(--mate-typography-heading-xs-font-size);
        font-weight: var(--mate-typography-heading-xs-font-weight);
        line-height: var(--mate-typography-heading-xs-line-height);
        padding: var(--mate-spacing-xs) var(--mate-spacing-padding);

        border-bottom-width: var(--mate-border-width-sm);

        gap: var(--mate-spacing-xs);
    }

    &::part(content) {
        padding: var(--mate-spacing-padding);
    }

    &::part(close)::after {
        font-family: var(--mate-typography-font-family-icon);
        width: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        font-size: var(--mate-icon-sizing-md);
        font-weight: var(--mate-typography-font-weight-regular);
    }

    &::part(footer) {
        padding: var(--mate-spacing-xs) var(--mate-spacing-padding);

        border-bottom-left-radius: var(--mate-corner-radius-lg);
        border-bottom-right-radius: var(--mate-corner-radius-lg);
        border-top-width: var(--mate-border-width-sm);

        gap: var(--mate-spacing-xs);
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-progress-bar {
	min-width: 1.75rem;
	height: var(--mate-sizing-xxxs);
    border-radius: var(--mate-sizing-xxxxs);
}

vaadin-progress-bar::part(value) {
    border-radius: var(--mate-sizing-xxxxs);
    width: calc(var(--vaadin-progress-value) * 100%);
    will-change: width;
    transition: 0.1s width linear;
}

span[theme~="spinner"] {
    width: var(--_mate-component-spinner-size, var(--mate-sizing-sm));
    height: var(--_mate-component-spinner-size, var(--mate-sizing-sm));
}

span[theme~="spinner"]::before {
	border-width: var(--mate-sizing-xxxs);
}

vaadin-dialog[theme~="progress"] {
    span[theme~="spinner"] {
        --_mate-component-spinner-size: 100px;
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-checkbox,
vaadin-radio-button {
    --vaadin-checkbox-gap: var(--mate-spacing-xs);
    --vaadin-radio-button-gap: var(--mate-spacing-xs);

    --vaadin-checkbox-size: var(--mate-components-checkbox-checkbox-size);
    --vaadin-radio-button-size: var(--mate-icon-sizing-sm);

    --vaadin-checkbox-border-radius: var(--mate-corner-radius-md);

    --vaadin-radio-button-border-width: var(--mate-border-width-sm);
    --vaadin-checkbox-border-width: var(--mate-border-width-sm);
}


vaadin-radio-button::part(radio)::after {
    --vaadin-radio-button-dot-size: var(--mate-components-radio-button-small-circle);
}

vaadin-radio-button::part(radio)::after,
vaadin-checkbox::part(radio)::after {
    line-height: normal;
}

vaadin-radio-group,
vaadin-checkbox-group {
    &::part(group-field) {
        /* use text field height to determine proper padding top and bottom */
        padding: calc((var(--mate-components-input-input-height) - var(--mate-components-checkbox-checkbox-size) - 2 * var(--mate-border-width-sm)) / 2) 0;
    }
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-custom-field[theme~="range-selector"] > :not(:last-of-type)::part(input-field) {
	/* fix for overlap */
	margin-inline-end: calc(-1 * var(--mate-border-width-sm));
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-radio-group[theme~="segmented"],
vaadin-checkbox-group[theme~="segmented"] {    
    &::part(group-field) {
        gap: unset;
    }

    vaadin-radio-button,
    vaadin-checkbox {
        border-width: var(--mate-border-width-sm);
        border-radius: 0;
        height: var(--mate-components-button-button-height);

        > label {
            padding: 0 var(--mate-spacing-padding);
            white-space: nowrap;
        }

        &:first-of-type {
            border-start-start-radius: var(--mate-corner-radius-md);
            border-end-start-radius: var(--mate-corner-radius-md);
        }

        &:last-of-type {
            border-start-end-radius: var(--mate-corner-radius-md);
            border-end-end-radius: var(--mate-corner-radius-md);
        }

        &:not(:last-of-type) {
            margin-inline-end: calc(-1 * var(--mate-border-width-sm));
        }
    }
}
/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-side-nav-item {

	&::part(content) {
		gap: var(--mate-spacing-xxs);
		padding: var(--mate-spacing-xxs) 0;
		border-radius: var(--mate-corner-radius-md);
        flex-direction: row-reverse;
	}

    &::part(toggle-button)::before {
		font-family: var(--mate-typography-font-family-icon);
		width: var(--mate-icon-sizing-md);
		height: var(--mate-icon-sizing-md);
		font-size: var(--mate-icon-sizing-md);
		font-weight: var(--mate-typography-font-weight-regular);
    }

	&::part(children) {
		padding-inline-start: var(--mate-spacing-md);
	}

    &::part(link) {
		font-family: var(--mate-typography-body-md-regular-font-family);
		font-size: var(--mate-typography-body-md-regular-font-size);
		font-weight: var(--mate-typography-body-md-regular-font-weight);
		line-height: var(--mate-typography-body-md-regular-line-height);
    }

    &:not([has-children])::part(link) {
        margin-inline-start: calc(var(--mate-icon-sizing-md) + var(--mate-spacing-xxs));
    }

}

mate-side-nav {
	gap: var( --mate-spacing-md);

	> [slot="title"] {
		padding: var( --mate-spacing-md) var( --mate-spacing-md) 0 var( --mate-spacing-md);
	}

	> vaadin-text-field[slot="filter"] {
		width: unset;
		padding: 0 var( --mate-spacing-md);
	}

	> vaadin-side-nav {
		padding: 0 var(--mate-spacing-xs);
	}
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-split-layout,
.mate-split-layout {

    &:not([orientation="vertical"])::part(splitter) {
        min-width: var(--mate-border-width-sm);
        width: var(--mate-border-width-sm);
    }

    &[orientation="vertical"]::part(splitter) {
        min-height: var(--mate-border-width-sm);
        height: var(--mate-border-width-sm);
    }

    &:not([orientation="vertical"])::part(splitter)::before {
        height: 100%;
        left: calc(-1 * ( var(--mate-sizing-sm) - var(--mate-border-width-sm) ) / 2);
    }

    &[orientation="vertical"]::part(splitter)::before {
        top: calc(-1 * ( var(--mate-sizing-sm) - var(--mate-border-width-sm) ) / 2);
    }

    &::part(handle) {
        border-radius: var(--mate-corner-radius-sm);
    }

    &:not([orientation="vertical"])::part(handle) {
        width: 3px;
        height: var(--mate-sizing-md-lg);
    }

    &[orientation="vertical"]::part(handle) {
        width: var(--mate-sizing-md-lg);
        height: 3px;
    }
}

mate-split-layout-right {

    &[tabbed] {
        min-width: var(--mate-sizing-xl);
    }

    &:not([opened]) {
        &:not([tabbed]) {
            width: 0 !important;
        }

        &[tabbed] {
            width: var(--mate-sizing-xl);
            max-width: var(--mate-sizing-xl);

            &::part(content) {
                width: 0;
            }
        }
    }

    &::part(tabs) {
        min-width: var(--mate-sizing-xl);
        width: var(--mate-sizing-xl);
        padding: var(--mate-sizing-xxxxs) 0;
        gap: var(--mate-spacing-xxs);
    }
}

mate-split-layout-header {

    min-height: var(--mate-sizing-xl);
    border-bottom-width: var(--mate-border-width-sm);

    &::part(header) {
        padding: var(--mate-spacing-sm) var(--mate-spacing-padding);
        height: var(--mate-sizing-xl);
    }

    &::part(default-title) {
        font-family: var(--mate-typography-heading-xs-font-family);
        font-size: var(--mate-typography-heading-xs-font-size);
        font-weight:  var(--mate-typography-heading-xs-font-weight);
        line-height: var(--mate-typography-heading-xs-line-height);
    }

    > [slot="sub-header"] {
        width: unset !important;
        min-width: 0 !important;
    }

    &::part(close) {
        font-family: var(--mate-typography-font-family-icon);
        width: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        font-size: var(--mate-icon-sizing-md);
        font-weight: var(--mate-typography-font-weight-regular);
    }
}

vaadin-horizontal-layout[theme~="split-layout-footer"] {
    border-top-width: var(--mate-border-width-sm);
    padding: var(--mate-spacing-padding);
    gap: var(--mate-spacing-sm);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-tabs {
    &::part(forward-button),
    &::part(back-button) {
        width: var(--mate-icon-sizing-md);
    }

    &[orientation="vertical"] {
        &::part(forward-button),
        &::part(back-button) {
            height: var(--mate-icon-sizing-md);
        }
    }

    &::part(forward-button)::after,
    &::part(back-button)::after {
        font-family: var(--mate-typography-font-family-icon);
        width: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        font-size: var(--mate-icon-sizing-md);
        font-weight: var(--mate-typography-font-weight-regular);
    }
}


vaadin-tab {
    gap: var(--mate-spacing-xxs);
    padding: 0 var(--mate-spacing-padding);
    height: var(--mate-sizing-xl);

    font-family: var(--mate-typography-label-md-medium-font-family);
    font-size: var(--mate-typography-label-md-medium-font-size);
    font-weight: var(--mate-typography-label-md-medium-font-weight);
    line-height: var(--mate-typography-label-md-medium-line-height);

    outline-width: var(--mate-sizing-xxxxs);
    outline-offset: calc(-1 * var(--mate-sizing-xxxxs));
}


vaadin-tabs[theme~="anchor"],
vaadin-tabs[theme~="stepper"] {

    &::after {
        border-bottom-width: var(--mate-border-width-sm);
    }

    > vaadin-tab[selected]::before {
        width: 100%;
    }
}

vaadin-tabs[theme~="stepper"] {

    > vaadin-tab[selected]::before {
        border-width: var(--mate-border-width-sm);
        border-radius: var(--mate-corner-radius-sm);
    }

    > vaadin-tab {
        padding: 0 var(--mate-spacing-xxs);
    }

    > vaadin-tab::after {
        font-family: var(--mate-typography-font-family-icon);
        width: var(--mate-icon-sizing-md);
        height: var(--mate-icon-sizing-md);
        font-size: var(--mate-icon-sizing-md);
        font-weight: var(--mate-typography-font-weight-regular);
    }
}

vaadin-tabs[theme~="anchor"] {

    > vaadin-tab[selected]::before {
        border-width: var(--mate-border-width-md);
    }
}

vaadin-tabs[theme~="application-bar"] {
    padding: var(--mate-spacing-md) var(--mate-spacing-xs) var(--mate-spacing-xs) var(--mate-spacing-xs);

    > vaadin-tab {
        padding: var(--mate-spacing-xs);
        border-radius: var(--mate-corner-radius-md);
    }
}

vaadin-tabs[theme~="side-panel-tabs"] {

    > vaadin-tab {
        border-width: var(--mate-border-width-sm);
        border-start-start-radius: var(--mate-corner-radius-md);
        border-end-start-radius: var(--mate-corner-radius-md);
        margin: var(--mate-spacing-xxs) var(--mate-spacing-xxxs);
        padding: var(--mate-spacing-xs) var(--mate-spacing-sm);

        &[hint]::after {
            top: var(--mate-spacing-xxs);
            right: var(--mate-spacing-xs);
            width: var(--mate-spacing-xs);
            height: var(--mate-spacing-xs);
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-toolbar {
	height: var(--mate-sizing-md);
	gap: var(--mate-spacing-md);

	&::part(default-title) {
		font-family: var(--mate-typography-heading-xs-font-family);
		font-size: var(--mate-typography-heading-xs-font-size);
		font-weight: var(--mate-typography-heading-xs-font-weight);
		line-height: var(--mate-typography-heading-xs-line-height);
	}

	&[theme~="section"]::part(default-title) {
		font-family: var(--mate-typography-heading-md-font-family);
		font-size: var(--mate-typography-heading-md-font-size);
		font-weight: var(--mate-typography-heading-md-font-weight);
		line-height: var(--mate-typography-heading-md-line-height);
	}

	&::part(status-icon)::after {
		display: inline-block;
		font-family: var(--mate-typography-font-family-icon);
		font-size: var(--mate-icon-sizing-md);
		font-weight: var(--mate-typography-font-weight-regular);
		/* baseline aligned */
		vertical-align: -0.4rem;
	}

	&::part(loading-indicator)::after {
		width: var(--mate-icon-sizing-md);
		height: var(--mate-icon-sizing-md);
		border-width: var(--mate-sizing-xxxs);
	}
}/*
MATE Design System
Copyright (C) 2026 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vcf-toolbar-layout {

    > vaadin-button[slot="overflow-button"] {

        &::after {
            font-family: var(--mate-typography-font-family-icon);
            width: var(--mate-icon-sizing-md);
            height: var(--mate-icon-sizing-md);
            font-size: var(--mate-icon-sizing-md);
            font-weight: var(--mate-typography-font-weight-regular);
        }
    }
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-tooltip {

    &::part(overlay) {
        font-family: var(--mate-typography-body-xs-medium-font-family);
        font-size: var(--mate-typography-body-xs-medium-font-size);
        font-weight: var(--mate-typography-body-xs-medium-font-weight);
        line-height: var(--mate-typography-body-xs-medium-line-height);

        max-width: 25rem;
    }

    &::part(content) {
        padding: var(--mate-spacing-xxs) var(--mate-spacing-xs);
        border-width: var(--mate-border-width-sm);
    }
}

.mate-has-tooltip::after {
    font-family: var(--mate-typography-font-family-icon);
    padding-inline-start: var(--mate-spacing-xxxs);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/


body,
.app-root,
.mate-body {
    font-family: var(--mate-typography-font-family);
    font-size: var(--mate-typography-body-sm-regular-font-size);
    font-weight: var(--mate-typography-font-weight-regular);
    line-height: var(--mate-typography-body-sm-regular-line-height);
}

.mate-body-medium {
    font-weight: var(--mate-typography-font-weight-medium);
}

.mate-body-xs {
    font-size: var(--mate-typography-body-xs-regular-font-size);
    line-height: var(--mate-typography-body-xs-regular-line-height);
}

.mate-body-s {
    font-size: var(--mate-typography-body-sm-regular-font-size);
    line-height: var(--mate-typography-body-sm-regular-line-height);
}

.mate-body-m {
    font-size: var(--mate-typography-body-md-regular-font-size);
    line-height: var(--mate-typography-body-md-regular-line-height);
}

.mate-body-l {
    font-size: var(--mate-typography-body-lg-regular-font-size);
    line-height: var(--mate-typography-body-lg-regular-line-height);
}

h1,
.mate-heading-xxl {
	font-family: var(--mate-typography-heading-xxl-font-family);
	font-size: var(--mate-typography-heading-xxl-font-size);
	line-height: var(--mate-typography-heading-xxl-line-height);
	font-weight: var(--mate-typography-heading-xxl-font-weight);

	margin-top: var(--mate-spacing-md);
	margin-bottom: var(--mate-spacing-xxs);
}

h2,
.mate-heading-xl {
	font-family: var(--mate-typography-heading-xl-font-family);
	font-size: var(--mate-typography-heading-xl-font-size);
	line-height: var(--mate-typography-heading-xl-line-height);
	font-weight: var(--mate-typography-heading-xl-font-weight);

	margin-top: var(--mate-spacing-sm);
	margin-bottom: var(--mate-spacing-xxs);
}

h3,
.mate-heading-l {
	font-family: var(--mate-typography-heading-lg-font-family);
	font-size: var(--mate-typography-heading-lg-font-size);
	line-height: var(--mate-typography-heading-lg-line-height);
	font-weight: var(--mate-typography-heading-lg-font-weight);

	margin-top: var(--mate-spacing-sm);
	margin-bottom: var(--mate-spacing-xxs);
}

h4,
.mate-heading-m {
	font-family: var(--mate-typography-heading-md-font-family);
	font-size: var(--mate-typography-heading-md-font-size);
	line-height: var(--mate-typography-heading-md-line-height);
	font-weight: var(--mate-typography-heading-md-font-weight);

	margin-top: var(--mate-spacing-sm);
	margin-bottom: var(--mate-spacing-zero);
}

h5,
.mate-heading-s {
	font-family: var(--mate-typography-heading-sm-font-family);
	font-size: var(--mate-typography-heading-sm-font-size);
	line-height: var(--mate-typography-heading-sm-line-height);
	font-weight: var(--mate-typography-heading-sm-font-weight);

	margin-top: var(--mate-spacing-xs);
	margin-bottom: var(--mate-spacing-zero);
}

h6,
.mate-heading-xs {
	font-family: var(--mate-typography-heading-xs-font-family);
	font-size: var(--mate-typography-heading-xs-font-size);
	line-height: var(--mate-typography-heading-xs-line-height);
	font-weight: var(--mate-typography-heading-xs-font-weight);

	margin-top: var(--mate-spacing-xs);
	margin-bottom: var(--mate-spacing-zero);
}

hr {
	border-top-style: solid;
	border-top-width: var(--mate-border-width-sm);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

vaadin-custom-field:has(vaadin-upload)::part(input-fields)  {
	border-width: var(--mate-border-width-md);
	border-radius: var(--mate-corner-radius-sm);
}

vaadin-upload {
	--vaadin-upload-padding: var(--mate-spacing-padding);
	--vaadin-upload-gap: var(--mate-spacing-md);
	--vaadin-upload-file-padding: 0;

	&::part(primary-buttons) {
		gap: var(--mate-spacing-md);

		font-family: var(--mate-typography-body-sm-regular-font-family);
		font-size: var(--mate-typography-body-sm-regular-font-size);
		font-weight: var(--mate-typography-body-sm-regular-font-weight);
		line-height: var(--mate-typography-body-sm-regular-line-height);
	}
}

vaadin-upload-file {
	font-family: var(--mate-typography-body-sm-regular-font-family);
	font-size: var(--mate-typography-body-sm-regular-font-size);
	font-weight: var(--mate-typography-body-sm-regular-font-weight);
	line-height: var(--mate-typography-body-sm-regular-line-height);

	&::part(status) {
		font-family: var(--mate-typography-body-xs-regular-font-family);
		font-size: var(--mate-typography-body-xs-regular-font-size);
		font-weight: var(--mate-typography-body-xs-regular-font-weight);
		line-height: var(--mate-typography-body-xs-regular-line-height);
	}

	&::part(row),
	&::part(info) {
		gap: var(--mate-spacing-xxs);
	}
}

vaadin-upload-icon::after,
vaadin-upload-file::part(start-button)::after,
vaadin-upload-file::part(retry-button)::after,
vaadin-upload-file::part(remove-button)::after,
vaadin-upload-file::part(done-icon)::after,
vaadin-upload-file::part(warning-icon)::after {

	font-family: var(--mate-typography-font-family-icon);
	width: var(--mate-icon-sizing-md);
	height: var(--mate-icon-sizing-md);
	font-size: var(--mate-icon-sizing-md);
	font-weight: var(--mate-typography-font-weight-regular);
	/* baseline aligned */
	vertical-align: -0.4rem;
}

vaadin-upload-file::part(commands) {
	gap: var(--mate-spacing-xxs);
}

vaadin-upload-file-list::part(file-list),
vaadin-upload-file-list > li {
	gap: var(--mate-spacing-md);
}/*
MATE Design System
Copyright (C) 2025 Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB)

Licensed under the EUPL, Version 1.2 or - as soon they will be approved
by the European Commission - subsequent versions of the EUPL (the "Licence").
You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
*/

mate-dashboard .grid-stack-placeholder {
	border-radius: var(--mate-corner-radius-lg);
}/*$vite$:1*/