/*NB: 
    If changes are made to the stylesheet, the version number must be increased where the stylesheet is referenced
    This is to ensure that the client browser loads the changed file if updates are done, otherwise the cached file may be used.
    Current: ?version=1.20220422.1
*/

/*SET BASIC LAYOUT AND FONTS*/
html {
    font-size: 16px;
    font-family: Candara, Optima, Calibri, Arial, sans-serif;
    background-color: #B9C1C9;
    /*background-color: #FBF9E3;*/
}

#header {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px; 
    background-color: white;
}

#body {
    position: absolute;
    width: 100%;
    top: 150px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    z-index: -1;
}

.bodyUnlinked {
    position: absolute;
    width: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    z-index: -1;
}

.flexContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flexContainerH {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.jsError {
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
}

.authError {
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
}

.iframeDoc {
    height: 92%;
    width: 100%;
}

hr {
    display: block;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1px;
    color: #003366;
}

.hrDividerSection {
    border-color: #C0C0C0;
}

.hrDividerRows {
    border-color: #C0C0C0;
    border-style: dashed;
}

.hrDividerRowsSmall {
    margin-top: 1px;
    margin-bottom: 1px;
    border-color: #C0C0C0;
    border-style: dotted;
}

.errorText {
    color: red;
    font-weight: bold;
    font-size: 0.9rem;
}

.sectionHeading {
    color: #003366;
    font-weight: bold;
    font-size: 1.25rem;
}

.mediumHeading {
    color: #003366;
    font-weight: bold;
    font-size: 1.15rem;
}

.smallHeading {
    color: #003366;
    font-weight: bold;
}

.formHeading {
    font-weight: bold;
    font-size: 1.25rem;
    background-color: #8FBC8F;
    color: #003366;
    text-align: center;
    border-radius: 5px;
}

.formHeadingAlt {
    font-weight: bold;
    font-size: 1.25rem;
    background-color: #DCD9A7;
    color: #003366;
    text-align: center;
    border-radius: 5px;
}

.formSubHeading {
    font-weight: bold;
    font-size: 1.15rem;
    background-color: #C0C0C0;
    color: white;
    text-align: center;
    border-radius: 5px;
}

.formSubHeadingNB {
    font-weight: bold;
    font-size: 1.15rem;
    background-color: #A24646;
    color: white;
    text-align: center;
    border-radius: 5px;
}

.circleBackground1Nr {
    font-family: Calibri, Arial, sans-serif;
    text-align: center;
    vertical-align: middle;
    background-color: #003366;
    color: white;
    border-radius: 50%;
    border: 1px solid #003366;
    font-size: 1.25em;
    width: 25px;
    line-height: 25px;
}

.textInstructions {
    font-size: 0.9rem;
    font-style: italic;
    color: #808080;
}

.textFilterHeader {
    color: #198E88;
}

.textInstructionsAlt {
    font-size: 0.9rem;
    color: #808080;
}

.textInactive {
    color: silver;
}

.textActive {
    color: black;
}

.textBoxInactive {
    color: #737373;
    background-color: #ECECEC;
}

.textBoxActive {
    color: black;
    background-color: white;
}

.textImportant {
    color: red;
    font-weight: bold;
}

.textSmall {
    font-size: 0.9rem;
}

.textSmallBold {
    font-weight: bold;
    font-size: 0.9rem;
}

.cellPaddingLeftM {
    padding-left: 20px;
}

.cellPaddingRightM {
    padding-right: 20px;
}

.cellPaddingLeft {
    padding-left: 4px;
}

.cellPaddingRight {
    padding-right: 4px;
}

.cellPaddingTop7px {
    padding-top: 7px;
}

.cellPaddingTop {
    padding-top: 4px;
}

.cellPaddingTopBottom {
    padding-top: 4px;
    padding-bottom: 4px;
}

.cellPaddingBottom {
    padding-bottom: 4px;
}

.cellPaddingInset {
    padding: 5px;
}

.cellPaddingTop10px {
    padding-top: 10px;
}

.cellPaddingTopBottom10px {
    padding-top: 10px;
    padding-bottom: 10px;
}

.rbSpaced input[type="radio"] {
    margin-left: 10px;
}

.rbSpacedWide input[type="radio"] {
    margin-left: 20px;
}

input[type="text"], textarea, input[type="password"], select {
    border: none;
    border-radius: 4px;
    outline: none;
    box-shadow: 0 0 0 1px #DCDCDC;
    background-color: white;
}

    input[type="text"]:focus, textarea:focus, input[type="password"]:focus, input[type="checkbox"]:focus, select:focus {
        border: none;
        border-radius: 4px;
        outline: none;
        box-shadow: 0 0 0 2px #003366;
        background-color: white;
    }

.textBoxLabel {
    border: none;
    border-radius: 4px;
    outline: none;
    background-color: white;
}

.resultOK {
    color: green;
    font-weight: bold;
}

.resultNotOK {
    color: red;
    font-weight: bold;
}

.forceUpperCase {
    text-transform: uppercase;
}

.infoBlock {
    color: red;
    background-color: #F2F2F2;
    padding: 5px;
    border-radius: 5px;
}

/*MODAL*/
.modalPopup {
    background-color: white;
    width: 300px;
    border-radius: 5px;
    border: 3px solid #663300;
}

.modalPopupHeader {
    background-color: #663300;
    color: white;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    padding: 5px;
}

.modalPopupBody, .modalPopupFooter {
    text-align: center;
    padding: 5px;
}

.modalSuccess {
    border: 3px solid green;
}

.modalSuccessBackground {
    background-color: green;
}

.modalSuccessText {
    color: green;
}

.modalError {
    border: 3px solid red;
}

.modalErrorBackground {
    background-color: red;
}

.modalErrorText {
    color: red;
}

.modalCaution {
    border: 3px solid orange;
}

.modalCautionBackground {
    background-color: orange;
}

.modalCautionText {
    color: orange;
}

/*BUTTONS AND LINKS*/
a:link {
    color: #999966;
    text-decoration: none;
}

a:visited {
    color: #999966;
    text-decoration: none;
}

a:hover {
    color: #999966;
    text-decoration: none;
    font-weight: bold;
}

.buttonGeneral {
    white-space: normal;
    height: 25px;
    color: white;
    background-color: #663300;
    font-weight: bold;
    font-family: Candara, Optima, Calibri, Arial, sans-serif;
    border-radius: 5px;
    border-style: hidden;
    border-color: #EAEAEA;
    border-width: 1px;
    cursor: pointer;
}

    .buttonGeneral:hover, .buttonGeneral:active {
        background-color: #512800;
    }

    .buttonGeneral:active {
        background-color: #512800;
        transform: scale(0.95);
    }

    .buttonGeneral:focus {
        outline: none;
        box-shadow: 0 0 0 2px #472300;
    }

    .buttonGeneral[disabled] {
        background-color: #D2D2D2;
        cursor: none;
    }

.buttonSmall {
    white-space: normal;
    height: 20px;
    color: white;
    background-color: #663300;
    font-weight: bold;
    font-family: Candara, Optima, Calibri, Arial, sans-serif;
    border-radius: 4px;
    border-style: hidden;
    border-color: #EAEAEA;
    border-width: 1px;
    cursor: pointer;
}

    .buttonSmall:hover, .buttonSmall:active {
        background-color: #845B32;
    }

    .buttonSmall:active {
        background-color: #845B32;
        transform: scale(0.95);
    }

    .buttonSmall:focus {
        outline: none;
        box-shadow: 0 0 0 2px #472300;
    }

.buttonYes {
    white-space: normal;
    height: 25px;
    color: white;
    background-color: green;
    font-weight: bold;
    font-family: Candara, Optima, Calibri, Arial, sans-serif;
    border-radius: 5px;
    border-style: hidden;
    border-color: #EAEAEA;
    border-width: 1px;
    cursor: pointer;
}

    .buttonYes:hover, .buttonYes:active {
        background-color: #006600;
    }

    .buttonYes:active {
        background-color: #006600;
        transform: scale(0.95);
    }

    .buttonYes:focus {
        outline: none;
        box-shadow: 0 0 0 2px #005900;
    }

.buttonNo {
    white-space: normal;
    height: 25px;
    color: white;
    background-color: red;
    font-weight: bold;
    font-family: Candara, Optima, Calibri, Arial, sans-serif;
    border-radius: 5px;
    border-style: hidden;
    border-color: #EAEAEA;
    border-width: 1px;
    cursor: pointer;
}

    .buttonNo:hover, .buttonNo:active {
        background-color: #CC0000;
    }

    .buttonNo:active {
        background-color: #CC0000;
        transform: scale(0.95);
    }

    .buttonNo:focus {
        outline: none;
        box-shadow: 0 0 0 2px #B20000;
    }

.buttonDismiss {
    white-space: normal;
    height: 25px;
    color: black;
    background-color: #F1F1F1;
    font-weight: bold;
    font-family: Candara, Optima, Calibri, Arial, sans-serif;
    border-radius: 5px;
    border-style: hidden;
    border-color: #EAEAEA;
    border-width: 1px;
    cursor: pointer;
}

    .buttonDismiss:hover, .buttonDismiss:active {
        background-color: #C0C0C0;
    }

    .buttonDismiss:active {
        background-color: #C0C0C0;
        transform: scale(0.95);
    }

    .buttonDismiss:focus {
        outline: none;
        box-shadow: 0 0 0 2px #A8A8A8;
    }

.buttonImage {
    border-style: outset;
    border-color: silver;
    border-width: 1px;
    box-shadow: 1px 1px silver;
}

    .buttonImage:active {
        transform: scale(0.9);
    }

/*MENU*/
.menuStyle, .menuItemStyle {
    background-color: white;
    padding: 0px 5px; /*2 values: [top and bottom] [right and left]. 3 values: [top] [right and left] [bottom]. 4 values: [top] [right] [bottom] [left]*/
}

/*ROUNDED CORNERS*/
.centerDiv {
    border: 2px solid #003366;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: collapse;
    padding: 20px;
    box-shadow: 0px 0px 15px 5px #003366;
    background-color: white;
}

.generalDiv {
    border: 2px solid #003366;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: collapse;
    padding: 4px;
    box-shadow: 0px 0px 15px 5px #003366;
    background-color: white;
}

.mobileDiv {
    border: 2px solid #003366;
    border-radius: 20px;
    overflow: hidden;
    border-collapse: collapse;
    padding: 10px;
    box-shadow: 0px 0px 15px 5px #003366;
    background-color: white; 
    width: 80%; 
    height: 90%;
}

.insetDiv {
    color: #325B84;
    border: 1px solid #003366;
    border-radius: 5px;
    overflow: hidden;
    border-collapse: collapse;
    padding: 4px;
}

/*GENERAL GRID STYLES */
.gv caption {
    font-weight: bold;
    font-size: 1.25rem;
    background-color: #8FBC8F;
    color: #003366;
    text-align: center;
    border-radius: 5px;
}

.gvSub caption {
    font-weight: bold;
    font-size: 1.15rem;
    background-color: #C0C0C0;
    color: white;
    text-align: center;
    border-radius: 5px;
}

.gridNoData {
    text-align: center;
    color: #C0C0C0;
}

.gridHeader th {
    text-align: center;
    font-weight: bold;
    color: #999966;
}   /*If a gridview can be sorted, the color of the text will be styled under a:link*/

.gridHeaderLeft th {
    text-align: left;
    padding-left: 4px;
    font-weight: bold;
    color: #999966;
}   /*If a gridview can be sorted, the color of the text will be styled under a:link*/

.gridHeaderRight th {
    text-align: right;
    font-weight: bold;
    color: #999966;
}   /*If a gridview can be sorted, the color of the text will be styled under a:link*/

.gridRow td {
    text-align: center;
}

.gridRowAlt td {
    text-align: left;
    padding-left: 4px;
    vertical-align: top;
}

.gridRowSelect td {
    text-align: center;
    background-color: #E2DED6;
    font-weight: bold;
}

.gridRowSelectAlt td {
    text-align: left;
    padding-left: 4px;
    vertical-align: top;
    background-color: #E2DED6;
    font-weight: bold;
}

.gridPager {
    background-color: #ECECEC;
}

.gridPager td {
    padding-left: 4px;
    padding-right: 4px;
}

.gridPager span {
    color: black;
    font-weight: bold; 
    font-size: 1.25rem;
}