/* HTML ELEMENTS */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

* {
    box-sizing: border-box;
}

.CheckBoxTextSmall {
    font-size: 8pt;
}

body, table, input, select, textarea, legend {
    font-size: 13px;
    color: #31484B;
    font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
}

body {
    margin-block-start: 0px;
    padding: 0px;
}

a, a:visited {
    color: #005dd0;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

blockquote, pre {
    font-family: Courier New, monospace;
}

table {
    border-style: none;
}

ul {
    margin-block-end: 10px;
}

    ul li {
        list-style-type: square;
    }

/*Textbox Styling to Override User Agent styling*/
input[type=text], input[type=password], textarea, select {
    border: 1px solid #ccc;
}

input[type=text], input[type=password] {
    padding-inline-start: 5px;
}

input[type=checkbox], input[type=radio] {
    margin: 0px 3px;
    vertical-align: middle;
}

input[type=image], input[type=submit] {
    cursor: pointer;
}

    input[type=image][disabled] {
        cursor: default;
        opacity: 0.5;
    }

*:focus {
    outline: 0;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
    border-color: #206F4F;
}

/* Disabled Styling */

a[disabled], a[disabled]:hover {
    color: gray;
    text-decoration: none;
}

input[readonly][type=password], input[disabled][type=password], input[readonly][type=text], input[disabled][type=text], textarea[disabled], textarea[readonly], div.textarea[disabled], .DropdownDisabled, select[disabled] {
    color: black;
    box-shadow: none !important;
    background: transparent;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    resize: none;
    min-height: unset;
    padding-inline-start: 0px;
    white-space: inherit;
}

    input[readonly][type=text] ~ input[disabled][type=image], input[readonly][type=text] ~ .date-menu input[disabled][type=image] {
        display: none;
    }

    input[readonly][type=text] ~ .btn {
        display: none;
    }

.form-table .view-disabled select[disabled] {
    background: #fefef7;
    height: 22px;
    width: 250px !important;
    border: 1px solid #ccc;
}

input.HelperText, textarea.HelperText {
    color: #BBBBBB;
}

input.Invalid, textarea.Invalid {
    background-color: #FFE2E1;
    border-color: #FF7777;
    color: #FF7777;
}

.SearchParameterReadOnly:hover {
    background-color: #CCCCCC !important;
    color: midnightblue !important;
}

/* Box Sizing Fix */
textarea {
    background: #fff;
    min-height: 22px !important;
    color: #3B4E50;
}

    textarea[disabled], textarea[readonly] {
        background: none;
    }

    textarea.textarea-thin {
        min-height: 22px;
    }

fieldset {
    position: relative;
    border: 1px solid #d0d0d7;
    background: rgba(0,0,0,0.02);
    padding: 10px;
    margin: 0px;
}

legend {
    font-weight: 600;
}

/* CSS Classes */

.TextBoxAlignRight {
    text-align: end;
}

.TextBoxLabelAlignRight {
    border-color: lavender;
    background-color: lavender;
    border: lavender 0px solid;
    text-align: end;
}

.CheckBoxListContainer {
    border: 1px solid lightgray;
    display: inline-block;
    max-height: 245px;
    overflow-y: scroll;
}

.LabelBold, .SectionBarLabelBold, .FieldValueBold {
    font-weight: bold;
}

.FieldNameBold {
    font-weight: 600;
}

.list-toolbar {
    display: flex;
    justify-content: space-between;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: rgba(0,0,0,0.04);
    padding: 2px;
}

    .list-toolbar > div {
        display: flex;
        column-gap: 4px;
        align-items: center;
    }

tr.list-toolbar:empty {
    display: none;
}

.content-panel-header {
    display: flex;
    justify-content: space-between;
    background-color: rgba(0,0,0,0.04);
    border: 1px solid #ccc;
    padding: 2px 8px;
    align-items: center;
}

    .content-panel-header.modal {
        margin: 0 -10px;
        border: none;
        border-block-end: 1px solid #ccc;
    }

    .content-panel-header input[type=submit] {
        font-size: 12px;
        height: 20px;
        line-height: 20px;
    }

    .content-panel {
        border: 1px solid #ccc;
        border-block-start: none;
        padding: 8px;
    }

        .content-panel.modal {
            margin: 0 -10px -10px;
            border: none;
        }

    .content-panel.modal {
        margin: 0 -10px -10px;
        border: none;
    }

.validation-container {
    margin: 5px 0px;
}

.SectionBar {
    background-color: #005F9E;
    color: white;
    padding: 1px;
    padding-inline-start: 4px;
    padding-inline-end: 2px;
}

.SpacerBar {
    height: 10px;
}

.SpacerBar_Half {
    height: 5px;
}

.SpacerBar_Double {
    height: 20px;
}

.LabelLarge {
    font-size: 11pt;
    font-weight: bold;
}

.LabelSmall {
    font-size: 8pt;
}

.LabelItalic {
    font-style: italic;
}

.LabelBoldItalic {
    font-weight: bold;
    font-style: italic;
}

.StatusRunning {
    color: green !important;
    font-weight: bold !important;
}

.StatusNotRunning {
    color: red !important;
    font-weight: bold !important;
}

.StatusOther {
    color: orange !important;
    font-weight: bold !important;
}

.Validator {
    color: Red !important;
}

.ValidatorLarge {
    font-size: 11pt;
    font-weight: bold;
    color: Red;
}

.ValidatorBold {
    color: red;
    font-weight: bold;
}

.ApplicationBrand {
    font-weight: bold;
    font-size: 12pt;
    color: #B04223;
}

.ApplicationInstance {
    font-size: 8pt;
    color: #B04223;
}

/* used in Header.aspx*/
.HeaderBanner {
    text-align: center;
    background-color: #EAEAEF;
    border: 1px solid #808080;
    border-block-start: 0px hidden;
    padding: 2px;
    border-end-end-radius: 5px;
    border-end-start-radius: 5px;
    -webkit-box-shadow: 0px 1px 10px 0px #aaa;
    box-shadow: 0px 1px 10px 0px #aaa;
    margin-block-start: -1px;
}

.TabBody .select_popup_div_to_open_downwards {
    max-height: 480px;
}

/* used in CheckAllPanel.ascx*/
.HoverMenu {
    background-color: #eee;
    border: 1px solid #ccc;
    display: none;
    position: absolute;
    inset-block-start: 0px;
    inset-inline-start: 20px;
    width: auto;
    overflow: hidden;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.5);
    z-index: 1;
}

    .HoverMenu a {
        display: block;
        line-height: 24px;
        padding: 0px 8px;
        white-space: nowrap;
    }

        .HoverMenu a:hover {
            background: rgba(255,255,255,0.8);
        }

    .HoverMenu.check-all {
        inset-inline-start: 40px;
    }

    .HoverMenu a.selected {
        background: #fff;
        color: #3B4E50;
        font-weight: 600;
    }

        .HoverMenu a.selected:hover {
            text-decoration: none;
        }


