:root {
  --background-color: white;  
  --color:#363636;
  --alert-color:red;
  --info-color:#FF6600;

  --siteheader-background-color:white;

  --headerline-color:white;
  --headerline-background-color:#535353;
  --headerline-selection-color:#FF6600;

  --leftnav-background-color:#EEEFF1;

  --btn-color: #FF6600;  
  --btn-hover-color: var(--btn-color);
  --btn-background-color: #FFEFE5;  
  --btn-hover-background-color: var(--btn-background-color);
  --btn-border-color: var(--btn-color);
 
  --tbl-border-color:#999999;
  --tblhead-background-color: #EEE8AA;  
  --tblhead-color: var(--color);  
  --tbltitle-background-color: #FF8C00;
  --tbltitle-color: white;    
  --tblrow-highlight-background-color: #FFAFA5;
  --tblrow-clickable-background-color: #CCFFCC;  
  --tblrow-even-background-color: #E8E8E8;
   
  --label-color:var(--color);
  --label-background-color:var(--tblhead-background-color);

  --popupwin-frame-background-color:#535353;
  --popupwin-frame-color:white;
  --popupwin-background-color:#FEFFF1;
  --popupwin-background-color-semitransparent:#FEFFF1CC;

  --popupmenu-background-color:#FDFFDF;
  --popupmenu-highlight-background-color:#CCFFCC;

  --fld-border-color:#999999;
  --togglecontrol-on-background-color:#FF9248;
  --togglecontrol-off-background-color:lightgray;
  --audit-yes-color:#FF6600;
  --audit-no-color:#5C5C5C;

  --tile-color: white;  
  --tile-background-color: var(--btn-background-color);  
  --tile-background-hover-color: var(--btn-color); 

}

body,select {background-color:var(--background-color)}
body,tr,ul,ol,li,select,input,textarea,optgroup,A:link,A:visited,.eventHeader select,.eventHeader option,.norm 
 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: var(--color);font-weight:normal;font-style:normal;text-decoration:none}	
select,input[type=text],input[type=search],textarea,.fieldPDFtd,.flddis,.pdfdis, .pdfdis option { border: 1px solid var(--fld-border-color);}
td, th, table {border-color: var(--tbl-border-color);} 
table {border-collapse: collapse;border-style:none;} 
optgroup {font-style:italic;color:var(--info-color)!important}
optgroup option {font-style:normal;color:var(--color)}
fieldset {border-radius:.5rem}
legend {font-weight: bold;}
/*input[type=checkbox] {accent-color: #AAAAFF}*/

/* icons */
/*img.btt, img.bttt, img.bttm, img.topi, input[type=image], .dtree img, .ic  { filter:saturate(75%)}*/

/* https://codepen.io/sosuke/pen/Pjoqqp */
/* icons color normal*/
img[f='0'], input[type=image][f='0'] {filter: invert(55%) sepia(49%) saturate(5765%) hue-rotate(359deg) brightness(100%) contrast(108%);} /* for monochrome */
/* img[f='0c'], input[type=image][f='0c'] { } */  /* for colored icons */
/* icons color highlighted*/
img[f='1'], input[type=image][f='1'] {filter: saturate(0%) invert(11%) sepia(99%) saturate(7500%) hue-rotate(4deg) brightness(99%) contrast(111%);} /* for monochrome */
img[f='1c'], input[type=image][f='1c'] {filter: saturate(0%) invert(11%) sepia(99%) saturate(7500%) hue-rotate(4deg) brightness(99%) contrast(111%);} /* for colored icons */
/* icons color grayed*/
img[f='2'], input[type=image][f='2'] {filter: invert(43%) sepia(8%) saturate(0%) hue-rotate(272deg) brightness(92%) contrast(99%);} /* for monochrome */
img[f='2c'], input[type=image][f='2c'] {filter: grayscale(100%) } /* for colored icons */

/* Color should be the same as body color  */
.norm {color: var(--color) !important;font-weight: normal !important;background-color: transparent !important}	
/* background color for some elements, should be the same as body background color */
.bkcol, .bkcol TD {background-color:var(--background-color)!important}

