:root {
    /*default*/
    /*mainpanel*/
    --mainpanel-header-bgclr: #EFEFEF;
    --mainpanel-header-txtclr: #808080;
    --mainpanel-content-bgclr: #EFEFEF;
    /*popup*/
    /*background color*/
    --bgclr-default: #EFEFEF;
    --bgclr-mainpanel: #E5E5E5;
    --bgclr-mainpanel-sec: #CECECE;
    --bgclr-mainpanel-disabled: #555555;
    --bgclr-popup: #BEBEBE;
    /*block*/
    --block-bcgclr: #FFFFFF;
    --block-bcgclr-sec: #262626;
    /*block calendar*/
    --block-cal-bgclr: #3B3B3B;
    --block-cal-borclr: #3C3C3C;
    /*block group*/
    --blockgroup-bcgclr: #4F4F4F; /*rgba(87, 87, 87, 0.2); /*#575757 in 15% transparency*/
    --blockgroup-borclr: #3E3E3E; /*rgba(62, 62, 62, 1); /*#575757 in 15% transparency*/
    /*border*/
    --border-clr: #FFFFFF;
    /*button btn*/
    --btn-bgclr-mainpanel: #F4F4F4;
    --btn-bgclr-popup: #393939;
    --btn-bgclr-mainpanel-disabled: #D6D3D3;
    --btn-bgclr-popup-disabled: #2C2C2C;
    /*button group*/
    --btn-group-bgclr: #242424;
    --btn-group-borclr: #242424;
    /*calendar cal*/
    --cal-bgclr-mainpanel: #DBDBDB;
    --cal-bgclr-popup: #141414;
    /*checkbox*/
    --checkbox-bgclr-active: var(--clr-green);
    --checkbox-bgclr-inactive: #343434;
    --checkbox-border: #242424;
    --checkbox-check: #242424;
    --checkbox-check-inactive: #4E4D4D;
    /*context menu*/
    --context-menu-bgclr: #121212;
    --context-menu-border: #030303;
    /*dividing line*/
    --dividingline-clr-mainpanel: #3B3B3B;
    --dividingline-clr-popup: #020202;
    /*filter*/
    --filter-bgclr: #636954;
    /*icon button*/
    --icon-btn-bgclr-mainpanel: #242424;
    --icon-btn-bgclr-mainpanel-disable: #454545;
    --icon-btn-bgclr-popup: #000000;
    --icon-btn-bgclr-popup-disable: #2B2B2B;
    /*input field vnosno polje za login login */
    --input-bgclr-mainpanel: #343434;
    --input-bgclr-popup: #141414;
    --input-bgclr-mainpanel-disabled: #343434;
    --input-bgclr-popup-disabled: #141414;
    --input-focus: var(--clr-green); /*#URHVBARVE*/
    --input-searcher-bgclr: #1C1C1C;
    /*toolbar buttons*/
    --toolbar-btn-bcgclr: #343434;
    --toolbar-btn-borclr: #242424;
    --toolbar-btn-clr: #4D4D4D;
    /*notification ntfcn*/
    --notif-bgclr-popup-info: #B9EBFF;
    --notif-txtclr-popup-info: #495B62;
    --notif-bgclr-popup-warning: #FFF0AD;
    --notif-txtclr-popup-warning: #6C5C00;
    --notif-bgclr-popup-error: #FFC3C1;
    --notif-txtclr-popup-error: #6E5555;
    /*overlay*/
    --overlay-bgclr: #00000066;
    /*progressbar*/
    --progressbar-bgclr: #343434;
    --progressbar-bgclr-disabled: #212121;
    --progressbar-border: #212121;
    --progressbar-slider-thumb-border: #DFC75C;
    /*scrollbar*/
    --scrollbar-bgclr-mainpanel: #434343;
    --scrollbar-bgclr-popup: #141414;
    --scrollbar-clr: #808080;
    --scrollbar-clr-light: #808080;
    /*select menu slctmnu*/
    --select-menu-bgclr-default: #242424;
    --select-menu-bgclr-popup: #000000;
    /*shadow*/
    --shadow-clr: #00000042;
    /*tab button*/
    --tab-btn-bgclr: #C7C7C7;
    --tab-btn-bgclr-selected: #FFFFFF;
    /*tab div - sklop za tab buttone*/
    --tab-div-bgclr: #CECECE;
    --tab-div-borclr: #C7C7C7;
    /*table*/
    --table-bgclr: #4E4E4E;
    --table-borclr: #2F2F2F;
    /*text txt*/
    --txtclr-default: #272727;
    --txtclr-dark: #272727;
    --txtclr-muted: #808080;
    --txtclr-disabled: #B1AFAF;
    /*toggle button*/
    --toggle-btn-bgclr: #434343;
    --toggle-btn-clr-off: #808080;
    /*switch button*/
    --switch-btn-bgclr: #343434;
    --switch-btn-clr: #808080;
    /*worktime panel*/
    --worktime-panel-mainbuttonmenu-bgclr: #343434;
    --worktime-panel-mainmenu-bgclr: #383838;
}

