[data-theme="test-1"] {
    /* body colors */
    --background-color: White;
    --foreground-color: rgb(242,243,244);
    --font-color: black;
    --alt-font-color: white;
    --red-font-color: red;
    --blue-font-color: blue;
    --green-font-color: green;
    --report-heading-font-color: #305A7C;
    --hyperlink-color: blue;
    --grt-hyperlink-color: blue;
    --site-header-color: red; /*#305A7C;*/
    --site-main-menu-color: black;
    --site-header-divider-color: rgb(100,149,237); /* circular dividers on login and report pages */
    --icon-color: #305A7C;
    --tab-top-color: rgb(242,243,244);
    --tab-bottom-color: rgb(161,202,241);
    --tab-selected-color: DarkBlue;
    --disabled-option-color: rgb(232,232,232); /*darkgray;*/
    /* menu colors */
    --page-menu-color: rgb(161,202,241);
    --page-menu-divider-color: white;
    --sub-menu-divider-color: darkblue;
    --drop-menu-color: rgb(221,238,255);
    --drop-menu-border-color: #305A7C;
    --case-menu-color: #305A7C;
    --case-menu-border-color: #305A7C;
    /* modal colors */
    --modal-back-color: rgb(235,245,255);
    --modal-border-color: white;
    --modal-header-color: rgb(161,202,241);
    /* control colors */
    --control-border-color: black; /*drop downs, text boxes, buttons*/
    --control-back-color: white; /*drop downs, text boxes*/
    --button-light-color: rgb(221,238,255); /* most buttons */
    --button-dark-color: rgb(188,218,246); /* most buttons */
    --execute-light-color: rgb(221,255,235); /* execute area colors */
    --execute-dark-color: rgb(188,246,198);
    --execute-darker-color: rgb(0,100,40);
    --case-button-light-color: rgb(131,173,207); /* case menu colors */
    --case-button-dark-color: rgb(67,126,175);
    --case-control-border-color: black;
    /* grid colors */
    --grid-row-color: White; /* all grids */
    --alt-grid-row-color: rgb(235,245,255);
    --grid-row-hover-color: rgb(161,202,241);
    --grid-border-color: rgb(203,203,203); /* grids on main pages */
    --alt-grid-border-color: gray; /* grids in controls e.g. dialogs */
    --grid-header-top-color: rgb(185,223,255);
    --grid-header-bottom-color: rgb(70,130,180);
    --grid-separator-color: rgb(221,238,255);
    --grid-highlight-color: rgb(222,184,135); /* used in cut comparison highlight */
    /* slider colors */
    --panel-color: rgb(67,126,175);
    --slider-color: rgb(131,173,207);
    /* tool page colors */
    --tool-sidebar-color: rgb(161,202,241);
    /* scrollbar colors */
    --scrollbar-background-color: #fcfcfc;
    --scrollbar-color: #8b8b8b;
    /* old jquery dialogs */
    /*--jq-dialog-back-color: #c0c0c0;*/
    /* main menu images */
    --menu-assays: url("/Images/assays-white.png");
    --menu-recut: url("/Images/recut-white.png");
    --menu-netback: url("/Images/netback-white.png");
    --menu-substitute: url("/Images/substitute-white.png");
    --menu-blendopt: url("/Images/blendopt-white.png");
    --menu-tools: url("/Images/tools-white.png");
    --menu-rest-api: url("/Images/rest-white.png");
    --menu-options: url("/Images/options-white.png");
    --menu-updates: url("/Images/updates-white.png");
    --menu-help: url("/Images/help-white.png");
    /* header images */
    --header-assays: url("/Images/assays-small-white.png");
    --header-recut: url("/Images/recut-small-white.png");
    --header-netback: url("/Images/netback-small-white.png");
    --header-substitute: url("/Images/substitute-small-white.png");
    --header-blendopt: url("/Images/blendopt-small-white.png");
    --header-tools: url("/Images/tools-small-white.png");
    --header-rest-api: url("/Images/rest-small-white.png");
    --header-options: url("/Images/options-small-white.png");
    /* slider images */
    --slider-left-right: url("/Images/scroll-left-right-black.png");
    --slider-up-down: url("/Images/scroll-up-down-black.png");
    /*login page*/
    --events-box-color: #3c5e98;
    --login-box-color: #597B96;
    --news-box-color: #2a5d81;
    --hsi-logo: url("/front/images/hsilogo-white.png");
}

