:root{
    /* BASE COLORS
    _____________________________________________________________
    */
    --brand-primary: #003594;
    --brand-secondary: #6AB8D4;

    /* Accent */

    --accent-BP1: #ADCAFF;
    --accent-BP2: #85AFFF;
    --accent-BP3: #337AFF;
    --accent-BP4: #004FE0;
    --accent-BP5: #00153B;
    --accent-BP6: #000E29;

    --accent-BS1: #DDF1F8;
    --accent-BS2: #B0D9E8;
    --accent-BS3: #235C80;
    --accent-BS4: #184C60;
    --accent-BS5: #12333F;
    --accent-BS6: #091A20;
    /* Neutral */

    --white: #FFFFFF;
    --verylight-grey: hsl(212, 10%, 98%);
    --light-grey-1: #F4F5F6;
    --light-grey-2: #E9EBEC;
    --light-grey-3: #D4D8DA;
    --light-grey-4: #C8CDD0;
    --light-grey-5: #BEC3C6;
    --light-grey-6: #A8AFB3;
    --middle-rgb-grey: 135, 145, 151;
    --dark-grey-1: #879197;
    --dark-grey-2: #687378;
    --dark-grey-3: #555E62;
    --dark-grey-4: #393F41;
    --dark-grey-5: #1C1F21;
    --dark-grey-6: #121416;
    --black: #090A0B;

    /* Sentiment */

    --inform-blue-light-1: #EBF2FF;
    --inform-blue-light-2: #ADCAFF;
    --inform-blue: #1F6DFF;
    --inform-blue-dark-1: #004FE0;
    --inform-blue-dark-2: #00153B;

    --success-green-light-1: #D6FFE9;
    --success-green-light-2: #85FFBE;
    --success-green: #00C65E;
    --success-green-dark-1: #006630;
    --success-green-dark-2: #002913;

    --warning-orange-light-1: #FFEBD6;
    --warning-orange-light-2: #FFCE99;
    --warning-orange: #FF9628;
    --warning-orange-dark-1: #A35400;
    --warning-orange-dark-2: #291500;
    --warning-yellow: #E4CF0F;

    --error-red-light-1: #FCEAEA;
    --error-red-light-2: #F19393;
    --error-red: #E42C2C;
    --error-red-dark-1: #A21515;
    --error-red-dark-2: #360707;

    --elevation-1: 0 0 16px 0 rgba(0, 0, 0, .10);
    --elevation-2: 0 0 32px 0 rgba(0, 0, 0, .16);
    --elevation-3: 0 0 48px 0 rgba(0, 0, 0, .24);

    /* AI Gradient */

    --ai-gradient-light-0: #ADFFC2;
    --ai-gradient-light-60: #ADF0FF;
    --ai-gradient-light-100: #A2E0F6;
    --ai-gradient-light: linear-gradient(90deg, var(--ai-gradient-light-0) 0%, var(--ai-gradient-light-60) 60%, var(--ai-gradient-light-100) 100%);

    --ai-gradient-dark-0: #1C411B;
    --ai-gradient-dark-60: #00323D;
    --ai-gradient-dark-100: #062A38;
    --ai-gradient-dark: linear-gradient(90deg, var(--ai-gradient-dark-0) 0%, var(--ai-gradient-dark-60) 60%, var(--ai-gradient-dark-100) 100%);

    /* LEVEL 2 
    _____________________________________________________________
    */
    /* layout & typography
    --------------------------------- */
    --body: var(--light-grey-2);
    --paper-background: var(--white);
    --paper-border: var(--light-grey-3);

    --scrollbar: var(--dark-grey-3);
    --scrollbar-hover: var(--brand-primary);

    --base-text-color: var(--dark-grey-6);
    --text-primary-color: var(--dark-grey-6);
    --text-secondary-color: var(--dark-grey-4);
    --text-disabled: var(--dark-grey-1);
    --text-secondary-disabled: var(--dark-grey-3);
    
    --title: var(--black);
    --sub-title: var(--accent-BS5);

    --link-color:var(--accent-BS3);
    --link-hover-color:var(--accent-BS4);

    --login-body: var(--light-grey-1);
    
    /* 
     LABEL seems to be useless: same as default text 
    */
    /* --label-color: var(--text-primary-color);
    --label-disabled-color: var(--text-disabled); */

    --border-one: var(--light-grey-3);



    /* navbar
    --------------------------------- */
    --nav-bg: var(--accent-BP5);
    --nav-color: var(--accent-BS1);
    --nav-parent-opened-bg: rgba(0,0,0,.18);
    --nav-parent-active-opened-bg: #0B2D4B;

    --nav-link-hover-bg: #103953;
    --nav-link-hover-border: transparent;
    --nav-link-hover-color: var(--white);

    --nav-link-active-bg: var(--accent-BS4);
    --nav-link-active-border: var(--accent-BS3);
    --nav-link-active-color: var(--white);

    --nav-link-focus-border: #6AB8D422;


    /* panel
    --------------------------------- */
    --panel-bg: var(--light-grey-1);
    --panel-border: var(--paper-border);
    --panelMenuItem-color: var(--text-primary-color);
    --panelMenuItem-hover-bg: var(--light-grey-3);
    --panelMenuItem-hover-color: var(--text-primary-color);
    --panelMenuItem-selected-bg: var(--accent-BS2);
    --panelMenuItem-selected-border: var(--brand-secondary);



    /* buttons
    --------------------------------- */
    --btn-primary-bg: var(--brand-primary);
    --btn-primary-border: var(--brand-primary);
    --btn-primary-color: var(--white);
    --btn-primary-hover-bg: var(--accent-BP5);
    --btn-primary-hover-border: var(--accent-BP5);
    --btn-primary-hover-color: var(--white);
    --btn-primary-focus-border: var(--accent-BP5);
    --btn-primary-disable-bg: var(--light-grey-2);
    --btn-primary-disable-border: var(--light-grey-4);
    --btn-primary-disable-color: var(--text-disabled);

    --btn-secondary-bg: var(--paper-background);
    --btn-secondary-border: var(--accent-BS3);
    --btn-secondary-color: var(--brand-primary);
    --btn-secondary-hover-bg: var(--light-grey-1);
    --btn-secondary-hover-border: var(--accent-BS3);
    --btn-secondary-hover-color: var(--accent-BS4);
    --btn-secondary-focus-border: var(--brand-primary);
    --btn-secondary-disable-bg: var(--light-grey-1);
    --btn-secondary-disable-border: var(--light-grey-4);
    --btn-secondary-disable-color: var(--text-disabled);

    --btn-text-bg: transparent;
    --btn-text-border: transparent;
    --btn-text-color: var(--accent-BS3);
    --btn-text-hover-bg: var(--light-grey-2);
    --btn-text-hover-border: transparent;
    --btn-text-hover-color: var(--accent-BS4);
    --btn-text-disable-bg: transparent;
    --btn-text-disable-border: transparent;
    --btn-text-disable-color: var(--text-disabled);

    --btn-ai-bg: var(--ai-gradient-light);
    --btn-ai-color: var(--dark-grey-4);
    --btn-ai-border: rgba(14, 19, 27, 0.08);
    --btn-ai-hover-color: var(--black);
    --btn-ai-hover-border: var(--black);

    /* fieldsets
    --------------------------------- */
    --fieldset-bg: var(--verylight-grey);
    --fieldset-border: var(--light-grey-2);

    /* inputs
    --------------------------------- */
    --input-bg: var(--light-grey-1);
    --input-border: var(--light-grey-4);
    --input-color: var(--text-primary-color);
    --input--placeholder-color: var(--dark-grey-2);
    --input-hover-bg: var(--light-grey-1);
    --input-hover-border: var(--dark-grey-4);
    /* --input-hover-color: var(--text-primary-color); */
    /* --input-focus-bg: var(--light-grey-1);; */
    --input-focus-border: var(--accent-BS4);
    /* --input-focus-color: ; */
    /* --input-disable-bg: ; */
    /* --input-disable-border: ; */
    --input-disable-color: var(--text-disabled);
    --input-disable-border: var(--light-grey-4);
    --input-disable-bg: var(--light-grey-2);
    /* --input-error-bg: ; */
    --input-error-border: var(--error-red);
    --input-error-color: var(--error-red-dark-1);


    /* checkbox & radio
    --------------------------------- */
    --checkbox-bg: transparent;
    --checkbox-unselected-color: var(--dark-grey-4);
    --checkbox-selected-color: var(--accent-BS3);
    --checkbox-hover-shadow: rgba(var(--middle-rgb-grey), .1);
    --checkbox-focus-shadow: rgba(var(--middle-rgb-grey), .18);
    --checkbox-disabled: var(--dark-grey-2);

    --radio-bg: var(--checkbox-bg);
    --radio-unselected-color: var(--checkbox-unselected-color);
    --radio-selected-color: var(--checkbox-selected-color);
    --radio-hover-shadow: var(--checkbox-hover-shadow);
    --radio-focus-shadow: var(--checkbox-focus-shadow);
    --radio-disabled: var(--checkbox-disabled);


    /* select & dropdowns
    --------------------------------- */
    --dropdownMenu-bg: var(--white);
    --dropdownMenu-border: var(--light-grey-4);
    --dropdownMenu-color: var(--text-primary-color);
    --dropdownMenu-item-hover-bg: var(--input-bg);


    /* switch
    --------------------------------- */
    --switch-color: var(--dark-grey-5);
    --switch-selected-color: var(--accent-BS6);
    --switch-selected-bg: var(--accent-BS2);
    --switchCheck-color: var(--light-grey-6);
    --switchCheck-selected-color: var(--accent-BS3);
    --switch-selected-border: var(--btn-secondary-border);


    /* draggable areas and items 
    --------------------------------- */
    --dragZone-border: var(--input-border);
    --dragZone-bg: var(--input-bg);
    --dragBtn-border: var(--light-grey-2);
    --dragBtn-hover-border: transparent;
    --dragBtn-hover-bg: var(--paper-background);

    /* lists 
    --------------------------------- */
    --list-line-border: var(--light-grey-2);
    --list-alt-bg: var(--verylight-grey);
    --list-hover-line-border: var(--light-grey-6);
    --list-hover-bg: var(--light-grey-1);

    --checkRecap-bg: var(--inform-blue-light-1);
    --checkRecap-color: var(--text-primary-color);
    --checkRecap-btn-color: var(--btn-secondary-color);
    --checkRecap-btn-hover-color: var(--btn-secondary-hover-color);
    --checkRecap-btn-hover-bg: rgba(0,0,0,.05);
    --folder-mark-color: var(--dark-grey-1);


    /* pagination 
    --------------------------------- */
    --pagination_current-color: var(--white);
    --pagination_current-bg: var(--accent-BS3);

     /* alerts
    --------------------------------- */
    --alert-btn-color: var(--brand-primary);
    --alert-info-btn-bg: transparent;
    --alert-info-btn-hover-bg: rgba(0, 0, 0, .08);
    /* Info */
    --alert-info-bg: var(--inform-blue-light-1);
    --alert-info-border: var(--inform-blue);
    --alert-info-color: var(--inform-blue-dark-2);
    --alert-info-icon-color: var(--inform-blue-dark-1);
    /* Success */
    --alert-success-bg: var(--success-green-light-1);
    --alert-success-border: var(--success-green);
    --alert-success-color: var(--success-green-dark-2);
    --alert-success-icon-color: var(--success-green-dark-1);
    /* Warning */
    --alert-warning-bg: var(--warning-orange-light-1);
    --alert-warning-border: var(--warning-orange);
    --alert-warning-color: var(--warning-orange-dark-2);
    --alert-warning-icon-color: var(--warning-orange-dark-1);
    /* Error */
    --alert-error-bg: var(--error-red-light-1);
    --alert-error-border: var(--error-red);
    --alert-error-color: var(--error-red-dark-2);
    --alert-error-icon-color: var(--error-red-dark-1);


    /* infos
    --------------------------------- */
    --text-info-color: var(--inform-blue-dark-1);
    --text-success-color: var(--success-green-dark-1);
    --text-warning-color: var(--warning-orange-dark-1);
    --text-error-color: var(--error-red-dark-1);

    --info-input-blend:multiply;

    /* tables
    --------------------------------- */
    --table-border: var(--black);


    /* badges (chips)
    --------------------------------- */
    --chip-bg: var(--accent-BS1);
    --chip-color : var(--text-primary-color);

    --chip-primary-bg: var(--accent-BS3);
    --chip-primary-color : var(--white);

    --chip-warning-bg: var(--warning-orange);
    --chip-warning-color: var(--text-primary-color);

    --chip-error-bg: var(--error-red);
    --chip-error-color : var(--white);


    /* popups
    --------------------------------- */
    --modal-overlay: rgba(0,0,0,.3);
    --popup-bg: var(--paper-background);
    --popup-border: var(--light-grey-3);
    --popup-closeBtn-color: var(--dark-grey-3);
    --popup-closeBtn-hover-color: var(--brand-primary);


    /* dataTables
    --------------------------------- */
    --dataTable-odd-bg: var(--light-grey-1);
    --dataTable-even-bg: var(--paper-background);


    /* code
    --------------------------------- */
    --code-bg: var(--dark-grey-3);
    --code-color: var(--white);
    --code-border: var(--dark-grey-4);


    /* lightbox preview
    --------------------------------- */
    --lightbox-bg: var(--light-grey-1);
    
    /* loader
    --------------------------------- */
    --loader-color: var(--inform-blue-dark-2);    
    
    --progress-bg: var(--accent-BS2);
    --progress-value: var(--accent-BS3);
}
/* Dark mode
________________________________________________________________ */
@media (prefers-color-scheme: dark) {
:root {

    --elevation-1: 0 0 16px 0 rgba(0, 0, 0, .8);
    --elevation-2: 0 0 32px 4px #000;
    --elevation-3: 0 0 48px 8px #000;

    /* layout & typography
    --------------------------------- */
    --body: var(--black);
    --paper-background: var(--dark-grey-6);
    --paper-border: var(--dark-grey-6);

    --scrollbar: var(--dark-grey-3);
    --scrollbar-hover: var(--dark-grey-2);

    --base-text-color: var(--light-grey-1);
    --text-primary-color: var(--light-grey-1);
    --text-secondary-color: var(--light-grey-4);
    --text-disabled: var(--dark-grey-1);
    --text-secondary-disabled: var(--dark-grey-2);
    
    --title: var(--white);
    --sub-title: var(--accent-BS2);

    --link-color:var(--accent-BS2);
    --link-hover-color:var(--accent-BS1);

    --login-body: var(--black);
    
    /* 
     LABEL seems to be useless: same as default text 
    */
    /* --label-color: var(--text-primary-color);
    --label-disabled-color: var(--text-disabled); */

    --border-one: var(--light-grey-5);



    /* navbar
    --------------------------------- */
    --nav-bg: var(--accent-BP5);
    --nav-color: var(--accent-BS1);
    --nav-parent-opened-bg: rgba(0,0,0,.18);
    --nav-parent-active-opened-bg: #0B2D4B;

    --nav-link-hover-bg: #103953;
    --nav-link-hover-border: transparent;
    --nav-link-hover-color: var(--white);

    --nav-link-active-bg: var(--accent-BS4);
    --nav-link-active-border: var(--accent-BS3);
    --nav-link-active-color: var(--white);

    --nav-link-focus-border: #6AB8D422;


    /* panel
    --------------------------------- */
    --panel-bg: var(--dark-grey-5);
    --panel-border: var(--paper-border);
    --panelMenuItem-color: var(--accent-BP2);
    --panelMenuItem-hover-bg: var(--dark-grey-5);
    --panelMenuItem-hover-color: var(--accent-BP3);
    --panelMenuItem-selected-bg: var(--accent-BP5);
    --panelMenuItem-selected-border: var(--brand-secondary);



    /* buttons
    --------------------------------- */
    --btn-primary-bg: var(--accent-BP2);
    --btn-primary-border: transparent;
    --btn-primary-color: var(--black);
    --btn-primary-hover-bg: var(--accent-BP3);
    --btn-primary-hover-border: transparent;
    --btn-primary-hover-color: var(--black);
    --btn-primary-focus-border: var(--accent-BP5);
    --btn-primary-disable-bg: var(--dark-grey-5);
    --btn-primary-disable-border: var(--dark-grey-3);
    --btn-primary-disable-color: var(--text-disabled);

    --btn-secondary-bg: var(--dark-grey-5);
    --btn-secondary-border: var(--accent-BS2);
    --btn-secondary-color: var(--accent-BP2);
    --btn-secondary-hover-bg: var(--dark-grey-6);
    --btn-secondary-hover-border: var(--accent-BS2);
    --btn-secondary-hover-color: var(--brand-secondary);
    --btn-secondary-focus-border: var(--accent-BS2);
    --btn-secondary-disable-bg: var(--dark-grey-5);
    --btn-secondary-disable-border: var(--dark-grey-3);
    --btn-secondary-disable-color: var(--text-disabled);

    --btn-text-bg: transparent;
    --btn-text-border: transparent;
    --btn-text-color: var(--accent-BS2);
    --btn-text-hover-bg: var(--dark-grey-5);
    --btn-text-hover-border: transparent;
    --btn-text-hover-color: var(--brand-secondary);
    --btn-text-disable-bg: transparent;
    --btn-text-disable-border: transparent;
    --btn-text-disable-color: var(--text-disabled);

    --btn-ai-bg: var(--ai-gradient-dark);
    --btn-ai-color: var(--light-grey-4);
    --btn-ai-border: rgba(242, 244, 248, 0.08);
    --btn-ai-hover-color: var(--light-grey-3);
    --btn-ai-hover-border: var(--light-grey-4);

    /* fieldsets
    --------------------------------- */
    --fieldset-bg: var(--dark-grey-5);
    --fieldset-border: var(--dark-grey-4);

    /* inputs
    --------------------------------- */
    --input-bg: var(--dark-grey-5);
    --input-border: var(--dark-grey-4);
    --input-color: var(--light-grey-1);
    --input--placeholder-color: var(--light-grey-4);
    --input-hover-bg: var(--dark-grey-5);
    --input-hover-border: var(--light-grey-4);
    /* --input-hover-color: var(--text-primary-color); */
    /* --input-focus-bg: var(--light-grey-1);; */
    --input-focus-border: var(--accent-BS2);
    /* --input-focus-color: ; */
    /* --input-disable-bg: ; */
    /* --input-disable-border: ; */
    --input-disable-color: var(--text-disabled);
    --input-disable-border: var(--dark-grey-5);
    --input-disable-bg: var(--dark-grey-5);
    /* --input-error-bg: ; */
    --input-error-border: var(--error-red-light-2);
    --input-error-color: var(--error-red-light-2);


    /* checkbox & radio
    --------------------------------- */
    --checkbox-bg: transparent;
    --checkbox-unselected-color: var(--light-grey-4);
    --checkbox-selected-color: var(--accent-BS2);
    /* --checkbox-hover-shadow: var(--dark-grey-2);
    --checkbox-focus-shadow: var(--dark-grey-2); */
    --checkbox-hover-shadow: rgba(var(--middle-rgb-grey), .3);
    --checkbox-focus-shadow: rgba(var(--middle-rgb-grey), .5);
    --checkbox-disabled: var(--dark-grey-2);

    --radio-bg: var(--checkbox-bg);
    --radio-unselected-color: var(--checkbox-unselected-color);
    --radio-selected-color: var(--checkbox-selected-color);
    --radio-hover-shadow: var(--checkbox-hover-shadow);
    --radio-focus-shadow: var(--checkbox-focus-shadow);
    --radio-disabled: var(--checkbox-disabled);


    /* select & dropdowns
    --------------------------------- */
    --dropdownMenu-bg: var(--dark-grey-5);
    --dropdownMenu-border: var(--dark-grey-3);
    --dropdownMenu-color: var(--light-grey-1);
    --dropdownMenu-item-hover-bg: var(--dark-grey-4);


    /* switch
    --------------------------------- */
    --switch-color: var(--accent-BP2);
    --switch-selected-color: var(--accent-BP2);
    --switch-selected-bg: var(--accent-BP5);
    --switch-selected-border: var(--brand-secondary);
    --switchCheck-color: var(--light-grey-6);
    --switchCheck-selected-color: var(--accent-BP3);


    /* draggable areas and items 
    --------------------------------- */
    --dragZone-border: var(--input-border);
    --dragZone-bg: var(--input-bg);
    --dragBtn-border: var(--light-grey-5);
    --dragBtn-hover-border: var(--btn-secondary-hover-border);
    --dragBtn-hover-bg: var(--btn-secondary-hover-bg);

    /* lists 
    --------------------------------- */
    --list-line-border: var(--dark-grey-4);
    --list-alt-bg: var(--dark-grey-5);
    --list-hover-line-border: var(--dark-grey-3);
    --list-hover-bg: var(--dark-grey-4);

    --checkRecap-bg: var(--accent-BP5);
    --checkRecap-color: var(--inform-blue-light-2);
    --checkRecap-btn-color: var(--btn-secondary-color);
    --checkRecap-btn-hover-color: var(--btn-secondary-hover-color);
    --checkRecap-btn-hover-bg: rgba(0,0,0,.35);
    --folder-mark-color: var(--dark-grey-1);


    /* pagination 
    --------------------------------- */
    --pagination_current-color: var(--accent-BS6);
    --pagination_current-bg: var(--accent-BS2);

     /* alerts
    --------------------------------- */
    --alert-btn-color: var(--brand-primary);
    --alert-info-btn-bg: transparent;
    --alert-info-btn-hover-bg: rgba(255, 255, 255, .08);
    /* Info */
    --alert-info-bg: var(--inform-blue-dark-2);
    --alert-info-border: var(--inform-blue);
    --alert-info-color: var(--inform-blue-light-1);
    --alert-info-icon-color: var(--inform-blue-light-2);
    /* Success */
    --alert-success-bg: var(--success-green-dark-2);
    --alert-success-border: var(--success-green);
    --alert-success-color: var(--success-green-light-1);
    --alert-success-icon-color: var(--success-green-light-2);
    /* Warning */
    --alert-warning-bg: var(--warning-orange-dark-2);
    --alert-warning-border: var(--warning-orange);
    --alert-warning-color: var(--warning-orange-light-1);
    --alert-warning-icon-color: var(--warning-orange-light-2);
    /* Error */
    --alert-error-bg: var(--error-red-dark-2);
    --alert-error-border: var(--error-red);
    --alert-error-color: var(--error-red-light-1);
    --alert-error-icon-color: var(--error-red-light-2);


    /* infos
    --------------------------------- */
    --text-info-color: var(--inform-blue-light-1);
    --text-success-color: var(--success-green-light-1);
    --text-warning-color: var(--warning-orange-light-1);
    --text-error-color: var(--error-red-light-1);

    --info-input-blend:screen;


    /* tables
    --------------------------------- */
    --table-border: var(--white);


    /* badges (chips)
    --------------------------------- */
    --chip-bg: var(--btn-secondary-bg);
    --chip-color : var(--btn-secondary-color);

    --chip-primary-bg: var(--accent-BS3);
    --chip-primary-color : var(--white);

    --chip-warning-bg: var(--warning-orange);
    --chip-warning-color: var(--text-primary-color);

    --chip-error-bg: var(--error-red);
    --chip-error-color : var(--white);


    /* popups
    --------------------------------- */
    --modal-overlay: rgba(0,0,0,.7);
    --popup-bg: var(--dark-grey-6);
    --popup-border: var(--dark-grey-3);
    --popup-closeBtn-color: var(--text-secondary-color);
    --popup-closeBtn-hover-color: var(--btn-text-hover-color);


    /* dataTables
    --------------------------------- */
    --dataTable-odd-bg: var(--dark-grey-5);
    --dataTable-even-bg: var(--paper-background);


    /* code
    --------------------------------- */
    --code-bg: var(--accent-BS5);
    --code-color: var(--white);
    --code-border: var(--accent-BS4);


    /* lightbox preview
    --------------------------------- */
    --lightbox-bg: var(--dark-grey-5);
    
   /* loader
    --------------------------------- */
    --loader-color: var(--inform-blue-light-2);
    
    --progress-bg: var(--accent-BS3);
    --progress-value: var(--accent-BS2);
}
}





