﻿/*               */
/*   FLEXBOXES   */
/*               */
.div-container-across {
    display: flex;
    flex-direction: row;
}

.div-container-down {
    display: flex;
    flex-direction: column;
}



/*              */
/*   PADDING   */
/*              */
.padding-xxsmall {
    padding: 1px 1px 1px 1px;
}

.padding-xsmall {
    padding: 3px 3px 3px 3px;
}

.padding-small {
    padding: 5px 5px 5px 5px;
}

.padding-smallMedium {
    padding: 7px 7px 7px 7px;
}

.padding-mediumSmall {
    padding: 7px 7px 7px 7px;
}

.padding-standard {
    padding: 10px 10px 10px 10px;
}

.padding-medium {
    padding: 10px 10px 10px 10px;
}

.padding-large {
    padding: 20px 20px 20px 20px;
}



/*             */
/*   BORDERS   */
/*             */
.border-standardRound {
    border: 1px solid black;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
}

.border-standardRoundLight {
    border: 1px solid #E0E0E0;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
}
.border-standardRoundMedium {
    border: 1px solid #A0A0A0;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
}

.border-standardRoundLightNoPadding {
    border: 1px solid #E0E0E0;
    border-radius: 5px 5px 5px 5px;
}
.border-standardRoundMediumNoPadding {
    border: 1px solid #A0A0A0;
    border-radius: 5px 5px 5px 5px;
}

.border-standardRoundNoPadding {
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
}

.border-thinRound {
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    border-radius: 3px 3px 3px 3px;
}

.border-standardSquare {
    border: 1px solid black;
}

.border-thick {
    border: 3px solid black;
}

.border-xthick {
    border: 5px solid black;
}

.border-xthickBlue {
    border: 5px solid blue;
}

.border-medium {
    border: 2px solid black;
}

.border-light {
    border: 1px solid gray;
}
.border-hintGray {
    border: 1px solid #a8a8a8;
}

.border-hintGreen {
    border: 1px solid #f0fff0;
}

.border-thinBlue {
    border: 1px solid blue;
}

.border-fancy {
    border: 5px double black;
}

.border-none {
    border: none;
}

.border-invisible {
    border: none;
}

.radius-small {
    border-radius: 3px 3px 3px 3px;
}

.radius-medium {
    border-radius: 5px 5px 5px 5px;
}

.radius-large {
    border-radius: 10px 10px 10px 10px;
}

.shadowLight {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}



/*                               */
/*   BACKGROUNDS   */
/*                               */
.background-seaweedGreen {
    background-color: #223A44;
}

.background-223A44 {
    background-color: #223A44;
}

.background-comfortBlue {
    background-color: #F5F8FF;
}

.background-blue {
    background-color: blue;
}
.background-darkBlue {
    background-color: darkblue;
}

.background-lightGray {
    background-color: #DDDDDD;
}
.background-lightGray2 {
    background-color: #BBBBBB;
}
.background-mediumGray {
    background-color: #AAAAAA;
}
.background-gray {
    background-color: #555555;
}
.background-darkGray {
    background-color: #222222;
}

.background-green {
    background-color: green;
}
.background-Green {
    background-color: green;
}
.background-mediumGreen {
    background-color: #99BB99;
}
.background-darkGreen {
    background-color: darkgreen;
}

.background-red {
    background-color: red;
}
.background-darkred {
    background-color: darkred;
}

.background-black {
    background-color: black;
}

.background-blueGray {
    background-color: #557799;
}
.background-grayBlue {
    background-color: #557799;
}

.background-white {
    background-color: white;
}
.background-offWhite {
    background-color: #F3F3F3;
}

.background-yellow {
    background-color: yellow;
}


.background-lightBlue {
    background-color: #AACCEE;
}
.background-lightBlue2 {
    background-color: #99BBDD;
}


.background-hintGreen {
    background-color: #EEFFEE;
}

.background-hintGreen2 {
    background-color: #E0FFE0;
}

.background-ultraHintGreen {
    background-color: #F8FFF8;
}

.background-ultraHintGreen2 {
    background-color: #F3FFF3;
}
.background-lightGreen {
    background-color: #E0FFE0;
}
.background-lightGreen2 {
    background-color: #D8FFD8;
}

.background-lightRed {
    background-color: #FFCCCC;
}

.background-lightRed2 {
    background-color: #FF8888;
}

.background-lightYellow {
    background-color: lightyellow;
}

.background-hintBlue {
    background-color: #EEEEFF;
}

.background-hintBlue2 {
    background-color: #E0E0F0;
}

.background-hintGray {
    background-color: #FBFBFB;
}

.background-hintGray2 {
    background-color: #E8E8E8;
}


