:root {
    /* PALETTE */
    --gray0 : #ffffff;
    --gray1 : #f5f5f5;
    --gray2 : #e5e5e5;
    --gray3 : #dfdfdf;
    --gray4 : #dddddd;
    --gray5 : #d6d6d6;
    --gray6 : #c5c5c5;
    --gray7 : #acacac;
    --gray8 : #aaaaaa;
    --gray9 : #999999;
    --gray10: #7d7d7d;
    --gray11: #555555;
    --gray12: #2b2b2b;
    --gray13: #000000;
    --alpha-gray: #ffffffaa;
    
    --orange   : #efc281;
    --blue     : #94dbff;
    --green    : #9fff9f;
    --lightblue: #c3dfec;
    --lite-red       : #ff5050;
    --lite-lightred  : #ffa8a8;
    --lite-green     : #50ff59;
    --lite-lightgreen: #b7ffa8;

    --bootstrap-default         : #ffffff;
    --bootstrap-default-color   : var(--gray12);
    --bootstrap-default-border  : var(--gray7);
    --bootstrap-primary         : var(--primary-site-color);
    --bootstrap-primary-color   : var(--auxiliar-text-color);
    --bootstrap-primary-disabled: var(--gray10);
    --bootstrap-success         : #47a447;
    --bootstrap-success-color   : #ffffff;
    --bootstrap-success-disabled: #6ba16b;
    --bootstrap-danger          : #d2322d;
    --bootstrap-danger-color    : #ffffff;
    --bootstrap-danger-disabled : #d1635f;
    --bootstrap-warning         : #ed9c28;
    --bootstrap-warning-color   : #ffffff;
    --bootstrap-warning-disabled: #ebb262;
    --bootstrap-info            : #5bc0de;
    --bootstrap-info-color      : #ffffff;
    --bootstrap-info-disabled   : #94ccdd;

    --alert-default-background  : #ebebeb;
    --alert-default-color       : #6c6c6c;
    --alert-info-background     : #d9edf7;
    --alert-info-color          : #31708f;
    --alert-warning-background  : #fcf8e3;
    --alert-warning-color       : #8a6d3b;
    --alert-danger-background   : #f2dede;
    --alert-danger-color        : #a94442;
    --alert-success-background  : #dff0d8;
    --alert-success-color       : #3c763d;


    /* BASE */
    --content-color         : var(--gray10);
    --content-background    : var(--gray1);
    --page-header-color     : var(--auxiliar-text-color);
    --page-header-background: var(--primary-site-color);
    --page-header-border    : var(--secondary-site-color);
    
    --scrollbar-track      : var(--gray8);
    --scrollbar-thumb      : var(--gray10);
    --scrollbar-thumb-hover: var(--gray11);

    --hr-color: var(--gray9);


    /* FORM */
    --form-control-color              : var(--gray13);
    --form-control-border             : var(--gray4);
    --form-control-background         : var(--gray0);
    --form-control-disabled-color     : var(--gray9);
    --form-control-disabled-background: var(--gray0);
    --form-control-input-placeholder  : var(--gray10);
    --select-color                    : var(--gray12);
    --select-background               : var(--gray1);
    --select-unabled-color            : var(--gray10);
    --select-group-addon-color        : var(--gray11);
    --select-group-addon-border       : var(--gray6);
    --select-group-addon-background   : var(--gray2);


    /* SIDEBAR */
    --sidebar-title             : var(--page-header-color);
    --sidebar-toggle-color      : var(--secondary-site-color);
    --sidebar-toggle-color-hover: var(--page-header-color);
    --sidebar-toggle-background : var(--primary-site-color);

    --sidebar-menu-color           : var(--gray12);
    --sidebar-menu-background      : var(--gray2);
    --sidebar-menu-color-hover     : var(--gray13);
    --sidebar-menu-background-hover: var(--gray6);

    --sidebar-menu-divisor       : var(--gray8);
    --sidebar-submenu-background : var(--gray5);
    --sidebar-menu-disabled-color: var(--gray9);


    /* USERBOX */
    --userbox-role-color     : var(--secondary-site-color);
    --userbox-open-role-color: var(--gray7);
    --userbox-open-name-color: var(--gray13);

    --userbox-open-menu-color           : var(--gray10);
    --userbox-open-menu-bakcground      : var(--gray0);
    --userbox-open-menu-color-hover     : var(--auxiliar-text-color);
    --userbox-open-menu-background-hover: var(--primary-site-color);


    /* PANELS */
    --panel-heading-color     : var(--gray12);
    --panel-heading-border    : var(--gray1);
    --panel-heading-background: var(--gray2);

    --panel-body-color     : var(--gray11);
    --panel-body-color2    : var(--gray13);
    --panel-body-border    : var(--gray2);
    --panel-body-background: var(--gray0);

    --panel-tab-color            : var(--gray12);
    --panel-tab-border           : var(--gray4);
    --panel-tab-background       : var(--gray1);
    --panel-tab-active-border    : var(--gray11);
    --panel-tab-active-background: var(--gray0);


    /* JSTREE */
    --jstree-hover-color        : var(--primary-site-color);
    --jstree-hover-background   : var(--gray2);
    --jstree-selected-background: var(--lightblue);
    --jstree-disabled-color     : var(--gray6);


    /* CHARTS */
    --chart-border              : var(--gray5);
    --chart-background          : var(--gray0);
    --chart-plot-lines          : var(--gray4);
    --chart-plot-background     : var(--gray0);
    --chart-label-color         : var(--gray12);
    --chart-label-color-hover   : var(--primary-site-color);
    --chart-label-color-inactive: var(--secondary-site-color);


    /* PLUGINS */
    --plugin-border-wip      : var(--orange);
    --plugin-border-active   : var(--green);
    --plugin-border-installed: var(--blue);


    /* ADMIN */
    --admin-show-btn-color      : var(--gray7);
    --admin-show-btn-color-hover: var(--secondary-site-color);


    /* CALIBRATION */
    --calibration-rendermessage-error-color       : var(--lite-red);
    --calibration-rendermessage-error-background  : var(--lite-lightred);
    --calibration-rendermessage-success-color     : var(--lite-green);
    --calibration-rendermessage-success-background: var(--lite-lightgreen);
    
    --calibration-graph-border: var(--gray4);

    --calibration-table-border      : var(--gray5);
    --calibration-table-delete-hover: var(--gray13);


    /* LAYOUTS */
    --panel-head-background      : var(--primary-site-color);
    --panel-border-color         : var(--secondary-site-color);
    --table-header-icon-color    : var(--alpha-gray);
    --table-row-color-hover      : var(--gray13);
    --table-row-background       : var(--gray5);
    --table-addrow-background    : var(--secondary-site-color);
    --panel-featured-color       : var(--primary-site-color);
    --panel-featured-border-color: var(--primary-site-color);


    /* REGISTER */
    --register-background           : var(--gray0);
    --register-header-color         : var(--gray11);
    --register-header-background    : var(--gray0);
    --register-header-selected-color: var(--gray0);


    /* COST VIEWER */
    --cost_viewer-card-green  : var(--bootstrap-success);
    --cost_viewer-card-yellow : var(--bootstrap-warning);
    --cost_viewer-card-red    : var(--bootstrap-danger);
    --cost_viewer-card-gray1  : var(--gray1);
    --cost_viewer-card-gray2  : var(--gray5);
    --cost_viewer-card-opacity: 15%;


    /* FLATPICKR */
    --flatpickr-color                  : var(--gray13);
    --flatpickr-background             : var(--gray0);
    --flatpickr-input-color            : var(--gray13);
    --flatpickr-arrow-hover            : var(--gray10);
    --flatpickr-weekday-color          : var(--gray11);
    --flatpickr-day-color              : var(--gray13);
    --flatpickr-day-hover-color        : var(--gray13);
    --flatpickr-day-hover-background   : var(--gray4);
    --flatpickr-day-disabled-color     : var(--gray8);
    --flatpickr-day-selected-color     : var(--gray0);
    --flatpickr-day-selected-border    : var(--gray8);
    --flatpickr-day-selected-background: var(--gray8);
    --flatpickr-today-border           : var(--gray12);
    --flatpickr-today-hover-color      : var(--gray0);
    --flatpickr-today-hover-background : var(--gray9);
}



