:root {
    /* QLINK Colours */
    --qlink-light-green: #d4dc3c;
    --qlink-light-green-face: #000000;
    --qlink-dark-turquoise: #0b5759;
    --qlink-dark-turquoise-face: #ffffff;
    --qlink-olive-green: #849e76;
    --qlink-olive-green-face: #ffffff;
    --qlink-light-mint: #e7f1ed;
    --qlink-light-mint-face: #000000;
    --qlink-black: #000000;
    --qlink-black-face: #ffffff;
    --qlink-grey: #a6a6a6;
    --qlink-grey-face: #000000;
}

body {
    background-color: #ffffff;
    font-family: Arial, sans-serif !important;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
}

button,
input[type=submit],
input[type=button],
input[type=reset] {
    border: 1px solid transparent !important;
    font-weight: 500 !important;
    padding: 2px 2px;
    background-color: var(--qlink-light-green) !important;
    color: var(--qlink-light-green-face) !important;
}

    button:hover,
    input[type=submit]:hover,
    input[type=button]:hover,
    input[type=reset]:hover,
    button:focus,
    input[type=submit]:focus,
    input[type=button]:focus,
    input[type=reset]:focus {
        border: 1px solid var(--qlink-black) !important;
        font-weight: 500 !important;
        padding: 2px 2px;
        background-color: var(--qlink-light-green) !important;
        color: var(--qlink-light-green-face) !important;
    }

    button:disabled,
    input[type=submit]:disabled,
    input[type=button]:disabled,
    input[type=reset]:disabled {
        border: 1px solid transparent !important;
        color: var(--qlink-gray) !important;
    }

label {
    padding: 3px 3px;
}

input[type=text],
input[type=password] {
    border: 1px solid !important;
    padding: 2px 2px;
}

    input[type=text]:focus,
    input[type=password]:focus {
        border: 1px solid var(--qlink-light-green) !important;
        padding: 2px 2px;
    }

input:disabled {
    color: #AAAAAA;
}

select:disabled {
    color: #AAAAAA;
}

a[disabled] {
    color: #BBBBBB;
}

.MainMenuRow {
    text-indent: 10px;
    background-color: var(--qlink-light-green) !important;
    color: var(--qlink-light-green-face) !important;
    padding: 0;
}

.StaticMenuItem {
    color: var(--qlink-light-green-face) !important;
    height: 20px;
    font-weight: bold;
}

    .StaticMenuItem:hover {
        color: var(--qlink-dark-turquoise) !important;
    }

.DynamicMenuItem {
    color: var(--qlink-light-green-face);
    width: 255px;
    height: 20px;
    background-color: var(--qlink-light-green);
    padding: 2px 0;
}

    .DynamicMenuItem:hover a {
        background-color: var(--qlink-dark-turquoise) !important;
    }

        .DynamicMenuItem:disabled a:disabled {
            background-color: var(--qlink-dark-turquoise) !important;
            cursor: not-allowed !important;
        }

    .DynamicMenuItem:disabled {
        background-color: var(--qlink-dark-turquoise) !important;
        cursor: not-allowed !important;
        color: var(--qlink-gray) !important;
    }

    .DynamicMenuItem:hover:not([disabled]) {
        background-color: var(--qlink-dark-turquoise);
        color: var(--qlink-dark-turquoise-face);
    }

        .DynamicMenuItem:hover:not([disabled]) a:not([disabled]) {
            background-color: var(--qlink-dark-turquoise);
            color: var(--qlink-dark-turquoise-face);
        }

    .DynamicMenuItem:hover img:hover {
        background-color: white;
        color: var(--qlink-dark-turquoise-face);
        border-radius: 50%;
    }

    .DynamicMenuItem:hover img {
        background-color: white;
        color: var(--qlink-dark-turquoise-face);
        border-radius: 50%;
    }

/* IE 8 Fix */
.DynamicMenuStyle {
    z-index: 1000;
    background-color: var(--qlink-light-green);
}

.DynamicHoverStyle {
    color: var(--qlink-dark-turquoise-face);
    width: 255px;
    height: 20px;
    background-color: var(--qlink-dark-turquoise-face);
}

.PageHeader {
    vertical-align: middle;
    font-size: 3em;
    font-weight: bold;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qlink-black);
    text-align: center;
}

