html{
    font-family:'Agency FB';
    font-size:18px;
    background-color:#F1F1F1;
}
body{
    /* width:95%;  toc */
    /*margin-left:2.5%; */
    font-family:'Segoe UI';
    font-size:14px;
    margin : 2px;   /* Overwrite user agent stylesheet */
}
.centerText{
    text-align:center;
}
.largeText{
     font-size:28px;
}
.buttonFront{
    font-size:28px;
    border:none;
    background-color:inherit;
}
.controlOutLine{
    border:solid;
    border-width:0px;
    border-color:#B2B2B2;
    border-radius:5px;
    width:100%;
    background-color:#E1E1E1; 
    min-width:1050px;
}
.controlHeader{
    background-color:#B2B2B2;
    font-size:10px;
    color:white;
    padding-left:5%;
    position:absolute;
    top:20px;
    left:0px;
    width:95%;
    min-width:1050px;
}
.controlContent{
   padding-top:6px; /* toc*/
   /* padding 6px toc */
   min-width:1090px;  
}

.submenutitle{
    font-size:19px;
    font-weight: bold;
}
.buttontabstyle{
    background-color:white;
    font-size:17px;
  
    border-width:1px;
    border-color:#B2B2B2;
    margin-bottom:2px;
    border-radius:4px;
}
.buttontabupdatestyle{
    background-color:white;
    font-size:12px;
    vertical-align:text-bottom;
    border-width:1px;
    border-color:#B2B2B2;
    margin-bottom:2px;
    border-radius:4px;
}
.fourcolumns{
    width:24%;
    display:inline-block;
    vertical-align:top;
}
.sixtycolumn{
    width:60%;
    display:inline-block;
    vertical-align:top;
}
.fourtycolumn{
    width:39%;
    display:inline-block;
    vertical-align:top;
}
.threecolumns{
    width:33%;
    display:inline-block;
    vertical-align:top;   
}
.defaultTextbox{
    border-width:1px;
    background-color:white;
}
.MagDecTextbox{
    border-width:1px;
    background-color:white;
    font-size:11px;
    margin-left:-35px;
    position:relative;
    top:-11px;
}
.MagDecLabel{
    position:relative;
    top:11px;
}
.defaultLabel {
    line-height: 1.7;
    margin-left: -35px;
}
.tablecss{
     border:solid;
     border-width:1px;
     border-color:#A6A6A6;
}
.tableheader{
    background-color:#5D5D5D;
    color:white;   
    height:26px;
    text-align:center;
    border:solid;
    border-width:1px;
    border-color:#4D4D4D;  
    white-space: nowrap;
}
.tableHeadersize{
    width: calc(100% - 17px);
}
.tablerow{
    background-color:white;
    border:solid;
    border-width:1px;
    border-color:#A6A6A6;
    padding:4px;
    white-space: nowrap;
    width:calc( 100% - 1px );
}
.tablerowtwo{
    background-color:#C2C2C2;
    color:black;
    border:solid;
    border-width:1px;
    border-color:#A6A6A6;
    padding:4px;
    white-space: nowrap;
    width:calc( 100% - 1px );
}
.hiddencol { 
    display: none;
}
.tableBad{
    color: red;
    white-space: nowrap;
}
.tableUser{
    color: blue;
    white-space: nowrap;
}
.tableFixed{
    color: green;
    white-space: nowrap;
}
.tableENE{
    background-color:#A6A6A6;  
}
.tableUserEntry{
    color: blue;
    white-space: nowrap;
}
.tableBadCross{
     color: red;
     text-decoration:line-through;
     white-space: nowrap;
}
.tableCross{
     text-decoration:line-through;
     white-space: nowrap;
}
.deleteMenu{
 
    visibility:hidden;
    position:absolute;
    top:0px;
    left:0px;
    height:26px;
}
.tbodystyle{
    overflow-y:scroll;
    height:calc(100vh - 422px);  
    padding-bottom:20px;
    display:block;   
    table-layout:fixed;
}
.theadstyle{
    display:table;
    width: calc( 100% - 1em - 4px ); /*Please add this back in as it lines up the column headers with the columns, as long as it is scrollable*/
    table-layout:fixed;
 
}
.defaultCheckbox
{
    vertical-align: top;
}