/* warnings */
.alertClass, .alertClass A:link, .alertClass A:visited, .alertClass TD,.alertClass label, .a, .a A:link, .a A:visited, .a TD, .alertClassNormal, .alertClassNormal A:link, .alertClassNormal A:visited, .m 
 {color: var(--alert-color)!important}
.alertClass, .alertClass A:link, .alertClass A:visited, .a, .a A:link, .a A:visited 
 {font-weight: bold;font-family: "Arial Unicode MS", "Lucida Sans Unicode", "Microsoft Sans Serif", Arial, Helvetica !important}
.alertClass TD, .a TD { font-weight: normal }

/* info messages */
.infoClass, .infoClassNormal {color: var(--info-color)!important;}
.infoClass { font-weight: bolder}

/* buttons: .btnbg - icon selector,  input[type=button][ibt], .bttest -  buttons on design, defaults */
.btn, .btnhl, input[type=button][ibt], .bttest  {
  font-size: 11px; 
  font-weight: bold;
  padding: 2px 4px 2px 4px;
  border-radius:0.25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
.btn, .btnbg, input[type=button][ibt], .bttest {
 background-color: var(--btn-background-color); 
 color: var(--btn-color); 
 border: 1px solid var(--btn-border-color)
}
.btnbg, .orfr, .gbtn {
 border: 1px solid var(--btn-border-color)!important
}
.gbtn[f='0c']  {
 background-color:var(--btn-background-color)
}
@media (hover: hover) {
 .btn:hover, input[type=button][ibt]:hover,.bttest:hover {
   background-color: var(--btn-hover-background-color);
   color: var(--btn-hover-color); 
 }
}

.btnhl { /*inverse colors rel. to btn*/ 
 color: var(--btn-background-color);
 background-color: var(--btn-color);
 border: 1px solid var(--btn-background-color);
} 
.btn[disabled] {background-color: #ebebe4 !important; border-color: #cccccc !important; color: Gray !important; cursor: auto !important} /* disabled buttons */ 
/* buttons at the top of inspection screen */
.eventPageNavigation .btn
{
 margin-bottom:4px;
}
/* table's title - a line above or below table  for non-design tables */
.tbltitle {background-color:var(--tbltitle-background-color);color:var(--tbltitle-color);font-weight: bold;text-align:center} 
/* table's header & footer for non-design tables */
.tblfooter, tblfooter A:link, .tblfooter A:visited {
  background-color:var(--tblhead-background-color);
  color:var(--tblhead-color);
  padding:3px; 
  border-bottom:solid 2px var(--tbl-border-color);
  border-top:solid 2px var(--tbl-border-color);
  border-left:none;
  border-right:none; 
}
.tblhead,.tblhead A:link,.tblhead A:visited,.tblhead TD, .tblhead1 {
 border:solid 1px var(--tbl-border-color);
 background-color:var(--tblhead-background-color);
 color:var(--color);
} 
.tblhead,.tblhead A:link,.tblhead A:visited,.tblhead TD, .tblhead1,.thh>td,.thh>th  {
 font-weight:bold!important;
} 
.tblhead {text-align: center}
.tblhead input:not([type=button]), .tblhead select { background-color:var(--tblhead-background-color);} 
.tblhead input:not([type=button]) {text-align: left;font-weight:normal!important}
/*table tr:first-child.tblhead>td, table tr:first-child.tblhead>th, .thh>th, .thh>td {padding-top:5px;padding-bottom:5px}*/

/* table row highlight */
.highlightRow {background-color: var(--tblrow-highlight-background-color)!important}
/* even rows in tables*/
.evenRow, .oddeven0>tbody>tr:nth-child(2n+0), .oddeven1>tbody>tr:nth-child(2n+1) {background-color:var(--tblrow-even-background-color)}
.evenRow {border:none; border-collapse:separate;} 
/* clickable row in tables */
.rowClickable:hover, .r:hover, .r span:hover, .r span:hover, .rh:hover,.rh span:hover, .rowcl, .tr>tbody>tr:hover, .trh>tbody>tr:hover, .trh>tbody>tr span:hover, .trh>tbody>tr:hover>td
{
 background-color:var(--tblrow-clickable-background-color)!important;
}

/* embedded table default header */ 
.embeddedTable TH, .embeddedTable .etd {background-color: var(--tblhead-background-color)} 
/* user filter in embedded tables */
.flt { border:solid 1px var(--fld-border-color); background-color:Transparent!important }

/* highlighted first cell in inspections list */
.bh {background-color:var(--tblrow-highlight-background-color)}

/* labels */
.label, .labelLeft, .label span, .labelLeft span, .label select[disabled] { 
 background-color:var(--label-background-color);
 color:var(--label-color);
 border-bottom:solid 0px black;
 text-align:left;
 font-weight:normal;
 font-style:normal;
 white-space:nowrap
}
.label select, .labelLeft select {border-style:none}

/* modal popup windows - iframe style */
.modalwin {border-color:var(--popupwin-frame-background-color)}
/* modal popup windows - header style */
.hcaption, .hcaption span, .hcaption1 {background-color:var(--popupwin-frame-background-color);color:var(--popupwin-frame-color);font-weight:bold}
/* modal popup windows */
.popupwin, .modalwin, .mwbkgr, .mwbkgr span, .mwbkgr1  {background-color: var(--popupwin-background-color)}
.mwbkgro {background-color:var(--popupwin-background-color-semitransparent)}

/* popup menu */
.pmnu, .ddmenu  {background-color: var(--popupmenu-background-color);} 
.pmnu { border:outset 2px #FFFFFF; border-radius:6px; padding:2px 0px 2px 0px;} 
.pmnu button:focus { background-color:var(--popupmenu-highlight-background-color)!important; }   
.pmnu button {color:var(--color)}

/* highlight label for field containing errors in inspections */
.errorField {color: #C00000!important}

/* "Please wait" small window */
.wait, .waitn {background-color:#97CEFA;color:#000000;border-color:#0000FF;border-style:double; border-width:3px } 

/* progress bar filled area */
.pbselected {background-color:#0000FF;color:#FFFFFF}  

/* calendar */
.calendar td, .calendar th {
 border-color:var(--tbl-border-color)!important
}
.calendar .today
{
 color: var(--btn-background-color)!important;
 background-color:var(--btn-color)!important;
 font-weight:bold!important;
 border-width:1px!important;
 border-style:solid!important;
} 
.weekend {color: #AA0000!important} 

/*site header screen part */
.siteHeader {background-color:var(--siteheader-background-color)} 
.headerText {padding-bottom:12px;vertical-align:bottom;white-space:nowrap;font-weight:bold}

/* top main menu line */
.headers 
{
 background-color:var(--headerline-background-color);
 color:var(--headerline-color);
 padding-left:5px;
 white-space:nowrap;
 padding-top:5px;
 padding-bottom:1px;
}
.headers li
{
 list-style-type:none;
 display:block;
 float:left;
 border-right:1px solid var(--headerline-selection-color);
 padding-left:5px;
 padding-right:4px;
 margin-right:0px;
}

.headers li, .headers span {background-color:transparent;color:white} /* top menu tabs */ 
.headers li:hover, .headers span:hover {background-color:var(--headerline-selection-color)}
.headers li, .headers span {cursor:pointer}
.headers li.selected, .headers li.selected span {background-color:transparent;color:var(--headerline-selection-color);}

/* left pages vertical navigation bar */
.subNav {padding:0px}
.subNav ,.subNav li {background-color:var(--leftnav-background-color)}
.subNav li:hover {background-color:var(--btn-color)}
.subNav li.selected:hover {background-color:var(--leftnav-background-color)}
.subNav li.selected, .subNav li.selected span {color:var(--btn-color);font-weight:normal;}
.subNav li, .subNav li span {color:var(--color);font-weight:normal;}
.subNav ul
{
 display :block;
 margin-left:-2px;
 margin-top:0px; 
 padding-left:0px; 
}
.subNav li
{	  
 text-align:left;
 list-style-type:none;
 padding:6px;
 cursor:pointer;
}

/* header at inspection screen */
.eventHeader {color: #C00000!important;font-size:16px;font-weight:bold} 
.eventHeader select{font-size:12px;font-weight:bold}
.eventHeader option{font-size:12px;font-weight:normal}

/* main query head text */
.qhead {font-size:16px;font-weight:bold ;}

/* report */
.rephead TD { font-weight:bold; background-color:#EEEEEE }
.repbr { font-weight:bold; background-color:#EEEEEE }
.reptot, .reptot span {font-weight:bold!important; background-color:#EEEEEE }
.neg {color:red} /* negative values highlight */

/* toggle type control defaults */
input:checked + .tgb { background-color:var(--togglecontrol-on-background-color)!important }
input:not(:checked) + .tgb { background-color:var(--togglecontrol-off-background-color)!important }

/* audit trail icons */
.nlog5 {color:var(--audit-no-color)!important;border-color:var(--audit-no-color)!important}
.nlog6 {color:var(--audit-yes-color)!important;border-color:var(--audit-yes-color)!important}

/* red background for some icons in designer */
.redback {background-color:#C00000}

/* highlighted tree node */
.treenodeHighlight, .treenodeHighlightBold {color: var(--info-color)}

/* drop zone for file upload */
.fborderstatic, .fborderanimated { border:2px solid var(--info-color); }
.fborderanimated {
  background-image: linear-gradient(90deg, var(--info-color) 50%, transparent 50%), linear-gradient(90deg, var(--info-color) 50%, transparent 50%), linear-gradient(0deg, var(--info-color) 50%, transparent 50%), linear-gradient(0deg, var(--info-color) 50%, transparent 50%);
  background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
}

/* dropdowns in role access matrixes */
.ddnoaccess {background-color: #FEA49E!important}
.ddreadonly {background-color: #FEF994!important}
.ddfull {background-color: #8EFF82!important}

/* field code on the field selection screen */
.falias {color:darkblue }

/* highlight field background for field containing errors in ref. tables */
.invalidField {background-color: #FF7777!important}

/* field palette in designer */
.palet {background-color: #F3E6E6}

/* event class types */
.evcl0, .evcl1 {color: #ff6600!important}
.evcl2, .evcl3 {color: #0033CC!important}
.evcl5 {color: #006600!important}
.evcl4 {color: #993333!important}
.evcl6,.evcl7 {color: #993333!important}
.evcl {font-weight:bolder}

/* PDA screen imitation */
.screens {background-color:#D4FFFF}

/* Test mode warning */
.to {
 position:relative;
 top:5px;
 padding-right:10px;
 font-size:30px;
 font-weight:bold;
 color:red;
 vertical-align:bottom;
 text-shadow: 
 -1px -1px 0px #ffffff,
  1px  1px 0px #ffffff,
 -1px  1px 0px #ffffff,
  1px -1px 0px #ffffff,
  2px -2px 6px #cccccc,
 -2px -2px 6px #cccccc,
  2px  2px 6px #cccccc,
 -2px  2px 6px #cccccc,
  2px  0px 6px #cccccc,
 -2px  0px 6px #cccccc,
  0px  2px 6px #cccccc,
  0px -2px 6px #cccccc;
}

/* Duplicate field warning */
.dupfld {background-color:red!important;color:yellow!important;font-weight:bold!important;padding:2px 4px 2px 4px!important;border:3px double yellow!important}

/* Used fields in design palette */
.usf {color:#999999}

/* hot query */
.qpan {
  border:1px solid gray;
  border-radius:10px;
  padding:5px;
}

/* Anonymous window */
.anonWin {

}
/* Anonymous header */
.anonHead, .anonHead table {
 background-color:#ff6600;
}
.anonHead table {
 border-bottom:1px solid black;
}
.anonHead td {padding:0px;}
/* Anonymous header language dropdown */
.anonHead select {
 font-size:14px;
 font-weight:bolder;
 background-color:transparent; 
 color:white;
 border-color:white; 
 border-radius:15px;
 padding:3px 3px 3px 6px;
 margin-left:30px;
}
.anonHead option  {
 background-color:white;
 color:black;
 }
/* Anonymous header login icon */
#ulogin {
 margin:0 15px 0 15px;
 filter: invert(100%); /* https://isotropic.co/tool/hex-color-to-css-filter/ */ 
}

/* Login screen */
.lbackground {
 position: absolute;
 top:0;
 right:0;
 bottom: 0;
 left: 0;
 background-image: url(/pics/static/BGlogin.jpg);
 background-size: cover;
 background-position: center;
}
.llogo {
 position: absolute;
 top: 5px;
 left: 5px;
}
.lver {
 position: absolute;
 top: 10px;
 right: 5px;
}
.ldiv {
 position: absolute;
 width: min(90vw, 370px);
 background-color: var(--popupwin-background-color);
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 border-radius: 10px;
 border: 1px solid var(--popupwin-frame-background-color);
 box-shadow: 8px 8px 6px	#909090;
 padding: 30px 30px;
}
.ldiv input, .ldiv select, .llbl {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
}
.ldiv input[type=text], .ldiv input[type=password], .ldiv select {
 box-shadow: inset 0 0 0 1000px var(--popupwin-background-color) !important;
 border: 1px solid var(--fld-border-color);
 border-radius: 4px;
}
.ldiv input, .ldiv select {
 padding: 6px;
}
.ldiv input:not([type=checkbox]) {
 width: 100%;
}
.llbl {
 display: block;
 font-weight: bold;
 padding-bottom: 5px;
}
.lfld, .flex {
 display: flex;
}
.lfldbox {
 margin-top: 10px;
}
.passil {
 float: right;
 top: -25px;
 left: -5px;
}
#m_mc_brecover, #m_mc_brecover[disabled] {
 color:var(--btn-color);
 border-style: none;
 background-color: transparent !important;
 padding: 0;
 text-decoration: underline;
}
.llnk {
 text-decoration: underline;
}
.ldiv .mfa input:not([type=checkbox]) {
 width: 45%
}
.ldiv .mfa input[type=submit] {
 float: right
}
/* Login screen toggle control */
#m_mc_DeviceVersion {display:none}
.tgl-app {
 width: 150px;
 height: 10px;
 margin-left:auto;
 margin-bottom: 30px;
 display: flex;   
}  
.tgl-content {
 margin: auto;
 width: 100%;
 height:20px;
 transform: translateY(-36px);
}
.tgl-content label {
  display: block
 }
.ltoggle {
 position: absolute;
 width: 50%;
 background-color: #fff;
 box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
 transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tgl_lbl {
 width: 90%;
 background-color: rgba(0, 0, 0, .1);
 border-radius: 100px;
 position: relative;
 margin: 2.3rem 0 6rem 10px;
 cursor: pointer;
}
.tgl_lbl, .ltoggle {
 height: 1.8rem;
 border-radius: 100px;
}
.tgl-pc {
 width: 60px;
 height: 33px;
 background-image: url(/pics/static/laptop.svg);
 background-size: cover;
 filter: saturate(100%);
}
[type="checkbox"]:checked + .tgl-app .tgl-pc {
 background-image: url(/pics/static/laptop.svg);
 background-size: cover;
 filter: saturate(1%);
}
.tgl-mob {
 width: 60px;
 height: 33px;
 background-image: url(/pics/static/phone.svg);
 background-size: cover;
 filter: saturate(1%);
}
[type="checkbox"]:checked + .tgl-app .tgl-mob {
 background-image: url(/pics/static/phone.svg);
 background-size: cover;
 filter: saturate(100%);
}
[type="checkbox"]:checked + .tgl-app .ltoggle {
 transform: translateX(100%);
}


/*obsolete
.LegendHead {color:#C00000}
*/

/*obsolete?
.btns, .btnsf {background-color: var(--btn-background-color) !important; color: var(--btn-color) !important;}
.btns, .btnsf { border: 1px solid var(--btn-border-color) !important } 
.btns {font-size: 12px;padding: 1px;}
.btnsf {font-size: 12px;padding: 0px;}
*/