[data-theme="test-2"] {
    /* body colors */
    --background-color: White;
    --foreground-color: rgb(242,243,244);
    --font-color: black;
    --alt-font-color: white;
    --red-font-color: red;
    --blue-font-color: blue;
    --green-font-color: green;
    --report-heading-font-color: #305A7C;
    --hyperlink-color: blue;
    --grt-hyperlink-color: blue;
    --site-header-color: yellow; /*#305A7C;*/
    --site-main-menu-color: black;
    --site-header-divider-color: rgb(100,149,237); /* circular dividers on login and report pages */
    --icon-color: #305A7C;
    --tab-top-color: rgb(242,243,244);
    --tab-bottom-color: rgb(161,202,241);
    --tab-selected-color: DarkBlue;
    --disabled-option-color: rgb(232,232,232); /*darkgray;*/
    /* menu colors */
    --page-menu-color: rgb(161,202,241);
    --page-menu-divider-color: white;
    --sub-menu-divider-color: darkblue;
    --drop-menu-color: rgb(221,238,255);
    --drop-menu-border-color: #305A7C;
    --case-menu-color: #305A7C;
    --case-menu-border-color: #305A7C;
    /* modal colors */
    --modal-back-color: rgb(235,245,255);
    --modal-border-color: white;
    --modal-header-color: rgb(161,202,241);
    /* control colors */
    --control-border-color: black; /*drop downs, text boxes, buttons*/
    --control-back-color: white; /*drop downs, text boxes*/
    --button-light-color: rgb(221,238,255); /* most buttons */
    --button-dark-color: rgb(188,218,246); /* most buttons */
    --execute-light-color: rgb(221,255,235); /* execute area colors */
    --execute-dark-color: rgb(188,246,198);
    --execute-darker-color: rgb(0,100,40);
    --case-button-light-color: rgb(131,173,207); /* case menu colors */
    --case-button-dark-color: rgb(67,126,175);
    --case-control-border-color: black;
    /* grid colors */
    --grid-row-color: White; /* all grids */
    --alt-grid-row-color: rgb(235,245,255);
    --grid-row-hover-color: rgb(161,202,241);
    --grid-border-color: rgb(203,203,203); /* grids on main pages */
    --alt-grid-border-color: gray; /* grids in controls e.g. dialogs */
    --grid-header-top-color: rgb(185,223,255);
    --grid-header-bottom-color: rgb(70,130,180);
    --grid-separator-color: rgb(221,238,255);
    --grid-highlight-color: rgb(222,184,135); /* used in cut comparison highlight */
    /* slider colors */
    --panel-color: rgb(67,126,175);
    --slider-color: rgb(131,173,207);
    /* tool page colors */
    --tool-sidebar-color: rgb(161,202,241);
    /* scrollbar colors */
    --scrollbar-background-color: #fcfcfc;
    --scrollbar-color: #8b8b8b;
    /* old jquery dialogs */
    /*--jq-dialog-back-color: #c0c0c0;*/
    /* main menu images */
    --menu-assays: url("/Images/assays-white.png");
    --menu-recut: url("/Images/recut-white.png");
    --menu-netback: url("/Images/netback-white.png");
    --menu-substitute: url("/Images/substitute-white.png");
    --menu-blendopt: url("/Images/blendopt-white.png");
    --menu-tools: url("/Images/tools-white.png");
    --menu-rest-api: url("/Images/rest-white.png");
    --menu-options: url("/Images/options-white.png");
    --menu-updates: url("/Images/updates-white.png");
    --menu-help: url("/Images/help-white.png");
    /* header images */
    --header-assays: url("/Images/assays-small-white.png");
    --header-recut: url("/Images/recut-small-white.png");
    --header-netback: url("/Images/netback-small-white.png");
    --header-substitute: url("/Images/substitute-small-white.png");
    --header-blendopt: url("/Images/blendopt-small-white.png");
    --header-tools: url("/Images/tools-small-white.png");
    --header-rest-api: url("/Images/rest-small-white.png");
    --header-options: url("/Images/options-small-white.png");
    /* slider images */
    --slider-left-right: url("/Images/scroll-left-right-black.png");
    --slider-up-down: url("/Images/scroll-up-down-black.png");
    /*login page*/
    --events-box-color: #3c5e98;
    --login-box-color: #597B96;
    --news-box-color: #2a5d81;
    --hsi-logo: url("/front/images/hsilogo-white.png");
}

