/* Include the fonts used by Crescent Design */
/*
 * Ideally this would use the URL directly:
 * import url('https://assets.bwbx.io/font-service/css/AvenirNextP2ForBBG:100,100i,300,300i,400,400i,500,500i,600,600i,700,700i,900,900i|RobotoMono:400,400i,700,700i/styled-font-face.css');
 * However, StyledComponents global styles does not work with import
 * - so it's been copy/pasted until we can figure out an alternative
 */

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 100;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Thin-a559885f35.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Thin-2f48f00020.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 100;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-ThinItalic-b8376f71a8.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-ThinItalic-3792ff2042.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 300;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Light-5175406f53.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Light-ba85d34cc2.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 300;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-LightItalic-f57090c0e2.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-LightItalic-fe355e220d.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 400;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Regular-517a851989.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Regular-80b65cbe3a.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 400;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Italic-7107f3ab96.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Italic-226936a4cb.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 500;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Medium-dc5d08072d.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Medium-72dcf6a6c2.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 500;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-MediumItalic-8a13467cd3.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-MediumItalic-71db2048c8.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 600;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Demi-d3cb04a057.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Demi-f362a7c4ad.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 600;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-DemiItalic-ce112bb955.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-DemiItalic-166b289109.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 700;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Bold-848b534204.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Bold-845494278e.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 700;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-BoldItalic-f577e39577.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-BoldItalic-860a65428e.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 900;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Heavy-5b0822db83.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-Heavy-3b108864bd.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNextP2ForBBG';
    font-display: swap;
    font-weight: 900;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-HeavyItalic-38cab08278.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/AvenirNextP2ForBBG-HeavyItalic-ad5430020f.woff') format('woff');
}

@font-face {
    font-family: 'RobotoMono';
    font-display: swap;
    font-weight: 400;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/RobotoMono-Regular-9b83813218.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/RobotoMono-Regular-62db283fd7.woff') format('woff');
}

@font-face {
    font-family: 'RobotoMono';
    font-display: swap;
    font-weight: 400;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/RobotoMono-Italic-231d18af59.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/RobotoMono-Italic-ada1a06cff.woff') format('woff');
}

@font-face {
    font-family: 'RobotoMono';
    font-display: swap;
    font-weight: 700;
    font-style: normal;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/RobotoMono-Bold-358b62992e.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/RobotoMono-Bold-ad601838c3.woff') format('woff');
}

@font-face {
    font-family: 'RobotoMono';
    font-display: swap;
    font-weight: 700;
    font-style: italic;

    src: url('https://assets.bwbx.io/s3/fontservice/fonts/RobotoMono-BoldItalic-b8868a8a86.woff2') format('woff2'),
    url('https://assets.bwbx.io/s3/fontservice/fonts/RobotoMono-BoldItalic-c363eb5209.woff') format('woff');
}