.background-hintRed {
    background-color: #FFEEEE;
}
.background-hintRed2 {
    background-color: #FFE0E0;
}

.background-transparent {
    background-color: transparent;
}

/*               */
/*   Container   */
/*               */
.divContainer-bordered {
    border: 1px solid black;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
}

.divContainer-borderedWhite {
    border: 1px solid black;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
    background-color: white;
}

.divSubContainer-bordered {
    border: 1px solid black;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial;
    font-size: medium;
}

.divSubContainer-borderedWhite {
    border: 1px solid black;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial;
    font-size: medium;
    background-color: white;
}

.divSubContainer-borderedHintGreen {
    border: 1px solid black;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial;
    font-size: medium;
    background-color: #EEFFEE;
}

.divSubContainer-borderedHintGreen2 {
    border: 1px solid black;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial;
    font-size: medium;
    background-color: #E0FFE0;
}

.divSubContainer-borderedHintBlue {
    border: 1px solid black;
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial;
    font-size: medium;
    background-color: #EEEEFF;
}



/*          */
/*   TEXT   */
/*          */
.title-whiteOnDarkBlue {
    font-family: Arial;
    font-weight: bold;
    background-color: darkblue;
    color: white;
}

.title-standard {
    font-family: Arial;
    font-weight: bold;
    background-color: darkblue;
    color: white;
    padding: 5px 5px 5px 5px;
    border: 1px solid gray;
}

.title-largeWhiteOnBlueGray {
    font-family: Arial;
    font-size: large;
    font-weight: bold;
    text-align: left;
    background-color: #557799;
    color: white;
    padding: 5px 5px 5px 5px;
}

.arial {
    font-family: Arial;
}

.courier {
    font-family: Courier New, Courier, monospace;
}

.pt5 {
    font-size: 5pt;
}

.pt6 {
    font-size: 6pt;
}

.pt7 {
    font-size: 7pt;
}

.pt8 {
    font-size: 8pt;
}

.pt9 {
    font-size: 9pt;
}

.pt10 {
    font-size: 10pt;
}

.pt11 {
    font-size: 11pt;
}

.pt12 {
    font-size: 12pt;
}

.pt14 {
    font-size: 14pt;
}

.pt18 {
    font-size: 18pt;
}

.pt24 {
    font-size: 24pt;
}

.pt32 {
    font-size: 32pt;
}

.pt48 {
    font-size: 48pt;
}

.font-arialXSmall {
    font-family: Arial;
    font-size: x-small;
}

.font-arialSmall {
    font-family: Arial;
    font-size: small;
}

.font-arialMedium {
    font-family: Arial;
    font-size: medium;
}

.font-arialLarge {
    font-family: Arial;
    font-size: large;
}

.font-arialXLarge {
    font-family: Arial;
    font-size: x-large;
}

.font-arialXXLarge {
    font-family: Arial;
    font-size: xx-large;
}

.font-courierXSmall {
    font-family: Courier New, Courier, monospace;
    font-size: x-small;
}

.font-courierSmall {
    font-family: Courier New, Courier, monospace;
    font-size: small;
}

.font-courierMedium {
    font-family: Courier New, Courier, monospace;
    font-size: medium;
}

.font-courierLarge {
    font-family: Courier New, Courier, monospace;
    font-size: large;
}

.font-courierXLarge {
    font-family: Courier New, Courier, monospace;
    font-size: x-large;
}

.font-courierXXLarge {
    font-family: Courier New, Courier, monospace;
    font-size: xx-large;
}

.text-red {
    color: darkred;
}

.text-blue {
    color: darkblue;
}

.text-lightBlue {
    color: lightblue;
}

.text-black {
    color: black;
}

.text-gray {
    color: gray;
}

.text-lightGray {
    color: lightgray;
}

.text-darkGray {
    color:#222222;
}

.text-green {
    color: darkgreen;
}

.text-yellow {
    color: yellow;
}

.text-white {
    color: white;
}

.normal {
    font-weight: normal;
}