/* base settings
________________________________________________________________ */
body {
    background: var(--body);
    color: var(--base-text-color);
}
::selection {
    background:var(--accent-BP4);
    color:var(--white);
}

a       { color: var(--link-color); }
a:hover { color:var(--link-hover-color);}

a,
input,
select,
button,
textarea,
.dropdawn>button,
:focus,
:focus-visible {
    outline:0;
}
a:focus,
input:focus,
select:focus,
button:focus,
textarea:focus,
.dropdawn>button:focus,
input.switch-state:focus+label,
:focus-visible {
    border-color:var(--input-focus-border);
}

h1 {
    color:var(--title);
}
h2, h3, legend {
    color:var(--sub-title);
}

samp, code {
    border: 1px solid var(--code-border);
    box-shadow: inset 0 0 15px rgba(0,0,0,.5);
}
samp, code, code span {
    background: var(--code-bg);
    color: var(--code-color);
}

hr, .hr {
    border-color: var(--border-one);
}
small {
    color: var(--text-secondary-color);
}
.ajax_loader_bloc {
    background: radial-gradient(transparent, var(--fieldset-bg));
}

/* Scrollbars
_____________________________________________________________________*/
::-webkit-scrollbar{
    width: var(--content-hrPadding);
    height: var(--content-hrPadding);
}
::-webkit-scrollbar-button{
    height: 0;
    width: 0;
}
::-webkit-scrollbar-thumb{
    background: var(--scrollbar);
    background-clip: content-box;
    border: .33rem solid transparent;
    border-radius:.5rem;
}
::-webkit-scrollbar-thumb:hover{
    background-color: var(--scrollbar-hover);
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
@supports (scrollbar-width:thin) and (not selector(::-webkit-scrollbar)) {
    /* firefox only : hide the bar but keep the space */
    * {
        scrollbar-width: thin;
    }
    .content{
        padding-right: var(--content-hrPadding);
    }
}


/* header
_____________________________________________________________________*/
header {
    color: var(--nav-color);
    background: var(--nav-bg);
}
header::before {
    --height: 84.853px; /* 60√2 */
    content:"";
    position: absolute;
    width: calc(var(--height) / 2);
    height: var(--height);
    top: calc(var(--height) / -2);
    background-repeat: no-repeat;
    background-image: 
        linear-gradient(45deg, #2A5575, #193447),
        linear-gradient(0deg, #214567, #193751);
    background-size: 100% 50.1%; /* 0.1 is added to middle size to avoid glitch */
    background-position: 0 0, 0 100%;
    transform: rotate(45deg);
    transform-origin: 0 50%;
}
#logoSite {
    position: relative; /* used for layouting with header::before element */
}

.headerProgressIndicator:not(.is-errorRemains) {
    box-shadow: 0 3px 1px 0 var(--accent-BP5),
                inset 0 0 2px calc(var(--stroke-width) + 1px) var(--accent-BP5),
                inset 0 -3px 24px calc(var(--stroke-width) + 2px) var(--accent-BS3);
}
.bgTaskIndicator_bg {
    fill: none;
    stroke: var(--accent-BS3);
}
.bgTaskIndicator_track {
    fill: none;
    stroke:  var(--accent-BS2);
}
.errorIcon_shadow {
    fill:rgba(0, 0, 0, .8);
}
.errorIcon_disc {
    fill: var(--error-red);
}


.bgtask__error-opener i:first-child {
    color: var(--alert-error-icon-color);
}

/* navigation ----------------------------*/
nav::-webkit-scrollbar-thumb {
    border-width: 0 0 0 3px;
    border-radius: 0;
    background-color: var(--dark-grey-2);
}
nav::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-secondary);
}
.navlink {
    text-decoration: none;
    background-color: transparent;
    color:currentColor;
}
.parent.open {
    outline: 1px solid var(--nav-link-active-border);
    background-color: var(--nav-parent-opened-bg);
}
.parent > .navlink::after{
    opacity: .5;
}
.parent > .navlink:hover::after {
    opacity: 1;
}

