/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
:root {
    --md-source: #717079;
    /* primary palette (kept as before – you can tweak later if you want) */
    --md-ref-palette-primary0: #000000;
    --md-ref-palette-primary10: #002114;
    --md-ref-palette-primary20: #003825;
    --md-ref-palette-primary25: #00452e;
    --md-ref-palette-primary30: #005138;
    --md-ref-palette-primary35: #005f41;
    --md-ref-palette-primary40: #006c4b;
    --md-ref-palette-primary50: #00885f;
    --md-ref-palette-primary60: #2ea377;
    --md-ref-palette-primary70: #4fbf91;
    --md-ref-palette-primary80: #6ddbab;
    --md-ref-palette-primary90: #8af8c6;
    --md-ref-palette-primary95: #beffdd;
    --md-ref-palette-primary98: #e8fff0;
    --md-ref-palette-primary99: #f4fff6;
    --md-ref-palette-primary100: #ffffff;
    /* secondary palette (kept) */
    --md-ref-palette-secondary0: #000000;
    --md-ref-palette-secondary10: #0a1f16;
    --md-ref-palette-secondary20: #1f352a;
    --md-ref-palette-secondary25: #2a4035;
    --md-ref-palette-secondary30: #364b40;
    --md-ref-palette-secondary35: #41574b;
    --md-ref-palette-secondary40: #4d6357;
    --md-ref-palette-secondary50: #657c6f;
    --md-ref-palette-secondary60: #7e9688;
    --md-ref-palette-secondary70: #99b1a2;
    --md-ref-palette-secondary80: #b4ccbd;
    --md-ref-palette-secondary90: #cfe9d9;
    --md-ref-palette-secondary95: #ddf7e7;
    --md-ref-palette-secondary98: #e8fff0;
    --md-ref-palette-secondary99: #f4fff6;
    --md-ref-palette-secondary100: #ffffff;
    /* tertiary palette (kept) */
    --md-ref-palette-tertiary0: #000000;
    --md-ref-palette-tertiary10: #001f29;
    --md-ref-palette-tertiary20: #073543;
    --md-ref-palette-tertiary25: #17404f;
    --md-ref-palette-tertiary30: #244c5b;
    --md-ref-palette-tertiary35: #315767;
    --md-ref-palette-tertiary40: #3d6373;
    --md-ref-palette-tertiary50: #567c8d;
    --md-ref-palette-tertiary60: #7096a7;
    --md-ref-palette-tertiary70: #8ab1c2;
    --md-ref-palette-tertiary80: #a5ccde;
    --md-ref-palette-tertiary90: #c1e9fb;
    --md-ref-palette-tertiary95: #dff4ff;
    --md-ref-palette-tertiary98: #f3faff;
    --md-ref-palette-tertiary99: #fafdff;
    --md-ref-palette-tertiary100: #ffffff;
    /* neutral palette (kept) */
    --md-ref-palette-neutral0: #000000;
    --md-ref-palette-neutral10: #191c1a;
    --md-ref-palette-neutral20: #2e312f;
    --md-ref-palette-neutral25: #393c3a;
    --md-ref-palette-neutral30: #444845;
    --md-ref-palette-neutral35: #505350;
    --md-ref-palette-neutral40: #5c5f5c;
    --md-ref-palette-neutral50: #757875;
    --md-ref-palette-neutral60: #8f918e;
    --md-ref-palette-neutral70: #a9aca8;
    --md-ref-palette-neutral80: #c5c7c3;
    --md-ref-palette-neutral90: #e1e3df;
    --md-ref-palette-neutral95: #eff1ed;
    --md-ref-palette-neutral98: #f8faf6;
    --md-ref-palette-neutral99: #fbfdf9;
    --md-ref-palette-neutral100: #ffffff;
    /* neutral-variant palette (kept) */
    --md-ref-palette-neutral-variant0: #000000;
    --md-ref-palette-neutral-variant10: #151d19;
    --md-ref-palette-neutral-variant20: #2a322d;
    --md-ref-palette-neutral-variant25: #353d38;
    --md-ref-palette-neutral-variant30: #404943;
    --md-ref-palette-neutral-variant35: #4c554f;
    --md-ref-palette-neutral-variant40: #57605b;
    --md-ref-palette-neutral-variant50: #707973;
    --md-ref-palette-neutral-variant60: #8a938c;
    --md-ref-palette-neutral-variant70: #a4ada6;
    --md-ref-palette-neutral-variant80: #bfc9c1;
    --md-ref-palette-neutral-variant90: #dbe5dd;
    --md-ref-palette-neutral-variant95: #eaf3eb;
    --md-ref-palette-neutral-variant98: #f2fcf4;
    --md-ref-palette-neutral-variant99: #f5fff7;
    --md-ref-palette-neutral-variant100: #ffffff;
    /* error palette (kept) */
    --md-ref-palette-error0: #000000;
    --md-ref-palette-error10: #410002;
    --md-ref-palette-error20: #690005;
    --md-ref-palette-error25: #7e0007;
    --md-ref-palette-error30: #93000a;
    --md-ref-palette-error35: #a80710;
    --md-ref-palette-error40: #ba1a1a;
    --md-ref-palette-error50: #de3730;
    --md-ref-palette-error60: #ff5449;
    --md-ref-palette-error70: #ff897d;
    --md-ref-palette-error80: #ffb4ab;
    --md-ref-palette-error90: #ffdad6;
    --md-ref-palette-error95: #ffedea;
    --md-ref-palette-error98: #fff8f7;
    --md-ref-palette-error99: #fffbff;
    --md-ref-palette-error100: #ffffff;

    /* ---------- LIGHT (from *LightReducedContrast) ---------- */
    --md-sys-color-primary-light: #5F5E67;
    --md-sys-color-on-primary-light: #FBF8FF;
    --md-sys-color-primary-container-light: #ECE9F4;
    --md-sys-color-on-primary-container-light: #56565E;
    --md-sys-color-secondary-light: #5F5F5F;
    --md-sys-color-on-secondary-light: #F9F9F9;
    --md-sys-color-secondary-container-light: #E2E2E2;
    --md-sys-color-on-secondary-container-light: #525252;
    --md-sys-color-tertiary-light: #5F5F5F;
    --md-sys-color-on-tertiary-light: #F9F9F9;
    --md-sys-color-tertiary-container-light: #FFFFFF;
    --md-sys-color-on-tertiary-container-light: #626262;
    --md-sys-color-error-light: #BB1B1B;
    --md-sys-color-error-container-light: #FE4E44;
    --md-sys-color-on-error-light: #FFF7F6;
    --md-sys-color-on-error-container-light: #570003;
    --md-sys-color-background-light: #F9F9F9;
    --md-sys-color-on-background-light: #323232;
    --md-sys-color-surface-light: #F9F9F9;
    --md-sys-color-on-surface-light: #323232;
    --md-sys-color-surface-variant-light: #E2E2E2;
    --md-sys-color-on-surface-variant-light: #5F5F5F;
    --md-sys-color-outline-light: #7B7B7B;
    --md-sys-color-inverse-on-surface-light: #9D9D9D;
    --md-sys-color-inverse-surface-light: #0E0E0E;
    --md-sys-color-inverse-primary-light: #918F99;
    --md-sys-color-shadow-light: #000000;
    --md-sys-color-surface-tint-light: #5F5E67;
    --md-sys-color-outline-variant-light: #B2B2B2;
    --md-sys-color-scrim-light: #000000;

    /* ---------- DARK (from *DarkReducedContrast) ---------- */
    --md-sys-color-primary-dark: #9E9DA6;
    --md-sys-color-on-primary-dark: #1F1F27;
    --md-sys-color-primary-container-dark: #A19FA9;
    --md-sys-color-on-primary-container-dark: #22222A;
    --md-sys-color-secondary-dark: #9E9E9E;
    --md-sys-color-on-secondary-dark: #202020;
    --md-sys-color-secondary-container-dark: #3B3B3B;
    --md-sys-color-on-secondary-container-dark: #BFBFBF;
    --md-sys-color-tertiary-dark: #9E9E9E;
    --md-sys-color-on-tertiary-dark: #202020;
    --md-sys-color-tertiary-container-dark: #EBEBEB;
    --md-sys-color-on-tertiary-container-dark: #575757;
    --md-sys-color-error-dark: #FF7164;
    --md-sys-color-error-container-dark: #AC0C12;
    --md-sys-color-on-error-dark: #4A0002;
    --md-sys-color-on-error-container-dark: #FFB8B0;
    --md-sys-color-background-dark: #0E0E0E;
    --md-sys-color-on-background-dark: #E5E5E5;
    --md-sys-color-surface-dark: #0E0E0E;
    --md-sys-color-on-surface-dark: #E5E5E5;
    --md-sys-color-surface-variant-dark: #262626;
    --md-sys-color-on-surface-variant-dark: #939393;
    --md-sys-color-outline-dark: #757575;
    --md-sys-color-inverse-on-surface-dark: #555555;
    --md-sys-color-inverse-surface-dark: #F9F9F9;
    --md-sys-color-inverse-primary-dark: #5F5E67;
    --md-sys-color-shadow-dark: #000000;
    --md-sys-color-surface-tint-dark: #9E9DA6;
    --md-sys-color-outline-variant-dark: #484848;
    --md-sys-color-scrim-dark: #000000;
}


