@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter/Inter-VariableFont_slnt,wght.ttf) format('truetype');
    font-weight: 100 1000;
    font-stretch: 25% 151%
}


:root {
    --hsl-color-green-light-light: 66, 70%, 94%;
    --hsl-color-blue-light-light: 212, 47%, 94%;
    --hsl-color-grey-light-light: 0, 0%, 94%;
    --hsl-color-red-light-light: 349, 70%, 94%;
    --hsl-color-green-light: 66, 70%, 84%;
    --hsl-color-yellow-light: 59, 100%, 84%;
    --hsl-color-blue-light: 212, 47%, 84%;
    --hsl-color-grey-light: 0, 0%, 84%;
    --hsl-color-red-light: 349, 70%, 84%;
    --hsl-color-green: 66, 70%, 64%;
    --hsl-color-yellow: 59, 70%, 64%;
    --hsl-color-blue: 212, 36%, 64%;
    --hsl-color-grey: 0, 0%, 64%;
    --hsl-color-red: 349, 70%, 64%;
    --hsl-color-green-dark: 66, 70%, 34%;
    --hsl-color-yellow-dark: 59, 100%, 34%;
    --hsl-color-blue-dark: 212, 47%, 34%;
    --hsl-color-grey-dark: 0, 0%, 34%;
    --hsl-color-red-dark: 349, 100%, 34%;
    --hsl-color-orange-light-light: 29, 100%, 87%;
    --hsl-color-orange-light: 28, 100%, 79%;
    --hsl-color-orange: 28, 73%, 65%;
    --hsl-color-orange-dark: 28, 55%, 51%;
    --hsl-color-orange-dark-dark: 28, 68%, 38%;
    --hsl-color-black: 0, 0%, 0%;
    --hsl-color-white: 0, 0%, 100%;
    --hsl-color-text-dark: 0, 0%, 20%;
    --hsl-color-text-light: 0, 0%, 99%;
    --theme-color-green-light-light: hsl(var(--hsl-color-green-light-light));
    --theme-color-green-light: hsl(var(--hsl-color-green-light));
    --theme-color-green: hsl(var(--hsl-color-green));
    --theme-color-green-dark: hsl(var(--hsl-color-green-dark));
    --theme-color-yellow-light: hsl(var(--hsl-color-yellow-light));
    --theme-color-yellow: hsl(var(--hsl-color-yellow));
    --theme-color-yellow-dark: hsl(var(--hsl-color-yellow-dark));
    --theme-color-orange-light-light: hsl(var(--hsl-color-orange-light-light));
    --theme-color-orange-light: hsl(var(--hsl-color-orange-light));
    --theme-color-orange: hsl(var(--hsl-color-orange));
    --theme-color-orange-dark: hsl(var(--hsl-color-orange-dark));
    --theme-color-orange-dark-dark: hsl(var(--hsl-color-orange-dark-dark));
    --theme-color-blue-light-light: hsl(var(--hsl-color-blue-light-light));
    --theme-color-blue-light: hsl(var(--hsl-color-blue-light));
    --theme-color-blue: hsl(var(--hsl-color-blue));
    --theme-color-blue-dark: hsl(var(--hsl-color-blue-dark));
    --theme-color-grey-light-light: hsl(var(--hsl-color-grey-light-light));
    --theme-color-grey-light: hsl(var(--hsl-color-grey-light));
    --theme-color-grey: hsl(var(--hsl-color-grey));
    --theme-color-grey-dark: hsl(var(--hsl-color-grey-dark));
    --theme-color-red-light-light: hsl(var(--hsl-color-red-light-light));
    --theme-color-red-light: hsl(var(--hsl-color-red-light));
    --theme-color-red: hsl(var(--hsl-color-red));
    --theme-color-red-dark: hsl(var(--hsl-color-red-dark));
    --theme-color-black: hsl(var(--hsl-color-black));
    --theme-color-white: hsl(var(--hsl-color-white));
    --theme-color-text-dark: hsl(var(--hsl-color-text-dark));
    --theme-color-text-light: hsl(var(--hsl-color-text-light));
    font-family: 'Inter', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 12px;
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow: hidden auto;
    box-sizing: border-box;
}

html * {
    box-sizing: border-box;
}

body {
    height: max-content; /*calc(100% - 2ch);*/
    padding: 1ch;
    overflow: hidden auto;
    margin: 0 auto;
    /*margin: 0px;*/
    /*padding-right: 0px;*/
    /*padding-bottom: 0px;*/
    /*padding-top: 0px;*/
    /*padding-left: 0px;*/
    /*font-family: Helvetica, Arial, Sans-serif;*/
    /*max-height: 75%;*/
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
}

a:link {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: darkgray;
}

a:active {
    color: black;
}