.navlink--active {
    background-color: var(--nav-link-active-bg);
    color: var(--nav-link-active-color);
    border-color: var(--nav-link-active-border);
}
.open > .navlink--active,
.open > .navlink--active + ul {
    background-color: var(--nav-parent-active-opened-bg);
}
.open > .navlink--active {
    border-color:transparent;
}
.navlink:focus {
    border-color: var(--nav-link-focus-border);
}
.navlink:hover{
    color: var(--nav-link-hover-color);
    background: var(--nav-link-hover-bg);
    border-color:var(--nav-link-hover-border);;
    box-shadow: none;
}

.accountList {
    background: var(--nav-bg);
    border-top: 1px solid var(--accent-BS4);
    box-shadow: 0 0px 60px 30px var(--nav-bg);
}


/* container basic style
_____________________________________________________________________*/
section {
    background: var(--paper-background);
    border: 1px solid var(--paper-border);
    color:var(--text-primary-color);
}

.prezProperties {
    color: var(--text-secondary-color);
}

/* pageHeader
--------------------------------- */

.pageHeader {
    background-color: var(--body);
}
.pageHeader[stuck] {
    box-shadow: 0 1px 0 0 var(--light-grey-6),
                0 .5em .5em -.5em rgba(0, 0, 0, .16);
}