:root {
    /* extra surface tokens mapped from generator */
    --md-sys-color-surface-low-dark: #131313;       /* SurfaceContainerLowDarkReducedContrast */
    --md-sys-color-surface-low-light: #F3F3F3;      /* SurfaceContainerLowLightReducedContrast */
    --md-sys-color-surface-saturated-dark: #2C2C2C; /* SurfaceBrightDarkReducedContrast */
    --md-sys-color-surface-saturated-light: #DADADA;/* SurfaceDimLightReducedContrast */

    /* everything below is exactly as you had it (success, warning, cm* etc) */
    --md-ref-palette-success0: rgb(0, 0, 0);
    --md-ref-palette-success10: rgb(0, 34, 3);
    --md-ref-palette-success20: rgb(0, 57, 8);
    --md-ref-palette-success25: rgb(0, 70, 11);
    --md-ref-palette-success30: rgb(10, 83, 20);
    --md-ref-palette-success35: rgb(27, 95, 31);
    --md-ref-palette-success40: rgb(41, 107, 42);
    --md-ref-palette-success50: rgb(67, 133, 64);
    --md-ref-palette-success60: rgb(92, 160, 87);
    --md-ref-palette-success70: rgb(118, 187, 111);
    --md-ref-palette-success80: rgb(145, 216, 136);
    --md-ref-palette-success90: rgb(172, 244, 162);
    --md-ref-palette-success95: rgb(201, 255, 190);
    --md-ref-palette-success98: rgb(236, 255, 228);
    --md-ref-palette-success99: rgb(246, 255, 239);
    --md-ref-palette-success100: #ffffff;

    --md-sys-color-warning-dark: #ffe7ab;
    --md-sys-color-warning-container-dark: #935800;
    --md-sys-color-on-warning-dark: #693f00;
    --md-sys-color-on-warning-container-dark: #ffe7d6;

    --md-sys-color-warning-light: #ba871a;
    --md-sys-color-warning-container-light: #fff1d6;
    --md-sys-color-on-warning-light: #ffffff;
    --md-sys-color-on-warning-container-light: #412700;

    --md-sys-color-success-light: #296b2a;
    --md-sys-color-success-container-light: #acf4a2;
    --md-sys-color-on-success-light: #ffffff;
    --md-sys-color-on-success-container-light: #002203;

    --md-sys-color-success-dark: #91d888;
    --md-sys-color-success-container-dark: #0a5314;
    --md-sys-color-on-success-dark: #003908;
    --md-sys-color-on-success-container-dark: #acf4a2;

    --md-cm1-dark: #191C1A;
    --md-cm2-dark: #262C2C;
    --md-cm3-dark: #323C3E;
    --md-cm4-dark: #3F4C4F;
    --md-cm5-dark: #4C5C61;
    --md-cm6-dark: #596C73;
    --md-cm7-dark: #657C85;
    --md-cm8-dark: #728C97;
    --md-cm9-dark: #7F9CA9;
    --md-cm10-dark: #8CACBA;
    --md-cm11-dark: #98BCCC;
    --md-cm12-dark: #A5CCDE;

    --md-cm1-light: #D8DCD4;
    --md-cm2-light: #CAD1CB;
    --md-cm3-light: #BCC6C2;
    --md-cm4-light: #AEBBBA;
    --md-cm5-light: #A0B0B1;
    --md-cm6-light: #92A5A8;
    --md-cm7-light: #839A9F;
    --md-cm8-light: #758F96;
    --md-cm9-light: #67848D;
    --md-cm10-light: #597985;
    --md-cm11-light: #4B6E7C;
    --md-cm12-light: #3D6373;

    --md-cm1-n-dark: #191c1a;
    --md-cm2-n-dark: #2b2825;
    --md-cm3-n-dark: #3c3330;
    --md-cm4-n-dark: #4e3f3b;
    --md-cm5-n-dark: #604b47;
    --md-cm6-n-dark: #715652;
    --md-cm7-n-dark: #83625d;
    --md-cm8-n-dark: #956e68;
    --md-cm9-n-dark: #a77a73;
    --md-cm10-n-dark: #b8857e;
    --md-cm11-n-dark: #ca918a;
    --md-cm12-n-dark: #ffb4ab;

    --md-cm1-n-light: #d8dcd4;
    --md-cm2-n-light: #d6cdc6;
    --md-cm3-n-light: #d3beb7;
    --md-cm4-n-light: #d1afa9;
    --md-cm5-n-light: #cfa09b;
    --md-cm6-n-light: #cc918c;
    --md-cm7-n-light: #ca827e;
    --md-cm8-n-light: #c87470;
    --md-cm9-n-light: #c66562;
    --md-cm10-n-light: #c35653;
    --md-cm11-n-light: #c14745;
    --md-cm12-n-light: #bf3837;

    --md-cm1-p-dark: #191c1a;
    --md-cm2-p-dark: #222a22;
    --md-cm3-p-dark: #2b392b;
    --md-cm4-p-dark: #354733;
    --md-cm5-p-dark: #3e563c;
    --md-cm6-p-dark: #476444;
    --md-cm7-p-dark: #50734d;
    --md-cm8-p-dark: #5a8155;
    --md-cm9-p-dark: #63905e;
    --md-cm10-p-dark: #6c9e66;
    --md-cm11-p-dark: #75ad6f;
    --md-cm12-p-dark: #7fbb77;

    --md-cm1-p-light: #d8dcd4;
    --md-cm2-p-light: #cbd3c7;
    --md-cm3-p-light: #bdcbba;
    --md-cm4-p-light: #b0c2ad;
    --md-cm5-p-light: #a2b9a0;
    --md-cm6-p-light: #95b193;
    --md-cm7-p-light: #87a886;
    --md-cm8-p-light: #7a9f78;
    --md-cm9-p-light: #6c966b;
    --md-cm10-p-light: #5f8e5e;
    --md-cm11-p-light: #518551;
    --md-cm12-p-light: #447c44;
}



