:root{
    /* Font */
    --dft-font: 12px Tahoma, Arial;
    --text-color: black;

    /* colors pallet */
    --primary-color: #D81635;                   /* used for important sections (buttons, headers, ...) */
    --primary-text-color: white;
    --primary-text-shadow: 1px 1px 2px #333;
    --secondary-color: #555;                    /* used for selection */
    --secondary-text-color: white;
    --secondary-text-shadow: none;
    --tertiary-color: #fafafa;                  /* used for less important buttons*/    
    --tertiary-text-color: var(--text-color);              
    --tertiary-text-shadow: none;
    
    /* background */
    --background-color: #ccc;
    --background: var(--background-color);
    --index-background: var(--background);
    --separator-color: #a0a0a0;     

    /* hover colors */
    --hover-color: var(--primary-text-color);
    --hover-text-color: var(--primary-color);
    --hover-text-color-2: var(--text-color);        /* utilisée pour avoir une 2eme couleur lisible lorsqu'on survole un texte (permet d'afficher l'icone de paramétrage du calendrier d'un sys autonome en noir sur le fond blanc, sans le mettre en surbrillance)  */
    --hover-text-shadow: none;

    /* selection colors */
    --selected-color: var(--secondary-color);
    --selected-text-color: var(--secondary-text-color);
    --selected-text-shadow: var(--secondary-text-shadow);
    --selected-box-shadow: 0px 0px 4px var(--selected-color);
    --selected-border-color: #777;

    /* border radius */
    --border-radius: 5px;
    
    /* header */
    --header-logo-width: 55px;
    --header-logo-height: 55px;
    --header-logo-padding: 0;
    --header-logo-margin: 0 0 0 5px;
    --header-title-margin: 0 0 0 10px;
    --header-title-font-size: 3em;
    --header-background: var(--primary-color);
    --header-text-color: var(--primary-text-color);
    --header-text-shadow: var(--primary-text-shadow);
    --header-link-hover-background: none;
    --header-link-hover-text-color: black;
    --header-link-hover-text-shadow: none;
    
    /* Button */
    --btn-background: var(--primary-color);
    --btn-text-color: var(--primary-text-color);
    --btn-text-shadow: var(--primary-text-shadow);
    --btn-border: 1px solid black;
    --btn-border-radius: var(--border-radius);
    
    --btn-hover-background: var(--hover-color);
    --btn-hover-text-color: var(--hover-text-color);
    --btn-hover-text-shadow: var(--hover-text-shadow);
    --btn-hover-border: 1px solid var(--hover-text-color);
    
    /* Light button */
    --btn-light-background: var(--tertiary-color);
    --btn-light-text-color: var(--tertiary-text-color);
    --btn-light-border: 1px solid var(--btn-light-text-color);
    --btn-light-text-shadow: var(--tertiary-text-shadow);

    --btn-light-hover-background: var(--hover-color);
    --btn-light-hover-text-color: var(--hover-text-color);
    --btn-light-hover-text-shadow: var(--hover-text-shadow);
    --btn-light-hover-border: 1px solid var(--hover-text-color);
    
    /* Disabled button */
    --btn-disabled-background: transparent;
    --btn-disabled-text-color: #555;
    --btn-disabled-border: 1px solid var(--btn-disabled-text-color);
    --btn-disabled-text-shadow: none;

    /* Boxes */
    --box-header-background: none;
    --box-header-text-color: var(--primary-color);
    --box-header-text-shadow: none;
    --box-header-border-top: none;
    --box-header-border-bottom: 2px solid var(--primary-color);
    --box-header-options-background: var(--box-header-background);
    --box-header-options-text-color: var(--text-color);
    --box-header-options-text-shadow: none;
    --box-header-options-border: 1px solid var(--box-header-options-text-color);
    --box-header-options-selected-background: var(--primary-color);
    --box-header-options-selected-text-color: var(--primary-text-color);
    --box-header-options-selected-text-shadow: var(--primary-text-shadow);
    --box-header-options-selected-border: 1px solid var(--primary-color);
    --box-content-border-top: none;
    --box-content-background: #eee;
    --box-content-text-color: var(--text-color);
    
    /* Popups */
    --popup-header-background: var(--primary-color);
    --popup-header-text-color: var(--primary-text-color);
    --popup-header-text-shadow: var(--primary-text-shadow);
    --popup-header-border-top: none;
    --popup-content-border-top: none;
    
    /* Tables */
    --table-header-background: #555;
    --table-header-text-color: white;
    --table-even-background: #d7d7d7;
    --table-odd-background: #eee;
    --table-border: 1px solid #a0a0a0;
	--table-row-border: none;
	--table-column-border: var(--table-border);
    --table-hover-background: var(--hover-color);
    --table-hover-text-color: var(--hover-text-color);
    --table-hover-text-shadow: var(--hover-text-shadow);

    /* Datepicker */
    --datepick-header-background: var(--primary-color);
    --datepick-header-text-color: var(--primary-text-color);
    --datepick-header-text-color-disabled: #ddd;
    --datepick-header-text-shadow: var(--primary-text-shadow);
    --datepick-date-background: #eee;
    --datepick-date-text-color: black;
    --datepick-date-text-shadow: none;
    --datepick-date-other-month-background: #d0d0d0;
    --datepick-date-weekend-background: var(--datepick-date-background);
    --datepick-date-disabled-text-color: #ccc;
    --datepick-date-selected-background: var(--selected-color);
    --datepick-date-selected-text-color: var(--selected-text-color);
    --datepick-date-selected-text-shadow: var(--selected-text-shadow);
    --datepick-date-selected-box-shadow: var(--selected-box-shadow);

    /* select slider */
    --select-slider-hover-text-color: var(--hover-text-color);
    --select-slider-hover-text-shadow: var(--hover-text-shadow);

    /* Mobile list */
    --mobiles-list-header-background: var(--box-header-background);
    --mobiles-list-header-text-color: var(--box-header-text-color);
    --mobiles-list-header-text-shadow: var(--box-header-text-shadow);
	--mobiles-list-header-border-bottom: 1px solid var(--mobiles-list-header-text-color);
    --mobiles-list-background: var(--background);
    --mobiles-list-border: 1px solid var(--background);
    --mobiles-list-selected-border: 1px solid var(--selected-border-color);

    /* Company list */
    /* also used for user list*/
    --company-list-background: var(--background);
    --company-list-btn-margin: 5px 10px;
    --company-list-btn-background: var(--tertiary-color);
    --company-list-btn-text-color: var(--tertiary-text-color);
    --company-list-btn-text-shadow: var(--tertiary-text-shadow);
    --company-list-btn-border: 1px solid var(--tertiary-text-color);
    --company-list-btn-hightlighted-text-color: var(--primary-color);
    --company-list-btn-hightlighted-text-shadow: none;
    --company-list-btn-selected-background: var(--selected-color);
    --company-list-btn-selected-text-color: var(--selected-text-color);
    --company-list-btn-selected-text-shadow: var(--selected-text-shadow);
    --company-list-btn-selected-box-shadow: var(--selected-box-shadow);
    --company-list-btn-selected-hightlighted-text-color: black;
    --company-list-btn-selected-hightlighted-text-shadow: 0px 0px 7px var(--company-list-btn-selected-text-color);
    
    /* Links (used in index page) */
    --link-text-color: var(--primary-color);
    --link-text-shadow: none;
    --link-hover-text-color: var(--primary-color);
    --link-hover-text-shadow: 0 0 3px var(--primary-text-color), 0 0 5px var(--link-hover-text-color);

    /* Big logo (used in index page) */
    --logo-big-width: 120px;
    --logo-big-height: 120px;
    --logo-big-margin: 30px 0;
}