/*independent of instance*/
:root {
    --font: 'Arial Nova', Arial, Helvetica, sans-serif;
    --menu-font: 'Segoe UI', Arial, Helvetica, sans-serif;
    --page-bg-color: white;
    --page-footer-bg-color: lightgray;
    --page-readonly-bg-color: #DFDFDF;
    --header-fg-color: white;
    --header2-bg-color: #3F3F3F;
    --header3-bg-color: #6F6F6F;
    --page-bg-color: white; /*#EFF5FC;*/
    --page-border-color: darkgray;
    --section-bg-color: white;
    --section-border-color: #d3d3d3;
    --menu-bg-color: #3F3F3F;
    --menu-fg-color: white;
    --menu-border-color: #4F4F4F;
    --menu-hover-color: lightgoldenrodyellow;
    --menu-selected-color: white;
    --item-active-bg-color: lightgoldenrodyellow;
    --item-active-border-color: #B8B8B8;
    --item-inactive-bg-color: white;
    --item-inactive-fg-color: #888888;
    --item-inactive-border-color: #B8B8B8;
    --toggle-bg-color: #e3e3e3;
    --toggle-fg-color: #333333;
    --toggle-border-color: #d3d3d3;
    --grid-border-color: #d3d3d3;
    --grid-header-fg-color: white;
    --grid-header-active-color: orange;
    --grid-subheader-bg-color: #F0F0F0;
    --grid-subheader-fg-color: black;
    --grid-item-bg-color: white;
    --grid-alt-item-bg-color: #F0F0F0;
    --grid-item-selected-bg-color: lightgoldenrodyellow;
    --grid-footer-bg-color: lightgray;
    --grid-footer-fg-color: black;
}


html, body, form {
    width: 100%;
    height: 100%;
    background-color: var(--page-bg-color);
    font-size: 14pt;
    font-family: var(--font);
}

.blurred{
    filter: blur(1.5rem);
}

table, div {
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

    table tr td {
        padding: 0;
        margin: 0;
    }

/*EMP 7*/
/*layout*/
.scrolling-layout {
    margin:1rem;
    width: inherit;
    min-height: 75.4vh;
    box-sizing:content-box;
}

.accordion-layout {
    width: inherit;
    min-height: 75.4vh;
    box-sizing: content-box;
}

.section-toggle {
    display: grid;
    grid-template-columns: 2rem auto;
    align-items: center;
    background-color: var(--toggle-bg-color);
    border: 1px solid var(--toggle-border-color);
    width: inherit;
    box-sizing: border-box;
    padding:0.25em;
    column-gap: 0;
}

    .section-toggle div.section-toggle-image {
        height: 100%;
        margin: 0.125em 0 0 .25em;
    }

    .section-toggle div.section-toggle-header {
        font-family: var(--font);
        font-size: 0.9rem;
        font-weight: bold;
        color: var(--toggle-fg-color);
        vertical-align: middle;
        padding-left: 0rem;
        min-width: 55rem;
    }


    .section-toggle table tbody tr td .section-toggle-image {
        height: 100%;
        margin: 0.125em 0.25em 0 .25em;
    }

    .section-toggle table tbody tr td.section-toggle-header {
        font-family: var(--font);
        font-size: 0.9rem;
        font-weight: bold;
        color: var(--toggle-fg-color);
        vertical-align: middle;
        padding-left: 0.25rem;
        min-width: 55rem;
    }



.section-content {
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    padding: 0.5rem 0.5rem;
    gap: 1rem;
}


.section-header {
    font-family: var(--menu-font);
    font-size: 1em;
    font-weight: bold;
    color: var(--header-bg-color);
    white-space: nowrap;
    vertical-align: bottom;
}

.section-header-2 {
    font-family: var(--font);
    font-size: 0.9em;
    font-weight: bold;
    color: var(--header2-bg-color);
    vertical-align: bottom;
}

.section-header-3 {
    font-family: var(--menu-font);
    font-size: 0.8em;
    font-weight: bold;
    color: var(--header3-bg-color);
    vertical-align: bottom;
}

.subsection-container {
    display: flex;
    flex-flow: row wrap;
    column-gap: 1rem;
    row-gap: 1rem;
    padding: 0.5rem;
}

    .subsection-container .subsection {
        border: 1px solid var(--section-border-color);
        padding: 0.5rem;
        box-sizing: border-box;
        min-width: 32rem;
    }

        .subsection-container .subsection .line-group {
            padding: 0.25rem 0.25rem;
        }

            .subsection-container .subsection .line-group .simple-line {
                display: grid;
                grid-template-columns: 4rem 25rem;
                align-items: center;
                column-gap: 0.25rem;
                padding: 0.125rem 0;
            }

            .subsection-container .subsection .line-group .compound-line {
                display: grid;
                grid-template-columns: 4rem 25rem;
                align-items: center;
                column-gap: 0.25rem;
                padding: 0.125rem 0;
            }

                .subsection-container .subsection .line-group .compound-line .compound-line-fields {
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    justify-content: space-between;
                    gap: 0.25rem;
                }

.line-input {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--item-active-border-color) !important;
    background-color: var(--item-active-bg-color) !important;
    padding-left: 0.3em !important;
}