/* panel & column-filters
_____________________________________________________________________*/

.panelMenu,
.panelItem {
    background-color: var(--panel-bg);
}

.panelMenu {
    border-left:1px solid var(--panel-border);
}



@media (pointer:fine){
    .panelMenu__item {
        color: var(--panelMenuItem-color);
    }
    .panelMenu__item:not(.panelMenu__item--open):hover {
        background-color: var(--panelMenuItem-hover-bg);
        color: var(--panelMenuItem-hover-color);
    }
    .panelMenu__item--open {
        background: var(--panelMenuItem-selected-bg);
        border-color:var(--panelMenuItem-selected-border);
    }
}





@media (min-width: 769px) and (max-width: 1450px) {
    .panelMenu {
        z-index: 1; /* for box shadow */
    }
    .panelItem {
        border-left:1px solid var(--panel-border);
    }
    .panelItem.open,
    .panelItem:not(.open) ~ .panelMenu {
        box-shadow: -8px 0 12px rgba(0,0,0,.08);
    }
    .panelItem.open ~ .panelMenu {
        box-shadow: none;
    }
}



@media (min-width: 1451px) {
    .panelItem {
        box-shadow:inset 1px 0 0 0 var(--panel-border);
    }
}





/* TODO vars on panels */
@media (max-width:767px) and (pointer:coarse) {
    .panelMenu__item {
        color: var(--nav-color);
    }
    .panelMenu__item--open {
        background: var(--nav-link-active-bg);
        color: var(--nav-link-active-color);
        border-color:var(--nav-link-active-border);
    }
}