/** @bloomberg/crescent-tokens - 3.12.9 */
@layer {
    
:root, :host {
    --cds-color-core-none: transparent;
--cds-color-core-white: #FFFFFF;
--cds-color-core-black: #000000;
--cds-color-core-grey-10: #646464;
--cds-color-core-grey-11: #505050;
--cds-color-core-grey-12: #414141;
--cds-color-core-grey-13: #373737;
--cds-color-core-grey-14: #282828;
--cds-color-core-grey-15: #232323;
--cds-color-core-grey-16: #1E1E1E;
--cds-color-core-grey-17: #191919;
--cds-color-core-grey-18: #141414;
--cds-color-core-grey-01: #F0F0F0;
--cds-color-core-grey-02: #EBEBEB;
--cds-color-core-grey-03: #E1E1E1;
--cds-color-core-grey-04: #D7D7D7;
--cds-color-core-grey-05: #CDCDCD;
--cds-color-core-grey-06: #BEBEBE;
--cds-color-core-grey-07: #A5A5A5;
--cds-color-core-grey-08: #8C8C8C;
--cds-color-core-grey-09: #787878;
--cds-color-core-red-10: #390014;
--cds-color-core-red-01: #FFCCD2;
--cds-color-core-red-02: #FF7486;
--cds-color-core-red-03: #FF415C;
--cds-color-core-red-04: #FF2C4A;
--cds-color-core-red-05: #E61E3C;
--cds-color-core-red-06: #C31834;
--cds-color-core-red-07: #A1122C;
--cds-color-core-red-08: #7E0C24;
--cds-color-core-red-09: #5C061C;
--cds-color-core-orange-10: #471A0B;
--cds-color-core-orange-01: #FDC8B7;
--cds-color-core-orange-02: #FDAC93;
--cds-color-core-orange-03: #FC9170;
--cds-color-core-orange-04: #FB754C;
--cds-color-core-orange-05: #FA5A28;
--cds-color-core-orange-06: #D64D22;
--cds-color-core-orange-07: #B3401D;
--cds-color-core-orange-08: #8F3317;
--cds-color-core-orange-09: #6B2711;
--cds-color-core-amber-10: #492600;
--cds-color-core-amber-01: #FFDFB7;
--cds-color-core-amber-02: #FFD093;
--cds-color-core-amber-03: #FFC070;
--cds-color-core-amber-04: #FFB04C;
--cds-color-core-amber-05: #FFA028;
--cds-color-core-amber-06: #DB7500;
--cds-color-core-amber-07: #B76100;
--cds-color-core-amber-08: #924E00;
--cds-color-core-amber-09: #6E3A00;
--cds-color-core-yellow-10: #393200;
--cds-color-core-yellow-01: #FFF9CC;
--cds-color-core-yellow-02: #FFF399;
--cds-color-core-yellow-03: #FFED66;
--cds-color-core-yellow-04: #FFE733;
--cds-color-core-yellow-05: #FFE100;
--cds-color-core-yellow-06: #D7BE00;
--cds-color-core-yellow-07: #B09B00;
--cds-color-core-yellow-08: #887800;
--cds-color-core-yellow-09: #615500;
--cds-color-core-green-10: #002C09;
--cds-color-core-green-01: #C5FACF;
--cds-color-core-green-02: #8AF59E;
--cds-color-core-green-03: #50F06E;
--cds-color-core-green-04: #35D655;
--cds-color-core-green-05: #1BBC3C;
--cds-color-core-green-06: #00A223;
--cds-color-core-green-07: #00851C;
--cds-color-core-green-08: #006716;
--cds-color-core-green-09: #004A0F;
--cds-color-core-teal-10: #003339;
--cds-color-core-teal-01: #DFFCFF;
--cds-color-core-teal-02: #BFF9FF;
--cds-color-core-teal-03: #80F3FF;
--cds-color-core-teal-04: #40ECFF;
--cds-color-core-teal-05: #00E6FF;
--cds-color-core-teal-06: #00C2D7;
--cds-color-core-teal-07: #009EB0;
--cds-color-core-teal-08: #007B88;
--cds-color-core-teal-09: #005761;
--cds-color-core-blue-10: #001F53;
--cds-color-core-blue-01: #CCE3FF;
--cds-color-core-blue-02: #99C7FF;
--cds-color-core-blue-03: #66ABFF;
--cds-color-core-blue-04: #2B8EFF;
--cds-color-core-blue-05: #0073FF;
--cds-color-core-blue-06: #0062DD;
--cds-color-core-blue-07: #0051BA;
--cds-color-core-blue-08: #004098;
--cds-color-core-blue-09: #003075;
--cds-color-core-purple-10: #392149;
--cds-color-core-purple-01: #EDD0FF;
--cds-color-core-purple-02: #E4B9FF;
--cds-color-core-purple-03: #DAA2FF;
--cds-color-core-purple-04: #D18AFF;
--cds-color-core-purple-05: #C873FF;
--cds-color-core-purple-06: #AB63DB;
--cds-color-core-purple-07: #8F52B6;
--cds-color-core-purple-08: #724292;
--cds-color-core-purple-09: #56316D;
--cds-color-core-magenta-10: #450B35;
--cds-color-core-magenta-01: #FBB7E8;
--cds-color-core-magenta-02: #F993DD;
--cds-color-core-magenta-03: #F770D2;
--cds-color-core-magenta-04: #F54CC6;
--cds-color-core-magenta-05: #F328BB;
--cds-color-core-magenta-06: #D022A0;
--cds-color-core-magenta-07: #AE1D86;
--cds-color-core-magenta-08: #8B176B;
--cds-color-core-magenta-09: #681150;
--cds-font-core-family-avenir: AvenirNextP2ForBBG, Arial, Helvetica, sans-serif;
--cds-font-core-family-bloombergQ: BloombergQ, Arial, Helvetica, sans-serif;
--cds-font-core-family-roboto: RobotoMono, monospace;
--cds-font-core-decoration-none: none;
--cds-font-core-decoration-underline: underline;
--cds-font-core-transform-uppercase: uppercase;
--cds-font-core-weight-thin: 100;
--cds-font-core-weight-light: 300;
--cds-font-core-weight-regular: 400;
--cds-font-core-weight-medium: 500;
--cds-font-core-weight-semibold: 600;
--cds-font-core-weight-bold: 700;
--cds-font-core-weight-heavy: 900;
--cds-font-core-scale-10-fontsize: 2.75rem;
--cds-font-core-scale-10-lineheight: 1.273;
--cds-font-core-scale-11-fontsize: 3.25rem;
--cds-font-core-scale-11-lineheight: 1.154;
--cds-font-core-scale-12-fontsize: 4.25rem;
--cds-font-core-scale-12-lineheight: 1.088;
--cds-font-core-scale-13-fontsize: 5.25rem;
--cds-font-core-scale-13-lineheight: 1.143;
--cds-font-core-scale-14-fontsize: 6.25rem;
--cds-font-core-scale-14-lineheight: 1.12;
--cds-font-core-scale-01-fontsize: 0.5rem;
--cds-font-core-scale-01-lineheight: 1.375;
--cds-font-core-scale-02-fontsize: 0.625rem;
--cds-font-core-scale-02-lineheight: 1.2;
--cds-font-core-scale-03-fontsize: 0.75rem;
--cds-font-core-scale-03-lineheight: 1.3;
--cds-font-core-scale-04-fontsize: 0.875rem;
--cds-font-core-scale-04-lineheight: 1.429;
--cds-font-core-scale-05-fontsize: 1rem;
--cds-font-core-scale-05-lineheight: 1.5;
--cds-font-core-scale-06-fontsize: 1.25rem;
--cds-font-core-scale-06-lineheight: 1.3;
--cds-font-core-scale-07-fontsize: 1.5rem;
--cds-font-core-scale-07-lineheight: 1.25;
--cds-font-core-scale-08-fontsize: 1.75rem;
--cds-font-core-scale-08-lineheight: 1.214;
--cds-font-core-scale-09-fontsize: 2.25rem;
--cds-font-core-scale-09-lineheight: 1.167;
--cds-size-core-100-px: 40px;
--cds-size-core-100-rem: 2.5rem;
--cds-size-core-230-px: 92px;
--cds-size-core-230-rem: 5.75rem;
--cds-size-core-000-px: 0px;
--cds-size-core-000-rem: 0rem;
--cds-size-core-005-px: 2px;
--cds-size-core-005-rem: 0.125rem;
--cds-size-core-010-px: 4px;
--cds-size-core-010-rem: 0.25rem;
--cds-size-core-020-px: 8px;
--cds-size-core-020-rem: 0.5rem;
--cds-size-core-030-px: 12px;
--cds-size-core-030-rem: 0.75rem;
--cds-size-core-040-px: 16px;
--cds-size-core-040-rem: 1rem;
--cds-size-core-050-px: 20px;
--cds-size-core-050-rem: 1.25rem;
--cds-size-core-060-px: 24px;
--cds-size-core-060-rem: 1.5rem;
--cds-size-core-080-px: 32px;
--cds-size-core-080-rem: 2rem;
--cds-opacity-core-10: 0.95;
--cds-opacity-core-01: 0.05;
--cds-opacity-core-02: 0.15;
--cds-opacity-core-03: 0.25;
--cds-opacity-core-04: 0.35;
--cds-opacity-core-05: 0.45;
--cds-opacity-core-06: 0.55;
--cds-opacity-core-07: 0.65;
--cds-opacity-core-08: 0.75;
--cds-opacity-core-09: 0.85;
--cds-font-base-size: var(--cds-font-core-scale-04-fontsize);
--cds-font-base-height: var(--cds-font-core-scale-04-lineheight);
--cds-font-base-family: var(--cds-font-core-family-avenir);
--cds-font-body-large-fontsize: var(--cds-font-core-scale-05-fontsize);
--cds-font-body-large-lineheight: var(--cds-font-core-scale-05-lineheight);
--cds-font-body-large-weight: var(--cds-font-core-weight-regular);
--cds-font-body-default-fontsize: var(--cds-font-core-scale-04-fontsize);
--cds-font-body-default-lineheight: var(--cds-font-core-scale-04-lineheight);
--cds-font-body-default-weight: var(--cds-font-core-weight-regular);
--cds-font-body-default-weight-bold: var(--cds-font-core-weight-medium);
--cds-font-body-small-fontsize: var(--cds-font-core-scale-03-fontsize);
--cds-font-body-small-lineheight: var(--cds-font-core-scale-03-lineheight);
--cds-font-body-small-weight: var(--cds-font-core-weight-regular);
--cds-font-heading-01-fontsize: var(--cds-font-core-scale-09-fontsize);
--cds-font-heading-01-lineheight: var(--cds-font-core-scale-09-lineheight);
--cds-font-heading-01-weight: var(--cds-font-core-weight-medium);
--cds-font-heading-02-fontsize: var(--cds-font-core-scale-08-fontsize);
--cds-font-heading-02-lineheight: var(--cds-font-core-scale-08-lineheight);
--cds-font-heading-02-weight: var(--cds-font-core-weight-medium);
--cds-font-heading-03-fontsize: var(--cds-font-core-scale-07-fontsize);
--cds-font-heading-03-lineheight: var(--cds-font-core-scale-07-lineheight);
--cds-font-heading-03-weight: var(--cds-font-core-weight-medium);
--cds-font-heading-04-fontsize: var(--cds-font-core-scale-06-fontsize);
--cds-font-heading-04-lineheight: var(--cds-font-core-scale-06-lineheight);
--cds-font-heading-04-weight: var(--cds-font-core-weight-medium);
--cds-font-heading-05-fontsize: var(--cds-font-core-scale-05-fontsize);
--cds-font-heading-05-lineheight: var(--cds-font-core-scale-05-lineheight);
--cds-font-heading-05-weight: var(--cds-font-core-weight-semibold);
--cds-font-heading-06-fontsize: var(--cds-font-core-scale-04-fontsize);
--cds-font-heading-06-lineheight: var(--cds-font-core-scale-04-lineheight);
--cds-font-heading-06-weight: var(--cds-font-core-weight-semibold);
--cds-font-heading-07-fontsize: var(--cds-font-core-scale-03-fontsize);
--cds-font-heading-07-lineheight: var(--cds-font-core-scale-03-lineheight);
--cds-font-heading-07-weight: var(--cds-font-core-weight-semibold);
--cds-font-groupheading-01-fontsize: var(--cds-font-heading-06-fontsize);
--cds-font-groupheading-01-lineheight: var(--cds-font-heading-06-lineheight);
--cds-font-groupheading-01-weight: var(--cds-font-core-weight-medium);
--cds-font-groupheading-01-transform: var(--cds-font-core-transform-uppercase);
--cds-font-groupheading-02-fontsize: var(--cds-font-heading-07-fontsize);
--cds-font-groupheading-02-lineheight: var(--cds-font-heading-07-lineheight);
--cds-font-groupheading-02-weight: var(--cds-font-heading-07-weight);
--cds-font-groupheading-02-transform: var(--cds-font-core-transform-uppercase);
--cds-font-label-default-fontsize: var(--cds-font-core-scale-04-fontsize);
--cds-font-label-default-lineheight: var(--cds-font-core-scale-04-lineheight);
--cds-font-label-default-weight: var(--cds-font-core-weight-medium);
--cds-font-label-default-weight-bold: var(--cds-font-core-weight-semibold);
--cds-font-label-small-fontsize: var(--cds-font-core-scale-03-fontsize);
--cds-font-label-small-lineheight: var(--cds-font-core-scale-03-lineheight);
--cds-font-label-small-weight: var(--cds-font-core-weight-semibold);
--cds-font-label-xsmall-fontsize: var(--cds-font-core-scale-02-fontsize);
--cds-font-label-xsmall-lineheight: var(--cds-font-core-scale-02-lineheight);
--cds-font-label-xsmall-weight: var(--cds-font-core-weight-bold);
--cds-font-label-xsmall-transform: var(--cds-font-core-transform-uppercase);
--cds-font-button-label-fontsize: var(--cds-font-core-scale-04-fontsize);
--cds-font-button-label-lineheight: var(--cds-font-core-scale-04-lineheight);
--cds-font-button-label-weight: var(--cds-font-core-weight-medium);
--cds-font-datadisplay-01-fontsize: var(--cds-font-heading-02-fontsize);
--cds-font-datadisplay-01-lineheight: var(--cds-font-heading-02-lineheight);
--cds-font-datadisplay-01-weight: var(--cds-font-core-weight-regular);
--cds-font-datadisplay-02-fontsize: var(--cds-font-heading-03-fontsize);
--cds-font-datadisplay-02-lineheight: var(--cds-font-heading-03-lineheight);
--cds-font-datadisplay-02-weight: var(--cds-font-core-weight-regular);
--cds-font-link-default-decoration: var(--cds-font-core-decoration-underline);
--cds-font-code-family: var(--cds-font-core-family-roboto);
--cds-font-display-01-fontsize: var(--cds-font-core-scale-12-fontsize);
--cds-font-display-01-lineheight: var(--cds-font-core-scale-12-lineheight);
--cds-font-display-01-weight: var(--cds-font-core-weight-regular);
--cds-font-display-01-weight-bold: var(--cds-font-core-weight-bold);
--cds-font-display-02-fontsize: var(--cds-font-core-scale-11-fontsize);
--cds-font-display-02-lineheight: var(--cds-font-core-scale-11-lineheight);
--cds-font-display-02-weight: var(--cds-font-core-weight-regular);
--cds-font-display-02-weight-bold: var(--cds-font-core-weight-bold);
--cds-font-display-03-fontsize: var(--cds-font-core-scale-10-fontsize);
--cds-font-display-03-lineheight: var(--cds-font-core-scale-10-lineheight);
--cds-font-display-03-weight: var(--cds-font-core-weight-regular);
--cds-font-display-03-weight-bold: var(--cds-font-core-weight-bold);
}
:root, :host,
[data-cds-sizing="regular"],
[data-cds-sizing="regular*"] *,
[data-cds-sizing="regular[*]"] tbody :where(td,th) *,

[data-cds-sizing="compact"] [data-cds-sizing="regular"],
[data-cds-sizing="compact*"] [data-cds-sizing="regular"],
[data-cds-sizing="compact*"] [data-cds-sizing="regular"] *,
[data-cds-sizing="compact[*]"] [data-cds-sizing="regular"],
[data-cds-sizing="compact[*]"] [data-cds-sizing="regular"] * {
    --cds-button-size-padding-left: var(--cds-size-core-030-px);
--cds-button-size-padding-right: var(--cds-size-core-030-px);
--cds-button-size-padding-top: var(--cds-size-core-020-px);
--cds-button-size-padding-bottom: var(--cds-size-core-020-px);
--cds-button-size-minheight: var(--cds-size-core-100-px);
--cds-button-size-minwidth: var(--cds-size-core-100-px);
--cds-button-size-icongap: var(--cds-size-core-020-px);
--cds-inlinecode-size-padding-left: var(--cds-size-core-010-px);
--cds-inlinecode-size-padding-right: var(--cds-size-core-010-px);
--cds-inlinecode-size-borderradius: var(--cds-size-core-005-px);
--cds-input-size-padding-left: var(--cds-size-core-030-px);
--cds-input-size-padding-right: var(--cds-size-core-030-px);
--cds-input-size-padding-top: var(--cds-size-core-020-px);
--cds-input-size-padding-bottom: var(--cds-size-core-020-px);
--cds-input-size-minheight: var(--cds-size-core-100-px);
--cds-input-size-minwidth: var(--cds-size-core-000-px);
--cds-input-size-icongap: var(--cds-size-core-020-px);
--cds-input-size-icon: var(--cds-size-core-040-rem);
--cds-input-label-size-margin-bottom: var(--cds-size-core-020-px);
--cds-input-label-size-icongap: var(--cds-size-core-010-px);
--cds-input-token-size-padding-left: 10px;
--cds-input-token-size-padding-right: 10px;
--cds-input-token-size-padding-top: var(--cds-size-core-005-px);
--cds-input-token-size-padding-bottom: var(--cds-size-core-005-px);
--cds-input-token-size-margin-top: var(--cds-size-core-020-px);
--cds-input-helpertext-size-margin-top: var(--cds-size-core-010-px);
--cds-menu-filter-size-padding-top: var(--cds-size-core-020-px);
--cds-menu-filter-size-padding-bottom: var(--cds-size-core-020-px);
--cds-menu-scroll-size-padding-top: var(--cds-size-core-020-px);
--cds-menu-scroll-size-padding-bottom: 6px;
--cds-menu-item-size-padding-top: 6px;
--cds-menu-item-size-padding-bottom: 6px;
--cds-menu-item-size-padding-left: 14px;
--cds-menu-item-size-padding-right: 14px;
--cds-menu-item-size-minheight: var(--cds-size-core-080-px);
--cds-menu-group-size-margin-top: var(--cds-size-core-030-px);
--cds-menu-tag-size-padding-top: var(--cds-size-core-005-px);
--cds-menu-tag-size-padding-bottom: var(--cds-size-core-005-px);
--cds-menu-tag-size-padding-left: var(--cds-size-core-010-px);
--cds-menu-tag-size-padding-right: var(--cds-size-core-010-px);
--cds-menu-actionitem-size-padding-top: 9px;
--cds-menu-actionitem-size-padding-bottom: 9px;
--cds-menu-actionitem-size-minheight: var(--cds-size-core-100-px);
--cds-pagination-size-textgap: var(--cds-size-core-030-px);
--cds-splitbutton-divider-size-padding-block: var(--cds-size-core-020-px);
--cds-cell-size-padding-left: 6px;
--cds-cell-size-padding-right: 6px;
--cds-cell-size-padding-top: var(--cds-size-core-020-px);
--cds-cell-size-padding-bottom: var(--cds-size-core-020-px);
--cds-cell-size-minheight: var(--cds-size-core-100-px);
--cds-cell-size-minwidth: var(--cds-size-core-080-px);
--cds-tablerow-size-padding-left: 6px;
--cds-tablerow-size-padding-right: 6px;
--cds-token-size-padding-left: var(--cds-size-core-030-px);
--cds-token-size-padding-right: var(--cds-size-core-030-px);
--cds-token-size-padding-top: var(--cds-size-core-010-px);
--cds-token-size-padding-bottom: var(--cds-size-core-010-px);
--cds-token-size-padding-lefticon: var(--cds-size-core-020-px);
--cds-token-size-padding-rightaction: var(--cds-size-core-010-px);
--cds-token-size-minheight: var(--cds-size-core-080-px);
--cds-token-size-minwidth: var(--cds-size-core-080-px);
--cds-token-size-icongap: var(--cds-size-core-010-px);
--cds-token-size-actiongap: var(--cds-size-core-020-px);
--cds-tree-size-padding-right: var(--cds-size-core-020-px);
--cds-tree-size-arrowsize: var(--cds-size-core-050-rem);
--cds-tree-size-indentgap: var(--cds-size-core-060-px);
--cds-tree-size-columngap: var(--cds-size-core-010-px);
--cds-tree-size-borderwidth: var(--cds-size-core-010-px);
--cds-tree-size-textgap: var(--cds-size-core-060-px);
--cds-tree-actions-size-separatormargin: var(--cds-size-core-010-px);
}
[data-cds-sizing="compact"],
[data-cds-sizing="compact*"] *,
[data-cds-sizing="compact[*]"] tbody :where(td,th) *,
[data-cds-sizing="regular"] [data-cds-sizing="compact"],
[data-cds-sizing="regular*"] [data-cds-sizing="compact"],
[data-cds-sizing="regular*"] [data-cds-sizing="compact"] *,
[data-cds-sizing="regular[*]"] [data-cds-sizing="compact"],
[data-cds-sizing="regular[*]"] [data-cds-sizing="compact"] * {
    --cds-button-size-padding-left: var(--cds-size-core-030-px);
--cds-button-size-padding-right: var(--cds-size-core-030-px);
--cds-button-size-padding-top: 1px;
--cds-button-size-padding-bottom: 1px;
--cds-button-size-minheight: var(--cds-size-core-060-px);
--cds-button-size-minwidth: var(--cds-size-core-060-px);
--cds-button-size-icongap: var(--cds-size-core-010-px);
--cds-input-size-padding-left: var(--cds-size-core-030-px);
--cds-input-size-padding-right: var(--cds-size-core-030-px);
--cds-input-size-padding-top: var(--cds-size-core-005-px);
--cds-input-size-padding-bottom: var(--cds-size-core-005-px);
--cds-input-size-minheight: var(--cds-size-core-060-px);
--cds-input-size-minwidth: var(--cds-size-core-000-px);
--cds-input-size-icongap: var(--cds-size-core-020-px);
--cds-input-size-icon: var(--cds-size-core-030-rem);
--cds-input-label-size-margin-bottom: var(--cds-size-core-020-px);
--cds-input-label-size-icongap: var(--cds-size-core-010-px);
--cds-input-token-size-padding-left: var(--cds-size-core-020-px);
--cds-input-token-size-padding-right: var(--cds-size-core-020-px);
--cds-input-token-size-padding-top: 0px;
--cds-input-token-size-padding-bottom: 0px;
--cds-input-token-size-margin-top: 1px;
--cds-input-helpertext-size-margin-top: var(--cds-size-core-010-px);
--cds-menu-filter-size-padding-top: var(--cds-size-core-020-px);
--cds-menu-filter-size-padding-bottom: var(--cds-size-core-020-px);
--cds-menu-scroll-size-padding-top: var(--cds-size-core-020-px);
--cds-menu-scroll-size-padding-bottom: 6px;
--cds-menu-item-size-padding-top: 6px;
--cds-menu-item-size-padding-bottom: 6px;
--cds-menu-item-size-padding-left: 14px;
--cds-menu-item-size-padding-right: 14px;
--cds-menu-item-size-minheight: var(--cds-size-core-080-px);
--cds-menu-group-size-margin-top: 6px;
--cds-menu-tag-size-padding-top: var(--cds-size-core-005-px);
--cds-menu-tag-size-padding-bottom: var(--cds-size-core-005-px);
--cds-menu-tag-size-padding-left: var(--cds-size-core-010-px);
--cds-menu-tag-size-padding-right: var(--cds-size-core-010-px);
--cds-menu-actionitem-size-padding-top: 5px;
--cds-menu-actionitem-size-padding-bottom: 5px;
--cds-menu-actionitem-size-minheight: var(--cds-size-core-080-px);
--cds-pagination-size-textgap: var(--cds-size-core-030-px);
--cds-splitbutton-divider-size-padding-block: var(--cds-size-core-010-px);
--cds-cell-size-padding-left: 6px;
--cds-cell-size-padding-right: 6px;
--cds-cell-size-padding-top: var(--cds-size-core-010-px);
--cds-cell-size-padding-bottom: var(--cds-size-core-010-px);
--cds-cell-size-minheight: var(--cds-size-core-080-px);
--cds-cell-size-minwidth: var(--cds-size-core-080-px);
--cds-tablerow-size-padding-left: 6px;
--cds-tablerow-size-padding-right: 6px;
--cds-token-size-padding-left: var(--cds-size-core-030-px);
--cds-token-size-padding-right: var(--cds-size-core-030-px);
--cds-token-size-padding-top: var(--cds-size-core-005-px);
--cds-token-size-padding-bottom: var(--cds-size-core-005-px);
--cds-token-size-padding-lefticon: var(--cds-size-core-020-px);
--cds-token-size-padding-rightaction: var(--cds-size-core-010-px);
--cds-token-size-minheight: var(--cds-size-core-060-px);
--cds-token-size-minwidth: var(--cds-size-core-060-px);
--cds-token-size-icongap: var(--cds-size-core-010-px);
--cds-token-size-actiongap: var(--cds-size-core-030-px);
}

    
:root, :host, [data-cds-theme="light"] {
    color-scheme: light;
    --cds-color-chart-dot-a: var(--cds-color-core-black);
--cds-color-chart-dot-b: var(--cds-color-core-blue-05);
--cds-color-chart-dot-c: var(--cds-color-core-orange-05);
--cds-color-chart-dot-d: var(--cds-color-core-purple-06);
--cds-color-chart-dot-e: var(--cds-color-core-yellow-07);
--cds-color-chart-dot-f: var(--cds-color-core-teal-07);
--cds-color-chart-dot-g: var(--cds-color-core-amber-06);
--cds-color-chart-dot-h: var(--cds-color-core-magenta-05);
--cds-color-chart-dot-i: var(--cds-color-core-green-05);
--cds-color-chart-dot-j: var(--cds-color-core-purple-05);
--cds-color-chart-dot-k: var(--cds-color-core-yellow-06);
--cds-color-chart-dot-l: var(--cds-color-core-teal-06);
--cds-color-chart-dot-m: var(--cds-color-core-red-04);
--cds-color-chart-dot-n: var(--cds-color-core-blue-04);
--cds-color-chart-dot-o: var(--cds-color-core-green-04);
--cds-color-chart-dot-p: var(--cds-color-core-magenta-04);
--cds-color-chart-dot-q: var(--cds-color-core-orange-04);
--cds-color-chart-dot-r: var(--cds-color-core-grey-08);
--cds-color-chart-dot-s: var(--cds-color-core-amber-05);
--cds-color-chart-dot-t: var(--cds-color-core-red-06);
--cds-color-chart-line-a: var(--cds-color-core-black);
--cds-color-chart-line-b: var(--cds-color-core-blue-05);
--cds-color-chart-line-c: var(--cds-color-core-orange-05);
--cds-color-chart-line-d: var(--cds-color-core-purple-06);
--cds-color-chart-line-e: var(--cds-color-core-yellow-07);
--cds-color-chart-line-f: var(--cds-color-core-teal-07);
--cds-color-chart-line-g: var(--cds-color-core-amber-06);
--cds-color-chart-line-h: var(--cds-color-core-magenta-05);
--cds-color-chart-line-i: var(--cds-color-core-green-05);
--cds-color-chart-line-j: var(--cds-color-core-purple-05);
--cds-color-chart-line-k: var(--cds-color-core-yellow-06);
--cds-color-chart-line-l: var(--cds-color-core-teal-06);
--cds-color-chart-line-m: var(--cds-color-core-red-04);
--cds-color-chart-line-n: var(--cds-color-core-blue-04);
--cds-color-chart-line-o: var(--cds-color-core-green-04);
--cds-color-chart-line-p: var(--cds-color-core-magenta-04);
--cds-color-chart-line-q: var(--cds-color-core-orange-04);
--cds-color-chart-line-r: var(--cds-color-core-grey-08);
--cds-color-chart-line-s: var(--cds-color-core-amber-05);
--cds-color-chart-line-t: var(--cds-color-core-red-06);
--cds-color-chart-bar-a: var(--cds-color-core-grey-05);
--cds-color-chart-bar-b: var(--cds-color-core-blue-02);
--cds-color-chart-bar-c: var(--cds-color-core-orange-02);
--cds-color-chart-bar-d: var(--cds-color-core-purple-02);
--cds-color-chart-bar-e: var(--cds-color-core-yellow-03);
--cds-color-chart-bar-f: var(--cds-color-core-teal-03);
--cds-color-chart-bar-g: var(--cds-color-core-amber-02);
--cds-color-chart-bar-h: var(--cds-color-core-magenta-02);
--cds-color-chart-bar-i: var(--cds-color-core-green-02);
--cds-color-chart-bar-j: var(--cds-color-core-purple-01);
--cds-color-chart-bar-k: var(--cds-color-core-yellow-02);
--cds-color-chart-bar-l: var(--cds-color-core-teal-02);
--cds-color-chart-bar-m: var(--cds-color-core-red-01);
--cds-color-chart-bar-n: var(--cds-color-core-blue-01);
--cds-color-chart-bar-o: var(--cds-color-core-green-01);
--cds-color-chart-bar-p: var(--cds-color-core-magenta-01);
--cds-color-chart-bar-q: var(--cds-color-core-orange-01);
--cds-color-chart-bar-r: var(--cds-color-core-grey-04);
--cds-color-chart-bar-s: var(--cds-color-core-amber-01);
--cds-color-chart-bar-t: var(--cds-color-core-red-02);
--cds-color-chart-neutral-high-a: var(--cds-color-core-blue-10);
--cds-color-chart-neutral-high-b: var(--cds-color-core-blue-08);
--cds-color-chart-neutral-high-c: var(--cds-color-core-blue-06);
--cds-color-chart-neutral-high-d: var(--cds-color-core-blue-04);
--cds-color-chart-neutral-high-e: var(--cds-color-core-blue-02);
--cds-color-background: var(--cds-color-core-white);
--cds-color-background-secondary: var(--cds-color-core-grey-01);
--cds-color-background-hover: var(--cds-color-core-grey-02);
--cds-color-background-selected: #CCE3FF8C;
--cds-color-background-selectedhover: #CCE3FF8C;
--cds-color-background-none: var(--cds-color-core-none);
--cds-color-text: var(--cds-color-core-grey-15);
--cds-color-text-secondary: var(--cds-color-core-grey-10);
--cds-color-icon-strong: var(--cds-color-core-grey-15);
--cds-color-icon-moderate: var(--cds-color-core-grey-09);
--cds-color-border-strong: var(--cds-color-core-grey-10);
--cds-color-border-moderate: var(--cds-color-core-grey-07);
--cds-color-border-subtle: var(--cds-color-core-grey-04);
--cds-color-link-text-idle: var(--cds-color-core-blue-06);
--cds-color-link-text-hover: var(--cds-color-core-blue-09);
--cds-color-link-text-visited: var(--cds-color-core-purple-08);
--cds-color-link-icon-idle: var(--cds-color-core-blue-06);
--cds-color-link-icon-hover: var(--cds-color-core-blue-09);
--cds-color-link-icon-visited: var(--cds-color-core-purple-08);
--cds-color-scrollbar-bar: var(--cds-color-core-grey-08);
--cds-color-scrollbar-track: var(--cds-color-core-none);
--cds-color-overlay-background: #FFFFFFD9;
--cds-color-inverse-background: var(--cds-color-core-grey-18);
--cds-color-inverse-text: var(--cds-color-core-white);
--cds-color-inverse-icon: var(--cds-color-core-white);
--cds-color-dropshadow-default: #00000059;
--cds-color-popover-background: var(--cds-color-core-white);
--cds-color-highlighttext-background: var(--cds-color-core-blue-04);
--cds-color-highlighttext-text: var(--cds-color-core-white);
--cds-color-indicator-greya-background: var(--cds-color-core-grey-04);
--cds-color-indicator-greya-text: var(--cds-color-core-grey-15);
--cds-color-indicator-greyb-background: var(--cds-color-core-grey-06);
--cds-color-indicator-greyb-text: var(--cds-color-core-grey-15);
--cds-color-indicator-green-background: var(--cds-color-core-green-03);
--cds-color-indicator-green-text: var(--cds-color-core-grey-15);
--cds-color-indicator-blue-background: var(--cds-color-core-blue-02);
--cds-color-indicator-blue-text: var(--cds-color-core-grey-15);
--cds-color-indicator-teal-background: var(--cds-color-core-teal-06);
--cds-color-indicator-teal-text: var(--cds-color-core-grey-15);
--cds-color-indicator-purple-background: var(--cds-color-core-purple-04);
--cds-color-indicator-purple-text: var(--cds-color-core-black);
--cds-color-indicator-red-background: var(--cds-color-core-red-05);
--cds-color-indicator-red-text: var(--cds-color-core-white);
--cds-color-indicator-magenta-background: var(--cds-color-core-magenta-03);
--cds-color-indicator-magenta-text: var(--cds-color-core-black);
--cds-color-indicator-yellow-background: var(--cds-color-core-yellow-03);
--cds-color-indicator-yellow-text: var(--cds-color-core-grey-15);
--cds-color-indicator-orange-background: var(--cds-color-core-orange-04);
--cds-color-indicator-orange-text: var(--cds-color-core-black);
--cds-color-indicator-amber-background: var(--cds-color-core-amber-04);
--cds-color-indicator-amber-text: var(--cds-color-core-grey-15);
--cds-color-placeholder-text: var(--cds-color-core-grey-10);
--cds-color-insensitive-background: var(--cds-color-core-grey-02);
--cds-color-insensitive-text: var(--cds-color-core-grey-07);
--cds-color-insensitive-icon: var(--cds-color-core-grey-07);
--cds-color-insensitive-border: var(--cds-color-core-grey-04);
--cds-color-readonly-background: var(--cds-color-core-none);
--cds-color-readonly-text: var(--cds-color-core-grey-15);
--cds-color-readonly-icon: var(--cds-color-core-grey-07);
--cds-color-readonly-border: var(--cds-color-core-grey-04);
--cds-color-focus-border: var(--cds-color-core-blue-06);
--cds-color-destruction-text: var(--cds-color-core-white);
--cds-color-destruction-icon: var(--cds-color-core-white);
--cds-color-destruction-background-idle: var(--cds-color-core-red-05);
--cds-color-destruction-background-hover: var(--cds-color-core-red-04);
--cds-color-destruction-background-pressed: var(--cds-color-core-red-06);
--cds-color-selectedgraphics-background-primary: var(--cds-color-core-blue-06);
--cds-color-selectedgraphics-background-secondary: var(--cds-color-core-blue-06);
--cds-color-success-text: var(--cds-color-core-green-08);
--cds-color-success-icon: var(--cds-color-core-green-07);
--cds-color-success-border: var(--cds-color-core-green-06);
--cds-color-success-background-idle: #C5FACFA6;
--cds-color-success-background-hover: var(--cds-color-core-green-01);
--cds-color-success-background-selected: #C5FACFA6;
--cds-color-success-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-successpanel-text: var(--cds-color-core-grey-15);
--cds-color-successpanel-icon: var(--cds-color-core-grey-15);
--cds-color-successpanel-link: var(--cds-color-core-grey-15);
--cds-color-successpanel-border-moderate: var(--cds-color-core-green-06);
--cds-color-successpanel-border-subtle: var(--cds-color-core-green-05);
--cds-color-successpanel-background-idle: var(--cds-color-core-green-03);
--cds-color-successpanel-background-hover: var(--cds-color-core-green-02);
--cds-color-warning-text: var(--cds-color-core-yellow-09);
--cds-color-warning-icon: var(--cds-color-core-yellow-06);
--cds-color-warning-icon-secondary: var(--cds-color-core-grey-18);
--cds-color-warning-border: var(--cds-color-core-yellow-06);
--cds-color-warning-background-idle: #FFF9CCA6;
--cds-color-warning-background-hover: var(--cds-color-core-yellow-01);
--cds-color-warning-background-selected: #FFF9CCA6;
--cds-color-warning-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-warningpanel-text: var(--cds-color-core-grey-15);
--cds-color-warningpanel-icon: var(--cds-color-core-grey-15);
--cds-color-warningpanel-link: var(--cds-color-core-grey-15);
--cds-color-warningpanel-border-moderate: var(--cds-color-core-yellow-07);
--cds-color-warningpanel-border-subtle: var(--cds-color-core-yellow-06);
--cds-color-warningpanel-background-idle: var(--cds-color-core-yellow-03);
--cds-color-warningpanel-background-hover: var(--cds-color-core-yellow-02);
--cds-color-error-text: var(--cds-color-core-red-06);
--cds-color-error-icon: var(--cds-color-core-red-06);
--cds-color-error-border: var(--cds-color-core-red-06);
--cds-color-error-background-idle: #FFCCD2A6;
--cds-color-error-background-hover: var(--cds-color-core-red-01);
--cds-color-error-background-selected: #FFCCD2A6;
--cds-color-error-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-errorpanel-text: var(--cds-color-core-white);
--cds-color-errorpanel-icon: var(--cds-color-core-white);
--cds-color-errorpanel-link: var(--cds-color-core-white);
--cds-color-errorpanel-border-moderate: var(--cds-color-core-red-07);
--cds-color-errorpanel-border-subtle: var(--cds-color-core-red-06);
--cds-color-errorpanel-background-idle: var(--cds-color-core-red-05);
--cds-color-errorpanel-background-hover: var(--cds-color-core-red-04);
--cds-color-information-text: var(--cds-color-core-grey-15);
--cds-color-information-icon-strong: var(--cds-color-core-grey-15);
--cds-color-information-background-idle: var(--cds-color-core-grey-04);
--cds-color-informationpanel-text: var(--cds-color-core-grey-15);
--cds-color-informationpanel-icon: var(--cds-color-core-grey-15);
--cds-color-informationpanel-link: var(--cds-color-core-grey-15);
--cds-color-informationpanel-border-moderate: var(--cds-color-core-blue-06);
--cds-color-informationpanel-border-subtle: var(--cds-color-core-blue-03);
--cds-color-informationpanel-background-idle: var(--cds-color-core-blue-02);
--cds-color-informationpanel-background-hover: var(--cds-color-core-blue-01);
--cds-color-progress-text: var(--cds-color-core-purple-07);
--cds-color-progress-icon: var(--cds-color-core-purple-07);
--cds-color-progress-border: var(--cds-color-core-purple-07);
--cds-color-progress-background-idle: #EDD0FFA6;
--cds-color-progress-background-hover: var(--cds-color-core-purple-01);
--cds-color-progress-background-selected: #EDD0FFA6;
--cds-color-progress-backgroundbar-selected: var(--cds-color-core-blue-06);--cds-button-primary-color-text: var(--cds-color-core-white);
--cds-button-primary-color-text-idle: var(--cds-color-core-white);
--cds-button-primary-color-text-hover: var(--cds-color-core-white);
--cds-button-primary-color-text-pressed: var(--cds-color-core-white);
--cds-button-primary-color-icon: var(--cds-color-core-white);
--cds-button-primary-color-icon-idle: var(--cds-color-core-white);
--cds-button-primary-color-icon-hover: var(--cds-color-core-white);
--cds-button-primary-color-icon-pressed: var(--cds-color-core-white);
--cds-button-primary-color-border: var(--cds-color-core-none);
--cds-button-primary-color-background-idle: var(--cds-color-core-blue-06);
--cds-button-primary-color-background-hover: var(--cds-color-core-blue-04);
--cds-button-primary-color-background-pressed: var(--cds-color-core-blue-07);
--cds-button-secondary-color-text-idle: var(--cds-color-core-blue-07);
--cds-button-secondary-color-text-hover: var(--cds-color-core-blue-09);
--cds-button-secondary-color-text-pressed: var(--cds-color-core-blue-09);
--cds-button-secondary-color-icon-idle: var(--cds-color-core-blue-07);
--cds-button-secondary-color-icon-hover: var(--cds-color-core-blue-09);
--cds-button-secondary-color-icon-pressed: var(--cds-color-core-blue-09);
--cds-button-secondary-color-background-idle: var(--cds-color-core-blue-01);
--cds-button-secondary-color-background-hover: var(--cds-color-core-blue-02);
--cds-button-secondary-color-background-pressed: var(--cds-color-core-blue-03);
--cds-button-secondary-color-border: var(--cds-color-core-none);
--cds-button-tertiary-color-text-idle: var(--cds-color-core-blue-06);
--cds-button-tertiary-color-text-hover: var(--cds-color-core-blue-09);
--cds-button-tertiary-color-text-pressed: var(--cds-color-core-blue-09);
--cds-button-tertiary-color-icon-idle: var(--cds-color-core-blue-06);
--cds-button-tertiary-color-icon-hover: var(--cds-color-core-blue-09);
--cds-button-tertiary-color-icon-pressed: var(--cds-color-core-blue-09);
--cds-button-tertiary-color-background-idle: var(--cds-color-core-none);
--cds-button-tertiary-color-background-hover: var(--cds-color-core-blue-02);
--cds-button-tertiary-color-background-pressed: var(--cds-color-core-blue-03);
--cds-button-tertiary-color-border: var(--cds-color-core-none);
--cds-button-destruction-color-text: var(--cds-color-core-white);
--cds-button-destruction-color-text-idle: var(--cds-color-core-white);
--cds-button-destruction-color-text-hover: var(--cds-color-core-white);
--cds-button-destruction-color-text-pressed: var(--cds-color-core-white);
--cds-button-destruction-color-icon: var(--cds-color-core-white);
--cds-button-destruction-color-icon-idle: var(--cds-color-core-white);
--cds-button-destruction-color-icon-hover: var(--cds-color-core-white);
--cds-button-destruction-color-icon-pressed: var(--cds-color-core-white);
--cds-button-destruction-color-border: var(--cds-color-core-none);
--cds-button-destruction-color-background-idle: var(--cds-color-core-red-05);
--cds-button-destruction-color-background-hover: var(--cds-color-core-red-04);
--cds-button-destruction-color-background-pressed: var(--cds-color-core-red-06);
--cds-button-tertiaryicon-color-icon: var(--cds-color-core-grey-15);
--cds-button-tertiaryicon-color-background-idle: var(--cds-color-core-none);
--cds-button-tertiaryicon-color-background-hover: var(--cds-color-core-blue-02);
--cds-button-tertiaryicon-color-background-pressed: var(--cds-color-core-blue-03);
--cds-button-tertiaryicon-color-border: var(--cds-color-core-none);
--cds-datepicker-color-default-background-idle: var(--cds-color-core-white);
--cds-datepicker-color-default-background-hover: var(--cds-color-core-grey-02);
--cds-datepicker-color-default-background-focus: var(--cds-color-core-grey-02);
--cds-datepicker-color-default-border-pressed: var(--cds-color-core-grey-06);
--cds-datepicker-color-default-dropshadow: #00000059;
--cds-datepicker-color-default-text-idle: var(--cds-color-core-grey-15);
--cds-datepicker-color-default-text-othermonths: var(--cds-color-core-grey-10);
--cds-datepicker-color-default-text-insensitive: var(--cds-color-core-grey-07);
--cds-datepicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-datepicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-datepicker-color-selected-text-idle: var(--cds-color-core-grey-15);
--cds-datepicker-color-selected-background-hover: var(--cds-color-core-blue-08);
--cds-daterange-color-default-background-idle: var(--cds-color-core-white);
--cds-daterange-color-default-background-hover: var(--cds-color-core-grey-02);
--cds-daterange-color-default-background-focus: var(--cds-color-core-grey-02);
--cds-daterange-color-default-border-pressed: var(--cds-color-core-grey-06);
--cds-daterange-color-default-dropshadow: #00000059;
--cds-daterange-color-default-text-idle: var(--cds-color-core-grey-15);
--cds-daterange-color-default-text-insensitive: var(--cds-color-core-grey-07);
--cds-daterange-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-daterange-color-inrange-background-idle: var(--cds-color-core-blue-06);
--cds-daterange-color-inrange-background-hover: var(--cds-color-core-blue-08);
--cds-daterange-color-inrange-border-pressed: var(--cds-color-core-white);
--cds-daterange-color-inrange-border-focus: var(--cds-color-core-white);
--cds-daterange-color-inrange-text-idle: var(--cds-color-core-white);
--cds-daterange-color-rangestartend-background-focus: var(--cds-color-core-grey-04);
--cds-daterange-color-rangestartend-border-idle: var(--cds-color-core-blue-06);
--cds-datetimepicker-color-default-background-idle: var(--cds-color-core-white);
--cds-datetimepicker-color-default-background-hover: var(--cds-color-core-grey-02);
--cds-datetimepicker-color-default-background-focus: var(--cds-color-core-grey-02);
--cds-datetimepicker-color-default-border-pressed: var(--cds-color-core-grey-06);
--cds-datetimepicker-color-default-dropshadow: #00000059;
--cds-datetimepicker-color-default-text-idle: var(--cds-color-core-grey-15);
--cds-datetimepicker-color-default-text-othermonths: var(--cds-color-core-grey-10);
--cds-datetimepicker-color-default-text-insensitive: var(--cds-color-core-grey-07);
--cds-datetimepicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-datetimepicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-dropzone-color-background-selected: #E3F0FF;
--cds-dropzone-color-background-inprogress: #E3F0FF;
--cds-footer-color-background: var(--cds-color-core-black);
--cds-footer-color-border: var(--cds-color-core-grey-10);
--cds-footer-color-text: var(--cds-color-core-white);
--cds-monthpicker-color-default-background-idle: var(--cds-color-core-white);
--cds-monthpicker-color-default-background-hover: var(--cds-color-core-grey-02);
--cds-monthpicker-color-default-background-focus: var(--cds-color-core-grey-02);
--cds-monthpicker-color-default-border-pressed: var(--cds-color-core-grey-06);
--cds-monthpicker-color-default-dropshadow: #00000059;
--cds-monthpicker-color-default-text-idle: var(--cds-color-core-grey-15);
--cds-monthpicker-color-default-text-insensitive: var(--cds-color-core-grey-07);
--cds-monthpicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-monthpicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-progress-color-background: var(--cds-color-core-blue-06);
--cds-progress-color-background-secondary: var(--cds-color-core-grey-04);
--cds-progressspinner-color-background: var(--cds-color-core-amber-05);
--cds-skeletonpulse-color-background-a: var(--cds-color-core-grey-01);
--cds-skeletonpulse-color-background-b: var(--cds-color-core-grey-04);
--cds-skeletonpulse-color-background-c: var(--cds-color-core-grey-01);
--cds-slider-color-background: var(--cds-color-core-blue-06);
--cds-slider-color-background-secondary: var(--cds-color-core-grey-04);
--cds-slider-color-background-insensitive: var(--cds-color-core-grey-07);
--cds-slider-color-background-hover: #0062DD59;
--cds-switch-color-icon: var(--cds-color-core-white);
--cds-table-color-resize-border: var(--cds-color-core-grey-15);
--cds-table-color-resize-border-secondary: var(--cds-color-core-grey-06);
--cds-tabletoolbar-color-background: var(--cds-color-core-grey-03);
--cds-tabs-color-background-idle: var(--cds-color-core-grey-01);
--cds-tabs-color-background-hover: var(--cds-color-core-grey-02);
--cds-titlebar-color-background: var(--cds-color-core-black);
--cds-titlebar-color-icon: var(--cds-color-core-white);
--cds-titlebar-color-border: var(--cds-color-core-grey-10);
--cds-titlebar-color-text: var(--cds-color-core-white);
--cds-titlebar-color-text-secondary: var(--cds-color-core-teal-05);
--cds-titlebar-color-dropdown-background: var(--cds-color-core-grey-16);
--cds-titlebar-color-dropdown-hover: var(--cds-color-core-grey-14);
--cds-titlebar-color-dropdown-dropshadow: #000000BF;
--cds-togglebuttonbar-color-background-idle: var(--cds-color-core-grey-01);
--cds-togglebuttonbar-color-background-hover: var(--cds-color-core-grey-02);
--cds-togglebuttonbar-color-background-insensitive: var(--cds-color-core-grey-01);
--cds-tooltip-color-background: var(--cds-color-core-white);
}
[data-cds-theme="dark"] {
    color-scheme: dark;
    --cds-color-chart-dot-a: var(--cds-color-core-white);
--cds-color-chart-dot-b: var(--cds-color-core-blue-03);
--cds-color-chart-dot-c: var(--cds-color-core-orange-04);
--cds-color-chart-dot-d: var(--cds-color-core-purple-04);
--cds-color-chart-dot-e: var(--cds-color-core-yellow-04);
--cds-color-chart-dot-f: var(--cds-color-core-teal-04);
--cds-color-chart-dot-g: var(--cds-color-core-amber-04);
--cds-color-chart-dot-h: var(--cds-color-core-magenta-04);
--cds-color-chart-dot-i: var(--cds-color-core-green-04);
--cds-color-chart-dot-j: var(--cds-color-core-purple-06);
--cds-color-chart-dot-k: var(--cds-color-core-yellow-06);
--cds-color-chart-dot-l: var(--cds-color-core-teal-06);
--cds-color-chart-dot-m: var(--cds-color-core-red-04);
--cds-color-chart-dot-n: var(--cds-color-core-blue-05);
--cds-color-chart-dot-o: var(--cds-color-core-green-06);
--cds-color-chart-dot-p: var(--cds-color-core-magenta-06);
--cds-color-chart-dot-q: var(--cds-color-core-orange-06);
--cds-color-chart-dot-r: var(--cds-color-core-grey-06);
--cds-color-chart-dot-s: var(--cds-color-core-amber-06);
--cds-color-chart-dot-t: var(--cds-color-core-red-06);
--cds-color-chart-line-a: var(--cds-color-core-white);
--cds-color-chart-line-b: var(--cds-color-core-blue-03);
--cds-color-chart-line-c: var(--cds-color-core-orange-04);
--cds-color-chart-line-d: var(--cds-color-core-purple-04);
--cds-color-chart-line-e: var(--cds-color-core-yellow-04);
--cds-color-chart-line-f: var(--cds-color-core-teal-04);
--cds-color-chart-line-g: var(--cds-color-core-amber-04);
--cds-color-chart-line-h: var(--cds-color-core-magenta-04);
--cds-color-chart-line-i: var(--cds-color-core-green-04);
--cds-color-chart-line-j: var(--cds-color-core-purple-06);
--cds-color-chart-line-k: var(--cds-color-core-yellow-06);
--cds-color-chart-line-l: var(--cds-color-core-teal-06);
--cds-color-chart-line-m: var(--cds-color-core-red-04);
--cds-color-chart-line-n: var(--cds-color-core-blue-05);
--cds-color-chart-line-o: var(--cds-color-core-green-06);
--cds-color-chart-line-p: var(--cds-color-core-magenta-06);
--cds-color-chart-line-q: var(--cds-color-core-orange-06);
--cds-color-chart-line-r: var(--cds-color-core-grey-06);
--cds-color-chart-line-s: var(--cds-color-core-amber-06);
--cds-color-chart-line-t: var(--cds-color-core-red-06);
--cds-color-chart-bar-a: var(--cds-color-core-grey-08);
--cds-color-chart-bar-b: var(--cds-color-core-blue-07);
--cds-color-chart-bar-c: var(--cds-color-core-orange-07);
--cds-color-chart-bar-d: var(--cds-color-core-purple-07);
--cds-color-chart-bar-e: var(--cds-color-core-yellow-07);
--cds-color-chart-bar-f: var(--cds-color-core-teal-07);
--cds-color-chart-bar-g: var(--cds-color-core-amber-07);
--cds-color-chart-bar-h: var(--cds-color-core-magenta-07);
--cds-color-chart-bar-i: var(--cds-color-core-green-07);
--cds-color-chart-bar-j: var(--cds-color-core-purple-09);
--cds-color-chart-bar-k: var(--cds-color-core-yellow-09);
--cds-color-chart-bar-l: var(--cds-color-core-teal-09);
--cds-color-chart-bar-m: var(--cds-color-core-red-07);
--cds-color-chart-bar-n: var(--cds-color-core-blue-09);
--cds-color-chart-bar-o: var(--cds-color-core-green-09);
--cds-color-chart-bar-p: var(--cds-color-core-magenta-09);
--cds-color-chart-bar-q: var(--cds-color-core-orange-09);
--cds-color-chart-bar-r: var(--cds-color-core-grey-11);
--cds-color-chart-bar-s: var(--cds-color-core-amber-09);
--cds-color-chart-bar-t: var(--cds-color-core-red-09);
--cds-color-chart-neutral-high-a: var(--cds-color-core-blue-02);
--cds-color-chart-neutral-high-b: var(--cds-color-core-blue-04);
--cds-color-chart-neutral-high-c: var(--cds-color-core-blue-06);
--cds-color-chart-neutral-high-d: var(--cds-color-core-blue-08);
--cds-color-chart-neutral-high-e: var(--cds-color-core-blue-10);
--cds-color-background: var(--cds-color-core-grey-18);
--cds-color-background-secondary: var(--cds-color-core-grey-16);
--cds-color-background-hover: var(--cds-color-core-grey-14);
--cds-color-background-selected: #0073FF40;
--cds-color-background-selectedhover: #0073FF40;
--cds-color-background-none: var(--cds-color-core-none);
--cds-color-text: var(--cds-color-core-white);
--cds-color-text-secondary: var(--cds-color-core-grey-07);
--cds-color-icon-strong: var(--cds-color-core-white);
--cds-color-icon-moderate: var(--cds-color-core-grey-07);
--cds-color-border-strong: var(--cds-color-core-grey-03);
--cds-color-border-moderate: var(--cds-color-core-grey-08);
--cds-color-border-subtle: var(--cds-color-core-grey-12);
--cds-color-link-text-idle: var(--cds-color-core-blue-03);
--cds-color-link-text-hover: var(--cds-color-core-blue-02);
--cds-color-link-text-visited: var(--cds-color-core-purple-04);
--cds-color-link-icon-idle: var(--cds-color-core-blue-03);
--cds-color-link-icon-hover: var(--cds-color-core-blue-02);
--cds-color-link-icon-visited: var(--cds-color-core-purple-04);
--cds-color-scrollbar-bar: var(--cds-color-core-grey-09);
--cds-color-scrollbar-track: var(--cds-color-core-none);
--cds-color-overlay-background: #000000BF;
--cds-color-inverse-background: var(--cds-color-core-white);
--cds-color-inverse-text: var(--cds-color-core-grey-15);
--cds-color-inverse-icon: var(--cds-color-core-grey-15);
--cds-color-dropshadow-default: #000000BF;
--cds-color-popover-background: var(--cds-color-core-grey-16);
--cds-color-highlighttext-background: var(--cds-color-core-blue-04);
--cds-color-highlighttext-text: var(--cds-color-core-white);
--cds-color-indicator-greya-background: var(--cds-color-core-grey-13);
--cds-color-indicator-greya-text: var(--cds-color-core-white);
--cds-color-indicator-greyb-background: var(--cds-color-core-grey-10);
--cds-color-indicator-greyb-text: var(--cds-color-core-white);
--cds-color-indicator-green-background: var(--cds-color-core-green-03);
--cds-color-indicator-green-text: var(--cds-color-core-grey-15);
--cds-color-indicator-blue-background: var(--cds-color-core-blue-02);
--cds-color-indicator-blue-text: var(--cds-color-core-grey-15);
--cds-color-indicator-teal-background: var(--cds-color-core-teal-06);
--cds-color-indicator-teal-text: var(--cds-color-core-grey-15);
--cds-color-indicator-purple-background: var(--cds-color-core-purple-04);
--cds-color-indicator-purple-text: var(--cds-color-core-black);
--cds-color-indicator-red-background: var(--cds-color-core-red-05);
--cds-color-indicator-red-text: var(--cds-color-core-white);
--cds-color-indicator-magenta-background: var(--cds-color-core-magenta-03);
--cds-color-indicator-magenta-text: var(--cds-color-core-black);
--cds-color-indicator-yellow-background: var(--cds-color-core-yellow-03);
--cds-color-indicator-yellow-text: var(--cds-color-core-grey-15);
--cds-color-indicator-orange-background: var(--cds-color-core-orange-04);
--cds-color-indicator-orange-text: var(--cds-color-core-black);
--cds-color-indicator-amber-background: var(--cds-color-core-amber-04);
--cds-color-indicator-amber-text: var(--cds-color-core-grey-15);
--cds-color-placeholder-text: var(--cds-color-core-grey-07);
--cds-color-insensitive-background: var(--cds-color-core-grey-13);
--cds-color-insensitive-text: var(--cds-color-core-grey-09);
--cds-color-insensitive-icon: var(--cds-color-core-grey-10);
--cds-color-insensitive-border: var(--cds-color-core-grey-12);
--cds-color-readonly-background: var(--cds-color-core-none);
--cds-color-readonly-text: var(--cds-color-core-white);
--cds-color-readonly-icon: var(--cds-color-core-grey-10);
--cds-color-readonly-border: var(--cds-color-core-grey-12);
--cds-color-focus-border: var(--cds-color-core-blue-06);
--cds-color-destruction-text: var(--cds-color-core-white);
--cds-color-destruction-icon: var(--cds-color-core-white);
--cds-color-destruction-background-idle: var(--cds-color-core-red-05);
--cds-color-destruction-background-hover: var(--cds-color-core-red-04);
--cds-color-destruction-background-pressed: var(--cds-color-core-red-06);
--cds-color-selectedgraphics-background-primary: var(--cds-color-core-blue-06);
--cds-color-selectedgraphics-background-secondary: var(--cds-color-core-blue-06);
--cds-color-success-text: var(--cds-color-core-green-05);
--cds-color-success-icon: var(--cds-color-core-green-06);
--cds-color-success-border: var(--cds-color-core-green-06);
--cds-color-success-background-idle: #002C09A6;
--cds-color-success-background-hover: var(--cds-color-core-green-09);
--cds-color-success-background-selected: #002C09A6;
--cds-color-success-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-successpanel-text: var(--cds-color-core-grey-15);
--cds-color-successpanel-icon: var(--cds-color-core-grey-15);
--cds-color-successpanel-link: var(--cds-color-core-grey-15);
--cds-color-successpanel-border-moderate: var(--cds-color-core-green-06);
--cds-color-successpanel-border-subtle: var(--cds-color-core-green-05);
--cds-color-successpanel-background-idle: var(--cds-color-core-green-03);
--cds-color-successpanel-background-hover: var(--cds-color-core-green-02);
--cds-color-warning-text: var(--cds-color-core-yellow-03);
--cds-color-warning-icon: var(--cds-color-core-yellow-03);
--cds-color-warning-icon-secondary: var(--cds-color-core-grey-18);
--cds-color-warning-border: var(--cds-color-core-yellow-03);
--cds-color-warning-background-idle: #393200A6;
--cds-color-warning-background-hover: var(--cds-color-core-yellow-09);
--cds-color-warning-background-selected: #393200A6;
--cds-color-warning-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-warningpanel-text: var(--cds-color-core-grey-15);
--cds-color-warningpanel-icon: var(--cds-color-core-grey-15);
--cds-color-warningpanel-link: var(--cds-color-core-grey-15);
--cds-color-warningpanel-border-moderate: var(--cds-color-core-yellow-07);
--cds-color-warningpanel-border-subtle: var(--cds-color-core-yellow-06);
--cds-color-warningpanel-background-idle: var(--cds-color-core-yellow-03);
--cds-color-warningpanel-background-hover: var(--cds-color-core-yellow-02);
--cds-color-error-text: var(--cds-color-core-red-03);
--cds-color-error-icon: var(--cds-color-core-red-05);
--cds-color-error-border: var(--cds-color-core-red-05);
--cds-color-error-background-idle: #390014A6;
--cds-color-error-background-hover: var(--cds-color-core-red-09);
--cds-color-error-background-selected: #390014A6;
--cds-color-error-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-errorpanel-text: var(--cds-color-core-white);
--cds-color-errorpanel-icon: var(--cds-color-core-white);
--cds-color-errorpanel-link: var(--cds-color-core-white);
--cds-color-errorpanel-border-moderate: var(--cds-color-core-red-07);
--cds-color-errorpanel-border-subtle: var(--cds-color-core-red-06);
--cds-color-errorpanel-background-idle: var(--cds-color-core-red-05);
--cds-color-errorpanel-background-hover: var(--cds-color-core-red-04);
--cds-color-information-text: var(--cds-color-core-white);
--cds-color-information-icon-strong: var(--cds-color-core-white);
--cds-color-information-background-idle: var(--cds-color-core-grey-14);
--cds-color-informationpanel-text: var(--cds-color-core-grey-15);
--cds-color-informationpanel-icon: var(--cds-color-core-grey-15);
--cds-color-informationpanel-link: var(--cds-color-core-grey-15);
--cds-color-informationpanel-border-moderate: var(--cds-color-core-blue-06);
--cds-color-informationpanel-border-subtle: var(--cds-color-core-blue-03);
--cds-color-informationpanel-background-idle: var(--cds-color-core-blue-02);
--cds-color-informationpanel-background-hover: var(--cds-color-core-blue-01);
--cds-color-progress-text: var(--cds-color-core-purple-06);
--cds-color-progress-icon: var(--cds-color-core-purple-06);
--cds-color-progress-border: var(--cds-color-core-purple-06);
--cds-color-progress-background-idle: #392149A6;
--cds-color-progress-background-hover: var(--cds-color-core-purple-09);
--cds-color-progress-background-selected: #392149A6;
--cds-color-progress-backgroundbar-selected: var(--cds-color-core-blue-06);--cds-button-primary-color-text: var(--cds-color-core-white);
--cds-button-primary-color-text-idle: var(--cds-color-core-white);
--cds-button-primary-color-text-hover: var(--cds-color-core-white);
--cds-button-primary-color-text-pressed: var(--cds-color-core-white);
--cds-button-primary-color-icon: var(--cds-color-core-white);
--cds-button-primary-color-icon-idle: var(--cds-color-core-white);
--cds-button-primary-color-icon-hover: var(--cds-color-core-white);
--cds-button-primary-color-icon-pressed: var(--cds-color-core-white);
--cds-button-primary-color-border: var(--cds-color-core-none);
--cds-button-primary-color-background-idle: var(--cds-color-core-blue-06);
--cds-button-primary-color-background-hover: var(--cds-color-core-blue-04);
--cds-button-primary-color-background-pressed: var(--cds-color-core-blue-07);
--cds-button-secondary-color-text-idle: var(--cds-color-core-white);
--cds-button-secondary-color-text-hover: var(--cds-color-core-white);
--cds-button-secondary-color-text-pressed: var(--cds-color-core-white);
--cds-button-secondary-color-icon-idle: var(--cds-color-core-white);
--cds-button-secondary-color-icon-hover: var(--cds-color-core-white);
--cds-button-secondary-color-icon-pressed: var(--cds-color-core-white);
--cds-button-secondary-color-background-idle: var(--cds-color-core-blue-09);
--cds-button-secondary-color-background-hover: var(--cds-color-core-blue-07);
--cds-button-secondary-color-background-pressed: var(--cds-color-core-blue-08);
--cds-button-secondary-color-border: var(--cds-color-core-none);
--cds-button-tertiary-color-text-idle: var(--cds-color-core-blue-03);
--cds-button-tertiary-color-text-hover: var(--cds-color-core-white);
--cds-button-tertiary-color-text-pressed: var(--cds-color-core-white);
--cds-button-tertiary-color-icon-idle: var(--cds-color-core-blue-03);
--cds-button-tertiary-color-icon-hover: var(--cds-color-core-white);
--cds-button-tertiary-color-icon-pressed: var(--cds-color-core-white);
--cds-button-tertiary-color-background-idle: var(--cds-color-core-none);
--cds-button-tertiary-color-background-hover: var(--cds-color-core-blue-07);
--cds-button-tertiary-color-background-pressed: var(--cds-color-core-blue-08);
--cds-button-tertiary-color-border: var(--cds-color-core-none);
--cds-button-destruction-color-text: var(--cds-color-core-white);
--cds-button-destruction-color-text-idle: var(--cds-color-core-white);
--cds-button-destruction-color-text-hover: var(--cds-color-core-white);
--cds-button-destruction-color-text-pressed: var(--cds-color-core-white);
--cds-button-destruction-color-icon: var(--cds-color-core-white);
--cds-button-destruction-color-icon-idle: var(--cds-color-core-white);
--cds-button-destruction-color-icon-hover: var(--cds-color-core-white);
--cds-button-destruction-color-icon-pressed: var(--cds-color-core-white);
--cds-button-destruction-color-border: var(--cds-color-core-none);
--cds-button-destruction-color-background-idle: var(--cds-color-core-red-05);
--cds-button-destruction-color-background-hover: var(--cds-color-core-red-04);
--cds-button-destruction-color-background-pressed: var(--cds-color-core-red-06);
--cds-button-tertiaryicon-color-icon: var(--cds-color-core-white);
--cds-button-tertiaryicon-color-background-idle: var(--cds-color-core-none);
--cds-button-tertiaryicon-color-background-hover: var(--cds-color-core-blue-07);
--cds-button-tertiaryicon-color-background-pressed: var(--cds-color-core-blue-08);
--cds-button-tertiaryicon-color-border: var(--cds-color-core-none);
--cds-datepicker-color-default-background-idle: var(--cds-color-core-grey-16);
--cds-datepicker-color-default-background-hover: var(--cds-color-core-grey-13);
--cds-datepicker-color-default-background-focus: var(--cds-color-core-grey-13);
--cds-datepicker-color-default-border-pressed: var(--cds-color-core-grey-10);
--cds-datepicker-color-default-dropshadow: #000000BF;
--cds-datepicker-color-default-text-idle: var(--cds-color-core-white);
--cds-datepicker-color-default-text-othermonths: var(--cds-color-core-grey-08);
--cds-datepicker-color-default-text-insensitive: var(--cds-color-core-grey-11);
--cds-datepicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-datepicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-datepicker-color-selected-text-idle: var(--cds-color-core-white);
--cds-datepicker-color-selected-background-hover: var(--cds-color-core-blue-08);
--cds-daterange-color-default-background-idle: var(--cds-color-core-grey-16);
--cds-daterange-color-default-background-hover: var(--cds-color-core-grey-13);
--cds-daterange-color-default-background-focus: var(--cds-color-core-grey-13);
--cds-daterange-color-default-border-pressed: var(--cds-color-core-grey-10);
--cds-daterange-color-default-dropshadow: #000000BF;
--cds-daterange-color-default-text-idle: var(--cds-color-core-white);
--cds-daterange-color-default-text-insensitive: var(--cds-color-core-grey-11);
--cds-daterange-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-daterange-color-inrange-background-idle: var(--cds-color-core-blue-06);
--cds-daterange-color-inrange-background-hover: var(--cds-color-core-blue-08);
--cds-daterange-color-inrange-border-pressed: var(--cds-color-core-white);
--cds-daterange-color-inrange-border-focus: var(--cds-color-core-white);
--cds-daterange-color-inrange-text-idle: var(--cds-color-core-white);
--cds-daterange-color-rangestartend-background-focus: var(--cds-color-core-grey-13);
--cds-daterange-color-rangestartend-border-idle: var(--cds-color-core-blue-06);
--cds-datetimepicker-color-default-background-idle: var(--cds-color-core-grey-16);
--cds-datetimepicker-color-default-background-hover: var(--cds-color-core-grey-13);
--cds-datetimepicker-color-default-background-focus: var(--cds-color-core-grey-13);
--cds-datetimepicker-color-default-border-pressed: var(--cds-color-core-grey-10);
--cds-datetimepicker-color-default-dropshadow: #000000BF;
--cds-datetimepicker-color-default-text-idle: var(--cds-color-core-white);
--cds-datetimepicker-color-default-text-othermonths: var(--cds-color-core-grey-08);
--cds-datetimepicker-color-default-text-insensitive: var(--cds-color-core-grey-11);
--cds-datetimepicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-datetimepicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-dropzone-color-background-selected: #0F2C4F;
--cds-dropzone-color-background-inprogress: #0F2C4F;
--cds-footer-color-background: var(--cds-color-core-black);
--cds-footer-color-border: var(--cds-color-core-grey-10);
--cds-footer-color-text: var(--cds-color-core-white);
--cds-monthpicker-color-default-background-idle: var(--cds-color-core-grey-16);
--cds-monthpicker-color-default-background-hover: var(--cds-color-core-grey-13);
--cds-monthpicker-color-default-background-focus: var(--cds-color-core-grey-13);
--cds-monthpicker-color-default-border-pressed: var(--cds-color-core-grey-10);
--cds-monthpicker-color-default-dropshadow: #000000BF;
--cds-monthpicker-color-default-text-idle: var(--cds-color-core-white);
--cds-monthpicker-color-default-text-insensitive: var(--cds-color-core-grey-11);
--cds-monthpicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-monthpicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-progress-color-background: var(--cds-color-core-blue-06);
--cds-progress-color-background-secondary: var(--cds-color-core-grey-12);
--cds-progressspinner-color-background: var(--cds-color-core-amber-05);
--cds-skeletonpulse-color-background-a: var(--cds-color-core-grey-15);
--cds-skeletonpulse-color-background-b: var(--cds-color-core-grey-12);
--cds-skeletonpulse-color-background-c: var(--cds-color-core-grey-15);
--cds-slider-color-background: var(--cds-color-core-blue-06);
--cds-slider-color-background-secondary: var(--cds-color-core-grey-12);
--cds-slider-color-background-insensitive: var(--cds-color-core-grey-10);
--cds-slider-color-background-hover: #0062DD8C;
--cds-switch-color-icon: var(--cds-color-core-white);
--cds-table-color-resize-border: var(--cds-color-core-grey-04);
--cds-table-color-resize-border-secondary: var(--cds-color-core-grey-10);
--cds-tabletoolbar-color-background: var(--cds-color-core-grey-14);
--cds-tabs-color-background-idle: var(--cds-color-core-grey-16);
--cds-tabs-color-background-hover: var(--cds-color-core-grey-14);
--cds-titlebar-color-background: var(--cds-color-core-black);
--cds-titlebar-color-icon: var(--cds-color-core-white);
--cds-titlebar-color-border: var(--cds-color-core-grey-10);
--cds-titlebar-color-text: var(--cds-color-core-white);
--cds-titlebar-color-text-secondary: var(--cds-color-core-teal-05);
--cds-titlebar-color-dropdown-background: var(--cds-color-core-grey-16);
--cds-titlebar-color-dropdown-hover: var(--cds-color-core-grey-14);
--cds-titlebar-color-dropdown-dropshadow: #000000BF;
--cds-togglebuttonbar-color-background-idle: var(--cds-color-core-grey-16);
--cds-togglebuttonbar-color-background-hover: var(--cds-color-core-grey-14);
--cds-togglebuttonbar-color-background-insensitive: var(--cds-color-core-grey-16);
--cds-tooltip-color-background: var(--cds-color-core-grey-16);
}
@media(prefers-color-scheme: dark) {
    :root, :host {
        color-scheme: dark;
        --cds-color-chart-dot-a: var(--cds-color-core-white);
--cds-color-chart-dot-b: var(--cds-color-core-blue-03);
--cds-color-chart-dot-c: var(--cds-color-core-orange-04);
--cds-color-chart-dot-d: var(--cds-color-core-purple-04);
--cds-color-chart-dot-e: var(--cds-color-core-yellow-04);
--cds-color-chart-dot-f: var(--cds-color-core-teal-04);
--cds-color-chart-dot-g: var(--cds-color-core-amber-04);
--cds-color-chart-dot-h: var(--cds-color-core-magenta-04);
--cds-color-chart-dot-i: var(--cds-color-core-green-04);
--cds-color-chart-dot-j: var(--cds-color-core-purple-06);
--cds-color-chart-dot-k: var(--cds-color-core-yellow-06);
--cds-color-chart-dot-l: var(--cds-color-core-teal-06);
--cds-color-chart-dot-m: var(--cds-color-core-red-04);
--cds-color-chart-dot-n: var(--cds-color-core-blue-05);
--cds-color-chart-dot-o: var(--cds-color-core-green-06);
--cds-color-chart-dot-p: var(--cds-color-core-magenta-06);
--cds-color-chart-dot-q: var(--cds-color-core-orange-06);
--cds-color-chart-dot-r: var(--cds-color-core-grey-06);
--cds-color-chart-dot-s: var(--cds-color-core-amber-06);
--cds-color-chart-dot-t: var(--cds-color-core-red-06);
--cds-color-chart-line-a: var(--cds-color-core-white);
--cds-color-chart-line-b: var(--cds-color-core-blue-03);
--cds-color-chart-line-c: var(--cds-color-core-orange-04);
--cds-color-chart-line-d: var(--cds-color-core-purple-04);
--cds-color-chart-line-e: var(--cds-color-core-yellow-04);
--cds-color-chart-line-f: var(--cds-color-core-teal-04);
--cds-color-chart-line-g: var(--cds-color-core-amber-04);
--cds-color-chart-line-h: var(--cds-color-core-magenta-04);
--cds-color-chart-line-i: var(--cds-color-core-green-04);
--cds-color-chart-line-j: var(--cds-color-core-purple-06);
--cds-color-chart-line-k: var(--cds-color-core-yellow-06);
--cds-color-chart-line-l: var(--cds-color-core-teal-06);
--cds-color-chart-line-m: var(--cds-color-core-red-04);
--cds-color-chart-line-n: var(--cds-color-core-blue-05);
--cds-color-chart-line-o: var(--cds-color-core-green-06);
--cds-color-chart-line-p: var(--cds-color-core-magenta-06);
--cds-color-chart-line-q: var(--cds-color-core-orange-06);
--cds-color-chart-line-r: var(--cds-color-core-grey-06);
--cds-color-chart-line-s: var(--cds-color-core-amber-06);
--cds-color-chart-line-t: var(--cds-color-core-red-06);
--cds-color-chart-bar-a: var(--cds-color-core-grey-08);
--cds-color-chart-bar-b: var(--cds-color-core-blue-07);
--cds-color-chart-bar-c: var(--cds-color-core-orange-07);
--cds-color-chart-bar-d: var(--cds-color-core-purple-07);
--cds-color-chart-bar-e: var(--cds-color-core-yellow-07);
--cds-color-chart-bar-f: var(--cds-color-core-teal-07);
--cds-color-chart-bar-g: var(--cds-color-core-amber-07);
--cds-color-chart-bar-h: var(--cds-color-core-magenta-07);
--cds-color-chart-bar-i: var(--cds-color-core-green-07);
--cds-color-chart-bar-j: var(--cds-color-core-purple-09);
--cds-color-chart-bar-k: var(--cds-color-core-yellow-09);
--cds-color-chart-bar-l: var(--cds-color-core-teal-09);
--cds-color-chart-bar-m: var(--cds-color-core-red-07);
--cds-color-chart-bar-n: var(--cds-color-core-blue-09);
--cds-color-chart-bar-o: var(--cds-color-core-green-09);
--cds-color-chart-bar-p: var(--cds-color-core-magenta-09);
--cds-color-chart-bar-q: var(--cds-color-core-orange-09);
--cds-color-chart-bar-r: var(--cds-color-core-grey-11);
--cds-color-chart-bar-s: var(--cds-color-core-amber-09);
--cds-color-chart-bar-t: var(--cds-color-core-red-09);
--cds-color-chart-neutral-high-a: var(--cds-color-core-blue-02);
--cds-color-chart-neutral-high-b: var(--cds-color-core-blue-04);
--cds-color-chart-neutral-high-c: var(--cds-color-core-blue-06);
--cds-color-chart-neutral-high-d: var(--cds-color-core-blue-08);
--cds-color-chart-neutral-high-e: var(--cds-color-core-blue-10);
--cds-color-background: var(--cds-color-core-grey-18);
--cds-color-background-secondary: var(--cds-color-core-grey-16);
--cds-color-background-hover: var(--cds-color-core-grey-14);
--cds-color-background-selected: #0073FF40;
--cds-color-background-selectedhover: #0073FF40;
--cds-color-background-none: var(--cds-color-core-none);
--cds-color-text: var(--cds-color-core-white);
--cds-color-text-secondary: var(--cds-color-core-grey-07);
--cds-color-icon-strong: var(--cds-color-core-white);
--cds-color-icon-moderate: var(--cds-color-core-grey-07);
--cds-color-border-strong: var(--cds-color-core-grey-03);
--cds-color-border-moderate: var(--cds-color-core-grey-08);
--cds-color-border-subtle: var(--cds-color-core-grey-12);
--cds-color-link-text-idle: var(--cds-color-core-blue-03);
--cds-color-link-text-hover: var(--cds-color-core-blue-02);
--cds-color-link-text-visited: var(--cds-color-core-purple-04);
--cds-color-link-icon-idle: var(--cds-color-core-blue-03);
--cds-color-link-icon-hover: var(--cds-color-core-blue-02);
--cds-color-link-icon-visited: var(--cds-color-core-purple-04);
--cds-color-scrollbar-bar: var(--cds-color-core-grey-09);
--cds-color-scrollbar-track: var(--cds-color-core-none);
--cds-color-overlay-background: #000000BF;
--cds-color-inverse-background: var(--cds-color-core-white);
--cds-color-inverse-text: var(--cds-color-core-grey-15);
--cds-color-inverse-icon: var(--cds-color-core-grey-15);
--cds-color-dropshadow-default: #000000BF;
--cds-color-popover-background: var(--cds-color-core-grey-16);
--cds-color-highlighttext-background: var(--cds-color-core-blue-04);
--cds-color-highlighttext-text: var(--cds-color-core-white);
--cds-color-indicator-greya-background: var(--cds-color-core-grey-13);
--cds-color-indicator-greya-text: var(--cds-color-core-white);
--cds-color-indicator-greyb-background: var(--cds-color-core-grey-10);
--cds-color-indicator-greyb-text: var(--cds-color-core-white);
--cds-color-indicator-green-background: var(--cds-color-core-green-03);
--cds-color-indicator-green-text: var(--cds-color-core-grey-15);
--cds-color-indicator-blue-background: var(--cds-color-core-blue-02);
--cds-color-indicator-blue-text: var(--cds-color-core-grey-15);
--cds-color-indicator-teal-background: var(--cds-color-core-teal-06);
--cds-color-indicator-teal-text: var(--cds-color-core-grey-15);
--cds-color-indicator-purple-background: var(--cds-color-core-purple-04);
--cds-color-indicator-purple-text: var(--cds-color-core-black);
--cds-color-indicator-red-background: var(--cds-color-core-red-05);
--cds-color-indicator-red-text: var(--cds-color-core-white);
--cds-color-indicator-magenta-background: var(--cds-color-core-magenta-03);
--cds-color-indicator-magenta-text: var(--cds-color-core-black);
--cds-color-indicator-yellow-background: var(--cds-color-core-yellow-03);
--cds-color-indicator-yellow-text: var(--cds-color-core-grey-15);
--cds-color-indicator-orange-background: var(--cds-color-core-orange-04);
--cds-color-indicator-orange-text: var(--cds-color-core-black);
--cds-color-indicator-amber-background: var(--cds-color-core-amber-04);
--cds-color-indicator-amber-text: var(--cds-color-core-grey-15);
--cds-color-placeholder-text: var(--cds-color-core-grey-07);
--cds-color-insensitive-background: var(--cds-color-core-grey-13);
--cds-color-insensitive-text: var(--cds-color-core-grey-09);
--cds-color-insensitive-icon: var(--cds-color-core-grey-10);
--cds-color-insensitive-border: var(--cds-color-core-grey-12);
--cds-color-readonly-background: var(--cds-color-core-none);
--cds-color-readonly-text: var(--cds-color-core-white);
--cds-color-readonly-icon: var(--cds-color-core-grey-10);
--cds-color-readonly-border: var(--cds-color-core-grey-12);
--cds-color-focus-border: var(--cds-color-core-blue-06);
--cds-color-destruction-text: var(--cds-color-core-white);
--cds-color-destruction-icon: var(--cds-color-core-white);
--cds-color-destruction-background-idle: var(--cds-color-core-red-05);
--cds-color-destruction-background-hover: var(--cds-color-core-red-04);
--cds-color-destruction-background-pressed: var(--cds-color-core-red-06);
--cds-color-selectedgraphics-background-primary: var(--cds-color-core-blue-06);
--cds-color-selectedgraphics-background-secondary: var(--cds-color-core-blue-06);
--cds-color-success-text: var(--cds-color-core-green-05);
--cds-color-success-icon: var(--cds-color-core-green-06);
--cds-color-success-border: var(--cds-color-core-green-06);
--cds-color-success-background-idle: #002C09A6;
--cds-color-success-background-hover: var(--cds-color-core-green-09);
--cds-color-success-background-selected: #002C09A6;
--cds-color-success-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-successpanel-text: var(--cds-color-core-grey-15);
--cds-color-successpanel-icon: var(--cds-color-core-grey-15);
--cds-color-successpanel-link: var(--cds-color-core-grey-15);
--cds-color-successpanel-border-moderate: var(--cds-color-core-green-06);
--cds-color-successpanel-border-subtle: var(--cds-color-core-green-05);
--cds-color-successpanel-background-idle: var(--cds-color-core-green-03);
--cds-color-successpanel-background-hover: var(--cds-color-core-green-02);
--cds-color-warning-text: var(--cds-color-core-yellow-03);
--cds-color-warning-icon: var(--cds-color-core-yellow-03);
--cds-color-warning-icon-secondary: var(--cds-color-core-grey-18);
--cds-color-warning-border: var(--cds-color-core-yellow-03);
--cds-color-warning-background-idle: #393200A6;
--cds-color-warning-background-hover: var(--cds-color-core-yellow-09);
--cds-color-warning-background-selected: #393200A6;
--cds-color-warning-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-warningpanel-text: var(--cds-color-core-grey-15);
--cds-color-warningpanel-icon: var(--cds-color-core-grey-15);
--cds-color-warningpanel-link: var(--cds-color-core-grey-15);
--cds-color-warningpanel-border-moderate: var(--cds-color-core-yellow-07);
--cds-color-warningpanel-border-subtle: var(--cds-color-core-yellow-06);
--cds-color-warningpanel-background-idle: var(--cds-color-core-yellow-03);
--cds-color-warningpanel-background-hover: var(--cds-color-core-yellow-02);
--cds-color-error-text: var(--cds-color-core-red-03);
--cds-color-error-icon: var(--cds-color-core-red-05);
--cds-color-error-border: var(--cds-color-core-red-05);
--cds-color-error-background-idle: #390014A6;
--cds-color-error-background-hover: var(--cds-color-core-red-09);
--cds-color-error-background-selected: #390014A6;
--cds-color-error-backgroundbar-selected: var(--cds-color-core-blue-06);
--cds-color-errorpanel-text: var(--cds-color-core-white);
--cds-color-errorpanel-icon: var(--cds-color-core-white);
--cds-color-errorpanel-link: var(--cds-color-core-white);
--cds-color-errorpanel-border-moderate: var(--cds-color-core-red-07);
--cds-color-errorpanel-border-subtle: var(--cds-color-core-red-06);
--cds-color-errorpanel-background-idle: var(--cds-color-core-red-05);
--cds-color-errorpanel-background-hover: var(--cds-color-core-red-04);
--cds-color-information-text: var(--cds-color-core-white);
--cds-color-information-icon-strong: var(--cds-color-core-white);
--cds-color-information-background-idle: var(--cds-color-core-grey-14);
--cds-color-informationpanel-text: var(--cds-color-core-grey-15);
--cds-color-informationpanel-icon: var(--cds-color-core-grey-15);
--cds-color-informationpanel-link: var(--cds-color-core-grey-15);
--cds-color-informationpanel-border-moderate: var(--cds-color-core-blue-06);
--cds-color-informationpanel-border-subtle: var(--cds-color-core-blue-03);
--cds-color-informationpanel-background-idle: var(--cds-color-core-blue-02);
--cds-color-informationpanel-background-hover: var(--cds-color-core-blue-01);
--cds-color-progress-text: var(--cds-color-core-purple-06);
--cds-color-progress-icon: var(--cds-color-core-purple-06);
--cds-color-progress-border: var(--cds-color-core-purple-06);
--cds-color-progress-background-idle: #392149A6;
--cds-color-progress-background-hover: var(--cds-color-core-purple-09);
--cds-color-progress-background-selected: #392149A6;
--cds-color-progress-backgroundbar-selected: var(--cds-color-core-blue-06);--cds-button-primary-color-text: var(--cds-color-core-white);
--cds-button-primary-color-text-idle: var(--cds-color-core-white);
--cds-button-primary-color-text-hover: var(--cds-color-core-white);
--cds-button-primary-color-text-pressed: var(--cds-color-core-white);
--cds-button-primary-color-icon: var(--cds-color-core-white);
--cds-button-primary-color-icon-idle: var(--cds-color-core-white);
--cds-button-primary-color-icon-hover: var(--cds-color-core-white);
--cds-button-primary-color-icon-pressed: var(--cds-color-core-white);
--cds-button-primary-color-border: var(--cds-color-core-none);
--cds-button-primary-color-background-idle: var(--cds-color-core-blue-06);
--cds-button-primary-color-background-hover: var(--cds-color-core-blue-04);
--cds-button-primary-color-background-pressed: var(--cds-color-core-blue-07);
--cds-button-secondary-color-text-idle: var(--cds-color-core-white);
--cds-button-secondary-color-text-hover: var(--cds-color-core-white);
--cds-button-secondary-color-text-pressed: var(--cds-color-core-white);
--cds-button-secondary-color-icon-idle: var(--cds-color-core-white);
--cds-button-secondary-color-icon-hover: var(--cds-color-core-white);
--cds-button-secondary-color-icon-pressed: var(--cds-color-core-white);
--cds-button-secondary-color-background-idle: var(--cds-color-core-blue-09);
--cds-button-secondary-color-background-hover: var(--cds-color-core-blue-07);
--cds-button-secondary-color-background-pressed: var(--cds-color-core-blue-08);
--cds-button-secondary-color-border: var(--cds-color-core-none);
--cds-button-tertiary-color-text-idle: var(--cds-color-core-blue-03);
--cds-button-tertiary-color-text-hover: var(--cds-color-core-white);
--cds-button-tertiary-color-text-pressed: var(--cds-color-core-white);
--cds-button-tertiary-color-icon-idle: var(--cds-color-core-blue-03);
--cds-button-tertiary-color-icon-hover: var(--cds-color-core-white);
--cds-button-tertiary-color-icon-pressed: var(--cds-color-core-white);
--cds-button-tertiary-color-background-idle: var(--cds-color-core-none);
--cds-button-tertiary-color-background-hover: var(--cds-color-core-blue-07);
--cds-button-tertiary-color-background-pressed: var(--cds-color-core-blue-08);
--cds-button-tertiary-color-border: var(--cds-color-core-none);
--cds-button-destruction-color-text: var(--cds-color-core-white);
--cds-button-destruction-color-text-idle: var(--cds-color-core-white);
--cds-button-destruction-color-text-hover: var(--cds-color-core-white);
--cds-button-destruction-color-text-pressed: var(--cds-color-core-white);
--cds-button-destruction-color-icon: var(--cds-color-core-white);
--cds-button-destruction-color-icon-idle: var(--cds-color-core-white);
--cds-button-destruction-color-icon-hover: var(--cds-color-core-white);
--cds-button-destruction-color-icon-pressed: var(--cds-color-core-white);
--cds-button-destruction-color-border: var(--cds-color-core-none);
--cds-button-destruction-color-background-idle: var(--cds-color-core-red-05);
--cds-button-destruction-color-background-hover: var(--cds-color-core-red-04);
--cds-button-destruction-color-background-pressed: var(--cds-color-core-red-06);
--cds-button-tertiaryicon-color-icon: var(--cds-color-core-white);
--cds-button-tertiaryicon-color-background-idle: var(--cds-color-core-none);
--cds-button-tertiaryicon-color-background-hover: var(--cds-color-core-blue-07);
--cds-button-tertiaryicon-color-background-pressed: var(--cds-color-core-blue-08);
--cds-button-tertiaryicon-color-border: var(--cds-color-core-none);
--cds-datepicker-color-default-background-idle: var(--cds-color-core-grey-16);
--cds-datepicker-color-default-background-hover: var(--cds-color-core-grey-13);
--cds-datepicker-color-default-background-focus: var(--cds-color-core-grey-13);
--cds-datepicker-color-default-border-pressed: var(--cds-color-core-grey-10);
--cds-datepicker-color-default-dropshadow: #000000BF;
--cds-datepicker-color-default-text-idle: var(--cds-color-core-white);
--cds-datepicker-color-default-text-othermonths: var(--cds-color-core-grey-08);
--cds-datepicker-color-default-text-insensitive: var(--cds-color-core-grey-11);
--cds-datepicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-datepicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-datepicker-color-selected-text-idle: var(--cds-color-core-white);
--cds-datepicker-color-selected-background-hover: var(--cds-color-core-blue-08);
--cds-daterange-color-default-background-idle: var(--cds-color-core-grey-16);
--cds-daterange-color-default-background-hover: var(--cds-color-core-grey-13);
--cds-daterange-color-default-background-focus: var(--cds-color-core-grey-13);
--cds-daterange-color-default-border-pressed: var(--cds-color-core-grey-10);
--cds-daterange-color-default-dropshadow: #000000BF;
--cds-daterange-color-default-text-idle: var(--cds-color-core-white);
--cds-daterange-color-default-text-insensitive: var(--cds-color-core-grey-11);
--cds-daterange-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-daterange-color-inrange-background-idle: var(--cds-color-core-blue-06);
--cds-daterange-color-inrange-background-hover: var(--cds-color-core-blue-08);
--cds-daterange-color-inrange-border-pressed: var(--cds-color-core-white);
--cds-daterange-color-inrange-border-focus: var(--cds-color-core-white);
--cds-daterange-color-inrange-text-idle: var(--cds-color-core-white);
--cds-daterange-color-rangestartend-background-focus: var(--cds-color-core-grey-13);
--cds-daterange-color-rangestartend-border-idle: var(--cds-color-core-blue-06);
--cds-datetimepicker-color-default-background-idle: var(--cds-color-core-grey-16);
--cds-datetimepicker-color-default-background-hover: var(--cds-color-core-grey-13);
--cds-datetimepicker-color-default-background-focus: var(--cds-color-core-grey-13);
--cds-datetimepicker-color-default-border-pressed: var(--cds-color-core-grey-10);
--cds-datetimepicker-color-default-dropshadow: #000000BF;
--cds-datetimepicker-color-default-text-idle: var(--cds-color-core-white);
--cds-datetimepicker-color-default-text-othermonths: var(--cds-color-core-grey-08);
--cds-datetimepicker-color-default-text-insensitive: var(--cds-color-core-grey-11);
--cds-datetimepicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-datetimepicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-dropzone-color-background-selected: #0F2C4F;
--cds-dropzone-color-background-inprogress: #0F2C4F;
--cds-footer-color-background: var(--cds-color-core-black);
--cds-footer-color-border: var(--cds-color-core-grey-10);
--cds-footer-color-text: var(--cds-color-core-white);
--cds-monthpicker-color-default-background-idle: var(--cds-color-core-grey-16);
--cds-monthpicker-color-default-background-hover: var(--cds-color-core-grey-13);
--cds-monthpicker-color-default-background-focus: var(--cds-color-core-grey-13);
--cds-monthpicker-color-default-border-pressed: var(--cds-color-core-grey-10);
--cds-monthpicker-color-default-dropshadow: #000000BF;
--cds-monthpicker-color-default-text-idle: var(--cds-color-core-white);
--cds-monthpicker-color-default-text-insensitive: var(--cds-color-core-grey-11);
--cds-monthpicker-color-today-text-idle: var(--cds-color-core-blue-06);
--cds-monthpicker-color-selected-border-idle: var(--cds-color-core-blue-06);
--cds-progress-color-background: var(--cds-color-core-blue-06);
--cds-progress-color-background-secondary: var(--cds-color-core-grey-12);
--cds-progressspinner-color-background: var(--cds-color-core-amber-05);
--cds-skeletonpulse-color-background-a: var(--cds-color-core-grey-15);
--cds-skeletonpulse-color-background-b: var(--cds-color-core-grey-12);
--cds-skeletonpulse-color-background-c: var(--cds-color-core-grey-15);
--cds-slider-color-background: var(--cds-color-core-blue-06);
--cds-slider-color-background-secondary: var(--cds-color-core-grey-12);
--cds-slider-color-background-insensitive: var(--cds-color-core-grey-10);
--cds-slider-color-background-hover: #0062DD8C;
--cds-switch-color-icon: var(--cds-color-core-white);
--cds-table-color-resize-border: var(--cds-color-core-grey-04);
--cds-table-color-resize-border-secondary: var(--cds-color-core-grey-10);
--cds-tabletoolbar-color-background: var(--cds-color-core-grey-14);
--cds-tabs-color-background-idle: var(--cds-color-core-grey-16);
--cds-tabs-color-background-hover: var(--cds-color-core-grey-14);
--cds-titlebar-color-background: var(--cds-color-core-black);
--cds-titlebar-color-icon: var(--cds-color-core-white);
--cds-titlebar-color-border: var(--cds-color-core-grey-10);
--cds-titlebar-color-text: var(--cds-color-core-white);
--cds-titlebar-color-text-secondary: var(--cds-color-core-teal-05);
--cds-titlebar-color-dropdown-background: var(--cds-color-core-grey-16);
--cds-titlebar-color-dropdown-hover: var(--cds-color-core-grey-14);
--cds-titlebar-color-dropdown-dropshadow: #000000BF;
--cds-togglebuttonbar-color-background-idle: var(--cds-color-core-grey-16);
--cds-togglebuttonbar-color-background-hover: var(--cds-color-core-grey-14);
--cds-togglebuttonbar-color-background-insensitive: var(--cds-color-core-grey-16);
--cds-tooltip-color-background: var(--cds-color-core-grey-16);
    }
}

    /*
Normalize fixes inconsistencies between browsers. It is not applying Crescent Styles at this point
todo - this could be imported from an npm package instead of copying here
*/

/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
    box-sizing: border-box;
}