.dark {
    /*mainpanel*/
    --mainpanel-header-bgclr: #404040;
    --mainpanel-header-txtclr: #808080;
    --mainpanel-content-bgclr: #4E4E4E;
    /*background color*/
    --bgclr-default: #404040;
    --bgclr-mainpanel: #3E3E3E;
    --bgclr-mainpanel-sec: #292929;
    --bgclr-mainpanel-disabled: #555555;
    --bgclr-popup: #1F1F1F;
    /*block*/
    --block-bcgclr: #404040;
    --block-bcgclr-sec: #262626;
    /*block calendar*/
    --block-cal-bgclr: #3B3B3B;
    --block-cal-borclr: #3C3C3C;
    /*block group*/
    --blockgroup-bcgclr: #3B3B3B;
    --blockgroup-borclr: #3C3C3C;
    /*border*/
    --border-clr: #2f2f2f;
    /*button btn*/
    --btn-bgclr-mainpanel: #4D4D4D;
    --btn-bgclr-popup: #393939;
    --btn-bgclr-mainpanel-disabled: #454545;
    --btn-bgclr-popup-disabled: #2C2C2C;
    /*button group*/
    --btn-group-bgclr: #242424;
    --btn-group-borclr: #242424;
    /*calendar cal*/
    --cal-bgclr-mainpanel: #383838;
    --cal-bgclr-popup: #141414;
    /*checkbox*/
    --checkbox-bgclr-active: var(--clr-green);
    --checkbox-bgclr-inactive: #343434;
    --checkbox-border: #242424;
    --checkbox-check: #242424;
    --checkbox-check-inactive: #4E4D4D;
    /*context menu*/
    --context-menu-bgclr: #121212;
    --context-menu-border: #030303;
    /*dividing line*/
    --dividingline-clr-mainpanel: #3B3B3B;
    --dividingline-clr-popup: #020202;
    /*filter*/
    --filter-bgclr: #636954;
    /*icon button*/
    --icon-btn-bgclr-mainpanel: #242424;
    --icon-btn-bgclr-mainpanel-disable: #454545;
    --icon-btn-bgclr-popup: #000000;
    --icon-btn-bgclr-popup-disable: #2B2B2B;
    /*input field vnosno polje za login login */
    --input-bgclr-mainpanel: #343434;
    --input-bgclr-popup: #141414;
    --input-bgclr-mainpanel-disabled: #343434;
    --input-bgclr-popup-disabled: #141414;
    --input-focus: var(--clr-green); /*#URHVBARVE*/
    --input-searcher-bgclr: #343434;
    /*toolbar buttons*/
    --toolbar-btn-bcgclr: #343434;
    --toolbar-btn-borclr: #242424;
    --toolbar-btn-clr: #808080;
    /*notification ntfcn*/
    --notif-bgclr-popup-info: #B9EBFF;
    --notif-txtclr-popup-info: #495B62;
    --notif-bgclr-popup-warning: #FFF0AD;
    --notif-txtclr-popup-warning: #6C5C00;
    --notif-bgclr-popup-error: #FFC3C1;
    --notif-txtclr-popup-error: #6E5555;
    /*overlay*/
    --overlay-bgclr: #00000066;
    /*progressbar*/
    --progressbar-bgclr: #343434;
    --progressbar-bgclr-disabled: #212121;
    --progressbar-border: #212121;
    --progressbar-slider-thumb-border: #DFC75C;
    --progressbar-slider-default-clr: #212121;
    --progressbar-slider-unfinished-clr: #d9c867;
    --progressbar-slider-finished-clr: #9FC637;
    /*scrollbar*/
    --scrollbar-bgclr-mainpanel: #434343;
    --scrollbar-bgclr-popup: #141414;
    --scrollbar-clr: #808080;
    --scrollbar-clr-light: #808080;
    /*select menu slctmnu*/
    --select-menu-bgclr-mainpanel: #242424;
    --select-menu-bgclr-popup: #000000;
    /*shadow*/
    --shadow-clr: #00000042;
    /*tab button*/
    --tab-btn-bgclr: #414141;
    --tab-btn-bgclr-selected: #262626;
    /*tab div - sklop za tab buttone*/
    --tab-div-bgclr: #343434;
    --tab-div-borclr: #2C2C2C;
    /*table*/
    --table-bgclr: #4E4E4E;
    --table-borclr: #2F2F2F;
    /*text txt*/
    --txtclr-default: #C7C7C7;
    --txtclr-dark: #272727;
    --txtclr-muted: #808080;
    --txtclr-disabled: #656565;
    /*toggle button*/
    --toggle-btn-bgclr: #434343;
    --toggle-btn-clr-off: #808080;
    /*switch button*/
    --switch-btn-bgclr: #343434;
    --switch-btn-clr: #808080;
    /*worktime panel*/
    --worktime-panel-mainbuttonmenu-bgclr: #343434;
    --worktime-panel-mainmenu-bgclr: #383838;
}

