/*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.20230110.2
*/

/*SET BASIC LAYOUT AND FONTS*/
html {
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#header {
    width: 100%;
    background-color: #003040;
}

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

.bodyInner {
    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;
}

.flexContainerError {
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    font-weight: bold;
    text-align: center;
}

.centerDiv {
    border: 2px solid #003040;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: collapse;
    padding: 20px;
}

.paddingDiv {
    padding: 10px;
}

.divInput {
    margin: 10px 0px; /*2 values: [top and bottom] [right and left]. 3 values: [top] [right and left] [bottom]. 4 values: [top] [right] [bottom] [left]*/
    border: 1px #003040;
    border-style: dotted none; /*2 values: [top and bottom] [right and left]. 3 values: [top] [right and left] [bottom]. 4 values: [top] [right] [bottom] [left]*/
}

.divUpdate {
    margin: 10px 0px; /*2 values: [top and bottom] [right and left]. 3 values: [top] [right and left] [bottom]. 4 values: [top] [right] [bottom] [left]*/
    background-color: #F2F2F2;
}

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

.sectionHeading1stLetter {
    font-size: 2rem;
}

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

.noRecordsText {
    color: #767676;
    font-style: italic;
}

.optionalText {
    color: silver;
    font-style: italic;
    font-size: 0.8rem;
}

.photoHeader {
    color: #808080;
    font-size: 0.8rem;
}

hr {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border-style: dotted;
    border-width: 1px;
    border-color: #003040;
}

.iframeMap {
    height: 500px;
    width: 100%;
}

.imgSize {
    max-width: 100%;
    height: auto;
}

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

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

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

.buttonGeneral {
    white-space: normal;
    height: 25px; 
    color: white;
    background-color: #B33130;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 5px;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    cursor: pointer; 
    margin: 5px;
}

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

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

.buttonYes {
    white-space: normal;
    height: 25px;
    color: white;
    background-color: green;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, 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);
    }

.buttonNo {
    white-space: normal;
    height: 25px;
    color: white;
    background-color: red;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, 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);
    }

.buttonAltBorder {
    border-color: #003040;
}

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

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

/*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;
}