.menu-btn {
    position: relative;
    display: inline;
}

    .menu-btn .HoverMenu {
        inset-block-start: 20px;
        inset-inline-start: unset;
        inset-inline-end: 0px;
    }

.set-responsibility {
    position: relative;
}

    .set-responsibility .HoverMenu {
        inset-block-start: unset;
        inset-block-end: 0px;
        inset-inline-start: unset;
        margin-inline-start: 100%;
    }

/* Used to show a quick list of free text values */
.HoverPanel {
    background-color: white;
    border: 1px solid grey;
    border-block-start-width: 0px;
    border-inline-start-width: 0px;
    display: none;
    position: absolute;
    width: auto;
}

.UnitSelectorMenu {
    background-color: white;
    border: 1px solid midnightblue;
    display: none;
    position: absolute;
    width: auto;
    padding: 2px;
}

.InfoMessagePanel {
    background-color: white;
    border: 1px solid midnightblue;
    height: auto;
    display: none;
    position: absolute;
    width: auto;
    padding: 5px;
}

.InfoMessagePanelText {
    padding: 10px;
    padding-inline-start: 4px;
    padding-inline-end: 2px;
}

/*Tables*/

.TableOutline {
    border: 1px solid midnightblue;
    color: midnightblue;
    font-size: 9pt;
    padding: 0px;
}

.TableOutlineWithPadding {
    border: 1px solid #ccc;
    padding: 3px;
}

.TableBackgroundOutline {
    border: 1px solid #ccc;
    background-color: #F3F3F7;
    padding: 0px;
}

.WizardNavButton {
    border: none;
    outline: none;
    background: #009AD9;
    color: #fff;
    line-height: 24px;
    padding: 0px 15px;
}

.WizardSelectedStep {
    font-weight: bold;
    display: block;
    line-height: 20px;
}

