/**
 * DEFAULT SKIN
 * NON COLOR PROPERTIES 
 */
:root {
    /**
     * FONT
     */
    --font: 'Inter', sans-serif;
    --font-awesome: "Font Awesome 5 Pro";
    --font-weight: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 600;
    --font-size: 10px;
    --font-size-top-icons: 14px;
    --font-size-menu: 12px;
    --font-size-buttons: 10px;
    --font-size-panel-header: 12px;
    --font-size-modal-title: 16px;

    /**
     * BORDER WIDTH
     */
    --border-width: 1px;
    --border-width-md: 2px;
    --border-width-list: 1px;

    /**
     * BORDER RADIUS
     */
    --border-radius: 5px;
    --border-radius-form-control: 4px;
    --border-radius-panel: 8px;
    --cond-border-radius-md: 10px;
    --cond-border-radius-lg: 20px;

    /**
     * BORDER SPACING
     */
    --border-spacing-tr: 6px;
    --border-spacing-list-tr: 0;

    /**
     * MARGIN
     */
    --margin-buttons: .3em;
    --margin-buttons-half: calc(var(--margin-buttons) / 2);
    --margin-blocks-vert: 1em;
    --margin-blocks-horiz: 1em;
    --margin-blocks-vert-half: calc(var(--margin-blocks-vert) / 2);
    --margin-blocks-horiz-half: calc(var(--margin-blocks-horiz) / 2);
    --cond-margin-sm: .5em;
    --cond-margin-md: 1em;
    --cond-margin-lg: 2em;

    /**
     * PADDING
     */
    --padding-buttons-h: .5em;
    --padding-inside-vert: 1em;
    --padding-inside-horiz: 1em;
    --padding-inside-form-controls-v: 0;
    --padding-inside-form-controls-h: .5em;
    --input-after-ico-padding-right: 3ch;
    --cond-padding-xs: .2em;
    --cond-padding-sm: .5em;
    --cond-padding-md: 1em;
    --cond-padding-lg: 1.5em;
    --cond-padding-xl: 1.8em;

    /**
     * HEIGHT
     */
    --height-tr: 2.5em;
    --height-menubar: 48px;
    --height-menubar-items: 30px;
    --height-menubar-logo: 36px;
    --height-input: 2.0em;

    /**
     * WIDTH
     */
    --width-action-bar: 32px;
    --width-list-column: 50ch;

    /**
     * SIZE (width and height)
     */
    --size-button: 25px;
    --size-button-field: 18px;
    --size-button-panel-header: 2em;
    --size-scrollbar: 10px;

    /**
     * MATERIAL TD MARGIN & PADDING
     */
    --material-td-margin-right: .5em;
    --material-td-margin-bottom: .25em;
    --material-td-padding-right: .1em;
    --material-td-padding-bottom: .1em;

    /**
     * BOX SHADOW
     */
    --top-header-box-shadow: 0px 4px 16px 0px var(--color-menubar-dropdown-shadow);

    /**
     * Z-INDEX
     */
    --top-header-z-index: 200; /* Lower tan modal.css .modal-back z-index */

    /**
     * LISTS
     */
    --list-top-left-border-radius: 0; 
    --list-border-collapse: separate;
    --list-row-vert-padding: 2px; 
    --list-header-font-size: var(--font-size-menu);
    --list-header-font-weight: var(--font-weight-semibold);
    --list-header-text-transform: capitalize;
}

/**
 * DEFAULT COLOR PROPERTIES 
 */
