/* Dark mode */
@media screen and (prefers-color-scheme:dark){
:root {--font-color:#fff;--body-bg:#202020}
/* erp/admin home styles */
.dark_mode {display:inline-block}
.bright_mode {display:none}
.dk_invert,.wsspacer .nav_toggle {filter:invert(100%)}
.light_invert {filter:invert(0%)}
body{background-color:#262626!important;color:#fff}
div.ws{background:#3d3c3c;border-bottom:#262626 3px solid}
.search-results{background-color:#202020}
.filter td{background-color:#181818}
a,.aslink,.menu a,.menu a:hover{color:#2597d4}
.msg_area{background-color:#272727}
.tb0x a{background-image:url(img/x_0.svg)}

/*filter values*/
td.tb1 a,td.tb1 a:link,td.tb1 a:active,td.tb1 a:visited{color:#fff;}
td.tb0 a,td.tb0 a:link,td.tb0 a:active,td.tb0 a:visited{color:#fff;}

/* pivot table */
td.tb_0{background-image:url(img/tab/left_off_dark.gif)}
td.tb_1{background-image:url(img/tab/left_on_dark.gif)}
td.tb1_{background-image:url(img/tab/right_on_dark.gif)}
td.tb0_{background-image:url(img/tab/right_off_dark.gif)}
td.tb10{background-image:url(img/tab/mid_onoff_dark.gif)}
td.tb01{background-image:url(img/tab/mid_offon_dark.gif)}
td.tb00{background-image:url(img/tab/mid_offoff_dark.gif)}
td.tb1,td.tb1x{background-image:url(img/tab/line_on_dark.gif)}
td.tb0,td.tb0x{background-image:url(img/tab/line_off_dark.gif)}
.tabsline{background-image:url(img/tab/line_dark.gif)}
.tabslineon{text-align:center;background-image:url(img/tab/line_on_dark.gif)}
.tabslineoff{background-image:url(img/tab/line_off_dark.gif)}
.top_bg{background-image:url(img/tab/line_dark.gif)}
div.nb{background-image:url(img/tab/line_dark.gif)}
.menu li a.mi {color:#fff}

/* pivot table colors */
.ph1{background-color:rgba(0, 48, 106, 0.765)!important;color:#fff}
.pr1{background-color:rgba(0, 0, 0, 0.627)!important;color:#fff}
.ph2{background-color:rgba(0, 70, 155, 0.6)!important}
.ph23{background-color:rgba(0, 60, 129, 0.518)!important}
.pr2{background-color:rgba(0, 0, 0, 0.357)!important}
.ph3{background-color:rgba(0, 73, 153, 0.337)!important}
.ph34{background-color:rgba(0, 55, 128, 0.31)!important}
.pr3{background-color:rgba(0, 0, 0, 0.255)!important}

div.nb a{color:#fff!important}

INPUT,TEXTAREA,SELECT{background-color:#060606;padding: 1px; /*used to reconstruct default border look in dark mode*/
border:1px solid #5b5b5b;color:#fff}
.home-search{background-color:#181818!important} /*make home search as dark as other inputs; find cleaner way*/
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #181818 inset!important}
input:-webkit-autofill{-webkit-text-fill-color:#fff!important}
input[type="image"]{background-color:transparent;border:none} /* using this to not show borders around images */
.slml{filter:invert(100%)}
textarea:disabled, input:disabled, select:disabled{background-color:#303030}
P, TEXTAREA, TD TEXTAREA {color:#fff}
input.button,button.button,#tiles a,#pos-btns button,.toolbar input,.toolbar button,#OnScreenKbd .btn{
    box-shadow:2px 2px 2px -2px rgb(0 0 0 / 100%);color:#fff;background-color:#262626;border-color:#505050;
    background-image:linear-gradient(357.5deg,rgba(0,0,0,0.01) 0%, rgba(255,255,255,0.25) 100%)}
INPUT.button:hover,button.button:hover,INPUT.action_btn:hover,#tiles a:hover,.toolbar input:hover,.toolbar button:hover,#pos-btns button:hover{
    box-shadow:4px 4px 4px -1px rgb(0 0 0 / 70%);
    background-image:-ms-linear-gradient(357.5deg,rgba(0,0,0,0.01) 0%, rgba(255,255,255,0.3) 100%);
    background-image:linear-gradient(357.5deg,rgba(0,0,0,0.01) 0%, rgba(255,255,255,0.3) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr='hsl(0,0%,25%)',endcolorstr='hsl(0,0%,50%)',GradientType=0);}
input.button:hover,button.button:hover{box-shadow:0px 0px 0px 0px rgb(0 0 0 / 100%)}
input.filter{background-color:#060606}
.pivot-search{background-color:#181818!important;border:1px solid #5b5b5b!important}
.menu-cb:checked ~ .menu{background-color:#181818;color:#fff}
.menu li a.mi {color:#FFF}
.menu li a.mi:hover {color:#FFF;background-color:#47484D}

.shop_price{color:#C00}

/* table styles */
.tbl {background-color:rgba(24,24,24,0.9)}
.r1{background-color:rgba(36,36,36,0.7)}
.r2{background-color:rgba(13,13,13,0.7)}
table.pivot{background-color:#181818}
.select-all-cells img{height:24px;border:1px solid #666;border-radius:5px;filter:invert(1);background-color:rgb(238,238,238);padding:2px}
.select-all-cells img:hover {background-color:hsl(0, 0%, 78.3%)}
.select-all-cells img:active {background-color:hsl(0, 0%, 68.3%)}
.pc0, .pc1{color:#fff}
div#tcal table{background:#181818}
div#tcal table.ctrl th{background:#181818;color:#fff}
TABLE.light th{color:#fff!important}
#table_timetracking{background: #5b5b5b}
.bg_input{background:#181818}
#table_timetracking .gray{color:#9d9d9d}
.workday{color:#202020;}
.workday input{color:#202020!important}

.navGroup{background-color:rgba(255,255,255,0.12)}
.subNavGroup,.subNavGroupA{background-color:rgba(255,255,255,0.06)}

/* colors */
.purple{color:#C05CD6!important}
.bg_green {background-color:rgba(0,255,0,0.16)}

tr.filtered td:first-of-type {color:#C05CD6}

.red{color:#ff4a4a!important}
.ui-autocomplete{color:#fff!important;background-color:#202020!important} /*!important cause of jquery.css*/
.grp_green_title{background-color:#00c000!important}
#stats {background-color:#424242;border-color:#5b5b5b}

.accordion,.accordion-area {background-color:rgba(0,0,0,0.25)}

/* tabs and links*/
div.tb0{background-color:#333;border:1px solid rgba(0,0,0,.30)!important}
div.tb0:hover{background-color:#1c1a1a}
div.tb1{background-color:#262626}
.tb1 a:not(.tbx),.tb1 a:link:not(.tbx),.tb1 a:active:not(.tbx),.tb1 a:visited:not(.tbx),.tb0 a:not(.tbx),.tb0 a:link:not(.tbx),.tb0 a:active:not(.tbx),.tb0 a:visited:not(.tbx){color:#e6e6e6}

.tbx:hover,.tbx:active {background-image:url(img/x_1.svg)}

/*POS*/
#cartContainer{background-color:#181818!important}
#footer{background-color:#202020!important}
.footerButtonsStatus input:not([disabled]){background: linear-gradient(to bottom,#424242 0%,#181818 100%)}
#givenValue,#returnValue{background-color:#181818!important}
.dropdown{background-color:#060606!important}
#overlayNumBlock{background-color:rgba(255, 255, 255, 0.3)!important}
#post-btn-container button {background-color:#181818; -webkit-box-shadow: 2px 2px 5px 0px rgba(32,32,32,0.7)!important;-moz-box-shadow: 2px 2px 5px 0px rgba(32,32,32,0.7)!important;box-shadow: 2px 2px 5px 0px rgba(32,32,32,0.7)!important;}
input.search{background-color:#181818}
#cartContainer{background-color:#313131!important}

/*POSSchema*/
#receipt,#cartTotal{background-color:#181818!important}
.ratioContainer input.functionButton{background:linear-gradient(to bottom,#424242 0%,#181818 100%)}
.ratioContainer input.functionButton:hover{background:linear-gradient(to top,#424242 0%,#181818 100%)}

/*ckEditor*/
.cke_dialog_body, .cke_dialog_contents, .cke_dialog_footer{background:#202020!important}
select option{color:#fff!important;background:#202020!important}
.cke_reset_all, .cke_reset_all * {color:#fff!important}
#image-browser-textwrapper{color:#fff}
textarea.cke_dialog_ui_input_textarea,.cke_reset_all input[type="text"]{background-color:#181818!important; color:#fff!important}
a.cke_dialog_tab_selected {background-color:#404040!important}
a.cke_dialog_tab_selected:hover {background: #181818!important}
a.cke_dialog_tab {background-image:none!important}
.cke_dialog_ui_html{color:#fff!important}
.cke_source{color:#000!important}
.cke_textarea_inline p{color:#fff!important}
CODE,CODE PRE{color:white}
}