/*#region Base Rules */

:root {
    font-size: 10px; /* root font-size of 10px to keep rem calculations easy. */
    --dark-main-bg-color: rgb(18, 18, 18);
    --dark-form-bg-color: rgb(24, 26, 28);
    --dark-thick-border-color: rgb(35,38,41);
    --dark-input-bg-color: rgb(42, 47, 53); /* rgba(70, 90, 126, 0.3); Had to change this due to autofill browser styling for light and dark color-scheme that can't be overwritten.*/
    --dark-input-border-color: rgba(71, 75, 79, 0.5);
    --dark-grid-main-color: rgb(33,127,240);
    --dark-gridlines-border-color: rgba(255, 255, 255, 0.04);
    --dark-text-color: #dcdcdc;
    --dark-box-shadow: rgb(210, 234, 245);
    --dark-highlight-text-color: rgb(88, 184, 254);
    --dark-middle-bg-color: rgb(30, 34, 39); /*rgba(70, 90, 126, 0.1);*/
    --dark-background-80: rgb(26, 51, 81);
}


.Dark input:-webkit-autofill,
.Dark input:-webkit-autofill:hover,
.Dark input:-webkit-autofill:focus,
.Dark textarea:-webkit-autofill,
.Dark textarea:-webkit-autofill:hover,
.Dark textarea:-webkit-autofill:focus,
.Dark select:-webkit-autofill,
.Dark select:-webkit-autofill:hover,
.Dark select:-webkit-autofill:focus {
    border: 1px solid var(--dark-input-border-color);
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px var(--dark-input-bg-color) inset;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* input, textarea and select fields styling */
input,
textarea,
select {
    color: black;
    background-color: white;
    padding: 2px 4px 2px 4px;
    border: 1px solid darkgray;
    border-radius: 2px;
}   

    input[type="file"],
    input[type="submit"],
    input[type="button"] {
        cursor: pointer;
    }

        input[type="file"] {
            padding: 0;
            border-color: white;
        }

/* select control padding seem to be larger than input fields. So we specifically set it to be little smaller than the input field. */
select {
    padding: 1px 0 1px 0;
}

    select option {
        padding: 1px 2px 0px 2px;
    }



input[type="image"] {
    padding: 0;
    background-color: transparent;
    border: none;
}

/* Disabled input (except button type), textarea and select fields styling */
input[type="text"][disabled],
input[type="text"][disabled]:hover,
input[type="text"].aspNetDisabled,
input[type="text"].aspNetDisabled:hover,
textarea[disabled],
textarea[disabled]:hover,
textarea.aspNetDisabled,
textarea.aspNetDisabled:hover,
select[disabled],
select[disabled]:hover,
select.aspNetDisabled,
select.aspNetDisabled:hover {
    color: #4b4b4b;
    background-color: #f0f4f7;
    border-color: lightgray;
    opacity: 1; /* Chrome applies a 0.7 opacity to disabled drop down lists by default. This is to override that default style. */
}

    .Dark input[type="text"][disabled],
    .Dark input[type="text"][disabled]:hover,
    .Dark input[type="text"].aspNetDisabled,
    .Dark input[type="text"].aspNetDisabled:hover,
    .Dark textarea[disabled],
    .Dark textarea[disabled]:hover,
    .Dark textarea.aspNetDisabled,
    .Dark textarea.aspNetDisabled:hover,
    .Dark select[disabled],
    .Dark select[disabled]:hover,
    .Dark select.aspNetDisabled,
    .Dark select.aspNetDisabled:hover {
        background-color: var(--dark-input-bg-color);
        color: #999999 !important;
        text-shadow: none;
        cursor: default;
        border-color: var(--dark-input-border-color);
    }

/* Disabled Checkbox text color */
span[disabled],
span.aspNetDisabled,
span[disabled]:hover,
span.aspNetDisabled:hover {
    color: #4b4b4b;
}

/* These are here specifically for disabled items in firefox */
input[type="submit"][disabled],
input[type="submit"][disabled]:hover,
input[type="button"][disabled],
input[type="button"][disabled]:hover,
input[type="submit"].aspNetDisabled,
input[type="submit"].aspNetDisabled:hover,
td[disabled] font,
a[disabled],
a[disabled]:hover,
.aspNetDisabled,
.aspNetDisabled:hover {
    color: #bfbfbf;
    text-shadow: none;
    cursor: default;
}

    .Dark input[type="submit"][disabled],
    .Dark input[type="submit"][disabled]:hover,
    .Dark input[type="button"][disabled],
    .Dark input[type="button"][disabled]:hover,
    .Dark input[type="submit"].aspNetDisabled,
    .Dark input[type="submit"].aspNetDisabled:hover,
    .Dark td[disabled] font,
    .Dark a[disabled],
    .Dark a[disabled]:hover,
    .Dark .aspNetDisabled,
    .Dark .aspNetDisabled:hover {
        color: #999999 !important;
        text-shadow: none;
        cursor: default;
        border-color: var(--dark-input-border-color);
    }

/* Chrome started showing a very strong black and white inset outline on focused items that was not consistent with our application as it is currently
   We have our own way of highlighting the currently selected item but this may need to be revisited as we review our global styling and sizing */
*:focus,
*:active {
    outline: none;
}

::-webkit-input-placeholder {
    color: gray;
}

:-moz-placeholder {
    color: gray !important;
}

::-moz-placeholder {
    color: gray !important;
}
/* for the future */
:-ms-input-placeholder {
    color: gray !important;
}
/*#endregion */

a > span > label {
    cursor: pointer;
}

input::-moz-focus-inner {
    padding: 0;
    border: 0;
    margin-top: -2px;
    margin-bottom: -2px;
}

/* This is to make disabled picker controls visually different... may need to refine qualification to be more specific */
a[disabled] img {
    opacity: 0.4;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

/* Template Name and Codes are editable in some contexts... we need to highlight this by underlining them */
span[contenteditable] {
    border-bottom: 1px dashed gray;
}

/* These styles are attempts to make the iPad layout look nicer */
input[type="submit"],
input[type="button"] {
    -webkit-appearance: none !important;
}

input[type="text"],
textarea {
    -webkit-appearance: none !important;
}

textarea {
    resize: vertical;
}

.filterText::-ms-clear {
    display: none;
}

/* */
input[type="checkbox"] {
    vertical-align: middle;
    margin: 0;
    margin-top: -3px;
    margin-left: 2px;
    height: 1.5rem;
    width: 2rem;
}

input[type="radio"] {
    vertical-align: middle;
    margin: 0;
    margin-top: -3px;
    margin-left: 2px;
    height: 1.5rem;
    width: 2rem;
}

.Dark input[type="checkbox"], input[type="radio"] {
    opacity: .6;
}

.clearable {
    position: relative;
    /*display: inline-block;*/
}

    .clearable clearable_cleared {
        padding-right: 24px;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.clearable_clear {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 8px;
    font-style: normal;
    font-size: 1.2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.clearable clearable_cleared::-ms-clear {
    /* this is to Remove the default X in IE for a text box that we are manually going to add the clear functionality to */
    display: none;
}

ul,
li,
div {
    outline: none;
}

/* This is the solution to not have Firefox highlight the branch when a node is expanded on a lu/li list. */
li {
    -moz-user-select: none;
}

/* This is to remove the double click zoom functionality on touch devices because it makes number pickers challenging with repeat numbers */
body {
    touch-action: manipulation !important;
    -ms-touch-action: manipulation !important;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    border: none;
}
   
    body,
    body.print {
        font-family: Verdana;
        font-size: 1.1rem;
        font-weight: normal;
        letter-spacing: normal;
        text-transform: none;
        word-spacing: normal;
    }

        body.print {
            background-color: white !important;
            background-image: none !important;
        }

        body.Dark {
            background-color: var(--dark-form-bg-color);
        }

/*#region Layout classes */
.fullHeight {
    height: 100%;
}

.fullWidth {
    width: 100%;
}

.flexContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flexColumnContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flexContainer > * {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

.flexGrowItem {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.flexShrinkItem {
    -ms-flex-negative: 1;
    flex-shrink: 1;
    overflow: auto;
}

.flexContainerRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flexContainerRow--fourColumns > * {
    flex-basis: 25%;
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin: 0;
    padding: 6px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.flexContainerRow--fourColumns::after {
    content: "";
    -webkit-box-flex: 10000;
    flex-grow: 10000;
}
/*#endregion Layout classes */

/*#region Custom Tooltip */
.tooltipped {
    position: relative;
}

.tooltipped__item {
    display: block;
    position: relative;
}

.tooltipped__tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    white-space: nowrap;
    text-align: center;
    padding: 5px 10px;
    background: white;
    border-radius: 5px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.2);
}

.tooltipped__item:hover + .tooltipped__tooltip {
    display: block;
}

.tooltipped__tooltip::before {
    content: "";
    display: block;
    position: absolute;
    top: -6px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 6px solid transparent;
    border-bottom-color: white;
}

.tooltipped__tooltip--right {
    top: 50%;
    left: 100%;
    margin-top: 0;
    margin-left: 8px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .tooltipped__tooltip--right::before {
        position: absolute;
        top: -50%;
        left: -6px;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border: 6px solid transparent;
        border-bottom-color: transparent;
        border-bottom-color: white;
    }

.tooltipped__tooltip--left {
    top: 50%;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: 8px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .tooltipped__tooltip--left::before {
        top: 50%;
        right: -6px;
        left: auto;
        -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        border: 6px solid transparent;
        border-bottom-color: transparent;
        border-left-color: white;
    }

/*#endregion */

/*#region Criteria Checkbox Style Classes */
.criteriaCheckbox input[type="checkbox"] {
    display: none;
}

    .criteriaCheckbox input[type="checkbox"] + label {
        cursor: pointer;
        position: relative;
        display: inline-block;
        padding: 0 0.2em;
        padding-left: 30px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .criteriaCheckbox input[type="checkbox"] + label:before,
        .criteriaCheckbox input[type="checkbox"] + label:after {
            content: "";
            position: absolute;
            display: inline-block;
            top: 50%;
            left: 1rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .criteriaCheckbox input[type="checkbox"] + label:after {
            background: transparent;
            width: 1.6rem;
            height: 0.8rem;
            border: none;
            border-bottom: 3px solid white;
            border-left: 3px solid white;
            -webkit-transform: translate(0, -5px) scale(0) rotate(-45deg);
            -ms-transform: translate(0, -5px) scale(0) rotate(-45deg);
            transform: translate(0, -5px) scale(0) rotate(-45deg);
            z-index: 1;
            -webkit-transition: -webkit-transform 0.2s ease;
            transition: -webkit-transform 0.2s ease;
            -o-transition: transform 0.2s ease;
            transition: transform 0.2s ease;
            transition: transform 0.2s ease, -webkit-transform 0.2s ease;
        }

        .criteriaCheckbox input[type="checkbox"] + label:before {
            background: white;
            width: 1.6rem;
            height: 1.6rem;
            border: 1px solid dimgray;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            z-index: 0;
            border-radius: 3px;
            -webkit-transition: background-color 0.2s ease;
            -o-transition: background-color 0.2s ease;
            transition: background-color 0.2s ease;
        }

            .Dark .criteriaCheckbox input[type="checkbox"] + label:before {
                opacity: 0.5;
            }

    .criteriaCheckbox input[type="checkbox"]:checked + label:after {
        -webkit-transform: translate(0, -5px) scale(0.7) rotate(-45deg);
        -ms-transform: translate(0, -5px) scale(0.7) rotate(-45deg);
        transform: translate(0, -5px) scale(0.7) rotate(-45deg);
    }

    .criteriaCheckbox input[type="checkbox"]:checked + label:before {
        border: 1px solid dimgray;
        background-color: grey;
    }

    .criteriaCheckbox input[type="checkbox"]:disabled + label:before,
    .criteriaCheckbox input[type="checkbox"]:checked:disabled + label:before {
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0.1);
        border-color: rgba(0, 0, 0, 0.2);
    }

    .Dark .criteriaCheckbox input[type="checkbox"]:disabled + label:before,
    .Dark .criteriaCheckbox input[type="checkbox"]:checked:disabled + label:before {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .criteriaCheckbox input[type="checkbox"]:disabled + label:after,
    .criteriaCheckbox input[type="checkbox"]:checked:disabled + label:after {
        border-bottom-color: rgba(0, 0, 0, 0.75);
        border-left-color: rgba(0, 0, 0, 0.75);
    }

    .Dark .criteriaCheckbox input[type="checkbox"]:disabled + label:after,
    .Dark .criteriaCheckbox input[type="checkbox"]:checked:disabled + label:after {
        border-bottom-color: rgba(255, 255, 255, 0.3);
        border-left-color: rgba(255, 255, 255, 0.3);
    }

    .criteriaCheckbox.aspNetDisabled,
    .criteriaCheckbox input[type="checkbox"]:disabled + label,
    .criteriaCheckbox.aspNetDisabled > input[type="checkbox"] + label {
        cursor: default;
    }

/*#endregion */

/*#region Toggle Button classes */
.toggleButton {
    position: relative;
    display: block;
}

    .toggleButton > input[type="checkbox"] {
        display: none;
    }

        .toggleButton > input[type="checkbox"] + label {
            padding: 0.8em;
            padding-left: 50px;
            display: block;
            cursor: pointer;
        }

            .toggleButton > input[type="checkbox"] + label:before,
            .toggleButton > input[type="checkbox"] + label:after {
                content: "";
                position: absolute;
                display: block;
                width: 3rem;
                height: 1.5rem;
                top: 50%;
                left: 1rem;
                outline: none;
                border: none;
                background: #c1c1c1;
                border-radius: 20px;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
            }

            .toggleButton > input[type="checkbox"] + label:before {
                -webkit-transition: background-color 0.3s ease;
                -o-transition: background-color 0.3s ease;
                transition: background-color 0.3s ease;
                border-color: transparent;
                margin: 0;
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            }

    .toggleButton > input:enabled:checked[type="checkbox"] + label:before {
        background: #03a9f4;
    }

    .toggleButton > input[type="checkbox"] + label:after {
        width: 1.5rem;
        background: #fff;
        -webkit-transform: translateY(-50%) scale(1.1);
        -ms-transform: translateY(-50%) scale(1.1);
        transform: translateY(-50%) scale(1.1);
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        transition: left 0.3s ease;
    }

    .toggleButton > input:enabled:checked[type="checkbox"] + label:after,
    .toggleButton > input:disabled:checked[type="checkbox"] + label:after {
        left: 2.5rem;
    }

    .toggleButton > input:disabled:checked[type="checkbox"] + label:after,
    .toggleButton > input:disabled[type="checkbox"] + label:after {
        background: #a7a7a7;
    }

    .toggleButton > input[type="checkbox"]:disabled + label:before,
    .toggleButton > input[type="checkbox"]:checked:disabled + label:before {
        background: #e2e2e2;
    }

.toggleButtonLessPadding > input[type="checkbox"] + label {
    padding: 0;
    display: block;
    padding-left: 50px;
}

.toggleButtonListItemText > input[type="checkbox"] + label {
    font-style: normal;
}
/*#endregion Toggle Button classes*/

/*#region Criteria Radio Button Style Classes */
.criteriaRadio > input[type="radio"] {
    display: none;
}

    .criteriaRadio > input[type="radio"] + label {
        position: relative;
        display: inline-block;
        padding-left: 20px;
    }

        .criteriaRadio > input[type="radio"] + label::before,
        .criteriaRadio > input[type="radio"] + label::after {
            content: "";
            position: absolute;
            width: 1.4rem;
            height: 1.4rem;
            top: 50%;
            left: 0.4rem;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            border-radius: 50%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background: white;
            -webkit-transition: -webkit-transform 0.2s ease;
            transition: -webkit-transform 0.2s ease;
            -o-transition: transform 0.2s ease;
            transition: transform 0.2s ease;
            transition: transform 0.2s ease, -webkit-transform 0.2s ease;
            border: 1px solid #606060;
        }

        .criteriaRadio > input[type="radio"] + label::before {
            z-index: 0;
        }

        .criteriaRadio > input[type="radio"] + label::after {
            width: 0.8rem;
            height: 0.8rem;
            left: 0.7rem;
            background: #606060;
            -webkit-transform: translateY(-50%) scale(0);
            -ms-transform: translateY(-50%) scale(0);
            transform: translateY(-50%) scale(0);
        }

    .criteriaRadio > input[type="radio"]:checked + label::after {
        z-index: 1;
        -webkit-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
    }

    .criteriaRadio > input[type="radio"]:disabled + label::before {
        background: #bfbfbf;
        border-color: #9a9a9a;
    }

    .criteriaRadio > input[type="radio"]:disabled + label::after {
        background: #8a8a8a;
        border-color: #6a6a6a;
    }

/*#endregion */

/*#region Dashed Input Field styles */
input.criteriaInputDashed::-webkit-outer-spin-button,
input.criteriaInputDashed::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.criteriaInputDashed {
    -moz-appearance: textfield;
}

input.criteriaInputDashed {
    border: none;
    border-bottom: 1px dashed white;
    background: none;
    color: white;
}

/*#endregion */

.BodyBackground,
.PopupBackground {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    background-size: cover;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.draggable {
    cursor: move;
}

.clickable {
    cursor: pointer;
}

.notransition {
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

iframe.Popup {
    border: solid 1px grey;
    border-radius: 5px;
    visibility: inherit;
}

.Dark iframe.Popup {
    border: 1px solid rgba(255, 255, 255, 0.25);
    visibility: inherit;
}

.SiteContainer {
    position: absolute; /* needed for footer positioning*/
    margin: 0; /* center, not in IE5 */
    padding: 0;
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
    width: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    /*overflow:auto;  Needed for scrollTop to work - BUT IT BREAKS MAINTAIN SCROLL POSITION AND THE FILTER LIST POSITION*/
}

.siteContentContainer {
    overflow: visible;
}

.HelpTextItemName {
    float: left;
}

.HelpTextNotConfigured {
    float: right;
}

.HelpTextConfigured {
    float: right;
    width: 1.5rem;
    height: 1.4rem;
    background-color: white;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    color: black;
}

.HelpTextContainer {
    display: block;
    position: relative;
}

.FullTable {
    height: 100%;
    width: 100%;
}

.PopupContentBackground {
    width: 100%;
}

.PopupFooter {
    width: 100%;
}

.PopupFooterTable {
    height: 4rem;
    width: 100%;
    text-align: right;
    padding-right: 7px;
    padding-bottom: 10px;
    border-spacing: 2px;
    border-collapse: separate;
}

.IndexBackground {
    border-right: solid 1px #222;
}

    .Dark .IndexBackground {
        background-color: var(--dark-main-bg-color);
        border-right: 2px solid var(--dark-thick-border-color);
    }

.IndexShowing {
    height: 100%;
    min-width: 21rem;
    width: 21rem;
}

.IndexNotShowing {
    height: 100%;
    width: 2.5rem;
    min-width: 2.5rem;
}

/* Show Password icon styling */
.Dark input::-ms-reveal {
    filter: invert(100%);
}

.LoginBackground {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -120px 0 0 -260px;
    height: 22.7rem;
    width: 55rem;
    border-radius: 8px;    
    box-shadow: 0 0 1px #777;
}

    .Dark .LoginBackground {
        background-color: var(--dark-middle-bg-color);
    }
    
.LoginTitle {
    font-family: Trebuchet MS, Arial;
    font-size: 2.4rem;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 0 -1px 0 rgb(0, 0, 0);
    border-radius: 8px 8px 0 0;
}

    .Dark .LoginTitle {
        background-color: var(--dark-main-bg-color);
        border-bottom: 2px solid var(--dark-thick-border-color);
        color: var(--dark-text-color);
    }

.LoginTitleHighlight {
    font-size: 3rem;
    font-weight: bold;
    color: #feda4b;
}

.PickerContainer {
    -webkit-box-shadow: 2px 2px 4px #777;
    box-shadow: 2px 2px 4px #777;
}

    .Dark .PickerContainer {
        -moz-box-shadow: none;
        box-shadow: none;
    }

.singleSmallInput .PickerTable {
    display: inline-block;
}

.Tabstrip {
    font-size: 0;
    border-spacing: 0;
}

/* This is here to stop the Skip link in menu adding 15px margin at the top of ASP Menus using Table layout */
img[alt="Skip Navigation Links"] {
    display: none;
}

.TabstripViews {
    margin: 10px 5px 0 5px;
}

.CompanyWatermark {
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.HeaderTable {
    width: 100%;
    border-bottom: solid 1px #222;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .Dark .HeaderTable {
        background-color: var(--dark-main-bg-color);
        border-bottom: 2px solid var(--dark-thick-border-color);
    }

.HeaderScroll {
    position: fixed;
    z-index: 10;
}

.LoggedInLabel,
.LoggedInApplicationTitle,
.LoggedInApplicationTitleHighlight {
    font-family: Arial;
    font-size: 1.1rem;
    font-weight: normal;
    color: white;
    text-align: left;
}

.LoggedInApplicationTitle,
.LoggedInApplicationTitleHighlight {
    font-family: Trebuchet MS, Arial;
    font-weight: bold;
    font-size: 1.3rem;
    text-shadow: 0 -1px 0 #222;
}

.LoggedInApplicationTitleHighlight {
    font-size: 1.8rem;
    color: #feda4b;
    margin-right: -5px;
    margin-left: -2px;
}

    .Dark .LoggedInApplicationTitleHighlight,
    .Dark .LoginTitleHighlight
    .Dark .LoggedInLabel,
    .Dark .LoggedInApplicationTitle {
        opacity: .8;
    }

.LogoutLabel {
    font-family: Arial;
    font-size: 1.1rem;
    font-weight: bold;
    color: black;
}

/* Header Menu Classes */

.Menu ul li ul {
    display: none;
}

.Menu ul li {
    list-style: none;
    max-width: 100%;
}

.Menu {
    width: 100%;
    float: none !important;
}

    .Menu ul.static {
        display: table;
        border-collapse: separate;
        border-spacing: 0;
        white-space: nowrap;
        width: 100% !important;
        float: none !important;
    }

        .Menu ul.static li.static {
            display: table-cell;
            border-top: solid 1px transparent;
            border-radius: 3px 3px 0 0;
            float: none !important;
            min-width: 6rem;
            width: 18rem;
            -webkit-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }

    .Menu a.MenuItem {
        padding-top: 5px;
        padding-left: 10px !important;
        height: 2.2rem;
        color: white;
        font-family: Trebuchet MS;
        font-size: 1.4rem;
        text-shadow: 0 -1px 0 #222;
    }

        .Dark .Menu a.MenuItem,
        .Dark .ButtonMenuItem {
            color: var(--dark-text-color);
        }

    .Menu ul.MenuSubItems {
        font-family: Verdana;
        font-size: 1.2rem;
        z-index: 20 !important;
        border-radius: 0 0 3px 3px;
        min-width: 10rem;
        padding-bottom: 3px !important;
        -webkit-box-shadow: 0 1px 3px #666;
        box-shadow: 0 1px 3px #666;
    }

    .Dark .Menu ul.MenuSubItems,
    .Dark .ButtonMenuSubItems {
        background-color: var(--dark-form-bg-color) !important;
        border: solid 1px var(--dark-main-bg-color);
        border-top: none;
        box-shadow: 0 1px 3px #666;
        clip: unset !important;
    }


    .Menu ul.level2 {
        left: auto !important;
    }

    .Menu li.dynamic ul.MenuSubItems {
        border-radius: 3px;
    }

        .Dark .Menu li.dynamic ul.MenuSubItems {
            border-top: solid 1px var(--dark-form-bg-color) !important;
        }

    .Dark li.dynamic:hover,
    .Dark table.ButtonMenuSubItemHover {
        background-color: rgb(from var(--dark-grid-main-color) r g b / 0.15) !important;
    }

    .Menu ul.left > li > ul.MenuSubItems {
        left: auto !important;
        right: 100% !important;
    }

    .Menu li.dynamic img.separator {
        margin-top: 5px;
        margin-bottom: 7px;
    }

    .Menu a.MenuSubItem {
        padding: 6px 14px 6px 14px;
        max-width: 100%;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: block;
    }

    .Menu li.static:hover {
        text-shadow: 0 -1px 0 #222;
    }

        .Dark .Menu li.static:hover {
            border-top: solid 1px var(--dark-main-bg-color) !important;
            background-color: var(--dark-form-bg-color);
        }

    .Menu a.selected.static {
        border-radius: 3px 3px 0 0;
        text-shadow: 0 -1px 0 #222;
        margin-right: -1px;
        color: #feda4b;
    }

        .Dark .Menu a.selected.static {
            border-top: solid 1px var(--dark-main-bg-color) !important;
            border-right: solid 1px var(--dark-main-bg-color) !important;
            background-color: var(--dark-form-bg-color);
            color: rgb(from var(--dark-highlight-text-color) r g b / 0.80);
        }

    .Menu li.static:hover li {
        text-shadow: 0 -1px 0 #444;
    }

    .Menu li.has-popup.dynamic > a {
        position: relative;
    }

        .Menu li.has-popup.dynamic > a::before {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-left-color: #c5d3dc;
            display: block;
            z-index: 0;
            -webkit-transform: translate(0%, -50%);
            -ms-transform: translate(0%, -50%);
            transform: translate(0%, -50%);
            -webkit-transition: -webkit-transform 0.3s ease;
            transition: -webkit-transform 0.3s ease;
            -o-transition: transform 0.3s ease;
            transition: transform 0.3s ease;
            transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        }

    .Menu li.has-popup.dynamic:hover > a::before {
        -webkit-transform: translate(150%, -50%);
        -ms-transform: translate(150%, -50%);
        transform: translate(150%, -50%);
    }

    .Menu ul.left > li.has-popup.dynamic > a::before {
        left: 0;
        border-left-color: transparent;
        border-right-color: #c5d3dc;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

    .Menu ul.left > li.has-popup.dynamic:hover > a::before {
        -webkit-transform: translate(-150%, -50%);
        -ms-transform: translate(-150%, -50%);
        transform: translate(-150%, -50%);
    }

.BroadcastMessage,
.IndexTitle {
    font-family: Trebuchet MS, Arial;
    font-size: 1.2rem;
    color: #feda4b;
    padding: 0;
}

.IndexTitle {
    font-size: 1.4rem;
    color: #ffff00;
    text-shadow: 0 -1px 0 #222;
}

.Dark .IndexTitle {
    color: var(--dark-highlight-text-color);
    text-shadow: none;
}

.IndexRightBackground {
    vertical-align: top;
    height: 100%;
}

.SlidingMessageRight,
.SlidingMessageLeft,
.ScrollToTop,
.SettingsMenu,
.settingsMenuButton {
    font-size: 1.4rem;
    z-index: 10;
    position: fixed;
    bottom: 0;
    border-radius: 5px 5px 0 0;
    background: #143b54;
    border-top: 1px solid white;
    -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
    color: white;
    white-space: pre-wrap;
    padding: 15px 20px;
    display: none;
}

.SlidingMessageLeft,
.SlidingMessageRight {
    display: block;
    top: 100%;
    bottom: auto;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

    .SlidingMessageLeft.show,
    .SlidingMessageRight.show {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }

.SlidingMessageRight {
    right: 0.5rem;
}

.SlidingMessageLeft {
    left: 0.5rem;
}

/* Button Menu Note... rendered as a table so that sub item can easily expand left if no room on right... lists won't do that*/

.ButtonMenuItem {
    height: 100%;
}

.ButtonMenuSubItems {
    margin-top: -1px;
    padding-top: 4px;
    font-family: Verdana;
    font-size: 1.2rem;
    text-align: left;
    z-index: 19 !important;
    border-radius: 3px;
}

.ButtonMenuSubItem {
    border-collapse: separate;
    padding: 5px 5px 5px 5px;
    text-shadow: 0 -1px 0 #222;
}

/* END Button Menu */

.PopupTitle {
    font-family: Trebuchet MS, Arial;
    font-weight: bold;
    font-size: 1.7rem;
    color: White;
    text-shadow: 0 -1px 0 rgb(0, 0, 0);
}

    .Dark .PopupTitle {
        color: var(--dark-text-color);
    }

.EmbeddedMediaContainer {
    position: relative;
    display: inline-block;
}

.embeddedMedia__addMoreButton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2rem;
    line-height: 1em;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid white;
    margin: 0.2rem;
    z-index: 1;
}

.EmbeddedMediaAttachCount {
    position: absolute;
    font-family: Arial;
    font-weight: bold;
    font-size: 2.4rem;
    top: 4.5rem;
    left: 2.3rem;
}

.EmbeddedMediaOverlayTimestamp {    
    position: absolute;
    display: inline;
    bottom: 5px;
    right: 5px;
}

/*#region File Download Container Styles */
.downloadContainer {
    position: relative;
    max-width: 300px;
    width: 80%;
    margin: 0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    padding: 20px;
    background: #ffffff;
    border-radius: 0 12px 0 12px;
    font-family: Trebuchet MS;
    font-size: 1.6rem;
    text-align: center;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.15);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
    transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
    -o-transition: transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
    transition: transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
    transition: transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37), -webkit-transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
    transition: transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37), -webkit-transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
    transition: transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37), -webkit-transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
    transition: transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37), -webkit-transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
    transition: transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37), -webkit-transform 0.3s cubic-bezier(0.12, 0.68, 0.81, 1.37);
}

.downloadContainer__text {
    color: black;
    margin: 15px 10px 0 10px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
/*#endregion File Download Container Styles */

/*= Core CSS progress bar code */
.ProgressBar {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
    height: 3rem;
    margin: 0 auto;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.15);
}

    .ProgressBar:after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        height: 100%;
        width: 100%;
        background: white;
        z-index: 1;
        -webkit-animation: widthAnimation 3s linear infinite;
        animation: widthAnimation 3s linear infinite;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    .ProgressBar.reverse::after {
        animation-direction: reverse;
    }

    .ProgressBar.Complete:after {
        -webkit-animation: none;
        animation: none;
    }

.progressBar__counter {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
}

@-webkit-keyframes widthAnimation {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes widthAnimation {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

/*#region Map Point CSS Class Styles */
button.locationButton {
    padding: 0;
    margin-left: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

    button.locationButton:hover > svg {
        fill: black;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    button.locationButton > svg {
        fill: grey;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        height: 1.5rem;
        width: 1.5rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: -webkit-transform 0.1s ease;
        transition: -webkit-transform 0.1s ease;
        -o-transition: transform 0.1s ease;
        transition: transform 0.1s ease;
        transition: transform 0.1s ease, -webkit-transform 0.1s ease;
    }

.inputErrorMessage {
    color: orangered;
    opacity: 1;
    display: none;
    padding: 0 2px;
    margin-right: -10px;
}

    .inputErrorMessage::after {
        content: "!";
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 16px;
    }

    .inputErrorMessage > div {
        position: absolute;
        top: 50%;
        right: 0.5rem;
        max-width: 100%;
        -webkit-transform: translateY(-50%) scale(0);
        -ms-transform: translateY(-50%) scale(0);
        transform: translateY(-50%) scale(0);
        opacity: 0;
        padding: 5px;
        display: inline-block;
        border-radius: 5px;
        background-color: white;
        -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.15);
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center;
        -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: opacity 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        -o-transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 10;
    }

        .inputErrorMessage > div::after {
            content: "";
            position: absolute;
            border: 6px solid transparent;
            border-left-color: white;
            left: 100%;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

    .inputErrorMessage:hover > div {
        opacity: 1;
        -webkit-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
    }

/*#endregion */
.ControlBlocker {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    margin: auto;
    opacity: 0;
}

.ControlBlocker,
.HideOnControlBlocker {
    -webkit-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.ControlBlockerText {
    color: White;
    font-family: Trebuchet MS;
    font-size: 2.4rem;
    text-align: center;
    margin: 15px 10px;
}
.Dark .ControlBlockerText {
    color: var(--dark-text-color);
}

.hierarchyFeedback__parent {
    display: block;
    white-space: pre-wrap;
}

.hierarchyFeedback__child {
    position: relative;
    display: block;
    white-space: pre-wrap;
    padding-left: 0.75em;
}

    .hierarchyFeedback__child::before {
        content: "-";
        display: block;
        position: absolute;
        padding: 0 0.5em;
        top: 0;
        left: -0.35em;
    }

/* Index Classes */
a.clsTocItem,
a.clsTocSelectedItem,
a.clsTocHeading,
a.clsTocSelectedHeading,
a.clsPropertiesTableClear,
.clsPageNavigator,
.clsPageNavigatorSelected {
    font-family: Verdana;
    font-size: 1.2rem;
    text-decoration: none;
    text-shadow: 0 -1px 0 #222;
    word-break: break-word;
}

.Dark a.clsTocItem,
.Dark a.clsTocHeading,
.Dark .clsPageNavigator {
    color: var(--dark-text-color);
}


.Dark a.clsTocSelectedItem,
.Dark a.clsTocSelectedHeading,
.Dark .clsPageNavigatorSelected {
    color: var(--dark-highlight-text-color);
}

.PLANS a.clsTocItem,
.PLANS a.clsTocSelectedItem,
.PLANS a.clsTocHeading,
.PLANS a.clsTocSelectedHeading {
    font-size: 1.2rem;
}

a.clsPropertiesTableClear {
    color: gray;
}

    a.clsTocItem:hover,
    a.clsTocItem:active,
    a.clsTocSelectedItem:visited,
    a.clsTocSelectedHeading:visited,
    a.clsTocSelectedItem,
    a.clsTocSelectedHeading,
    a.clsPropertiesTableClear:hover {
        color: #ffd42b;
    }

        .Dark a.clsTocItem:hover,
        .Dark a.clsTocItem:active,
        .Dark a.clsTocSelectedItem:visited,
        .Dark a.clsTocSelectedHeading:visited,
        .Dark a.clsTocSelectedItem,
        .Dark a.clsTocSelectedHeading,
        .Dark a.clsPropertiesTableClear:hover {
            color: var(--dark-highlight-text-color);
        }

.clsTocSelectedHeadingPath {
    color: #fbe9a0;
}

a.clsTocSelectedItem:hover,
a.clsTocSelectedHeading:hover,
.clsPageNavigatorSelected:hover {
    color: aqua;
}

ul.clsItemsShow,
ul.clsItemsHide {
    margin: 0;
    padding-left: 22px;
}

ul.clsItemsShow {
    list-style: none;
}

ul.clsItemsHide {
    display: none;
}

ul.clsItemsShow ul li {
    margin-left: -10px;
    padding-left: 0;
    margin-bottom: 5px;
    margin-top: 5px;
}

.PLANS ul.clsItemsShow ul li {
    margin-bottom: 12px;
    margin-top: 10px;
}

ul.clsItemsShow li {
    padding-left: 0;
    margin-bottom: 5px;
}

.PLANS ul.clsItemsShow li {
    margin-bottom: 15px;
}

li.clsShowHide {
    position: relative;
    cursor: pointer;
    list-style-image: url(../images/Plus1.png) !important;
}

.PLANS li.clsFlowShowHide {
    list-style-image: url(../images/Flow.png) !important;
}

.PLANS li.clsFlowShowHideShowing {
    list-style-image: url(../images/FlowShowing.png) !important;
}

li.clsShowHideShowing {
    cursor: pointer;
    list-style-image: url(../images/Minus1.png) !important;
}

img {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border: 0;
}

    .Dark img {
        filter: brightness(.8) contrast(1.2)
    }

a {
    color: white;
    text-decoration: none;
}

    .Dark a {
        color: var(--dark-text-color);
    }

    a:hover {
        color: #feda4b;
        text-decoration: none;
    }

    .Dark a:hover {
    color: var(--dark-highlight-text-color);    
}
        

.errorlabel,
.criteriaLabel,
.criteriaRadio,
.criteriaInput,
.criteriaInputLabel,
.criteriaPreviewLabel,
.criteriaListBox,
.criteriaFilter,
.criteriaFilterInput,
.pageNavigationInput,
.criteriaInputFlatLabel,
.criteriaPrintFlatLabel,
.InlineCriteriaInput {
    font-family: Verdana;
    font-size: 1.1rem;
}

.criteriaInputAlert {
    color: red !important;
}

.loginLabel,
.loginInstruction {
    font-family: Verdana;
    font-size: 1.2rem;
    color: white;
    padding-bottom: 5px;
    text-align: right;
}


    .Dark .loginLabel {
        color: var(--dark-text-color);
    }

.loginRow {
    height: 3.5rem;
}

.loginC1 {
    width: 29%;
    text-align: right;
    vertical-align: middle;
}

.loginC2 {
    width: 18%;
}

.loginC2a {
    width: 4%;
}

.loginC3 {
    width: 42%;
}

.loginC2_3 {
    width: 64%;
}

.loginC4 {
    width: 6%;
}

.loginMPIDomain {
    padding-right: 40px;
    width: 26rem;
}

.loginRequiredfield {
    font-family: Verdana;
    font-size: 1.2rem;
    padding-left: 10px;
    font-weight: bold;

}

.Dark .loginRequiredfield {
    color:  var(--dark-highlight-text-color) !important;
}

.loginCopyright,
.loginForgot {
    font-family: Arial;
    font-size: 1rem;
    font-style: normal;
    color: #ffffff;
}

.loginForgot {
    font-size: 1.1rem;
    color: rgba(255, 249, 82, 1);
}

.loginInput {
    font-family: Verdana;
    font-size: 1.2rem;
    color: Black;
    width: 100%;
    -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s;
    transition: border 0.4s, -webkit-box-shadow 0.4s;
    -o-transition: box-shadow 0.4s, border 0.4s;
    transition: box-shadow 0.4s, border 0.4s;
    transition: box-shadow 0.4s, border 0.4s, -webkit-box-shadow 0.4s;
    -webkit-transition: -webkit-box-shadow 0.4s, border 0.4s;
    -moz-transition: -moz-box-shadow 0.4s, border 0.4s;
    -o-transition: -o-box-shadow 0.4s, border 0.4s;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: solid 1px grey;
}

    .Dark .loginInput {
        background-color: var(--dark-input-bg-color);
        border: solid 1px var(--dark-input-border-color);
        color: var(--dark-text-color);
    }

input.loginInput {
    padding: 2px;
}

.requiredfield {
    font-family: Verdana;
    font-weight: bold;
    font-size: 1.2rem;
    color: Red;
    position: absolute;
    padding-left: 10px;
}

.errorlabel {
    color: red;
}

.errorMessage {
    font-family: Verdana;
    font-weight: bold;
    font-size: 1.4rem;
}

.Dark .clsPageNavigationTable,
.Dark .calendarRow,
.Dark .timeSubTitle {
    background: var(--dark-middle-bg-color);
    border-bottom: 1px solid var(--dark-thick-border-color) !important;
}

.clsPageNavigator {
    color: #ffff00;
    white-space: nowrap;
}

.clsPageNavigatorSelected {
    color: #feda4b;
    white-space: nowrap;
}

.criteriaRadio {
    white-space: nowrap;
}

.clsPageNavigationTable {
    height: 2.9rem;
    width: 100%;
    vertical-align: middle;
    border-bottom: 1px solid black;
}

.criteriaLabel {
    color: black;
    background-color: transparent;
}

    .Dark .criteriaLabel,
    .Dark .criteriaRadio{
        color: var(--dark-text-color);
    }

.criteriaMessage {
    font-family: "Segoe UI", Segoe, "DejaVu Sans", "Trebuchet MS", Sans-Serif;
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
}

    .Dark .criteriaMessage {
        color: var(--dark-text-color);
    }

.criteriaMessageSmall {
    font-style: italic;
}

.criteriaMessageMiddle {
    vertical-align: middle;
}

.Dark .criteriaMessageSmall,
.Dark .criteriaMessageMiddle {
    color: var(--dark-highlight-text-color);
}

.criteriaInput,
.criteriaInputLabel,
.criteriaInputFlatLabel,
.criteriaPreviewLabel,
.criteriaFilter,
.criteriaFilterInput,
.jqte,
.InlineCriteriaInput {
    color: black;
    background-color: white;
    border: 1px solid darkgray;
    border-radius: 2px;
    margin-bottom: 4px;
    width: 100%;
    -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s;
    transition: border 0.4s, -webkit-box-shadow 0.4s;
    -o-transition: box-shadow 0.4s, border 0.4s;
    transition: box-shadow 0.4s, border 0.4s;
    transition: box-shadow 0.4s, border 0.4s, -webkit-box-shadow 0.4s;
    -webkit-transition: -webkit-box-shadow 0.4s, border 0.4s;
    -moz-transition: -moz-box-shadow 0.4s, border 0.4s;
    -o-transition: -o-box-shadow 0.4s, border 0.4s;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .Dark .criteriaInput,
    .Dark .criteriaInputLabel,
    .Dark .criteriaInputFlatLabel,
    .Dark .criteriaPreviewLabel,
    .Dark .criteriaFilter,
    .Dark .criteriaFilterInput,
    .Dark .jqte,
    .Dark .InlineCriteriaInput {
        color: var(--dark-text-color);
        background-color: var(--dark-input-bg-color);
        border: 1px solid var(--dark-input-border-color);
        color-scheme: dark;
    }

        .Dark .criteriaFilter,
        .Dark .criteriaFilter.aspNetDisabled,
        .Dark .criteriaFilter.aspNetDisabled:hover {
            background-color: var(--dark-middle-bg-color);            
        }


.criteriaInputMandatorySign {
    border: solid 1px #2A6CC2 !important;
}

    .Dark .criteriaInputMandatorySign {
        border: 1px solid var(--dark-input-border-color) !important;
        border-left: solid 2px #2A6CC2 !important;
    }

.criteriaInputMandatorySignMinimal {
    border-left: solid 2px #2A6CC2 !important;
}

.criteriaImage {
    vertical-align: middle;
}

.criteriaRadio {
    color: black;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0;
}

.criteriaFilter,
.criteriaFilter.aspNetDisabled,
.criteriaFilter.aspNetDisabled:hover {
    background-color: #ffffd7;
}

.criteriaFilterInput,
.criteriaFilterInput.aspNetDisabled,
.criteriaFilterInput.aspNetDisabled:hover {
    background-color: #fdf0f0;
}

.criteriaInputLabel,
.criteriaPreviewLabel {
    background-color: white;
    padding: 2px 0 2px 4px;
    border: 1px solid lightgrey;
}

.criteriaPreviewLabel {
    font-style: normal;
}

.criteriaInputLabel {
    font-style: italic;
    overflow: hidden;
}

.criteriaPrintFlatLabel {
    background: white;
    border: 1px solid white;
    color: Black;
    padding-top: 2px;
}

.criteriaPrintFlatLabel {
    border-style: solid;
    border-color: #dddddd;
    border-width: 1px;
    padding: 3px;
}

.criteriaInputFlatLabel {
    padding: 2px 4px 2px 4px;
    font-style: italic;
}

.criteriaListBox {
    background-color: white;
    border: 1px solid darkgray;
    width: 100%;
}

    .Dark .criteriaListBox {
        background-color: var(--dark-input-bg-color);
        color: var(--dark-text-color);
        border: 1px solid var(--dark-input-border-color);
        color-scheme: dark;
    }

.criteriaTable {
    table-layout: fixed;
    border-spacing: 2px;
    border-collapse: separate;
    padding-top: 4px;
    padding-right: 7px;
    padding-bottom: 6px;
    padding-left: 7px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .criteriaTable > tr > td,
    .criteriaTable > tbody > tr > td,
    .PopupFooterTable > tr > td,
    .PopupFooterTable > tbody > tr > td {
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .criteriaTable > thead > tr > td {
        padding: 0;
    }

/*#region Criteria Container Styles */
/* This section will be used to eventually replace the criteriaTable classes, so they are more flexible to be used with 
    other element types instead of just Tables
*/

.criteriaContainer {
    padding-top: 6px;
    padding-right: 7px;
    padding-bottom: 6px;
    padding-left: 7px;
}

.criteriaContainer__row {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .criteriaContainer__row > * {
        margin-left: 6px;
    }

        .criteriaContainer__row > *:first-child {
            margin-left: 0;
        }

.criteriaContainer__column {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .criteriaContainer__column > * {
        margin-top: 6px;
    }

        .criteriaContainer__column > *:first-child {
            margin-top: 0;
        }

/*#endregion */

.Dark .jqte * {
    color: var(--dark-text-color);
}

.Dark .jqte_formats,
.Dark .jqte_fontsizes,
.Dark .jqte_cpalette {
    background-color: var(--dark-main-bg-color);
    border: 1px solid var(--dark-input-border-color);
    box-shadow: none;
}

.Dark .jqte_fontsize:hover,
.Dark .jqte_format:hover {
    background-color: rgb(from var(--dark-grid-main-color) r g b / 0.15) !important;
}

.Dark .jqte_editor:not(.jqte_output),
.Dark .jqte_source {
    background-color: var(--dark-input-bg-color);
}

.MPILogin {
    width: 100%;
}

    .MPILogin td {
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

.criteriaTableRed {
    background-color: #ff6666;
    border-color: #ff6666;
}

.criteriaTableYellow {
    background-color: #ffffa6;
    border-color: #ffffa6;
}

.criteriaTableGreen {
    background-color: #e4fbe8;
    border-color: #e4fbe8;
}

.Dark .criteriaTableRed,
.Dark .criteriaTableYellow,
.Dark .criteriaTableGreen {
    background-color: transparent;
    border-color: transparent;
}

.criteriaTableBlue {
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.formDetailsCriteria {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 5px 1fr 5px auto 5px auto;
    grid-template-columns: auto 1fr auto auto;
    -ms-grid-rows: auto 5px auto;
    grid-template-areas:
        "logo templateDetails flowControlDetails formDetails"
        "logo formInstanceDetails buttonControls buttonControls";
    grid-gap: 5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
}

.formDetailsCriteria__Logo {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: logo;
}

.formDetailsCriteria__TemplateDetails {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: templateDetails;
}

.formDetailsCriteria__FlowControl {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    grid-area: flowControlDetails;
}

.formDetailsCriteria__FlowControlStatus {
    display: inline-block;
    width: 15rem;
}

.formDetailsCriteria__FlowControlAssignedTo {
    display: inline-block;
    width: 20rem;
}

.formDetailsCriteria__FormDetails {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
    grid-area: formDetails;
}

.formDetailsCriteria__FormInstanceDetails {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: formInstanceDetails;
}

.formDetailsCriteria__ButtonControls {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    justify-self: flex-end;
    -ms-grid-column-align: end;
    grid-area: buttonControls;
}

/*#region Tab menu Styles */
.tabMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tabMenu > li {
        padding: 2px 2px 0 2px;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        overflow: hidden;
    }

.tabMenu__item,
.tabMenu__subItem {
    display: block;
    position: relative;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-family: Candara, Geneva, Arial;
    font-size: 1.3rem;
    font-weight: bold;
    width: 15rem;
    max-width: 100%;
    height: 3rem;
    color: White;
    text-shadow: 0 -1px 0 rgb(0, 0, 0);
    vertical-align: middle;
    border-top: solid 1px white;
    border-radius: 4px 14px 0 0;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset -1px -1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset -1px -1px 2px rgba(0, 0, 0, 0.35);
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: background-color 0.3s ease, width 0.3s ease;
    -o-transition: background-color 0.3s ease, width 0.3s ease;
    transition: background-color 0.3s ease, width 0.3s ease;
}

    .Dark .tabMenu__item, .Dark .tabMenu__subItem {
        border-top: solid 1px var(--dark-input-border-color);
        box-shadow: none;
        background-color: var(--dark-main-bg-color);
    }

    .tabMenu__item > span,
    .tabMenu__subItem > span {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .tabMenu__item.tabMenu__item--red,
    .tabMenu__subItem.tabMenu__item--red,
    .tabMenu__item.tabMenu__item--red:hover,
    .tabMenu__subItem.tabMenu__item--red:hover {
        background: #ca0018;
    }

    .tabMenu__item.tabMenu__item--orange,
    .tabMenu__subItem.tabMenu__item--orange,
    .tabMenu__item.tabMenu__item--orange:hover,
    .tabMenu__subItem.tabMenu__item--orange:hover {
        background: #fa6800;
    }

        .Dark .tabMenu__item.tabMenu__item--red,
        .Dark .tabMenu__subItem.tabMenu__item--red,
        .Dark .tabMenu__item.tabMenu__item--red:hover,
        .Dark .tabMenu__subItem.tabMenu__item--red:hover,
        .Dark .tabMenu__item.tabMenu__item--orange,
        .Dark .tabMenu__subItem.tabMenu__item--orange,
        .Dark .tabMenu__item.tabMenu__item--orange:hover,
        .Dark .tabMenu__subItem.tabMenu__item--orange:hover {
            filter: brightness(0.8) contrast(1.2);
        }


    .tabMenu__item.aspNetDisabled,
    .tabMenu__subItem.aspNetDisabled {
        text-shadow: none;
    }

        .tabMenu__item.aspNetDisabled:hover,
        .tabMenu__subItem.aspNetDisabled:hover {
            background: initial;
        }

    .tabMenu__item.selected,
    .tabMenu__subItem.selected {
        cursor: auto;
        color: Black;
        text-shadow: none;
    }

        .tabMenu__item.selected,
        .tabMenu__subItem.selected,
        .tabMenu__item.selected:hover,
        .tabMenu__subItem.selected:hover {
            -webkit-box-shadow: rgba(255, 255, 255, 0.35) 0 1px 1px inset, rgba(0, 0, 0, 0.35) -1px -1px 1px;
            box-shadow: rgba(255, 255, 255, 0.35) 0 1px 1px inset, rgba(0, 0, 0, 0.35) -1px -1px 1px;
            background: transparent;
        }

        .Dark .tabMenu__item.selected,
        .Dark .tabMenu__subItem.selected,
        .Dark .tabMenu__item.selected:hover,
        .Dark .tabMenu__subItem.selected:hover {
            color: var(--dark-text-color);
            background-color: transparent;
            box-shadow: none;
        }

    .tabMenu__item.tabMenu__item--collapsed,
    .tabMenu__subItem.tabMenu__item--collapsed {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 0;
        margin: 0;
    }

/*#endregion */

/*#region Drop Down Menu Styles */

.dropdownMenu,
.dropdownSubMenu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
}

    .dropdownMenu > li {
        position: relative;
    }

.dropdownMenu__item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.dropdownSubMenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
}

.dropdownSubMenu__item {
    display: block;
    padding: 5px 10px;
}

.dropdownSubMenu .dropdownSubMenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
}

li:hover > .dropdownSubMenu,
.dropdownMenu__item:active + .dropdownSubMenu,
.dropdownMenu__item.expanded + .dropdownSubMenu {
    display: block;
}

/*#endregion */

/*#region toggleFormSystemTabsCollapse */
.toggleFormSystemTabsCollapse > input[type="checkbox"] {
    display: none;
}

.toggleFormSystemTabsCollapse > label {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid lightgrey;
    cursor: pointer;
    margin: 2px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

    .Dark .toggleFormSystemTabsCollapse > label {
        border: 1px solid var(--dark-input-border-color);
    }

 .toggleFormSystemTabsCollapse > label:hover {
        border-color: grey;
    }

    .toggleFormSystemTabsCollapse > label::before,
    .toggleFormSystemTabsCollapse > label::after {
        content: "";
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        border: 1px solid transparent;
        border-left-color: grey;
        border-top-color: grey;
        -webkit-transform: translate(-30%, -50%) rotate(-45deg);
        -ms-transform: translate(-30%, -50%) rotate(-45deg);
        transform: translate(-30%, -50%) rotate(-45deg);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .toggleFormSystemTabsCollapse > label::before {
        width: 0.5rem;
        height: 0.5rem;
    }

    .toggleFormSystemTabsCollapse > label::after {
        height: 1rem;
        width: 1rem;
    }

.toggleFormSystemTabsCollapse > input[type="checkbox"]:checked + label {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*#endregion */

.criteriaButton,
.criteriaButtonSmall,
.criteriaButtonTemplateSmall,
.formNavigationButton,
.ButtonMenu,
.tabItem,
.tabSubItem,
.pageNavigationButton,
.groupNavigationButton,
.logoutButton,
.helpButton,
.ButtonList {
    font-family: Candara, Geneva, Arial;
    font-size: 1.3rem;
    font-weight: bold;
    height: 2.8rem;
    width: 7.5rem;
    color: White;
    margin-left: 2px;
    text-shadow: 0 -1px 0 rgb(0, 0, 0);
    vertical-align: middle;
    border-top: solid 1px white;
    border-radius: 3px;
    text-align: center;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    -webkit-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

    .criteriaButton:hover,
    .criteriaButtonSmall:hover,
    .criteriaButtonTemplateSmall:hover,
    .formNavigationButton:hover,
    .ButtonMenu:hover,
    .pageNavigationButton:hover,
    .groupNavigationButton:hover,
    .logoutButton:hover,
    .helpButton:hover,
    .ButtonList:hover {
        cursor: pointer;
    }

    .Dark .criteriaButton,
    .Dark .criteriaButtonSmall,
    .Dark .criteriaButtonTemplateSmall,
    .Dark .ButtonMenu,
    .Dark .criteriaButton[disabled]:hover,
    .Dark .criteriaButtonSmall[disabled]:hover,
    .Dark .criteriaButtonTemplateSmall[disabled]:hover,
    .Dark .aspNetDisabled.ButtonMenu:hover,
    .Dark .formNavigationButton,
    .Dark .formNavigationButton[disabled]:hover,
    .Dark .pageNavigationButton,
    .Dark .pageNavigationButtonNoRedirectCheck,
    .Dark .pageNavigationButton[disabled]:hover,
    .Dark .pageNavigationButtonNoRedirectCheck[disabled]:hover,
    .Dark .groupNavigationButton, 
    .Dark .groupNavigationButton[disabled]:hover,
    .Dark .logoutButton,
    .Dark .helpButton {
        background-color: var(--dark-main-bg-color);
        color: var(--dark-text-color);
        border: 1px solid var(--dark-input-border-color);
        box-shadow: none;
    }

        .Dark .criteriaButton:hover,
        .Dark .criteriaButtonSmall:hover,
        .Dark .criteriaButtonTemplateSmall:hover,
        .Dark .ButtonMenu:hover,
        .Dark .formNavigationButton:hover,
        .Dark .pageNavigationButton:hover,
        .Dark .pageNavigationButtonNoRedirectCheck:hover,
        .Dark .groupNavigationButton:hover,
        .Dark .logoutButton:hover,
        .Dark .helpButton:hover {
            background-color: var(--dark-input-bg-color);
        }

    .ButtonList {
        width: 100%;
        text-shadow: none;
        color: black;
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: rgb(230, 234, 235);
    }

    
 
    .ButtonList:hover {
            background-color: rgb(215, 215, 215);
        }

    .ButtonList,
    .ButtonList:hover {
        border: 1px solid rgb(175, 175, 175);
    }

    .Dark .ButtonList {
            background-color: var(--dark-main-bg-color);
            color: var(--dark-text-color);
            border: 1px solid var(--dark-input-border-color);
        }

        .Dark .ButtonList:hover {
            background-color: var(--dark-input-bg-color);
        }

.criteriaHyperLink {
    color: white;
    cursor: pointer;
    border: ridge 1px white;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.criteriaButtonSmall,
.criteriaButtonTemplateSmall,
.formNavigationButton,
.pageNavigationButton,
.helpButton {
    height: 2.6rem;
    width: 2.8rem;
    padding: 0;
}

.derivedField {
    background-image: url(../images/DerivedField.svg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 1.8em 1.5em;
    padding-right: 2em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.EmbeddedMediaContainer.derivedField {
    background: none;
    position: relative;
}

    .EmbeddedMediaContainer.derivedField::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 1.5em;
        width: 2em;
        z-index: 1;
        background-image: url(../images/DerivedField.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.8em 1.5em;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

.formRecordGroupNameNavigationButton {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-left: 0;
    width: auto;
    min-width: 15rem;
    max-width: 250px;
}

.ButtonMenuSmall {
    width: 3.2rem;
}

.helpButton {
    color: #feda4b;
    font-size: 1.8rem;
}

.redButton,
.redTab {
    background: #ca0018 !important;
}

.Dark .redButton,
.Dark .redTab {
    background-color: var(--dark-background-80) !important;
}

.orangeTab {
    background: #fa6800 !important;
}

.heightStyleSmall {
    height: 1.8rem;
}

.heightStyleStandard {
    height: 2.8rem;
}

.heightStyleLarge {
    height: 3.9rem;
}

.criteriaButtonTemplateSmall {
    font-family: Wingdings;
}

.tableMenu > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tableMenu.blocksMenu {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

    .tableMenu.blocksMenu > ul {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

.tabSeparator {
    border: none;
    border-bottom: solid 1px white;
    text-align: right;
    -ms-flex-item-align: end;
    align-self: flex-end;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}


    .Dark .tabSeparator {
        border-bottom: solid 1px var(--dark-input-border-color);
    }

.tabItem,
.tabSubItem {
    min-width: 15rem;
    height: 3rem;
    border-radius: 4px 14px 0 0;
    margin: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset -1px -1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset -1px -1px 2px rgba(0, 0, 0, 0.35);
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

    .Dark .tabItem, .Dark .tabSubItem {
        border-top: solid 1px var(--dark-input-border-color);
        box-shadow: none;
        background-color: var(--dark-main-bg-color);
    }

a.tabItem,
a.tabSubItem {
    -webkit-box-shadow: none;
    box-shadow: none;
}

table.tabItem,
table.tabSubItem,
a.tabItem,
a.tabSubItem {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* This is needed to make the whole tab item / button menu item selectable, not just the text */
    a.tabItem span,
    a.tabSubItem span,
    a.ButtonMenuItem span,
    a.tabItem,
    a.tabSubItem,
    a.ButtonMenuItem {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

.tabSelected,
.tabItem.selected,
.tabSubItem.selected {
    border-bottom: none;
    color: Black;
    text-shadow: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), -1px -1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), -1px -1px 1px rgba(0, 0, 0, 0.35);
    height: 3.3rem;
    font-size: 1.4rem;
}

    .Dark .tabSelected,
    .Dark .tabItem.selected,
    .Dark .tabSubItem.selected {
        color: var(--dark-text-color);
        background-color: transparent;
    }

.blocksMenu .tabSelected,
.blocksMenu .selected {
    cursor: default;
    pointer-events: none;
}

.pageNavigationInput {
    color: Black;
}

    .Dark .pageNavigationInput {
        color: var(--dark-text-color);
        background-color: var(--dark-input-bg-color);
        border-color: var(--dark-input-border-color);
    }

.pageNavigationBack {
    font-family: Verdana;
    font-weight: bold;
    font-size: 1.1rem;
    text-shadow: 0 -1px 0 #111;
    color: #ffff00;
}

    .Dark .pageNavigationBack {
        color: var(--dark-highlight-text-color);
    }

.dlSummary {
    border-bottom-width: 0;
    border-top-width: 0;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #b0b4b7;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #b0b4b7;
}

    .dlSummary tr {
        -webkit-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
    }

    .dlSummary td {
        border-bottom-width: 0;
        border-top-width: 0;
        border-left-style: solid;
        border-left-width: 1px;
        border-left-color: #e0e4e7;
        border-right-style: solid;
        border-right-width: 1px;
        border-right-color: #e0e4e7;
        padding-left: 4px;
    }

        .Dark .dlSummary td {
            border-left-color: transparent;
            border-right-color: transparent;
        }

.dlSummaryItem,
.dlSummaryAlternatingItem,
.dlSummarySelected,
.dlSummaryHovered,
.dlSummaryHoveredSelected {
    font-family: Verdana;
    font-size: 1.1rem;
    background-color: white;
    height: 3rem;
    border-top: solid 1px white;
}

    .Dark .dlSummaryItem,
    .Dark .dlSummaryAlternatingItem,
    .Dark .dlSummarySelected,
    .Dark .dlSummaryHovered,
    .Dark .dlSummaryHoveredSelected {
        background-color: rgb(from var(--dark-grid-main-color) r g b / 0.03);
        border-top: solid 1px var(--dark-gridlines-border-color);
        color: var(--dark-text-color) !important;
    }

.dlSummarySelected,
.dlSummaryHovered,
.dlSummaryHoveredSelected,
.dlSummaryHeader,
.dlSummaryFooter,
.BuilderNavigationTable {
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
}

    .Dark .dlSummarySelected,
    .Dark .dlSummaryHovered,
    .Dark .dlSummaryHoveredSelected {
        box-shadow: inset 0px 1px 1px var(--dark-input-border-color), inset 0px -1px 1px rgba(0,0,0,0.15);
    }

.dlSummaryFooterText {
    color: white;
    font-family: Verdana;
    font-size: 1.1rem;
}

.Dark .dlSummarySelected,
.Dark .dlSummaryHovered {
    background-color: rgb(from var(--dark-grid-main-color) r g b / 0.15);
}

.Dark .dlSummaryHoveredSelected {
    background-color: rgb(from var(--dark-grid-main-color) r g b / 0.20);
}

.dlSummaryHeader,
.dlSummaryFooter,
.InlineCriteriaHeader,
.BuilderNavigationTable {
    font-family: Verdana;
    font-size: 1.1rem;
    color: White;
    height: 3rem;
}

.Dark .dlSummaryHeader,
.Dark .dlSummaryFooter,
.Dark .InlineCriteriaHeader,
.Dark .BuilderNavigationTable,
.Dark .calendarTitle,
.Dark .multiTitle,
.Dark .timeTitle,
.Dark .timeMinute {
    background-color: var(--dark-main-bg-color);
    color: var(--dark-text-color);
    border-top: 1px solid var(--dark-thick-border-color);
    border-bottom: 1px solid var(--dark-thick-border-color);
    box-shadow: none;
}

.dlPrintSummaryHeader {
    font-family: Verdana;
    font-size: 1.1rem;
    color: White;
    height: 10rem;
}

.dlSummaryFooter {
    padding-left: 10px;
    padding-right: 7px;
}

/* The following style are used for the inline editing grids */
/* ------------------------------------------------------------------------------------------------------------------*/

.InlineCriteriaTable,
.TemplateNavigationTable {
    width: 100%;
    border: 1px solid darkgray;
    border-top: none;
    border-collapse: separate;
    border-spacing: 0;
}

.Dark .InlineCriteriaTable,
.Dark .TemplateNavigationTable {
    background-color: var(--dark-middle-bg-color);
    border-left: 1px solid var(--dark-input-border-color);
    border-right: 1px solid var(--dark-input-border-color);
    border-bottom: 1px solid var(--dark-input-border-color);
}

.divTreeView {
    opacity: 0.85;
}

.Dark .divScrolling {
    color-scheme: dark;
}

.Dark .divTreeView {
    background-color: var(--dark-middle-bg-color);
    
}

.InlineCriteriaHeader {
    padding-left: 7px;
}

.InlineCriteriaLabel,
.InlineCriteriaAlternatingLabel,
.InlineCriteriaLabelNoPadding,
.InlineCriteriaAlternatingLabelNoPadding {
    font-family: Verdana;
    font-size: 1.1rem;
    background-color: white;
    vertical-align: middle;
    padding-left: 4px;
    padding-right: 5px;
    height: 3rem;
}

    .Dark .InlineCriteriaLabel,
    .Dark .InlineCriteriaAlternatingLabel,
    .Dark .InlineCriteriaLabelNoPadding,
    .Dark .InlineCriteriaAlternatingLabelNoPadding {
        background-color: var(--dark-middle-bg-color);
        color: var(--dark-text-color);
    }

.InlineCriteriaInput {
    margin-bottom: 0;
}

.PickerTable {
    position: relative;
}

    .PickerTable .InlineCriteriaInput {
        /* margin-bottom: 2px; */
    }

.InlineCriteriaAlternatingLabel,
.InlineCriteriaLabel {
    white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------------------------------*/
.BuilderMainTable {
    border: 0;
    width: 100%;
    height: 70%;
}

.TemplateNavigationTable {
    font-family: Verdana;
    font-size: 1.1rem;
}

/* ------------------------------------------------------------------------------------------------------------------*/

.printTable {
    width: 100%;
    border-width: medium;
}

.printTitle,
.printSubHeading,
.chartTitle,
.printTitleCode,
.printTitleCode {
    font-family: Arial;
    font-size: 2rem;
    font-weight: bold;
    color: White;
    height: 3rem;
    width: 100%;
    text-align: left;
}

.printTitleName {
    font-family: Arial;
    font-size: 2rem;
    text-align: right;
    padding: 0 2px 0 0;
    border-width: 0;
    font-size: 2.3rem;
    vertical-align: baseline;
    font-weight: bold;
    width: 100%;
}

.printTitleCode {
    text-align: right;
    width: 1%;
    font-size: 1rem;
    vertical-align: baseline;
    padding: 0 0 0 2px;
    border-width: 0;
}

.printSubHeading {
    font-size: 1.2rem;
    height: 2.5rem;
    padding-left: 8px;
}

.printContentsTable {
    background-color: #ffffff;
    width: 100%;
    padding: 0 0 0 0;
    border-spacing: 0;
}

.chartTitle {
    font-size: 1.4rem;
    font-weight: bold;
    height: 2.3rem;
}

.printContentsLabel,
.printCriteria,
.printCriteriaValue,
.printContentsValue {
    font-family: Verdana;
    font-size: 1.1rem;
    color: Black;
    height: 1.9rem;
    width: 100%;
}

.PrintCompetenceCriteria {
    font-family: Verdana;
    font-size: 1.2rem;
    color: Black;
    height: 1.9rem;
}

.printCriteria,
.printContentsLabel,
PrintCompetenceCriteria {
    font-style: italic;
}

.printContentsLabel,
.printContentsValue {
    padding: 2px 0 2px 2px;
}

.divSummaryList {
    height: 96%;
    overflow: auto;
}

div.divScrolling {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d( 0, 0, 0 ); /* needed to resolve an issue on ipads with controls disappearing on edit */
    perspective: 0;
    -webkit-perspective: 0;
}

    div.divScrolling.FORMS,
    div.divScrolling.DOCS,
    div.divScrolling.divTreeView {
        overflow: hidden;
        padding: 10px 15px 0 3px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        div.divScrolling.FORMS:hover,
        div.divScrolling.DOCS:hover,
        div.divScrolling.divTreeView:hover {
            overflow: auto;
            padding: 10px 0 0 3px;
        }

.ScrollToTop,
.SettingsMenu,
.settingsMenuButton {
    width: 3.5rem;
    height: 0.5rem;
    right: 5rem;
    bottom: 3.5rem;
    opacity: 0.4;
    background-image: url(../images/uplight.png);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border-radius: 5px 5px 5px 5px;
}

.SettingsMenu,
.settingsMenuButton {
    background-color: #647687;
    display: block;
    background-image: url(../images/settings.png);
    right: 14rem;
}

    .SettingsMenu:hover,
    .SettingsMenu:focus,
    .ScrollToTop:hover,
    .settingsMenuButton:hover,
    .settingsMenuButton:focus {
        opacity: 1;
    }

.settingsMenuButton {
    position: static;
    width: 7.5rem;
}

.SearchFilter {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

td.print {
    width: 65rem;
}

.calendarSelect,
.calendarDay,
.calendarSelectDay,
.calendarSelectWeekend,
.calendarSelectNav,
.timeMinute,
.timeHour,
.multiFilterBar {
    font-family: sans-serif, Geneva, Arial;
    font-size: 1.3rem;
    -webkit-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}

.multiFilterBar {
    font-size: 1.2rem;
}


.calendarSelectDay {
    background-color: white;
}

.calendarSelectWeekend {
    background-color: transparent;
}

.Dark .PickerBody,
.Dark .timeHour {
    background-color: var(--dark-form-bg-color);
    color: var(--dark-text-color);
}

.Dark .timeMinute {
    background-color: var(--dark-input-bg-color);
}

.calendarSelectDay:hover,
.calendarSelectWeekend:hover,
.Dark .calendarSelectDay:hover,
.timeMinute:hover,
.timeHour:hover {
    background-color: rgb(from var(--dark-grid-main-color) r g b / 0.35) !important;
}

.calendarSelect {
    background-color: White;
    border: solid 1px #c0c0c0;
    -webkit-appearance: none !important;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 2px;
}

.Dark .calendarSelect {
    background-color: var(--dark-input-bg-color);
    border: 1px solid var(--dark-input-border-color);
    color: var(--dark-text-color);
}

.Dark .multiFilterBar {
    color: var(--dark-text-color);
}

.Dark .multiFilterBar img {
    filter: invert(1);
}

.calendarDay,
.calendarSelectNav {
    font-weight: normal;
}

.Dark .calendarSelectDay {
    background-color: var(--dark-input-bg-color);
}

.calendarSelectDayAnchor {
    color: black;
}

.calendarSelectDayAltAnchor {
    color: #999999;
}

.Dark .calendarSelectDayAnchor,
.Dark .calendarDay {
    color: var(--dark-text-color);
}

.calendarRow {
    background: transparent;
    text-align: center;
}

.timeHour {
    width: 12.5%;
}


.multiTitle,
.timeTitle,
.timeSubTitle,
.calendarTitle {
    font-family: sans-serif, Geneva, Arial;
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 -1px 0 rgb(2, 2, 2);
    border-collapse: separate;
}

.pickerNumber,
.pickerFunction {
    font-family: sans-serif, Geneva, Arial;
    font-size: 1.6rem;
    width: 25%;
    background-color: Transparent;
    border-top: solid 1px gray;
    border-right: solid 1px gray;
}

.Dark .pickerNumber,
.Dark .pickerFunction {
    color: var(--dark-text-color);
    border-top: solid 1px var(--dark-input-border-color);
    border-right: solid 1px var(--dark-input-border-color);
}

.pickerNumber {
    background-color: White;
}

    .Dark .pickerNumber {
        background-color: var(--dark-input-bg-color);
    }

    .pickerNumber:hover,
    .pickerFunction:hover {
        cursor: pointer;
        background-color: #feda4b;
    }

    .Dark .pickerNumber:hover,
    .Dark .pickerFunction:hover {
        cursor: pointer;
        background-color: rgb(from var(--dark-grid-main-color) r g b / 0.35) !important;
    }

.pickerNoBorder {
    border-right: none;
}

.multiList {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    width: 30rem;
    height: 20.5rem;
    background-color: White;
    visibility: inherit;
    z-index: 0;
}

    .Dark .multiList {
        background-color: var(--dark-input-bg-color);
        color-scheme: dark;
    }

.headerTemplateName,
.headerTemplateCode,
.headerTemplateDivOrgDDL,
.headerNumberHistorical,
.headerNumberReleased,
.headerNumberNonReleased {
    border: 0;
    font-family: "Segoe UI", Segoe, "DejaVu Sans", "Trebuchet MS", Sans-Serif;
    font-size: 1.7rem;
    font-weight: 600;
    background-color: transparent !important;
    text-shadow: 1px 1px 2px #eee;
}

.headerTemplateDivOrgDDL {
    width: auto !important;
    border-width: 0 !important;
}

.Dark .headerTemplateCode,
.Dark .headerTemplateDivOrgDDL {
    text-shadow: none;
    font-weight: 400;
    color: var(--dark-highlight-text-color);
}

    .Dark .headerTemplateDivOrgDDL option {
        color: var(--dark-text-color);
        background-color: var(--dark-form-bg-color) !important
    }

.headerTemplateName {
    font-size: 1.7rem;
    font-weight: bold;
    color: Black;
}

.Dark .headerTemplateName {
    text-shadow: none;
    font-weight: 600;
    color: var(--dark-text-color);
}

.headerNumberHistorical,
.headerNumberSigned {
    color: #c80000;
    text-shadow: 1px 1px 2px #fff;
}

.headerNumberReleased,
.headerNumberUnsigned {
    color: #2A6CC2;
    text-shadow: 1px 1px 2px #fff;
    font-weight: bold;
}

.headerNumberNonReleased {
    color: #b5b535;
    text-shadow: 1px 1px 0 #444;
    font-weight: bold;
}

.Dark .headerNumberHistorical,
.Dark .headerNumberReleased,
.Dark .headerNumberNonReleased,
.Dark .headerNumberUnsigned,
.Dark .headerNumberSigned {
    text-shadow: none;    
    font-weight: normal;
}


/* The following style are used for defining the colours of labels */
/* ------------------------------------------------------------------------------------------------------------------*/
.obsGridLabelGreen,
.obsGridLabelRed,
.obsGridLabelYellow,
.obsGridLabelStyle100,
.obsGridLabelStyle80,
.obsGridLabelStyle60,
.obsGridLabelStyle40,
.obsGridLabelStyle20,
.obsGridLabelTransparent,
.obsGridLabelGradient,
.obsGridLabelColoured {
    padding: 9px 5px 9px 5px;
    font-style: normal;
    font-family: Verdana;
    font-size: 1.1rem;
    color: Black;
    white-space: pre-wrap;
}

.obsGridLabelTransparent {
    background-color: transparent;
}
    .obsGridLabelGreen a,
    .obsGridLabelYellow a,
    .obsGridLabelRed a,
    .obsGridLabelTransparent a {
        color: Black;
    }

    .Dark .obsGridLabelGreen a,
    .Dark .obsGridLabelYellow a,
    .Dark .obsGridLabelRed a,
    .Dark .obsGridLabelTransparent a {
        color: var(--dark-text-color);
    }



.Dark .obsGridLabelStyle100,
.Dark .obsGridLabelGradient {
    background-color: var(--dark-main-bg-color);
    color: var(--dark-text-color);
}

.Dark .obsGridLabelStyle80 {
    background-color: var(--dark-background-80) !important;
    color: var(--dark-text-color);
}

.Dark .obsGridLabelStyle60 {
    background-color: var(--dark-middle-bg-color) !important;
    color: var(--dark-text-color);
}

.obsGridLabelYellow {
    background-color: #ffffd7 !important;
}

.obsGridLabelRed {
    background-color: #fdf0f0 !important;
}

.obsGridLabelGreen {
    background-color: #e4fbe8 !important;
}

.Dark .obsGridLabelYellow,
.Dark .obsGridLabelRed,
.Dark .obsGridLabelGreen {
    background-color: var(--dark-middle-bg-color) !important;
    color: var(--dark-text-color);
}

.Dark .obsGridLabelColoured,
.Dark .obsGridLabelTransparent {
    background-color: transparent !important;
    color: var(--dark-text-color);
}

.formTemplateItemAttachmentCell,
.formItemAttachmentCell,
.formItemRequestCell,
.formItemLinkCell {
    cursor: pointer;
    vertical-align: top;
}

.formTemplateItemAttachmentCell {
    background-color: #d45869;
}

.formItemAttachmentCell {
    background-color: #C22A2A !important;
}

.formItemRequestCell {
    background-color: #2A6CC2 !important;
}

.formItemLinkCell {
    /* background-color:#116A3D;*/
    background-color: #03ae57;
}

.Dark .formItemLinkCell {
    background-color: #116A3D;
}

.criteriaInputMandatory {
    border: solid 1px #C22A2A !important;
}

.Dark .criteriaInputMandatory {
    border: 1px solid var(--dark-input-border-color) !important;
    border-left: solid 2px #C22A2A !important;
}

.criteriaInputMandatoryMinimal {
    border-left: solid 2px #C22A2A !important;
}


.BlockContainer {
    margin: 0 0 10px 0;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.divScrolling > .BlockContainer:last-child {
    margin-bottom: 0;
}

.ShowInSmallMode {
    width: 66.7rem;
    margin: auto;
}

    .ShowInSmallMode .singleSmallContainer {
        display: block !important;
        width: 100% !important;
    }

    .ShowInSmallMode .singleSmall {
        display: block !important;
    }

.ShowPostBack {
    outline-color: #062e4d !important;
    outline-style: dashed !important;
    outline-width: 1px !important;
}

.inlineEditingPlaceholder {
    outline: 1px dashed silver;
    color: silver;
    white-space: nowrap;
}

.inlineEditing {
    outline: 1px dashed orangered;
}

.HelpText {
    color: darkblue;
    text-align: right;
}

.formItemSummaryValueDiv {
    white-space: pre-wrap;
}

.formGeneralBlockOuterTable,
.formGeneralBlockOuterTablePreview,
.formGeneralBlockPrintOuterTable,
.formExpandingBlockOuterTable,
.formExpandingBlockPrintOuterTable,
.formExpandingBlockVerticalOuterTable {
    padding: 0;
    width: 100%;
    margin-bottom: 10px;
    border-spacing: inherit;
}

.Dark .formGeneralBlockOuterTable,
.Dark .formGeneralBlockOuterTablePreview,
.Dark .formGeneralBlockPrintOuterTable,
.Dark .formExpandingBlockOuterTable,
.Dark .formExpandingBlockPrintOuterTable,
.Dark .formExpandingBlockVerticalOuterTable {
    background-color: rgb(from var(--dark-grid-main-color) r g b / 0.03);
    border-color: var(--dark-input-border-color);
}



.formExpandingBlockPrintOuterTable {
    width: 99%;
}

table.formGeneralBlockOuterTable > tbody > tr > td {
    border-spacing: 1px;
    border: solid 1px #f5f5f5;
    border-collapse: collapse;    
}

table.formGeneralBlockOuterTableNoBorder > tbody > tr > td {
    border: solid 1px transparent !important;
}

table.formExpandingBlockVerticalOuterTable > tbody > tr > td {
    border: solid 1px #f5f5f5;
    border-collapse: collapse;
}

table.formExpandingBlockOuterTable > tbody > tr > td,
table.formExpandingBlockPrintOuterTable > tbody > tr > td {
    border: solid 1px #f5f5f5;
    border-collapse: collapse;
}

.Dark table.formGeneralBlockOuterTable > tbody > tr > td,
.Dark table.formExpandingBlockVerticalOuterTable > tbody > tr > td,
.Dark table.formExpandingBlockOuterTable > tbody > tr > td,
.Dark table.formExpandingBlockPrintOuterTable > tbody > tr > td {
    border-color: var(--dark-gridlines-border-color);
}

 .formBlockHeader {
    height: 2.8rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
}

.Dark .formBlockHeader {
    background-color: var(--dark-main-bg-color);
    color: var(--dark-text-color);
    box-shadow: none;
    border-top: 1px solid var(--dark-thick-border-color);    
}

.formBlockTitle,
.criteriaTitle {
    font-size: 1.2rem;
    /*
    font-family: Trebuchet MS, Arial;
    font-size: 1.3rem;    
    font-weight: bold;
    color: white;	    
    text-shadow: 0 -1px 0 rgb(2,2,2);	
    */
}

.formNavigationButton {
    background: none;
    margin-left: 5px;
}

.formGeneralBlockItemOuterCell,
.formExpandingTableItemSummaryCell,
.formExpandingTableItemHFControlCell,
.formExpandingTableItemControlCell,
.formHeaderFooterItemCell,
.formExpandingFormulaItemCell,
.formSubGroupItemCell,
.formFormulaItemOuterCell,
.formExpandingBlockItemGroupItemCell,
.formExpandingBlockHorizontalItemOuterCell,
.formExpandingBlockItemDetailAandROuterCell,
.formExpandingBlockItemDetailAandROuterCellDownThePage,
.formItemSummaryCommentCell,
.formExpandingBlockHorizontalMCItemLabelCell,
.formFixedTableSummaryItemCell,
.formFixedTableRowItemCell,
.formExpandingBlockHorizontalItemLabelCell,
.formDummySysColumnCell {
    border: solid 1px #f5f5f5;
}

.Dark .formGeneralBlockItemOuterCell,
.Dark .formExpandingTableItemSummaryCell,
.Dark .formExpandingTableItemHFControlCell,
.Dark .formExpandingTableItemControlCell,
.Dark .formHeaderFooterItemCell,
.Dark .formExpandingFormulaItemCell,
.Dark .formFormulaItemOuterCell,
.Dark .formExpandingBlockItemGroupItemCell,
.Dark .formExpandingBlockHorizontalItemOuterCell,
.Dark .formExpandingBlockItemDetailAandROuterCell,
.Dark .formExpandingBlockItemDetailAandROuterCellDownThePage,
.Dark .formItemSummaryCommentCell,
.Dark .formExpandingBlockHorizontalMCItemLabelCell,
.Dark .formFixedTableSummaryItemCell,
.Dark .formFixedTableRowItemCell,
.Dark .formExpandingBlockHorizontalItemLabelCell,
.Dark .formDummySysColumnCell {
    border: solid 1px transparent;
}

.formGeneralBlockItemCriteriaLabel {
    padding-bottom: 3px !important;
}

.obsGridLabel,
.formFixedTableSummaryItemCell {
    background-color: #ffffd7;
    padding-bottom: 4px;
    padding-top: 5px;
    font-style: italic;
}

.formFixedTableSummaryItemCell {
    text-align: right;
}

.formZeroBorderWidthCell {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: hidden; /* to avoid thick line at the top of a standard flat block table in forms*/
}

.formDummySysColumnCell {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

.formwhiteBorderLeftAndTopCell {
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    /*border-right-width:0px;
    border-bottom-width:0px;*/
}

.formwhiteBorderTopCell,
.formZeroBorderWidthCell,
.formDummySysColumnCell {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    /*border-left-width:0px;
    border-right-width:0px;
    border-bottom-width:0px;*/
}

.formwhiteBorderTopAndRightCell {
    border-left-color: transparent !important;
    border-bottom-color: transparent !important;
    /* border-left-width:0px;
    border-bottom-width:0px;*/
}

.formwhiteBorderTopAndBottomCell {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    /*border-left-width:0px;
    border-right-width:0px;*/
}

.formwhiteBorderLeftTopAndRightCell {
    border-bottom-color: transparent !important;
    /*border-bottom-width:0px;*/
}

.formwhiteBorderRightAndBottomCell {
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    /* border-left-width:0px;
    border-top-width:0px;*/
}

.formwhiteBorderBottomCell {
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    /* border-right-width:0px;
    border-left-width:0px;
    border-top-width:0px; */
}

.formwhiteBorderRightBottomAndLeftCell,
.formZeroBorderWidthCell,
.formDummySysColumnCell {
    border-top-color: transparent !important;
    /*border-top-width:0px;*/
}

.formwhiteBorderBottomAndLeftCell {
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    /* border-right-width:0px;
    border-top-width:0px;*/
}

.formwhiteBorderLeftTopAndBottomCell {
    border-right-color: transparent !important;
    /* border-right-width:0px; */
}

.formwhiteBorderTopRightAndBottomCell {
    border-left-color: transparent !important;
    /*  border-left-width:0px; */
}

.formExpandingBlockOuterTable,
.formExpandingBlockVerticalOuterTable {
    background-color: White;
    border-spacing: 0;
}

.Dark .formHeaderFooterItemCell,
.Dark .formExpandingTableItemHFControlCell,
.Dark .formHeaderFooterItemDetailAttachmentCell {
    background-color: var(--dark-main-bg-color);
    color: var(--dark-text-color);
}

.Dark .formExpandingBlockItemGroupItemCell {
    background-color: transparent;
    color: var(--dark-text-color);
}

.Dark .formExpandingBlockHorizontalItemOuterCell,
.Dark .formExpandingBlockHorizontalItemLabelCell,
.Dark .formExpandingBlockItemDetailAandROuterCellDownThePage,
.Dark .formFixedTableRowItemCell {
    background-color: var(--dark-middle-bg-color);
    color: var(--dark-text-color);
}

.Dark .InlineCriteriaAlternatingLabel,
.Dark .InlineCriteriaAlternatingLabelNoPadding,
.Dark .formExpandingBlockHorizontalMCItemLabelCell,
.Dark .formExpandingTableItemSummaryCell,
.Dark .formAlternativeRecordCell {
    background-color: transparent;
    color: var(--dark-text-color);
}

.Dark .formSubGroupItemCell {
    background-color: var(--dark-main-bg-color);
    color: var(--dark-text-color);
}

.Dark .formFormulaItemCell,
.Dark .formFormulaItemOuterCell,
.Dark .formExpandingFormulaItemCell,
.Dark .formFormulaCellColour {
    background-color: var(--dark-background-80);
    color: var(--dark-text-color);
}


.ButtonListTable {
    border: 1px solid transparent;
}

table.ButtonListTable td {
    border: none !important;
}

.zeroPadding,
.zeroPaddingCellsWithinTable {
    padding: 0;
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

table.zeroPaddingCellsWithinTable > tr > td,
table.zeroPaddingCellsWithinTable > tbody > tr > td {
    padding: 0;
}

.formExpandingTableNavBarCell {
    padding-left: 5px;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}

.formExpandingTableNavBarTable {
    position: Relative;
    border-spacing: 0;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
    padding-bottom: 0;
}

.formGeneralBlockItemOuterTable {
    border-spacing: 1px;
    width: 100%;
}

.formGeneralBlockItemControlOuterCell {
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 4px; /* to give bit of space between a control and its border at the bottom -- noticed and suggested by rob*/
    vertical-align: top;
    text-align: left;
}

.formGeneralBlockAnchorOrBarOuterCell,
.formAnchorOrBarOuterCell {
    width: 0.5rem;
}

.formGeneralBlockAnchorOrBarOuterCell {
    padding-top: 4px; /* updated from 2px to 4px after updating its container cell to align top*/
}

.fullWidthHeight {
    width: 100%;
    height: 100%;
}

.formExpandingTableHorizontalItemLabelOuterTable {
    height: 100%;
    border-spacing: 0;
}

.formItemDetailAttachmentCell,
.formHeaderFooterItemDetailAttachmentCell,
.formExpandingBlockItemDetailAttachmentCell {
    font-family: Arial;
    font-size: 0.9rem;
    height: 100%;
    padding-top: 7px;
    vertical-align: top;
    padding-left: 0;
    padding-right: 0;
    color: black;
    text-align: center;
}

.formGeneralBlockItemOuterCell {
    width: 0;
    height: 100%;
    vertical-align: top;
}

.formExpandingTableItemControlCell,
.formExpandingTableItemHFControlCell,
.formFormulaItemOuterCell {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.formHeaderFooterItemCell,
.formExpandingFormulaItemCell,
.formSubGroupItemCell,
.formFixedTableRowItemCell,
.formExpandingBlockItemGroupItemCell {
    white-space: pre-wrap;
    padding-top: 5px;
    padding-bottom: 5px;
}

.formExpandingTableItemSummaryCell {
    white-space: pre-wrap;
    padding-top: 8px;
    padding-bottom: 5px;
}

.formExpandingTableItemSummaryCell,
.formItemSummaryCommentCell,
.formHeaderFooterItemCell,
.formExpandingBlockItemGroupItemCell,
.formFormulaItemCell,
.formExpandingFormulaItemCell,
.formSubGroupItemCell,
.formExpandingBlockHorizontalItemLabelCell,
.formFixedTableSummaryItemCell,
.formFixedTableRowItemCell,
.obsGridLabel {
    font-family: Verdana;
    font-size: 1.1rem;
    padding-left: 5px;
    padding-right: 5px;
    height: 1.9rem;
}


.formExpandingTableItemSummaryCell,
.obsGridLabel {
    padding-left: 10px;
    padding-right: 10px;
}

.formExpandingBlockItemGroupItemCell {
    vertical-align: middle;
}

.formExpandingBlockVerticalItemNameCell {
    vertical-align: top;
    padding-top: 5px;
}

.formItemSummaryCommentCell {
    vertical-align: top;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 6px; /* to align itself to item values.. Issue No: 19742 */
}

.formExpandingBlockHorizontalItemOuterCell {
    padding: 0;
    background-color: White;
}

.formFormulaItemCell {
    padding-top: 2px;
}

.formExpandingFormulaItemCell,
.formSubGroupItemCell,
.formFormulaItemCell {
    height: auto;
    min-height: 1.9rem;
}

.formExpandingBlockHorizontalMCItemLabelCell {
    font-family: Verdana;
    /*font-size: 1rem; -- As suggested, we need to wait if someone likes to have this font size or not...*/
    /**text-align: center; -- From V5, it is left aligned to get this style consistent with general block and deals with a scenario in which the control takes 100% of width..*/
    white-space: pre-wrap;
    padding-top: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 2px;
    color: Black;
    vertical-align: text-top;
    height: 2.6rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.formExpandingItemCommentsIndicator {
    border-bottom-width: 4px !important;
    /*border-bottom-color: #116A3D;*/
    border-bottom-color: #03ae57 !important;
}

.formExpandingBlockItemNavLinkCell {
    padding-left: 0;
    padding-right: 0;
    text-align: right;
}

.formExpandingTableItemAnchor {
    color: Black;
}

.formHeaderFooterItemAnchor {
    color: White;
}

.embeddedCriteriaTable {
    border-style: none;
    border-spacing: 0;
    border-width: 0;
    width: 100%;
    padding: 0;
}

.ButtonNavigationBase,
.ButtonNavigationBlock,
.ButtonNavigationGroup,
.ButtonNavigationQAItm,
.ButtonNavigationItm {
    font-family: Candara, Geneva, Arial;
    font-size: 1.2rem;
    height: 2.5rem;
    width: 100%;
    color: White;
    margin-top: 4px;
}

table.ButtonListTable > tbody > tr > td {
    padding-top: 10px;
}

table.ButtonListTable > tbody > tr:first-child > td {
    padding-top: 0;
}

.formButtonListItemCell {
    padding-left: 4px;
    padding-right: 4px;
}

.formGeneralBlockButtonListItemCell {
    padding-left: 4px;
    padding-right: 4px;
}

.clickableSummaryItemCell {
    position: relative;
    z-index: 1;
}

    .clickableSummaryItemCell > a {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .clickableSummaryItemCell > a::before {
            content: "";
            position: absolute;
            display: block;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 0;
        }

    .clickableSummaryItemCell:hover > a::before {
        background-color: rgba(100, 100, 100, 0.1);
    }

.ExpandingLabel {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

    .ExpandingLabel > .ShortLabel {
        width: auto;
        position: relative;
        background-image: url(../images/sortdown.png);
        background-repeat: no-repeat;
        background-position: right center;
    }

    .ExpandingLabel > .FullLabel {
        position: absolute;
        z-index: 99;
        display: block;
        width: 100%;
        border-radius: 3px;
        padding: 10px 5px 10px 5px;
        -webkit-box-shadow: 0 1px 3px #666;
        box-shadow: 0 1px 3px #666;
        opacity: 0.95;
        border: 10px solid transparent;
        -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        -o-transition: transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        -webkit-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .ExpandingLabel:hover > .FullLabel {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        transition-delay: 0.6s;
    }

.obsGridEditFormulaColoured {
    white-space: pre-wrap;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
}

.obsGridSummaryFormulaColoured /* This is purely for backwards compatability. i.e. in line with other item values like textboxes..  Otherwise, the formula item values will be rendered as label with height more than it needs to be*/ {
    white-space: pre-wrap;
    padding-top: 5px;
    padding-bottom: 4px;
}

/* ------------------------------------------------------------------------------------------------------------------*/

/* Placed at the bottom all form related styles to get this style overwritten any other style applied to the same cell */
.zeroPadding,
.formGeneralBlockItemOuterCell,
.formGeneralBlockItemOuterTable,
.formAnchorOrBarOuterCell,
.formExpandingTableHorizontalItemLabelOuterTable {
    padding: 0;
}

.zeroWidthHeight {
    width: 0;
    height: 0;
}

/* Testing some Icon Summary logic (as in the home / welcome page) */
div.WelcomeMessageGroup {
    font-family: Trebuchet MS, Arial;
    font-size: 1.8rem;
    padding: 10px;
    background-color: White;
    border-radius: 0 0 12px 12px;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
    color: #333333;
}

    .Dark div.WelcomeMessageGroup {
        background-color: var(--dark-middle-bg-color);
        color: var(--dark-text-color);
        text-shadow: none;
    }


div.WelcomMessage {
    white-space: pre-wrap;
    margin-top: 10px;
    font-size: 1.4rem;
    line-height: 1;
}

div.IconListGroup,
div.BigCalendar {
    margin: 10px 10px 0 10px;
    border-top: solid 1px white;
    border-bottom: solid 1px #bbb;
    border-radius: 12px 12px 12px 12px;
    border-collapse: separate;
    border-spacing: 0;
    background-color: rgba(255, 255, 255, 0.3);
}

.Dark div.IconListGroup,
.Dark div.BigCalendar {
    background-color: rgb(from var(--dark-grid-main-color) r g b / 0.03);
    border: solid 1px var(--dark-input-border-color);    
}

div.IconListTitle,
div.BigCalendarTitle {
    font-family: "Segoe UI", Segoe, "DejaVu Sans", "Trebuchet MS", Sans-Serif;
    /*font-family: "Museo Sans", "Helvetica Neue", sans-serif;*/
    font-size: 1.7rem;
    font-weight: 600;
    /*text-shadow: 1px 1px 1px #222;   */
    text-shadow: 0 -1px 0 rgb(0, 0, 0);
    color: White;
    padding: 3px 0 5px 10px;
    border-radius: 12px 12px 0 0;
}

.Dark div.IconListTitle,
.Dark div.BigCalendarTitle {
    background-color: var(--dark-main-bg-color);
    color: var(--dark-text-color);
    text-shadow: none;
}


.ClearText {
    font-family: "Segoe UI", Segoe, "DejaVu Sans", "Trebuchet MS", Sans-Serif;
    font-size: 1.7rem;
    font-weight: 600;
    color: black;
}

div.IconListSubTitle,
div.SectionTitle {
    font-family: "Segoe UI", Segoe, "DejaVu Sans", "Trebuchet MS", Sans-Serif;
    font-size: 1.6rem;
    font-weight: 600;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    color: White;
    padding: 3px 0 3px 20px;
}

    .Dark div.IconListSubTitle,
    .Dark div.SectionTitle,
    .Dark .BigCalendarDayOfWeekRow {
        background-color: var(--dark-middle-bg-color);
        color: var(--dark-text-color);
        border-top: 1px solid var(--dark-input-border-color);
    }

    div.SectionTitle {
        margin: 10px -5px 5px -5px;
    }

.BigCalendarDayOfWeek {
    font-family: "Segoe UI", Segoe, "DejaVu Sans", "Trebuchet MS", Sans-Serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: White;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    height: 3rem;
    text-align: center;
    width: 14%;
}

    .Dark .BigCalendarDayOfWeek {
        color: var(--dark-text-color);
        text-shadow: none;
    }

.BigCalendarDayOfWeekHighlight {
    color: #feda4b;
}

.BigCalendarDayNumber {
    float: left;
    padding-left: 5px;
}

.BigCalendarTime {
    text-align: center;
    color: Gray;
}

.BigCalendarDayTitleRow {
    height: 2rem;
}

.BigCalendarDay,
.BigCalendarDayWeekend,
.BigCalendarDayPadding {
    border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    height: 8rem;
    background-color: Transparent;
    background-repeat: repeat;
    vertical-align: top;
}

.Dark .BigCalendarDay,
.Dark .BigCalendarDayWeekend,
.Dark .BigCalendarDayPadding {
    border-right: solid 1px var(--dark-thick-border-color);
    border-bottom: solid 1px var(--dark-thick-border-color);
}

    /* Looks like for drag and drop to work in Chrome we need to set the anchor to display block which in this case ensures that the
   Anchor spreads around the contents of the containing Div which is the thing we want to be able to drag and drop.
*/
    .BigCalendarDay a, .BigCalendarDayWeekend a, .BigCalendarDayPadding a {
        display: block;
    }



.BigCalendarWeekViewDay {
    height: 2.5rem;
}

.BigCalendarDay {
    background-color: rgba(255, 255, 255, 0.8);
}

    .Dark .BigCalendarDay {
        background-color: transparent;
    }

.BigCalendarDayWeekend {
    background-color: rgba(255, 255, 255, 0.5);
}

    .Dark .BigCalendarDayWeekend {
        background-color: var(--dark-form-bg-color);
    }

.BigCalendarDayEntry {
    width: Auto;
    margin: 4px;
    padding: 3px;
    color: White;
    position: Relative;
    height: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0px 0px 2px 0px #555;
    background-image: linear-gradient(45deg, rgba(0,0,0,.25), 20%,transparent);
    border-radius: 3px 3px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .Dark .BigCalendarDayEntry {
        border: 1px solid rgba(255, 255, 255, 0.3);
        filter: brightness(0.75) contrast(1.4);
    }

    .BigCalendarDayEntry:hover,
    .BigCalendarDayEntrySelected {
        opacity: 0.85;
        /* -webkit-box-shadow: none;
        box-shadow: none;*/
        z-index: 10;
        transform: scale(1.2);
        background-image: none;
    }


.BigCalendarDayEntryTime {
    position: Absolute;
}

.BigCalendarDayEntryName {
    position: Absolute;
    height: 1.4rem;
    left: 4.5rem;
    right: 3rem;
    overflow: hidden;
}

.BigCalendarDayEntryIcon {
    position: Absolute;
    right: 0.5rem;
    top: 0;
    width: 2rem;
    height: 2rem;
}

.BigCalendarDayEntryDisabled {
    opacity: 0.5;
    filter: Alpha(opacity=50);
}

.BigCalendarDayEntryError {
    background-color: #ca0018 !important;
}

.BigCalendarDayEntryHighlight {
    background-color: #51184b !important;
}

.BigCalendarDayTitle {
    text-align: left;
    padding-left: 10px;
    border-right: solid 1px #ddd;
    background: white;
}

.Dark .BigCalendarDayTitle {
    border-right: solid 1px var(--dark-middle-bg-color);
    background: var(--dark-middle-bg-color);
    color: var(--dark-text-color);
}

.BigCalendarDayTitleHighlight {
    background: #feda4b;
}

.Dark .BigCalendarDayTitleHighlight {
    background: var(--dark-background-80);
}

div.IconListNoMatches,
div.IconListMessage {
    font-family: Trebuchet MS, Arial;
    font-size: 1.4rem;
    padding: 15px 0 15px 20px;
}

div.IconListMessage {
    display: table-cell;
    vertical-align: middle;
}

    .Dark div.IconListNoMatches,
    .Dark div.IconListMessage {
        color: var(--dark-text-color);
    }

    .formGeneralBlockOuterTable {
        background-color: rgba(255, 255, 255, 0.3);
    }

.formGeneralBlockOuterTableNoBG {
    background-color: transparent !important;
}

.ie8 .formGeneralBlockOuterTable {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE 8 */
}

div.IconListRowAlternate {
    background-color: rgba(255, 255, 255, 0.5);
}

.Dark div.IconListRowAlternate {
    background-color: transparent;
}

div.FullRowButton {
    background-color: rgba(255, 255, 255, 0.5);
    height: 3rem;
    line-height: 35px;
    color: black;
    text-align: center;
    vertical-align: middle;
    font-size: 1.1rem;
    border-bottom: solid 1px white;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .Dark div.FullRowButton {
        background-color: rgba(255, 255, 255, 0.05);        
        color: var(--dark-text-color);        
        border-bottom: solid 1px var(--dark-input-border-color);        
    }

    div.FullRowButton:hover {
        background-color: rgba(255, 255, 255, 0.7);
    }

    .Dark div.FullRowButton:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }


.ie8 div.IconListRowAlternate {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7fffffff', endColorstr='#7fffffff'); /* IE 8 */
}

div.IconListRowGroup {
    font-family: Trebuchet MS, Arial;
    font-size: 1.4rem;
    display: table-cell;
    padding-left: 20px;
    padding-right: 20px;
    width: 10rem;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0.7);
    background-repeat: repeat;
    border-right: solid 1px #ddd;
}

div.IconListRowGroupTitle {
    display: none;
    font-family: Trebuchet MS, Arial;
    font-size: 1.4rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    background-repeat: repeat;
}

.Dark div.IconListRowGroup,
.Dark div.IconListRowGroupTitle {
    background-color: var(--dark-form-bg-color);
    color: var(--dark-text-color);
    border-right: solid 1px var(--dark-input-border-color);
}

.ie8 div.IconListRowGroup {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#B2ffffff', endColorstr='#B2ffffff'); /* IE 8 */
}

div.IconListRowGroup a,
div.IconListRowGroupTitle a {
    color: Black;
}

.Dark div.IconListRowGroup a,
.Dark div.IconListRowGroupTitle a {
    color: var(--dark-text-color);
}



.ChartList {
    margin-top: 8px;
}

.ChartContainer {
    opacity: 1;
    margin-bottom: 8px;
    background-color: #f6fafd;
}

.DashChartImage,
.DashChartFiltered {
    opacity: 0;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.Dash_Show {
    opacity: 1;
}

.DashChart-Sizer {
    /*This is empty as it is to define the container to be looked up as part of the dashboard Masonry call's
        the width of the sizer will be set as part of another class based upon whether it is a
        touch device, small device or normal PC. 
    */
}

.DashChart-Gutter--Sizer {
    /*This is empty as it is to define the container to be looked up as part of the dashboard Masonry call's
        the width of the sizer will be set as part of another class based upon whether it is a
        touch device, small device or normal PC. 
    */
}

/*DashboardChartLayoutCSS*/
.DashChart-Item--Width {
    width: 24.7%;
}

.DashChart-Item--Width2 {
    width: 49.8%;
}

.DashChart-Item--Width3 {
    width: 74.9%;
}

.DashChart-Item--Width4 {
    width: 100%;
}

.DashChart-Gutter {
    width: 0.4%;
}
/*DashboardChart Layout SmallDevice*/
.DashChart-Item-SmallDevice {
    width: 100%;
}

.DashChart-Gutter-SmallDevice {
    width: 0%;
}
/*DashboardChart Layout MediumDevice*/
.DashChart-Item-MediumDevice {
    width: 49.7%;
}

.DashChart-Item--Width2-MediumDevice {
    width: 100%;
}

.DashChart-Gutter-MediumDevice {
    width: 0.6%;
}

.DashChart-Item--Height {
    height: 30rem;
}

.DashChart-Item--Height2 {
    height: 60.8rem;
}

ul.IconList {
    display: table-cell;
    list-style-type: none;
    list-style-image: none;
    margin: 0 0 0 0;
    padding: 3px 0 1px 2px;
}

    ul.IconList li {
        display: inline-block;
        text-align: center;
    }

        ul.IconList li a {
            float: left;
            min-width: 12rem;
            min-height: 9rem;
            margin: 0;
            padding: 7px;
            color: white;
        }

.NoHover {
    pointer-events: none;
}

div.IconContainer,
div.TileContainer,
div.MoreContainer {
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 0 12px;
    /*background-color: transparent;*/
    height: 9rem;
    width: 12rem;
}

div.TileContainer {
    width: 15rem;
    box-shadow: 0px 0px 2px 0px #555;
    border: 1px solid rgba(255, 255, 255, 0.85);   
    background-image: linear-gradient(45deg, rgba(0,0,0,.25), 20%,transparent);
}

.Dark div.TileContainer {
    border: 1px solid rgba(255, 255, 255, 0.3);
    filter: brightness(0.75) contrast(1.4);
}

div.ChartContainerPopup {
    position: relative;
    margin: 2px;
    padding: 1px;
    border-radius: 0;
    background-color: transparent;
    border: none;
}

div.IconContainer:hover {    
    transform: scale(1.35);
    opacity: 0.85;
}

div.TileContainer:hover {
    opacity: 0.85;    
   /* -webkit-box-shadow: none;
    box-shadow: none;*/
    z-index: 10;
    transform: scale(1.35);    
    background-image: none;
}

div.MoreContainer:hover {
    background-color: rgba(255,255,255,0.5);
}

    .Dark div.MoreContainer:hover {
        background-color: rgb(from var(--dark-grid-main-color) r g b / 0.15);
    }


div.ChartContainer:hover .ChartHoverOverlay {
    cursor: pointer;
    opacity: 1;
}

div.ChartContainer:hover .ChartOverlay {
    pointer-events: none;
    opacity: 0;
}

div.IconContainerSmall,
div.TileContainerSmall {
    position: relative;
    height: 6rem;
    width: 6rem;
}

.IconBorder,
img.IconImageAlternative {
    border-radius: 15px;
    box-shadow: 0px 0px 2px 0px #555;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background-image: linear-gradient(45deg, rgba(0,0,0,.25), 20%,transparent);
}

.Dark .IconBorder,
.Dark img.IconImageAlternative {
    border: 1px solid rgba(255, 255, 255, 0.3);
    filter: brightness(0.75) contrast(1.4);
}


img.IconImageInverted {
    background-color: black !important;
    filter: invert(1);
    box-shadow: 0px 0px 3px 0px #fff;
    border: 3px solid black;
}

.Dark img.IconImageInverted {
    filter: brightness(0.75) contrast(1.4) invert(1);
}

div.IconCode,
div.IconTileCode,
div.IconTileName {
    font-family: Arial;
    font-size: 1.1rem;
    position: absolute;
    color: black;
    overflow: hidden;
}

.Dark div.IconCode {
    color: var(--dark-text-color);
}



div.IconCode,
div.IconTileCode {
    top: 7.2rem;
    width: 12rem;
    height: 1.8rem;
    text-align: center;
}

div.IconCodeWithName {
    text-align: left;
    padding-left: 10px;
}

div.IconTileCode {
    width: 14rem;
    color: white;
}

div.IconTileName {
    top: 0.5rem;
    left: 1rem;
    width: 13rem;
    height: 8rem;
    text-align: left;
    color: white;
    font-size: 1.2rem;
    word-wrap: break-word;
}

div.IconTileNameWithIcon {
    left: 3.2rem;
    width: 11rem;
}

div.IconTileNameWithCode {
    height: 5.7rem;
}

img.IconImage,
img.IconImageAlternative {
    position: absolute;
    background-repeat: no-repeat;
    /* Need to enforce the Max width and heigth as users are loading larger icons that are impacting layouts */
    max-width: 60px;
    max-height: 60px;
}

img.IconImage {
    top: 0.7rem;
    left: 3rem;
}

img.IconImageAlternative {
    top: 0;
    left: 0;
}

/* Because the icons we use for document tiles are different they are coloured and smaller, we can't apply the same effects to the standard icon images */
img.DocumentIconTileImage {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: 28px;
    max-height: 28px;    
}

img.IconTileImage {
    position: absolute;
    top: -5px;
    left: -5px;
    max-width: 32px;
    max-height: 32px;
    transition: all 0.2s ease-in-out;
    background-color: black;
    filter: invert(1);
    border-radius: 15px;
    box-shadow: 0px 0px 2px 0px #aaa;
}

div.TileContainer:hover img.IconTileImage {
    position: absolute;
    top: 15px;
    left: -25px;
    max-width: 50px;
    max-height: 50px;
    background-color: black;
    filter: invert(100%);
    border-radius: 13px;    
}


img.IconFunctionImage {
    position: absolute;
    top: 3rem;
    left: 4.7rem;
    max-width: 20px;
    max-height: 20px;
}

.Dark img.IconFunctionImage {
    filter: invert(.8);
}

img.IconOverlay,
img.IconTileOverlay,
img.DocumentTileOverlay,
img.IconImageAlternativeOverlay 
{
    position: absolute;
    max-width: 20px;
    max-height: 20px;
    box-shadow: 0px 0px 2px 0px #444;
    border-radius: 9px;
}

.ChartHoverOverlay,
.ChartOverlay {
    position: absolute;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.ChartHoverOverlay {
    opacity: 0;
}

.ChartOverlay {
    opacity: 1;
}

.ChartCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: auto; /* Half the height */
    margin-left: auto; /* Half the width */
}

.ChartBottomLeft {
    bottom: 0.5rem;
    left: 0.5rem;
}

.ChartBottomRight {
    bottom: 0.8rem;
    right: 0.8rem;
}

img.IconOverlay {
    top: 0px;
    right: 22px;
}

img.IconTileOverlay, img.IconImageAlternativeOverlay {
    top: -7px;
    right: -8px;
}

img.DocumentTileOverlay {
    top: -4px;
    right: -4px;
}

ul.IconList li a span {
    display: block;
    font-family: Arial;
    font-size: 1.1rem;
}

.IconListExpand {
    margin: 0 0 -3px 0;
    padding: 0 3px 0 0;
}

/* Document Viewer Navigation */
.DocumentNavigate {
    width: 3rem;
    height: 2.2rem;
    display: block;
    text-align: center;
    padding-top: 5px;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

    .DocumentNavigate:hover {
        opacity: 1;
        -webkit-filter: none;
        filter: none;
    }

.DiagramWrapper {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid gray;
}

.Dark .DiagramWrapper {
    background-color:  var(--dark-middle-bg-color);
    color: var(--dark-text-color);
    border: 1px solid var(--dark-input-border-color);
}

/* Testing some asynchronous Menu logic */
.AsyncMenu {
    position: absolute;
    display: none;
    min-width: 10rem;
    z-index: 15;
    border-radius: 0.5em;
    -webkit-box-shadow: 0 1px 3px #666;
    box-shadow: 0 1px 3px #666;
}

    /* 
.AsyncMenu:before {
    content: '';
    display: block;
    position: absolute;
    background: white;
    bottom: 0;
    left: 50%;
   width: 2rem;
    height: 2rem;
    transform: translate(-50%, 50%) rotate(45deg);
    z-index: -1;
    box-shadow: 0 1px 3px #666;
}
*/

    .AsyncMenu li {
        cursor: pointer;
    }

        .AsyncMenu li:hover {
            background-color: #f5c360;
        }

.amCaller {
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
}

    .amCaller::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(255, 255, 255, 0.2);
        z-index: 0;
        opacity: 0;
    }

    .Dark .amCaller::before {
        background-color: rgba(255, 255, 255, 0.02);
    }

     .amCaller:hover::before {
        opacity: 1;
    }

.amTitle {
    font-family: "Segoe UI", Segoe, "DejaVu Sans", "Trebuchet MS", Sans-Serif;
    font-size: 1.4rem;
    margin: 0;
    border-bottom: 1px solid #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.amList {
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
    background: white;
    border-radius: 0.5em;
}

.Dark .amList {
    background: var(--dark-form-bg-color);
    color: var(--dark-text-color);
}

    .amList li {
        font-size: 1.2rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

        .amList li:last-child {
            border: none;
        }

        .amList li a {
            text-decoration: none;
            color: #000;
            display: block;
            min-width: 10rem;
            padding: 0.4em 0.8em;
            -webkit-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

            .Dark .amList li a {
                color: var(--dark-text-color);
            }

            .amList li a:hover {
                cursor: pointer;
            }

            .Dark .amList li:hover {
                background-color: rgb(from var(--dark-grid-main-color) r g b / 0.15);
            }

.filterList {
    -webkit-overflow-scrolling: touch;
    border: 1px solid black;
}

    .filterList div {
        padding: 2px 3px 2px 3px;
        -webkit-touch-callout: none;
    }

    .filterList b,
    .multiList b,
    b.textHighlight {
        font-weight: normal;
        color: #1f8dd6;
    }

    .filterList div:hover {
        cursor: pointer;
        background-color: #dddddd;
    }

    .filterList div.selected {
        color: white;
        background-color: Highlight;
    }

    .Dark .filterList div:hover,
    .Dark .filterList div.selected {
        background-color: rgb(from var(--dark-grid-main-color) r g b / 0.15);
        color: var(--dark-text-color) !important;
    }

        .filterList div.selected b {
            color: #feda4b;
        }

/* testing imagemap and image map highlight plugin */
div.imageMapHilight {
    margin: 0 auto;
}

.md-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 60;
    /*background-color: rgba(0,0,0,0.5);*/
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.md-show.md-overlay {
    opacity: 1;
    visibility: visible;
}

.md-content {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 4px solid rgba(255, 255, 255, 0.4);
    border-radius: 9px;
    z-index: 61; /* 1px higher than the overlay layer */
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
}

.Dark .md-content {
    border: 1px solid rgba(255, 255, 255, 0.25);
}


.md-show.md-overlay .md-content {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.md-close {
    position: absolute;
    background: url(../images/close.png) 0 0 no-repeat;
    width: 2.4rem;
    height: 2.7rem;
    display: block;
    text-indent: -9999px;
    top: -10px;
    right: -10px;
    cursor: pointer;
}

.md-messagecontent {
    top: 0;
    left: 0;
}

.md-message {
    display: block;
    background: white;
    font-size: 1.4rem;
    white-space: pre-wrap;
    max-height: 780px;
    max-width: 1200px;
    overflow: auto;
    padding: 20px 30px 20px 30px;
}

.Dark .md-message {
    background: var(--dark-form-bg-color);
    color: var(--dark-text-color);
    border-radius: 9px;
}


.md-limitwidth {
    max-width: 750px;
}

.md-messagebuttons {
    margin-top: -1px;
    text-align: center;
    padding: 10px 20px 20px 20px;
    background: white;
}
.Dark .md-messagebuttons {
    background: var(--dark-form-bg-color);
    border-radius: 9px;
}

.md-leftbuttons {
    display: inline-block;
    text-align: left;
    width: 50%;
}

.md-rightbuttons {
    display: inline-block;
    text-align: right;
    width: 50%;
}

.FullWidth {
    width: 100%;
    border-spacing: 0 0;
}

.singleSmall {
    white-space: nowrap;
}

    .singleSmall .criteriaInput {
        white-space: pre-wrap;
    }

.singleSmallInput {
    padding-top: 5px;
}

/*Loading overlay*/
.busy-loader {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    width: 25rem;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 0 20px;
    border: solid 2px rgba(255, 255, 255, 0.6);
}

.Dark .busy-loader {
    background-color: rgba(0, 0, 0, 0.5);
    border: solid 1px rgba(255, 255, 255, 0.25);
}

.w-ball-wrapper {
    margin: 15px auto;
    position: relative;
    width: 10rem;
    height: 10rem;
    opacity: 1;
}

.w-ball {
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform: rotate(225deg);
    -moz-animation: orbit 1.65s infinite;
    -webkit-transform: rotate(225deg);
    -webkit-animation: orbit 1.65s infinite;
    -ms-transform: rotate(225deg);
    -ms-animation: orbit 1.65s infinite;
    -o-transform: rotate(225deg);
    -o-animation: orbit 1.65s infinite;
    transform: rotate(225deg);
    animation: orbit 1.65s infinite;
}

    .w-ball::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        background: #ffffff;
        left: 0;
        top: -50px;
        border-radius: 50%;
    }

.ball-1 {
    -webkit-animation-delay: 0.36s;
    animation-delay: 0.36s;
}

.ball-2 {
    -webkit-animation-delay: 0.071s;
    animation-delay: 0.071s;
}

.ball-3 {
    -webkit-animation-delay: 0.142s;
    animation-delay: 0.142s;
}

.ball-4 {
    -webkit-animation-delay: 0.217s;
    animation-delay: 0.217s;
}

.ball-5 {
    -webkit-animation-delay: 0.288s;
    animation-delay: 0.288s;
}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin: 0%;
    }

    30% {
        opacity: 1;
        -webkit-transform: rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin: 7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin: 30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin: 39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin: 70%;
    }

    76% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }
}

@keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        origin: 0%;
    }

    30% {
        opacity: 1;
        -webkit-transform: rotate(410deg);
        transform: rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        origin: 7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        origin: 30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        origin: 39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        origin: 70%;
    }

    76% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
        transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
        transform: rotate(900deg);
    }
}

@media only screen and (max-width: 667px) {
    .AppLogo {
        max-width: 90px;
        margin-right: 10px !important;
    }

    .LoginTitle {
        padding-right: 10px !important;
        font-size: 2rem !important;
    }

    .LoginTitleHighlight {
        font-size: 2.4rem !important;
    }

    .pageNavigationBack,
    .BroadcastMessage {
        display: none !important;
    }

    .singleSmallContainer {
        display: block !important;
        width: 100% !important;
    }

    .singleSmall {
        display: block !important;
    }

    .BodyBackground,
    .PopupBackground {
        background-image: none !important;
    }

    .IndexNotShowing,
    .LoggedInApplicationTitle,
    .LoggedInApplicationTitleHighlight,
    .HideSmall {
        display: none;
    }

    .IndexBackground {
        display: none;
    }

    .IconListTitle select {
        width: 95% !important;
        max-width: 95% !important;
        margin: 5px !important;
    }

    .IconListTitle input[type="text"] {
        width: 88% !important;
        max-width: 88% !important;
        margin: 5px !important;
    }

    .IconListTitle span {
        position: relative;
        white-space: normal;
    }

    .LoggedInLabel {
        margin-top: 10px;
    }

    .IconListRowGroup {
        display: none !important;
        width: 6rem !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        word-break: break-all;
    }

    .IconListRowGroupTitle {
        display: block !important;
    }

    .LoginBackground {
        position: static !important;
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .LoginTitleRow {
        display: none;
    }

    .LoginTitle {
        display: block !important;
        border-bottom: none !important;
    }

    .loginButton {
        width: 25% !important;
        font-size: 1.4rem;
    }

    .loginRow {
        display: block !important;
        height: 6rem;
    }

    .loginRowMPI {
        display: block !important;
    }

    .MPILogin {
        width: auto;
    }

    .loginC1 {
        display: none !important;
    }

    .loginC2 {
        display: block !important;
        width: 93% !important;
    }

    .loginC3,
    .loginC2_3 {
        display: block !important;
        width: 93% !important;
        padding-right: 0 !important;
    }

    .loginC4 {
        width: 6%;
    }

    .loginLabel {
        text-align: left !important;
        padding-left: 10px;
        padding-top: 10px;
        font-size: 1.3rem;
    }

    .loginInput {
        margin-left: 10px;
        font-size: 1.3rem;
    }

    .loginForgot {
        font-size: 1.3rem;
    }

    div.loginRequiredfield {
        position: fixed !important;
        top: 0rem !important;
        left: 0 !important;
        margin: 0 !important;
    }
    /*Dashboard Small Device Sizing*/
    .DashChart-Item--Width {
        width: 100%;
    }

    .DashChart-Item--Width2 {
        width: 100%;
    }

    .DashChart-Item--Width3 {
        width: 100%;
    }

    .DashChart-Item--Width4 {
        width: 100%;
    }

    .DashChart-Gutter {
        width: 0%;
    }

    .DashChart-Item--Height2 {
        height: 30rem;
    }
}

@media only screen and (min-width: 66.7rem) {
    .tabMenu__item,
    .tabMenu__subItem {
        width: 20rem;
    }

    .tabItem,
    .tabSubItem {
        min-width: 20rem;
    }

    .IconListFilter {
        float: right;
        width: 50%;
        padding-right: 10px;
        text-align: right;
        white-space: nowrap;
    }
}

@media only screen and (min-width: 66.7rem) and (max-width: 1024px) {
    .HideMedium {
        display: none;
    }

    /*Dashboard Medium View Size*/
    /*Dashboard Small Device Sizing*/
    .DashChart-Item--Width {
        width: 49.7%;
    }

    .DashChart-Item--Width2 {
        width: 100%;
    }

    .DashChart-Item--Width3 {
        width: 100%;
    }

    .DashChart-Item--Width4 {
        width: 100%;
    }

    .DashChart-Gutter {
        width: 0.6%;
    }
}

@media print {
    /*Print button does not need to be rendered as we are already in print mode*/
    input#btnPrint {
        display: none;
    }
}

/*#region Inline Editing Settings Menu Styles */
.settingsMenuDropdown {
    position: relative;
    display: inline-block;
}

.settingsMenuDropdownContent {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    background-color: #fff;
    top: 100%;
    right: 0;
    border-radius: 4px;
    z-index: 1;
    -webkit-box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.4);
    -webkit-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.Dark .settingsMenuDropdownContent {
    background-color: var(--dark-form-bg-color);
}

.settingsMenuDropdownContent a {
    color: black;
    white-space: nowrap;
    padding: 4px 6px;
    text-decoration: none;
    display: block;
}

        .settingsMenuDropdownContent a:hover {
            background-color: #f4c169;
        }

        .Dark .settingsMenuDropdownContent a:hover {
            background-color: rgb(from var(--dark-grid-main-color) r g b / 0.15);
        }

.settingsMenuDropdown:hover > .settingsMenuButton {
    opacity: 1;
}

.settingsMenuDropdown > a:focus + .settingsMenuButton,
.settingsMenuDropdown > a:focus-within + .settingsMenuButton {
    display: block;
}

.settingsMenuDropdown:hover > .settingsMenuDropdownContent {
    display: block;
}

/*#endregion Inline Editing Settings Menu Styles */


/* ##########################
   GALLERY STYLES
   ########################## */

.gallery__container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem;
    padding: 3rem;
    background: lightgray;
    box-sizing: border-box;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: start;
    align-items: flex-end;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 1;
    flex-direction: column;
    overflow: auto;
}

.gallery__close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    color: white;
    z-index: 1;
}

.gallery__radio {
    display: none;
}

.gallery__thumbnail {
    height: 8rem;
    width: 10rem;
    margin: 5px;
    border: 5px solid grey;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .gallery__thumbnail > img {
        max-height: 100%;
        max-width: 100%;
        display: inline-block;
    }

.gallery_previewContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 1rem;
    margin-right: 15.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    overflow: auto;
    pointer-events: none;
}

.gallery__preview {
    display: block;
    margin: auto;
    cursor: zoom-out;
}

.gallery__preview--fit {
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-in;
}

.gallery__radio:checked + .gallery__thumbnail {
    opacity: 0.5;
    box-shadow: 0 0 0 1px red;
}

    .gallery__radio:checked + .gallery__thumbnail + .gallery_previewContainer {
        opacity: 1;
    }

        .gallery__radio:checked + .gallery__thumbnail + .gallery_previewContainer > .gallery__preview {
            opacity: 1;
            pointer-events: all;
        }

@media screen and (orientation: portrait) {
    .gallery_previewContainer {
        margin-bottom: 12rem;
        margin-right: 1rem;
    }

    .gallery__container {
        flex-direction: row;
    }
}