:root {
    /**
     * BASE
     */
    
    /* To get a lighter color without applying alpha (and making the elements transparent)
        use this "magic formula" in each color's component (rgb)
            ((1 - a) * 255) + (X * a)
        where 
            a: alpha percentange
            X: the RGB value
        Example:
        rgb(((1 - a) * 255) + (R * a), ((1 - a) * 255) + (G * a), ((1 - a) * 255) + (B * a))  
    */

    --pcolor-bg: 242, 242, 242;
    --pcolor-light-bg: 255, 255, 255;
    --pcolor-text: 0, 0, 0;
    --pcolor-light-text: 255, 255, 255;
    --pcolor-context-menu: 101, 146, 232;
    --pcolor-buttons-text: 97, 155, 255;
    --pcolor-headers-bg: 92, 148, 223;
    --pcolor-headers-bg-hover: 35, 38, 40;
    --pcolor-headers-text-hover: 255, 255, 255;
    --pcolor-panel-header-bg: 204, 229, 255;
    --pcolor-panel-header-text: var(--pcolor-text);
    --pcolor-panel-header-icon: 94, 172, 252;
    --pcolor-panel-bg: var(--pcolor-light-bg);

    --scolor-success-bg: 209, 236, 241;
    --scolor-success-text: 12, 84, 96;
    --scolor-warning-bg: 251, 204, 165;
    --scolor-warning-text: 247, 155, 76;
    --scolor-danger-bg: 248, 215, 218;
    --scolor-danger-text: 114, 28, 36;

    --scolor-fixed-bg: 144, 118, 118;
    --scolor-fixed-text: 173, 16, 16;
    
    --color-bg: rgb(var(--pcolor-bg));
    --color-light-bg: rgb(var(--pcolor-light-bg));
    --color-text: rgb(var(--pcolor-text));
    --color-light-text: rgb(var(--pcolor-light-text));
    --color-border: rgb(200, 200, 200);
    --color-title-bg: rgb(var(--pcolor-headers-bg));
    
    --color-primary: rgb(50, 131, 235);     /* #3283EB */
    --color-secondary: rgb(135, 184, 204);  /* #87B8CC */

    --color-third: rgb(254, 20, 138);       /* #FE148A */
    --color-third-light: rgb(255, 203, 229);

    /**
     * ENV SHADES
     */
    --pcolor-env-50: 240,245,254;   /* #f0f5fe */
    --pcolor-env-100: 220,232,253;  /* #dce8fd */
    --pcolor-env-200: 193,216,252;  /* #c1d8fc */
    --pcolor-env-300: 151,192,249;  /* #97c0f9 */
    --pcolor-env-400: 102,159,244;  /* #669ff4 */
    --pcolor-env-500: 54,115,238;   /* #3673ee - Base */
    --pcolor-env-600: 44,93,228;    /* #2c5de4 */
    --pcolor-env-700: 36,73,209;    /* #2449d1 */
    --pcolor-env-800: 35,60,170;    /* #233caa */
    --pcolor-env-900: 34,55,134;    /* #223786 */
    --pcolor-env-950: 25,35,82;     /* #192352 */

    --color-env-50: rgb(var(--pcolor-env-50));
    --color-env-100: rgb(var(--pcolor-env-100));
    --color-env-200: rgb(var(--pcolor-env-200));
    --color-env-300: rgb(var(--pcolor-env-300));
    --color-env-400: rgb(var(--pcolor-env-400));
    --color-env-500: rgb(var(--pcolor-env-500));
    --color-env-600: rgb(var(--pcolor-env-600));
    --color-env-700: rgb(var(--pcolor-env-700));
    --color-env-800: rgb(var(--pcolor-env-800));
    --color-env-900: rgb(var(--pcolor-env-900));
    --color-env-950: rgb(var(--pcolor-env-950));

    /**
     * MENU SHADES
     */
    --pcolor-menu-50: 244,247,251;  /* #f4f7fb */
    --pcolor-menu-100: 231,238,247; /* #e7eef7 */
    --pcolor-menu-200: 202,218,237; /* #cadaed */
    --pcolor-menu-300: 156,188,221; /* #9cbcdd */
    --pcolor-menu-400: 102,152,202; /* #6698ca */
    --pcolor-menu-500: 67,124,180;  /* #437cb4 */
    --pcolor-menu-600: 50,98,151;   /* #326297 */
    --pcolor-menu-700: 40,76,119;   /* #284c77 - Base */
    --pcolor-menu-800: 38,68,102;   /* #264466 */
    --pcolor-menu-900: 36,59,86;    /* #243b56 */
    --pcolor-menu-950: 24,38,57;    /* #182639 */

    --color-menu-50: rgb(var(--pcolor-menu-50));
    --color-menu-100: rgb(var(--pcolor-menu-100));
    --color-menu-200: rgb(var(--pcolor-menu-200));
    --color-menu-300: rgb(var(--pcolor-menu-300));
    --color-menu-400: rgb(var(--pcolor-menu-400));
    --color-menu-500: rgb(var(--pcolor-menu-500));
    --color-menu-600: rgb(var(--pcolor-menu-600));
    --color-menu-700: rgb(var(--pcolor-menu-700));
    --color-menu-800: rgb(var(--pcolor-menu-800));
    --color-menu-900: rgb(var(--pcolor-menu-900));
    --color-menu-950: rgb(var(--pcolor-menu-950));

    /**
     * TOP HEADER
     */
    --color-environment-bg: var(--color-env-500);
    --color-environment-bg-hover: rgb(94, 143, 241);

    /**
     * MENU
     */
    --color-menubar-bg: var(--color-menu-700);
    --color-menubar-bg-active: var(--color-menu-500);
    --color-menubar-text: var(--color-light-text);
    --color-menubar-icon: var(--color-menu-300);
    --color-menubar-dropdown-shadow: rgba(0, 0, 0, .2);

    /**
     * SUBMENU
     */
    --color-submenu-bg: var(--color-light-bg);
    --color-submenu-bg-hover: rgba(var(--pcolor-headers-bg), .2);
    --color-submenu-menubar-bg-hover: rgb( /* --pcolor-headers-bg with the "magic formula" */
        calc((1 - .15) * 255 + (92 * .15)), 
        calc((1 - .15) * 255 + (148 * .15)), 
        calc((1 - .15) * 255 + (223 * .15))
    );
    --color-submenu-text: var(--color-text);
    --color-submenu-text-hover: var(--color-submenu-text);

    /**
     * TOOLBAR
     */
    --color-toolbar-bg: rgb(40, 76, 119);
    --color-toolbar-text: rgb(232, 234, 237);
    --color-toolbar-text-hover: rgb(255, 255, 255);
    --color-toolbar-ico-bg: rgb(63, 63, 63);
    --color-toolbar-ico-text: rgb(255, 255, 255);
    --color-toolbar-ico-border: var(--color-toolbar-bg);

    --color-toolbar-list-bg: var(--color-list-bg);
    --color-toolbar-list-text:rgb(62, 62, 62);
    --color-toolbar-list-text-hover: var(--color-text);
    --color-toolbar-list-ico-bg: var(--color-light-bg);
    --color-toolbar-list-ico-text: var(--color-toolbar-list-text);
    --color-toolbar-list-ico-border: var(--color-toolbar-list-bg);
    --color-toolbar-list-ico-sup: rgb(173, 173, 173);

    --color-toolbar-list-group-border: lightgray;

    --color-toolbar-list-ico-primary: rgb(56, 128, 255);
    --color-toolbar-list-ico-secondary: rgb(201, 56, 255);
    --color-toolbar-list-ico-tertiary: rgb(255, 196, 9);
    --color-toolbar-list-ico-info: rgb(0, 202, 255);
    --color-toolbar-list-ico-warning: rgb(255, 161, 56);
    --color-toolbar-list-ico-danger: rgb(235, 68, 91);

    --color-toolbar-list-ico-primary-hover: rgb(0, 67, 187);
    --color-toolbar-list-ico-secondary-hover: rgb(136, 0, 187);
    --color-toolbar-list-ico-tertiary-hover: rgb(211, 161, 0);
    --color-toolbar-list-ico-info-hover: rgb(0, 121, 153);
    --color-toolbar-list-ico-warning-hover: rgb(187, 98, 0);
    --color-toolbar-list-ico-danger-hover: rgb(164, 18, 38);
    
    --color-toolbar-panel-bg: var(--color-panel-header-bg);
    --color-toolbar-panel-text:rgb(62, 62, 62);
    --color-toolbar-panel-text-hover: var(--color-text);
    --color-toolbar-panel-ico-bg: var(--color-light-bg);
    --color-toolbar-panel-ico-text: var(--color-toolbar-panel-text);
    --color-toolbar-panel-ico-border: var(--color-toolbar-panel-bg);
    --color-toolbar-panel-ico-border: var(--color-toolbar-panel-bg);

    /**
     * ACTIONS
     */
    --color-action-bar-bg: var(--color-light-bg);
    --color-action-bar-bg-hover: var(--color-submenu-bg-hover);
    --color-action-bar-bg-form: rgb(40, 76, 119);
    --color-actions-container: var(--color-light-bg);
    --color-action-bar-buttons-bg: rgba(var(--pcolor-bg), .1);
    --color-action-bar-icon: var(--color-menu-300);
    --color-action-bar-toggle: var(--color-toolbar-list-ico-text);

    /**
     * MESSAGES
     */
    /* SUCCESS */
    --color-success-message-bg: rgb(var(--scolor-success-bg));
    --color-success-message-text: rgb(var(--scolor-success-text));
    --color-success-message-border: rgb(var(--scolor-success-bg));
    /* DANGER */
    --color-danger-message-bg: rgb(var(--scolor-danger-bg));
    --color-danger-message-text: rgb(var(--scolor-danger-text));
    --color-danger-message-border: rgb(var(--scolor-danger-bg));
    /* WARNING */
    --color-warning-message-bg: rgba(var(--scolor-warning-bg), .5);
    --color-warning-message-text: rgb(var(--scolor-warning-text));
    --color-warning-message-border: rgba(var(--scolor-warning-bg), .5);
    /* INFO */
    --color-info-message-bg: rgba(var(--pcolor-context-menu), .1);
    --color-info-message-text: rgb(var(--pcolor-context-menu));
    --color-info-message-border: rgba(var(--pcolor-context-menu), .3);
    /* FIXED */
    --color-fixed-message-bg: rgba(var(--scolor-fixed-text), .1);
    --color-fixed-message-text: rgb(var(--scolor-fixed-bg));
    --color-fixed-message-border: rgba(var(--scolor-fixed-bg), .3);

    /**
     * ICONS
     */
    --color-ico-bg: var(--color-light-bg);
    --color-ico-text: var(--color-text);
    --color-ico-border: rgb(184, 181, 181);
    --color-ico-bg-hover: var(--color-ico-border);
    --color-ico-text-hover: var(--color-ico-bg);
    --color-ico-border-hover: var(--color-ico-border);
    --color-ico-disabled-bg: lightgray;
    --color-ico-disabled-text: rgb(153, 153, 153);
    --color-ico-disabled-ico: #515151;
    --color-ico-fill: rgb(40, 181, 0);
    --color-ico-fill-custom: rgb(240, 164, 0);

    /**
     * SPECIAL BTNS
     */
    --color-ico-cancel: rgb(230, 48, 73);
    --color-ico-save: rgb(40, 181, 0);
    --color-ico-copy: rgb(240, 164, 0);
    --color-ico-delete: rgb(230, 48, 73);
    --color-ico-new: rgb(97, 155, 255);
    --color-ico-edit: var(--color-ico-save);
    --color-ico-secondary: rgb(128, 165, 191);
    --color-progress-bg: var(--color-modal-success-bg);
    --color-div-secondary: rgb(128, 165, 191);

    /**
     * LIST STYLE
     */
    --color-list-style-bg: rgb(166, 160, 160);

    /**
     * LISTS
     */
    --color-list-bg: var(--color-light-bg);
    --color-list-table-bg: rgb(255, 255, 255);
    --color-list-table-container-border: var(--color-list-row-border);
    --color-list-highligh: rgb(187, 187, 187);
    --color-list-button-text: rgb(99, 155, 238);
    --color-list-ctrl-search-value-bg: var(--color-toolbar-list-ico-bg);
    --color-list-ctrl-search-value-border: rgb(147, 169, 191);
    --color-list-header-bg: rgb(244, 244, 244);
    --color-list-header-text: #535353;
    --color-list-header-bg-hover: rgb(var(--pcolor-headers-bg-hover));
    --color-list-header-text-hover: rgb(var(--pcolor-headers-text-hover));
    --color-list-row-bg-odd: var(--color-light-bg);
    --color-list-row-bg-even: var(--color-light-bg);
    --color-list-row-border: rgb( /*--pcolor-headers-bg-hover with the "magic formula"*/
        calc((1 - .15) * 255 + (35 * .15)), 
        calc((1 - .15) * 255 + (38 * .15)), 
        calc((1 - .15) * 255 + (40 * .15))
    );
    --color-list-row-light-border: #F2F0F0;
    --color-list-row-bg-hover: rgb( /*based on --pcolor-headers-bg with the "magic formula"*/
        calc((1 - .15) * 255 + (99 * .15)), 
        calc((1 - .15) * 255 + (155 * .15)), 
        calc((1 - .15) * 255 + (238 * .15))
    );
    --color-list-link-text: rgb(29, 63, 181);
    --color-list-link-text-hover: var(--color-list-header-bg);
    --color-list-drag: darkred;

    /**
     * FORM CONTROL
     */
    --color-form-control-bg: rgb(243, 243, 243);
    --color-input-bg: var(--color-light-bg);
    --color-input-bg-required-error: #ffeeee;
    --color-input-bg-invalid-temp: #f6b0b5;
    --color-input-text: var(--color-text);
    --color-input-border: var(--color-border);
    --color-input-border-required: rgb(255, 31, 47);
    --color-input-disabled-bg: rgba(241, 241, 241, 0.412);
    --color-input-disabled-text: rgb(50, 50, 50);
    --color-input-error: rgb(255, 31, 47);
    --color-input-border-error: rgb(var(--scolor-danger-text));
    --color-input-changed-border: rgba(12,84,96, .4); /* based on --scolor-success-text */
    --color-input-changed-bg: rgb( /* based on --scolor-success-bg with the "magic formula" */
        calc((1 - .4) * 255 + (209 * .4)), 
        calc((1 - .4) * 255 + (236 * .4)), 
        calc((1 - .4) * 255 + (241 * .4))
    );

    /**
     * FORM BAR
     */
    --color-form-bar-bg: rgb(255, 255, 255);
    --color-form-bar-text: var(--color-text);
    --color-form-bar-current-mode: rgb(88, 132, 185);
    --color-form-bar-current-mode-text: var(--color-toolbar-bg);

    /**
     * TABS
     */
    --color-tab-bg: rgba(var(--pcolor-context-menu), .1);
    --color-tab-text: rgba(var(--pcolor-text), .4);
    --color-tab-bg-hover: rgba(var(--pcolor-headers-bg-hover), .5);
    --color-tab-hori-bg-hover: rgb(54, 115, 238);
    --color-tab-vert-bg-hover: #cce5ff;
    --color-tab-active-bg: rgb(var(--pcolor-panel-header-bg));

    /**
     * TABS VERT
     */
    --color-tab-vert-bg: rgb(255, 255, 255);
    --color-tab-vert-text: var(--color-text);
    --color-tab-vert-border-right: #e8eaed;

    /**
     * GRID TEMPLATES
     */
    --color-grid-main-bg: rgb(242, 242, 242);
    --color-grid-secondary-bg: rgb(255, 255, 255);
    --color-grid-details-bg: rgb(255, 255, 255);
    --color-grid-details-header: rgb(0, 171, 207);

    /**
     * LAYERS
     */
    --color-layer-text: rgba(var(--pcolor-text), .4);
    --color-layer-active-bg: var(--color-bg);
    --color-layer-border-top: rgba(var(--pcolor-context-menu), .4);
    --color-layer-border-top-active: var(--color-menubar-bg);
    --color-layer-border-top-hover: rgb(var(--pcolor-headers-bg));  
    --color-bg-header-layer: rgba(var(--pcolor-panel-bg), .5);

    /**
     * PANELS
     */
    --color-panel-bg: rgb(var(--pcolor-panel-bg));
    --color-panel-border: rgb(var(--pcolor-panel-header-bg));
    --color-panel-header-bg: rgb(var(--pcolor-panel-header-bg));
    --color-panel-header-bg-hover: rgb(171, 207, 244);
    --color-panel-header-text: rgb(var(--pcolor-panel-header-text));
    --color-panel-header-icon: rgb(var(--pcolor-panel-header-icon));
    --color-panel-info-header-bg: rgba(var(--pcolor-panel-bg), .5);
    --color-panel-inside-panel-header-text: var(--color-panel-header-bg);
    --color-sub-panel-header-text: rgb(var(--pcolor-panel-header-text));

    /**
     * PAGINATION
     */
    --color-pagination-bg: rgb(255, 255, 255);
    --color-pagination-text: rgb(184, 181, 181);
    --color-pagination-border: var(--color-ico-text);
    --color-pagination-disabled-bg: var(--color-ico-disabled-bg);
    --color-pagination-disabled-text: var(--color-ico-disabled-text);
    --color-pagination-active-text: var(--color-ico-text);
    --color-pagination-active-bg: var(--color-ico-bg);

    /**
     * SIDEBAR
     */
    --color-sidebar-bg: rgba(var(--pcolor-headers-bg), .3);
    --color-sidebar-tools-bg: rgba(var(--pcolor-headers-bg), .4);
    --color-sidebar-tools-btn-bg: var(--color-ico-bg);
    --color-sidebar-tools-btn-text: var(--color-ico-text);
    --color-sidebar-tools-btn-text-disabled: rgba(var(--pcolor-bg), .5);
    --color-sidebar-tools-btn-border: var(--color-ico-border);
    --color-sidebar-tools-btn-bg-hover: var(--color-ico-bg-hover);
    --color-sidebar-tools-btn-text-hover: var(--color-ico-text-hover);
    --color-sidebar-tools-btn-border-hover: var(--color-ico-border-hover);
    --color-sidebar-grouphead-bg: var(--color-panel-header-bg);
    --color-sidebar-grouphead-text: var(--color-panel-header-text);
    --color-sidebar-grouphead-border: var(--color-panel-border);
    --color-sidebar-groupbody-bg: var(--color-bg);
    --color-sidebar-groupbody-text: var(--color-text);
    --color-sidebar-groupbody-border: var(--color-panel-border);

    /**
     * FORM DL
     */
    --color-dl-placeholder: var(--color-menubar-bg);
    --color-dl-hover: rgba(var(--pcolor-context-menu), .8);

    /**
     * STATUS
     */
    --color-status-error: rgb(255, 31, 47);

    /**
     * PLANNING
     */
    --color-planning-text: var(--color-text);
    --color-planning-bg: white; 
    --color-planning-border: #F2F0F0;
    --color-planning-primary: #4285F4;
    --color-planning-secondary: var(--color-third);

    --color-planning-mid-day-line: var(--color-planning-header-bg);
    --color-planning-border-resource-right: var(--color-planning-border);
    --color-planning-week-end-days: rgba(242, 240, 240, .5);

    --color-planning-today-date-bg: var(--color-planning-primary);
    --color-planning-today-date-text: var(--color-light-text);
    
    --color-planning-header-bg: var(--color-planning-bg);
    --color-planning-header-text: var(--color-text);
    --color-planning-header-bg-hover: transparent;

    --color-planning-row-bg-odd:: var(--color-planning-bg);
    --color-planning-row-bg-even:: var(--color-planning-bg);
    --color-planning-row-bg-hover: rgba(66, 133, 244, 0.2);
    --color-planning-row-bg-border: var(--color-planning-border);
    --color-planning-row-text-hover: var(--color-planning-text);

    --color-planning-bar-text: black;
    --color-planning-bar-border: transparent;
    --color-planning-bar-tooltip-text: rgb(255, 255, 255);
    --color-planning-bar-tooltip-bg: rgb(85, 85, 85);

    --font-weight-planning-header: normal;
    --font-weight-planning-resources: normal;

    --text-transform-planning-header: unset;

    --padding-planning-dates: 8px;
    --padding-planning-resource: 16px;
    
    --font-size-planning-header: 12px;
    --font-size-planning-resource: 12px;

    --border-width-planning: 2px;

    /**
     * MAP
     */
    --color-map-point : rgb(0, 0, 255);

    /**
     * CHECKBOX
     */
    --color-checkbox-hover: var(--color-modal-info-bg-dark);
    --color-custom-checkbox-text: lightgray;

    /**
     * ICO & BTN COLORS
     */
    --btn-menu-fav-color: var(--color-toolbar-list-ico-tertiary);
    --btn-database-color: var(--color-toolbar-list-ico-secondary);
    --btn-info-color: var(--color-toolbar-list-ico-info);
    --btn-user-color: var(--color-toolbar-list-ico-warning);
    --btn-tools-color: var(--color-toolbar-list-ico-primary);
    --btn-support-color: var(--color-toolbar-list-ico-danger);
    --btn-home-color: var(--color-toolbar-list-ico-secondary);
    --btn-loading-color: var(--color-toolbar-list-ico-secondary);
    --btn-search-color: var(--color-toolbar-list-ico-secondary);
    --btn-print-color: var(--color-toolbar-list-ico-primary);
    --btn-others-color: var(--color-toolbar-list-ico-primary);

    /**
     * DYNAMIC TEMPLATE
     */
    --color-dl-bg: var(--color-light-bg);
    --color-dt-drop-position: #dad8d8b6;
    --color-dt-drop-active: #d5d3f4;
    --color-dt-cell-selected: #ccd2ff;
    --color-border-dt-column: #ff000047;

    /**
     * MODALS
     */
    --color-modal-bg: white;
    --color-modal-success-bg: rgb(32, 191, 85);
    --color-modal-success-bg-light: rgb(132, 234, 166);
    --color-modal-success-bg-dark: rgb(19, 115, 51);
    --color-modal-error-bg: rgb(242, 116, 116);
    --color-modal-error-bg-light: rgb(248, 185, 185);
    --color-modal-error-bg-dark: rgb(196, 18, 18);
    --color-modal-info-bg: var(--color-secondary);
    --color-modal-info-bg-light: rgb(195, 219, 229);
    --color-modal-info-bg-dark: rgb(61, 119, 143);
    --color-modal-warning-bg: rgb(247, 155, 76);
    --color-modal-warning-bg-light: rgb(251, 204, 165);
    --color-modal-warning-bg-dark: rgb(186, 90, 8);
    --color-modal-confirm-bg: var(--color-primary);
    --color-modal-confirm-bg-dark: rgb(15, 77, 156);
    --color-modal-confirm-bg-light: rgb(152, 192, 244);
    --color-modal-cancel-bg: rgb(199, 204, 201);

    /**
     * FILTERS
     */
    --cond-txt-light: rgb(255,255,255);                     /* White: #FFFFFF */
    --cond-txt-dark: rgb(0,0,0);                            /* Black: #000000 */
    --cond-color-form-bg: rgb(255,255,255);                 /* White: #FFFFFF */
    --cond-color-form-bg-label: rgb(245,245,245);           /* Light grey: #F5F5F5 */
    --cond-color-form-border: rgb(112,112,112);             /* Dark grey: #707070 */
    --cond-color-ico-delete: rgb(250,62,62);                /* Red: #FA3E3E */
    --cond-color-ico-swap-free: rgb(40,160,181);            /* Green: #28A0B5 */
    --cond-color-ico-swap-select:rgb(23,155,255);           /* Blue: #179BFF */
    --cond-color-ico-date: rgb(2,52,131);                   /* Very dark blue: #023483 */
    --cond-color-ico-date-cancel:rgb(129,69,242);           /* Purple: #8145F2 */
    --cond-color-separator-and: rgb(147,217,243);           /* Green: #93D9F3 */
    --cond-color-separator-or: rgb(147,169,243);            /* Purple: #93A9F3 */
    --cond-color-ops-bg-begins:rgb(69,137,242,0.3);         /* Dark blue: #4589F2 */
    --cond-color-ops-bg-not-begins:rgb(2,52,131,0.3);       /* Very dark blue: #023483 */
    --cond-color-ops-bg-contains:rgb(129,69,242,0.3);       /* Purple: #8145F2 */
    --cond-color-ops-bg-not-contains:rgb(255,98,0,0.3);     /* Orange: #FF6200 */
    --cond-color-ops-bg-in:rgb(129,69,242,0.3);             /* Purple: #8145F2 */
    --cond-color-ops-bg-not-in:rgb(255,191,170,0.3);        /* Light orange: #FFBFAA */
    --cond-color-ops-bg-empty:rgb(255,98,0,0.3);            /* Orange: #FF6200 */
    --cond-color-ops-bg-not-empty:rgb(69,137,242,0.3);      /* Dark blue: #4589F2 */
    --cond-color-ops-bg-sup:rgb(204,214,252,0.3);           /* Light blue: #CCD6FC */
    --cond-color-ops-bg-sup-equal:rgb(230,234,253,0.3);     /* Very light blue: #E6EAFD */
    --cond-color-ops-bg-inf:rgb(176,194,250,0.3);           /* Other light blue: #B0C2FA */
    --cond-color-ops-bg-inf-equal:rgb(183,208,250,0.3);     /* Middle blue: #B7D0FA */
    --cond-color-ops-bg-equal:rgb(230,234,253,0.3);         /* Very light blue: #E6EAFD */
    --cond-color-ops-bg-exclude:rgb(255,191,170,0.3);       /* Light orange: #FFBFAA */
    --cond-color-ops-bg-btw:rgb(129,69,242,0.3);            /* Purple: #8145F2 */
    --cond-color-ops-bg-not-btw:rgb(255,98,0,0.3);          /* Orange: #FF6200 */

    /**
     * ERRORS
     */
    --color-error-text: rgb(34, 34, 34);
    --color-error-text-code: rgb(74,89,111);
    --color-error-btn: rgb(134, 134, 134);
    --color-error-btn-bg: rgb(248, 248, 248);
    --color-error-btn-border: rgb(240,234,234);

    /**
     * PRINT FORM
     */
    --color-print-title: rgb(132,130,130);
    --color-print-btn-bg: rgb(248, 248, 248);
    --color-print-btn-hover: rgb(240,234,234);
    --color-print-border: rgb(240,234,234);
    --color-print-border-active: rgb(68, 138, 242);

    /**
     * MATERIAL INPUTS
     */
    --color-mat-input-label: rgb(119, 119, 119);
    --color-mat-input-bg: var(--color-input-bg);
    --color-mat-input-outline: var(--color-modal-confirm-bg);
    --color-mat-input-disabled: rgb(227, 227, 227, 0.7);
    --color-mat-input-disabled-bg: rgb(227, 227, 227, 0.3);
    --color-mat-input-disabled-txt: rgb(160, 160, 160);

    /**
     * SUPPORTS
     */
    --color-support-list-bg: rgb(225, 225, 225);
    --color-support-in-process: rgb(56, 128, 255);
    --color-support-pending: rgb(255, 196, 9);
    --color-support-ready-to-test: rgb(255, 165, 0);
    --color-support-validated-by-client: rgb(40, 186, 98);
    --color-support-solved: rgb(45, 211, 111);
    --color-support-pre-support: rgb(182, 149, 192);

    /**
     * UPLOAD
     */
    --color-upload-files-bg: rgb(242, 242, 242);

    /**
     * NEWS
     */
    --color-news-title: var(--color-menubar-bg);

    /**
     * MISSIONS
     */
    --color-missions-text: rgb(139, 139, 139);
    --color-missions-danger: rgb(255, 31, 90);
    --color-missions-default-bg: rgb(107, 153, 207);
    --color-missions-primary-bg: rgb(206, 156, 244);
}