::placeholder
{
    color:#c3c3c3;
}


.header_logonid
{
    color: #00517B;
    font-weight: 600;
}


.screenBody
{
    background-color: #FFFFFF;
    font-size: 9pt;
    font-family: Nunito ,Verdana,  Arial, Helvetica, sans-serif;
    margin:0;

}

.activityCellPortal
{
    background-color: #5593bd;
    color: #ffffff;
}
.activityCellStaff
{
    background-color: #4fa64c;
    color: #f7f700;
}

.screenMainBody
{
    margin-left: 8pt;
    margin-right: 8pt;
}

.navBar
{
    font-size: 10pt;
    background-color: #fcefa1;
    padding:1px;
    color: #000000;
    padding-left:5px;
}

.readOnlySimpleText
{
    color: #0000a0;
    font-size: 9pt;
}


.readOnlyFieldWithBorder
{
    color: #0000a0;
    font-size: 9pt;
    border: solid 1pt #bdbdbd;
    padding-left: 5pt;
    padding-right: 5pt;
}

.fieldLabelRequired
{
    color: red;
}

.fieldLabel
{
    color: #000000;
    font-size: 9pt;
}

.fieldValueNoBorder
{
    color: #0000a0;
    font-size: 9pt;
}

.fieldValue
{
    border: 1pt solid #c0c0c0;
    color: #0000a0;
    font-size: 9pt;
}

.fieldValueSpan
{
    border: 1pt solid #c0c0c0;
    color: #0000a0;
    font-size: 9pt;
    padding-left:5pt;
    padding-right:5pt;
}

.fieldValueSpanError
{
    border: 1pt solid #c0c0c0;
    color: #ffffff !important;
    background-color: #F25D50;
    font-size: 9pt;
    padding-left:5pt;
    padding-right:5pt;
}

.fieldValueSpanNoBorder
{
    color: #0000a0;
    font-size: 9pt;
}

.fieldValueChanged
{
    border: 1pt solid #c0c0c0;
    color: red;
    font-size: 9pt;
}

.readOnlyField
{
    color: #0000a0;
    font-size: 9pt;
    padding-left: 5pt;
    padding-right: 5pt;
}

.genesisOnly
{
    background-color: #D3E7C4;
}

.listHeaderRow
{
    font-weight: bold;
    font-size: 9pt;
    color: #000000;
    vertical-align: bottom;
}

/* This works for the first row */
/* If you are doing a second row in a header, you will need to set top: (9pt * rownumber) + 1 for it to work correctly in a style attribute next to it */
.listHeaderRowFrozen td
{
    font-weight: bold;
    font-size: 9pt;
    color: #000000;
    vertical-align: bottom;
    background-color: #D3E7C4;
    position: sticky;
    top: 0;
}

.listTableStyle
{
    background-color: #D3E7C4;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: 0 auto;
}

