:root {
    --main-bg-color: #155883;
    --main-border: #155883;
    --main-txt-color: #255374; /*#3c8dbc*/
    --main-txt-color-light: #ffffff; /*#3c8dbc*/
    --main-control: #255374;
    --navBar-bg-color: #f8f8f8;
    --selectAreaTable-bg: #e4e4e4;
    --gridHeaderRow-bg: #c5c5c5;
    --controlGridRow-bg: #e4e4e4;
    --editAreaTable-bg: #ffffff;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

    body.MainWhite {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: White;
    }

    body.MainPink {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: Pink;
    }

    body.MainPaleGreen {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: PaleGreen;
    }

    body.MainLavender {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: Lavender;
    }

    body.MainLemonChiffon {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: LemonChiffon;
    }

    body.popupBody {
        margin: 0px;
        padding: 0px;
    }

    body.popupHelpBody {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    body.popupBodyNoScrollBars {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

h1 {
    display: block;
    font: bold 30px Arial, helvetica, Sans-Serif;
    /*font-size: 2em;*/
    margin-top: 0.67em;
    margin-bottom: 0.2em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    color: #1a1817; /*Match the color on Controltec logo*/
}

/* Base Page Outer, Inner, and Content Tables */
.outerTable {
    width: 100%;
    height: 100%;
}

.outerTableTopCell {
    width: 100%;
    height: 72px;
}

.outerTableBottomCell {
    width: 100%;
}

.innerTable {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

.innerTableLeftCell {
    width: 180px;
    height: 100%;
    border-top: #155883 0px solid;
    border-bottom: #155883 0px solid;
    border-left: #155883 0px solid;
    border-right: #155883 0px solid;
    border-top: var(--main-border) 0px solid;
    border-bottom: var(--main-border) 0px solid;
    border-left: var(--main-border) 0px solid;
    border-right: var(--main-border) 0px solid;
}

.innerTableRightCell {
    height: 100%;
    padding-left: 4px;
    /* new */
    vertical-align: top;
}

.contentTable {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

.contentTableTopCell {
    width: 100%;
    height: 28px;
}

.contentTableBottomCell {
    width: 100%;
    padding-top: 4px;
}

.leftCellDiv {
    border-top: #155883 0px solid;
    border-bottom: #155883 0px solid;
    border-left: #155883 0px solid;
    border-right: #155883 0px solid;
    border-top: var(--main-border) 0px solid;
    border-bottom: var(--main-border) 0px solid;
    border-left: var(--main-border) 0px solid;
    border-right: var(--main-border) 0px solid;
    margin: 0px;
    padding: 0px;
    height: 100%;
    overflow: auto;
}

.rightCellDiv {
    border-top: #155883 0px solid;
    border-bottom: #155883 0px solid;
    border-left: #155883 0px solid;
    border-right: #155883 0px solid;
    border-top: var(--main-border) 0px solid;
    border-bottom: var(--main-border) 0px solid;
    border-left: var(--main-border) 0px solid;
    border-right: var(--main-border) 0px solid;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
}

/* NAVIGATION TREE STYLES */
.navBar {
    width: 188px;
    height: 100%;
    padding-left: 2px;
    overflow: auto;
}

    .navBar a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #255374;
        color: var(--main-control);
        text-align: left;
        text-decoration: none;
    }

        .navBar a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #ff0000;
            text-align: left;
            text-decoration: none;
        }

        .navBar a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #E0A724; /*#ff9933;*/
            text-align: left;
            text-decoration: none;
        }

.navBarDisabled {
    width: 188px;
    height: 100%;
    padding-left: 2px;
    overflow: auto;
}

    .navBarDisabled a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #B0B0B0;
        text-align: left;
        text-decoration: none;
    }

        .navBarDisabled a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            /* color: #ff0000; */
            text-align: left;
            text-decoration: none;
        }

        .navBarDisabled a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #B0B0B0;
            text-align: left;
            text-decoration: none;
            cursor: default;
        }

.navLink {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
    text-decoration: none;
}

.navLinkActive {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #ff0000;
    text-align: left;
    text-decoration: none;
}

.navLinkDisabled {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
    text-decoration: none;
    cursor: default;
}



/* Form Styles */
.formtable {
    border-top: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    margin-bottom: 4px;
    padding: 0px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
}

.formcell {
    border-top: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    margin-bottom: 4px;
    padding: 0px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
}

.formbody {
    border-top: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
}

.formlabelarea {
    margin: 0px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: right;
    vertical-align: middle;
    width: 150px;
}

.formcontrolarea {
    margin: 0px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: .5em;
    padding-left: 5px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
}

.formlabel {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-txt-color);
}

.formlabelRed {
    font: bold 12px Arial, sans-serif;
    color: #ff0000;
}

.formlabelrequired {
    font: bold 12px Arial, sans-serif;
    color: #CC0000;
}

.formlabelrequired::before {
    content: "* ";
}

.formlabelpreferred {
    font: bold 12px Arial, sans-serif;
    color: #00CC00;
}

.formcontrolinput {
    font: 12px Arial, sans-serif;
    color: #000000;
}

.formcontrolinputactive {
    font: 12px Arial, sans-serif;
    color: #000000;
    background-color: #B6C7E5;
}

.formcontrolinputdisabled {
    font: 12px Arial, sans-serif;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    color: #666666;
}

.formcontrolcheckbox {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
}

.formcontrolcheckboxactive {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    background-color: #B6C7E5;
}

.formcontrolcheckboxdisabled {
    font: bold 12px Arial, sans-serif;
    color: #666666;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
}

.formcontrolselect {
    font: 12px Arial, sans-serif;
    color: #000000;
}

.formcontrolselectactive {
    font: 12px Arial, sans-serif;
    color: #000000;
}

.formcontrolselectdisabled {
    font: 12px Arial, sans-serif;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    color: #666666;
}

.formcontrolbutton {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    margin: 3px;
    background-color: #DDDDDD;
}

.formcontrolbutton:disabled {
    color: #B0B0B0;
    background-color: #E5E5E5;
    text-shadow: 1px 1px #FFFFFF;
}

.formcontrolbuttonDisabled {
    font: 12px Arial, sans-serif;
    color: #666666;
    text-decoration: none;
    margin: 3px;
    background-color: #CCCCCC;
}

.formcontrolbuttonSmall {
    font: bold 10px Arial, sans-serif;
    color: #155883;
    color: var(--main-control);
    text-decoration: none;
    /*margin: 3px;*/
}

.formcontrolbuttonSmallDisabled {
    font: 10px Arial, sans-serif;
    color: #666666;
    text-decoration: none;
    /*margin: 3px;*/
    background-color: #CCCCCC;
}

.formcheckboxlabelarea {
    border-right: 1px solid #155883;
    background-color: #e4e4e4;
    border-right: 1px solid var(--main-border);
    background-color: var(--selectAreaTable-bg);
    margin: 0px;
    padding: 3px;
    border-top: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    right: 5px;
    font: 12px Arial, Sans-Serif;
    color: black;
    text-align: left;
}


/* Main Form Area  */
.sectionheader {
    font: bold 14px Arial, sans-serif;
    color: #3c8dbc;
    padding: 5px;
}

.sectionheaderarea {
    border-right: #155883 1px solid;
    border-right: var(--main-border) 1px solid;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 12px;
    padding-bottom: 2px;
    color: black;
    padding-top: 2px;
    font-family: Arial, Sans-Serif;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    text-align: right;
    margin: 0px;
}

