@media print{
    body>div.header, .navbar, .mainArea>h2, .mainArea>a, .mainArea button, .mainArea .printIcon,
    .mainArea .undoArrow, .mainArea .magGlass, .dontPrint, .countText {display:none !important;}
    /*! important makes display:none work for floating items and */
    .mainArea{
    	position: relative;
    	top:-6em;/*header height:3.9em + navbar height:2em*/
    }
    .mainArea input, .mainArea select, .mainArea textarea{
    	border:none;
    	outline: none;
    }
    .mainArea select {appearance: none;}
    .mainArea textarea {resize: none;}
    ::placeholder{color:transparent}
}
/*GENERAL*/
* {
padding: 0;
margin: 0;
}
html {
font-size: 16px;
font-family: 'Verdana', 'Arial', sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
}
/*overlay*/
#overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
}
/*HEADER*/
.header {
position: fixed;
top: 0;
width:100%;
height: 3.9em;
background-color: rgba(255,239,213,1.0);/*PapayaWhip*/
z-index:100;
border-bottom: 2px solid MediumSeaGreen;/*USED TO BE 1 px*/
display:flex;
justify-content:space-between;
align-items:center;
}
.Dlogo{height: 3.9em;}
.clientName{
color: rgba(60,179,113,1.0);/*MediumSeaGreen*/
font-size: 2.5rem;
}
.clientLogo{
height: 3.8em;
margin-right: 1em;
}

/*NAVIGATION BAR*/
.navbar{
position: fixed;
top: 3.9em;
width: 100%;
height:2.0em;
background-color: rgba(255,239,213,1.0);/*PapayaWhip*/
border-bottom: 1px solid MediumSeaGreen;
text-align: center;
z-index: 99;
}
.topRow{
margin-top:0.2em;
display: inline-block;
vertical-align:top;
color: rgba(60,179,113,1.0);/*MediumSeaGreen*/
font-size:1.1rem;
text-align:center;
width:7.5em;
height: 1.3em;
padding-top:0.2em;
}
.topRow:hover{cursor: pointer;}
.quadWrapper{
display:none;
overflow-y:auto;
overflow-x:hidden;
}
.quadrant{
color: rgba(60,179,113,1.0);/*MediumSeaGreen*/
background-color: rgba(255,239,213,1.0);/*PapayaWhip*/
font-size:1rem;
text-align:left;
text-decoration: underline;
text-decoration-color: rgba(60,179,113,1.0);
border-right: 1px solid MediumSeaGreen;
border-bottom: 1px solid MediumSeaGreen;
border-left: 1px solid MediumSeaGreen;
padding:0.5em 0.3em 0 0.3em;
cursor:default;
}
.clusters{font-size:0.9rem;}
.clusters > li:hover{
background-color: rgba(60,179,113,1.0);/*MediumSeaGreen*/
cursor: pointer;
font-style: italic;
}
.clusters > li:hover > a{color: rgba(255,239,213,1.0);}
.clusters > li > a{
color: rgba(60,179,113,1.0);
display: inline-block;/* this and with:100% width makes full li clickable, also removes textdecoration from cluster*/
width:100%;/*this and display:inline-block makes full li clickable*/
white-space: pre-wrap;
padding-left:0.3em;
}
/*BUTTON COLORS*/
.grayBtn, .greyBtn{
text-align: center;
border: none;
border-radius:0.2em;
background: linear-gradient(White, lightGray );
}
.grayBtn:hover, .greyBtn:hover{
cursor: pointer;
background: rgba(128,128,128,1.0);/*Gray*/
color: white;
}
.redBtn{
color: white;
border: none;
border-radius:0.2em;
text-align: center;
background: rgba(178,34,34,0.7);/*crimson*/
}
.redBtn:hover{
cursor: pointer;
background: rgba(255,0,0,1.0);/*red*/
}
.greenBtn{
border: none;
border-radius:0.2em;
text-align: center;
background: linear-gradient(White, limeGreen );
color: rgba(105,105,105,1.0);/*dimgray*/
}
.greenBtn:hover{
cursor: pointer;
background: rgba(0,255,0,1.0);/*lime*/
color: black;
}
.blueBtn{
text-align: center;
border: none;
border-radius:0.25em;
background: linear-gradient(DodgerBlue, White);
}
.blueBtn:hover{
cursor: pointer;
background: rgba(30,144,255,1.0);/*dodgerBlue*/
color: white;
}