.bold {
    font-weight: bold;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.top {
    vertical-align: top;
}

.middle {
    vertical-align: middle;
}

.wrap {
    white-space: normal;
}

.nowrap {
    white-space: nowrap;
}

.underline {
    text-decoration: underline;
}

.indent-small {
    text-indent: 10px;
}

.indent-medium {
    text-indent: 20px;
}

.indent-large {
    text-indent: 50px;
}

.pixelIndent-small {
    width:10px;
}

.pixelIndent-medium {
    width:20px;
}

.arial.pixelIndent-large {
    width:50px;
}

.spacing-normal {
    letter-spacing: normal;
}

.spacing-small {
    letter-spacing: 1px;
}

.spacing-medium {
    letter-spacing: 2px;
}

.spacing-wide {
    letter-spacing: 4px;
}

.spacing-1px {
    letter-spacing: 1px;
}

.spacing-2px {
    letter-spacing: 2px;
}

.spacing-3px {
    letter-spacing: 3px;
}

.spacing-4px {
    letter-spacing: 4px;
}


/*              */
/*   CONTROLS   */
/*              */
.modal-background {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    -moz-opacity: 0.7
}

.modal-popup {
    font-family: Arial;
    font-size: 12pt;
    background-color: #F8FFF8;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    border-radius: 5px 5px;
    padding: 8px 8px 8px 8px;
    width: 500px;
}

.modal-hidden {
}

.button-large {
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    font-family: Arial;
    font-size: large;
    padding: 5px 5px 5px 5px;
}

.button-medium {
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    font-family: Arial;
    font-size: medium;
    padding: 5px 5px 5px 5px;
}

.button-small {
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    font-family: Arial;
    font-size: small;
    padding: 5px 5px 5px 5px;
}

.button-show {
    background-color: white;
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    border-radius: 4px 4px;
    color: black;
    font-family: Arial;
    font-size: 10pt;
}

.button-hide {
    display: none;
}

.button-gray-gradient {
    background: linear-gradient(to bottom, #fcfcfc 0%, #e4e4e4 35%, #d4d4d4 65%, #fcfcfc 100%);
    color: #333;
    border: 1px solid #c0c0c0;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button-gray-gradient:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #ececec 35%, #dcdcdc 65%, #ffffff 100%);
    border-color: #b0b0b0;
}

.buttonTight-gray-gradient {
    background: linear-gradient(to bottom, #fcfcfc 0%, #e4e4e4 35%, #d4d4d4 65%, #fcfcfc 100%);
    color: #333;
    border: 1px solid #c0c0c0;
    padding: 3px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.buttonTight-gray-gradient:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #ececec 35%, #dcdcdc 65%, #ffffff 100%);
    border-color: #b0b0b0;
}

button {
    background: linear-gradient(to bottom, #ffffff 0%, #ececec 35%, #dcdcdc 65%, #ffffff 100%);
    color: black;
    border: 1px solid #c0c0c0;
}
    button:hover {
        background: linear-gradient(to bottom, #ffffff 0%, #ececec 35%, #dcdcdc 65%, #ffffff 100%);
        color: black;
        border-color: #070707;
    }
input[type="submit"] {
    background: linear-gradient(to bottom, #ffffff 0%, #ececec 35%, #dcdcdc 65%, #ffffff 100%);
    color: black;
    border: 1px solid #808080;
}
    input[type="submit"]:hover {
        background: linear-gradient(to bottom, #ffffff 0%, #ececec 35%, #dcdcdc 65%, #ffffff 100%);
        color: black;
        border-color: #070707;
    }

.checkbox-medium {
    font-family: Arial;
    font-size: medium;
    padding: 2px 2px 2px 2px;
}

.radio-medium {
    font-family: Arial;
    font-size: medium;
    padding: 2px 2px 2px 2px;
}

.tab-unselected {
    background-color: lightgray;
    color: gray;
    border: 1px solid darkgray;
}

.tab-selected {
    background-color: white;
    color: black;
    border: 2px solid black;
}


/*                */
/*   VISIBILITY   */
/*                */
.hidden {
    display: none;
}

.hide {
    display: none;
}

.visible {
    display: inline-block;
}

.show {
    display: normal;
}

.scrollY {
    overflow-y: scroll;
}

.scrollX {
    overflow-x: scroll;
}

.scroll {
    overflow: scroll;
}


/*                */
/*   PLACEMENT    */
/*                */
.fullWidth {
    width: 100%;
}

.centerPage {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
}

.shadow {
    box-shadow: 10px 10px #888888;
}

/*                     */
/*    TABLE STYLING    */
/*                     */
.border-collapse {
    border-collapse: collapse;
}

.standardSmall-heading {
    border: 1px solid black;
    background-color: #EEEEFF;
    font-family: Arial;
    font-size: 9pt;
    padding: 3px 3px 3px 3px;
    color: black;
}
.standardSmall-cell {
    border: 1px solid gray;
    background-color: white;
    font-family: Arial;
    font-size: 9pt;
    padding: 3px 3px 3px 3px;
    color: black;
}

.heading-aboveSmall {
    border: 1px solid black;
    background-color: #EEEEFF;
    font-family: Arial;
    font-size: 9pt;
    padding: 3px 3px 3px 3px;
    color: black;
}

.heading-major {
    border: 1px solid black;
    background-color: darkblue;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
    color: white;
}

.heading-standard {
    border: 1px solid black;
    background-color: lightblue;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    color: black;
}

.heading-standardArialMediumLightBlueBold {
    border: 1px solid black;
    background-color: lightblue;
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
    color: black;
    padding: 5px 5px 5px 5px;
}

.heading-standardArialMediumLightBlueBoldPadded {
    border: 1px solid gray;
    background-color: #AACCEE;
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
    padding: 5px 5px 5px 5px;
}

.heading-minor {
    border: 1px solid gray;
    background-color: #DDEEFF;
    font-family: Arial;
    font-size: 10pt;
    font-weight: normal;
    color: black;
}

.heading-borderedLightBlue {
    border: 1px solid gray;
    padding: 5px 5px 5px 5px;
    background-color: #EEEEFF;
    white-space: nowrap;
    font-family: Arial;
    font-size: small;
    color: black;
    font-weight: bold;
}

.cell-borderedWhite {
    border: 1px solid gray;
    padding: 5px 5px 5px 5px;
    background-color: white;
    font-family: Arial;
    font-size: small;
    color: black;
    font-weight: normal;
}

.cellField-standardNoWtNoAlign {
    border: 1px solid gray;
    background-color: #EEFFEE;
    font-family: Arial;
    font-size: medium;
    color: black;
    padding: 5px 5px 5px 5px;
}

.cellField-standardAltNoWtNoAlign {
    border: 1px solid gray;
    background-color: #E0FFE0;
    font-family: Arial;
    font-size: medium;
    color: black;
    padding: 5px 5px 5px 5px;
}

.cellValue-standard {
    border: 1px solid gray;
    background-color: white;
    font-family: Arial;
    font-size: medium;
    color: black;
}

.cellWatermark-standardNoWtNoSz {
    background-color: #FBFBFB;
    font-family: Arial;
    text-align: center;
    color: gray;
    width: 100%;
}

.cellWatermark-standard {
    background-color: #FBFBFB;
    font-family: Arial;
    font-size: small;
    text-align: center;
    color: gray;
    width: 100%;
}

.cellBoxed-white {
    border: 1px solid gray;
    background-color: white;
    font-family: Arial;
    font-size: 10pt;
    font-weight: normal;
    color: black;
}

.cell-boxedWhite {
    border: 1px solid gray;
    background-color: white;
    font-family: Arial;
    font-size: 10pt;
    font-weight: normal;
    color: black;
}

.footer-standard {
    border: 1px solid black;
    background-color: blue;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    color: black;
    text-align: right;
}

.footer-standardGrayBlue {
    background-color: #BBBBCC;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    color: black;
    text-align: right;
    padding: 10px 10px 10px 10px;
}

/*                     */
/*    Fillable Form STYLING    */
/*                     */
.form-title {
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
    color: black;
}

.form-table {
    border: 1px solid gray;
    border-collapse: collapse;
    width: 100%;
}

.form-columnHeader {
    border: 1px solid black;
    background-color: lightblue;
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
    color: black;
}

.form-columnHeader-small {
    border: 1px solid black;
    background-color: lightblue;
    font-family: Arial;
    font-size: small;
    font-weight: bold;
    color: black;
}

.form-heading-line {
    background-color: #EEFFEE;
    font-family: Arial;
    font-size: small;
}

.form-heading-altLine {
    background-color: #E0FFE0;
    font-family: Arial;
    font-size: small;
}

.form-footer {
    background-color: #E8E8E0;
    font-family: Arial;
    font-size: small;
    text-align: right;
    padding: 5px 5px 5px 5px;
}

.inlineBlock {
    display: inline-block;
}

.modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal_content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    z-index: 1001;
}

.divShadowSoft_small {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.divShadowSoft_medium {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.divShadowSoft_large {
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
}

.menuDiv {
    border: 1px solid black;
    padding: 5px 10px 5px 10px;
    border-radius: 5px 5px 5px 5px;
    text-align: right;
    font-family: Arial;
    font-size: small;
    color: #222222;
    background-color: #E0E0F0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.menuDiv:hover {
    border: 1px solid black;
    padding: 5px 10px 5px 10px;
    border-radius: 5px 5px 5px 5px;
    text-align: right;
    font-family: Arial;
    font-size: small;
    font-weight: bold;
    color: #222222;
    background-color: #E0E0F0;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.menuDivSelected {
    border: 1px solid black;
    padding: 5px 10px 5px 10px;
    border-radius: 5px 5px 5px 5px;
    text-align: right;
    font-family: Arial;
    font-size: small;
    font-weight: bold;
    color: #222222;
    background-color: #FFFFE0;
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
}

.unselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
}