/* column-filters
_____________________________________________________________________*/
.filtersHeader__title,
.filters__title,
.filtersTitle__text,
.filtersTitle__expander,
.filtersItem__text,
.filtersItem .icon-range {
    color: var(--sub-title);
}

/*  basic forms
________________________________________________________*/
/* containers----------------------------*/
form fieldset fieldset,
.fieldWrapper{
    background: var(--fieldset-bg);
    border-color: var(--fieldset-border);
}
.fieldWrapper.error {
    border-color: var(--alert-error-border);
}

/* labels & inputs-------------------------*/
label {
    color: var(--text-secondary-color);
}
.disabled,
.disabled label,
.readonly,
.readonly label {
    color:var(--text-disabled);
}



input,
select,
textarea,
.dropdawn,
.input,
.uneditable-input {
    color: var(--input-color);
    background-color: var(--input-bg);
    border:1px solid var(--input-border);
}
input:focus,
select:focus,
textarea:focus,
.dropdawn:focus {
    border-color: var(--input-focus-border);
}
input:hover,
select:hover,
textarea:hover,
.dropdawn:hover {
    border-color: var(--input-hover-border);
    background: var(--input-hover-bg);
}
input::placeholder {
    color:var(--dark-grey-2);
}

[data-error=true],
input.error {
    border-color: var(--input-error-border);
    color: var(--input-error-color);
}