.QBBtn{
text-align: center;
border: none;
border-radius:0.25em;
background: rgb(83, 183, 0); /*QB green #53b700*/
color: white;
font-weight: bold;
}
.QBBtn:hover{
cursor: pointer;
background: rgb(44, 160, 28);/*QB green #2ca01c*/
}
.QBBtn::after{content: '\21F2';}

a span{
color: black;
text-decoration: none;
}
a span:hover{font-style: normal;}
/*BUTTON SIZES*/
.MaspanBtn{
padding: 0.1em 0.1em 0.1em 0.1em;
font-size: 1rem;
}
.SBtn{
padding: 0.1em;
font-size: 0.8rem;
}
.MBtn{
padding: 0.1em;
font-size: 1rem;
}
.LBtn{
padding: 0.2em;
font-size: 1.2rem;
}
/*LINKS OF SORTS*/
a:link, a:visited, a:active{
color: rgb(0,0,238);/*blue*/
text-decoration: none;
}
a:hover{
text-decoration: none;
font-style: italic;
}
.hotKey{
color: blue;
cursor: pointer;
}
.hotKey:hover{font-style: italic;}
/*SYMBOLS OR ICONS IF YOU WILL*/
.showMorePlus{
color: blue;
cursor: pointer;
}
.showMorePlus::before{content: '\271A';}
.magGlass{
display: inline-block;/*for transform to work inline-block needed*/
font-size: 1.5rem;
font-style: normal;
font-weight: 100;
cursor: pointer;
transform: rotate(190deg);
color: gray;
vertical-align: middle;
}
.magGlass::before{
content: '\260C';/*260C tilted 190 deg or 26B2 tilted 45 deg. \2315 is not stable*/
}
.backArrow{
color: blue;
cursor: pointer;
}
.backArrow:hover{font-style: italic;}
.backArrow::before{content: '\276E\276E';}
.undoArrow{
color: blue;
cursor: pointer;
font-size: 1.5rem;
}
.undoArrow::before{content: '\21BA';}
.delSign {
font-size: 1rem;
cursor: pointer;
color: red;
}
.delSign::before{content: '\2717';}
.downloadFile{
padding: 0.1em 0.3em 0.1em 0.3em;
font-size: 1.1rem;
font-weight:normal;
margin-left:0.3em;
}
.downloadFile::before{content: '\21F2';}
.dlPDF{cursor: pointer;}
.dlPDF::before{content: '\21F2';}
.showInfo{
cursor: pointer;
color:black;
}
.showInfo::before{content: ' \2139';}/*\0024D8 is not stable*/

#infoDiv, .infoDiv{
display:none;
border: 1px solid black;
z-index: 1;
box-shadow: 0.2em 0.2em 0.2em black;
background-color: whiteSmoke;
padding:0.2em;
position:absolute;
}
#closeInfo, .closeInfo{
color:red;
cursor: pointer;
font-size: 0.7em;
vertical-align:top;
}
#closeInfo::before, .closeInfo::before{content: '\274C';}
/*printIcon also as bigger version in print.css*/
.printIcon{
font-size:1rem;
border:0.01em solid gray;
border-radius:0.25em;
background: linear-gradient(DodgerBlue, White);
padding:0.1em;
}
.printIcon:hover{
cursor: pointer;
background: rgba(30,144,255,1.0);/*dodgerBlue*/
color: white;
}
.printIcon::before{content:'\1F4C4';}/*or \1F4C3. \1F5A8 is not stable*/
/*paperclip*/
.paperclip{cursor: pointer;}
.paperclip::before {content: '\1F4CE';}