.columnheader {
    font: bold 12px Arial, sans-serif;
    color: #3c8dbc;
    background-color: #cccccc;
    text-align: right;
    padding: 2px 5px 0px 0px;
    vertical-align: middle;
    margin: 0px;
    border-top: 1px solid #155883;
    border-right: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
}

table.header {
    background-color: #155883;
    background-color: var(--main-bg-color);
}

td.headerlabel {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #3c8dbc;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
}

td.help {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #3c8dbc;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
}

    td.help a {
        font-weight: bold;
        color: #FFFFFF;
        background-color: #3c8dbc;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        text-decoration: none;
    }

        td.help a:link, td.help a:visited {
            font-style: normal;
            font-weight: bold;
            color: #FFFFFF;
            text-decoration: none;
        }

        td.help a:hover {
            color: #FF0000;
        }

.statustext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    color: #CC0000;
    text-align: left;
    vertical-align: middle;
    padding: 3px;
}

.userbar {
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    height: 28px;
    margin: 0px;
    padding: 0px;
    display: block;
    width: 100%;
}

.commandbar {
    background-color: #e4e4e4;
    border-bottom: 1px solid #155883;
    background-color: var(--selectAreaTable-bg);
    border-bottom: 1px solid var(--main-border);
    height: 20px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}
/*
img.ctlogo 
{
	
	border-right: 1px solid #3c8dbc;
	margin: 0px;
	padding: 0px;
	width: 180px;
}
*/

/* Top CommandBar */
.topnavbar {
    border-top: #155883 1px solid;
    border-left: #155883 1px solid;
    border-right: #155883 1px solid;
    border-bottom: #155883 1px solid;
    border-top: var(--main-border) 1px solid;
    border-left: var(--main-border) 1px solid;
    border-right: var(--main-border) 1px solid;
    border-bottom: var(--main-border) 1px solid;
    margin: 0px;
    padding: 0px;
    /* background-color: #e4e4e4; */
    /* background-color: var(--selectAreaTable-bg); */
    font-weight: bold;
    font-size: 12px;
    color: #255374;
    background-color: #155883;
    color: var(--main-txt-color);
    background-color: var(--main-bg-color);
    font-family: Arial, helvetica, Sans-Serif;
    width: 100%;
    height: 60px;
}

.topnavlogo {
    border-right: #155883 1px solid;
    border-right: var(--main-border) 1px solid;
    background-color: #ffffff; /*#4495c4;*/
    padding-top: 10px;
    padding-left: 5px;
    width: 187px;
    /*width: 192px;*/
    /*height: 55px;*/
    height: 100%;
}

.navBarMainTable {
    height: 100%;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    /*background-image: url('Images/CT_titlebar_solid.png');*/
    /*background-image: url('Images/CT_titlebar_gradient.png');*/
    background-repeat: repeat-x;
}

.topnavrowtop {
    /* border-bottom: #3c8dbc 1px solid; */
    /* background-color: #e4e4e4;	*/
    /* background-color: var(--selectAreaTable-bg);	*/
    height: 30px;
}

.topnavrowbottom {
    /* background-color: #e4e4e4;	*/
    /* background-color: var(--selectAreaTable-bg);	*/
    height: 30px;
}

.navtree {
    border-right: #155883 1px solid;
    border-right: var(--main-border) 1px solid;
    padding-right: 0px;
    border-top: #155883 1px solid;
    border-top: var(--main-border) 1px solid;
    padding-left: 0px;
    font-weight: bold;
    font-size: 12px;
    padding-bottom: 0px;
    margin: 0px 0px 0px;
    overflow: auto;
    border-left: #155883 1px solid;
    border-left: var(--main-border) 1px solid;
    width: 190px;
    color: #255374;
    color: var(--main-txt-color);
    padding-top: 0px;
    border-bottom: #155883 1px solid;
    border-bottom: var(--main-border) 1px solid;
    font-family: Arial, helvetica, Sans-Serif;
    text-align: left;
    height: 100%;
    display: inline-block;
    position: relative;
}

.linkbutton {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #255374;
    color: var(--main-txt-color);
}

.linkLabel {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #255374;
    color: var(--main-txt-color);
}

.mainarea {
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    margin-top: 3px;
    border-top: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    width: 100%;
    float: left;
    left: 0px;
    margin-left: 0px;
    display: inline;
}

.summarylabel {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #255374;
    color: var(--main-control);
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    margin: 0px;
}

.summarylabelarea {
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    background-color: #cccccc;
    margin: 0px;
    width: 100%;
    padding: 3px;
    border-top: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    right: 5px;
}

.summarydata {
    border-right: 1px solid #155883;
    background-color: #e4e4e4;
    border-top: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    background-color: var(--selectAreaTable-bg);
    border-top: 1px solid var(--main-border);
    width: 100%;
    margin: 0px;
}

.mainformarea {
    margin: 0px;
    padding: 0px;
}

.twocolumnone {
    float: left;
    display: inline;
    margin-left: 0px;
    width: 49%;
    left: 0px;
}

.twocolumntwo {
    float: left;
    display: inline;
    margin-left: 5px;
    width: 49%;
    right: 0px;
}

.colthree {
    margin-top: 2px;
    margin-left: 0px;
    width: 33%;
}

.gridbox {
    /*margin-top: 3px;*/
    margin-bottom: 4px;
    overflow: auto;
    width: 100%;
}

.ctgrid {
    width: 100%;
    border: 1px solid #155883;
    border: 1px solid var(--main-border);
}

.gridheader {
    padding-right: 5px;
    padding-left: 5px;
    font-weight: bold;
    font-size: 12px;
    padding-bottom: 5px;
    color: #ffffff;
    padding-top: 5px;
    font-family: Arial, Sans-Serif;
    background-color: #155883;
    background-color: var(--main-bg-color);
    text-align: left;
}

.gridcolumn {
    padding-right: 3px;
    padding-left: 3px;
    font-weight: normal;
    font-size: 12px;
    padding-bottom: 3px;
    color: #000000;
    padding-top: 3px;
    font-family: Arial, Sans-Serif;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    text-align: left;
}

.gridcolumnalternate {
    padding-right: 3px;
    padding-left: 3px;
    font-weight: normal;
    font-size: 12px;
    padding-bottom: 3px;
    color: #000000;
    padding-top: 3px;
    font-family: Arial, Sans-Serif;
    background-color: #ffffff;
    text-align: left;
}

.gridcolumnselected {
    padding-right: 3px;
    padding-left: 3px;
    font-weight: normal;
    font-size: 12px;
    padding-bottom: 3px;
    color: #000000;
    padding-top: 3px;
    font-family: Arial, Sans-Serif;
    background-color: #B6C7E5;
    text-align: left;
}

.gridcolumnhighlighted {
    padding-right: 3px;
    padding-left: 3px;
    font-weight: normal;
    font-size: 12px;
    padding-bottom: 3px;
    color: #000000;
    padding-top: 3px;
    font-family: Arial, Sans-Serif;
    background-color: #99cc99;
    text-align: left;
}

.gridfooter {
    font-weight: bold;
    font-size: 14px;
    color: #000000;
    font-family: Arial, Sans-Serif;
    background-color: #ffffff;
    text-align: left;
}

.gridresults {
    margin-top: 5px;
    margin-left: 3px;
    overflow: auto;
    width: 100%;
    height: 330px;
    background-color: #ffffff;
}

.griddiv {
    margin: 0px;
    padding: 0px;
    width: 800px;
    height: 297px;
    overflow: auto;
    display: inline-block;
    position: relative;
}

.clsHoriz {
    font: bold 12px Arial, sans-serif;
    color: #3c8dbc;
    /*writing-mode:lr-tb */
}



