:root {
    --white: white;
    --black: black;
    --grey: #4f5467;
    --grey-medium: #63687B;
    --grey-medium-2: #a4a4a4;
    --grey-dark: #42454E;
    --grey-dark-2: #5c5c5c;
    --grey-darker: #292A30;
    --grey-medium-light: #cacaca;
    --grey-medium-light-2: #d3d3d3;
    --grey-medium-light-3: #cccccc;
    --grey-light: #e6e6e6;
    --grey-light-2: #e7e7e7;
    --grey-light-3: #e4e8ed;
    --grey-lighter: #c5c5c5;
    --grey-lighter-2: #edf1f5;
    --grey-lighter-3: #C9C9C9;
    --grey-lighter-4: #f9f9f9;
    --grey-white: #f5f5f5;
    --grey-white-2: #f6f6f6;
    --yellow: #FFE699;
    --yellow-light: #F3F781;
    --light-blue: #a0aec4;
    --lighter-blue: #cddaef;
    --blue-green: #37a1a7;
    --orange: #FFD49C;
    --orange-dark: #F59E0B;
    --green: #57ada3;
    --light-green: #26ca26;
    --blue: #65a7d9;
    --blue-purple: #879FC8;
    --rackley: #6685a9;
    --rackley-dark: #50749d;
    --metallic-blue: #365981;
    --light-purple: #bec2dc;
    --dark-blue: #526684;
    --medium-blue: #607494;
    --yellow-dark: #deae2a;
    --red: #790e0e;
}

/* A N'UTILISER QUE SUR LES VIEUX FICHIERS CSS (styleUX2.css etc.) 
    Les nouvelles variables crées doivent être ciblées et avoir un nom parlant (voir bloc suivant)
*/
:root {
    --background-dark: var(--grey);
    --background-darker: var(--grey-dark);
    --background-light: var(--grey-light);
    --background-lighter-2: var(--grey-lighter-2);
    --background-lighter-3: var(--grey-lighter-3);
    --background-medium-light: var(--grey-medium-light);
    --background-medium-light-2: var(--grey-medium-light-2);
    --background-almost-white: var(--grey-white);
    --background-primary: var(--light-blue);
    --border-primary: var(--light-blue);
    --border-dark: var(--grey);
    --border-almost-white: var(--grey-white);
    --border-lighter: var(--grey-lighter);
    --border-lighter-2: var(--grey-lighter-2);
    --border-medium-light: var(--grey-medium-light);
    --border-medium-light-2: var(--grey-medium-light-2);
    --text-dark: var(--grey);
    --text-darker: var(--grey-dark);
    --text-lighter-2: var(--grey-lighter-2);
    --bouton-background-dark: var(--grey);
    --bouton-background-green: var(--green);
    --menu-item-background-dark: var(--grey);
    --fiche-menu: var(--grey);
    --fiche-menu-medium-light: var(--grey-medium-light);
    --grille-bandeau-recherche: var(--grey);
    --grille-detail-ligne: var(--white);
    --grille-header: var(--grey);
    --grille-header-medium-light: var(--grey-medium-light);
    --grille-header-border: var(--grey);
    --icons-primary-color: var(--light-blue);
    --icons-standard-color: var(--grey);
    --icons-light-color: var(--grey-light);
}