.WizardTitle {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.GenericWizardNavBar {
    background: #f3f3f7;
    border: 1px solid #ccc;
    padding: 5px;
    margin: auto;
    margin-block-start: 8px;
    position: relative;
}

.GenericWizardDetailPanel {
    background: #f3f3f7;
    border: 1px solid #ccc;
    border-block-start: none;
    margin: auto;
    margin-block-start: 0px;
    padding: 20px 10px;
}

.GenericWizardDetailPanelSection {
    background: #f3f3f7;
    border: 1px solid #ccc;
    border-block-start: 0px;
    border-block-end: 0px;
    padding: 20px;
    padding-block-start: 8px;
    padding-block-end: 5px;
    margin: auto;
    margin-block-start: 0px;
}

.GenericWizardNotEditableMessage {
    background: white;
    border: 1px solid midnightblue;
    height: auto;
    text-align: center;
}

.GenericWizardTitleBar {
    color: white;
    width: inherit;
    height: 14pt;
}

.GenericWizardContentCentre {
    border: 1px solid midnightblue;
    border-block-start: 0px;
    border-block-end: 0px;
    background: #f3f3f7;
    width: inherit;
    margin: auto;
    margin-block-start: 0px;
    padding: 0px;
}

.GenericWizardContentBottom {
    border: 1px solid midnightblue;
    border-block-start: 0px;
    background: #f3f3f7;
    width: inherit;
    padding: 0px;
    margin: auto;
    margin-block-start: 0px;
}

.HiddenControl, .ZeroWidthButton, .ZeroWidthControl {
    display: none;
}

.PaddedImage {
    margin: 10px;
    margin-block-start: 5px;
    margin-block-end: 0px;
}

.Grid140Column {
    width: 140px;
    min-width: 140px;
}

.TextRightAlign {
    text-align: end;
}

.FloatingPopup {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    width: 400px;
    height: 300px;
    margin-inline-start: -200px;
    margin-block-start: -150px;
    border: 1px solid #000;
    background-color: Lavender;
}

.TextBoxWidth100px {
    width: 100px;
}

.TreeListImage {
    text-align: center;
    vertical-align: middle;
}

.LightGreyPanel {
    border: 1px solid darkgrey;
    padding: 4px;
    text-align: center;
    background-color: #F3F3F7;
    color: midnightblue;
}

.ActionSeriesPanel {
    background-color: rgba(0,0,0,0.02);
    border: 1px solid #d0d0d7;
    padding: 5px 10px;
}

.InstructionsPanel, .WizardInstructionsPanel {
    background-color: Ivory;
    border: 1px solid Silver;
    padding: 10px;
}

    .InstructionsPanel:empty, .WizardInstructionsPanel:empty {
        display: none;
    }

.WizardInstructionsPanel {
    white-space: pre-line;
}

.GeneralMessageBox {
    background-color: #F3F3F7;
    width: 95%;
    height: auto;
    vertical-align: middle;
    text-align: start;
    border: 1px solid #3B4E50;
    padding: 5px 10px;
    margin: 5px auto;
    position: static;
}

.SearchMessageBox {
    display: flex;
    background-color: #CFE1EE;
    width: auto;
    height: auto;
    vertical-align: middle;
    text-align: start;
    white-space: nowrap;
    justify-content: center;
    border: 1px solid #009AD9;
    padding: 4px 12px;
    margin: 0px auto 5px;
}

.ErrorBox {
    background-color: lavender;
    width: 600px;
    height: auto;
    vertical-align: middle;
    text-align: center;
    border: 1px solid midnightblue;
    padding: 2px 5px;
    font-weight: bold;
    position: static;
}

.SummaryPanelWithOutline {
    border: 1px solid #d0d0d7;
    padding: 3px;
}

.AdditionalOptionsPanel {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 15px;
}

.ExpandableMessagePanelWithOutline {
    background-color: white;
    border: 1px solid #ccc;
    padding: 6px;
    width: auto;
    height: auto;
    margin: 5px;
    margin-inline-end: auto;
    position: static;
}

    .ExpandableMessagePanelWithOutline UL {
        margin-block-end: 0px;
    }

.ExpandableErrorPanelWithOutline {
    background-color: #FFE2E1;
    border: 1px solid #ccc;
    padding: 6px;
    width: auto;
    height: auto;
    margin: 5px;
    margin-inline-end: auto;
    position: static;
    color: Red;
}

    .ExpandableErrorPanelWithOutline UL {
        margin-block-end: 0px;
    }

.ExpandableMessagePanelNoOutline {
    background-color: none;
    border: none;
    padding: 0px;
    padding-block-start: 6px;
    padding-inline-start: 6px;
    width: auto;
    height: auto;
    margin: 0;
    position: static;
}

.ValidationMessageList {
    color: Red;
}

.ExceptionH1 {
    font-weight: bold;
    font-size: 14pt;
    margin-block-end: 10px;
}

.ExceptionH2 {
    font-weight: bold;
    font-size: 12pt;
    margin-block-end: 10px;
}

.ExceptionH3 {
    font-weight: normal;
    font-size: 11pt;
    margin-block-end: 10px;
}

.ExceptionIDText {
    font-size: 8pt;
    font-weight: normal;
    text-align: end;
}

.ExceptionTable {
    width: 100%;
}

.ExceptionAttributeCell {
    font-weight: normal;
    width: 200px;
    text-align: start;
}

.ExceptionValueCell {
    font-weight: normal;
    width: auto;
    text-align: start;
}

.ExceptionSectionHeader {
    font-size: 11pt;
    font-weight: normal;
}

.ExceptionSubSectionHeader {
    font-weight: normal;
    font-style: italic;
}

.NoWrap {
    white-space: nowrap;
}

.MaxWidthTable {
    overflow: visible;
    width: 100%;
    margin-inline-end: 0px;
    position: static;
}

.MapTipsStyle {
    background-color: #FFFFE1;
    border: 1px solid #000;
    font-family: Verdana, sans-serif;
}

    .MapTipsStyle .title {
        background-color: #FFFFE1;
    }

    .MapTipsStyle .content {
        font-size: 8pt;
        background-color: #FFFFE1;
    }

.BookmarkGridItem {
    background-color: white;
    border-style: none;
    outline-style: none;
}

.MeasureToolboxLink {
    color: blue;
    text-decoration: underline;
}

.ZeroPadding {
    border: none;
    padding: 0px;
    margin: 0px;
}

.FileUpload {
    visibility: hidden;
}

.LightBlueBackground {
    background-color: #f0f8ff;
}

.ModalDialogTransparentPageDiv {
    position: fixed;
    inset-block-start: 0px;
    inset-inline-start: 0px;
    background-color: Black;
    opacity: 0.3;
    width: 100%;
    height: 100%;
}

.ModalDialogHost {
    position: fixed;
    inset-block-start: 50% !important;
    inset-inline-start: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: White;
    border-radius: 5px;
    -webkit-box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2);
    max-height: 95%;
    max-width: calc(100vw - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    padding-block-start: 0px;
}

[dir=rtl] .ModalDialogHost {
    transform: translate(50%, -50%) !important;
}

.ModalDialogHost .trimble-map {
    position: relative;
}

.ModalMessagePopupContainer {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: visible;
    width: 600px;
}

.ModalDialogHeader {
    font-weight: bold;
    background-color: #e2e2e7;
    color: #3B4E50;
    margin: -10px;
    margin-block-start: 0px;
    margin-block-end: 10px;
    padding: 0px;
    padding-inline-start: 10px;
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
}

.ModalDialogClose, .ModalDialogCloseInTitle {
    position: relative;
    margin-block-start: 7px;
    margin-inline-end: 7px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

    .ModalDialogClose::before, .ModalDialogCloseInTitle::before {
        position: absolute;
        display: inline-block;
        inset-block-start: 0px;
        inset-inline-end: 4px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        content: '\f00d';
        color: #666;
        pointer-events: none;
    }

    .ModalDialogClose:hover::before, .ModalDialogCloseInTitle:hover::before {
        color: #3B4E50;
    }

    .ModalDialogClose input[type=submit], .ModalDialogClose input[type=submit]:hover {
        background: none;
        border: none;
        outline: none;
    }

.modal-size-md {
    width: 600px;
}

.min-width-lg {
    min-width: 800px;
}

.SearchModeLess .SearchAdvanced {
    display: none;
}

.ListItemIndent_0, .ListItemIndent_1, .ListItemIndent_2 {
    display: block;
}

.ListItemIndent_0 {
    margin-block-end: -10px;
}

.ListItemIndent_1 {
    padding-inline-start: 12px;
    margin-block-start: 10px;
}

.ListItemIndent_2 {
    padding-inline-start: 24px;
}

.SmallText {
    font-size: 8pt;
}

.LinkText {
    cursor: pointer;
}

.SmallTextLink {
    font-size: 8pt;
    color: Blue;
    cursor: pointer;
}

    .SmallTextLink:hover {
        text-decoration: underline;
    }

.HeaderLink {
    cursor: pointer;
}

    .HeaderLink:hover {
        text-decoration: underline;
    }

.Searchxxx {
    width: 16px;
    cursor: pointer;
}

.ScrollableGrid {
    border: 2px solid #e4e4e9;
    border-inline-start-width: 1px;
}

.TitleBarPinned {
    position: fixed;
    display: flex;
    inset-block-start: 0;
    inset-inline-start: 0;
    background-color: #E8E8E8;
    color: #3B4E50;
    width: 100%;
    height: 34px;
    line-height: 34px;
    padding-inline-start: 10px;
    padding-inline-end: 0px;
    box-sizing: border-box;
    text-align: start;
    justify-content: space-between;
    z-index: 5;
}

    .TitleBarPinned > div {
        display: flex;
        column-gap: 4px;
    }

        .TitleBarPinned > div + div {
            column-gap: 0px;
        }

.menu-toggle + .TitleBarPinned {
    padding-inline-start: 40px;
}

.PageTitleBar {
    color: #3B4E50;
    background-color: #e2e2e7;
    padding: 0px;
}

    .PageTitleBar input[type=image] {
        vertical-align: text-bottom;
    }

.title-back {
    height: 34px;
    margin-block-end: 15px;
}

    .title-back + .title-back {
        display: none;
    }

.icon-tools input[type=image] {
    height: 16px;
}

.ValueOptionUnitSelector {
    max-height: 300px;
    overflow-y: scroll;
}

.ListPlaceHolder {
    position: relative;
    text-align: center;
    height: 65px;
    padding-block-start: 35px;
    background: #000;
}

    .ListPlaceHolder.Border {
        border: 1px solid #ccc;
    }

.thumbnail-map.trimble-map {
    position: relative;
    background-color: #e2e2e7;
    width: 400px;
    height: 400px;
}

.ShapeValidationHighlightLink {
    color: blue;
}

    .ShapeValidationHighlightLink:hover {
        text-decoration: underline;
        cursor: pointer;
    }

.PartyTypeListSelector {
    max-height: 300px;
    overflow-y: scroll;
}

.AuthenticationTable {
    width: 100%;
    border: 0;
}

/*SSRS ReportViewer*/

.report-viewer {
    background-color: #fff;
}

    .report-viewer > div > div > table {
        width: 100%;
    }

        .report-viewer > div > div > table > tbody > tr:last-child > td:last-child {
            padding: 10px;
        }

        .report-viewer > div > div > table > tbody > tr:nth-child(3) > td > div {
            background-image: none !important;
            background-color: #e8f0f7 !important;
            border-block-end: 1px solid #e2e2e7 !important;
            height: 28px;
        }

            /*toolbar buttons*/
            .report-viewer > div > div > table > tbody > tr:nth-child(3) > td > div > div > div > table > tbody > tr > td > div > div > table > tbody > tr {
                height: 20px;
            }

                /*toolbar buttons*/
                .report-viewer > div > div > table > tbody > tr:nth-child(3) > td > div > div > div > table > tbody > tr > td > div > div > table > tbody > tr > td > input {
                    vertical-align: bottom;
                }

            /*toolbar export button*/
            .report-viewer > div > div > table > tbody > tr:nth-child(3) > td > div > div > div > table > tbody > tr > td > div > table > tbody > tr > td > a > img {
                vertical-align: middle;
            }

            /*toolbar inputs*/
            .report-viewer > div > div > table > tbody > tr:nth-child(3) > td > div > div > div > table > tbody > tr > td > input {
                margin-block-start: 2px;
            }

/*HOLIDAY MODAL*/

.holiday-details {
    min-height: 100px;
}

    .holiday-details input[type=text], .holiday-details select {
        width: 200px !important;
    }

    .holiday-details #ucHolidayDetails_ucholidayDateField_txtDateValue {
        width: 180px !important;
    }

.validation {
    color: red;
    font-size: 13px;
    line-height: 24px;
    max-height: 24px;
}

    .validation::before {
        font-family: 'Font Awesome 5 free';
        font-weight: 600;
        font-size: 14px;
        color: red;
        content: '\f071';
        display: inline-block;
        margin-inline-end: 5px;
        cursor: pointer;
    }

    .validation.hidden {
        width: 18px;
        overflow: hidden;
        display: inline-flex;
    }

.validation-panel {
    position: relative;
    display: inline-block;
}

    .validation-panel:empty {
        display: none;
    }

    .validation-panel .validation-icon::before {
        font-family: 'Font Awesome 5 free';
        font-weight: 600;
        font-size: 14px;
        color: red;
        content: '\f071';
        display: inline-block;
        margin-inline-end: 5px;
        cursor: pointer;
    }

    .validation-panel .validation {
        inset-block-start: -3px;
        inset-inline-start: 30px;
        position: absolute;
        background: #ffebeb;
        color: red;
        z-index: 1;
        padding: 0 4px;
        white-space: nowrap;
    }

    .validation-panel .validation.hidden {
        width: 0;
        padding: 0;
    }

        .validation-panel .validation::before {
            display: none;
        }


/*HOMEPAGE WARNING*/
.warning-alert {
    text-align: center;
    margin-block-end: 10px;
}

    .warning-alert > div {
        border: 1px solid #ffb4b0;
        background: #ffdad8;
        padding: 5px 30px;
        border-radius: 5px;
        display: inline-block;
        margin: 0px auto;
    }

        .warning-alert > div > div {
            display: flex;
            column-gap: 4px;
        }

    .warning-alert span {
        color: red;
    }

    .warning-alert > div:empty {
        display: none;
    }

/*SIDEMENU TOGGLE*/

.menu-toggle {
    position: fixed;
    inset-block-start: 0px;
    inset-inline-start: 0px;
    z-index: 6;
    height: 34px;
    line-height: 34px;
    background: none;
}

    .menu-toggle:hover {
        background: #206F4F;
    }

        .menu-toggle:hover::before {
            color: #fff;
        }

    .menu-toggle::before {
        display: inline-block;
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        font-size: 16px;
        color: #3B4E50;
        padding: 0px 10px;
        cursor: pointer;
        content: '\f053';
    }

    .menu-toggle.closed::before, [dir=rtl] .menu-toggle.closed::before {
        content: '\f0c9';
    }

[dir=rtl] .menu-toggle::before {
    content: '\f054';
}

.date-field {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

    .date-field input[type=text] + input[type=image] {
        width: 16px;
        vertical-align: middle;
    }

    .date-field input[disabled][type=image] + span, .date-field td input[readonly][type=image] + span {
        display: none;
    }

    .date-field .date-menu {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 3px;
    }

    .date-field.multi-calendar .date-menu {
        inset-inline-end: 23px;
    }

.DateTextBox {
    width: 100%;
}

    .DateTextBox + input[type=image] {
        margin-inline-start: -20px;
        width: 16px;
        vertical-align: text-top;
    }

.TextBoxRightAlign {
    text-align: end;
    width: 100%;
}

/*DETAILS TABLE CONTENT*/
.form-table {
    min-width: 450px;
    border-collapse: collapse;
    border-spacing: 0px;
    border: none;
    table-layout: fixed;
    width: 100%;
}

    .form-table > tbody > tr {
        display: flex;
    }

        .form-table > tbody > tr > td {
            padding-block-end: 5px;
            vertical-align: top;
            flex-grow: 1;
        }

            .form-table > tbody > tr > td:empty {
                display: none;
            }

            .form-table > tbody > tr > td:first-child {
                width: 200px;
                min-width: 200px;
                flex-grow: 0;
            }

            .form-table > tbody > tr > td[colspan="2"]:first-child, .form-table > tbody > tr > td[colspan="3"]:first-child {
                flex-grow: 1;
            }

            .form-table > tbody > tr > td.label-spacer {
                flex-grow: 1;
                margin-inline-start: 200px;
            }

    .form-table td > span {
        line-height: 16px;
        margin-inline-end: 10px;
        color: #888;
        white-space:pre-wrap;
    }

    .form-table td span.Validator {
        vertical-align: top;
        white-space: normal;
    }

    .form-table td + td > span, .form-table td .search-params + span {
        color: #3B4E50;
        font-weight: normal;
        margin-inline-end: 0px;
    }

    .form-table td input[type=text], .form-table input[type=password], .form-table td .search-params, .form-table td select {
        width: 250px;
    }

        .form-table td input[type=text].wide, .form-table input[type=password].wide, .form-table td .search-params.wide, .form-table td select.wide {
            width: 100%;
        }

    .form-table .date-field input[type=text] + input[type=image] {
        margin-inline-start: -22px;
        vertical-align: text-top;
    }

    .form-table .search-params input[type=text][readonly] {
        border: none;
        background: none;
    }

    .form-table .form-header, .form-header {
        display: block;
        font-weight: 600;
        color: #3B4E50;
        margin-block-start: 10px;
        margin-block-end: 4px;
    }

.admin .form-header {
    margin-block-start: 20px;
}

.form-table input[type=text][readonly], .form-table input[type=text][disabled], .form-table td textarea, .form-table td textarea.wide, .form-table textarea[readonly],
.form-table textarea[disabled], .form-table textarea[readonly].auto, .form-table textarea[disabled].auto, .form-table select[disabled], .form-table .DropdownDisabled {
    width: 100% !important;
    text-align: start;
}

    .form-table input[type=text][readonly].auto, .form-table input[type=text][disabled].auto, .form-table select[disabled].auto, .form-table .DropdownDisabled.auto {
        width: 250px !important;
        text-align: start;
    }

.form-table td.duration input[type=text], .form-table td.duration input[type=text][readonly], body[editmode] .form-table td.duration input[type=text][readonly] {
    width: 45px !important;
    margin-inline-end: 2px;
}

.form-table td.duration select, .form-table td.duration select.DropdownDisabled {
    width: 200px !important;
}

.form-table tr.btn-row td {
    padding-block-start: 10px;
}

.form-table tr.spacer td {
    padding-block-start: 10px;
}

.form-table .field-value {
    margin-inline-start: 200px;
    margin-block-end: 10px;
}

.form-table .duration input[type=text][disabled], .form-table .duration input[type=text][readonly] {
    width: 25px !important;
}

.form-table .duration select[disabled], .form-table .duration select[readonly] {
    width: unset !important;
}

.form-table.date-details tr:last-child td {
    padding-bottom: 0px;
}

body[editmode] .form-table input[type=text][readonly], body[editmode] .form-table input[type=password][readonly], body[editmode] .form-table input[type=text][disabled], body[editmode] .form-table textarea[readonly],
body[editmode] .form-table textarea[disabled], body[editmode] .form-table select[disabled], body[editmode] .form-table .DropdownDisabled, .ModalDialogHost .form-table input[type=text][readonly],
.GenericWizardDetailPanel .form-table .search-params input[type=text][readonly], .GenericWizardDetailPanel .form-table input[type=text][readonly], .GenericWizardDetailPanel .form-table input[type=text][disabled],
.GenericWizardDetailPanel .form-table textarea[readonly], .GenericWizardDetailPanel .form-table textarea[disabled], .GenericWizardDetailPanel .form-table .DropdownDisabled, .GenericWizardDetailPanel .form-table select[disabled], .GenericWizardDetailPanel .form-table input[type=password][readonly] {
    width: 250px !important;
    padding-inline-start: 4px;
    border: 1px solid #ddd;
    color: #333;
}

body:not([editmode]) .form-table input[type=text][readonly] {
    border: none;
}

body:not([editmode]) .form-table input:placeholder-shown[type=text][readonly] + div + .calendar-toggle {
    display: none !important;
}

.GenericWizardDetailPanel .form-table textarea[readonly], .GenericWizardDetailPanel .form-table textarea[disabled] {
    width: 100% !important;
}

body[editmode] .form-table input.half[type=text] {
    width: 123px !important;
    margin-inline-end: 1px;
}

body[editmode] .form-table select.half {
    width: 123px !important;
    height: 22px;
}

.admin-brief {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    border: none;
    table-layout: fixed;
}

    .admin-brief td {
        vertical-align: top;
    }

    .admin-brief select {
        width: 200px;
    }

        .admin-brief select.DropdownDisabled {
            border: 1px solid rgba(0,0,0,0.1);
            padding: 1px 4px;
        }

.form-table.wide > tbody > tr > td:first-child {
    width: 250px;
}

.form-table.wide .form-table > tbody > tr > td:first-child {
    width: 250px;
}

.form-table.wide > tbody > tr > td.label-spacer {
    flex-grow: 1;
    margin-inline-start: 250px;
}

.form-table.narrow > tbody > tr > td:first-child {
    width: 150px;
    min-width: 150px;
}

.form-table.narrow > tbody > tr > td.label-spacer {
    flex-grow: 1;
    margin-inline-start: 150px;
}

.form-table > tbody > tr > td.wide input[type=password] {
    width: 100%;
}

.flex-content .form-table > tbody > tr > td:last-child {
    display: flex;
    column-gap: 4px;
}

    .flex-content .form-table > tbody > tr > td:last-child input[type=text] {
        flex-grow: 1;
    }

.form-table.interval > tbody > tr > td:last-child input[type=text][readonly] {
    width: 30px !important;
    flex-grow: 0;
}

.role-select {
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    align-items: center;
}

.role-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.admin-tools {
    display: flex;
    padding: 20px;
}

    .admin-tools > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

        .admin-tools > div.plugins {
            display: block;
            flex: 2;
            flex-direction: column;
        }

            .admin-tools > div.plugins > div {
                flex: 1;
                flex-direction: column;
                align-self: flex-start;
            }

            .admin-tools > div.plugins fieldset {
                padding: 0 20px 20px;
                background: rgba(0,0,0,0.02);
                border: 1px solid #ddd;
            }

            .admin-tools a + .text-bold, .admin-tools > div.plugins table .text-bold {
                display: block;
                margin-block-start: 16px;
                margin-block-end: 4px;
            }

            .admin-tools > div.plugins table td {
                width: 50%;
            }

                .admin-tools > div.plugins table td div {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                }

/*ACTION SPECIFIC CSS*/
.validation-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 10px 400px;
    grid-template-columns: 1fr 400px;
    grid-template-rows: auto;
    grid-column-gap: 10px;
}

    .validation-grid .val-header {
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        font-weight: 600;
        grid-column-start: 1;
        grid-column-end: 3;
        margin-block-end: 15px;
    }

        .validation-grid .val-header * {
            vertical-align: middle;
        }

    .validation-grid .val-details {
        -ms-grid-column: 1;
        grid-column: 1;
    }

    .validation-grid .val-map {
        -ms-grid-column: 3;
        grid-column: 2;
    }

.val-map .map-legend {
    margin-block-start: 3px;
}

    .val-map .map-legend img {
        vertical-align: middle;
        width: 25px;
    }

    .val-map .map-legend span {
        vertical-align: top;
    }

.action-details {
    margin-block-end: 10px;
    display: flex;
    column-gap: 4px;
}

    .action-details + .action-details {
        margin-block-start: -10px;
    }

.payment .form-table td {
    vertical-align: middle;
    float: left;
    flex-grow: 0;
}

[dir=rtl] .payment .form-table td {
    float: right;
}

.payment .form-table > tbody > tr > td:first-child {
    width: 160px;
}

.payment .form-table input[type=text], .payment .form-table select, .payment .form-table .fake-input {
    width: 100px;
}

    .payment .form-table input[type=text].small, .payment .form-table input[type=text][readonly].small {
        width: 50px !important;
    }

    .payment .form-table select.wide {
        width: 200px;
    }

.fake-input {
    display: inline-block;
    line-height: 20px !important;
    width: 100%;
}

.payment .fake-input {
    text-align: start;
}

body[editmode] .payment .fake-input {
    border: 1px solid #ccc;
    text-align: end;
    padding-right: 3px;
}

.payment .float-link {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
}

.payment .form-table input[type=text][readonly], .payment .form-table input[type=text][disabled], .payment .form-table select[disabled],
.payment .form-table select[readonly] {
    width: 100px !important;
    min-width: unset !important;
    text-align: start !important;
}

.flex-columns {
    display: flex;
    column-gap: 10px;
}

.label-margin {
    margin-inline-start: 200px;
}

.wide .label-margin {
    margin-inline-start: 250px;
}

#pnlErrorBox {
    pointer-events: none;
}