html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    font-family: system-ui,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji';
    line-height: 1.15; /* 1. Correct the line height in all browsers. */
    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
    -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
    tab-size: 4; /* 3 */
}

/*
Sections
========
*/
body {
    margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
    text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
    font-family: ui-monospace,
    SFMono-Regular,
    Consolas,
    'Liberation Mono',
    Menlo,
    monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
    text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
    box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
    display: list-item;
}
/**
 After Normalize has fixed inconsistencies between browsers, there are some sensible resets to be added
 This is largely based around the opinions of the Tailwind reset: https://tailwindcss.com/docs/preflight
 This is chosen as it has some sensible defaults for removing default styling, forcing you to set correct semantics
 but also making it easier to develop with
 */

hr {
    /* Ensure horizontal rules are visible by default. */
    border-top-width: 1px;
}

/*
Remove the default font size and weight for headings.
This is to ensure that you use the correct semantic element and don't choose the incorrect one based only on size.
Apply the correct `.cds-h1` etc. styles to choose the size.
To get back all the default heading styles and spacing in large blocks of prose, use the `.cds-prose` component
*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    text-wrap: balance;
}


/*
Removes the default spacing and border for appropriate elements,
as this is the most common state development requires. Spacing is usually handled by a surrounding layout component.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

/*
Practically all uses of lists don't actually want list styles.
*/
ol,
ul,
menu {
    list-style-type: ''; /* "list-style: none" removes list semantics from screen readers */
    margin: 0;
    padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
    padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
    display: none;
}
/* Crescent styles for default elements */
:root {
    interpolate-size: allow-keywords; /* allow animation to auto sizes (in browsers that support it) */
}