.line-select {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--item-active-border-color);
    background-color: var(--item-active-bg-color);
    padding-left: 0.1em;
    font-size: 1em;
}

.info-button {
    background-color: var(--header-bg-color);
    color: var(--header-fg-color);
    font-weight: bold;
    font-size: 1rem;
    margin: 2px;
    padding: 0em;
    border-radius: 0em;
    border: 1px solid var(--header-bg-color);
    font-stretch: extra-expanded;
    height: 1.25rem;
    width: 1.25rem;
}

/*EMP 6 and before*/
.LayoutTable {
    width: 100%;
    /*height: 100%;*/
}

    .LayoutTable tr td {
        /*border:1px solid red;*/
        vertical-align: top;
    }

.Banner {
    background-color: var(--header-bg-color); /* #6F2DA8;*/
    white-space: nowrap;
    height: 2.5em;
}

    .Banner .Menu {
        text-align: left;
        height: 100%;
        vertical-align: middle;
        padding-top: 0.5em;
        padding-left: 0.5em;
    }

    .Banner .AppTitle {
        text-align: right;
        vertical-align: middle;
        color: var(--header-fg-color);
        font-variant: small-caps;
        font-weight: bold;
        padding-right: 1em;
        height: 2em;
    }

.LeftNav {
    background-color: var(--header-bg-color); /*#6F2DA8;*/
    color: white;
    width: 170px !important;
    padding-top: 0.4em;
    min-height:100vh;
}

.QuickSearch {
    /*background-color:#CEE2F6;*/
    /*border:1px solid #d3d3d3;*/
    min-height: 2.5em;
}

.ContentArea {
    margin-top: 0.4em;
    /*min-height: 55em;*/
    vertical-align: top;
}


.Layout{
    margin:0.4em;
    font-size:1em;
}

.LayoutTable tr td.pageSectionHeader, td.pageSectionHeader, .pageSectionHeader {
    font-family: var(--font);
    font-size: 1em;
    font-weight: bold;
    color: var(--header-bg-color);
    white-space: nowrap;
    vertical-align: bottom;
    padding-left: 0.4em;
}

.LayoutTable tr td.pageSectionHeader2, td.pageSectionHeader2, .pageSectionHeader2 {
    font-family: var(--font);
    font-size: 0.9em;
    font-weight: bold;
    color: var(--header2-bg-color);
    vertical-align: bottom;
    padding-left: 0.4em;
}

.LayoutTable tr td.pageSectionHeader3, td.pageSectionHeader3, .pageSectionHeader3 {
    font-family: var(--menu-font);
    font-size: 0.8em;
    font-weight: bold;
    color: var(--header3-bg-color);
    vertical-align: bottom;
    padding-left: 0.4em;
}

table.Section {
    text-align: left;
    background-color: white;
    border-collapse: separate;
    /*border: 1px solid var(--page-border-color);*/
    padding: 0.8em 0.4em 0.4em 0.4em;
    margin: 0 0.4em 0 0.4em;
}

    table.Section tr td, fieldset table tr td {
        padding: 0.2em;
    }

        table.Section tr td.label, 
        fieldset table tr td.label, 
        table.Section tr td span.label, 
        fieldset table tr td.label, 
        .label {
            font-family: var(--font);
            font-size: 0.6rem;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            vertical-align: middle;
        }

