:root {
    --md-sys-color-primary: hsl(217, 80%, 58%);
    --md-sys-color-primary-hover: hsl(217, 80%, 48%);
    --md-sys-color-primary-active: hsl(217, 80%, 40%);
    --md-sys-color-on-primary: rgb(255 255 255);
    /* --md-sys-color-primary-container: hsl(217, 63%, 87%); */
    --md-sys-color-primary-container: #e9ecef;

    --md-sys-color-secondary: hsl(141, 58%, 47%);
    --md-sys-color-secondary-hover: hsl(141, 58%, 37%);
    --md-sys-color-secondary-active: hsl(141, 58%, 30%);
    --md-sys-color-on-secondary: rgb(255 255 255);
    /* --md-sys-color-secondary-container: hsl(205, 100%, 93%); */
    --md-sys-color-secondary-container: #e9ecef;

    --md-sys-color-tertiary: hsl(198, 74%, 47%);
    --md-sys-color-tertiary-hover: hsl(198, 74%, 37%);
    --md-sys-color-tertiary-active: hsl(198, 74%, 32%);
    --md-sys-color-on-tertiary: rgb(255 255 255);
    --md-sys-color-tertiary-container: hsl(56, 91%, 85%);
    --md-sys-color-on-tertiary-container: hsl(56, 40%, 20%);

    --md-sys-color-error: #dc3838;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #721c24;
    --md-sys-color-error-outline: #f1b0b7;


    --md-sys-color-surface: hsl(200, 40%, 98%);
    --md-sys-color-on-surface: hsl(203, 15%, 11%);
    --md-sys-color-on-surface-variant: hsl(0, 0%, 36%);
    --md-sys-color-on-surface-variant-hover: hsl(207, 5%, 36%);
    --md-sys-color-on-surface-disabled: hsl(207, 5%, 46%);
    --md-sys-color-outline: hsl(215, 5%, 40%);
    --md-sys-color-outline-variant: hsl(215, 5%, 80%);
    --md-sys-color-surface-bright: rgb(255, 255, 255);
    /* --md-sys-color-surface-container: hsl(203, 30%, 90%);
    --md-sys-color-surface-container-high: hsl(203, 29%, 91%);
    --md-sys-color-surface-container-highest: hsl(203, 29%, 85%); */
    --md-sys-color-surface-container: #e9ecef;
    --md-sys-color-surface-container-high: #e4e4e4;
    --md-sys-color-surface-container-highest: #cfcfcf;

    --md-sys-color-ok-light: hsl(134, 60%, 55%);
    --md-sys-color-ok: hsl(134, 60%, 38%);
    --md-sys-color-ok-variant: hsl(120, 60%, 33%);
    --md-sys-color-on-ok: #ffffff;

    --md-sys-color-warning: #e9af03;
    --md-sys-color-on-warning: #362602;
    --md-sys-color-warning-container: #fff3cd;
    --md-sys-color-on-warning-container: #705004;
    --md-sys-color-warning-outline: #ffcf3d;

    --md-sys-color-historique: #FFC885;
    --md-sys-color-on-historique: #AD5211;


    /* Override public\libs\bootstrap-datepicker\bootstrap-datepicker.css */
    --litepicker-day-color-hover: var(--md-sys-color-primary);
    --litepicker-is-start-color-bg: var(--md-sys-color-primary);
    --litepicker-button-prev-month-color-hover: var(--md-sys-color-primary);
    --litepicker-button-next-month-color-hover: var(--md-sys-color-primary);
    --litepicker-selected-day: var(--md-sys-color-primary-container);
}