:root {
    /* TYPOGRAPHY → Chillax (headings) + Satoshi (body/labels) */

    /* display - large */
    --md-sys-typescale-display-large-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-display-large-font-family-style: Regular;
    --md-sys-typescale-display-large-font-weight: 500;
    --md-sys-typescale-display-large-font-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-letter-spacing: -0.25px;

    /* display - medium */
    --md-sys-typescale-display-medium-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-display-medium-font-family-style: Regular;
    --md-sys-typescale-display-medium-font-weight: 500;
    --md-sys-typescale-display-medium-font-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-medium-letter-spacing: 0px;

    /* display - small */
    --md-sys-typescale-display-small-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-display-small-font-family-style: Regular;
    --md-sys-typescale-display-small-font-weight: 500;
    --md-sys-typescale-display-small-font-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    --md-sys-typescale-display-small-letter-spacing: 0px;

    /* headline - large */
    --md-sys-typescale-headline-large-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-headline-large-font-family-style: Regular;
    --md-sys-typescale-headline-large-font-weight: 500;
    --md-sys-typescale-headline-large-font-size: 48px;
    --md-sys-typescale-headline-large-line-height: 58px;
    --md-sys-typescale-headline-large-letter-spacing: 0px;

    /* headline - medium */
    --md-sys-typescale-headline-medium-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-headline-medium-font-family-style: Regular;
    --md-sys-typescale-headline-medium-font-weight: 500;
    --md-sys-typescale-headline-medium-font-size: 38px;
    --md-sys-typescale-headline-medium-line-height: 42px;
    --md-sys-typescale-headline-medium-letter-spacing: 0px;

    /* headline - small */
    --md-sys-typescale-headline-small-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-headline-small-font-family-style: Regular;
    --md-sys-typescale-headline-small-font-weight: 500;
    --md-sys-typescale-headline-small-font-size: 28px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-letter-spacing: 0px;

    /* body - large */
    --md-sys-typescale-body-large-font-family-name: "Satoshi", sans-serif;
    --md-sys-typescale-body-large-font-family-style: Regular;
    --md-sys-typescale-body-large-font-weight: 400;
    --md-sys-typescale-body-large-font-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-letter-spacing: 0.50px;

    /* body - medium */
    --md-sys-typescale-body-medium-font-family-name: "Satoshi", sans-serif;
    --md-sys-typescale-body-medium-font-family-style: Regular;
    --md-sys-typescale-body-medium-font-weight: 400;
    --md-sys-typescale-body-medium-font-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-letter-spacing: 0.25px;

    /* body - small */
    --md-sys-typescale-body-small-font-family-name: "Satoshi", sans-serif;
    --md-sys-typescale-body-small-font-family-style: Regular;
    --md-sys-typescale-body-small-font-weight: 400;
    --md-sys-typescale-body-small-font-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-letter-spacing: 0.40px;

    /* label - large */
    --md-sys-typescale-label-large-font-family-name: "Satoshi", sans-serif;
    --md-sys-typescale-label-large-font-family-style: Medium;
    --md-sys-typescale-label-large-font-weight: 500;
    --md-sys-typescale-label-large-font-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-letter-spacing: 0.10px;

    /* label - medium */
    --md-sys-typescale-label-medium-font-family-name: "Satoshi", sans-serif;
    --md-sys-typescale-label-medium-font-family-style: Medium;
    --md-sys-typescale-label-medium-font-weight: 500;
    --md-sys-typescale-label-medium-font-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-letter-spacing: 0.50px;

    /* label - small */
    --md-sys-typescale-label-small-font-family-name: "Satoshi", sans-serif;
    --md-sys-typescale-label-small-font-family-style: Medium;
    --md-sys-typescale-label-small-font-weight: 500;
    --md-sys-typescale-label-small-font-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-letter-spacing: 0.50px;

    /* title - large */
    --md-sys-typescale-title-large-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-title-large-font-family-style: Regular;
    --md-sys-typescale-title-large-font-weight: 500;
    --md-sys-typescale-title-large-font-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-large-letter-spacing: 0px;

    /* title - medium */
    --md-sys-typescale-title-medium-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-title-medium-font-family-style: Medium;
    --md-sys-typescale-title-medium-font-weight: 500;
    --md-sys-typescale-title-medium-font-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-letter-spacing: 0.15px;

    /* title - small */
    --md-sys-typescale-title-small-font-family-name: "Chillax", sans-serif;
    --md-sys-typescale-title-small-font-family-style: Medium;
    --md-sys-typescale-title-small-font-weight: 500;
    --md-sys-typescale-title-small-font-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-letter-spacing: 0.10px;

    --md-list-item-supporting-text-font: "Satoshi", sans-serif;
}