#masterForm {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.mainDiv {
    min-height: max-content;
    max-width: 100%;
    width: 100%;
    padding: 1.5em;
    overflow: hidden;
}
    .mainDiv > .content-center {
        overflow: hidden;
        justify-content: center;
    }
    .mainDiv > .content-center > div:first-of-type {
        overflow: hidden;
    }

.page-container {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: repeat(3, max-content) 1fr repeat(4, max-content);
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.page-item-left {
    grid-column: 1;
    height: 100%;
    width: 100%;
}

.page-item-center {
    grid-column: 2;
    min-width: max-content;
    width: 100%;
}

    .page-item-center:not(.fill-height) {
        height: max-content;
    }

    .page-item-center.fill-height {
        height: 100%;
    }

.page-item-right {
    grid-column: 3;
    height: 100%;
    width: 100%;
}

.content-container {
    display: grid;
}
    .content-container.vertical {
        grid-template-rows: max-content 1fr max-content;
        grid-template-columns: 100%;
        row-gap: 0.5em;
    }
        .content-container.vertical > .content-start {
            grid-row: 1;
            grid-column: 1;
            height: max-content;
            width: 100%;
            justify-content: start;
        }

        .content-container.vertical > .content-center {
            grid-row: 2;
            grid-column: 1;
            height: 100%;
            width: 100%;
            justify-content: center;
        }

        .content-container.vertical > .content-end {
            grid-row: 3;
            grid-column: 1;
            height: max-content;
            width: 100%;
            justify-content: start;
        }

    .content-container.horizontal {
        grid-template-rows: max-content;
        grid-template-columns: max-content 1fr max-content;
        column-gap: 0.5em;
    }

        .content-container.horizontal > .content-start {
            grid-row: 1;
            grid-column: 1;
            height: 100%;
            width: max-content;
            justify-content: start;
        }
        .content-container.horizontal > .content-center {
            grid-row: 1;
            grid-column: 2;
            height: 100%;
            width: 100%;
            justify-content: center;
        }
        .content-container.horizontal > .content-end {
            grid-row: 1;
            grid-column: 3;
            height: 100%;
            width: max-content;
            justify-content: start;
        }

.content-start {
    display: flex;
}
    .content-start.vertical {
        flex-direction: column;
    }
    .content-start.horizontal {
        flex-direction: row;
    }

.content-center {
    display: flex;
}
    .content-center.vertical {
        flex-direction: column;
    }

    .content-center.horizontal {
        flex-direction: row;
    }

.content-end {
    display: flex;
}
    .content-end.vertical {
        flex-direction: column;
    }
    .content-end.horizontal {
        flex-direction: row;
    }

.page-header {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    display: contents;
}

.header-item,
.header-item .content-start,
.header-item .content-center,
.header-item .content-end {
    align-items: center;
}

.header-1 {
    grid-row: 1;
    background-color: rgb(48, 92, 134);
    color: white !important;
}

.height-fill {
    height: 100%;
}

.height-auto {
    height: max-content;
}

.min-height-auto {
    min-height: max-content;
}

.min-height-fill {
    min-height: 100%;
}

.width-fill {
    width: 100%;
}

.width-auto {
    width: max-content;
}

.min-width-auto {
    min-width: max-content;
}

.min-width-fill {
    min-width: 100%;
}

.menu-button {
    height: max-content;
}

#otherInfo {
    max-width: 50em;
    max-height: 2em;
    margin: 0 2em;
}

.header-1 {
    padding: 0.25em 0;
}
.header-1 * {
    color: white !important;
    font-size: 1.1em;
}

    .header-1 .menu-button {
        padding: 0 0.5em;
        margin: 0.25em;
        border-left: 1px solid white;
        text-decoration: none;
    }

.header-2 {
    grid-row: 2;
    background-color: white;
    color: rgb(48, 92, 134);
    padding-top: 1em;
}

    .header-2 .menu-button {
        font-size: 1.5em;
        padding: 0 0.5em;
        text-decoration: underline;
    }

        .header-2 .menu-button:not(:first-of-type) {
            border-left: 1px solid black;
        }

        .header-2 .menu-button:not(:hover, :active) {
        }

        .header-2 .menu-button:hover:not(:active) {
            background-color: rgb(48, 92, 134);
            color: white;
        }

        .header-2 .menu-button:active {
            background-color: black;
            color: white;
        }

.header-3 {
    grid-row: 3;
}

.page-body {
    grid-column: 1 / 4;
    grid-row: 4;
    display: contents;
}

.page-footer {
    grid-column: 1 / 4;
    grid-row: 5 / 8;
    display: contents;
}

    .page-footer > div {
        grid-column: 1 / 4;
        grid-row: 5 / 8;
        display: contents
    }

.footer {
    display: grid;
    grid-auto-rows: max-content;
    grid-template-columns: 100%;
}