[data-theme="dark"] {
    /* PALETTE */
    --dark0 : #000000;
    --dark1 : #141313;
    --dark2 : #171717;
    --dark3 : #1c1c1f;
    --dark4 : #242427;
    --dark5 : #2f2f33;
    --dark6 : #37373b;
    --white0: #ffffff;
    --white1: #d6d6d6;
    --white2: #b1b1b1;
    --white3: #6d6d6d;

    --bootstrap-default         : var(--dark2);
    --bootstrap-default-color   : var(--white1);
    --bootstrap-default-border  : var(--dark6);
    --bootstrap-primary         : var(--primary-site-color);
    --bootstrap-primary-color   : var(--auxiliar-text-color);
    --bootstrap-primary-disabled: var(--dark4);
    --bootstrap-success         : #4b814b;
    --bootstrap-success-color   : #ffffff;
    --bootstrap-success-disabled: #284428;
    --bootstrap-danger          : #a12e2a;
    --bootstrap-danger-color    : #ffffff;
    --bootstrap-danger-disabled : #691e1b;
    --bootstrap-warning         : #b1782a;
    --bootstrap-warning-color   : #ffffff;
    --bootstrap-warning-disabled: #744f1b;
    --bootstrap-info            : #3e8ea7;
    --bootstrap-info-color      : #ffffff;
    --bootstrap-info-disabled   : #275968;

    --alert-default-background  : #505050;
    --alert-default-color       : #d6d6d6;
    --alert-info-background     : #263740;
    --alert-info-color          : #83d6ff;
    --alert-warning-background  : #58553d;
    --alert-warning-color       : #ffd487;
    --alert-danger-background   : #543b3b;
    --alert-danger-color        : #ff8684;
    --alert-success-background  : #46563f;
    --alert-success-color       : #8cff8e;


    /* BASE */
    --content-color         : var(--white0);
    --content-background    : var(--dark4);
    --page-header-color     : var(--white0);
    --page-header-background: var(--dark1);
    --page-header-border    : var(--primary-site-color);

    --scrollbar-track      : var(--dark3);
    --scrollbar-thumb      : var(--dark2);
    --scrollbar-thumb-hover: var(--dark1);

    --hr-color: var(--white3);
    

    /* FORM */
    --form-control-color              : var(--white1);
    --form-control-border             : var(--dark6);
    --form-control-background         : var(--dark5);
    --form-control-disabled-color     : var(--dark6);
    --form-control-disabled-background: var(--dark3);
    --form-control-input-placeholder  : var(--white3);
    --select-color                    : var(--white1);
    --select-background               : var(--dark4);
    --select-unabled-color            : var(--white3);
    --select-group-addon-color        : var(--white1);
    --select-group-addon-border       : var(--dark6);
    --select-group-addon-background   : var(--dark2);


    /* SIDEBAR */
    --sidebar-title             : var(--primary-site-color);
    --sidebar-toggle-color      : var(--white0);
    --sidebar-toggle-background : var(--dark2);
    --sidebar-toggle-color-hover: var(--primary-site-color);
    
    --sidebar-menu-color           : var(--white2);
    --sidebar-menu-background      : var(--dark3);
    --sidebar-menu-color-hover     : var(--white0);
    --sidebar-menu-background-hover: var(--dark4);

    --sidebar-menu-divisor       : var(--primary-site-color);
    --sidebar-submenu-background : var(--dark2);
    --sidebar-menu-disabled-color: var(--dark6);


    /* USERBOX */
    --userbox-role-color     : var(--secondary-site-color);
    --userbox-open-role-color: var(--secondary-site-color);
    --userbox-open-name-color: var(--white0);

    --userbox-open-menu-color           : var(--white1);
    --userbox-open-menu-bakcground      : var(--dark2);
    --userbox-open-menu-color-hover     : var(--auxiliar-text-color);
    --userbox-open-menu-background-hover: var(--primary-site-color);


    /* PANELS */
    --panel-heading-color     : var(--white0);
    --panel-heading-border    : var(--dark4);
    --panel-heading-background: var(--dark2);

    --panel-body-border    : var(--dark4);
    --panel-body-color     : var(--white1);
    --panel-body-color2    : var(--white1);
    --panel-body-background: var(--dark3);

    --panel-tab-color            : var(--white1);
    --panel-tab-border           : var(--dark5);
    --panel-tab-background       : var(--dark4);
    --panel-tab-active-border    : var(--dark1);
    --panel-tab-active-background: var(--dark3);


    /* JSTREE */
    --jstree-hover-color        : var(--primary-site-color);
    --jstree-hover-background   : var(--dark4);
    --jstree-selected-background: var(--dark5);
    --jstree-disabled-color     : var(--white3);


    /* CHARTS */
    --chart-border              : var(--dark5);
    --chart-background          : var(--dark3);
    --chart-plot-lines          : var(--white3);
    --chart-plot-background     : var(--dark3);
    --chart-label-color         : var(--white1);
    --chart-label-color-hover   : var(--secondary-site-color);
    --chart-label-color-inactive: var(--white3);


    /* CALIBRATION */
    --calibration-rendermessage-error-color       : var(--dark1);
    --calibration-rendermessage-error-background  : var(--lite-red);
    --calibration-rendermessage-success-color     : var(--dark1);
    --calibration-rendermessage-success-background: var(--lite-green);
    
    --calibration-graph-border: var(--dark4);

    --calibration-table-border      : var(--dark2);
    --calibration-table-delete-hover: var(--primary-site-color);


    /* LAYOUTS */
    --panel-head-background      : var(--dark4);
    --panel-border-color         : var(--secondary-site-color);
    --table-header-icon-color    : var(--alpha-gray);
    --table-row-color-hover      : var(--dark0);
    --table-row-background       : var(--dark5);
    --table-addrow-background    : var(--dark6);
    --panel-featured-border-color: var(--secondary-site-color);
    --panel-featured-color       : var(--secondary-site-color);


    /* REGISTER */
    --register-background           : var(--dark3);
    --register-header-color         : var(--white1);
    --register-header-background    : var(--dark3);
    --register-header-selected-color: var(--white0);


    /* COST VIEWER */
    --cost_viewer-card-green  : var(--bootstrap-success);
    --cost_viewer-card-yellow : var(--bootstrap-warning);
    --cost_viewer-card-red    : var(--bootstrap-danger);
    --cost_viewer-card-gray1  : var(--dark5);
    --cost_viewer-card-gray2  : var(--dark6);
    --cost_viewer-card-opacity: 6%;


    /* FLATPICKR */
    --flatpickr-color                  : var(--white1);
    --flatpickr-background             : var(--dark2);
    --flatpickr-input-color            : var(--white1);
    --flatpickr-arrow-hover            : var(--white0);
    --flatpickr-weekday-color          : var(--white3);
    --flatpickr-day-color              : var(--white1);
    --flatpickr-day-hover-color        : var(--white1);
    --flatpickr-day-hover-background   : var(--dark4);
    --flatpickr-day-disabled-color     : var(--dark6);
    --flatpickr-day-selected-color     : var(--dark1);
    --flatpickr-day-selected-border    : var(--dark6);
    --flatpickr-day-selected-background: var(--white3);
    --flatpickr-today-border           : var(--white1);
    --flatpickr-today-hover-color      : var(--dark1);
    --flatpickr-today-hover-background : var(--white2);
}