:root {
    --md-sys-color-primary: var(--md-sys-color-primary-light);
    --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
    --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
    --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
    --md-sys-color-secondary: var(--md-sys-color-secondary-light);
    --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
    --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
    --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
    --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
    --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
    --md-sys-color-error: var(--md-sys-color-error-light);
    --md-sys-color-error-container: var(--md-sys-color-error-container-light);
    --md-sys-color-on-error: var(--md-sys-color-on-error-light);
    --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
    --md-sys-color-background: var(--md-sys-color-background-light);
    --md-sys-color-on-background: var(--md-sys-color-on-background-light);
    --md-sys-color-surface: var(--md-sys-color-surface-light);
    --md-sys-color-surface-low: var(--md-sys-color-surface-low-light);
    --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
    --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
    --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
    --md-sys-color-outline: var(--md-sys-color-outline-light);
    --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
    --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
    --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
    --md-sys-color-shadow: var(--md-sys-color-shadow-light);
    --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
    --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
    --md-sys-color-scrim: var(--md-sys-color-scrim-light);

    --md-sys-color-success: var(--md-sys-color-success-light);
    --md-sys-color-success-container: var(--md-sys-color-success-container-light);
    --md-sys-color-on-success: var(--md-sys-color-on-success-light);
    --md-sys-color-on-success-container: var(--md-sys-color-on-success-container-light);

    --md-cm1: var(--md-cm1-light);
    --md-cm2: var(--md-cm2-light);
    --md-cm3: var(--md-cm3-light);
    --md-cm4: var(--md-cm4-light);
    --md-cm5: var(--md-cm5-light);
    --md-cm6: var(--md-cm6-light);
    --md-cm7: var(--md-cm7-light);
    --md-cm8: var(--md-cm8-light);
    --md-cm9: var(--md-cm9-light);
    --md-cm10: var(--md-cm10-light);
    --md-cm11: var(--md-cm11-light);
    --md-cm12: var(--md-cm12-light);


    --md-cm1-n: var(--md-cm1-n-light);
    --md-cm2-n: var(--md-cm2-n-light);
    --md-cm3-n: var(--md-cm3-n-light);
    --md-cm4-n: var(--md-cm4-n-light);
    --md-cm5-n: var(--md-cm5-n-light);
    --md-cm6-n: var(--md-cm6-n-light);
    --md-cm7-n: var(--md-cm7-n-light);
    --md-cm8-n: var(--md-cm8-n-light);
    --md-cm9-n: var(--md-cm9-n-light);
    --md-cm10-n: var(--md-cm10-n-light);
    --md-cm11-n: var(--md-cm11-n-light);
    --md-cm12-n: var(--md-cm12-n-light);

    --md-cm1-p: var(--md-cm1-p-light);
    --md-cm2-p: var(--md-cm2-p-light);
    --md-cm3-p: var(--md-cm3-p-light);
    --md-cm4-p: var(--md-cm4-p-light);
    --md-cm5-p: var(--md-cm5-p-light);
    --md-cm6-p: var(--md-cm6-p-light);
    --md-cm7-p: var(--md-cm7-p-light);
    --md-cm8-p: var(--md-cm8-p-light);
    --md-cm9-p: var(--md-cm9-p-light);
    --md-cm10-p: var(--md-cm10-p-light);
    --md-cm11-p: var(--md-cm11-p-light);
    --md-cm12-p: var(--md-cm12-p-light);

    --md-sys-color-surface-saturated: var(--md-sys-color-surface-saturated-light);

    --md-sys-color-warning: var(--md-sys-color-warning-light);
    --md-sys-color-warning-container: var(--md-sys-color-warning-container-light);
    --md-sys-color-on-warning: var(--md-sys-color-on-warning-light);
    --md-sys-color-on-warning-container: var(--md-sys-color-on-warning-container-light);
}