body {
    color: var(--cds-color-text);
    background-color: var(--cds-color-background);
    /* https://stackoverflow.com/a/45979108 */
    -moz-osx-font-smoothing: grayscale; /*(For Firefox)*/
    -webkit-font-smoothing: antialiased; /*(For Chrome and Safari)*/
    font-family: var(--cds-font-base-family);
    scrollbar-width: thin;
    scrollbar-color:
        var(--cds-color-scrollbar-bar)
        var(--cds-color-scrollbar-track);
}

/* Webkit scrollbar definitions */
::-webkit-scrollbar {
    width: var(--cds-size-core-020-px);
}
::-webkit-scrollbar:horizontal {
    height: var(--cds-size-core-020-px);
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--cds-color-scrollbar-bar);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background-color: var(--cds-color-scrollbar-track);
}

.cds-monospace,
code {
    font-family: var(--cds-font-code-family);
    font-size: 0.875em;
}

strong, b {
    font-weight: var(--cds-font-core-weight-bold);
}

/** Crescent Link Styles
The default link will just be the size of the surrounding text
These styles can used on buttons too, so that buttons can look like links.
This means links and button styles have to undo all of each others settings.
*/
a,
.cds-link,
button.cds-link {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    text-decoration: var(--cds-font-link-default-decoration);
    color: var(--cds-color-link-text-idle);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline;
    min-width: auto;
    min-height: auto;
    box-shadow: none;
}

