html, #form1 {
    height: 100%;
}
body {
    height: 95%;
    margin: 10px;
    font-family: Tahoma, Arial, Verdana;
    font-weight: normal;
    font-size: 13px;
    color: #333333;
    overflow:hidden;
}

.small {
    font-size: 10px;
}

.tableFs th, .tableFs td {
    font-size: 16px;
}

.txta {
    font-family: arial;
/*    color: #000000;
    font-weight: normal;
    font-size: 13px;*/
}

#main {
    padding: 20px;
    height: 93%;
    transition: margin-left .5s;
    margin-left: 200px;
    position: relative;
    overflow-y: auto;
}

#zoomable {
    visibility: hidden;
}

#main.zoomable {
    padding: 20px 10px 0px 20px;
    height: calc(100vh - 120px);
    width: calc(100% - 230px);
    overflow-x: auto;
}

#modalBg {
    height: 100%;
    width: 100%;
    opacity: 0.8;
    background-color: white;
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.modalRunning {
    height: 100%;
    width: 100%;
    z-index: 1001;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.horizontally-vertically {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border:none;
}

/*.gvHead_small th {
    padding: 0.5em;
    font-weight: normal;
    white-space: nowrap;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background-color: #F4F4F4;
    color: #999999;
    vertical-align: bottom;
}*/

.lastUpdated {
    /*    float:right;
    clear:both;
    padding-right:30px;*/

    clear: both;
    padding-right: 31px;
    right: 0;
    position: absolute;
    top: 0;

}

.gvRow td a, .gvRow td{
    color: #444444;
    text-decoration: none;
}

.gvHead th, .gvHead td {
    padding: 0.5em;
    font-weight: normal;
    /*white-space: nowrap;*/
    border-right: 1px solid #bdbdbd;
    border-bottom: 1px solid #bdbdbd;
    background-color: #e7e7e7;
    vertical-align: bottom;
    text-align: center;
    color: #000000;
}

.gvRow td {
    padding: 0.5em;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    /*background-color: #FFFFFF;*/
    text-align: center;
}



a {
    text-decoration: none;
    /*color: #999999;*/
    color: #5083A0;
}

.TextCenter {
    text-align:center;
}

.TextLeft, .gvRow td.TextLeft, .gvHead th.TextLeft, .gvHead td.TextLeft 
{
    text-align: left !important;
}

.IsValidation {
    font-style: italic;
}

.orderby {
    float:right;
    clear:both;
}

#zoomPanel {
    width: 120px;
    height: 70px;
    float: left;
    clear: both;
    top: 0px;
    position: fixed;
    left: 50px;
    opacity: 0.2;
    background-color: #C8C8C8;
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;
    line-height:1.5;
}

.smallwhite {
    font-size: 12px;
    color: black;
    text-decoration:none;
}

#zoomPanel:hover {
    opacity:0.9;
}

#zoomPanel:disabled {
    color:lightgray;
}

.zoomButt {
    width:25px;
    min-width:25px;
}

.expandButt {
    width: 100px;
    min-width: 100px;
}


.clickable, .popUpElecDet, .popUpNotes, .popUpBreakdown {
    cursor: pointer;
}

.clicked {
    color: #40FF40;
    font-weight: bold;
}

.notclicked {
    color: #999999;
    font-weight: normal;
}


.new_menubar {
    background-color: #000000;
    font: arial;
    font-family: arial;
    color: #3EBFAC;
    font-size: 10pt;
    height: 80px;
    width:100%;
}

.disabled {
    color: #C0C0C0;
}

.new_white {
    color: #FFFFFF;
}

.new_menutext {
    font-size: 16pt;
}

.new_menuhead {
    font-size: 20pt;
}

.new_mainpage {
    border-top: 2px solid white;
}

.new_innermenu {
    background-color: #373A3C;
}

.new_innermenutext, #menubar a {
    font-size: 14pt;
    text-decoration:none;
}


/*.new_selected {
    font-weight: normal;
    color: #3EBFAC;
}

.new_notselected {
    color: #FFFFFF;
}

.new_disabled {
    color: #DCDCDC;
}

#navigationDiv a {
    font-size: 12pt;
}*/

.sidenav, .sidenav a {
    font-size: 14pt;
    color: #FFFFFF;
}

.new_selected {
    font-weight: normal;
    color: #3EBFAC !important;
}
.new_disabled {
    color: #DCDCDC !important;
}

.removeSideNav {
    display: none;
    width: 0 !important;
}
.removeSideNavFooter {
    left: 20px !important;
}
.removeSideNavMain {
    margin-left: 0 !important;
    width: calc(100% - 30px) !important;
}

.sidenav {
    height: 97%; /* 100% Full-height */
    width: 200px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1;
    background-color: #373A3C;
    overflow-x: hidden;
    padding-top: 10px;
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 8px;
        text-decoration: none;
        display: block;
        transition: 0.3s;
    }

.smaller, .smaller a {
    font-size: 12pt;
}

.sidenav .closebtn {
    position: absolute;
    top: -5px;
    right: 3px;
    font-size: 25px;
}