.footer-item {
    display: flex;
    justify-content: center;
    text-decoration: none;
}

    .footer-item * {
        text-decoration: none;
    }

.footer-1 {
    grid-row: 5;
    padding: 1.5em 0;
    background-color: rgb(239, 239, 239);
}

    .footer-1 .content-container {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: max-content;
        column-gap: 3em;
        width: max-content;
    }

.footer-2 {
    grid-row: 6;
    background-color: rgb(144,184,231);
    font-size: 1.25em;
}

    .footer-2 .content-container {
        align-items: center;
        justify-content: center;
        display: flex;
        padding: 0.5em 0;
        width: max-content;
    }

    .footer-2 img {
        height: 1em;
    }

.footer-3 {
    grid-row: 7;
    background-color: rgb(48, 92, 134);
    color: white;
}

    .footer-3 .content-container {
        padding: 0.5em;
        display: flex;
        justify-content: center;
        align-items: center;
        width: max-content;
    }

.footer-4 {
    grid-row: 8;
    padding: 0.5em 0;
    background-color: rgb(239, 239, 239);
    color: black
}

.no-margin {
    margin: 0 !important;
}

input {
    border-radius: 0.5ch;
}

    input[type=text],
    input[type=email],
    input[type=tel],
    input[type=url],
    input[type=password] {
        border: 1px solid black;
    }

.btn {
    margin: 0.5ch;
    padding: 0.5ch;
    border-radius: 0.5ch;
    border: 0.25ch solid black;
    background-color: hsl(0, 0%, 95%);
    transition: 0.1s ease-in-out;
    cursor: pointer;
    color: #323232;
    width: max-content;
    height: max-content;
}

    a.btn[disabled],
    .btn[disabled] {
        cursor: not-allowed;
        color: #CCC;
    }

        a.btn:hover:enabled,
        .btn:hover:enabled {
            background-color: hsl(0, 0%, 50%);
            transition: 0.1s ease-in-out;
            color: whitesmoke;
        }

    a.btn:active:enabled,
    .btn:active:enabled {
        background-color: hsl(120, 50%, 50%);
        color: hsl(120, 0%, 100%);
    }

    span {
        display: block;
        padding: 0.25em;
        max-width: 30em;
    }

.gone {
    display: none !important;
}

.media-description {
    overflow-y: auto;
    width: 100%;
    max-height: 100%;
}

.justify-center {
    justify-self: center;
}

.form {
    display: grid;
    grid-template-columns: min-content max-content;
    grid-auto-rows: max-content;
    padding: 1ch;
    grid-row-gap: 0.5ch;
}

    .form > .input-label {
        grid-column: 1;
        width: 100%;
        height: minmax(max-content, 100%);
        border: solid black 1px;
        padding: 0.5ch;
        border-top-left-radius: 0.5ch;
        border-bottom-left-radius: 0.5ch;
        justify-self: end;
        background-color: var(--theme-color-green);
    }

    .form > input {
        grid-column: 2;
        background-color: white;
        border-left: none;
        border-top: solid black 1px;
        border-bottom: solid black 1px;
        border-right: solid black 1px;
        padding: 0.5ch;
        border-bottom-right-radius: 0.5ch;
        border-top-right-radius: 0.5ch;
        justify-self: start;
        width: 100%;
    }

        .form > input[type=text],
        .form > input[type=tel],
        .form > input[type=password],
        .form > input[type=email],
        .form > input[type=search],
        .form > input[type=url] {
            resize: horizontal;
        }

    .form > textarea {
        grid-column: 2;
        resize: both;
    }

    .form > div {
        grid-column: 1 / 3;
    }

        .form > div * {
            break-after: auto;
        }

.group-horizontal {
    display: grid;
    grid-auto-columns: max-content;
    grid-column-gap: 1ch;
}

    .group-horizontal > * {
        grid-row: 1;
    }

.group-vertical {
    display: grid;
    grid-auto-rows: max-content;
}

    .group-vertical > * {
        grid-column: 1;
    }

.center-vertical {
    align-self: center;
}

.center-items-vertical {
    align-items: center;
}

.vertical-collapse {
    height: 0 !important;
    color: transparent;
    opacity: 0;
    border: none !important;
    /*transition: 1s ease-out;*/
}

.horizontal-collapse {
    width: 0 !important;
    color: transparent;
    opacity: 0;
    border: none !important;
    /*transition: 1s ease-out;*/
}

.search {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-column-gap: 1ch;
    text-align: right;
    margin-bottom: 0.5ch;
    width: max-content;
    margin-right: 2ch;
    align-items: center;
}

.search-box {
    width: 100% !important;
}

.RadSearchBox .rsbInput {
    width: 100% !important;
}