/* PAGEDETAILS STYLES */
.pagedetailsHeaderArea {
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #ffffff;
    background-color: #155883;
    color: var(--main-txt-color-light);
    background-color: var(--main-bg-color);
    text-align: center;
    vertical-align: middle;
    padding: 1px;
}

.pagedetailsLabelArea {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #255374;
    color: var(--main-txt-color);
    text-align: left;
    vertical-align: middle;
    padding: 1px;
}

.pagedetailsControlArea {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #255374;
    color: var(--main-txt-color);
    text-align: left;
    vertical-align: middle;
    padding: 1px;
}

.pagedetailsStatusLabel {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #CC0000;
}



/* MULTISELECTOR POPUP STYLES */
.multiSelectorOuterDiv {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.multiselectorTopDiv {
    padding: 5px;
    position: fixed;
    height: 30px;
    top: 0;
    left: 0;
    right: 0;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 14px Arial, sans-serif;
}

.multiselectorBottomDiv {
    position: fixed;
    height: 35px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    text-align: center;
}

.multiselectorMiddleDiv {
    position: fixed;
    top: 30px;
    bottom: 35px;
    left: 0;
    right: 0;
    overflow: auto;
    background-color: White;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    border-right: 0px;
    border-left: 0px;
    font: bold 12px Arial, sans-serif;
}

/* OLD multiselector styles */
body.multiselectorBody {
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.multiselectorTable {
    border-top: 9px solid #333399;
    border-bottom: 1px solid #333399;
    border-left: 1px solid #333399;
    border-right: 1px solid #333399;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    /*width: 100%;
	height: 100%;*/
    padding: 0px;
    margin: 0px;
}

.multiselectorTopCell {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: solid 1px black;
    font: bold 14px Arial, sans-serif;
    color: #333399;
    /*width: 100%;
	height: 28px;*/
    padding: 0px;
    margin: 0px;
}

.multiselectorMiddleCell {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: solid 1px black;
    /*width: 100%;
	height: 180px;*/
    padding: 0px;
    margin: 0px;
}

.multiselectorBottomCell {
    border: 0px;
    padding: 0px;
    margin: 0px;
    /*width: 100%;*/
}

.multiselectorDiv {
    border: 0px;
    font: bold 12px Arial, sans-serif;
    color: #333399;
    background-color: White;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}


/* COLOR SELECTOR POPUP STYLES */
body.colorselectorBody {
    margin: 0px;
    padding-left: 2px;
    padding-right: 0px;
    padding-top: 1px;
    padding-bottom: 0px;
}

.colorselectorTable {
    border-top: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    background-color: #e4e4e4;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    background-color: var(--selectAreaTable-bg);
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.colorselectorTopCell {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: solid 1px black;
    font: bold 14px Arial, sans-serif;
    color: #3c8dbc;
    width: 100%;
    height: 28px;
    padding: 0px;
    margin: 0px;
}

.colorselectorMiddleCell {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: solid 1px black;
    width: 100%;
    height: 180px;
    padding: 0px;
    margin: 0px;
}

.colorselectorBottomCell {
    border: none 0px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.colorselectorDiv {
    border: none 0px;
    font: bold 12px Arial, sans-serif;
    color: #3c8dbc;
    background-color: White;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}

.colorselectorListTable {
    border: none 0px;
    background-color: White;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.colorselectorListCell {
    border-bottom: solid 1px black;
    width: 100%;
    font: bold 12px Arial, sans-serif;
    color: Black;
}



/* HISTORY REASON POPUP STYLES */
.historyreasonTable {
    border: none 0px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.historyreasonTopCell {
    border-bottom: solid 1px black;
    font: bold 14px Arial, sans-serif;
    color: #3c8dbc;
    width: 100%;
    height: 28px;
    padding: 0px;
    margin: 0px;
}

.historyreasonMiddleCell {
    border-bottom: solid 1px black;
    height: 220px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.historyreasonBottomCell {
    border: none 0px;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

.historyreasonDiv {
    border: none 0px;
    font: bold 12px Arial, sans-serif;
    color: #3c8dbc;
    background-color: White;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}


/* LOGIN & CHANGEPASSWORD PAGE STYLES */
.logintable {
    border-top: 9px solid #155883;
    border-bottom: 9px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    border-top: 9px solid var(--main-bg-color);
    border-bottom: 9px solid var(--main-bg-color);
    border-left: 1px solid var(--main-bg-color);
    border-right: 1px solid var(--main-bg-color);
    background-color: #e3e3e3;
}

.loginlogo {
    border-right: #155883 1px solid;
    border-right: var(--main-bg-color) 1px solid;
    background-color: #f8f8f8;
}

.loginheader {
    font: bold 14px Arial, sans-serif;
    color: #255374;
    color: var(--main-txt-color);
}

.loginlogo-CT {
    border-bottom: 9px solid #155883;
    border-bottom: 9px solid var(--main-bg-color);
    padding-bottom: 15px;
    background-color: #f8f8f8;
}


/* WPI POPUP STYLES */
body.wpiBody {
    margin: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    overflow: hidden;
}

.wpiTable {
    border-top: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    background-color: #e4e4e4;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    background-color: var(--selectAreaTable-bg);
}

.wpiTopCell {
}

.wpiBottomCell {
}



/* CALENDAR PAGE STYLES */
.calendarTable {
    border-top: 6px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 2px solid #155883;
    border-right: 1px solid #155883;
    background-color: #e4e4e4;
    border-top: 6px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 2px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    background-color: var(--selectAreaTable-bg);
    padding: 0px;
    margin: 0px;
}

.calendarHeaderCell {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 2px solid #155883;
    border-bottom: 2px solid var(--main-border);
    font: bold 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    background-color: #e4e4e4;
    color: var(--main-control);
    background-color: var(--selectAreaTable-bg);
    padding: 0px;
    margin: 0px;
}

.calendarBodyCellDisabled {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #A9A9A9;
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell0 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    background-color: #e4e4e4;
    color: var(--main-control);
    background-color: var(--selectAreaTable-bg);
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell1 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #FFFFFF;
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell2 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #FFB6C1;
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell3 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #87CEFA;
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell4 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #FFA07A;
    padding: 0px;
    margin: 0px;
} 
.calendarBodyCell5 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #000000;
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell6 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #000000;
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell7 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #000000;
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell8 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #000000;
    padding: 0px;
    margin: 0px;
}

.calendarBodyCell9 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #000000;
    padding: 0px;
    margin: 0px;
}


.attendanceOverviewCalendarBodyCell0 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    background-color: #e4e4e4;
    color: var(--main-control);
    background-color: var(--selectAreaTable-bg);
    padding: 0px;
    margin: 0px;
}

.attendanceOverviewCalendarBodyCell1 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #ffd0c6;
    padding: 0px;
    margin: 0px;
}


.attendanceOverviewCalendarBodyCell2 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #cb99c9;
    padding: 0px;
    margin: 0px;
}

.attendanceOverviewCalendarBodyCell3 {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    text-align: center;
    color: #255374;
    color: var(--main-control);
    background-color: #8fc758;
    padding: 0px;
    margin: 0px;
}


.attendanceOverviewStatusTable {
    border-top: 2px solid #155883;
    border-top: 2px solid var(--main-border);
    /*border-bottom: 1px solid #3c8dbc;*/
    border-left: 1px solid #155883;
    border-left: 1px solid var(--main-border);
    /*border-right: 1px solid #3c8dbc;*/
    background-color: white;
    /*background-color: var(--selectAreaTable-bg);*/
    padding: 0px;
    margin: 0px;
}

.attendanceOverviewStatusHeaderCell {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    background-color: white;
    color: var(--main-control);
    /*background-color: var(--selectAreaTable-bg);*/
    padding-left: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin: 0px;
}

.attendanceOverviewStatusLabelCell {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    color: #255374;
    background-color: white;
    color: var(--main-control);
    /*background-color: var(--selectAreaTable-bg);*/
    padding-left: 2px;
    padding-right: 2px;
    margin: 0px;
}

.dayStatusTable {
    border-top: 6px solid #155883;
    border-top: 6px solid var(--main-border);
    /*border-bottom: 1px solid #3c8dbc;*/
    border-left: 1px solid #155883;
    border-left: 1px solid var(--main-border);
    /*border-right: 1px solid #3c8dbc;*/
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    padding: 0px;
    margin: 0px;
}

.dayStatusHeaderCell {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    background-color: #e4e4e4;
    color: var(--main-control);
    background-color: var(--selectAreaTable-bg);
    padding-left: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin: 0px;
}

.dayStatusLabelCell {
    border-left: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    font: 12px Arial, sans-serif;
    color: #255374;
    background-color: #e4e4e4;
    color: var(--main-control);
    background-color: var(--selectAreaTable-bg);
    padding-left: 2px;
    padding-right: 2px;
    margin: 0px;
}



/* FILTER QUEUE */
.filterlabelarea {
    margin: 0px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: right;
    vertical-align: middle;
}

.filtercontrolarea {
    margin: 0px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: 12px Arial, Sans-Serif;
    color: black;
    text-align: left;
}

.filterradiobuttoncontrolarea {
    margin: 0px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
}

/* ATTENDANCE PAGE STYLES */
.attendanceGridTable {
    border-left: 1px solid #155883;
    border-top: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid var(--main-border);
    border-top: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
}

.attendanceGridHeader {
    border-bottom: 0px solid #155883;
    border-top: 1px solid #155883;
    border-right: 1px solid #155883;
    border-left: 1px solid #155883;
    border-bottom: 0px solid var(--main-border);
    border-top: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
}

.attendanceGridHeaderCell {
    max-width: 23px;
    min-width: 23px;
    margin: 0px;
    padding: 2px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    text-align: center;
    vertical-align: bottom;
}

.attendanceGridHeaderCell2 {
    margin: 0px;
    padding: 2px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    text-align: left;
    vertical-align: bottom;
}

.attendanceGridHeaderCellEnd {
    margin: 0px;
    padding: 1px;
    text-align: center;
    vertical-align: bottom;
}

.attendanceGridFooter {
    border: 1px solid #155883;
    border: 1px solid var(--main-border);
}

.attendanceGridFooterCell {
    margin: 0px;
    padding: 2px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    text-align: center;
    vertical-align: bottom;
}

.attendanceGridFooterCellEnd {
    margin: 0px;
    padding: 0px;
    text-align: center;
    vertical-align: bottom;
}

.attendanceGridDiv {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 345px;
    overflow: auto;
}

.popupAttendanceGridDiv {
    margin: 0px;
    padding: 0px;
    width: 100%;
    overflow: auto;
}

.adHocGridDiv {
    margin: 0px;
    padding: 0px;
    height: 100%;
    overflow: scroll;
    position: relative;
}

.attendanceGrid {
    font: bold 12px Arial, helvetica, Sans-Serif;
    border-top: 0;
    border-left: 1px solid #155883;
    border-left: 1px solid var(--main-border);
}

.attendanceGridNameCell {
    min-width: 23px;
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    text-align: left;
    vertical-align: bottom;
}

.attendanceGridNameCellSelected {
    min-width: 23px;
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    text-align: left;
    vertical-align: bottom;
    background-color: #B6C7E5;
}

.attendanceGridDataCell {
    min-width: 23px;
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.attendanceGridDataCellDisabled {
    min-width: 23px;
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    font: 10px Arial, sans-serif;
    color: #888888;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.attendanceGridDataCellSelected {
    min-width: 23px;
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    background-color: #B6C7E5;
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.attendanceGridDataCell2 {
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
}

.attendanceScheduledHoursCell {
    margin: 0px;
    padding: 0px;
    padding-right: 2px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-bottom: 1px solid #888888;
    width: 50%;
    height: 55px;
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    vertical-align: top;
    cursor: default;
}

.attendanceScheduledHoursCellDisabled {
    margin: 0px;
    padding: 0px;
    padding-right: 2px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    border-bottom: 1px solid #888888;
    width: 50%;
    height: 55px;
    font: 10px Arial, sans-serif;
    color: #888888;
    text-align: right;
    vertical-align: top;
    cursor: default;
}

.attendanceScheduledHoursCell2 {
    margin: 0px;
    padding: 0px;
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    vertical-align: middle;
    cursor: default;
}
/*
.attendanceScheduledCodeCell
{
	margin: 0px;
	padding: 0px;
	font: 10px Arial, sans-serif;
	color: #000000;
	text-align: center;
	vertical-align: middle;
	cursor: default;
}
.attendanceScheduledCodeCellDisabled
{
	margin: 0px;
	padding: 0px;
	font: 10px Arial, sans-serif;
	color: #888888;
	text-align: center;
	vertical-align: middle;
	cursor: default;
}
.attendanceScheduledCodeCell2
{
	margin: 0px;
	padding: 0px;
	padding-left: 2px;
	font: 10px Arial, sans-serif;
	color: #000000;
	text-align: left;
	vertical-align: middle;
	cursor: default;
}
.attendanceScheduledCodeCell2Disabled
{
	margin: 0px;
	padding: 0px;
	padding-left: 2px;
	font: 10px Arial, sans-serif;
	color: #888888;
	text-align: left;
	vertical-align: middle;
	cursor: default;
}
*/
.attendanceScheduledCodeCell {
    margin: 0px;
    padding: 0px;
    border-right: 1px solid #3c#1558838dbc;
    border-right: 1px solid #3cvar(--main-border)8dbc;
    font: 10px Arial, sans-serif;
    /*color: #888888;*/
    color: #000000;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.attendanceScheduledCodeCellDisabled {
    margin: 0px;
    padding: 0px;
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    font: 10px Arial, sans-serif;
    color: #888888;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.attendanceScheduledCodeCell2 {
    margin: 0px;
    padding: 0px;
    padding-left: 2px;
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: left;
    vertical-align: middle;
    cursor: default;
}

.attendanceActualHoursCell {
    margin: 0px;
    padding: 0px;
    padding-right: 2px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    width: 50%;
    height: 55px;
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    vertical-align: top;
    cursor: default;
}

.attendanceActualHoursCellDisabled {
    margin: 0px;
    padding: 0px;
    padding-right: 2px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    width: 50%;
    height: 55px;
    font: 10px Arial, sans-serif;
    color: #888888;
    text-align: right;
    vertical-align: top;
    cursor: default;
}

.attendanceActualHoursCell2 {
    margin: 0px;
    padding: 0px;
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    vertical-align: middle;
    cursor: default;
}

.attendanceActualCodeCell {
    margin: 0px;
    padding: 0px;
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.attendanceActualCodeCellDisabled {
    margin: 0px;
    padding: 0px;
    font: 10px Arial, sans-serif;
    color: #888888;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.attendanceActualCodeCell2 {
    margin: 0px;
    padding: 0px;
    padding-left: 2px;
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: left;
    vertical-align: middle;
    cursor: default;
}

.attendanceSmallLabelCell {
    margin: 0px;
    padding: 0px;
    font: bold 11px Arial, sans-serif;
    color: #000000;
    text-align: left;
    vertical-align: middle;
    cursor: default;
}

.attendanceTimeTextbox {
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    width: 55px;
}

.attendanceTimeTextboxActive {
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    width: 55px;
    background-color: #B6C7E5;
}

.attendanceTimeTextboxDisabled {
    font: 10px Arial, sans-serif;
    color: #666666;
    text-align: right;
    width: 55px;
}

.attendanceTimeNotScheduled {
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    width: 55px;
    background-color: #EE82EE;
}

.attendanceTimeNotScheduledActive {
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    width: 55px;
    background-color: #B6C7E5;
}

.attendanceTimeNotScheduledDisabled {
    font: 10px Arial, sans-serif;
    color: #666666;
    text-align: right;
    width: 55px;
}

.attendanceTimeVaryingSchedule {
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    width: 55px;
    background-color: #90EE90;
}

.attendanceTimeVaryingScheduleActive {
    font: 10px Arial, sans-serif;
    color: #000000;
    text-align: right;
    width: 55px;
    background-color: #B6C7E5;
}

.attendanceTimeVaryingScheduleDisabled {
    font: 10px Arial, sans-serif;
    color: #666666;
    text-align: right;
    width: 55px;
}

.attendanceScheduleCodeLabel {
    color: red;
}


/* ATTENDANCE POPUP STYLES */
body.attendancePopupBody {
    margin: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    overflow: hidden;
}

.attendancePopupTable {
    border-top: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    background-color: #e4e4e4;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    background-color: var(--selectAreaTable-bg);
    padding: 0px;
    margin: 0px;
}

.attendancePopupTopCell {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 0px; /*1px solid #3c8dbc;*/
    padding: 0px;
    margin: 0px;
}

.attendancePopupMiddleCell {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    padding: 0px;
    margin: 0px;
}

.attendancePopupBottomCell {
    border: 0px;
    padding: 0px;
    margin: 0px;
}

/* Payment Queue Styles */
.paymentGridNameCell {
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    text-align: left;
    vertical-align: bottom;
}

.paymentGridAmountCell {
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    text-align: right;
    vertical-align: bottom;
}

.paymentGridDateCell {
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    text-align: center;
    vertical-align: bottom;
}

.paymentGridHeaderCell {
    margin: 0px;
    padding: 2px;
    /*border-bottom: 1px solid #3c8dbc;*/
    border-right: 1px solid #155883;
    border-right: 1px solid var(--main-border);
    text-align: center;
    vertical-align: bottom;
}

/* DATAGRID STYLES */
.controlGrid {
    border-left: 1px solid #155883;
    border-top: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid var(--main-border);
    border-top: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
}

.controlGridScroll {
    margin: 0px;
    padding: 0px;
    border: 0px solid #155883;
    border: 0px solid var(--main-border);
    width: 100%;
    height: 100%;
    overflow: auto;
}

.controlGridHeaderRow {
    font: bold 12px Arial, helvetica, Sans-Serif;
    height: 38px;
    color: #255374;
    color: var(--main-control);
    text-align: left;
    background-color: #c5c5c5;
    background-color: var(--gridHeaderRow-bg);
    padding-left: 5px;
}

    .controlGridHeaderRow a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #255374;
        color: var(--main-control);
        text-decoration: none;
    }

        .controlGridHeaderRow a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #255374;
            color: var(--main-control);
            text-decoration: none;
        }

        .controlGridHeaderRow a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #ff9933;
            text-decoration: none;
        }

.controlGridHeaderCell {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
}

.controlGridRow {
    font: 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-align: left;
    background-color: #e4e4e4;
    background-color: var(--controlGridRow-bg);
}

.controlGridRowTrans {
    font: 12px Arial, helvetica, Sans-Serif;
    text-align: left;
}

.controlGridRowAlternate {
    font: 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-align: left;
    background-color: #ffffff;
}

.controlGridRowSelected {
    font: 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-align: left;
    background-color: #B6C7E5;
}

.controlGridRow a {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-decoration: none;
}

    .controlGridRow a:active {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #000000;
        text-decoration: none;
    }

    .controlGridRow a:hover {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #ff9933;
        text-decoration: none;
    }

.controlGridRowAlternate a {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-decoration: none;
}

    .controlGridRowAlternate a:active {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #000000;
        text-decoration: none;
    }

    .controlGridRowAlternate a:hover {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #ff9933;
        text-decoration: none;
    }

.controlGridRowSelected a {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-decoration: none;
}

    .controlGridRowSelected a:active {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #000000;
        text-decoration: none;
    }

    .controlGridRowSelected a:hover {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #ff9933;
        text-decoration: none;
    }

.controlGridCell {
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
}

.controlGridCellFont {
    font: bold 12px Arial, helvetica, Sans-Serif;
    text-decoration: none;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
}

.controlGridFooterRow {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
    background-color: #c5c5c5;
    background-color: var(--gridHeaderRow-bg);
}

    .controlGridFooterRow a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #255374;
        color: var(--main-control);
        /*text-decoration: none;*/
    }

        .controlGridFooterRow a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #ffffff; /* #3c8dbc; */
            /*text-decoration: none;*/
        }

        .controlGridFooterRow a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #e4e4e4;
            color: var(--selectAreaTable-bg);
            /*text-decoration: none;*/
        }