[data-theme="test-3"] {
    /* body colors */
    --background-color: White;
    --foreground-color: rgb(242,243,244);
    --font-color: black;
    --alt-font-color: white;
    --red-font-color: red;
    --blue-font-color: blue;
    --green-font-color: green;
    --report-heading-font-color: #305A7C;
    --hyperlink-color: blue;
    --grt-hyperlink-color: blue;
    --site-header-color: blue; /*#305A7C;*/
    --site-main-menu-color: black;
    --site-header-divider-color: rgb(100,149,237); /* circular dividers on login and report pages */
    --icon-color: #305A7C;
    --tab-top-color: rgb(242,243,244);
    --tab-bottom-color: rgb(161,202,241);
    --tab-selected-color: DarkBlue;
    --disabled-option-color: rgb(232,232,232); /*darkgray;*/
    /* menu colors */
    --page-menu-color: rgb(161,202,241);
    --page-menu-divider-color: white;
    --sub-menu-divider-color: darkblue;
    --drop-menu-color: rgb(221,238,255);
    --drop-menu-border-color: #305A7C;
    --case-menu-color: #305A7C;
    --case-menu-border-color: #305A7C;
    /* modal colors */
    --modal-back-color: rgb(235,245,255);
    --modal-border-color: white;
    --modal-header-color: rgb(161,202,241);
    /* control colors */
    --control-border-color: black; /*drop downs, text boxes, buttons*/
    --control-back-color: white; /*drop downs, text boxes*/
    --button-light-color: rgb(221,238,255); /* most buttons */
    --button-dark-color: rgb(188,218,246); /* most buttons */
    --execute-light-color: rgb(221,255,235); /* execute area colors */
    --execute-dark-color: rgb(188,246,198);
    --execute-darker-color: rgb(0,100,40);
    --case-button-light-color: rgb(131,173,207); /* case menu colors */
    --case-button-dark-color: rgb(67,126,175);
    --case-control-border-color: black;
    /* grid colors */
    --grid-row-color: White; /* all grids */
    --alt-grid-row-color: rgb(235,245,255);
    --grid-row-hover-color: rgb(161,202,241);
    --grid-border-color: rgb(203,203,203); /* grids on main pages */
    --alt-grid-border-color: gray; /* grids in controls e.g. dialogs */
    --grid-header-top-color: rgb(185,223,255);
    --grid-header-bottom-color: rgb(70,130,180);
    --grid-separator-color: rgb(221,238,255);
    --grid-highlight-color: rgb(222,184,135); /* used in cut comparison highlight */
    /* slider colors */
    --panel-color: rgb(67,126,175);
    --slider-color: rgb(131,173,207);
    /* tool page colors */
    --tool-sidebar-color: rgb(161,202,241);
    /* scrollbar colors */
    --scrollbar-background-color: #fcfcfc;
    --scrollbar-color: #8b8b8b;
    /* old jquery dialogs */
    /*--jq-dialog-back-color: #c0c0c0;*/
    /* main menu images */
    --menu-assays: url("/Images/assays-white.png");
    --menu-recut: url("/Images/recut-white.png");
    --menu-netback: url("/Images/netback-white.png");
    --menu-substitute: url("/Images/substitute-white.png");
    --menu-blendopt: url("/Images/blendopt-white.png");
    --menu-tools: url("/Images/tools-white.png");
    --menu-rest-api: url("/Images/rest-white.png");
    --menu-options: url("/Images/options-white.png");
    --menu-updates: url("/Images/updates-white.png");
    --menu-help: url("/Images/help-white.png");
    /* header images */
    --header-assays: url("/Images/assays-small-white.png");
    --header-recut: url("/Images/recut-small-white.png");
    --header-netback: url("/Images/netback-small-white.png");
    --header-substitute: url("/Images/substitute-small-white.png");
    --header-blendopt: url("/Images/blendopt-small-white.png");
    --header-tools: url("/Images/tools-small-white.png");
    --header-rest-api: url("/Images/rest-small-white.png");
    --header-options: url("/Images/options-small-white.png");
    /* slider images */
    --slider-left-right: url("/Images/scroll-left-right-black.png");
    --slider-up-down: url("/Images/scroll-up-down-black.png");
    /*login page*/
    --events-box-color: #3c5e98;
    --login-box-color: #597B96;
    --news-box-color: #2a5d81;
    --hsi-logo: url("/front/images/hsilogo-white.png");
}