table.LineGroup tr td {
    padding: 0.1em 0.2em 0.1em 0.2em;
}

div.ScrollingSection {
    text-align: left;
    background-color: white;
    border-collapse: separate;
    border: 1px solid var(--page-border-color);
    padding: 0.8em 0.4em 0.4em 0.4em;
    margin: 0px 0.4em 0px 0.4em;
    overflow-y: scroll;
}

div.scrolling-section
{
    text-align: left;
    background-color: white;
    border-collapse: separate;
    /*border: 1px solid var(--page-border-color);*/
    padding: 0;
    margin: 0px 0.4em;
    overflow-y: scroll;
    width:fit-content;
}


.LayoutTable > table.Repeater {
    border: 0;
    width: 100%;
    text-align: left;
}




.SectionToggle {
    margin-top: 0.25em;
    background-color: var(--toggle-bg-color);
    border: 1px solid var(--toggle-border-color);
    vertical-align: middle;
    width: inherit;
    box-sizing: border-box;
}

    .SectionToggle .SectionToggleImage {
        height: 100%;
        margin-top: 0.25em;
        margin-left: 0.25em;
    }

    .SectionToggle .SectionToggleHeader {        
        font-family: var(--font);
        font-size: 1rem;
        font-weight: bold;
        color: var(--toggle-fg-color);
        vertical-align: middle;
        padding-left: 0.4rem;
        min-width: 55rem;
    }


.inactiveInput {
    border: 1px solid var(--item-inactive-border-color);
    background-color: var(--item-inactive-bg-color);
    padding-left: 0.2em;
    font-size: 1em;
}


.input {
    border: 1px solid var(--item-active-border-color) !important;
    background-color: var(--item-active-bg-color) !important;
    padding-left: 0.3em !important;
    box-sizing: border-box;
    /*font-size: 1em;*/
}

.input[type="text"]
{
    user-select:all;
}

/*.input,
.input:-webkit-autofill,
.input:-webkit-autofill::first-line,
.input:-webkit-autofill:hover
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
    font-size: 1rem !important;
    font-family: var(--font) !important;
    border: 1px solid var(--item-active-border-color) !important;
    background-color: var(--item-active-bg-color) !important;
    padding-left: 0.1em !important;
}*/




/*.button {
    font-family: var(--font);
    font-size: 1.0em;
    font-weight: normal;
    padding: 0.2em;
}
*/

.select {
    border: 1px solid var(--item-active-border-color);
    background-color: var(--item-active-bg-color);
    padding-left: 0.1em !important;
    font-size: 1em;
    box-sizing:border-box;
}

textarea{
    resize:none;
}

    select.aspNetDisabled, select:disabled, 
    textarea.aspNetDisabled, textarea:disabled,
    input[type=text].aspNetDisabled, input[type=text]:disabled,
    input[type=date].aspNetDisabled, input[type=date]:disabled,
    input[type=time].aspNetDisabled, input[type=time]:disabled {
        background-color: var(--item-inactive-bg-color) !important;
        color: var(--item-inactive-fg-color) !important;
    }


.checkbox {
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    padding-left: 0.2em;
}




.radio, .radiolist {
    font-family: var(--font);
    font-size: 1em;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    padding-left: 0.2em;
}



input[type=radio] + label, .radiolist table > td > label {
    margin-left: 0.4em;
    margin-right: 0.8em;
}




input[type=checkbox] + label {
    margin-left: 0.4em;
}

input[type=checkbox]:focus {
    border: 1px dotted var(--item-active-bg-color);
}


.linkbutton, .linkbutton:visited {
    font-family: var(--font);
    font-size: 1em;
    color: var(--link-fg-color);
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    padding-left: 0.2em;
}

    .linkbutton:hover {
        font-family: var(--font);
        font-size: 1em;
        color: var(--link-active-color);
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        padding-left: 0.2em;
    }


select.ListBox {
    width: 21.5em;
    height: 25em;
    border: 1px solid var(--item-active-border-color);
    font-family: var(--font);
    font-size: 1em;
}



table.Grid {
    font-size: 0.75em;
    font-family: var(--font);
    background: var(--grid-item-bg-color);
    border: var(--grid-border-color) 1px solid;
    margin: 0px;
    padding: 0px;
}

    table.Grid tr td {
        padding: 0.4em;
        border: var(--grid-border-color) 1px solid;
        white-space: nowrap;
        overflow-x: hidden;
        vertical-align: middle;
    }