.SystemHeader {
    vertical-align: top;
    font-size: 18px;
    font-weight: bold;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qlink-black);
    text-align: center;
}

.PageSubHeader {
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qlink-black);
    text-align: center;
}

.HeaderSignedIn {
    vertical-align: middle;
    font-size: 10px;
    font-style: italic;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: right;
}

.HeaderSupport {
    vertical-align: middle;
    font-size: 10px;
    font-weight: normal;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: right;
}

.PageFooter {
    vertical-align: middle;
    font-size: 10px;
    font-weight: normal;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
}

.FormFooter {
    vertical-align: middle;
    font-size: 12px;
    font-weight: normal;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qlink-black);
    text-align: center;
}

.FormHeader {
    vertical-align: middle;
    text-indent: 2px;
    font-size: 11px;
    font-weight: bold;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qlink-dark-turquoise-face);
    line-height: 20px;
    background-color: var(--qlink-dark-turquoise); /* fallback for old browsers */
}

.FormHeader2 {
    vertical-align: middle;
    text-align: center;
    font-size: 9pt;
    height: 20px;
    font-weight: bold;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qlink-dark-turquoise-face);
    background-color: var(--qlink-dark-turquoise);
    line-height: 16px;
}

.FormLabel {
    font-size: 11px;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
}

.FormLabelReqd {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
}

.TableLabelHint {
    color: #222222;
    font-size: 10px;
}

.TextInput {
    height: auto;
    font-size: 11px;
    width: -webkit-fill-available;
}

.TextInput:focus {
    width: stretch;
}

.clsButton {
    height: auto;
    width: 105px;
    font-size: 11px;
}

/*    .clsButton:disabled {
        border: 1px solid transparent !important;
        background-color: var(--qlink-grey);
        color: var(--qlink-light-green-face);
        background: var(--nutun-gray-light) !important;
    }
*/
.clsWarning {
    background-color: var(--qlink-olive-green) !important;
    color: var(--qlink-olive-green-face) !important;
    height: auto;
    width: 105px;
    font-size: 11px;
}

    .clsWarning:disabled {
        border-color: var(--qlink-gray) !important;
        color: var(--qlink-gray) !important;
        background: var(--qlink-light-mint) !important;
    }

.DropDown {
    background-color: #ffffff;
    height: auto;
    font-size: 11px;
    color: var(--qlink-black);
}

table {
    font-size: 11px;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
}

a {
    color: var(--qlink-dark-turquoise);
}

.LinkHeader {
    color: #ffffff;
}

.HighlightRow {
    background-color: #F0F0F0;
}

.LowlightRow {
    background-color: #ffffff;
}

.MouseOverRow {
    background-color: silver;
}

.lblError {
    color: Red;
    font-weight: bold;
}

.lblSuccess {
    color: Green;
}

.lblNotice {
    color: Teal;
}

.smallgrey {
    color: #999999;
}
/* Shaded field items */
.shaded {
    cursor: default;
    color: var(--qlink-black) !important;
    font-size: 13pt;
    font-weight: normal;
    background-color: var(--qlink-light-green) !important;
    text-align: center;
    width: 1.5rem;
    border: 1px solid var(--qlink-dark-turquoise) !important;
}

input[type=password].shaded:focus,
input[type=password].shaded:active {
    border: 1px solid var(--qlink-dark-turquoise) !important;
}

/* Shaded field items */
.shadedlarge {
    color: var(--qlink-black) !important;
    font-size: 13pt;
    font-weight: normal;
    background-color: var(--qlink-light-green) !important;
    text-align: center;
    width: 1.5rem;
    border: 1px solid var(--qlink-dark-turquoise) !important;
}
/* Shaded field items */
.shadedbold {
    color: var(--qlink-black) !important;
    font-size: 13pt;
    font-weight: bold;
    background-color: var(--qlink-light-green) !important;
    text-align: center;
    width: 1.5rem;
    border: 1px solid var(--qlink-dark-turquoise) !important;
}

.shadedlarge:disabled {
    background-color: var(--qlink-gray) !important;
    color: var(--qlink-gray-face);
    border: 1px solid var(--qlink-dark-turquoise) !important;
}

.shaded:disabled,
.shadedbold:disabled {
    background-color: var(--qlink-light-green) !important;
    color: var(--qlink-black) !important;
    border: 1px solid var(--qlink-dark-turquoise) !important;
}