tr{
    display:table;
    width:100%;
    table-layout:fixed;
}
td{
    white-space: nowrap;
    overflow: hidden;
}
th{
      white-space: normal;
      overflow: hidden;
      overflow-wrap: normal;
}
#maincontent1_RadioButtonList1 td{
    overflow:visible;
}
#maincontent1_contentTableDiv td{
    text-align:right;
}

.divOutline{
    padding-left:3px;
    padding-top:3px;
    border:solid;
    border-width:1px;
    border-radius:0px;
    border-color:#B2B2B2;
    margin-left:2px;
    background-color:white;
}

.divoutlinemid{
    padding-left:3px;
    padding-top:3px;
    border:solid;
    border-width:1px;
    border-radius:0px;
    border-color:#B2B2B2;
    margin-left:2px;
    background-color:white;
    
}

.gridStyle{
    width:100%;
    height:calc(100vh - 345px); 
    /*height:calc(100vh);*/
    overflow-y:hidden;
}

.checkText input{
    vertical-align:top;
    margin-top:1px;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    border-bottom:none;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: #f6f6f6;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 4px 6px;
    transition: 0.3s;
    font-size: 11px;
    font-weight:bold;
    text-transform:uppercase;
    border-radius: 4px 4px 0px 0px;
    padding-left: 5px;
    padding-right: 5px;
    border-style: solid;
    border-bottom-style:none;
    border-width:1px;
    border-color:#b2b2b2;
    margin-top:2px;
    margin-right:3px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #b2b2b2;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-top: none;
}

.aziAndDip {
    min-width:407px;/*The CSS is set up for a width of 307px. Making this larger than 307px forces the user to scroll down on some resolutions*/
    padding-left:1px;
    display:inline-block;
    vertical-align:top;
    width:calc(100% - 278px);
    margin-top:-7px;
}

.magDecl{
    color:red;
    width:40vw;
    height:125px;
    text-align:center;
    background-color:white;
    border:solid;
    border-width:1px;
    border-color:#B2B2B2;
    z-index:9999;
    position:absolute;
    top:Calc(50% - 50px);
    left:30%;
    box-shadow: 4px 4px 8px 2px #888888; 
    line-height:30px;
}
.textboxLookLikeLabel{
    border:none;
    background-color:none;
    font-size:11px;
    font-family:'Segoe UI';
    margin-bottom:14px;
    margin-top:-1px;
}
.textboxLookLikeLabelPrintReport{
    border:none;
    background-color:none;
   
    margin-bottom:1px;
    margin-top:-1px;
}
.hideCell{
    visibility:hidden;
    display:none;
}
.exportDataExportTitle{
    background-color:inherit;
    border:none;
    width:98%;
}
#legendInfo {
    /*position:absolute;
    bottom:25px;
    right:-195px;
    background-color:#fafafa;
    width:170px;
    border:solid;
    border-width:1px;
    border-color:#cacaca;
    display:none;
    font-size:9px;*/
        position:absolute;
        bottom:53px;
        right:-96px;
        background-color:#fafafa;
        width:164px;
        border:solid;
        border-width:1px;
        border-color:#cacaca;
        display:block;
        font-size:9px;
}
#legendInfo2 {
    /*position:absolute;
    bottom:25px;
    right:-195px;
    background-color:#fafafa;
    width:170px;
    border:solid;
    border-width:1px;
    border-color:#cacaca;
    display:none;
    font-size:9px;*/
        position:absolute;
        bottom:-80px;
        right:-400px;
        background-color:#fafafa;     
        border:solid;
        border-width:1px;
        border-color:#cacaca;
        display:none;
        font-size:9px;
        z-index:9999;
}
.legend{
    height:20px;
    display:inline-block;
}
.legend:hover #legendInfo2{
    display:block;
}
.inline{
    display:inline-block;
    vertical-align:top;
   
}
.legendBox{
    width:12px;
    height:12px;
}

@media only screen and (min-width: 1620px) {
   
    .gridStyle{   
         height:calc(100vh - 237px); /*These sections may need to be recalulated to ensure no scrolling. Chart css would need to be changed as well.*/
    }
    .tbodystyle{    
        height:calc(100vh - 297px);      
    }
}


@media only screen and (max-height: 611px) and (max-width: 1620px) {
   .gridStyle{   
         height:270px;   
    }
    .tbodystyle{    
        height:220px;    
    }
}


@media only screen and (max-height: 535px) and (min-width: 1620px) {
 .gridStyle{   
         height:275px;   
    }
    .tbodystyle{    
        height:225px;    
    }
}