@media (prefers-color-scheme: dark) {
    :root {
        --md-sys-color-primary: var(--md-sys-color-primary-dark);
        --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
        --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
        --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
        --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
        --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
        --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
        --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
        --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
        --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
        --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
        --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
        --md-sys-color-error: var(--md-sys-color-error-dark);
        --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
        --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
        --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
        --md-sys-color-background: var(--md-sys-color-background-dark);
        --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
        --md-sys-color-surface: var(--md-sys-color-surface-dark);
        --md-sys-color-surface-low: var(--md-sys-color-surface-low-dark);
        --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
        --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
        --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
        --md-sys-color-outline: var(--md-sys-color-outline-dark);
        --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
        --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
        --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
        --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
        --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
        --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
        --md-sys-color-scrim: var(--md-sys-color-scrim-dark);

        --md-sys-color-success: var(--md-sys-color-success-dark);
        --md-sys-color-success-container: var(--md-sys-color-success-container-dark);
        --md-sys-color-on-success: var(--md-sys-color-on-success-dark);
        --md-sys-color-on-success-container: var(--md-sys-color-on-success-container-dark);

        --md-cm1: var(--md-cm1-dark);
        --md-cm2: var(--md-cm2-dark);
        --md-cm3: var(--md-cm3-dark);
        --md-cm4: var(--md-cm4-dark);
        --md-cm5: var(--md-cm5-dark);
        --md-cm6: var(--md-cm6-dark);
        --md-cm7: var(--md-cm7-dark);
        --md-cm8: var(--md-cm8-dark);
        --md-cm9: var(--md-cm9-dark);
        --md-cm10: var(--md-cm10-dark);
        --md-cm11: var(--md-cm11-dark);
        --md-cm12: var(--md-cm12-dark);

        --md-cm1-n: var(--md-cm1-n-dark);
        --md-cm2-n: var(--md-cm2-n-dark);
        --md-cm3-n: var(--md-cm3-n-dark);
        --md-cm4-n: var(--md-cm4-n-dark);
        --md-cm5-n: var(--md-cm5-n-dark);
        --md-cm6-n: var(--md-cm6-n-dark);
        --md-cm7-n: var(--md-cm7-n-dark);
        --md-cm8-n: var(--md-cm8-n-dark);
        --md-cm9-n: var(--md-cm9-n-dark);
        --md-cm10-n: var(--md-cm10-n-dark);
        --md-cm11-n: var(--md-cm11-n-dark);
        --md-cm12-n: var(--md-cm12-n-dark);

        --md-cm1-p: var(--md-cm1-p-dark);
        --md-cm2-p: var(--md-cm2-p-dark);
        --md-cm3-p: var(--md-cm3-p-dark);
        --md-cm4-p: var(--md-cm4-p-dark);
        --md-cm5-p: var(--md-cm5-p-dark);
        --md-cm6-p: var(--md-cm6-p-dark);
        --md-cm7-p: var(--md-cm7-p-dark);
        --md-cm8-p: var(--md-cm8-p-dark);
        --md-cm9-p: var(--md-cm9-p-dark);
        --md-cm10-p: var(--md-cm10-p-dark);
        --md-cm11-p: var(--md-cm11-p-dark);
        --md-cm12-p: var(--md-cm12-p-dark);

        --md-sys-color-surface-saturated: var(--md-sys-color-surface-saturated-dark);

        --md-sys-color-warning: var(--md-sys-color-warning-dark);
        --md-sys-color-warning-container: var(--md-sys-color-warning-container-dark);
        --md-sys-color-on-warning: var(--md-sys-color-on-warning-dark);
        --md-sys-color-on-warning-container: var(--md-sys-color-on-warning-container-dark);
    }
}

:root {
    --md-primary-tab-container-color: var(--md-sys-color-surface-low);
    --md-secondary-tab-container-color: var(--md-sys-color-surface-low);
    --md-sys-margin-large: 16px;
    --md-sys-margin: 14px;
    --md-sys-margin-small: 8px;
    --md-sys-outer-padding: 14px;
    --md-dialog-container-color: var(--md-sys-color-surface);
    --md-dialog-headline-font: var(--md-sys-typescale-body-medium-font-family-name);
    --md-filter-chip-label-text-font: var(--md-sys-typescale-body-medium-font-family-name);
    --md-filled-button-label-text-font: var(--md-sys-typescale-body-medium-font-family-name);
    --md-outlined-button-label-text-font: var(--md-sys-typescale-body-medium-font-family-name);
    --md-text-button-label-text-font: var(--md-sys-typescale-body-medium-font-family-name);
    --md-outlined-field-content-font: var(--md-sys-typescale-body-medium-font-family-name);
    --md-filled-field-content-font: var(--md-sys-typescale-body-medium-font-family-name);

    --md-assist-chip-label-text-font: var(--md-sys-typescale-body-medium-font-family-name);

    --md-sys-color-surface-half: color-mix(in srgb,
    var(--md-sys-color-surface-variant),
    var(--md-sys-color-surface) 50%
    );
    --md-list-item-label-text-font: var(--md-sys-typescale-body-medium-font-family-name);

    --bottombar-height: 0px;
}



:root {
    --bs-primary: var(--md-sys-color-primary);
    --bs-secondary: var(--md-sys-color-secondary);
    --bs-success: var(--md-sys-color-success);
    --bs-danger: var(--md-sys-color-error);
    --bs-warning: var(--md-sys-color-warning);
    --bs-info: var(--md-sys-color-tertiary);
    --bs-light: var(--md-sys-color-surface);
}

.alert {
    border-radius: var(--md-sys-margin);
}

.alert-warning {
    color: var(--md-sys-color-on-warning-container) !important;
    background-color: var(--md-sys-color-warning-container);
    border-color: var(--md-sys-color-warning-container) !important;
    border: 1.33px solid var(--md-sys-color-on-warning-container);
}
.alert-danger {
    color: var(--md-sys-color-on-error-container) !important;
    background-color: var(--md-sys-color-error-container);
    border-color: var(--md-sys-color-error-container) !important;
    border: 1.33px solid var(--md-sys-color-on-error-container);
}
.alert-inf, .alert-info {
    background-color: var(--md-sys-color-tertiary);
    color: var(--md-sys-color-on-tertiary) !important;
    border-color: var(--md-sys-color-tertiary) !important;
    border: 1.33px solid var(--md-sys-color-on-tertiary);
}
.text-danger {
    color: var(--md-sys-color-error) !important;
}

.success-border {
    border-color: var(--md-sys-color-success) !important;
}

.has-error .form-control, .input-error .form-control {
    box-shadow: 4px 4px 0 var(--md-sys-color-error);
    z-index: 3;
}

body {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: var(--md-sys-typescale-body-medium-font-size);
}