a:visited,
.cds-link:visited,
button.cds-link:visited {
    color: var(--cds-color-link-text-visited);
    background: none;
}

a:not(:disabled, .cds-disabled):hover,
a:not(:disabled, .cds-disabled):active,
.cds-link:not(:disabled, .cds-disabled):hover,
.cds-link:not(:disabled, .cds-disabled):active {
    color: var(--cds-color-link-text-hover);
    background: none;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: var(--cds-color-focus-border) solid 2px;
}

/* Normalize sets Firefox's button targeting with quite high specificity,
 * so we have to purposefully set (only) the outline with the same selector. */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: var(--cds-color-focus-border) solid 2px;
}

/** Crescent Button styles
These styles can used on links too, so that links can look like buttons.
This means links and button styles have to undo all of each others settings.
A default button is secondary styles
*/
button:not(:where(.cds-neutral)),
.cds-button,
a.cds-button,
[class*="cds-button-"],
::file-selector-button {
    --_cds-button-border: 1px;
    --_cds-button-color-text: var(--cds-button-secondary-color-text-idle);
    --_cds-button-color-border: var(--cds-button-secondary-color-border);
    --_cds-button-color-background: var(--cds-button-secondary-color-background-idle);

    --_cds-button-hover-text: var(--cds-button-secondary-color-text-hover);
    --_cds-button-hover-background: var(--cds-button-secondary-color-background-hover);
    --_cds-button-active-text: var(--cds-button-secondary-color-text-pressed);
    --_cds-button-active-background: var(--cds-button-secondary-color-background-pressed);

    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--cds-button-size-icongap);
    touch-action: manipulation;
    user-select: none;
    inline-size: fit-content;
    font-family: inherit;
    flex-shrink: 0;
    border: solid var(--_cds-button-border) var(--_cds-button-color-border);

    /** Buttons always have their label centered so this is simple */
    padding: var(--cds-button-size-padding-top)
        var(--cds-button-size-padding-right)
        var(--cds-button-size-padding-bottom)
        var(--cds-button-size-padding-left);

    font-size: var(--cds-font-button-label-fontsize);
    line-height: var(--cds-font-button-label-lineheight);
    font-weight: var(--cds-font-button-label-weight);
    color: var(--_cds-button-color-text);
    border-color: var(--_cds-button-color-border);
    background: var(--_cds-button-color-background);
}