.QueryWindow {
    background-color: #f5f4f4;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
}

.HiddenControls {
    display: none;
    visibility: hidden;
}

.WaitLabel {
    background-color: #CFDBF3;
    text-align: center;
    font-size: large;
    font-weight: bold;
    font-style: italic;
}

.overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=70);
    opacity: 0.70;
    -moz-opacity: 0.70;
}

* html .overlay {
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
}

.loader {
    z-index: 100;
    position: fixed;
    width: 120px;
    margin-left: -60px;
    top: 50%;
    left: 50%;
}

* html .loader {
    position: absolute;
    margin-top: expression((document.body.scrollHeight / 4) + (0 - parseInt(this.offsetParent.clientHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)) + 'px');
}

.loginCap div, .loginCap img {
    height: 35px !important;
    width: 141px !important;
}

:focus-visible {
    outline: none;
    /*outline: -webkit-focus-ring-color auto 1px;*/
    /*outline-color: -webkit-focus-ring-color;
	outline-style: auto;
	outline-width: 1px;*/
}

.vCenter {
    vertical-align: middle;
}

.ajax__calendar .ajax__calendar_disabled .ajax__calendar_day {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--qlink-grey) !important;
}

.ajax__calendar .ajax__calendar_active .ajax__calendar_day {
    color: var(--qlink-light-green-face) !important;
    background-color: var(--qlink-light-green) !important;
    font-weight: 500 !important;
}

.ajax__calendar .ajax__calendar_other .ajax__calendar_day {
    color: var(--qlink-dark-turquoise) !important;
}

.ajax__calendar_day {
    color: var(--qlink-black) !important;
}

td.ajax__calendar_hover .ajax__calendar_day, 
td.ajax__calendar_hover div.ajax__calendar_month, 
td.ajax__calendar_hover div.ajax__calendar_year {
    border-color: var(--qlink-dark-turquoise) !important;
    background-color: transparent !important;
    color: var(--qlink-black) !important;
    font-weight: 500 !important;
}

td.ajax__calendar_active .ajax__calendar_day,
td.ajax__calendar_active div.ajax__calendar_month,
td.ajax__calendar_active div.ajax__calendar_year {
    color: var(--qlink-light-green-face) !important;
    border-block-color: var(--qlink-dark-turquoise) !important;
    background-color: var(--qlink-light-green) !important;
    font-weight: 500 !important;
}

td.ajax__calendar_disabled div.ajax__calendar_month,
td.ajax__calendar_disabled div.ajax__calendar_year {
    background-color: var(--qlink-gray) !important;
    color: var(--qlink-dark-turquoise) !important;
    font-weight: 900 !important;
}

div.ajax__calendar_hover .ajax__calendar_title {
    color: var(--qlink-dark-turquoise) !important;
}

table.DynamicMenuItem td img {
    background-color: white;
    border-radius: 50%;
}

select:focus option:checked,
select:focus option::selection {
    background-color: var(--qlink-light-green) !important;
}

select option:checked,
select option::selection {
    background-color: var(--qlink-light-green) !important;
}

select option:hover {
    background-color: var(--qlink-light-green) !important;
    color: var(--qlink-dark-turquoise) !important;
}

.pagination {
    color: #000000;
    display: inline-block;
    font-size: 9pt;
    padding-top: 0.1rem;
    text-align: center;
    width: 1.2rem;
    height: 1.1rem;
    vertical-align: middle;
    border-radius: 0.2rem;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    text-decoration: none;
}

a.pagination:hover {
    border-color: var(--qlink-dark-turquoise);
}

a.pagination.nav-direction {
    cursor: pointer;
    width: 30px;
}

a.pagination.nav-direction:hover {
    /*border-color: transparent !important;*/
    cursor: pointer;
}

span.pagination.nav-direction {
    cursor: no-drop;
    margin: 0 0.4rem;
}

.pagination.page-current {
    font-weight: 600;
    color: var(--qlink-light-green-face) !important;
    cursor: no-drop;
    border: 1px solid var(--qlink-dark-turquoise) !important;
    background-color: var(--qlink-light-green) !important;
}

.pagination-img {
    margin: 0 0.2rem;
    height: 0.75rem;
    cursor: pointer;
}