body.error-page {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
body.error-page .error-title p {
    color: var(--md-sys-color-error) !important;
}

p, h1, h2, h3, h4, h5, h6 {
    color: var(--md-sys-color-on-surface);
}

a {
    color: var(--md-sys-color-primary);
}

.text-info {
    color: var(--md-sys-color-tertiary) !important;
}

.form-change-lang .language-icon, .form-change-lang .control-label {
    color: var(--md-sys-color-tertiary);
}

.form-change-lang #lang-select {
    background-color: transparent;
}

select {
    color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface-variant);
    border-radius: var(--md-sys-margin);
    padding: var(--md-sys-margin-small) var(--md-sys-margin);
}

.form-change-lang #language-changer-select {
    color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface-variant);
}

.checkbox-item label::before, .privacy .checkbox-item label::before {
    border: 3px solid var(--md-sys-color-outline);
}

.radio-item label::before {
    border: 3px solid var(--md-sys-color-outline);
    background-color: transparent !important;
}

.btn {
    padding: var(--md-sys-margin-small) var(--md-sys-margin-large);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-radius: var(--md-sys-margin);
    border: 0px !important;
}

.btn:hover {
    background: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary) !important;
}

.btn-lg {
    padding: var(--md-sys-margin) var(--md-sys-margin-large);
}

.btn-primary {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.btn-primary[type="submit"] {
    box-shadow: 3px 3px 0 var(--md-sys-color-on-primary-container) !important;
}

.btn-primary:hover {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary.dropdown-toggle.show, .btn-primary.dropdown-toggle.show:focus {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.btn-check + .btn-primary:active, .btn-check + .btn-primary.active, .btn-check + .btn-primary:active:focus {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}
.btn-check:focus + .btn-primary {
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary);
}
.btn-check:active + .btn-primary {
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary);
}
.btn-check:checked + .btn-primary, .btn-check:checked + .btn-primary:focus, .btn-check:focus:checked + .btn-primary {
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary);
}


.checkbox-item label::before {
    border-radius: 2px;
    background: var(--md-sys-color-surface);
}

.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: var(--md-sys-color-primary);
}
.checkbox-item input[type=checkbox]:checked + label {
    color: var(--md-sys-color-primary);
}

.checkbox-item input[type="checkbox"]:checked + label::after, .checkbox-item input[type="radio"]:checked + label::after {
    background: var(--md-sys-color-primary);
    width: 0.6em;
    height: 0.6em;
    border-radius: 10%;
    content: "";
    transform: translate(0.2em, 0.2em);
}

.ls-answers label, .answer-item label, .control-label {
    color: var(--md-sys-color-on-surface);
}

.radio-item input[type=radio]:checked + label {
    color: var(--md-sys-color-primary);
}

.radio-item input[type=radio]:checked + label::before {
    border-color: var(--md-sys-color-primary);
}

.radio-item input[type=radio]:checked + label::after {
    background-color: var(--md-sys-color-primary);
}

textarea, input[type="text"] {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-variant);
    border-radius: var(--md-sys-margin);
    padding: var(--md-sys-margin-small) var(--md-sys-margin);
}

.form-control {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline);
}

.form-control[disabled] {
    background-color: var(--md-sys-color-surface-low);
    color: var(--md-sys-color-on-surface);
    border-color: transparent !important;
}

.form-control:focus {
    box-shadow: 4px 4px 0 var(--md-sys-color-primary-container);
}

input.form-control {
    line-height: 2em;
}

input[type=password], .ui-autocomplete-input, textarea, .uneditable-input {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline);
}

.form-control:focus {
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--md-sys-color-on-surface);
    --bs-table-striped-bg: var(--md-sys-color-surface-low);
    --bs-table-active-color: var(--md-sys-color-on-surface);
    --bs-table-active-bg: var(--md-sys-color-surface-saturated);
    --bs-table-hover-color: var(--md-sys-color-on-surface);
    --bs-table-hover-bg: var(--md-sys-color-surface-saturated);
    width: 100%;
    margin-bottom: 1rem;
    color: var(--md-sys-color-on-surface);
    vertical-align: top;
    border-color: transparent !important;
}
.ls-even {
    background-color: var(--md-sys-color-surface-low);
    color: var(--md-sys-color-on-surface);
}

.ls-answers .ls-heading th, .ls-answers th {
    color: var(--md-sys-color-on-surface);
}

.table-hover > tbody > tr:hover > th {
    color: var(--md-sys-color-on-surface);
    background-color: transparent;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .ls-answers > tbody > tr.ls-even:hover {
        background: transparent !important;
    }
}


.border-top {
    border-top: 0px solid var(--md-sys-color-outline) !important;
}
.border-bottom {
    border-bottom: 0px solid var(--md-sys-color-outline) !important;
}

.navbar {
    background-color: var(--md-sys-color-surface) !important;
}

.top-container .progress {
    height: var(--md-sys-margin);
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .top-container {
        margin-bottom: 0;
    }

    .space-col {
        margin-top: 0.5em;
        margin-bottom: 2em;
    }
}
.progress {
    background-color: var(--md-sys-color-surface-variant);
}

.progress-bar {
    background-color: var(--md-sys-color-primary);
    border-right: var(--md-sys-margin-small) solid var(--md-sys-color-surface);
}

.btn-check + .btn {
    color: var(--md-sys-color-surface);
    background-color: var(--md-sys-color-inverse-surface);
}

.btn-check + .btn-primary:hover {
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary);
    box-shadow: none;
}

.form-select {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-variant);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    border-color: var(--md-sys-color-outline);
    border-radius: var(--md-sys-margin);
    font-size: var(--md-sys-typescale-body-large-font-size);
    line-height: 2em;
}

@media (prefers-color-scheme: dark) {
    .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d8dcd4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
}

.question-container .ls-question-message {
    color: var(--md-sys-color-on-surface-variant);
}

.completed-wrapper .completed-heading {
    color: var(--md-sys-color-on-surface);
}

/* Ranking */

.list-group-item {
    background-color: var(--md-sys-color-surface-variant);
    border: 2px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface);
}

.select-sortable-lists:not(.ranking-advanced-style) .ranking-available-items .sortable-item {
    color: var(--md-sys-color-on-surface);
}

.select-sortable-lists:not(.ranking-advanced-style) .list-group-item {
    border: 2px solid var(--md-sys-color-outline);
}