:disabled,
:disabled:hover,
:disabled:focus,
option:disabled,
.dropdawn.disabled,
.dropdawn.disabled:hover {
    opacity: 1;/* overwrite user-agent */
    color:var(--input-disable-color);
    border-color: var(--input-disable-border);
    background-color: var(--input-disable-bg);
}
[readonly]:not(.airdatepicker_Input),
[readonly]:not(.airdatepicker_Input):hover,
[readonly]:not(.airdatepicker_Input):focus {
    color: var(--text-primary-color);
    border-color: transparent;
    background: transparent;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    border:0;
    border-radius:50%;
    background-color: var(--checkbox-bg);
    color:var(--checkbox-unselected-color);
}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate,
input[type="radio"]:checked {
    color: var(--checkbox-selected-color);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    background-color: var(--checkbox-hover-shadow);
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    background-color: var(--checkbox-focus-shadow);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    color: var(--checkbox-disabled);
}
/* TODO */
.field.comparisonField {
    background-color: #fef8eb;
    background-clip: content-box;
}
.field.comparisonField > .input.comparisonBefore,
.field.comparisonField > .comparisonBefore + input + span.fancyCheck:before {
    border: 1px solid #F65655;
}
.field.comparisonField > .input.comparisonAfter,
.field.comparisonField > .comparisonAfter + input + span.fancyCheck:before {
    border: 1px solid #2CA893;
}
.field.comparisonField > span.comparisonBefore,
.field.comparisonField > div.comparisonBefore:before {
    color: #DF2B25;
}
.field.comparisonField > span.comparisonAfter,
.field.comparisonField > div.comparisonAfter:before {
    color: #089574;
}

/*  basic buttons
-------------------------------------*/
/* SECONDARY */
button,
input[type="button"],
input[type="submit"],
[class^="btn"],
[class*=" btn"],
.paginate_button {
    background: var(--btn-secondary-bg);
    color:var(--btn-secondary-color); 
    border:1px solid var(--btn-secondary-border);
}

button:hover,
input[type="submit"]:hover,
[class^="btn"]:hover,
[class*=" btn"]:hover,
.paginate_button:hover,
.buttonFile:hover + .btn-icon,
.buttonFile:hover + .btn {
    background: var(--btn-secondary-hover-bg);
    color:var(--btn-secondary-hover-color);
    border-color: var(--btn-secondary-hover-border);
}
button:focus,
input[type="submit"]:focus,
[class^="btn"]:focus,
[class*=" btn"]:focus,
.paginate_button:focus,
.buttonFile:focus + .btn-icon,
.buttonFile:focus + .btn {
    border-color: var(--btn-secondary-focus-border);
}

button[disabled], button[disabled]:hover,
[type="submit"][disabled], [type="submit"][disabled]:hover,
[class^="btn"].disabled, [class^="btn"].disabled:hover,
[class*=" btn"].disabled, [class*=" btn"].disabled:hover,
.paginate_button.disabled, .paginate_button.disabled :hover{
    background:var(--btn-secondary-disable-bg);
    color: var(--btn-secondary-disable-color);
    border-color: var(--btn-secondary-disable-border);
}



/* PRIMARY */
.btn-primary,
input[type="submit"] {
    background: var(--btn-primary-bg);
    color:var(--btn-primary-color);
    border-color:var(--btn-primary-border);
}
.btn-primary:hover,
input[type="submit"]:hover {
    background:var(--btn-primary-hover-bg);
    color:var(--btn-primary-hover-color);
    border-color:var(--btn-primary-hover-border);
}
.btn-primary:focus,
input[type="submit"]:focus {
    border-color: var(--btn-primary-focus-border);
}
.btn-primary.disabled,
.btn-primary[disabled],
[type="submit"][disabled],
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
[type="submit"][disabled]:hover {
    background: var(--btn-primary-disable-bg);
    color:var(--btn-primary-disable-color);
    border-color:var(--btn-primary-disable-border);
}

/* AI */
.btn-ai {
    color:var(--btn-ai-color);
    border: 1px solid var(--btn-ai-border);
    background: var(--btn-ai-bg);
}
.btn-ai:hover {
    color: var(--btn-ai-hover-color);
    border-color: var(--btn-ai-hover-border);
    background: var(--btn-ai-bg);
}


/* NO-FRAME BUTTONS */
.noframe {
    background: var(--btn-text-bg);
    border-color:var(--btn-text-border);
    color:var(--btn-text-color);
}
.noframe:hover {
    background: var(--btn-text-hover-bg);
    border-color:var(--btn-text-hover-border);
    color:var(--btn-text-hover-color);
}
.noframe[disabled],
.noframe.disabled,
.noframe[disabled]:hover,
.noframe.disabled:hover {
    background: var(--btn-text-disable-bg);
    border-color:var(--btn-text-disable-border);
    color:var(--btn-text-disable-color);
}

/* DATEPICKER */
.datepicker-label {
    background-color: var(--input-bg);
    color:var(--input--placeholder-color);
    border: 1px solid var(--input-border);
}
.datepicker-label:hover {
    border-color: var(--input-hover-border);
}
.datepicker-separator {
    background-color: var(--input-bg);
    color: var(--input-border);
}

/* CHIPS */

.btn-chip :last-child::before {
    color:var(--btn-primary-bg);
}


/* SWITCHES */
button.switch-off,
[class^="btn"].switch-off,
[class*=" btn"].switch-off,
.switch-state + label {
    color:var(--switch-color);
}
button.switch-on,
[class^="btn"].switch-on,
[class*=" btn"].switch-on,
.switch-state:checked + label {
    background-color:var(--switch-selected-bg);
    color:var(--switch-selected-color);
}
label.switch-state::before {
    color:var(--switchCheck-color);
}
input:checked + label.switch-state:before{
    color:var(--switchCheck-selected-color);
    border-color: var(--switch-selected-border);
}



/* select & custom selects ---------------------------*/
option {
    background-color: var(--dropdownMenu-bg);
    color: var(--dropdownMenu-color);
}
.dropdawn-list,
.autocompList,
.menu {
    color:var(--dropdownMenu-color);
    background-color: var(--dropdownMenu-bg);
    border:1px solid var(--dropdownMenu-border);
    box-shadow: var(--elevation-1);
}
.dropdawn-list a,
.autocompList li,
.menu-item{
    color:inherit;
    text-decoration: none;
    background: none;
    border:none;
}
.dropdawn-item.active,
.dropdawn-list .dropdawn-item:hover,
.autocompList li:hover,
.menu-item:hover,
.buttonFile:hover + .menu-item {
    color:inherit;
    background: var(--dropdownMenu-item-hover-bg);
    border:none;
    text-decoration: none;
}