table.FixedGrid {
    font-size: 0.75em;
    font-family: var(--font);
    background: var(--grid-item-bg-color);
    border: var(--grid-border-color) 1px solid;
    margin: 0px;
    padding: 0px;
}

    table.FixedGrid tr td {
        padding: 0.4em;
        border: var(--grid-border-color) 1px solid;
        white-space: normal;
        vertical-align: middle;
    }

.GridHeader, .GridHeader th {
    font-weight: bold;
    text-align: center;
    background-color: var(--grid-header-bg-color);
    color: var(--grid-header-fg-color);
    font-family: var(--font);
    font-size: 1em;
    padding: 0.5em;
}

    .GridHeader a, .GridHeader a:visited {
        color: var(--grid-header-fg-color);
    }

        .GridHeader a:hover {
            color: var(--grid-header-active-color);
        }



.LeftHeader {
    font-weight: bold;
    text-align: left;
    background-color: var(--grid-subheader-bg-color);
    color: var(--grid-subheader-fg-color);
    font-family: var(--font);
    font-size: 1em;
    white-space: nowrap;
}

.RightHeader {
    font-weight: bold;
    text-align: right;
    background-color: var(--grid-subheader-bg-color);
    color: var(--grid-subheader-fg-color);
    font-family: var(--font);
    font-size: 1em;
    white-space: nowrap;
}

table.Grid tr td.GridItem,
table.Grid tr.GridItem {
    font-size: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--grid-border-color);
    white-space: nowrap;
    overflow-x: hidden;
    background-color: var(--grid-item-bg-color);
}

table.Grid tr td.GridAltItem,
table.Grid tr.GridAltItem {
    font-size: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--grid-border-color);
    white-space: nowrap;
    overflow-x: hidden;
    background-color: var(--grid-alt-item-bg-color);
}

tr.GridItemWrapping > td {
    font-size: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--grid-border-color);
    white-space: normal;
}

.GridSelectedItem {
    background-color: var(--grid-item-selected-bg-color);
    font-weight: bold;
    white-space: nowrap;
}

.GridPager, .GridFooter {
    background: var(--grid-subheader-bg-color);
    font-family: var(--font);
    font-size: 0.6em;
    font-weight: bold;
    text-align: left;
    border: 1px solid var(--grid-border-color);
}








.caption {
    font-family: var(--font);
    font-style: italic;
    font-weight: normal;
    font-size: 0.7rem;
}

.note {
    font-family: var(--font);
    font-size: 0.8rem;
}

.instructions {
    font-family: var(--font);
}

.footnote {
    font-family: var(--font);
    font-size: 0.8rem;
    font-style: italic;
}

.error {
    font-family: var(--font);
    font-weight: bold;
    color: Red;
}

.emphasis {
    font-family: var(--font);
    font-weight: bold;
    color: black;
}

.highlight {
    font-family: var(--font);
    font-weight: bold;
    color: Red;
}

.data {
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: normal;
}

.currency {
    font-family: 'Lucida Console';
    font-weight: normal;
    text-align: right;
    margin-right: 0px;
}

.currencyLeft {
    font-family: 'Lucida Console';
    font-weight: normal;
    text-align: left;
    margin-left: 0px;
}

.width10{
    width:1rem;
}

.width25 {
    width: 2.5rem;
}

.width50 {
    width: 5rem;
}

.width75 {
    width: 7.5rem;
}

.width100 {
    width: 10rem;
}

.width125 {
    width: 12.5rem;
}

.width150 {
    width: 15rem;
}

.width175 {
    width: 17.5rem;
}

.width200 {
    width: 20.0rem;
}

.width250 {
    width: 25.0rem;
}

.width300 {
    width: 30.0rem;
}

.width400 {
    width: 40.0rem;
}

.width500 {
    width: 50.0rem;
}

.width600 {
    width: 60.0rem;
}




.small {
    font-size: 0.8em;
}

.medium {
    font-size: 1em;
}

.large {
    font-size: 1.1em;
}