.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items {
    background-color: var(--md-sys-color-surface);
    border: 2px solid var(--md-sys-color-outline);
}

.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item {
    border: 2px solid var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}

.select-sortable-lists:not(.ranking-advanced-style) .selector__dragHandle.d-none {
    color: var(--md-sys-color-on-surface-variant);
}

.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item .selector__dragHandle {
    color: var(--md-sys-color-primary);
}

#surveyListFooter {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    display: none !important;
}

#surveys-list-jumbotron {
    display: none !important;
}

.public-stats .statsSurveyTitle {
    color: var(--md-sys-color-on-surface);
}

.public-stats .statsNumRecords {
    color: var(--md-sys-color-on-surface);
}
.public-stats__content {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
.quotamessage {
    color: var(--md-sys-color-on-surface);
}





.dropdown-menu {
    background-color: var(--md-sys-color-surface-variant) !important;
}

.dropdown-header, .dropdown-item {
    color: var(--md-sys-color-on-surface) !important;
}


#survey-nav {
    padding-bottom: 0;
    padding-top: 0.5rem;
}
#survey-nav .dropdown-menu > li > a {
    color: var(--md-sys-color-on-surface) !important;
}
.dropdown-menu > li > a:hover {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}
.dropdown-item {
    color: var(--md-sys-color-on-surface) !important;
}

.bootstrap-select .dropdown-menu li {
    margin: var(--md-sys-margin-small) 0px;
}

.dropdown-menu > .active > a {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

*[class*=btn-outline-]:focus, *[class*=btn-outline-]:active, *[class*=btn-outline-].active, *[class*=btn-outline-].dropdown-toggle.show, *[class*=btn-outline-].dropdown-toggle.show:focus, *[class*=btn-outline-].show {
    background-color: var(--md-sys-color-surface-variant) !important;
    color: var(--md-sys-color-on-surface) !important;
}

.dropdown-toggle {
    line-height: 2em;
}

.dropdown.bootstrap-select {
    background: transparent !important;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-variant) !important;
    border: 2px solid var(--md-sys-color-outline) !important;
}

.question-container .help-block {
    color: var(--md-sys-color-on-surface);
}
/*
.slider-list .slider .slider-handle {
    background-color: var(--md-sys-color-primary);
}

.slider-track {
    background-color: var(--md-sys-color-outline);
    height: 4px;
    margin-top: -2px;
}

.slider-list .slider.slider-untouched .slider-handle {
    background-color: var(--md-sys-color-outline);
    box-shadow: unset !important;
}

.slider-list .slider .slider-selection {
    background-color: var(--md-sys-color-primary);
}

.modal-content {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-margin);
}

.slider-list .slider .tooltip .tooltip-inner {
    color: var(--md-sys-color-primary);
}
*/




/* Font sizes */
.question-container .ls-label-question {
    font-size: 1.25rem; /* 24 default */
}

.ls-answers label, .answer-item label, .control-label {
    font-size: 1.1rem;
    line-height: 1.5em;
}

.checkbox-item.mb-1 {
    margin-bottom: 0.5rem !important;
}

.question-container .question-valid-container {
    margin-top: 0.4rem;
    margin-bottom: 1.4rem;
}




.asterisk.ri-asterisk {
    display: inline;
    float: left;
    margin-top: 0.25em;
}


.modal-content {
    background: var(--md-sys-color-surface) !important;
}

.modal-header .btn-close {
    color: var(--md-sys-color-on-surface) !important;
}



#navigator-container:not(:has(#ls-button-previous)) {
    flex-direction: row-reverse;
    
}
#navigator-container:not(:has(#ls-button-previous)) .text-end {
    text-align: left !important;
}





/* ===========================================================
 * M3 EXPRESSIVE SLIDER  (XS size)
 * maps directly to the spec tokens you pasted
 * ========================================================= */

/* ----- local tokens (dp ≈ px on web) ---------------------- */

:root {
  /* track */
  --ls-slider-track-height: 16px; /* Slider active/inactive track height */
  --ls-slider-track-radius: 16px; /* md.sys.shape.corner.full */

  --ls-slider-track-touched-active-color: var(--md-sys-color-primary);
  --ls-slider-track-touched-inactive-color: var(--md-sys-color-secondary-container);
  --ls-slider-track-active-color: var(--md-sys-color-secondary-container);
  --ls-slider-track-inactive-color: var(--md-sys-color-surface-half);

  /* handle */
  --ls-slider-handle-height: 44px; /* Slider handle height / active handle height */
  --ls-slider-handle-width: 4px;   /* Slider handle width */
  --ls-slider-handle-radius: 16px;

  --ls-slider-handle-color: var(--md-sys-color-primary); /* active, hover, focus, pressed */
  --ls-slider-handle-shadow-color: var(--md-sys-color-shadow);

  /* state layer around handle (hover / focus / pressed) */
  --ls-slider-state-layer-size: 40px; /* Slider state layer size */
  --ls-slider-state-layer-color: var(--md-sys-color-primary);
  --ls-slider-state-layer-hover-opacity: 0.08;
  --ls-slider-state-layer-focus-opacity: 0.10;
  --ls-slider-state-layer-pressed-opacity: 0.12;

  /* value indicator (tooltip bubble) */
  --ls-slider-value-indicator-height: 44px; /* Slider label container height */
  --ls-slider-value-indicator-bg: var(--md-sys-color-inverse-surface);
  --ls-slider-value-indicator-fg: var(--md-sys-color-inverse-on-surface);

  /* stops (for discrete sliders / tick marks) */
  --ls-slider-stop-size: 4px; /* Slider stop indicator size */
  --ls-slider-stop-radius: 16px;
  --ls-slider-stop-color: var(--md-sys-color-on-secondary-container);
  --ls-slider-stop-color-selected: var(--md-sys-color-on-primary);
}

/* ===========================================================
 * BASE LAYOUT
 * ========================================================= */

/* give the control vertical room for 44dp handle + state layer */
.slider-list .ls-slider-item-horizontal .slider.slider-horizontal {
  height: 56px;
}