.cds-button,
a.cds-button,
[class*="cds-button-"] {
    /* Only put these on explicitly opted in Crescent Button styles, so that other global buttons don't break */
    min-height: var(--cds-button-size-minheight);
    min-width: fit-content;
}

:is(.cds-button, a.cds-button):has(> .bb-icon:only-child),
:is(.cds-button, a.cds-button):has(> .cds-icon:only-child),
:is(.cds-button, a.cds-button):has(> .cds-button__icon:only-child) {
    justify-content: center;
}

.cds-button .bb-icon,
.cds-button .cds-icon,
.cds-button__icon {
    width: 1em;
    height: 1em;
}

button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):hover,
.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):hover,
a.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):hover,
button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):focus-visible,
.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):focus-visible,
a.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):focus-visible {
    color: var(--_cds-button-hover-text);
    background: var(--_cds-button-hover-background);
}

button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):active,
button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)).cds-active,
.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):active,
.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)).cds-active,
a.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)):active,
a.cds-button:not(:disabled, .cds-disabled):not(:where(.cds-neutral)).cds-active {
    color: var(--_cds-button-active-text);
    background: var(--_cds-button-active-background);
}

.cds-button--primary,
a.cds-button--primary {
    --_cds-button-color-text: var(--cds-button-primary-color-text-idle, var(--cds-button-primary-color-text));
    --_cds-button-color-border: var(--cds-button-primary-color-border);
    --_cds-button-color-background: var(--cds-button-primary-color-background-idle);

    --_cds-button-hover-text: var(--cds-button-primary-color-text-hover, var(--cds-button-primary-color-text));
    --_cds-button-hover-background: var(--cds-button-primary-color-background-hover);
    --_cds-button-active-text: var(--cds-button-primary-color-text-pressed, var(--cds-button-primary-color-text));
    --_cds-button-active-background: var(--cds-button-primary-color-background-pressed);
}