.controlGridFooterCell {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
}

.controlGridSingle {
    border-left: 1px solid #155883;
    border-top: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid var(--main-border);
    border-top: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
}



/* FAMILY ACCOUNT PAGE STYLES */
.controlGridRowNotYetInvoiced {
    font: 12px Arial, helvetica, Sans-Serif;
    color: #255374;
    background-color: #e4e4e4;
    color: var(--main-control);
    background-color: var(--selectAreaTable-bg);
    text-align: left;
}

    .controlGridRowNotYetInvoiced a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #000000;
        text-decoration: none;
    }

        .controlGridRowNotYetInvoiced a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #000000;
            text-decoration: none;
        }

        .controlGridRowNotYetInvoiced a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #ff9933;
            text-decoration: none;
        }

.controlGridRowNotYetInvoicedAlternate {
    font: 12px Arial, helvetica, Sans-Serif;
    color: #255374;
    color: var(--main-control);
    background-color: #ffffff;
    text-align: left;
}

    .controlGridRowNotYetInvoicedAlternate a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #000000;
        text-decoration: none;
    }

        .controlGridRowNotYetInvoicedAlternate a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #000000;
            text-decoration: none;
        }

        .controlGridRowNotYetInvoicedAlternate a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #ff9933;
            text-decoration: none;
        }