/* rail container */
.slider-list .ls-slider-item-horizontal .slider.slider-horizontal .slider-track {
  top: 50% !important;
  height: var(--ls-slider-track-height) !important;
  margin-top: calc(var(--ls-slider-track-height) / -2) !important;
  border-radius: var(--ls-slider-track-radius);
  background: transparent !important;
  box-shadow: none !important; /* spec: level0 */
}

/* inactive portions of the rail */
.slider-list .ls-slider-item-horizontal .slider.slider-horizontal .slider-track-low,
.slider-list .ls-slider-item-horizontal .slider.slider-horizontal .slider-track-high {
  background-color: var(--ls-slider-track-inactive-color) !important;
  border-radius: inherit;
}

.slider-list .ls-slider-item-horizontal .slider.slider-horizontal.slider-touched .slider-track-low,
.slider-list .ls-slider-item-horizontal .slider.slider-horizontal.slider-touched .slider-track-high {
  background-color: var(--ls-slider-track-touched-inactive-color) !important;
}

/* active portion (standard & range) */
.slider-list .ls-slider-item-horizontal .slider.slider-horizontal .slider-selection {
  background-color: var(--ls-slider-track-active-color) !important;
  border-radius: inherit;
  margin-left: calc(-2 * var(--ls-slider-handle-width));
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.slider-list .ls-slider-item-horizontal .slider.slider-horizontal.slider-touched .slider-selection {
  background-color: var(--ls-slider-track-touched-active-color) !important;
}

.slider-list .ls-slider-item-horizontal .slider.slider-horizontal .slider-track-high {
    margin-right: calc(-2 * var(--ls-slider-handle-width));
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* ===========================================================
 * HANDLE – 4×44dp expressive bar
 * ========================================================= */



.slider-list .ls-slider-item-horizontal .slider .slider-handle {
  position: absolute;
  box-sizing: border-box;
  width: var(--ls-slider-handle-width) !important;
  height: var(--ls-slider-handle-height) !important;
  margin-left: calc(var(--ls-slider-handle-width) / -2) !important;
  margin-top: calc(var(--ls-slider-handle-height) / -2) !important;
  border-radius: var(--ls-slider-handle-radius) !important;

  background-color: var(--ls-slider-track-active-color) !important;
  border: none !important;

  /* md.sys.elevation.level1-ish */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(0, 0, 0, 0.10);

  /* needed for state layer pseudo */
  overflow: visible;
  top: 50%;
}

.slider-list .ls-slider-item-horizontal .slider.slider-touched .slider-handle {
    background-color: var(--ls-slider-handle-color) !important;
}

/* state layer bubble (hover/focus/pressed) */
.slider-list .ls-slider-item-horizontal .slider .slider-handle::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: var(--ls-slider-state-layer-size);
  height: var(--ls-slider-state-layer-size);
  margin-left: calc(var(--ls-slider-state-layer-size) / -2);
  margin-top: calc(var(--ls-slider-state-layer-size) / -2);
  border-radius: 9999px;
  background-color: var(--ls-slider-state-layer-color);
  opacity: 0;
  pointer-events: none;
  top: 50%;
}

/* hover */
.slider-list .ls-slider-item-horizontal .slider .slider-handle:hover::before {
  opacity: var(--ls-slider-state-layer-hover-opacity);
}

/* focus */
.slider-list .ls-slider-item-horizontal .slider .slider-handle:focus {
  outline: none;
}
.slider-list .ls-slider-item-horizontal .slider .slider-handle:focus::before {
  opacity: var(--ls-slider-state-layer-focus-opacity);
}

/* pressed */
.slider-list .ls-slider-item-horizontal .slider .slider-handle:active::before {
  opacity: var(--ls-slider-state-layer-pressed-opacity);
}

/* ===========================================================
 * DISABLED STATE
 * ========================================================= */

.slider-list .slider.slider-disabled .slider-track-low,
.slider-list .slider.slider-disabled .slider-track-high,
.slider-list .slider.slider-disabled .slider-selection {
  background-color: var(--md-sys-color-on-surface);
  opacity: 0.12;
}

.slider-list .slider.slider-disabled .slider-handle {
  background-color: var(--md-sys-color-on-surface) !important;
  opacity: 0.38;
  box-shadow: none !important;
}

/* ===========================================================
 * VALUE INDICATOR  (uses LimeSurvey's tooltip-main)
 * ========================================================= */

.slider-list .slider .tooltip-main {
  /* keep horizontal position from inline style, just lift it */
  transform: translateX(-50%);
  margin-top: calc(-1 * (var(--ls-slider-value-indicator-height) + 12px));
}

.slider-list .slider .tooltip-main .tooltip-arrow {
  display: none; /* spec: label has no arrow */
}

.slider-list .slider .tooltip-main .tooltip-inner {
    height: var(--ls-slider-value-indicator-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-label-medium-font-family-name, inherit);
    font-size: var(--md-sys-typescale-label-medium-font-size, 0.75rem);
    line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
    font-weight: var(--md-sys-typescale-label-medium-font-weight, 500);
    text-align: center;
    width: 100%;
    left: 0;
    font-size: 18px;
    bottom: calc(2 * var(--ls-slider-handle-width));
}

/* optional: hide empty min/max tooltips */
.slider-list .slider .tooltip-min .tooltip-inner,
.slider-list .slider .tooltip-max .tooltip-inner {
  display: none;
}

/* ===========================================================
 * DISCRETE STOPS (if enabled in LS as ticks)
 * ========================================================= */

.slider-list .slider.slider-horizontal .slider-tick {
  width: var(--ls-slider-stop-size) !important;
  height: var(--ls-slider-stop-size) !important;
  margin-left: calc(var(--ls-slider-stop-size) / -2) !important;
  top: 50%;
  margin-top: calc(var(--ls-slider-stop-size) / -2);
  border-radius: var(--ls-slider-stop-radius);
  background-color: var(--ls-slider-stop-color);
  border: none;
}

/* selected stop (when tick is within active range) */
.slider-list .slider.slider-horizontal .slider-tick.in-selection {
  background-color: var(--ls-slider-stop-color-selected);
}

/* remove any triangle styles from default theme */
.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
  border: none !important;
}

.slider-min-block, .slider-max-block {
    align-content: center;
}