/* Variables au nom parlant : [endroit-concerné]-[element-concerné]-[type] */
:root {
    /* GRILLES */
    --grille-row-selected-background: var(--yellow);
    --grille-row-selected-text: var(--black);
    --grille-rows-background: var(--white);
    --grille-rows-border: var(--grey-light-3);
    --grille-rows-text: var(--black);
    --grille-rows-hover-background: var(--grey-lighter-2);
    --grille-filter-row-background: var(--white);
    --grille-filter-row-input-background: var(--grey-lighter-2);
    --grille-filter-row-calendar-border: var(--light-blue);
    --grille-filter-row-calendar-header-background: var(--light-blue);
    --grille-filter-row-calendar-footer-background: var(--light-blue);
    --grille-filter-row-calendar-footer-border: var(--light-blue);
    --grille-filter-row-calendar-button-background: var(--white);
    --grille-filter-row-calendar-button-border: var(--white);
    --grille-filter-row-calendar-button-hover-background: var(--grey);
    --grille-filter-row-calendar-button-hover-border: var(--grey);
    --grille-filter-row-calendar-button-hover-color: var(--white);
    --grille-container-background: var(--grey-lighter-2);
    --grille-footer-background: var(--grey-lighter-2);
    --grille-footer-devexpress-background: var(--light-blue);
    --grille-footer-devexpress-text: var(--black);
    --grille-footer-buttons-container-background: var(--grey-lighter-2);
    --grille-footer-buttons-background: var(--white);
    --grille-footer-buttons-hover-background: var(--light-blue);
    --grille-footer-save-button-background: var(--light-blue);
    --grille-footer-save-button-hover-background: var(--grey);
    --grille-onglets-background: var(--grey-lighter-2);
    --grille-onglets-button-background: var(--white);
    --grille-onglets-hover-background: var(--grey-lighter-4);
    --grille-onglets-active-background: var(--grey-lighter-2);
    --grille-onglets-container-background: var(--grey-lighter-2);
    --grille-onglets-container-border: var(--grey-lighter-2);
    --grille-results-background: var(--white);
    --grille-results-border: var(--grey-lighter-2);
    --grille-colonnes-header-background: var(--white);
    --grille-colonnes-header-text: var(--black);
    --grille-elements-inside-containter-border: var(--grey-light-3);
    --grille-grouping-indent-row-background: var(--grey-lighter-2);
    --grille-colonnes-personnalisation-background: var(--light-blue);
    --grille-grouping-header-background: var(--light-blue);
    --grille-grouping-header-border: var(--grey-medium);
    --grille-grouping-indent-row-background: var(--light-blue);
    --grille-grouping-header-text: var(--black);
    --grille-grouping-totals-background: var(--grey-lighter-2);
    --grille-grouping-header-selected-background: var(--grey);
    --grille-barre-recherche-background: var(--light-blue);
    --grille-footer-row-totals-background: var(--white);
    --grille-panneau-buttons-background: var(--white);
    --grille-panneau-buttons-text: var(--black);
    --grille-panneau-buttons-hover-background: var(--light-blue);
    --grille-panneau-buttons-hover-text: var(--white);
    --grille-panneau-buttons-hover-icon: var(--white);
    --grille-avancee-colonnes-menu-background: var(--light-blue);
    --grille-avancee-colonnes-menu-border: var(--grey);
    --grille-avancee-colonnes-menu-text: var(--grey-lighter-2);
    --grille-input-recherche-background: var(--white);
    --grille-bandeau-rows-text: var(--light-blue);
    --grille-bandeau-rows-hover-text: var(--grey);
    --grille-filter-row-text: var(--light-blue);
    /* FICHES */
    --fiche-panel-legend-hover-text: var(--blue-green);
    --fiche-panel-legend-hover-icon: var(--blue-green);
    --fiche-input-required-border: var(--orange);
    --fiche-input-important-border: var(--yellow-light);
    --fiche-input-background: var(--white);
    --fiche-input-edit-border: var(--light-blue);
    --fiche-bouton-documents-text: var(--black);
    --fiche-bouton-documents-background: var(--white);
    --fiche-bouton-documents-hover-text: var(--white);
    --fiche-bouton-documents-hover-background: var(--light-blue);
    --fiche-bouton-workflow-hover-text: var(--white);
    --fiche-bouton-workflow-hover-background: var(--light-blue);
    --fiche-titre-workflow-text: var(--grey);
    --fiche-workflow-ctrl-detail-background: var(--grey-lighter-2);
    --fiche-menu-onglets-container-background: var(--grey-lighter-2);
    --fiche-content-container-background: var(--grey-lighter-2);
    --fiche-panel-legend-text: var(--grey-dark);
    --fiche-panel-legend-icon: var(--grey-dark);
    --fiche-panel-background: var(--white);
    --fiche-panel-border: var(--grey-medium-light);
    --fiche-menu-panel-minimized-research-hover-background: var(--light-blue);
    --fiche-menu-panel-minimized-research-background: var(--grey-lighter-2);
    --fiche-menu-panel-minimized-research-border: var(--grey-medium-light);
    --fiche-menu-panel-minimized-background: var(--white);
    --fiche-menu-panel-minimized-border: var(--grey-medium-light);
    --fiche-menu-container-background: var(--grey-lighter-2);
    --fiche-menu-item-header-background: var(--light-blue);
    --fiche-menu-item-background: var(--white);
    --fiche-menu-item-hover-background: var(--grey-lighter-2);
    --fiche-menu-selected-border: var(--blue-green);
    --fiche-menu-item-active: var(--blue-green);
    --fiche-menu-favoris-titre-text: var(--blue-purple);
    --fiche-menu-favoris-background: var(--white);
    --fiche-synthese-panel-titre-background: var(--light-blue);
    --fiche-sitemap-titre-text: var(--grey-dark);
    --fiche-boutons-background: var(--light-blue);
    --fiche-boutons-text: var(--white);
    --fiche-boutons-hover-background: var(--grey);
    --fiche-boutons-selected-background: var(--grey);
    --fiche-boutons-hover-text: var(--white);
    --fiche-volet-document-background: var(--grey-lighter-2);
    --fiche-tabs-background: var(--light-blue);
    --fiche-tabs-hover-background: var(--grey-lighter-2);
    --fiche-menu-onglets-principaux-background: var(--white);
    --fiche-menu-onglets-principaux-text: var(--grey);
    --fiche-badge-ged-text: var(--black);
    --fiche-badge-ged-background: var(--orange-dark);
    --fiche-drop-document-area-border: var(--grey);
    --fiche-drop-document-area-text: var(--grey);
    --fiche-listebox-panel-title-background: var(--light-blue);
    --fiche-listebox-panel-title-text: var(--white);
    --fiche-listebox-panel-border: var(--light-blue);
    --fiche-listebox-panel-background: var(--grey-lighter-2);
    --fiche-bandeau_spliter-background: var(--light-blue);
    --fiche-bandeau-vr-bloc-background: var(--white);
    --fiche-labels-text: var(--light-blue);
    --fiche-worflow-etape-first-header-background: var(--light-blue);
    --fiche-worflow-etape-others-header-background: var(--white);
    --fiche-bandeau-menu: var(--rackley);
    --fiche-bandeau-menu-title: var(--metallic-blue);
    --fiche-bandeau-menu-icone-sitemap: var(--white);
    /* COMBOBOX */
    --combo-bouton-deroulement-background: var(--white);
    --combo-content-background: var(--white);
    --combo-results-content-background: var(--white);
    --combo-results-content-hover-background: var(--grey-lighter-2);
    --combo-results-content-text: var(--black);
    --combo-bouton-next-prev-background: var(--light-blue);
    --combo-bouton-next-prev-hover-background: var(--grey);
    --combo-bouton-next-prev-hover-text: var(--white);
    /* BOUTONS */
    --bouton-hover-background: var(--light-blue);
    /* BANDEAU HORIZONTAL */
    --bandeau-horizontal-background: var(--grey-lighter-2);
    --bandeau-horizontal-text: var(--grey);
    --bandeau-horizontal-bouton-profil-text: var(--grey);
    --bandeau-horizontal-top-bar-background: var(--grey-lighter-2);
    --bandeau-horizontal-barre-recherche-background: var(--light-blue);
    --bandeau-horizontal-detail-ligne-icone-background: var(--light-blue);
    --bandeau-horizontal-input-recherche-background: var(--white);
    --bandeau-horizontal-onglet-background: var(--rackley);
    --bandeau-horizontal-onglet-out-background: var(--light-blue);
    --bandeau-sidebar-onglet-background: var(--rackley);
    /* MENUS */
    --menu-sousmenu-hover-background: var(--grey);
    --menu-sousmenu-content-background: var(--light-blue);
    --menu-sousmenu-content-text: var(--white);
    --menu-button-text: var(--black);
    --menu-button-background: var(--white);
    --menu-button-hover-text: var(--white);
    --menu-button-hover-background: var(--light-blue);
    --menu-container-background: var(--grey-lighter-2);
    --menu-libelle-text: var(--black);
    --menu-courrier-text: var(--white);
    /* SIDE MENU */
    --side-menu: var(--rackley);
    --side-menu-subitem-background: var(--rackley-dark);
    --side-item-active-background: var(--metallic-blue);
    --side-menu-popover-background: var(--rackley-dark);
    --side-menu-popover-title: var(--metallic-blue);
    /* POPUP */
    --popup-titre-text: var(--white);
    --popup-bandeau-background: var(--light-blue);
    --popup-bandeau-buttons: var(--rackley);
    --popup-contenu-border: var(--grey);
    --popup-contenu-background: var(--grey-lighter-2);
    --popup-contenu-text: var(--light-blue);
    --popup-footer-contenu-text: var(--white);
    --popup-devexpress-contenu-text: var(--grey);
    --popup-save-buttons-background: var(--grey-lighter-2);
    --popup-save-buttons-border: var(--grey);
    --popup-save-buttons-text: var(--grey);
    --popup-save-title-background: var(--grey-lighter-2);
    --popup-save-title-border: var(--light-blue);
    --popup-save-title-text: var(--grey);
    --popup-save-container-border: var(--light-blue);
    --popup-panel-legend-text: var(--grey);
    --popup-panel-background: var(--white);
    --popup-panel-border: var(--grey-medium-light);
    --popup-boutons-background: var(--light-blue);
    --popup-boutons-disabled-background: var(--grey-lighter);
    --popup-boutons-text: var(--white);
    --popup-boutons-hover-background: var(--grey);
    --popup-footer-background: var(--light-blue);
    --popup-footer-devexpress-background: var(--grey);
    --popup-input-background: var(--white);
    --popup-button-file-upload-background: var(--white);
    --popup-button-file-upload-hover-background: var(--light-blue);
    --popup-button-file-upload-text: var(--black);
    --popup-button-file-upload-hover-text: var(--white);
    --popup-header-background: var(--grey);
    --popup-header-border: var(--light-blue);
    --popup-header-text: var(--white);
    --popup-button-background: var(--white);
    --popup-button-border: var(--white);
    --popup-button-hover-background: var(--light-blue);
    --popup-button-hover-border: var(--light-blue);
    --popup-button-text: var(--black);
    --popup-button-hover-text: var(--white);
    --popup-window-footer-background: var(--light-blue);
    --popup-window-footer-button-border: var(--white);
    /* SCROLLBAR */
    --scrollbar-background: var(--white);
    --scrollbar-track-background: var(--white);
    --scrollbar-thumb-background: var(--white);
    --scrollbar-thumb-border: var(--grey-medium-light);
    --scrollbar-button-background: var(--grey-lighter-2);
    --scrollbar-button-arrow-background: var(--light-blue);
    /* MASTER */
    --master-left-bar-detail-background: var(--rackley);
    --master-left-bar-icons-selected-background: var(--rackley);
    --master-left-bar-icons-selected-border: var(--rackley);
    --master-left-bar-icons-selected-hover-color: var(--white);
    --master-left-bar-icons-background: var(--metallic-blue);
    --master-left-bar-icons-border: var(--metallic-blue);
    --master-left-bar-icons-color: var(--white);
    --master-left-bar-icons-hover-background: var(--light-blue);
    --master-left-bar-icons-hover-color: var(--white);
    --master-left-bar-detail-input-background: var(--white);
    --master-left-bar-detail-results-background: var(--white);
    --master-left-bar-detail-quick-search-background: var(--rackley-dark);
    --master-left-bar-detail-quick-search-mark-background: var(--yellow);
    --master-left-bar-detail-quick-search-title-text: var(--white);
    --master-left-bar-detail-results-hover-background: var(--light-blue);
    --master-left-bar-detail-results-border: var(--white);
    --master-left-bar-detail-results-text: var(--white);
    --master-left-bar-detail-results-hover-text: var(--grey);
    --master-left-bar-detail-action-buttons-background: var(--white);
    --master-left-bar-detail-action-buttons-border: var(--white);
    --master-left-bar-detail-action-buttons-hover-background: var(--grey-lighter-2);
    --master-left-bar-detail-action-buttons-hover-border: var(--grey-lighter-2);
    --master-menu-user-detail-text: var(--white);
    --master-menu-user-detail-icons-color: var(--white);
    --master-menu-user-detail-hover-background: #ffffff2e;
    --master-menu-user-detail-background: var(--rackley);
    --master-menu-user-detail-border: var(--rackley);
    --master-menu-user-app-info-background: var(--light-blue);
    --master-menu-user-app-info-shadow: var(--grey-darker);
    --master-menu-user-switch-button-background: var(--light-blue);
    --master-menu-user-switch-button-border: var(--light-blue);
    --master-menu-user-switch-container-background: var(--white);
    --master-menu-user-switch-container-border: var(--light-blue);
    /* TREELIST */
    --treelist-footer-background: var(--light-blue);
    --treelist-container-border: var(--light-blue);
    --treelist-even-rows-container: var(--grey-lighter-2);
    --treelist-selected-row-background: var(--yellow);
    /* TABLEAUX DE BORDS */
    --dashboard-criteres-row-background: var(--grey-lighter-2);
    /* ACCUEIL */
    --accueil-main-content-background: var(--grey-lighter-2);
    --accueil-cards-title-over-color-text: var(--white);
    --accueil-cards-badges-text: var(--white);
    --accueil-cards-exception-text: var(--white);
    --accueil-cards-alertes-title-background: var(--green);
    --accueil-cards-echeances-title-background: var(--blue);
    --accueil-cards-todo-title-background: var(--light-purple);
    --accueil-cards-accesRapide-title-background: var(--green);
    --accueil-cards-favoris-title-background: var(--blue);
    --accueil-cards-fichesEpinglees-title-background: var(--light-purple);
    --accueil-cards-todo-result-border: var(--light-purple);
    --accueil-cards-todo-result-background: var(--grey-lighter-2);
    --accueil-cards-todo-result-text: var(--grey);
    --accueil-cards-title-no-color-border: var(--grey-lighter-2);
    --accueil-cards-results-hover-background: var(--grey-lighter-2);
    --accueil-cards-results-details-background: var(--grey-lighter-2);
    --accueil-cards-results-details-border: var(--grey-medium-light);
    /* DATEPICKER */
    --datepicker-date-selected: var(--light-blue);
    /* PAGE ERREUR */
    --page-erreur-top-bar-left-background: var(--dark-blue);
    --page-erreur-top-bar-right-background: var(--light-blue);
    --page-erreur-left-bar-top-background: var(--medium-blue);
    --page-erreur-left-bar-bottom-background: var(--light-blue);
    --page-erreur-logo-module-background: var(--light-blue);
    --page-erreur-logo-module-border: var(--dark-blue);
    --page-erreur-soustitre-background: var(--light-blue);
    --page-erreur-soustitre-border: var(--dark-blue);
    --page-erreur-contenu-background: var(--white);
    --page-erreur-container-border: var(--medium-blue);
    --page-erreur-background: var(--lighter-blue);
    /* COLORPICKER */
    --colorpicker-border: var(--grey-dark);
    /* CHECKBOX SWITCH */
    --switch-button-after-background: var(--grey-white-2);
    --switch-button-before-background: var(--grey-light-2);
    --switch-button-border: var(--grey-medium-light-3);
    --switch-container-background: var(--grey-dark-2);
    --switch-container-border: var(--grey-medium-2);
    --switch-input-focus: var(--blue);
    --switch-checked-container-background: var(--light-green);
    --switch-checked-container-border: var(--light-green);
    /* WORKFLOWS */
    --wkf-ctrl-etape-background: var(--light-blue);
    --wkf-ctrl-title-background: var(--light-blue);
    --wkf-list-ctrl-background: var(--light-blue);
    /* POPUP RG*/
    --popup-rg-warning: var(--yellow-dark);
    --popup-rg-info: var(--dark-blue);
    --popup-rg-error: var(--red);
    --popup-rg-cog: var(--grey);
    --popup-rg-arrow-down: var(--light-green);
    --popup-rg-progressbar-33: var(--red);
    --popup-rg-progressbar-66: var(--yellow-dark);
    --popup-rg-progressbar-100: var(--light-green);
    /* ListBox */
    --listbox-selected-item-text: var(--white);
}