/*ARROWS*/
.arrowup {
font-style: normal;
float: left;
cursor: pointer;
transform: rotate(90deg);
}
.arrowup::before{content: '\21d0';}
.arrowdown {
font-style: normal;
float: left;
cursor: pointer;
transform: rotate(-90deg);
}
.arrowdown::before{content: '\21d0';}
.arrowright {
font-style: normal;
float: left;
cursor: pointer;
transform: rotate(180deg);
}
.arrowright::before{content: '\21d0';}
/*spinning loader*/
#spincontainer{
background: white;
z-index: 1;
position: fixed;
top: 2em;
width: 100%;
height: 100%;
opacity: 0;
}
.loader{
border: 10px solid #3CB371;/*medium sea green*/
border-radius: 50%;
border-top: 10px solid black;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position: absolute;
top:40%;
left:45%;
}
.loadText{
position: absolute;
top:55%;
left:45%;
font-size: 1.2em;
font-weight: bold;
font-stretch: ultra-expanded;
color: #3CB371;
}
@keyframes spin{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*Safari*/
@-webkit-keyframes spin{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
/*HANDY CLASSES*/
.disFloatRight{
float: right;
display: inline;
}
.disFloatLeft{
float: left;
display: inline;
}
.readonlyName{
border: none;
font-style: italic;
background: transparent;
}
.countText{font-size: 0.7rem;}
/*MAINAREA & TABLES*/
.mainArea{
margin-top: 6em;
margin-left: 0.5em;
font-size: 1.1rem;
width: 98vw;
}
.mainArea input{font-size: 1rem;}
.inplbl{
font-size:0.7rem;
white-space:nowrap;
}
.inplbl::after{content:':';}
fieldset legend {
font-size: 1.3rem;
font-style: italic;
}
fieldset tbody tr, fieldset fieldset, .invTbl tr{background-color:transparent;}
.invTbl, .invTbl td{border: none;}
.leftTbl td{text-align:left;}
/*Below so that borders are showing for sticky rows/columns*/
table {
border-collapse: separate;
border-spacing:0;
}
td{
border: 1px solid black;
padding: 0.2em;
font-size: 0.8rem;
text-align: center;
}
th{
border: 1px solid black;
padding: 0.1em;
font-size: 0.9rem;
font-style: oblique;
font-weight: normal;
}
.titleRow th, .filterRow th{
background-color: rgba(255,239,213,1.0);/*PapayaWhip*/
color: rgba(105,105,105,1.0);/*dimgray*/
}
.titleRow > th{
cursor: n-resize;
padding-left: 0.3em;
padding-right: 0.3em;
}
.filterRow input[type="text"]{
width: 6em;
display: inline-block;
text-align: center;
}
th.defcursor{cursor:default;}

/*Sticky first row in table for this to work make table position:relative w/ inline mark-up
if you want a subsequent row to be sticky as well use inline mark-up since height of rows
above will impact what the top- value has to be.
*/
.stickyRow{
position: sticky;
top:6.6em;
z-index: 2;
white-space: nowrap;
}
.stickyCol{
position: sticky;
left:0em;
z-index: 1;
white-space: nowrap;
}
.stickyCorner{
position: sticky;
top:6.6em;
left:0em;
z-index: 3;
white-space: nowrap;
}
/*lists*/
ul{list-style-type: none;}
.horizontallist li{display:inline-block;}
/*DIALOG BOX*/
.dialog{
border: 1px solid black;
border-radius: 10px 10px 0px 0px;
position: fixed;
top:10em;
left:2em;
z-index: 5;
box-shadow: 0.2em 0.2em 0.2em black;
background-color: white;
}
.dialogTitle{
background: linear-gradient(White, lightGray );
border-bottom: 1px solid black;
border-radius: inherit;
width:inherit;
height: 1.5em;
position:fixed;
padding: 0.2em;
display: flex;
align-items: center;
}
.dialogTitle span{
margin-left: 1.8em;/* distance to .dialogClose*/
position: relative;
top: 3px;/*distance to top of parent element .dialogTitle*/
white-space: nowrap;
}
.dialogClose{
background: transparent;
border: none;
color: red;
cursor: pointer;
position: absolute;
}
.dialogClose::before{
content: '\274C';
font-size: 1.1rem;
}
.dialogMain{margin: 2.5em 0.3em 1em 0.3em;}
/*SOCIAL MEDIA ICON*/
.socMedIcon{
width:2.5%;
height:2.5%;
vertical-align:bottom;
}

/*specifics repeated in multiple sectors*/
.Stagediv > *, .LOCdiv > *, .Netdiv > *, .MFIdiv > *{
display: inline-block;
}
h2 select{
vertical-align: middle;
font-size: 0.75em;
font-weight: bold;
}
textarea.serialno{
resize:vertical;
width:100%;
min-height:2.5em;
}