.cds-button--tertiary,
a.cds-button--tertiary {
    --_cds-button-color-text: var(--cds-button-tertiary-color-text-idle);
    --_cds-button-color-border: var(--cds-button-tertiary-color-border);
    --_cds-button-color-background: var(--cds-button-tertiary-color-background-idle);

    --_cds-button-hover-text: var(--cds-button-tertiary-color-text-hover);
    --_cds-button-hover-background: var(--cds-button-tertiary-color-background-hover);
    --_cds-button-active-text: var(--cds-button-tertiary-color-text-pressed);
    --_cds-button-active-background: var(--cds-button-tertiary-color-background-pressed);
}

:where(.cds-button--tertiary, a.cds-button--tertiary).cds-button--icon {
    --_cds-button-color-text: var(--cds-button-tertiaryicon-color-icon);
    --_cds-button-color-border: var(--cds-button-tertiaryicon-color-border);
    --_cds-button-color-background: var(--cds-button-tertiaryicon-color-background-idle);

    --_cds-button-hover-background: var(--cds-button-tertiaryicon-color-background-hover);
    --_cds-button-active-background: var(--cds-button-tertiaryicon-color-background-pressed);
}

.cds-button--destruction,
a.cds-button--destruction {
    --_cds-button-color-text: var(--cds-button-destruction-color-text-idle);
    --_cds-button-color-border: var(--cds-button-destruction-color-border);
    --_cds-button-color-background: var(--cds-button-destruction-color-background-idle);

    --_cds-button-hover-text: var(--cds-button-destruction-color-text-hover);
    --_cds-button-hover-background: var(--cds-button-destruction-color-background-hover);
    --_cds-button-active-text: var(--cds-button-destruction-color-text-pressed);
    --_cds-button-active-background: var(--cds-button-destruction-color-background-pressed);
}

button.cds-disabled,
button:disabled,
.cds-button.cds-disabled,
.cds-button:disabled {
    --_cds-button-color-text: var(--cds-color-insensitive-text);
    --_cds-button-color-border: var(--cds-color-insensitive-border);
    --_cds-button-color-background: transparent;
}

.cds-button--primary.cds-disabled,
a.cds-button--primary.cds-disabled,
.cds-button--primary:disabled {
    --_cds-button-color-text: var(--cds-color-insensitive-text);
    --_cds-button-color-border: var(--cds-color-insensitive-background);
    --_cds-button-color-background: var(--cds-color-insensitive-background);

    --_cds-button-hover-background: var(--cds-color-insensitive-background);
    --_cds-button-active-background: var(--cds-color-insensitive-background);
}

.cds-button--tertiary.cds-disabled,
a.cds-button--tertiary.cds-disabled,
.cds-button--tertiary:disabled {
    --_cds-button-color-text: var(--cds-color-insensitive-text);
    --_cds-button-color-border: transparent;
    --_cds-button-color-background: transparent;

    --_cds-button-hover-background: transparent;
    --_cds-button-active-background: transparent;
}

.cds-button--destruction.cds-disabled,
a.cds-button--destruction.cds-disabled,
.cds-button--destruction:disabled {
    --_cds-button-color-text: var(--cds-color-insensitive-text);
    --_cds-button-color-border: var(--cds-color-insensitive-background);
    --_cds-button-color-background: var(--cds-color-insensitive-background);

    --_cds-button-hover-background: var(--cds-color-insensitive-background);
    --_cds-button-active-background: var(--cds-color-insensitive-background);
}

/** Crescent Table styles
 * For basic use of the HTML <table> element or opt-in via `.cds-table`/`.cds-td` etc
 * todo - once browser nesting support is more widespread, this code can be minimised
 */
:is(table, .cds-table) {
    width: 100%;
    border-collapse: collapse;
}

:is(table, .cds-table) :is(tr, .cds-tr) {
    border-bottom: 1px solid var(--cds-color-border-subtle);
}

    /* Last row doesn't have a border. Ideally everybody uses thead/tbody properly,
        but also need to capture when they don't
     */
:is(table, .cds-table) :is(tbody, .cds-tbody) :is(tr, .cds-tr):last-child,
:is(table, .cds-table) > :is(tr, .cds-tr):last-child {
    border-bottom: none;
}

:is(table, .cds-table) :is(th, .cds-th, td, .cds-td) {
    padding: var(--cds-cell-size-padding-top) var(--cds-cell-size-padding-right)
        var(--cds-cell-size-padding-bottom) var(--cds-cell-size-padding-left);

    /**
     * min-height does not work for table elements, but height works like it in this case.
     * Table cells will grow when the content does not fit.
    */
    height: var(--cds-cell-size-minheight);
}

:is(table, .cds-table) :is(th, .cds-th, td, .cds-td):first-child {
    /* Row padding can't be added to `tr` so we have to add it to the existing cell padding */
    padding-left: calc(var(--cds-cell-size-padding-left) + var(--cds-tablerow-size-padding-left));
}
:is(table, .cds-table) :is(th, .cds-th, td, .cds-td):last-child {
    /* Row padding can't be added to `tr` so we have to add it to the existing cell padding */
    padding-right: calc(var(--cds-cell-size-padding-right) + var(--cds-tablerow-size-padding-right));
}

:is(table, .cds-table) :is(th, td, .cds-th, .cds-td).cds-flush {
    padding: 0;
}

:is(table, .cds-table) :is(th, .cds-th) {
    text-align: left;
    font-weight: bold;
}

:is(table, .cds-table) :is(td, .cds-td, tbody th, .cds-tbody .cds-th) {
    vertical-align: top;
}

:is(.cds-table--data) :is(td, .cds-td, tbody th, .cds-tbody .cds-th)::first-line {
    /* vertical-align: middle; works on Firefox, but not others */
    line-height: calc(
        var(--cds-cell-size-minheight)
        - var(--cds-cell-size-padding-top)
        - var(--cds-cell-size-padding-bottom)
    );
}

/* For Crescent Input styles */
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    box-sizing: border-box;
}
/* Base form styles */
input:not([type]),
input[type='text'],
input[type='email'],
input[type='number'],
input[type='date'],
input[type='search'],
input[type='tel'],
select,
textarea,
.cds-input {
    --_cds-input-border-color: var(--cds-state-color-input-border, var(--cds-color-border-moderate));
    --_cds-input-border-addition: 0;
    appearance: none;
    display: block;
    border-radius: 0;
    width: 100%;
    min-width: 0; /*https://medium.com/@pascalokereke18/why-i-use-min-width-0-d8d067aa1a1d*/
    background-color: var(--cds-color-background);
    border: solid 1px var(--_cds-input-border-color);
    color: var(--cds-color-text);
    line-height: var(--cds-font-button-label-lineheight);
    font-size: var(--cds-font-button-label-fontsize);

    box-shadow: 0 0 0 var(--cds-state-input-border-addition, var(--_cds-input-border-addition)) inset var(--_cds-input-border-color);

    /** Inputs always have their value vertically centered so this is simple */
    padding: var(--cds-input-size-padding-top)
        var(--cds-input-size-padding-left)
        var(--cds-input-size-padding-bottom)
        var(--cds-input-size-padding-left);
    min-height: var(--cds-input-size-minheight);
}

:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input
):is(:focus, :focus-visible) {
    --_cds-input-border-color: var(--cds-state-color-input-focus-border, var(--cds-color-focus-border));
    outline: none;
    /* Double the border on focus. Changing the border+padding itself results in a visible jump on Windows HiDPI.
     * Therefore, use an inset box shadow to achieve the effect without changing the element dimensions */
    --_cds-input-border-addition: 1px;
}

/* re-apply a dropdown arrow (as appearance: none removed it) */
select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23888' viewBox='0 0 16 16' %3E%3Cpath d='M8 8.843 2.225 2.938l-2.1 2.109L8 13.063l7.875-8.016-2.1-2.109z'%3E%3C/path%3E%3C/svg%3E");
    background-position: calc(100% - 8px) center;
    background-repeat: no-repeat;
    background-size: 12px;
}

:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    textarea
):is(:read-only, .cds-read-only) {
    --_cds-input-border-color: var(--cds-color-readonly-border);
    background: var(--cds-color-readonly-background);
    color: var(--cds-color-readonly-text);
}

:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
):is(:disabled, .cds-disabled) {
    --_cds-input-border-color: var(--cds-color-readonly-border);
    background: var(--cds-color-insensitive-background);
    color: var(--cds-color-insensitive-text);
    /* Fix for Safari rendering disabled text in white */
    -webkit-text-fill-color: var(--cds-color-insensitive-text);
}

:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
):is(:disabled, .cds-disabled)::placeholder {
    color: var(--cds-color-insensitive-text);
}

:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
):user-invalid {
    --_cds-input-border-addition: 1px;
    --_cds-input-border-color: var(--cds-color-error-border);
}

:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
):-moz-ui-invalid {
    --_cds-input-border-addition: 1px;
    --_cds-input-border-color: var(--cds-color-error-border);
}

@supports not selector(:user-invalid) {
    :is(
        input:not([type]),
        input[type='text'],
        input[type='email'],
        input[type='number'],
        input[type='date'],
        input[type='search'],
        input[type='tel'],
        select,
        textarea,
        .cds-input,
        .cds-input--select,
        .cds-input--field,
        .cds-input--textarea
    ):invalid {
        --_cds-input-border-addition: 1px;
        --_cds-input-border-color: var(--cds-color-error-border);
    }
}

:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
)::-ms-clear {
    /* Hide the cancel button for Edge/IE*/
    display: none;
}

/* :is does not support pseudo elements, so this is a lot of noise, until we can support nesting */
:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
)[type='search']::-webkit-search-decoration,
:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
)[type='search']::-webkit-search-cancel-button,
:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
)[type='search']::-webkit-search-results-button,
:is(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .cds-input,
    .cds-input--select,
    .cds-input--field,
    .cds-input--textarea
)[type='search']::-webkit-search-results-decoration {
    /* Hide the default cancel button for Chrome/Safari */
    appearance: none !important;
}

textarea,
.cds-input--textarea {
    resize: vertical;
}

input[type='radio'],
input[type='checkbox'] {
    accent-color: var(--cds-color-selectedgraphics-background-primary);
    width: 1em; /* Match the text it is next to */
    height: 1em;
    line-height: 0;
    cursor: pointer;
    flex-shrink: 0; /* Never let flexbox squeeze the checkbox */
}

::placeholder {
    font-style: italic;
    color: var(--cds-color-placeholder-text);
}

::selection {
    background: var(--cds-color-core-blue-06);
    color: var(--cds-color-core-white);
}

label {
    font-size: var(--cds-font-label-default-fontsize);
    line-height: var(--cds-font-label-default-lineheight);
    font-weight: var(--cds-font-label-default-weight);
}

/*
When using the Crescent Icons library
*/
.bb-icon,
.cds-icon {
    /* ensure icons don't get squished when in a flex container */
    flex-shrink: 0;
    /* The reset sets all SVGs to block, but icons are most commonly needed to be inline-block */
    display: inline-block;
}
/**
Classes for the Crescent typography tokens
Wrap large portions of text in `.cds-prose` to auto-apply heading styles and spacing based on just HTML elements
 */
.cds-t-body {
    font-size: var(--cds-font-body-default-fontsize);
    line-height: var(--cds-font-body-default-lineheight);
    font-weight: var(--cds-font-body-default-weight);
}
/* Prose has the larger body font by default */
.cds-t-body-large,
.cds-prose {
    font-size: var(--cds-font-body-large-fontsize);
    line-height: var(--cds-font-body-large-lineheight);
    font-weight: var(--cds-font-body-large-weight);
}

.cds-t-body-small {
    font-size: var(--cds-font-body-small-fontsize);
    line-height: var(--cds-font-body-small-lineheight);
    font-weight: var(--cds-font-body-small-weight);
}