.controlGridRowInvoice {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-align: left;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
}

    .controlGridRowInvoice a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #000000;
        text-decoration: none;
    }

        .controlGridRowInvoice a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #000000;
            text-decoration: none;
        }

        .controlGridRowInvoice a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #ff9933;
            text-decoration: none;
        }

.controlGridRowInvoiceAlternate {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-align: left;
    background-color: #ffffff;
}

    .controlGridRowInvoiceAlternate a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #000000;
        text-decoration: none;
    }

        .controlGridRowInvoiceAlternate a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #000000;
            text-decoration: none;
        }

        .controlGridRowInvoiceAlternate a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #ff9933;
            text-decoration: none;
        }

.controlGridRowInvoiceSelected {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #000000;
    text-align: left;
    background-color: #B6C7E5;
}

    .controlGridRowInvoiceSelected a {
        font: bold 12px Arial, helvetica, Sans-Serif;
        color: #000000;
        text-decoration: none;
    }

        .controlGridRowInvoiceSelected a:active {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #000000;
            text-decoration: none;
        }

        .controlGridRowInvoiceSelected a:hover {
            font: bold 12px Arial, helvetica, Sans-Serif;
            color: #ff9933;
            text-decoration: none;
        }




/*	SELECT AND EDIT AREA STYLES */
.selectAreaTable {
    margin-bottom: 4px;
    padding: 2px;
    border: 1px solid #155883;
    background-color: #e4e4e4;
    border: 1px solid var(--main-border);
    background-color: var(--selectAreaTable-bg);
}