.dropdawn-input,
.dropdawn-input:hover {
    box-shadow: none;
    background: none;
    border: none;
    outline: none;
    color:inherit;
}
.dropdawn-input:focus {
    outline: none;
}

.dropdawn.disabled *, .dropdawn.disabled *:hover {
    color: inherit;
    background-color: inherit;
    border-color: transparent;
}



/* misc -----------------------*/
.loader {
    color: var(--loader-color);
}

.spacer {
    border-left: 1px solid var(--border-one);
}


progress {
    background-color: var(--progress-bg);
}
progress::-webkit-progress-bar {
     background-color: var(--progress-bg);
    }
progress::-webkit-progress-value {
    background-color: var(--progress-value);
}
progress::-moz-progress-bar {
    background-color: var(--progress-value);
}

@keyframes animate-stripes {
    100% { background-position: calc(-100% + var(--progressValueIndeterminateSize) * 2) 0; }
}
progress:not([value]) {
    position: relative;
}
progress:not([value])::before {
    --progressValueIndeterminateSize: 16.5%;
    content:"";
    position: absolute;
    inset:0;
    background-image: linear-gradient(90deg, var(--progress-value) var(--progressValueIndeterminateSize), var(--progress-bg) 10%);
    background-size: 200% 100%;
    animation: animate-stripes .5s linear infinite alternate;
}


/* drag 'n' drop -----------------------*/
.btn-draggable {
    border-color: var(--dragBtn-border);
}
.btn-draggable:hover {
    border-color: var(--dragBtn-hover-border);
    background: var(--dragBtn-hover-bg);
    z-index: 1;
    box-shadow: var(--elevation-1);
}
.dragdrop_area {
    border: 1px solid var(--dragZone-border);
    background-color: var(--dragZone-bg);
}





/*  checkRecap
________________________________________________________*/

.checkRecap {
    background: var(--checkRecap-bg);
    color: var(--checkRecap-color);
}
.checkRecap .noframe {
    color: var(--checkRecap-btn-color);
}
.checkRecap .noframe:hover:not(.disabled) {
    background-color: var(--checkRecap-btn-hover-bg);
    color: var(--checkRecap-btn-hover-color);
} 
.checkRecap .noframe.disabled {
    color: var(--btn-text-disable-color);
}

/*  basic lists
________________________________________________________*/

.list > li {
    border-top: 1px solid var(--list-line-border);
    border-bottom: 1px solid var(--list-line-border);
    margin-bottom:-1px;
    color: var(--text-secondary-color);
}
.list > li:last-child {
    margin-bottom:0;
}
.list-alternate > li:nth-child(odd) {
    background: var(--list-alt-bg);
}
.list > li:hover {
    z-index: 1;
    border-color:var(--list-hover-line-border);
}
.list:not(.noHoverBg) > li:hover {
    background:var(--list-hover-bg);
}

.listItemName .small{
    opacity: .9;
}

.list [class^="folderLvl"]:before,
.list [class*=" folderLvl"]:before{
    color: var(--folder-mark-color);
}


/* list page pagination
_____________________________________________________________________*/
.currentpage {
    color: var(--pagination_current-color);
    background-color: var(--pagination_current-bg);
}


/* DataTables
_____________________________________________________________________*/
body table.dataTable tbody tr.odd {
    background: var(--dataTable-odd-bg);
}
body table.dataTable tbody tr.even {
    background: var(--dataTable-even-bg);
}
body table.dataTable td.sorting_1 {
    color: inherit;
}

.info.warning th, .info.warning td {
    color: var(--alert-warning-color);
    position: relative;
}
.info.warning th {
    border-right: 1px solid var(--text-warning-color);
}
.info.warning td::before {
    content: '';
    border-right: 1px solid var(--text-warning-color);
    opacity: .2;
    position: absolute;
    inset: 0 0 0 0;
}
.info.warning .border-row td {
    border-bottom: 1px solid var(--table-border);
}
.info th:last-child, .info td:last-child::before {
    border-right: none;
}


/* orange background container
 _____________________________________________________________________*/
.mainPlot {
    background: #ff7339;
    background: -moz-linear-gradient(top, #ff8f59 0%, #ff5323 100%);
    background: -webkit-linear-gradient(top, #ff8f59 0%,#ff5323 100%);
    background: linear-gradient(to bottom, #ff8f59 0%,#ff5323 100%);
    color:#fff;
}
.mainPlot .sectionToolbar {
    border-bottom: 1px solid #ffab84;
    border-bottom: 1px solid rgba(255,255,255,.3);
}
.mainPlot h1{
    border: 0;
    margin-bottom: 0;
}

/*  orange background forms
________________________________________________________*/
.mainPlot label {
    color:#fff;
    color:rgba(255,255,255,.9);
}

.mainPlot select,
.mainPlot textarea,
.mainPlot input,
.mainPlot .uneditable-input {
    color:#6b1f00;
    background-color: #ffb08a;
    background-color: rgba(255,255,255,.2);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.13);
}
.mainPlot input[type="checkbox"],
.mainPlot input[type="radio"] {
    background: none;
}
.mainPlot option {
    color:#6b1f00;
    background-color: #ffb08a;
}

.mainPlot .field-error {
    border-color: #D00; /*oldie*/
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.13), inset 0 0 0 2px #d00;
}
.oldie .mainPlot .field-error {
    outline: 1px solid #D00;
}


/*  orange background buttons
-------------------------------------*/
.mainPlot button,
.mainPlot input[type="button"],
.mainPlot input[type="submit"],
.mainPlot [class^="btn"],
.mainPlot [class*=" btn"] {
    background: none;
    color:#fce7de;
    border:1px solid #ff9d80;
    box-shadow:0 1px 1px 0 rgba(0,0,0,.1);

}
.mainPlot .btn-primary,
.mainPlot input[type="submit"] {
    background: #fce7de;
    color:#f56c33;
    border:1px solid #fce7de;
}

.mainPlot button:hover,
.mainPlot input[type="button"]:hover,
.mainPlot input[type="submit"]:hover,
.mainPlot [class^="btn"]:hover,
.mainPlot [class*=" btn"]:hover {
    color:#f56c33;
    background:#fff;
    border-color:#fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.4);
}
.mainPlot .noframe {
    border-color:transparent;
    background: none;
}






/* colored texts
_____________________________________________________________________*/
.text-info {
    color: var(--text-info-color);
}
.text-success {
    color: var(--text-success-color);
}
.text-warning {
    color: var(--text-warning-color);
}
.text-error {
    color: var(--text-error-color);
}
:is(.text-info, .text-success, .text-warning, .text-error) a {
    color:inherit;
}


/* infos
_____________________________________________________________________*/
.info,
label > .info p,
.info-btn p {
    background: var(--alert-info-bg);
    border:1px solid var(--alert-info-border);
    color:var(--alert-info-color);
}
.info.warning {
    background: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-color);
}
.info.error {
    background: var(--alert-error-bg);
    border-color: var(--alert-error-border);
    color: var(--alert-error-color);
}
.info.success {
    background: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-color);
}
.info span[class*="icon"] { color: var(--alert-info-icon-color)}
.info.success span[class*="icon"] { color: var(--alert-success-icon-color)}
.info.warning span[class*="icon"] { color: var(--alert-warning-icon-color)}
.info.error span[class*="icon"] { color: var(--alert-error-icon-color)}