.listTableStyleNoCenter
{
    background-color: #D3E7C4;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.listTableStyleRightAlign
{
    background-color: #D3E7C4;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: 0 0 0 auto;
}

.cellHighlight
{
    color: #ffffff;
    background-color: #00D000;
    font-size: 9pt;
    font-style: normal;
}

.listRow{
    color: #000000;
    font-size: 9pt;
    background-color: #E7F2E3;
    font-style: normal;
}
.listRow:nth-of-type(2n){
    color: #000000;
    font-size: 9pt;
    background-color: #FFFFFF;
    font-style: normal;
}
.listRow:hover{
    background-color: #deedff;
}
/*.listRow.selected{*/
/*    background-color: #deedff;*/
/*}*/
/*.listRow.selected:hover{*/
/*    background-color: rgba(222, 237, 255, 0.8);*/
/*}*/

.comboBoxListHeaderRowFrozen td
{
    font-weight: bold;
    font-size: 9pt;
    color: #000000;
    vertical-align: bottom;
    background-color: #FFFFFF;
    position: sticky;
    top: 0;
}
.comboBoxListRow {
    background-color : #83a879;
}
.comboBoxListRow:nth-of-type(2n){
    background-color: #bbd1b6;
}
.comboBoxListRow:hover{
    background-color: #befad9;
}
.comboBoxListRow.selected{
    background-color: #befad9;
}

.listRow1
{
    color: #000000;
    font-size: 9pt;
    background-color: #FFFFFF;
    font-style: normal;
}

.listRow1:hover
{
    background-color: #deedff;
}

.listRow2
{
    color: #000000;
    font-size: 9pt;
    background-color: #E7F2E3;
    font-style: normal;
}

.listRow2:hover
{
    background-color: #deedff;
}

.listRow3
{
    color: #000000;
    font-size: 9pt;
    background-color: #f5f59f;
    font-style: normal;
}

.listRow3:hover
{
    background-color: #deedff;
}

.listRow4
{
    color: #000000;
    font-size: 9pt;
    background-color: #ffa0a0;
    font-style: normal;
}

.listRow5
{
    color: #000000;
    font-size: 9pt;
    background-color: #9e9e9e;
    font-style: normal;
}

.listRow6
{
    color: #000000;
    font-size: 9pt;
    background-color: #cfd1cf;
    font-style: normal;
}

.listRow7
{
    color: #000000;
    font-size: 9pt;
    background-color: #fff6cc;
    font-style: normal;
}

.listRow8
{
    color: #000000;
    font-size: 9pt;
    background-color: #bde1f6;
    font-style: normal;
}
.listRow8:hover
{
    background-color: #deedff;
}

.listRowDisabled
{
    color : #000000;
    font-size: 9pt;
    background-color:#D3D3D3;
    font-style: italic;
    opacity: 0.9;
}

.listRowBlue
{
    color: #000050;
    font-size: 9pt;
    background-color: #50D4FD;
    font-style: normal;
}
.listRowBlue:hover
{
    background-color: #deedff;
}


.listRowSelected
{
    color: #000000;
    font-size: 9pt;
    background-color: #00f000;
    font-style: normal;
}

.listRowInfo
{
    color: #000000;
    background-color: #E8FFBA;
    font-size: 9pt;
    font-style: normal;
}

.listRowWarning
{
    color: #000000;
    background-color: #FFFF00;
    font-size: 9pt;
    font-style: normal;
}

.listRowError
{
    color: #ffffff;
    background-color: #F25D50;
    font-size: 9pt;
    font-style: normal;
}

.listRowHighlight
{
    color: #ffffff;
    background-color: #4fa64c;
    font-size: 9pt;
    font-style: normal;
}

.listRowNoData
{
    text-align: center;
    height: 50px;
    font-weight: bold;
}

.cellError
{
    background-color: #F25D50;
    color: #ffffff;
}

.cellWarning
{
    background-color: #FFFF00;
    color: #000000;
}

.cellGreen
{
    background-color: #7ceb61;
    color: #000000;
}

TD
{
    padding-left: 5pt;
    padding-right: 5pt;
}

.listRowHistoric
{
    font-size: 9pt;
    font-style: normal;
    color: #000000;
    background-color: rgb(186, 239, 245);
}

.listRowFuture
{
    font-size: 9pt;
    font-style: normal;
    color: #000000;
    background-color: #d0f7c5;
}

.listRowCurrent
{
    font-size: 9pt;
    font-style: normal;
    color: #000000;
    background-color: rgb(255, 239, 210);
}


/* Alternate Search Row CSS Implementation */
/* This method selects all TDs where the parent has class .searchRow[Top|Bottom|Color?] */
.searchRowTop > td {  padding-top: 3px; }
.searchRowBottom > td { padding-bottom: 3px;}
.searchRowColor1 > td {color: #000000; background-color: #f0f7ee;}
.searchRowColor2 > td {color: #000000; background-color: #e7f2e3;}
.searchRowColor3 > td {color: #000000; background-color: #daebd5;}
.searchRowColor4 > td {color: #000000; background-color: #cfe4c8;}
.searchRowColor5 > td {color: #000000; background-color: #c3ddbb;}
.searchRowColor6 > td {color: #000000; background-color: #b7d6ae;}
.searchRowColor7 > td {color: #000000; background-color: #aacfa0;}
.searchRowColor8 > td {color: #000000; background-color: #9ec892;}
.searchRowColor9 > td {color: #000000; background-color: #92c185;}

.logonBody
{
    background-color: #FFFFF1;
    color: blue;
    font-size: 10pt;
    font-family: "Nunito",Verdana,  Arial, Helvetica, sans-serif;

}


.formButtonIcon
{
    color: #19206D;
    background-color: #e0ead7;
    border-radius: 8px;
    border: solid .75pt #47a754;
    font-size: 9pt;
    cursor: pointer;
    padding-right: 9pt;
    padding-top: 1pt;
    padding-bottom: 1pt;
    text-decoration: none;
    white-space: nowrap;

    height: 24px;
    background-position: 10px;
    padding-left: 32px;
    background-repeat: no-repeat;
    transition: background-color 150ms linear;

}
.formButtonIcon:hover
{
    color: white;
    background-color: #47a754;
    border-radius: 8px;
    border: solid .75pt #47a754;
    padding-right: 9pt;
    text-decoration: none;
    white-space: nowrap;

    height: 24px;
    background-position: 10px;
    padding-left: 32px;
    background-repeat: no-repeat;
}

.formButton
{
    color: #19206D;
    background-color: #e0ead7;
    border-radius: 8px;
    border: solid .75pt #47a754;
    font-size: 9pt;
    cursor: pointer;
    padding-left: 9pt;
    padding-right: 9pt;
    padding-top: 1pt;
    padding-bottom: 1pt;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms linear;
}
.formButton:hover
{
    color: white;
    background-color: #47a754;
    border-radius: 8px;
    border: solid .75pt #47a754;
    padding-left: 9pt;
    padding-right: 9pt;
    text-decoration: none;
    white-space: nowrap;

}

.progressBarContainer {
    width: 700px;
    height: 20px;
    margin: 10px 0 5px 0;
    background: #053F59;
    border-radius: 25px;
    padding: 5px;
}
.progressBarContainer > .progressBarDiv {
    height: 100%;
    border-radius: 20px;
    background-color: #47a754;
    background-image: repeating-linear-gradient(
            -45deg,
            transparent 0%,
            25%,
            rgba(255, 255, 255, 0.6) 50%,
            75%,
            transparent
    );
    background-size: 800px;
    animation: moveProgressBar 4s linear infinite;
    overflow: hidden;
    transition: width 2s;
}
@keyframes moveProgressBar {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 800px;
    }
}

.fieldSetTitle
{
    font-size: 9pt;
    color: #2e2eb0;
}

.fieldsTable
{
    border-collapse:collapse;
    border-spacing: 0;
}

.notecard .fieldsRow
{
    background-color: #f9f8f4;
}
.notecard .fieldsRow2
{
    background-color: #edece8;
}
.notecardLeft .fieldsRow
{
    background-color: #f9f8f4;
}
.notecardLeft .fieldsRow2
{
    background-color: #edece8;
}
.notecardRight .fieldsRow
{
    background-color: #f9f8f4;
}
.notecardRight .fieldsRow2
{
    background-color: #edece8;
}

.notecardHistoric .fieldsRow
{
    background-color: rgb(186, 239, 245);
}
.notecardHistoric .fieldsRow2
{
    background-color: rgb(174, 224, 230);
}

.notecardFuture .fieldsRow
{
    background-color: #d0f7c5;
}
.notecardFuture .fieldsRow2
{
    background-color: #c4e8ba;
}

.fieldLabelCell
{
    padding-right: 2.5pt;
    text-align:right;
}

.fieldValueCell
{
    padding-right: 2.5pt;
    text-align:left;
}

.fieldValueCell2
{
    color: #0000a0;
    padding-right: 2.5pt;
    text-align:left;
}

.fieldsTableSectionHeader
{
    font-weight: bold;
}


.subscriptionIcon:hover
{
    cursor:pointer;
    background-color: #81A677;
}


.validationError
{
    font-weight: bold;
    font-style: italic;
    font-size: 9pt;
}

.calendarTable
{
    background-color: #D3E7C4;
    color: #000000;
    border-radius: 6px;
}

.calendarYearMonthRow
{
    background-color: #D3E7C4;
    color: #000000;
    font-weight: bold;
    font-size: 11pt;
    text-align: center;
}

.calendarBusinessDay
{
    background: linear-gradient(135deg, #ffffff 60%, #E7F2E3, #3b6324);
}

.calendarWeekdayRow
{
    background-color: #D3E7C4;
    color: #3b6324;
    font-weight: bold;
    font-size: 10pt;
    text-align: center;
}

.calendarWeekdayDay
{
    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
    font-size: 9pt;
    text-align: center;
}

.calendarWeekdayDay2
{
    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
    font-size: 9pt;
    text-align: left;
    vertical-align: text-top;
}

.calendarWeekdayDayInYearView
{
    background-color: #ffffff;
    color: #000000;
    font-size: 9pt;
    text-align: center;
}


.calendarWeekdayDayToday
{
    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
    font-size: 9pt;
    text-align: center;
    border:#3b6324 2pt solid;
}

.calendarDayPastDate
{
    background-color: #D3E7C4;
    color: #000000;
    font-weight: bold;
    font-size: 9pt;
    text-align: center;
    opacity: .6;
}

.staffBarDiv
{
    color: #ffffff;
    font-size : 10.5pt;
    background-color: #298bbc;
    border-bottom: solid 1pt black;
}
.staffBarDivPortal
{
    color: #ffffff;
    font-size : 10pt;
    padding: 2pt;
    background-color: #298bbc;
    border-top: solid 1pt black;
}
.staffBarDivWarning
{
    color: #000080;
    background-color: #FFFF00;
}
.payrollInfoBar
{
    color: #000080;
    background-color: #2ceb88;
    border-bottom: solid 1pt black;
    padding: 2pt 4pt 2pt 4pt;
}
.budgetInfoBar
{
    color: #000080;
    background-color: #2ceb88;
    border-bottom: solid 1pt black;
    padding: 2pt 4pt 2pt 4pt;
    font-size: 10pt;
}
.budgetBuildInfoBar
{
    color: #ffffff;
    background-color: #3b61c7;
    border-bottom: solid 1pt black;
    padding: 2pt;
    font-size: 10pt;
}

.alignRight
{
    text-align: right;
}

.footer
{
    margin: 25pt auto 0;
    font-size: 8pt;
    border-top: solid 1pt #CACACA;
    color: #888888;
    width:95%;
}

.footerPortal
{
    margin: 10pt 0 10pt 0;
    font-size: 8pt;
    border-top: solid 1pt #CACACA;
    color: #888888;
    width: 100%;
}

/* Start Google Web Fonts */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    src: local('Nunito'), local('Nunito'), url(Nunito-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url(Nunito-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: local('Nunito Bold'), local('Nunito-Bold'), url(Nunito-Bold.ttf) format('truetype');

}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 800;
    src: local('Nunito Extrabold'), local('Nunito-Extrabold'), url(Nunito-ExtraBold.ttf) format('truetype');

}

.loginButton
{
    height: 33px;
    padding: 0 30px;
    font-size: 9pt;
    font-weight: bold;
    background-color: #001C35;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
    cursor: pointer;
    border: 0;
    border-radius: 3px;
    transition: background-color 300ms ease;
}

.loginButton:hover
{
    background-color: #0f74a8;
}

.logonHeader
{
    font-family: "Nunito" ,Verdana,  Arial, Helvetica, sans-serif;
    font-style: normal;
    background: linear-gradient(#A0C9DD, #E0EFF7);
    font-weight: 600;
    color: #00517B;
    width:100%;
    text-align: center;
    font-size: 10pt;
}

.fontBold
{
    font-weight: bold;
}
.notecardLeft
{
    margin: 10px;
    background-color: #FAF8F5;
    padding: 5px 5px 5px 5px;
    display:table;
    box-shadow: rgba(0,0,0,0.3) 5px 5px 10px 0;
}

.notecardRight
{
    margin: 10px 10px 10px auto;
    background-color: #FAF8F5;
    padding: 5px 5px 5px 5px;
    display:table;
    box-shadow: rgba(0,0,0,0.3) 5px 5px 10px 0;
}

.notecard
{
    margin: 10px auto;
    background-color: #FAF8F5;
    padding: 5px 5px 5px 5px;
    display:table;
    box-shadow: rgba(0,0,0,0.3) 5px 5px 10px 0;
}

.notecardHistoric
{
    margin: 10px auto;
    background-color: rgb(186, 239, 245);
    box-shadow: rgba(0,0,0,0.3) 5px 5px 10px 0;
    padding: 5px 5px 5px 5px;
    display:table;
}

.notecardFuture
{
    margin: 10px auto;
    background-color: #d0f7c5;
    box-shadow: rgba(0,0,0,0.3) 5px 5px 10px 0;
    padding: 5px 5px 5px 5px;
    display:table;
}

.notecardInactive
{
    margin: 10px auto;
    background-color: #f46c60;
    box-shadow: rgba(0,0,0,0.3) 5px 5px 10px 0;
    padding: 5px 5px 5px 5px;
    display:table;
}

.notecardTitle
{
    font-size: 11pt;
    font-weight:bold;
    color: #202020;
    margin-bottom: 5px;
    border-bottom: solid #808080 1pt;
    text-align: left;
}

.alignLeft
{
    text-align: left;
    justify-content:flex-start;
}

.alignRight
{
    text-align: right;
    justify-content:flex-end;
}

.alignCenter
{
    text-align: center;
    justify-content:center;
}

.vAlignCenter
{
    display:flex;
    align-items:center;
    gap:3px;
}

/* ------------------------- Employee Portal ------------------------------- */
.portalScreenBody
{
    background-color: #FFFFFF;
    font-size: 9pt;
    font-family: "Nunito" ,Verdana,  Arial, Helvetica, sans-serif;
    margin:0;
}

.portalHeaderTable
{
    font-family: "Nunito" ,Verdana,  Arial, Helvetica, sans-serif;
    font-style: normal;
    background: linear-gradient(#A0C9DD, #E0EFF7);
    font-weight: 600;
    color: #00517B;
    width:100%;
    text-align: center;
    font-size: 10pt;
}

.portalTabSpacer
{
    width: 5px;
    margin: 0;
    padding: 0;
}


.portalTab
{
    margin-left: 0;
    color: #000000;
    margin-top: 2px;
    display:inline-block;
    padding:4px 10px 2px;
    cursor:pointer;
    text-decoration: none;
    white-space: nowrap;
    background-color: #DFF1FC;
    border-radius: 6px 6px 0 0;
    vertical-align: bottom;
    transition: background-color 150ms linear;
}

.portalTab:hover
{
    background-color: #09628A;
    color: #ffffff;
}
.portalTabSelected
{
    margin-left:0;
    border-radius: 6px 6px 0 0;
    background-color: #09628A;
    color: #FFFFFF;
    margin-top: 2px;
    display:inline-block;
    padding:4px 10px 2px;
    cursor:pointer;
    text-decoration: none;
    vertical-align: bottom;
    white-space: nowrap
}

.portalHeaderTable2
{
    font-family: "Nunito" ,Verdana,  Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 10pt;
    background-color: #FFFFFF;
    font-weight: 600;
    color: #25add3;
    width:100%;
    text-align: center;
}

.portalTab2
{
    margin-left: 0;
    background-color: #FFFFFF;
    font-weight: 600;
    color: #000000;
    border-radius: 6px 6px 0 0;

    cursor:pointer;
    text-decoration: none;

    margin-top: 5px;
    padding: 5px 10px .5px;

    width:1%;
    white-space: nowrap
}

.portalTab2:hover
{
    background-color: #1D9450;
    color: #ffffff;
}
.portalTab2Selected
{
    margin-left:0;
    border-radius: 6px 6px 0 0;
    background-color: #1D9450;
    color: #ffffff;
    margin-top: 5px;
    padding: 5px 10px .5px;
    cursor:pointer;
    text-decoration: none;

    width:1%;
    white-space: nowrap
}


.portalHeaderTable3
{
    font-family: "Nunito" ,Verdana,  Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 10pt;
    background-color: #1b8543;
    font-weight: 600;
    color: #25add3;
    width:100%;
    text-align: center;
}

.portalTab3
{
    margin-left: 0;

    color: #ffffff;
    background-color: #1b8543;
    border-radius: 6px 6px 0 0;

    cursor:pointer;
    text-decoration: none;

    margin-top: 5px;
    padding: 5px 10px .5px;

    width:1%;
    white-space: nowrap
}

.portalTab3:hover
{
    background-color: #FFFFFF;
    color: #000000;
}
.portalTab3Selected
{
    margin-left:0;
    border-radius: 6px 6px 0 0;
    background-color: #ffffff;
    color: #000000;
    margin-top: 5px;
    padding: 5px 10px .5px;
    cursor:pointer;
    text-decoration: none;

    width:1%;
    white-space: nowrap
}

.portalHeaderTable4
{
    font-family: "Nunito" ,Verdana,  Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 10pt;
    background-color: #47a754;
    font-weight: 600;
    color: #25add3;
    width:100%;
    text-align: center;
}

.portalTab4
{
    font-size:10pt;
    margin-left: 0;
    background-color: #47a754;
    color: #ffffff;
    border-radius: 6px 6px 0 0;

    cursor: pointer;
    text-decoration: none;

    margin-top: 5px;
    padding: 5px 10px .5px;

    width: 1%;
    white-space: nowrap;
}

.portalTab4:hover
{
    background: #ffffff;
    color: #000000;
}

.portalTab4Selected
{
    margin-left:0;
    border-radius: 6px 6px 0 0;
    background: #ffffff;
    color: #000000;
    margin-top: 5px;
    padding: 5px 10px .5px;
    cursor:pointer;
    text-decoration: none;

    width:1%;
    white-space: nowrap
}

.tab2Employee
{
    margin-left: 0;
    font-size:10pt;
    color: #ffffff;
    background-color: #6dc462;
    border-radius: 6px 6px 0 0;

    cursor:pointer;
    text-decoration: none;

    margin-top: 5px;
    padding: 5px 10px .5px;

    width:1%;
    white-space: nowrap
}
.tab2Employee:hover
{
    background-color: #1D9450;
    color: #ffffff;
}
.tab2EmployeeSelected
{
    margin-left:0;
    border-radius: 6px 6px 0 0;
    background-color: #1D9450;
    color: #ffffff;
    margin-top: 5px;
    padding: 5px 10px .5px;
    cursor:pointer;
    text-decoration: none;

    width:1%;
    white-space: nowrap
}

.tab2Observer
{
    margin-left: 0;
    font-size:10pt;
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 6px 6px 0 0;

    cursor:pointer;
    text-decoration: none;

    margin-top: 5px;
    padding: 5px 10px .5px;

    width:1%;
    white-space: nowrap
}
.tab2Observer:hover
{
    background-color: #1D9450;
    color: #ffffff;
}
.tab2ObserverSelected
{
    margin-left:0;
    border-radius: 6px 6px 0 0;
    background-color: #1D9450;
    color: #ffffff;
    margin-top: 5px;
    padding: 5px 10px .5px;;
    cursor:pointer;
    text-decoration: none;

    width:1%;
    white-space: nowrap
}

.employeeFormFolderTab
{
    background-color: #73a097;
    color:white;
    border-color: #56706b;
    font-size: 11pt;
    border-style:solid;
    border-left-width:1pt;
    border-right-width:1pt;
    border-top-width:1pt;
    border-bottom-width:0;
    cursor:pointer;
    padding-left: 5pt;
    padding-right: 5pt;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    white-space: nowrap;
}

.employeeFormFolderTabSelected
{
    border-color: #56706b;
    background-color: #99ddcf;
    color:darkblue;
    font-size: 11pt;
    border-style:solid;
    border-left-width:1pt;
    border-right-width:1pt;
    border-top-width:1pt;
    border-bottom-width:0;
    cursor:pointer;
    padding-left: 5pt;
    padding-right: 5pt;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    white-space: nowrap;

}

.ui-datepicker-trigger
{
    vertical-align: -22%;
}

.breadcrumb
{
    background-color: #ccdfbb;
    color: #ffffff;
}
.releaseNotesWarning
{
    background-color: #ffff00;
    color: #000080;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

.nowrap
{
    white-space: nowrap;
}

.borderLeftBlack
{
    border-left: solid 1pt black;
}

.borderRightBlack
{
    border-right: solid 1pt black;
}

.borderRightBlackThick
{
    border-right: solid 4pt black;
}

.borderTopBlack
{
    border-top: solid 1pt black;
}

.borderBottomBlack
{
    border-bottom: solid 1pt black;
}


.borderLeftGrey
{
    border-left: solid 1pt #808080;
}

.borderRightGrey
{
    border-right: solid 1pt #808080;
}

.borderTopGrey
{
    border-top: solid 1pt #808080;
}

.borderBottomGrey
{
    border-bottom: solid 1pt #808080;
}

.schoolFiDialog
{
    background-color:#FAF8F5 !important;
}

.schoolFiDialogNew
{
    background-color:#FAF8F5 !important;
    font-family: Helvetica, Arial, sans-serif;
    font-size:10pt;
}

.bgColorAncient
{
    background-color: #cacaca;
}

.bgColorHistoric
{
    background-color: rgb(186, 239, 245);
}

.bgColorFuture
{
    background-color: #d0f7c5;
}

.bgColorCurrent
{
    background-color: rgb(255, 239, 210);
}

.blueText
{
    color: #0000a0;
}


.messagingPopupMailboxToolbar
{
    display: flex;
    gap:5pt;
    width:100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    height: 25pt;
    align-items: center;
    background-color: #6dc462;
}
.messagingPopupMailboxBody
{
    padding-top:5pt;
    padding-bottom:5pt;
    height: 335pt;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: solid 1pt #6dc462;
}
.messagingPopupMailboxTab
{
    display: flex;
    height: 20pt;
    align-items: center;
    background-color: #D3E7C4;color:black;
    padding-left: 10pt;
    padding-right: 10pt;
    border-radius: 8px;
    cursor:pointer;
}

.messagingPopupMailboxTab:hover
{
    display: flex;
    height: 20pt;
    align-items: center;
    background-color: #1b8543;color:white;
    padding-left: 10pt;
    padding-right: 10pt;
    border-radius: 8px;
    cursor:pointer;
}

.messagingPopupMailboxTabSelected
{
    display: flex;
    height: 20pt;
    align-items: center;
    background-color: #1b8543;color:white;
    padding-left: 10pt;
    padding-right: 10pt;
    border-radius: 8px;
    cursor:pointer;
}
.messagingPopupMailboxMessageTable
{
    width:100%;
    background-color: #D3E7C4;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: 0 auto;
}
.messagingPopupMailboxMessageHeaderRow
{
    vertical-align: bottom;
    font-weight: bold
}
.messagingPopupMailboxRow
{
    background-color: white;
}
.messagingPopupMailboxRow:hover
{
    background-color: #deedff;
}
.messagingPopupMailboxRowSelected
{
    background-color: #deedff;
}

/*Combo Box Items*/
.comboBoxSearchField
{
    position: relative;
    display: inline-block;
}
.comboBoxSearchField::before{
    position:absolute;
    background-image: url("../images/newIcons/search.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    content: "";
    top: 2px;
    right: -1px;
    height: 20px;
    width: 20px;
}

.comboBoxSearchFieldDisabled
{
    position:relative;
    display:inline-block;
}
.comboBoxSearchFieldDisabled::before
{
    position:absolute;
    background-image: url("../images/newIcons/downArrow.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-color: white;
    content: "";
    opacity: .5;
    top: 2px;
    right: -3px;
    height: 25px;
    width: 25px;
}

/*SelectMulti Control*/
.selectMultiControl
{
    position:relative;
    display:inline-flex;
    align-items: center;
    background-color:#ffffff;
    color:#0000a0;
    border:1pt solid #c0c0c0;
    font-size: 9pt;
    padding-left:5pt;
    padding-right:5pt;
    cursor:default;
    white-space: nowrap;
    overflow:hidden;
    height: 18px;
}
.selectMultiControl::before{
    position:absolute;
    background-image: url("../images/newIcons/multiselect.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-color: white;
    content: "";
    top: 2px;
    right: -1px;
    height: 20px;
    width: 20px;
}

.fieldValueChangedMultiselect
{
    border: 1pt solid #c0c0c0;
    color: red;
    font-size: 9pt;
    position:relative;
    display:inline-flex;
    align-items: center;
    background-color:#ffffff;
    padding-left:5pt;
    padding-right:5pt;
    cursor:default;
    white-space: nowrap;
    overflow:hidden;
    height: 18px;
}
.fieldValueChangedMultiselect::before{
    position:absolute;
    background-image: url("../images/newIcons/multiselect.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-color: white;
    content: "";
    top: 2px;
    right: -1px;
    height: 20px;
    width: 20px;
}

/*Option 2*/
.un-selected-row-1 {
    background-color : #bbd1b6;
}
.un-selected-row-2 {
    background-color: #83a879;
}
.comboSelected {
    background-color : #befad9 !important;
}
.un-selected-row-1:hover, .un-selected-row-2:hover {
    background-color : #befad9;
}

.mainHeader
{
    background: linear-gradient(#A0C9DD, #E0EFF7);
    /*background-color: #DFF3FD;*/
}
.mainHeaderSchoolYear
{
    font-size:11pt;
    color:#000000;
    font-weight: 700;
}
.mainHeaderDistrictName
{
    font-size:11pt;
    font-weight: 700;
    color:#000000;
    font-style:italic;
}
.mainHeaderLogoAndProductTitle
{
    font-size: 20pt;
    font-weight: 600;
    color: #00517B;
}
.moduleRows
{
    background-color: #DFF1FC;
    height: 20pt;
}
.categoryRows
{
    background-color: #FFFFFF;
}

.toolbarButton
{
    /*background-color: #DFF3FD;*/
    transition: background-color 150ms linear;
}

.toolbarButton:hover
{
    background-color: #0f74a8;
}

.tab1
{
    background-color: #DFF1FC;
    border-color: #DFF1FC;
    color: #000000;
    font-size: 11pt;
    font-weight: 600;
    border-style:solid;
    border-left-width:1pt;
    border-right-width:1pt;
    border-top-width:1pt;
    border-bottom-width:0;
    cursor:pointer;
    padding-left: 5pt;
    padding-right: 5pt;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    white-space: nowrap;

    transition: background-color 150ms linear;
}

.tab1:hover
{
    background-color: #09628A;
    border-color: #09628A;
    color: #FFFFFF;
    font-size: 11pt;
    font-weight: 600;
    border-style:solid;
    border-left-width:1pt;
    border-right-width:1pt;
    border-top-width:1pt;
    border-bottom-width:0;
    cursor:pointer;
    padding-left: 5pt;
    padding-right: 5pt;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    white-space: nowrap;
}

.tab1Selected
{
    background-color: #09628A;
    border-color: #09628A;
    color: #ffffff;
    font-size: 11pt;
    font-weight: 600;
    border-style:solid;
    border-left-width:1pt;
    border-right-width:1pt;
    border-top-width:1pt;
    border-bottom-width:0;
    cursor:pointer;
    padding-left: 5pt;
    padding-right: 5pt;
    border-radius: 6px;
    white-space: nowrap;
}

.tab2
{
    background-color: #FFFFFF;
    font-weight: 600;
    color: #000000;
    border-radius: 3px 3px 0 0;
    text-align: center;
    font-size: 11pt;
    padding-left: 5pt;
    padding-right: 5pt;
    white-space: nowrap;
    transition: background-color 150ms linear;
}

.tab2:hover
{
    cursor: pointer;
    background: #1D9450;
    white-space: nowrap;
    color: #ffffff;
}

.tab2Selected
{
    background: #1D9450;
    font-size: 11pt;
    cursor: pointer;
    color: #ffffff;
    padding-left: 5pt;
    padding-right: 5pt;
    border-radius: 3px 3px 0 0;
    text-align: center;
    white-space: nowrap;
}

.categoryRows3
{
    background-color: #1b8543;
}

.tab3
{
    background-color: #1b8543;
    font-weight: 600;
    color: #FFFFFF;
    border-radius: 3px 3px 0 0;
    text-align: center;
    font-size: 11pt;
    padding-left: 5pt;
    padding-right: 5pt;
    white-space: nowrap;
    transition: background-color 150ms linear;
}

.tab3:hover
{
    /*box-shadow: #002d03 0 6px 24px 0 inset, rgba(255, 255, 255, 0.901961) 1px 1px 2px -1px;*/
    background-color: #FFFFFF;
    color: #000000;
    cursor: pointer;
    white-space: nowrap;
}

.tab3Selected
{
    background-color: #ffffff;
    font-size: 11pt;
    cursor: pointer;
    color: #000000;
    padding-left: 5pt;
    padding-right: 5pt;
    border-radius: 3px 3px 0 0;
    text-align: center;
    white-space: nowrap;
}


.tab4
{
    background-color: #47a754;
    font-weight: 600;
    color: #ffffff;
    border-radius: 3px 3px 0 0;
    text-align: center;
    font-size: 11pt;
    padding-left: 5pt;
    padding-right: 5pt;
    white-space: nowrap;
    transition: background-color 150ms linear;
}

.tab4row
{
    background: #47a754;
}

.tab4:hover
{
    background: #ffffff;
    color: #000000;
    cursor: pointer;
    white-space: nowrap;
}

.tab4Selected
{
    background: #FFFFFF;
    font-size: 11pt;
    cursor: pointer;
    color: #000000;
    padding-left: 5pt;
    padding-right: 5pt;
    border-radius: 3px 3px 0 0;
    text-align: center;
    white-space: nowrap;
}

.tab5row
{
    background-color: #6dc462;
}


.tab5
{
    background-color: #6dc462;
    color: #ffffff;
    border-radius: 3px 3px 0 0;
    text-align: center;
    font-weight: 600;
    font-size: 11pt;
    padding-left: 5pt;
    padding-right: 5pt;
    white-space: nowrap;
    transition: background-color 150ms linear;
}

.tab5:hover
{
    color: #000000;
    cursor: pointer;
    background: #ffffff;
    white-space: nowrap;
}

.tab5Selected
{

    font-size: 11pt;
    cursor: pointer;
    background: #ffffff;
    color: #000000;
    padding-left: 5pt;
    padding-right: 5pt;
    border-radius: 3px 3px 0 0;
    text-align: center;
    white-space: nowrap;
}


/*  MEDIA QUERIES  */

@media (max-width: 767px)
{
    .fieldsTable.fluid td {
        display: block;
        text-align:left;
    }

    .fieldsTable.fluid td.fieldLabelCell {
        display: inline-block;
        float: left;
        text-align: left;
    }

    .fieldsTable.fluid td.fieldValueCell {
        display: inline-block;
        clear: left;
        text-align: left;
    }

    .fieldsTable.fluid td:not(.fieldsTableSectionHeader)
    {
        margin-left: 5px;
    }
}

@media (min-width: 768px)
{
    .fieldsTable.fluid td {
        display: table-cell;
    }

    .listTableStyle.fluid td{
        display: table-cell;
    }
}

.outlineTable
{
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
    padding-bottom:5px;
    border-bottom: 1pt groove black;
    border-top: 1pt groove black;
    border-left: 1pt groove black;
    border-right: 1pt groove black;
}

/* Classes needed for FT Modal Dialog Boxes */
.ft_modalDialog_glassPane
{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.ft_modalDialog_window
{
    position: absolute;
    background-color: #FAF8F5;
    border: 1px solid #888;
}
.ft_modalDialog_titleBar
{
    margin: 3pt;
    border: 1px solid #1f4c30;
    border-radius: 3pt;
    background-color: #1b8543;
    color: #ffffff;
    font-weight: 600;
    font-size: 11pt;
    height: 20pt;
    width:auto;
}

.ft_modalDialog_titleSpan
{
    float: left;
    margin: 2pt 0 0 5pt;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft_modalDialog_buttonBar
{
    text-align: right;
    margin: 0 5pt 5pt 5pt;
}
.ft_modalDialog_button
{
    color: #19206D;
    background-color: #e0ead7;
    border-radius: 8px;
    border: solid .75pt #47a754;
    font-size: 9pt;
    cursor: pointer;
    padding: 1pt 9pt 1pt 9pt;
    text-decoration: none;
    white-space: nowrap;
    min-height: 20pt;
    margin: 0 5pt 0 0;
}
.ft_modalDialog_button:hover
{
    color: #ffffff;
    background-color: #47a754;
    border: solid .75pt #47a754;
}