.search-box .rsbInner {
    display: grid !important;
    grid-template-columns: max-content 1fr max-content max-content;
}

.search-box .rsbEmptyMessage {
    width: 100% !important;
    /*width: unset !important;*/
}

.search-panel {
    display: grid !important;
    grid-auto-rows: max-content;
}

.search-map > * {
    justify-items: end;
}

.search-value {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-template-rows: max-content;
    align-items: center;
    width: 100%;
}

.search-options {
    display: grid;
    grid-column-gap: 1ch;
    align-items: center;
    justify-content: start;
}

    .search-options > .RadAjaxPanel,
    .search-option {
        grid-row: 1;
        height: 100%;
        align-items: center;
        display: grid;
        grid-template-columns: max-content max-content;
    }

/*.search-options > .RadAjaxPanel > span > label,
    .search-option > span > label,
    .search-option > label {
        margin-top: auto;
        margin-bottom: auto;
        border: solid hsl(0, 100%, 0%) 1px;
        border-radius: 0.5ch;
        padding-left: 0.5ch;
        padding-right: 0.5ch;
        cursor: pointer;
        user-select: none;
    }*/

.search-date > span > label,
.search-date > label {
    margin-top: auto;
    margin-bottom: auto;
    border: solid hsl(0, 100%, 0%) 1px;
    border-radius: 0.5ch;
    padding-left: 0.5ch;
    padding-right: 0.5ch;
    cursor: pointer;
    user-select: none;
}

.search-options > .RadAjaxPanel > label > span,
.search-option > label > span {
    height: max-content;
    display: inline-block;
    padding-block: 0.5ch;
}

.search-options > .RadAjaxPanel > span > input,
.search-option > span > input,
.search-option > input {
    align-self: center;
}

    .search-options > .RadAjaxPanel > input[type=date],
    .search-option > input[type=date] {
        border-style: solid;
        border-color: hsl(0, 100%, 0%);
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 0;
        border-top-right-radius: 0.5ch;
        border-bottom-right-radius: 0.5ch;
        height: 100%;
    }

.toggle-button-container {
    display: grid;
    align-items: start;
    align-self: end;
    user-select: none;
}

.toggle-button-label {
    width: max-content;
}

input[type=checkbox]:not(:checked) ~ .toggle-button-label {
    background-color: var(--theme-color-red);
    color: white;
}

input[type=checkbox]:checked ~ .toggle-button-label {
    background-color: var(--theme-color-green);
    color: black;
}

.ui-mask {
    background-color: black;
    opacity: 0.5;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1002;
    cursor: pointer;
    user-select: none;
}

.asp-checkbox-container > .RadAjaxPanel {
    background-color: white;
    border-radius: 0.5ch;
    padding: 0.5ch 1ch;
    display: grid !important;
    grid-template-columns: max-content max-content;
    grid-template-rows: max-content;
}

input[type=checkbox]:checked ~ .asp-checkbox-container > .RadAjaxPanel > label:hover {
    background-color: hsla(var(--hsl-color-red), 0.5);
}

input[type=checkbox]:not(:checked) ~ .asp-checkbox-container > .RadAjaxPanel > label:hover {
    background-color: hsla(var(--hsl-color-green), 0.5);
}

.asp-checkbox-container > .RadAjaxPanel > * {
}

.asp-checkbox-container > .RadAjaxPanel > input[type=checkbox] {
    grid-column: 2;
    grid-row: 1;
    cursor: pointer;
}

.asp-checkbox-container > .RadAjaxPanel > label {
    grid-column: 1;
    grid-row: 1;
    line-height: 3ch;
    align-self: center;
    cursor: pointer;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=tel] {
    /*background-color: hsl(190, 100%, 90%);*/
}

.dropdown-list {
    width: 100%;
    margin-bottom: 2ch;
}

.width-fill {
    width: 100%;
}

.width-fit {
    width: max-content;
}

a:link {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: darkgray;
}

a:active {
    color: black;
}

tr {
    max-height: 1em;
}

.menu-button {
    text-decoration: none;
    padding: 0.25em;
}

.align-center {
    align-self: center;
}

.align-end {
    align-self: end;
}

.resize-both {
    resize: both;
}

.resize-vertical {
    resize: vertical;
}

.disabled {
    pointer-events: none;
    opacity: 0.75;
}

a.btn {
    text-decoration: initial;
}

.form-input-container {
    display: grid;
    grid-template-columns: minmax(max-content, 25%) 1fr;
    grid-auto-rows: max-content;
    grid-row-gap: 0.25em;
    grid-gap: 0.5em;
    width: max-content;
}

    .form-input-container > .input-label {
        grid-column: 1;
    }

    .form-input-container > .input-value {
        grid-column: 2;
    }

    .form-input-container > .span {
        grid-column: 1 / 3;
    }