#openbtn {
    position: absolute;
    top: 20px;
    left: 0;
    font-size: 25px;
    display: none;
    transition: margin-left .5s;
    z-index: 10;
}
    #openbtn span {
        display: block;
        height: 35px;
        width: 30px;
        background-color: #373A3C;
        color: #fff;
        text-align: center;
    }

    #navigationDiv {
        margin-left: 8px;
    }




.datared {
    background-color:#F3D89D;
}

.datablue {
    background-color: #CDEFFB;
}

.datagrey {
    background-color: #C0C0C0;
}


.orderList {
    width: 100%;
    height: 250px;
    outline: none;
    /*background-color: #ffffff;
    border: 1px solid #000063;*/
}

    .orderList option {
        padding: 3px 0;
    }

.pd_fieldhead {
    background-color: #E9F0F4;
    border: 1px solid #c0c0c0;
    font-weight:bold;
}
.pd_data {    
    border: 1px solid #c0c0c0;
}
.pd_databox {
    width:100%;
    border:0;
    outline:none;
}


.title {
    color: #000000;
    border: 1px solid #c0c0c0;
    padding: 6px 2px;
    width: 100%;
    margin: 30px 0 10px 0;
    background-color: #E9F0F4;
    font-weight: bold;
    font-size: 16px;
}

.resTbl {
    margin-top: 10px;
}

    .resTbl th {
        background-color: #E9F0F4;
    }

    .resTbl td, .resTbl th {
        color: #000000;
        border: 1px solid #c0c0c0;
        text-align: center;
        padding:  0.2em;
        /*font-size: 13px;*/
    }

        .resTbl td.celLeftBor, .resTbl th.celLeftBor {
            border-left: 2px solid black;
        }

        .resTbl td.cur {
            background-color: #FFFFC0;
        }

.pcnt:after {
    content: "%";
}

.notshow {
    display:none;
}

.total {
    font-weight: bold;
}

.approvalMenu {
    margin-left: 6px;
}


a.button {
    font-size: 12px;
    color: black;
    text-decoration: none;
    border: 1px #767676 solid;
    padding: 3px;
    border-radius: 3px;
    background-color: #efefef;
}

.footTableText {
    font-family: Tahoma, Arial, Verdana;
    font-weight: normal;
    font-size: 13px;
}

.footTable {
    position: absolute;
    bottom: 20px;
    left: 227px;
}


    .footTable td {
        padding: 0 5px;
    }




.presSummaryFlex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: normal;
    align-items: normal;
    align-content: normal;
}

.summaryFlex-items {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

.chartFlex-items {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}



#grid, #gridHead {
    font-size: 16px;
    visibility:hidden;
}
#grid {
    overflow-y: scroll;
}

.cell_5 {
    width: 5em;
}

.cell_6_25 {
    width: 6.25em;
}

.cell_7_5 {
    width: 7.5em;
}
.cell_15 {
    width: 15em;
}


.cell_22_5 {
    width: 22.5em;
}
.cell_40 {
    width: 40em;
}

.breakdownheader {
    text-align:center;
    font-weight:bold;
    border-bottom:1px solid lightgray;
}

.breakdownheaderleft {
    text-align: left;
    font-weight: bold;
}

.hiddenCell {
    display: none;
}

.expandedCell {
    display: table-cell !important;
}

a.btn {
    color: #000;
    background-color: rgb(239 239 239);
    padding: 2px 6px;
    border: 1px #767676 solid;
    border-radius: 3px;
    font-size: 13.333px;
    font-family: Arial;
}


/* Presentation Grade colours */
.capped {
    background-color: #F3D89D;
}
.resit {
    background-color: #CDEFFB;
}
.historic {
    background-color: #C0C0C0;
}
.incomplete {
    background-color: #EDE6F2;
}

.aaless {
    background-color: #B9F9DC;
}

.recMissing, valRecMissing {
    background-color: #FFD7D7;
}
.recChanged {
    /*background-color: #B7E1B7;*/
}
.recHighlight {
    background-color: #FEFFA5 !important;
}
.valRecMisMatched {
    background-color: #FFFFC0 !important;
}

.valGradeMisMatched {
    background-color: #FFFFC0 !important;
}


.checked, .gvRow td.checked {
    color: #008000;
}


.gvRow.verified td {
    font-style: italic;
}




#notesModal {
    width: 500px;
    height: 750px;
    padding: 5px 15px;
}

.errorBg {
    background-color: #ffc6c6;
}

@keyframes anim-rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.spinner {
    display: inline-block;
    animation: anim-rotate 2s infinite linear;
    color: #008000;
}
.spinner--steps {
    animation: anim-rotate 1s infinite steps(8);
}

.spinner--steps2 {
    animation: anim-rotate 1s infinite steps(12);
}

a.disableda.disabled, .gvRow td a.disabled {
    color: lightgrey;
    pointer-events: none;
}

.noHighlight {
    display: none;
}

.newGrade {
    background-image: url("/images/newgrade.png");
    background-position:  top right;
    background-repeat: no-repeat;
}

.secondAttempt {
    background-image: url("/images/secondattempt.png");
    background-position: top right;
    background-repeat: no-repeat;
}