.info a {
    color:inherit;
}

label > .info,
.info.info-small{
    border:0;
    background: none;
}
.info-small {color:var(--text-info-color)}
.info-small.success { color:var(--text-success-color)}
.info-small.warning { color:var(--text-warning-color)}
.info-small.error { color:var(--text-error-color)}

label > .info p,
.info-btn p {
    box-shadow: var(--elevation-1);
}
label > .info p:before,
.info-btn p:before {
    border-top-color:var(--alert-info-border);
}
label > .info p[data-placement="bottom"]::before,
.info-btn p[data-placement="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color:var(--alert-info-border);
}
label > .info p:after,
.info-btn p:after {
    border-top-color:var(--alert-info-bg);
}
label > .info p[data-placement="bottom"]::after,
.info-btn p[data-placement="bottom"]::after {
    border-top-color: transparent;
    border-bottom-color:var(--alert-info-bg);
}

.info hr {
    border-color: inherit;
}
.info h1,
.info h2,
.info h3 {
    color: inherit;
}

.info .btn:not(code + button):not(.btn-primary),
.info button:not(code + button):not(.btn-primary) {
    background-color: var(--alert-info-btn-bg);
}
.info .btn:not(code + button):not(.btn-primary):hover,
.info button:not(code + button):not(.btn-primary):hover {
    background-color: var(--alert-info-btn-hover-bg);
}
.info input {
    mix-blend-mode: var(--info-input-blend);
}

label > .icon-ai::before {
    color:transparent;
    background-image: linear-gradient(90deg, #5CFF89 10%, #5CE2FF 58%, #46C2EE 90%);
    background-clip: text;
    -webkit-background-clip: text;
}

/* News 
-------------------------------------*/
.news strong {
    background: var(--alert-info-border);
    color: var(--alert-info-bg);
}
.news::before{
    border-top-color: var(--alert-info-border);
}
.news::after{
    border-top-color:var(--alert-info-bg);
    margin-top: -1px;
}

/* tooltip
_____________________________________________________________________*/
.tooltip {
    box-shadow: var(--elevation-1);
}
.tooltip span[class*="icon"] { color: var(--alert-info-icon-color)}
.tooltip.success span[class*="icon"] { color: var(--alert-success-icon-color)}
.tooltip.warning span[class*="icon"] { color: var(--alert-warning-icon-color)}
.tooltip.error span[class*="icon"] { color: var(--alert-error-icon-color)}


/* flash messages
_____________________________________________________________________*/
.flash-info,
.flash-error,
.flash-success {
    border:1px solid;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.flash-info {
    background: var(--alert-info-bg);
    border-color:var(--alert-info-border);
    color:var(--alert-info-color);
}
.flash-error {
    background: var(--alert-error-bg);
    border-color: var(--alert-error-border);
    color: var(--alert-error-color);
}
.flash-success {
    background: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-color);
}
:is(.flash-info, .flash-error, .flash-success) a {
    color: inherit;
}
:is(.flash-info, .flash-error, .flash-success) a[title] {
    opacity: .6;
}
:is(.flash-info, .flash-error, .flash-success) a[title]:hover {
    opacity: 1;
}



/* form errors
_____________________________________________________________________*/
.form-errors {
    color: var(--error-red);
}


/* badges
_____________________________________________________________________*/
.badge{
    background: var(--chip-bg);
    color:var(--chip-color);
}
.badge_primary {
    background:var(--chip-primary-bg);
    color:var(--chip-primary-color);
}
.badge_warning {
    background:var(--chip-warning-bg);
    color:var(--chip-warning-color);
}
.badge_error {
    background-color: var(--chip-error-bg);
    color: var(--chip-error-color);
}


/* labels
_____________________________________________________________________*/
.labels{
    color: var(--white);
    background: var(--text-secondary-color);
    box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
.labels.red{
    color: var(--white);
    background: var(--error-red);
}



/* forbidden page
______________________________________________________________*/
.forbidden-page address{
    border-top:1px solid var(--border-one);
}



/* card
______________________________________________________________*/
.card {
    border:1px solid var(--border-one);
    box-shadow: var(--elevation-1);
}
.cardTitle {
    color:var(--title);
}



/* footer
_____________________________________________________________________*/
.footer{
    color:var(--text-secondary);
}



/* popup
_____________________________________________________________________*/
.modalOverlay {
    background: var(--modal-overlay);
}
.popup {
    box-shadow: var(--elevation-2);
    background: var(--popup-bg);
    border-color: var(--popup-border);
}
.popHeader,
.popLogo{
    background: inherit;
}
picture.popLogo {
    box-shadow: 0 -1px 0 0 var(--popup-border);
}
.closePopBtn {
    color: var(--popup-closeBtn-color);
}
.closePopBtn:hover{
    color: var(--popup-closeBtn-hover-color);
}
.popContent > h5{
    color: var(--title);
}




/* feedback and help buttons
_____________________________________________________________________*/
/* #jsd-widget + #fakeHelpButton,
#feedback,
#feedback svg path{
    background: var(--btn-primary-bg);
    color:var(--btn-primary-color);
    fill:currentColor;
}
#jsd-widget:hover + #fakeHelpButton,
#jsd-widget.hover + #fakeHelpButton,
#feedback:hover {
    background: var(--btn-primary-hover-bg);
    color:var(--btn-primary-hover-color);
    fill:currentColor;
    box-shadow: 0 0 8px rgba(0,0,0,.16);
}







/*___________________________________________________________________

 responsive overwrites
___________________________________________________________________
___________________________________________________________________*/
@media screen and (max-width: 767px) and (pointer:coarse) {
    header::before {
        content:none;
    }
/* end max-width 767 */
}