/*generalno*/
body {
    /*color*/
    --clr-black: #000;
    --clr-blue: #0099D1;
    --clr-green: #9FC637;
    --clr-green-rgb: 159, 198, 55; /*rgb ker se rabi opacity*/
    --clr-green-dark: #636954; /*disabled*/
    --clr-green-pale: #B3BF94;
    --clr-grey: #656565; /*???*/
    --clr-red: #F1504E;
    --clr-white: #FFF;
    --clr-yellow: #FFF0AD;
    --clr-yellow-rgb: 255, 240, 173;    
}

/*
povezava Urša - Erpo
gradnik             com-block           block /item
delovna površina						workarea
meni				com-mainpanel 		mainpanel - default
meni 2                                  mainpanel-sec
popup				com-popup 			popup

obstaja več vrst button-ov
veliki gumbi 				button      	    1	    default ok
veliki gumbi široki							    1	    default ok
gumb glavnih ekranov		toolbar button	    2	    toolbar button ok
gumb z ikono				icon button		    3 2? 	icon button
gumb z besedo								    3 2?	icon button
tekstovni gumb								    4	    background: transparent; ok
gumb na vnosnem polju		tab button		    5	    tab button ok
*/

body, com-mainpanel {
    /*background color*/
    --bgclr: var(--bgclr-mainpanel);
    --bgclr-sec: var(--bgclr-mainpanel-sec);
    --bgclr-disabled: var(--bgclr-mainpanel-disabled);
    /*button btn*/
    --btn-bgclr: var(--btn-bgclr-mainpanel);
    --btn-bgclr-disabled: #454545;
    /*calendar*/
    --cal-bgclr: var(--cal-bgclr-mainpanel);
    /*dividing line*/
    --dividingline-clr: var(--dividingline-clr-mainpanel);
    /*icon button*/
    --icon-btn-bgclr: var(--icon-btn-bgclr-mainpanel);
    --icon-btn-bgclr-disabled: var(--icon-btn-bgclr-mainpanel-disable);
    /*input*/
    --input-bgclr: var(--input-bgclr-mainpanel);
    /*scrollbar*/
    --scrollbar-bgclr: var(--scrollbar-bgclr-mainpanel);
    /*select*/
    --select-menu-bgclr: var(--select-menu-bgclr-mainpanel);
}
com-popup {
    /*background color*/
    --bgclr: var(--bgclr-popup);
    --bgclr-sec: var(--bgclr-popup);
    --bgclr-disabled: var(--bgclr-mainpanel-disabled);
    /*button btn*/
    --btn-bgclr: var(--btn-bgclr-popup);
    --btn-bgclr-disabled: #2C2C2C;
    /*calendar*/
    --cal-bgclr: var(--cal-bgclr-popup);
    /*dividing line*/
    --dividingline-clr: var(--dividingline-clr-popup);
    /*icon button*/
    --icon-btn-bgclr: var(--icon-btn-bgclr-popup);
    --icon-btn-bgclr-disabled: var(--icon-btn-bgclr-popup-disable);
    /*input*/
    --input-bgclr: var(--input-bgclr-popup);
    /*scrollbar*/
    --scrollbar-bgclr: var(--scrollbar-bgclr-popup);
    /*select*/
    --select-menu-bgclr: var(--select-menu-bgclr-popup);
}

body {
    --mainBackground: #3E3E3E;
    --lightBackground: #4D4D4D;
    --darkerBackground: #343434;
    /**/
    --rihterWhite: #ffffff;
    /**/
    --rihterGreen: #A0C638;
    --rihterGreenDisabled: #636954;
    /**/
    --rihterYellow: #E0C75D;
    /**/
    --rihterLightLetters: #C7C7C7;
    --rihterLighterLetters: #808080;
    --rihterDarkerLetters: #767676;
    --rihterDarkLetters: #272727;
    /**/
    --rihterRed: #FF4D4D;
    /**/
    --rihterLightGrey: #484848;
    --rihterGrey: #404040;
    --rihterBlack: #242424;
    --rihterDark: #292929;
    --rihterDarker: #191919;
    /**/
    --rihterBlue: #0099D1;
    --rihterBlueDisabled: #0099D1;
    /*Meni poglavja_Mobile_Svetla tema*/
    --rihterMobile_LightBackground: #EAEAEA;
    /*Ploskev gumba na meniju poglavja_Mobile_Neizbran_Enabled_Svetla tema*/
    --rihterButtonUnselected: #F4F2F2;
    /*Ploskev vnosnega polja in negativen prostor elementov_Mobile_Svetla tema*/
    --rihterSearchDiv: #E6E6E6;
    /*Ozadje vsebine_Mobile_Svetla tema*/
    --rihterMobileLight: #F5F5F5;
    --rihterKorporativna: #9FC637;
}