.selectAreaGroupCell {
    border: 2px groove;
    padding: 4px;
    vertical-align: top;
}

.selectAreaLabelCell {
    margin: 0px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: right;
    vertical-align: middle;
    width: 150px;
}

.selectAreaControlCell {
    margin: 0px;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
    vertical-align: middle;
}

.editAreaTable {
    border-top: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid #155883;
    border-right: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    padding: 2px;
    background-color: #ffffff;
    background-color: var(--editAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
}

.editAreaCell {
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
    background-color: var(--editAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
    vertical-align: middle;
}

    .editAreaCell a {
        margin: 0px;
        padding: 0px;
        background-color: #ffffff;
        background-color: var(--editAreaTable-bg);
        font: bold 12px Arial, sans-serif;
        color: #000000;
        text-align: left;
        vertical-align: middle;
        text-decoration: none;
    }

        .editAreaCell a:hover {
            margin: 0px;
            padding: 0px;
            background-color: #ffffff;
            background-color: var(--editAreaTable-bg);
            font: bold 12px Arial, sans-serif;
            color: #ff9933;
            text-align: left;
            vertical-align: middle;
            text-decoration: none;
        }

.editAreaLabelCell {
    margin: 0px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #ffffff;
    background-color: var(--editAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: var(--main-control);
    color: #255374;
    text-align: right;
    vertical-align: middle;
    width: 150px;
}

.editWideAreaLabelCell {
    margin: 0px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #ffffff;
    background-color: var(--editAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: right;
    vertical-align: middle;
    width: 225px;
}

.editWideLeftAreaLabelCell {
    margin: 0px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 30px;
    background-color: #ffffff;
    background-color: var(--editAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #3c8dbc;
    text-align: left;
    vertical-align: middle;
    width: 240px;
}

.editAreaControlCell {
    margin: 0px;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #ffffff;
    background-color: var(--editAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
    vertical-align: middle;
}

.editAreaHelpCell {
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
    background-color: var(--editAreaTable-bg);
    font: 12px Arial, sans-serif;
    color: #000000;
    text-align: left;
    vertical-align: middle;
}

    .editAreaHelpCell h4 {
        margin: 0px;
        padding: 0px;
        background-color: #ffffff;
        background-color: var(--editAreaTable-bg);
        font: bold 14px Arial, sans-serif;
        color: #255374;
        color: var(--main-control);
        text-align: left;
        vertical-align: middle;
    }

    .editAreaHelpCell h5 {
        margin: 0px;
        padding: 0px;
        background-color: #ffffff;
        background-color: var(--editAreaTable-bg);
        font: bold 12px Arial, sans-serif;
        color: #255374;
        color: var(--main-control);
        text-align: left;
        vertical-align: middle;
        padding-bottom: 4px;
        padding-top: 6px;
    }

.editAreaButtonCell {
    border-left: 0px;
    border-right: 0px;
    border-top: 1px solid #255374;
    border-top: 1px solid var(--main-control);
    border-bottom: 0px;
    padding: 0px;
    margin: 0px;
}



/* CONTROL STYLES */
.controlLabel {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    vertical-align: middle;
}

.controlLabelRequired {
    font: bold 12px Arial, sans-serif;
    color: #CC0000;
    vertical-align: middle;
}

    .controlLabelRequired::before {
        content: "* ";
    }

.controlLabelPreferred {
    font: bold 12px Arial, sans-serif;
    color: #006600;
    vertical-align: middle;
}

.controlLabelError {
    font: bold 12px Arial, sans-serif;
    color: #CC0000;
    vertical-align: middle;
}

.controlLabelHeader {
    font: bold 14px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    vertical-align: middle;
}

.controlLabelNormal {
    font: 12px Arial, sans-serif;
    font-weight: 500;
    color: var(--main-control);
    color: #255374;
    vertical-align: middle;
}



.controlSelect {
    font: 11px Arial, sans-serif;
    color: #000000;
    /*margin-bottom: 1px;*/
    height: 20px;
}

.controlSelectActive {
    font: 11px Arial, sans-serif;
    color: #000000;
    background-color: #B6C7E5;
}

.controlSelectDisabled {
    font: 11px Arial, sans-serif;
    color: #000000;
}

.controlTextbox {
    font: 11px Arial, sans-serif;
    color: #000000;
}

.controlTextboxLabel {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    vertical-align: middle;
    border: none;
    background-color: transparent;
}

.controlTextboxActive {
    font: 11px Arial, sans-serif;
    color: #000000;
    background-color: #B6C7E5;
}

.controlTextboxDisabled {
    font: 11px Arial, sans-serif;
    color: #000000;
}

.controlRadio {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
}

.controlRadioActive {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
}

.controlRadioDisabled {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
}

.controlCheckbox {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
}

.controlCheckboxActive {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
}

.controlCheckboxDisabled {
    font: bold 12px Arial, sans-serif;
    color: #000000;
}

.controlButton {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-decoration: none;
    margin: 3px;
}

    .controlButton:disabled {
        color: #B0B0B0;
        background-color: #E5E5E5;
        text-shadow: 1px 1px #FFFFFF;
    }

.controlButtonDisabled {
    font: 12px Arial, sans-serif;
    color: #666666;
    text-decoration: none;
    margin: 3px;
    background-color: #CCCCCC;
}

.controlButtonHidden {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-decoration: none;
    margin: 3px;
    display: none;
}

.controlButtonSmall {
    font: bold 10px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-decoration: none;
}

.controlButtonSmallDisabled {
    font: 10px Arial, sans-serif;
    color: #666666;
    text-decoration: none;
    background-color: #CCCCCC;
}

.controlLinkButton {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    margin: 3px;
}

/* PROFILE STYLES */
.profileTable {
    border: #255374 1px solid;
    border: var(--main-control) 1px solid;
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
}

.profileCell {
    border: #255374 1px solid;
    border: var(--main-control) 1px solid;
}



/* ADMIN/FEES STYLES */
.subsidizedGridDiv {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    display: inline-block;
    position: relative;
}

.subsidizedButtonsDiv {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    display: inline-block;
    position: relative;
}


.historyDiv {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.historyTopDiv {
    position: absolute;
    top: 0px;
    bottom: 94px;
    left: 0px;
    right: 0px;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    background-color: #FFFFFF;
}

.historyBottomDiv {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 95px;
    margin: 0px;
    padding: 0px;
    border-top: solid 0px #000000;
    overflow: hidden;
    background-color: #E4EBFA;
}

/* HISTORY POPUP STYLES */
body.popupHistory {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.historyGridScroll {
    margin: 0px;
    padding: 1px;
    border: 0px;
    width: 100%;
    height: 335px;
    overflow: auto;
    /*	
	overflow-y: hidden;
	ms-overflow-y: hidden;
*/
    white-space: nowrap;
}

.historyDetail {
    margin: 0px;
    padding: 10px 1px 1px 1px;
    border: 0px;
    width: 100%;
    height: 100%;
}


.timeoutWarning {
    font: bold 12px Arial, helvetica, Sans-Serif;
    color: #ffffff;
    text-align: left;
    text-decoration: none;
}


/* new items */
.topBarDiv {
    /* width: 100%;
	height: 75px; */
    position: absolute;
    top: 2px;
    left: 3px;
    right: 3px;
    bottom: 1px;
    margin: 0;
}

.navBarDiv {
    position: absolute;
    top: 66px;
    left: 3px;
    bottom: 3px;
    margin: 0;
    overflow: auto;
    border: 1px solid #155883;
    border: 1px solid var(--main-border);
    width: 191px;
    background: var(--navBar-bg-color);
    background: #f8f8f8;
    /* background: pink; */
}

.contentDiv {
    position: absolute;
    top: 66px;
    left: 199px;
    right: 3px;
    bottom: 3px;
    margin: 0;
    overflow: auto;
    padding-right: 1px;
}

.outerDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.reportsTitleDiv {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    cursor: pointer;
    vertical-align: middle;
}

.reportsGroupPanelDiv {
    padding-bottom: 1px;
    margin: 0;
}

.reportsItemDiv {
    margin: 0;
    vertical-align: text-top;
    height: 22px;
}

.reportsContentDiv {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 50px;
}

.reportItemLabel {
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    vertical-align: text-top;
}

.reportGroupImage {
    border: 0;
    padding-right: 0px;
    vertical-align: middle;
}

.reportItemImage {
    border: 0;
    padding-right: 5px;
    vertical-align: middle;
}

.versionlabel {
    font: bold 12px Arial, sans-serif;
    color: #ffffff;
    color: var(--main-txt-color-light);
}

.tableMaxNoBorder {
    width: 100%;
    height: 100%;
    border: 0;
}

.a.disabled {
    color: #B0B0B0;
    text-shadow: 1px 1px #FFFFFF;
}

.editControlsDiv {
    overflow: auto;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.panelMain {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.divAttendanceSelect {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    height: 115px;
}

.pnlLowerAttendance {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.divAttendanceHeader {
    width: 100%;
    /* height: 20px; */
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    /* background: lime; */
}

.divAttendanceFooter {
    width: 100%;
    height: 23px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.divAttendanceMainDiv {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.divEditAttendancePopup {
    margin: 0;
    padding-top: 0;
}

.formEditAttendancePopup {
    margin: 0;
    padding-top: 0;
    width: 100%;
    height: 100%;
}

.bodyEditAttendancePopup {
    margin: 0;
    padding: 0;
}

.attendanceSelectAreaTable {
    margin: 0;
    padding: 2px;
    border: 1px solid #155883;
    background-color: #e4e4e4;
    border: 1px solid var(--main-border);
    background-color: var(--selectAreaTable-bg);
    width: 100%;
    height: 112px;
}

.attendanceSelectDate {
    margin: 0;
    padding: 2px;
    text-align: left;
    vertical-align: middle;
}

.attendanceSelectDateButtons {
    vertical-align: middle;
}

.divAdHocReportParamsPopup {
    margin: 0;
    padding-top: 0;
    height: 100%;
    overflow: auto;
}

.divAdHocReportParamTable {
    margin: 0;
    padding-top: 0;
    height: 515px;
    overflow: auto;
}

.adHocFormtable {
    border: 1px solid #155883;
    border: 1px solid var(--main-border);
    margin-bottom: 4px;
    padding: 0px;
    /* background-color: #000000; */
}

.adHocFormtableSelectAreaControlCell {
    margin: 0px;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    vertical-align: middle;
    text-align: center;
}

.reportSelectArea {
    margin-bottom: 4px;
    padding-bottom: 4px;
    width: 100%;
    /* border: 1px solid #3c8dbc; */
    /* background-color: #e4e4e4; */
    /* background-color: var(--selectAreaTable-bg); */
    padding-top: 5px;
}


/* ADHOC REPORT STYLES */
.reportGridScroll {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    overflow: auto;
}

.headerLabelDisabled {
    color: #B0B0B0;
    text-shadow: 1px 1px #FFFFFF;
}

.reportPopupDiv {
    text-align: center;
    overflow: auto;
    height: 100%;
    width: 100%;
    padding-left: 3px;
}

.reportPopupBody {
    margin: 0px;
    padding: 0px;
    overflow: auto;
}

.reportParameterCell {
    text-align: left;
}

.familyNamelabel {
    font: bold 12px Arial, sans-serif;
    color: #000000;
    text-align: left;
}

.htmlNumericReportOutputColumnCell {
    text-align: right;
}

.reportParamUserControl {
    margin: 0px;
    padding: 0px;
    width: 500px;
}

.reportParamUserControlArea {
    margin: 0px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font: bold 12px Arial, sans-serif;
    color: #255374;
    color: var(--main-control);
    text-align: left;
}

.PadTop {
    padding-top: 10px;
}

.historyLinkButton {
    font-size: 11px;
    font-weight: normal;
    font-family: Arial;
    color: #FFF;
    text-decoration: underline;
}

.historyTransactionBackgroundFirstTrans {
    background-color: #FFFFFF;
    font-weight: bold;
    padding: 2px 8px;
    height: 18px;
}

.historyTransactionBackground {
    background-color: #e4e4e4;
    background-color: var(--selectAreaTable-bg);
    font-weight: normal;
    padding: 2px 8px;
    height: 18px;
}

/* history grid view */
.GridViewStyle {
    /*border:solid 1px #039;
    padding: 2px;
	font-family:lucida grande,arial,helvetica,sans-serif;
	font-size:12px;    
	width: 100%;*/
    border: 1px;
    border-color: #155883; /*#006dcc;*/
    border-color: var(--main-border); /*#006dcc;*/
    border-style: solid;
    padding: 2px;
    font-family: lucida grande,arial,helvetica,sans-serif;
    font-size: 12px;
    min-height: 1px;
    background-color: #fff;
}

.GridViewHeaderStyleNoSort th {
    font-weight: bold;
    border-right-style: solid;
    border-right-width: 0px;
    border-right-color: #155883;
    border-right-color: var(--main-border);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #155883;
    background: #c5c5c5;
    border-bottom-color: var(--main-border);
    background: var(--gridHeaderRow-bg);
    text-align: center;
    padding: 2px 8px;
    height: 18px;
}

.GridViewHeaderStyleNoSort {
    background-color: #e4e4e4;
    color: #255374;
    background-color: var(--selectAreaTable-bg);
    color: var(--main-txt-color);
    font-weight: bold;
    font-family: Arial;
    height: 18px;
}

.GridViewRowStyle td tr {
    cursor: default;
    height: 20px;
    padding: 2px 8px;
    /* background-color: Lime; */
}

.noAttendanceDiv {
    width: 100%;
    text-align: center;
    padding-top: 50px;
    font: bold 14px Arial, sans-serif;
}

.historyButtonDiv {
    width: 100%;
    text-align: center;
    padding-top: 10px;
}

.historySignatureDiv {
    width: 100%;
    height: 100%;
}

.gridIndent {
    padding-left: 15px;
    padding-top: 5px;
}

.profilePanel {
    padding-top: 5px;
}

.accountGridDateCell {
    text-align: center;
    vertical-align: middle;
    width: 65px;
}
.accountGridCheckboxCellDisabled {
    text-align: center;
    vertical-align: middle;
    width: 65px;
    opacity: 0.5;
    cursor: not-allowed;
}
.accountGridWideDateCell {
    text-align: center;
    vertical-align: middle;
    width: 80px;
}

.accountGridMoneyCell {
    text-align: right;
    vertical-align: middle;
    width: 70px;
}

.accountGridSelectCell {
    width: 50px;
}

.accountGridDescriptionCell {
    width: 500px;
    text-align: left;
    white-space: normal;
    vertical-align: top;
}

.attendanceControlGrid {
    border-left: 1px solid #155883;
    border-top: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid #155883;
    border-left: 1px solid var(--main-border);
    border-top: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
}

.attendanceGridChildLabel {
    font: bold 12px Arial, sans-serif;
    color: #000000;
}

.noChildrenMessageDiv {
    padding: 5px;
}

.noChildrenLabel {
    font: bold 12px Arial, sans-serif;
    color: #ff0000;
}

.divDeviceAttendanceSelect {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 247px;
}

.timeInOutTextBoxDisabled {
    width: 52px;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    text-align: center;
}

.timeInOutTextBox {
    width: 52px;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    text-align: center;
}

.timeInOutTextBoxActive {
    width: 52px;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    text-align: center;
}

.deviceAttendanceGridNameCell {
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    text-align: left;
    vertical-align: top;
    width: 200px;
}

.attendanceControlsTable {
    margin: 0px;
    padding: 2px;
    border-bottom: 1px solid #155883;
    border-right: 1px solid #155883;
    border-bottom: 1px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    text-align: left;
    vertical-align: top;
}

.childNameLabel {
    font: bold 12px Arial, sans-serif;
}

.childDOBLabel {
    font: 10px Arial, sans-serif;
}

.scheduleTimeCell {
    width: 52px;
    text-align: center;
    padding-top: 5px;
    /* background-color: Fuchsia; */
}

.TimeInOutCell {
    width: 52px;
    text-align: center;
    padding-top: 0px;
    /* background-color: Olive; */
}

.scheduleTimeLabel {
    font: 10px Arial, sans-serif;
    padding-top: 3px;
}

.programClassCell {
    padding-right: 5px;
    padding-left: 5px;
    width: 350px;
}

.scheduleProgramLabel {
    width: 250px;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    padding-top: 3px;
}

.deviceAbsentDropdown {
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    padding-top: 0px;
    width: 200px;
}

.deviceAbsentDropdownDisabled {
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    padding-top: 0px;
    width: 200px;
}

.scheduleTypeCell {
    text-align: left;
    padding-left: 20px;
    padding-top: 3px;
    /* background-color:Orange; */
    width: 250px;
}

.absentDropdownCell {
    text-align: left;
    padding-left: 20px;
    padding-top: 0px;
}

.scheduleTypeLabel {
    text-align: left;
    font: 10px Arial, sans-serif;
    padding-top: 3px;
    width: 350px;
}

.absenceCodeCell {
    text-align: left;
    padding-left: 5px;
    padding-top: 3px;
    /* background-color:Orange; */
    width: 250px;
}

.absenceCodeLabel {
    text-align: left;
    font: 10px Arial, sans-serif;
    padding-top: 3px;
}

.noteDiv {
    text-align: left;
    padding-top: 3px;
}

.notePanel {
    width: 500px;
    padding: 5px;
    background-color: #87cefa;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    display: none;
}

.attendanceControlsTable {
    padding: 0;
    margin: 0px;
    width: 500px;
    height: 100%;
    border: 0;
}

.deviceAttendanceGridControlsCell {
    padding: 0;
    margin: 0;
    padding-bottom: 0px;
    width: 550px;
}

.attendanceLinkButton {
    font-size: 11px !important;
    font-family: Arial !important;
    text-decoration: underline !important;
    font-weight: normal !important;
    display: block !important;
}

/* HISTORY STYLES */

.historyBackground {
    margin: 0 auto !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: 999;
    background-color: #6D7B8D; /* Blue Slate Gray */
    filter: alpha(opacity=60);
    -moz-opacity: 0.60;
    opacity: 0.60;
    -khtml-opacity: 0.60;
}

.historyPanel {
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1000;
    background-color: #EAF0F7;
    border: solid 1px #777777;
    /*height: 400px;*/
    /* !! overflow: auto; */
    overflow: auto;
    border-radius: 4px;
}

.historyTitleBar {
    width: 100%;
    height: 40px;
    border-bottom-style: inset;
    border-bottom-width: 0px;
    border-bottom-color: #ffffff;
    cursor: default;
}

.historyTitleDiv {
    margin-top: 6px;
    margin-left: 4px;
    padding-left: 4px;
    padding-top: 4px;
    color: #000000;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.xxhistoryDiv {
    height: 500px;
    width: 1124px;
    overflow: auto;
    text-align: left;
    background-color: #ffffff;
    padding: 4px;
    /*display: none;*/
}

.historyButtonDiv {
    margin-top: 7px;
    margin-bottom: 5px;
    text-align: center;
}

.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}


/* MODAL-POPUP STYLES */
.modalPopupBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: 999;
    background-color: #6D7B8D; /* Blue Slate Gray */
    filter: alpha(opacity=60);
    -moz-opacity: 0.60;
    opacity: 0.60;
    -khtml-opacity: 0.60;
}

.modalPopupPanel {
    clear: both;
    position: absolute;
    z-index: 1000;
    background-color: #EAF0F7;
    border: solid 1px #777777;
    margin: 0px;
    padding: 0px;
    border-radius: 4px;
}

.messagePopupPanel {
    clear: both;
    position: absolute;
    z-index: 1000;
    background-color: #EAF0F7;
    border: solid 1px #777777;
    margin: 0px;
    padding: 0px;
    border-radius: 4px;
}

.modalPopupTitleBar {
    width: 100%;
    height: 40px;
    border-bottom-style: inset;
    border-bottom-width: 0px;
    border-bottom-color: #ffffff;
    cursor: default;
}

.modalPopupTitleDiv {
    margin-top: 5px;
    margin-left: 4px;
    padding-left: 6px;
    padding-top: 4px;
    color: #000000;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.modalPopupButtonBar {
    width: 100%;
    height: 45px;
    text-align: center;
    vertical-align: middle;
    cursor: default;
    padding-top: 6px;
    margin-top: 0px;
    background-color: #EAF0F7;
}

.modalPopupButton {
    padding-top: 2px;
    display: inline-block;
    width: 60px;
    height: 17px;
    border: solid 0px #039;
    color: #ffffff;
    background-color: #039;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.historyImagePopup {
    font-family: lucida grande,arial,helvetica,sans-serif;
    text-align: center;
    background-color: #EAF0F7;
    border-width: 1px;
    border-style: solid;
    border-color: #039;
    color: #039;
    padding: 20px;
    width: 500px;
    font-size: 12px;
}

.correctionHeaderDiv {
    padding-left: 0px;
    padding-bottom: 10px;
}

.divCorrectionGrid {
    padding-left: 4px;
    padding-top: 4px;
}

.divCorrectionGrid {
    padding-left: 4px;
}

.correctionCell {
    padding: 5px;
}

.dateCorrectCell {
    padding: 5px;
    font: bold;
}



.accordion {
    width: 98%;
    margin: auto;
    border-radius: 5px;
    moz-border-radius: 5px;
    border: 1px solid #6C5A39;
    background-color: #255374;
    background-color: var(--main-control);
}

.accordionHeader {
    border: 1px solid #155883;
    color: #ffffff;
    border: 1px solid var(--main-border);
    color: var(--main-txt-color-light);
    background-color: #2c678d;
    /*background-color: #5078B3;*/
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeaderSelected {
    border: 1px solid #155883;
    border: 1px solid var(--main-border);
    color: white;
    background-color: #155883;
    background-color: var(--main-bg-color);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionContent {
    background-color: #cedae3;
    border: 1px dashed #155883;
    border: 1px dashed var(--main-border);
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #155883;
    border-top: 1px solid var(--main-border);
    margin: 1em 0;
    padding: 0;
}