#imgWaitAnimation {
    animation-name: loading-ani;
    animation-duration: 2s;
    animation-delay: 0;
    animation-iteration-count: infinite;
    transform-origin: center;
}

@keyframes loading-ani {
    0% { transform: scaleX(1);}
    50% {
        transform: scaleX(-1);
        filter: grayscale(100%);
    }
    100% { transform: scaleX(1);}
}

/*UTILITY CLASSES - ADD CSS ABOVE HERE */

.FloatLeft {
    float: left;
}

[dir=rtl] .FloatLeft {
    float: right;
}

.FloatRight {
    float: right;
}

[dir=rtl] .FloatRight {
    float: left;
}

.ClearFloat {
    clear: both;
}

div.Centered {
    margin: 0 auto;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: end !important;
}

.text-italic {
    font-style: italic;
}

.text-small {
    font-size: 11px;
}

.text-tiny {
    font-size: 10px;
}

.text-bold {
    font-weight: 700;
}

.text-info {
    color: #999;
}

.text-link {
    color: #005dd0 !important;
}

.p-relative {
    position: relative;
}

.inline-block {
    display: inline-block !important;
}

.inline {
    display: inline !important;
}

.block {
    display: block !important;
}

.flex {
    display: flex;
}

.flex-row {
    display: flex;
    align-items: center;
    column-gap: 4px;
}

.flex-column {
    flex-direction: column;
}

.flex-doc-row {
    display: flex;
    align-items: center;
    column-gap: 4px;
    margin-block-end: 8px;
}

.flex-wrap {
    flex-wrap: wrap;
}

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

.v-align-middle {
    vertical-align: middle;
}

.v-align-top {
    vertical-align: top;
}

.Indent20 {
    margin-inline-start: 20px;
}

.margin-0, .m-0 {
    margin: 0px;
}

.m-t-auto, .mt-auto {
    margin-block-start: auto;
}

.m-t-0, .mt-0 {
    margin-block-start: 0px !important;
}

.m-t-10, .mt-10 {
    margin-block-start: 10px;
}

.m-t-20, .mt-20 {
    margin-block-start: 20px;
}

.m-b-10, .mb-10 {
    margin-block-end: 10px;
}

.m-b-20, .mb-20 {
    margin-block-end: 20px;
}

.MarginRight5 {
    margin-inline-end: 5px !important;
}

.MinWidth100 {
    min-width: 100px;
}

.MinWidth120 {
    min-width: 120px;
}

.w-auto {
    width: auto;
}

.w-100 {
    width: 100%;
}

.p-b-10, .pb-10 {
    padding-block-end: 10px;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

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