.color-button, .button, .report-button {
    background-color: var(--header-bg-color);
    color: var(--header-fg-color);
    font-family: var(--font);
    font-weight: normal;
    font-size: 0.9rem;
    margin: 2px;
    padding: 0.25em 1em;
    border-radius: 2em;
    border: 1px solid var(--header-bg-color);
    font-stretch:extra-expanded;
    text-decoration:none;
}

    .report-button {
        padding: 0.5em 1em;
        font-stretch:extra-expanded;
    }

    .color-button:hover, .button:hover, .report-button:hover {
        background-color: var(--header-fg-color);
        color: var(--header-bg-color);
        font-stretch: extra-expanded;
        text-decoration: none;
    }

    .color-button:disabled,
    .button:disabled,
    .report-button:disabled {
        background-color: var(--item-inactive-bg-color) !important;
        color: var(--item-inactive-fg-color) !important;
        border: 1px solid var(--item-inactive-border-color);
        font-stretch: extra-expanded;
        text-decoration: none;
    }

    .link-button:disabled,
    a.aspNetDisabled {
        background-color: var(--item-inactive-bg-color) !important;
        color: var(--item-inactive-fg-color) !important;
        text-decoration: none;
    }

.color-text {
    color: var(--header-bg-color);
    font-weight:bold;
}

.main-menu-item {
    display: inline-block;
    text-align: center;
    background-color: var(--header-bg-color);
    width: 12rem;
    padding: 0.5rem;
    margin: 0.5rem;
    border: 1px solid var(--header-bg-color) !important;
    border-radius: 2rem;
    color: var(--header-fg-color);
    font-family: var(--font);
    font-stretch: extra-expanded;
    text-decoration: none;
}

    .main-menu-item:hover {
        background-color: var(--header-fg-color);
        color: var(--header-bg-color);
        font-stretch: extra-expanded;
    }


.topNavButton {
    min-width: 50pt;
}


.top-menu-item {
    display: inline-block;
    text-align: center;
    background-color: var(--menu-bg-color);
    width: 4rem;
    padding: 0.2rem 0;
    margin-right: 0.25rem;
    border: 1px solid var(--menu-border-color);
    border-radius: 2rem;
    color: var(--menu-fg-color);
    font-family: var(--menu-font);
    font-stretch: extra-expanded;
    font-size: 0.8rem;
    text-decoration: none;
}

    .top-menu-item:hover {
        background-color: var(--menu-hover-color);
        color: var(--menu-bg-color);
        font-stretch: extra-expanded;
    }

.top-menu-item-selected {
    display: inline-block;
    text-align: center;
    background-color: var(--menu-selected-color);
    width: 4rem;
    padding: 0.2rem 0;
    margin-right: 0.25rem;
    border: 1px solid var(--menu-border-color);
    border-radius: 2rem;
    color: var(--menu-bg-color);
    font-family: var(--menu-font);
    font-stretch: extra-expanded;
    font-size: 0.8rem;
    text-decoration: none;
}

.menu-item {
    display: inline-block;
    text-align: right;
    background-color: var(--menu-bg-color);
    width: 8rem;
    padding: 0.5rem;
    margin: 0;
    color: var(--menu-fg-color);
    border: 1px solid var(--menu-border-color);
    font-size: 0.75rem;
    font-family: var(--menu-font);
    font-stretch: extra-expanded;
    text-decoration: none;
}

    .menu-item:hover {
        background-color: var(--menu-hover-color);
        color: var(--menu-bg-color);
    }

.menu-item-selected {
    display: inline-block;
    text-align: right;
    background-color: var(--menu-selected-color);
    width: 8rem;
    padding: 0.5rem;
    margin: 0;
    color: var(--menu-bg-color);
    border: 1px solid var(--menu-selected-color);
    font-size: 0.75rem;
    font-family: var(--menu-font);
    font-stretch: extra-expanded;
    text-decoration: none;
}
/*
.section-toggle {
    display: flex;
    background-color: var(--toggle-bg-color);
    color: var(--toggle-fg-color);
    border: 1px solid var(--toggle-border-color);
    width: 85vw;
    padding: 0.25em;
}

    .section-toggle .section-toggle-image {
    }

    .section-toggle .section-toggle-header {
        font-family: var(--font);
        font-size: 0.9rem;
        font-weight: bold;
        color: var(--toggle-fg-color);
        vertical-align: middle;
        padding-left: 0.4rem;
    }
*/