.cds-t-body--b {
    font-weight: var(--cds-font-body-default-weight-bold);
}

.cds-t-h1,
.cds-prose h1 {
    font-size: var(--cds-font-heading-01-fontsize);
    line-height: var(--cds-font-heading-01-lineheight);
    font-weight: var(--cds-font-heading-01-weight);
}

.cds-t-h2,
.cds-prose h2 {
    font-size: var(--cds-font-heading-02-fontsize);
    line-height: var(--cds-font-heading-02-lineheight);
    font-weight: var(--cds-font-heading-02-weight);
}

.cds-t-h3,
.cds-prose h3 {
    font-size: var(--cds-font-heading-03-fontsize);
    line-height: var(--cds-font-heading-03-lineheight);
    font-weight: var(--cds-font-heading-03-weight);
}

.cds-t-h4,
.cds-prose h4 {
    font-size: var(--cds-font-heading-04-fontsize);
    line-height: var(--cds-font-heading-04-lineheight);
    font-weight: var(--cds-font-heading-04-weight);
}

.cds-t-h5,
.cds-prose h5 {
    font-size: var(--cds-font-heading-05-fontsize);
    line-height: var(--cds-font-heading-05-lineheight);
    font-weight: var(--cds-font-heading-05-weight);
}

.cds-t-h6,
.cds-prose h6 {
    font-size: var(--cds-font-heading-06-fontsize);
    line-height: var(--cds-font-heading-06-lineheight);
    font-weight: var(--cds-font-heading-06-weight);
}

.cds-t-group-heading1 {
    font-size: var(--cds-font-groupheading-01-fontsize);
    line-height: var(--cds-font-groupheading-01-lineheight);
    font-weight: var(--cds-font-groupheading-01-weight);
    text-transform: var(--cds-font-groupheading-01-transform);
}

.cds-t-group-heading2 {
    font-size: var(--cds-font-groupheading-02-fontsize);
    line-height: var(--cds-font-groupheading-02-lineheight);
    font-weight: var(--cds-font-groupheading-02-weight);
    text-transform: var(--cds-font-groupheading-02-transform);
}

.cds-t-label {
    font-size: var(--cds-font-label-default-fontsize);
    line-height: var(--cds-font-label-default-lineheight);
    font-weight: var(--cds-font-label-default-weight);
}

.cds-t-label--b {
    font-weight: var(--cds-font-label-default-weight-bold);
}

/** @deprecated - renamed to cds-t-label-small - todo - will be removed in v3 version (part of tokens repo) */
.cds-t-label--small {
    font-size: var(--cds-font-label-small-fontsize);
    line-height: var(--cds-font-label-small-lineheight);
    font-weight: var(--cds-font-label-small-weight);
}

.cds-t-label-small {
    font-size: var(--cds-font-label-small-fontsize);
    line-height: var(--cds-font-label-small-lineheight);
    font-weight: var(--cds-font-label-small-weight);
}

.cds-t-label-xsmall {
    font-size: var(--cds-font-label-xsmall-fontsize);
    line-height: var(--cds-font-label-xsmall-lineheight);
    font-weight: var(--cds-font-label-xsmall-weight);
    text-transform: var(--cds-font-label-xsmall-transform);
}

.cds-t-datadisplay1 {
    font-size: var(--cds-font-datadisplay-01-fontsize);
    line-height: var(--cds-font-datadisplay-01-lineheight);
    font-weight: var(--cds-font-datadisplay-01-weight);
}

.cds-t-datadisplay2 {
    font-size: var(--cds-font-datadisplay-02-fontsize);
    line-height: var(--cds-font-datadisplay-02-lineheight);
    font-weight: var(--cds-font-datadisplay-02-weight);
}

.cds-t-d1 {
    font-size: var(--cds-font-display-01-fontsize);
    line-height: var(--cds-font-display-01-lineheight);
    font-weight: var(--cds-font-display-01-weight);
    text-wrap: balance;
}

.cds-t-d1--b {
    font-weight: var(--cds-font-display-01-weight-bold);
}

.cds-t-d2 {
    font-size: var(--cds-font-display-02-fontsize);
    line-height: var(--cds-font-display-02-lineheight);
    font-weight: var(--cds-font-display-02-weight);
    text-wrap: balance;
}

.cds-t-d2--b {
    font-weight: var(--cds-font-display-02-weight-bold);
}

.cds-t-d3 {
    font-size: var(--cds-font-display-03-fontsize);
    line-height: var(--cds-font-display-03-lineheight);
    font-weight: var(--cds-font-display-03-weight);
    text-wrap: balance;
}

.cds-t-d3--b {
    font-weight: var(--cds-font-display-03-weight-bold);
}


/* `.cds-prose`  is for large amounts of text and handles proper spacing and sizing using natural HTML elements */

.cds-prose :is(p,ul,ol,h1,h2,h3,h4,h5,h6,table,figure,blockquote,iframe,pre,.cds-prose__block):not(:last-child) {
    margin-bottom: 0.625rem; /* todo - a crescent spacing token, once available */
}

.cds-prose--limit-line :is(p,li,h1,h2,h3,h4,h5,h6) {
    max-width: var(--cds-config-prose-line-limit, 70ch);
}

/* headings starting a new section have a much bigger gap */
.cds-prose :is(p,ul,ol,h1,h2,h3,h4,h5,h6,table,figure,blockquote,iframe,pre,.cds-prose__block) + :is(h1,h2,h3,h4,h5,h6) {
    margin-top: 2.5rem; /* todo - a crescent spacing token, once available */
}

.cds-ul,
.cds-ol,
.cds-prose ul,
.cds-prose ol {
    padding-left: 1em;
    list-style-position: outside;
    list-style-type: revert-layer;
}

.cds-li:not(:last-child),
.cds-prose li:not(:last-child) {
    margin-bottom: 0.25em;
}

.cds-prose :is(p, ul, ol) {
    text-wrap: pretty;
}

.cds-prose--preformatted p {
    white-space: pre-wrap;
}

/*
    Validation States
 */
:root {
    --cds-state-color-input-border: var(--cds-color-border-moderate); /* todo #CrescentToken for input border */
    --cds-state-color-input-focus-border: var(--cds-color-focus-border);

    --cds-state-color-background-hover: transparent;
    --cds-state-color-background-idle: transparent;
    --cds-state-color-background-selected: transparent;
}

[data-cds-state="information"] {
    --cds-state-color-input-border: var(--cds-color-informationpanel-border-moderate);
    --cds-state-color-input-focus-border: var(--cds-color-informationpanel-border-moderate);
    --cds-state-input-border-addition: 1px;

    --cds-state-color-background-hover: var(--cds-color-information-background-idle);
    --cds-state-color-background-idle: var(--cds-color-information-background-idle);
    --cds-state-color-background-selected: var(--cds-color-information-background-idle);
    --cds-state-color-backgroundbar-selected: var(--cds-color-informationpanel-border-subtle);
    --cds-state-color-border: var(--cds-color-informationpanel-border-moderate);
    --cds-state-color-icon: var(--cds-color-information-text);
    --cds-state-color-text: var(--cds-color-information-text);
    --cds-state-color-panel-background-hover: var(--cds-color-informationpanel-background-hover);
    --cds-state-color-panel-background-idle: var(--cds-color-informationpanel-background-idle);
    --cds-state-color-panel-border-moderate: var(--cds-color-informationpanel-border-moderate);
    --cds-state-color-panel-border-subtle: var(--cds-color-informationpanel-border-subtle);
    --cds-state-color-panel-icon: var(--cds-color-informationpanel-icon);
    --cds-state-color-panel-link:var(--cds-color-informationpanel-link);
    --cds-state-color-panel-text: var(--cds-color-informationpanel-text);
}

[data-cds-state="success"] {
    --cds-state-color-input-border: var(--cds-color-success-border);
    --cds-state-color-input-focus-border: var(--cds-color-success-border);
    --cds-state-input-border-addition: 1px;

    --cds-state-color-background-hover: var(--cds-color-success-background-hover);
    --cds-state-color-background-idle: var(--cds-color-success-background-idle);
    --cds-state-color-background-selected: var(--cds-color-success-background-selected);
    --cds-state-color-backgroundbar-selected: var(--cds-color-success-backgroundbar-selected);
    --cds-state-color-border: var(--cds-color-success-border);
    --cds-state-color-icon: var(--cds-color-success-icon);
    --cds-state-color-text: var(--cds-color-success-text);
    --cds-state-color-panel-background-hover: var(--cds-color-successpanel-background-hover);
    --cds-state-color-panel-background-idle: var(--cds-color-successpanel-background-idle);
    --cds-state-color-panel-border-moderate: var(--cds-color-successpanel-border-moderate);
    --cds-state-color-panel-border-subtle:  var(--cds-color-successpanel-border-subtle);
    --cds-state-color-panel-icon: var(--cds-color-successpanel-icon);
    --cds-state-color-panel-link:var(--cds-color-successpanel-link);
    --cds-state-color-panel-text: var(--cds-color-successpanel-text);
}

[data-cds-state="warning"] {
    --cds-state-color-input-border: var(--cds-color-warning-border);
    --cds-state-color-input-focus-border: var(--cds-color-warning-border);
    --cds-state-input-border-addition: 1px;

    --cds-state-color-background-hover: var(--cds-color-warning-background-hover);
    --cds-state-color-background-idle: var(--cds-color-warning-background-idle);
    --cds-state-color-background-selected: var(--cds-color-warning-background-selected);
    --cds-state-color-backgroundbar-selected: var(--cds-color-warning-backgroundbar-selected);
    --cds-state-color-border: var(--cds-color-warning-border);
    --cds-state-color-icon: var(--cds-color-warning-icon);
    --cds-state-color-text: var(--cds-color-warning-text);
    --cds-state-color-panel-background-hover: var(--cds-color-warningpanel-background-hover);
    --cds-state-color-panel-background-idle: var(--cds-color-warningpanel-background-idle);
    --cds-state-color-panel-border-moderate: var(--cds-color-warningpanel-border-moderate);
    --cds-state-color-panel-border-subtle:  var(--cds-color-warningpanel-border-subtle);
    --cds-state-color-panel-icon: var(--cds-color-warningpanel-icon);
    --cds-state-color-panel-link:var(--cds-color-warningpanel-link);
    --cds-state-color-panel-text: var(--cds-color-warningpanel-text);
}

[data-cds-state="error"] {
    --cds-state-color-input-border: var(--cds-color-error-border);
    --cds-state-color-input-focus-border: var(--cds-color-error-border);
    --cds-state-input-border-addition: 1px;

    --cds-state-color-background-hover: var(--cds-color-error-background-hover);
    --cds-state-color-background-idle: var(--cds-color-error-background-idle);
    --cds-state-color-background-selected: var(--cds-color-error-background-selected);
    --cds-state-color-backgroundbar-selected: var(--cds-color-error-backgroundbar-selected);
    --cds-state-color-border: var(--cds-color-error-border);
    --cds-state-color-icon: var(--cds-color-error-icon);
    --cds-state-color-text: var(--cds-color-error-text);
    --cds-state-color-panel-background-hover: var(--cds-color-errorpanel-background-hover);
    --cds-state-color-panel-background-idle: var(--cds-color-errorpanel-background-idle);
    --cds-state-color-panel-border-moderate: var(--cds-color-errorpanel-border-moderate);
    --cds-state-color-panel-border-subtle:  var(--cds-color-errorpanel-border-subtle);
    --cds-state-color-panel-icon: var(--cds-color-errorpanel-icon);
    --cds-state-color-panel-link:var(--cds-color-errorpanel-link);
    --cds-state-color-panel-text: var(--cds-color-errorpanel-text);
}

.cds-state {
    background: var(--cds-state-color-background-idle);
}
.cds-state--hover:hover {
    background: var(--cds-state-color-background-hover);
}
.cds-state--selected {
    background: var(--cds-state-color-background-selected);
}
.cds-state__text {
    color: var(--cds-state-color-text);
}
.cds-state__icon {
    color: var(--cds-state-color-icon);
}

.cds-state-panel {
    background: var(--cds-state-color-panel-background-idle);
    color: var(--cds-state-color-panel-text);
}
.cds-state-panel :is(.cds-state-panel__link, a:is(:link,:hover,:focus,:visited,:active)) {
    color: var(--cds-state-color-panel-link);
    text-decoration: underline;
}
.cds-state-panel .cds-state__icon {
    color: var(--cds-state-color-panel-icon);
}

.cds-state-panel--hover:hover {
    background: var(--cds-state-color-panel-background-hover);
}

/*
    Input Group:
    Removes borders from inner inputs, and moves it to the containing element
 */
.cds-input-group {
    /* Copied from the input styles (until CSS can support native mixins) */
    --_cds-input-border-color: var(--cds-state-color-input-border, var(--cds-color-border-moderate));
    --_cds-input-border-width: 1px;
    --_cds-input-border-addition: 0;

    display: flex;
    align-items: center;
    background-color: var(--cds-color-background);
    border: solid var(--_cds-input-border-width) var(--_cds-input-border-color);
    min-height: var(--cds-input-size-minheight);

    box-shadow: 0 0 0 var(--cds-state-input-border-addition, var(--_cds-input-border-addition)) inset var(--_cds-input-border-color);
}

/** remove default input styles as the group is imitating them.
    reduce the height and padding slightly to cater for the input-group border */
.cds-input-group input {
    flex: 1;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: calc(var(--cds-input-size-padding-top) - var(--_cds-input-border-width))
        calc(var(--cds-input-size-padding-left) - var(--_cds-input-border-width))
        calc(var(--cds-input-size-padding-bottom) - var(--_cds-input-border-width))
        calc(var(--cds-input-size-padding-left) - var(--_cds-input-border-width));
    min-height: calc(var(--cds-input-size-minheight) - (2 * var(--_cds-input-border-width)));
}
.cds-input-group input:not(:first-child) {
    padding-left: 0;
}
.cds-input-group input:not(:last-child) {
    padding-right: 0;
}

.cds-input-group input:is(:focus, :focus-visible) {
    box-shadow: none;
}

/** pull the button into the border space */
.cds-input-group :is(button .cds-button, a.cds-button, [class*="cds-button-"]) {
    margin-block: calc(-1 * var(--_cds-input-border-width));
}
.cds-input-group :is(button .cds-button, a.cds-button, [class*="cds-button-"]):last-child,
.cds-input-group :last-child :is(button .cds-button, a.cds-button, [class*="cds-button-"]) {
    margin-inline-end: calc(-1 * var(--_cds-input-border-width));
}
.cds-input-group :is(button .cds-button, a.cds-button, [class*="cds-button-"]):first-child,
.cds-input-group :first-child :is(button .cds-button, a.cds-button, [class*="cds-button-"]) {
    margin-inline-start: calc(-1 * var(--_cds-input-border-width));
}

.cds-input-group:focus-within {
    --_cds-input-border-color: var(--cds-state-color-input-focus-border, var(--cds-color-focus-border));
    outline: none;
    /* Double the border on focus. Changing the border+padding itself results in a visible jump on Windows HiDPI.
     * Therefore, use an inset box shadow to achieve the effect without changing the element dimensions */
    --_cds-input-border-addition: 1px;
}
.cds-input-group:has(:user-invalid),
.cds-input-group--invalid {
    --_cds-input-border-addition: 1px;
    --_cds-input-border-color: var(--cds-color-error-border);
}

/*
    Patterned Backgrounds
 */

.cds-pattern-hexgrid {
    --_lineColor: var(--cds-config-pattern-linecolor, rgba(0, 0, 0, 0.3));
    --_patternSize: var(--cds-config-pattern-size, 96px);
    --_lineAngle: 30deg;
    background-position-x: -1px;
    background-image: linear-gradient(
            var(--_lineAngle),
            var(--_lineColor) 1px,
            transparent 1px,
            transparent 50%,
            var(--_lineColor) 50%,
            var(--_lineColor) 50.78%,
            transparent 50.78%,
            transparent 100%
    ),
    linear-gradient(
            calc(-1 * var(--_lineAngle)),
            var(--_lineColor) 1px,
            transparent 1px,
            transparent 50%,
            var(--_lineColor) 50%,
            var(--_lineColor) 50.78%,
            transparent 50.78%,
            transparent 100%
    ),
    linear-gradient(90deg, var(--_lineColor) 0px, var(--_lineColor) 1px, transparent 1px);
    background-size: var(--_patternSize) calc(var(--_patternSize) * tan(30deg)),
    var(--_patternSize) calc(var(--_patternSize) * tan(30deg)),
    calc(var(--_patternSize) / 2) calc(var(--_patternSize) / 2);
}

/**
    Accessibly hide an element from visibility
 */
.cds-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

}