:root {
    --background: #fafbfe;
    --color: #6c757d;
    --topbar-background-color: #fafbfe;
    --topbar-color: #6c757d;
    --toolbar-title-color: #004772;
    --card-background-color: #fafbfe;
    --card-border-color: #fafbfe;
    --add-new-button-background-color: #007bff;
    --add-new-button-color: #fff;
    --ok-button-background-color: #28a745;
    --ok-button-color: #fff;
    --delete-button-background-color: #dc3545;
    --delete-button-color: #fff;
    --edit-button-background-color: #17a2b8;
    --edit-button-color: #fff;
    --print-button-background-color: #17a2b8;
    --print-button-color: #fff;
    --actions-button-background-color: #ffc107;
    --actions-button-color: #fff;
    --close-button-background-color: #6c757d;
    --close-button-color: #fff;
    --undo-button-background-color: #17a2b8;
    --undo-button-color: #fff;
    --help-button-background-color: #17a2b8;
    --help-button-color: #fff;
    --control-caption-font-family: Nunito,sans-serif;
    --control-caption-font-weight: 400;
    --control-caption-line-height: 1.5;
    --control-caption-color: #6c757d;
    --control-caption-bg: #fafbfe;
    --control-caption-text-align: left;
    --control-input-font-family: Nunito,sans-serif;
    --control-input-font-weight: 400;
    --control-input-border-width: 1px;
    --control-input-line-height: 1.5;
    --control-input-color: #6c757d;
    --control-input-background-color: #fafbfe;
    --control-input-readonly-background-color: #e6e5df;
    --control-input-text-align: left;
    --tab-header-border-color: #ced4da;
    --tab-header-active-background-color: white;
    --search-bg: white;
    --table-border-color: transparent;
    --table-border-width: 0px;
    --table-header-background-color: #eef2f7;
    --table-header-border-color: transparent;
    --table-header-border-width: 1px;
    --table-header-color: #6c757d;
    --table-header-font-size: 12px;
    --table-header-height: 40px;
    --table-selected-row-bg: lightgrey;
    --table-data-background-color: transparent;
    --table-data-stripe-background-color: transparent;
    --table-data-border-color: #eef2f7;
    --table-data-border-width: 1px;
    --table-data-color: #6c757d;
    --table-data-stripe-color: transparent;
    --table-data-font-size: 12px;
    --table-data-height: 35px;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

    html.wait, html.wait * {
        cursor: wait !important;
    }

    html.helping, html.helping * {
        cursor: help !important;
    }

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: var(--ct-body-font-family);
    font-size: var(--ct-body-font-size);
    font-weight: var(--ct-body-font-weight);
    line-height: var(--ct-body-line-height);
    color: var(--ct-body-color);
    text-align: var(--ct-body-text-align);
    background: var(--background);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.hide {
    display: none;
}
.FavouriteMenuIcon {
    position: absolute;
    height: 12px;
    width: 12px;
    right: 0px;
    margin: 0px;
    margin-right: 3px;
}
.MenuItemSpan {
    width: 170px;
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap
}
.MenuItemInSectionSpan {
    width: 170px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
#app-menu {
    position: fixed;
    width: 260px;
    z-index: 2000;
    background: var(--ct-bg-leftbar);
    bottom: 0;
    top: 0;
    -webkit-box-shadow: var(--ct-box-shadow);
    box-shadow: var(--ct-box-shadow);
}
    #app-menu .side-nav {
        padding-left:4px;
    }
body[app-menu-mode=condensed] #app-menu {
    width: 70px;
}
body[app-menu-mode=none] #app-menu {
   display:none;
}
body[app-menu-mode=none] .content-page {
    margin-left: 0px !important;
}

body[app-menu-mode=none] .navbar-custom {
    left: 0px !important;
}
body[app-menu-mode=icononly] #app-menu {
    height: 70px;
    width: 70px;
}
body[app-menu-mode=icononly] .logo {
    display:none;
}
body[app-menu-mode=icononly] .content-page {
    margin-left: 0px;
}


    body[app-menu-mode=condensed] #app-menu .collapse {
        display: none;
    }
    body[app-menu-mode=condensed] #app-menu .side-nav-item span {
        display: none;
    }
    body[app-menu-mode=condensed] #app-menu .logo {
        display: none;
    }
body[app-menu-mode=pinned] .content-page {
    margin-left: 260px;
}
body[app-menu-mode=pinned] .navbar-custom {
    left: 260px;
}
   
#app-menu-container{
    padding-top:70px;
}
.logo {
    display: block;
    line-height: 70px;
    width: 200px;
    position: fixed;
    top: 0;
    left: 60px;
}
    .logo span.logo-lg {
        display: block;
    }

    .logo span.logo-sm {
        display: none;
    }

    .logo.logo-light {
        display: block;
    }

    .logo.logo-dark {
        display: none;
    }

.DashboardTopbarDropdown {
    max-height: 40vh;
}

@media screen and (max-width: 990px) {
    .DashboardTopbarDropdown {
        max-height: 50vh;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    body #app-menu {
        height: 70px;
        width: 70px;
    }
    body .logo {
        display: none !important;
    }
    body .content-page {
        margin-left: 0px !important;
    }
    body .navbar-custom {
        left: 70px !important;
    }
    body[app-menu-mode=open] #app-menu {
        height: 100%;
        width: 100%;
    }
        body[app-menu-mode=open] #app-menu .logo {
            display:block !important;
        }
    #UserMenus {
        display: none !important;
    }
    #UserMenusSidebar {
        display: block !important;
    }
    .KPI {
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        position: unset !important;
    }
    .Window{
        display: contents !important;
        overflow: scroll !important;
        position: relative !important;

    }
}

#UserMenusSidebar {
    display: none;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.AcceptsReturn {
}

.FTBToolbar {
    flex: 0 0 100%;
    padding: 5px;
}

.DataGridFormatedTextCol {
    white-space: pre !important;
}

.pre {
    white-space: pre !important;
}

hr {
    margin: 10px;
}



.e-toolbar-wrapper {
    height: 42px !important;
}

.e-gridpager {
    display: none;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.modalWindow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.ReportList {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.ReportList-content {
    background-color: var(--table-header-background-color);
    padding: 5px;
    border: 1px solid #888;
}

.EmailReport {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.EmailReport-content {
    background-color: var(--table-header-background-color);
    padding: 5px;
    border: 1px solid #888;
    border-radius: 8px;
}

.PositionAbsolute {
    position: absolute !important;
}

.modalWindow-content {
    background: var(--card-background-color);
    padding: 5px;
    border: 1px solid #888;
}

#help {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.help-content {
    background-color: #fefefe;
    margin: auto;
    margin-top: 70px;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    overflow: hidden;
}

.HelpParent {
    font-size: 13px;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.HelpTitle {
    font-weight: bold;
    font-size: 25px;
}

.HelpSectionTitle {
    font-weight: bold;
}

.HelpTitleContainer {
    margin-top: 10px;
}

.HelpImagesContainer {
}

.HelpMainImage {
    max-height: 500px;
}

.HelpDescription {
}

.HelpDescriptionContainer {
    margin-top: 10px;
    font-size: 13px;
    color: black;
}

.HelpLink {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.HelpFieldsTableRow {
    font-size: 11px;
}

    .HelpFieldsTableRow:hover {
        background-color: lightgray;
    }

.HelpFieldName {
    font-size: 11px;
    font-weight: bold;
}

.HelpFieldDescription {
    font-size: 11px;
}

h2 {
    margin: 0;
    padding: 0;
}

.ReadOnly {
    background:var(--control-input-readonly-background-color) !important;
}

.DataOriginsControl {
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    display: flex;
    box-sizing: border-box;
    margin-top: var(--control-margin-top);
    position:relative;
}

.DataOriginsControlCaption {
    border-style: none;
    display: inline-block;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: middle;
    align-self: center;
    text-overflow: ellipsis;
    color: var(--control-caption-color);
    font-family: var(--control-caption-font-family);
    font-size: var(--control-caption-font-size);
    font-weight: var(--control-caption-font-weight);
    line-height: var(--control-caption-line-height);
    text-align: var(--control-caption-text-align);
    padding-top: var(--control-caption-padding);
    padding-left: var(--control-caption-padding);
    padding-bottom: var(--control-caption-padding);
    padding-right: var(--control-caption-padding-right);
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    width: var(--control-caption-width);
}

.ResizeIcon {
    position: absolute;
    bottom: 0px;
    right: -5px;
    height: 12px;
    width: 10px;
    cursor: nwse-resize;
}

.Bold {
    font-weight: bold;
}

.AutoHideButtons {
    display: none !important;
}

.ShowButtons {
    display: flex !important;
}

.DataOriginsDropDown {
}

.DataOriginsTextBox {
}

.DataOriginsSelectableValue {
}

.DataOriginsNumericBox {
}

.DataOriginsCheckBox {
}

.DataOriginsInputControlContainer {
    display: flex;
    box-sizing: border-box;
    vertical-align: middle;
    background: var(--control-input-background-color);
}

.ForFormattedTextBox {
    display: block;
    height : 250px;
}

.SelectableValues {
    background: var(--card-background-color);
    border-style: solid;
    padding: 5px;
    height: 300px;
    overflow-y: scroll;
}

.SelectableValue {
    cursor: default;
    color: var(--table-data-color);
}

    .SelectableValue:hover {
        background: var(--table-selected-row-bg);
        color: var(--table-data-color);
    }

.FormDesigner {
    display: inline-block;
}

.ActiveControl {
}

.CurrentControl {
    outline: 1px dashed #4286f4;
    cursor: move;
}
.VisualDesignerSelected {
    outline: 1px dashed #4286f4;
    cursor: move;
}
.DataOriginsCodeView {
    top: 150px;
    left: 150px;
    position: absolute;
    background-color: white;
    border-style: solid;
}

#CodeViewTextArea {
    font-size: 13px;
}

#CodeViewTools {
    display: inline-block;
    height: calc(100% - 20px);
}

.FormDesignerDocumentOutline ul {
    padding-left: 0px;
}

    .FormDesignerDocumentOutline ul ul {
        padding-left: 5px;
    }

.FormDesignerDocumentOutline li {
    padding-left: 0px;
}




.DataOriginsInputContainer {
    display: flex;
    width: 100%;
}

.DataOriginsControlButtonContainer {
    display: flex;
}

.DataOriginsInputControl {
    border-style: none;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: text-bottom;
    outline-style: none;
    width: 100%;
    color: var(--control-input-color);
    font-family: var(--control-input-font-family);
    font-size: var(--control-input-font-size);
    font-weight: var(--control-input-font-weight);
    line-height: var(--control-input-line-height);
    text-align: var(--control-input-text-align);
    background-color: transparent;
    padding-top: var(--control-input-padding);
    padding-left: var(--control-input-padding);
    padding-bottom: var(--control-input-padding);
    padding-right: var(--control-input-padding);
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
}

.DataOriginsInputControlSpan {
    display: block;
    overflow: hidden;
}

.DataOriginsControlSettingsPanel {
    display: none;
}

.SettingsPanelMinus {
    width: 30px;
}

.SettingsPanelButton {
    width: 100%;
}

.SettingsPanelPlus {
    width: 30px;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.DataOriginsSettingsPanels {
}

.DataOriginsControlButton {
    Border: none;
    background: none;
    display: flex;
}

.DataOriginsImageButton {
    Border: none;
    background: none;
    display: flex;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 2px;
    margin-top: 0px;
    width: 100%;
    justify-content: center;
    color: var(--control-input-color);
    font-family: var(--control-input-font-family);
    font-size: var(--control-input-font-size);
    font-weight: var(--control-input-font-weight);
    line-height: var(--control-input-line-height);
    text-align: var(--control-input-text-align);
}

    .DataOriginsImageButton:hover {
        color: #fff !important;
        background-color: #0d6efd !important;
        border-radius: .25rem;
    }

.DataOriginsControlError {
    outline: none;
    height: 14px;
    vertical-align: top;
    display: none;
    position: relative;
}

.DataOriginsControlWarning {
    outline: none;
    height: 14px;
    vertical-align: top;
    display: none;
    position: relative;
}

.DataOriginsControlRequired {
    outline: none;
    height: 14px;
    vertical-align: top;
    display: none;
}

.DatePickerPopup {
    background-color: white;
    color: black;
    padding: 0px;
    cursor: pointer;
    width: 262px;
    overflow: hidden;
    position: absolute;
    display: None;
    z-index: 5000;
   
}

.CalculatorPopup {
    background-color: white;
    color: black;
    padding: 0px;
    cursor: pointer;
    width: 230px;
    overflow: hidden;
    position: absolute;
    display: None;
    z-index: 5000;
}

.ColumnHeaderMenuPopUp {
    background: var(--card-background-color);
    color: var(--table-header-menu-text-color);
    padding: 5px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    display: None;
    z-index: 10;
    top: 40px;
    width: 120px;
}
.ColumnFilterPopUp {
    background: var(--card-background-color);
    color: var(--table-header-menu-text-color);
    padding: 5px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    display: None;
    z-index: 10;
    top: 40px;
    width: 320px;
    border-width: 1px;
    border-style: solid;
}
.ExcelFilterAvailableValuesList {
    height: 300px;
    overflow: auto;
    padding-inline-start: 5px;
    }

    .ExcelFilterAvailableValuesList li {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 15px;
        font-family: 'Segoe UI';
        white-space: nowrap;
    }

        .ExcelFilterAvailableValuesList li:hover {
            background-color: Highlight;
        }
.ControlProperties {
    display: none;
}

.DataOriginsFormDesigner {
    background-color: white;
    color: black;
    padding: 0px;
    cursor: pointer;
    width: 600px;
    overflow: hidden;
    position: absolute;
    display: None;
    z-index: 10;
    height: 450px;
    border-style: solid;
    top: 100px;
    left: 100px;
}

.DataOriginsMessageBox {
    border: 4px solid var(--table-selected-row-bg);
    border-radius: 0px;
    background-color: var(--messagebox-bg-color);
    color: var(--messagebox-text-color);
    width: 600px;
    max-width: 75%;
    max-height: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    overflow: auto;
    position: fixed;
}

.DataOriginsMessageBoxDisableBackGround {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128,128,128,0.5);
    display: None;
    z-index: 10000;
}

.DataOriginsMessageBoxTitleBox {
    height: auto;
    width: 100%;
    background-color: var(--messagebox-border-color);
}

.DataOriginsMessageBoxText {
    font-size: 15px;
    padding-left: 5px;
}

.DataOriginsMessageBoxButton2 {
    width: 100px;
    display: none;
    background: var(--messagebox-btn-color);
    color: var(--messagebox-btn-text-color);
}

.DataOriginsMessageBoxButton3 {
    width: 100px;
    display: none;
    background: var(--messagebox-btn-color);
    color: var(--messagebox-btn-text-color);
}

.DataOriginsMessageBoxButton1 {
    width: 100px;
    background: var(--messagebox-btn-color);
    color: var(--messagebox-btn-text-color);
}

.DataOriginsInputBox {
    border: 4px solid var(--messagebox-border-color);
    border-radius: 0px;
    background-color: var(--messagebox-bg-color);
    color: var(--messagebox-text-color);
    width: 600px;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    overflow: auto;
    position: fixed;
}

.DataOriginsInputBoxDisableBackGround {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128,128,128,0.5);
    display: None;
    z-index: 10000;
}

.DataOriginsInputBoxTitleBox {
    height: 25px;
    width: 100%;
    background-color: var(--messagebox-border-color);
}

.DataOriginsInputBoxText {
    font-size: 15px;
    padding-left: 5px;
}

.DataOriginsInputBoxInput {
    background: var(--control-input-background-color);
    color: var(--messagebox-btn-text-color);
}

.DataOriginsInputBoxCancelButton {
    width: 100px;
    background: var(--messagebox-btn-color);
    color: var(--messagebox-btn-text-color);
}

.DataOriginsInputBoxOKButton {
    width: 100px;
    background: var(--messagebox-btn-color);
    color: var(--messagebox-text-color);
}

.DataOriginsPopupDateBox {
    border: 4px solid var(--messagebox-border-color);
    border-radius: 0px;
    background-color: var(--messagebox-bg-color);
    color: var(--messagebox-text-color);
    width: 600px;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    overflow: auto;
    position: fixed;
}

.DataOriginsDateBoxDisableBackGround {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128,128,128,0.5);
    display: None;
    z-index: 10000;
}

.DataOriginsDateBoxTitleBox {
    height: 25px;
    width: 100%;
    background-color: var(--messagebox-border-color);
}

.DataOriginsDateBoxText {
    font-size: 15px;
    padding-left: 5px;
}

.DataOriginsDateBoxCancelButton {
    width: 100px;
    background: var(--messagebox-btn-color);
    color: var(--messagebox-btn-text-color);
}

.DataOriginsDateBoxOKButton {
    width: 100px;
    background: var(--messagebox-btn-color);
    color: var(--messagebox-text-color);
}

.PopUp {
    display: None;
}

#rightClickmenu {
    position: absolute;
    background: var(--topbar-background-color);
    max-height: 300px;
    overflow: auto;
}

.rightClickmenuToolbarButton {
    display: block !important;
}

    .rightClickmenuToolbarButton:hover {
        background: var(--table-selected-row-bg);
        color: var(--table-data-color);
    }

#DataOriginsDropDownList {
    border: 1px solid #ced4da;
    border-radius: 0px;
    background: var(--card-background-color);
    color: black;
    padding: 0px;
    cursor: pointer;
    height: 200px;
    overflow: hidden;
    position: absolute;
    display: None;
    z-index: 10000;
}

.DataOriginsDropDownList {
    border: 1px solid #ced4da;
    border-radius: 0px;
    background: var(--card-background-color);
    color: black;
    padding: 0px;
    cursor: pointer;
    height: 200px;
    overflow: hidden;
    position: absolute;
    display: None;
}

.DataOriginsCalculator {
    border: 1px solid #ced4da;
    border-radius: 0px;
    background-color: white;
    color: black;
    padding: 4px;
    cursor: pointer;
    overflow: hidden;
    font-size: 15px;
    width: 217px;
}

.DataOriginsCalculatorBox {
    border-width: 1px;
    border-color: none;
    background-color: lightgray;
    margin: 1px;
    box-sizing: border-box;
    width: 34px;
    height: 30px;
    display: block;
    float: left;
    text-align: center;
    padding: 2px;
}

    .DataOriginsCalculatorBox:hover {
        background-color: grey;
    }

.DataOriginsDatePicker {
    border: 1px solid #ced4da;
    border-radius: 0px;
    background-color: white;
    color: black;
    padding: 4px;
    cursor: pointer;
    overflow: hidden;
    font-size: 15px;
    width: 252px;
    z-index: 1000;
}

.DataOriginsTimePicker{
    width:100%;
    text-align:center;
}

.DataOriginsWeekNoBox {
    width: 100%;
}

#DatePickerMonths {
    display: none;
}

.DataOriginsDatePickerMonth {
    border-width: 1px;
    border-color: none;
    background-color: none;
    margin: 1px;
    box-sizing: border-box;
    width: 78px;
    height: 54px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-color: grey;
    background-color: whitesmoke;
}

    .DataOriginsDatePickerMonth:hover {
        background-color: darkgray;
    }

.DataOriginsDatePickerYear {
    border-width: 1px;
    border-color: none;
    background-color: none;
    margin: 1px;
    box-sizing: border-box;
    width: 78px;
    height: 54px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-color: grey;
    background-color: whitesmoke;
}

    .DataOriginsDatePickerYear:hover {
        background-color: darkgray;
    }

.DataOriginsDatePickerBox {
    border-width: 1px;
    border-color: none;
    background-color: none;
    margin: 1px;
    box-sizing: border-box;
    width: 34px;
    height: 30px;
    display: block;
    float: left;
    text-align: center;
    padding: 2px;
    border-radius: 3px;
}

.DataOriginsDateActivePickerBox {
    border-style: solid;
    border-color: grey;
    background-color: white;
}

.DataOriginsDatePickerSelectedDay {
    color: white;
    background-color: #475B6F;
}

.DataOriginsDateActivePickerBox:hover {
    background-color: darkgray;
}

.DataOriginsDatePickerDOWBox {
    border-style: none;
    background-color: none;
    margin: 1px;
    box-sizing: border-box;
    width: 34px;
    height: 20px;
    display: block;
    float: left;
    text-align: center;
    padding: 2px;
}

.DataOriginsDatePickerDOWContainer {
    background: #475B6F;
    color: white;
    border-radius: 3px;
}

.DataOriginsDatePickerWeekend {
    background: #C84C3A;
    height: 100%;
}


.DataOriginsSelectableValuesList {
    border: 1px solid #ced4da;
    border-radius: 0px;
    background-color: white;
    color: black;
    padding: 0px;
    font: 400 13.5px Arial;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    display: None;
    z-index: 5000;
}

.DisplayNone {
    display: None !important;
}

.DataOriginsDropDownInput {
}
.DataOriginsSelectInput {
}
.DataOriginsSelectableValueInput {
}

.DataOriginsTextBoxInput {
}

.DataOriginsNumericBoxInput {
}

.DataOriginsDateBoxInput {
}

.DataOriginsFormattedTextBoxInput {
    height: calc(100% - 40px);
    width:100%;
    white-space: pre-line !important;
    overflow: auto;
    position:relative;
}

    .DataOriginsFormattedTextBoxInput a {
        color: blue !important;
        text-decoration: underline !important;
        cursor: pointer !important;
    }
    .DataOriginsFormattedTextBoxInput img {
        display:inline-block;
    }
.DataOriginsFormattedTextBoxHTML {
    height: calc(100% - 40px);
    width: 100%;
    white-space: pre-line !important;
    overflow: auto;
}
.DataOriginsPagesToolBar {
}

.DataOriginsFields {
}

.FilterHeaderSearch {
    margin-bottom: 5px;
    padding: 5px;
}

    .FilterHeaderSearch .form-control {
        border: none;
        height: calc(1.5em + 0.9rem + 2px);
        padding-left: 40px;
        padding-right: 20px;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .FilterHeaderSearch span.search-icon {
        position: absolute;
        z-index: 4;
        font-size: 20px;
        line-height: 38px;
        left: 10px;
        top: 0;
    }

    .FilterHeaderSearch .input-group-text {
        margin-left: 0;
        z-index: 4;
    }

.DataOriginsFilterFields {
    padding-inline-start: 5px;
}

.DataOriginsAvailableValues {
    padding-inline-start: 5px;
}

.DataOriginsMenu,
.DataOriginsMenu ul {
    margin: 0;
    padding: 0;
    color: black;
    list-style: none;
    text-transform: none;
    font-family: 'Lato', Arial, sans-serif;
    line-height: 40px;
}

.DataOriginsButton {
    cursor: pointer;
    outline: none;
}

.DataOriginsImageButton {
    cursor: pointer;
    outline: none;
}

    .DataOriginsImageButton img {
        height: 20px;
        width: 20px;
    }

.DataOriginsMenuUserInfo {
    float: right;
    height: 40px;
}

.TextEditorControl {
}

.TextEditorIcon:hover {
    background-color: burlywood
}
.invertImage {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

@media screen and (max-width: 600px) {
    #UserInfoText {
        display: none !important;
    }
}

@media screen and (max-width: 230px) {
    #UserInfoIcon {
        display: none !important;
    }
}

@media screen and (max-width: 180px) {
    .DataOriginsMenuText {
        display: none !important;
    }
}

.DataOriginsMenuUserInfo {
    float: right;
    height: 50px;
}







.DataOriginsGroupBox {
    padding: 5px;
    padding-top: 14px;
    border: 3px double #ced4da;
    margin: 3px;
    margin-top: 10px;
    position: relative;
}

.DataOriginsGroupBoxHeader {
    position: absolute;
    top: -10px;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
}

.DataOriginsMenuText {
    color: white;
    float: left;
    font-family: 'Segoe UI';
    font-size: 25px;
    padding-left: 14px;
    padding-top: 4px;
    margin-left: 0px;
    margin-right: 0px;
    height: 50px;
}

.DataOriginsMenuScroller {
    position: absolute;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.DataOriginsMenuGroupItems {
    display: none;
    overflow: hidden;
    padding-left: 25px;
    width: 100%;
    box-sizing: border-box;
}


.DataOriginsMenuGroup {
    cursor: pointer;
    width: 10%;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
    min-width: 165px;
    padding: 10px;
    box-sizing: border-box;
}

.DataOriginsMenuItem {
    cursor: pointer;
    width: 160px;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
    padding: 10px;
}

.DataOriginsMenuGroup-ul li {
    overflow: hidden;
    padding-left: 25px;
}

.LoginImage {
    width: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: block;
}

.MenuGroupIcon {
    height: 40px;
    width: 40px;
}

.MenuSection {
    display: inline-block;
    background: rgba(-8, 17, 2, 0.3);
    border-radius: 13px;
    margin: 10px;
    overflow: hidden;
}

.MenuSectionCaption {
    display: block;
    width: 100%;
    text-align: center;
}

.MenuGroupText {
    font-size: 1.3rem;
    text-align: center;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
}

.MenuGroupBack {
    font-size: 1.3rem;
    text-align: center;
    width: 100%;
    display: none;
}

.MenuGroupBackIcon {
    height: 40px;
    width: 40px !important;
    display: none;
    margin-left: auto;
    margin-right: auto;
}

.MenuItemIcon {
    height: 30px;
    width: 30px;
}

.MenuItemTextContainer {
    height: 74px;
    line-height: 79px;
    text-align: center;
}

.MenuItemText {
    font-size: 1.3rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
    line-height: 27px;
    display: inline-block;
    vertical-align: top;
}

.Windows {
    padding: 4px;
    overflow: hidden;
    background-color: var(--windows-background-color);
}




.Centered {
    margin: 0 auto;
    width: fit-content;
    width: -moz-fit-content;
}

.Spacer {
    display: inline-block;
}

.WindowTab {
    color: #002249;
    border: none;
    outline: none;
    cursor: pointer;
    height: 24px;
    float: left;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 3px;
    padding-right: 2px;
    background-color: lightgray;
}

.WindowTabIcon {
    vertical-align: middle;
    height: 30px;
    width: 30px;
}

.Window {
}

.nav-link.active {
    border-bottom-style: solid;
}

.container {
    overflow: hidden;
}

#WindowTabs {
    display: inline-flex;
    max-height: 70px;
    white-space: nowrap;
    overflow-y: hidden;
    /*margin-right: 319px;*/
    margin-top: 20px
}

.WindowTabSpace {
    width: 2px;
    height: 30px;
    border: none;
    outline: none;
    padding: 0;
    float: left;
}

.WindowTabs-arrow {
    height: 30px;
    border: none;
    outline: none;
    padding: 0;
    float: left;
}

.ScrollViewer {
    overflow: auto;
    height: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--card-background-color);
    background-clip: border-box;
    border: 1px solid var(--card-border-color);
    border-radius: .25rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 20px 20px;
}

.ToolbarTitle {
    vertical-align: middle;
    padding-top: 0px;
    padding-left: 5px;
}

.DataOriginsPanel {
    float: left;
}

.DataOriginsWrapPanel {
    display: flex;
}

.DataOriginsStackPanel {
    display: inherit;
}

.DataOriginsHorizontalStackPanel {
    display: inline;
}



.DataOriginsGrid {
}

.DataOriginsGridRow {
    display: flex;
    /*clear: both;*/
}
/*.DataOriginsGridRow::after {
    content: "";
    clear: both;
    display: table;
}*/
.DataOriginsGridColumn {
    float: left;
    width: 100%;
    position: relative;
}

.DataOriginsGridSeventhColumn {
    float: left;
    width: 14.28%;
    position: relative;
}

.DataOriginsGridSixthColumn {
    float: left;
    width: 16.66%;
    position: relative;
}

.DataOriginsGrid10Column {
    float: left;
    width: 10%;
    position: relative;
}

.DataOriginsGrid15Column {
    float: left;
    width: 15%;
    position: relative;
}

.DataOriginsGrid20Column {
    float: left;
    width: 20%;
    position: relative;
}

.DataOriginsGrid25Column {
    float: left;
    width: 25%;
    position: relative;
}

.DataOriginsGrid30Column {
    float: left;
    width: 30%;
    position: relative;
}

.DataOriginsGrid33Column {
    float: left;
    width: 33.33%;
    position: relative;
}

.DataOriginsGrid40Column {
    float: left;
    width: 40%;
    position: relative;
}

.DataOriginsGrid50Column {
    float: left;
    width: 50%;
    position: relative;
}

.DataOriginsGrid60Column {
    float: left;
    width: 60%;
    position: relative;
}

.DataOriginsGrid66Column {
    float: left;
    width: 66.66%;
    position: relative;
}

.DataOriginsGrid70Column {
    float: left;
    width: 70%;
    position: relative;
}

.DataOriginsGrid80Column {
    float: left;
    width: 80%;
    position: relative;
}










/********** Tab Control */
.DataOriginsTabControl {
    user-select: none;
}

.DataOriginsScrollViewer {
    overflow: auto;
}

.DataOriginsTabHeaders {
    font: 400 13.5px Arial;
}

    .DataOriginsTabHeaders::after {
        content: "";
        clear: both;
        display: table;
    }

.DataOriginsTabHeader {
    opacity: 0.7;
    float: left;
    border: 1px solid #ced4da;
    border-radius: 3px 3px 0px 0px;
    outline: none;
    cursor: pointer;
    padding: 1px 5px;
    font-size: 13.5px;
    position: relative;
    top: 1px;
}

    .DataOriginsTabHeader:hover {
        color: #fff !important;
        background-color: #0d6efd !important;
    }

    .DataOriginsTabHeader span {
        font-size: 13.5px;
    }

    .DataOriginsTabHeader img {
        height: 13px;
        width: 13px;
    }

.ActiveTabHeader {
    opacity: 1;
    border-bottom-color: transparent;
    background-color: white;
}

.DataOriginsTabPanel {
    display: none;
    padding: 0px 0px;
    border: 1px solid #ced4da;
    border-radius: 0px 3px 3px 3px;
    height: 100%;
}

.ActiveTabPanel {
    display: block;
}

.DataOriginsStatusbar {
    border: 1px solid #ccc;
    font-family: Arial;
    margin-bottom: 1px;
    padding: 1px;
    clear: both;
}

.ToolTipControl {
    display: None;
    z-index: 5000;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
}

.HasToolTip .ToolTip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.HasToolTip:hover .ToolTip {
    visibility: visible;
}
/***************     Toolbar    *************/
.DataOriginsToolBar {
    font-family: Arial;
    margin-bottom: 10px;
    padding: 1px;
    clear: both;
    user-select:none;
}

.DataOriginsToolBarHeader {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    margin-right: 10px;
}

.DataOriginsToolBarIcon {
    vertical-align: middle;
    height: 26px;
    width: 26px;
    padding: 1px;
}

.DataOriginsFilterColumnChooserIcon {
    vertical-align: middle;
    height: 20px;
    width: 20px;
    padding: 0px;
}

.DataOriginsToolBarText {
    color: var(--toolbar-text-color);
    font-size: 16px;
    text-align: center;
    font-family: 'Segoe UI';
    vertical-align: middle;
    margin-left: 2px;
    margin-right: 7px;
}

.DataOriginsToolbarSelect {
    font-size: 16px;
    font-family: 'Segoe UI';
    display: inline-block;
    vertical-align: middle;
}

.DataOriginsToolBarPanel {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 1px;
    display: inline-block;
    vertical-align: middle;
}

.DataOriginsToolbarInput {
    font-size: 16px;
    font-family: 'Segoe UI';
    vertical-align: middle;
    line-height: 1;
    padding: 0px;
    display: inline-block;
    text-overflow: ellipsis;
}

.DataOriginsToolbarDropDown {
    display: inline-block;
    vertical-align: middle;
}

.DataOriginsErrorButton {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 1px;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
}


.DataOriginsToolBarButton {
    outline: none;
    cursor: pointer;
    padding: 1px;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .15rem;
}

.DataOriginsToolBarGroupedButton {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 1px;
    display: block;
    vertical-align: middle;
    white-space: nowrap;
    color: black;
}

    .DataOriginsToolBarGroupedButton:hover {
        color: #fff !important;
        background-color: #0d6efd !important;
        border-radius: .25rem;
    }

.DataOriginsToolBarDropDownItem {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 1px;
    display: list-item;
    vertical-align: middle;
    white-space: nowrap;
}

    .DataOriginsToolBarDropDownItem:hover {
        background-color: var(--table-selected-row-bg) !important;
        color: var(--table-data-color) !important;
        border-radius: .25rem;
    }

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }

.DataOriginsToolBarButtonGroup {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 1px;
    display: list-item;
    vertical-align: middle;
    white-space: nowrap;
}

    .DataOriginsToolBarButtonGroup:hover {
        color: #fff !important;
        background-color: #0d6efd !important;
        border-radius: .25rem;
    }

.DataOriginsToolBarButtonGroup-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 3;
    border: 1px solid #ccc;
}

.DataOriginsToolbarDropDown-subcontent {
    display: none;
    position: fixed;
    background-color: #f9f9f9;
    z-index: 3;
}


.DataOriginsToolBarButtonGroup:hover .DataOriginsToolBarButtonGroup-content {
    display: block;
}



/* Data Grid */


/***********  DataGrid Styles */
.FilterHeaderFilters {
    color: var(--filter-header-text-color);
    font-size: 20px !important;
    border: none;
    outline: none;
    background: var(--filter-background-color);
    margin-top: 8px;
}

.FilterByField {
    border: none;
    outline: none;
}

.FilterOperator {
    border: none;
    outline: none;
}

.FilterValue {
    border: none;
    outline: none;
}

.DataOriginsTableRow {
    background-color: var(--card-background-color);
}

    .DataOriginsTableRow:hover {
        background-color: var(--table-selected-row-bg);
        color: var(--table-data-color);
    }

.DataOriginsTable tbody tr:nth-child(even) {
}



.EditingRow td {
    background-color: white !important;
}


.DataOriginsFilterToolbarImage {
    width: 40px;
    vertical-align: middle;
}

.DataOriginsTable .Num {
    text-align: right;
}

.DataOriginsTable .Cur {
    text-align: right;
}

.DataOriginsTable .Che {
    text-align: center;
}
/******************************************/




.DataOriginsList {
}

.DataOriginsListHeader {
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
}

.FilterToolBarContainer {
    overflow: hidden;
    padding: px;
    margin: 0;
    border: 0;
}

.DataOriginsDataGrid {
}

.DataOriginsTable {
    position: relative;
    width: 100%;
    margin: 0px;
    overflow: auto;
    background: var(--table-data-background-color);
    user-select: none;
}

.FirstColumn {
}

.DataOriginsTable th {
    position: relative;
}


.DataOriginsTable thead tr {
    background: var(--table-header-background-color);
    color: var(--table-header-text-color);
}

.DataOriginsTable tbody tr {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: var(--table-data-border-color);
    background-color: var(--card-background-color);
}
.DataOriginsTablegGroupRow {
    background-color: var(--tablegroup-bg-color) !important;
}
.SelectedRow {
    background: var(--table-selected-row-bg) !important;
    color: black !important;
}

.DataOriginsTable thead tr {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* safari and ios need the tfoot itself to be position:sticky also */
.DataOriginsTable tfoot,
.DataOriginsTable tfoot th,
.DataOriginsTable tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    font-size: var(--table-data-font-size);
    padding: var(--table-data-padding);
    padding-right: 5px;
    z-index: 4;
}
    .DataOriginsTable tfoot tr {
        background: var(--table-header-background-color);
        color: var(--table-header-text-color);
    }
.tableData {
    vertical-align: middle;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding-bottom: 1px;
}

.DataOriginsTable tbody td {
    font-size: var(--table-data-font-size);
    padding: var(--table-data-padding);
    color: var(--table-data-color);
    padding-right:5px;
}

.DataOriginsTable thead th {
    font-size: var(--table-header-font-size);
    padding: var(--table-header-padding);
    color: var(--table-header-color);
    padding-right: 5px;
}

.FrozenColumn {
    position: -webkit-sticky;
    position: sticky !important;
    z-index: 3;
    background-color: inherit;
}

.FrozenColumnHeader {
    position: -webkit-sticky;
    position: sticky !important;
    background-color: var(--table-header-background-color);
    z-index: 3;
}

.DataOriginsColumnHeaderIconDiv {
    position: absolute;
    right: 3px;
    top: 0px;
    cursor: zoom-in;
    height: 100%;
    width: 12px;
}

.DataOriginsColumnHeaderIcon {
    position: absolute;
    top: 5px;
    height: 12px;
    width: 12px;
}

.DataOriginsColumnResize {
    display:inline-block;
    width: 3px;
    height: 20px;
    float: right;
    cursor: col-resize;
    z-index: 10;
    top: 0px;
    position: relative;
}
.DataOriginsColumnSort {
    display: inline-block;
    float: right;
    font-family: "Material Design Icons";
    opacity:.5;
}
.sorted{
    opacity:1 !important;
}
.DataOriginsColumnFilter {
    display: inline-block;
    float: right;
    font-family: "Material Design Icons";
    opacity: .5;
}
.DataOriginsColumnFilterFiltering {
    color:orange;
}

.DataOriginsGridRows {
    overflow-x: auto;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: white;
}



.DataOriginsColumnSortIcon {
    display: none;
    position: absolute;
    top: -1px;
    height: 9px;
    width: 100% !important;
}

.DataOriginsColumnHeaderText {
    position: relative;
    vertical-align: middle;
    padding: 0px;
    box-sizing: border-box;
}

    .DataOriginsColumnHeaderText::before {
        content: "";
        position: absolute;
        right: 10px;
    }

.DataOriginsCriteriaBox {
    font-size: 16px;
    font-family: 'Segoe UI';
    color: black;
    line-height: 1;
    min-height: 75px;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    outline: none;
    border-style: none;
    background-color: transparent;
    color: var(--control-input-color);
}

.DataOriginsFilterBuilder {
    display: none;
}

.DataOriginsViewBuilder {
    display: block;
    border: 1px solid #98bff7;
    width: 75vw;
}

.DataOriginsViewBuilderDetail {
    border: 1px solid #ccc;
    margin-bottom: 1px;
    padding: 1px;
}

.DataOriginsAvailableValues {
    display: none;
    position: absolute;
    margin: 0px;
    padding: 0px;
    height: 150px;
    min-height: 75px;
    width: 25%;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    font-size: 12px;
    font-family: 'Segoe UI';
    background-color: white;
    z-index: 10;
    border: 1px solid #ccc;
}

    .DataOriginsAvailableValues ul {
        padding-inline-start: 5px;
    }

    .DataOriginsAvailableValues li {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 15px;
        font-family: 'Segoe UI';
    }

        .DataOriginsAvailableValues li:hover {
            background-color: Highlight;
        }

.DataOriginsFilterColumnChooser {
    display: none;
    position: absolute;
    margin: 0px;
    padding: 0px;
    height: 150px;
    min-height: 75px;
    width: 25%;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    font-size: 12px;
    font-family: 'Segoe UI';
    background-color: white;
    z-index: 1000;
    border: 1px solid #ccc;
}

    .DataOriginsFilterColumnChooser li {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 15px;
        font-family: 'Segoe UI';
        color: black;
    }

.DataOriginsColumnChooser {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    height: 500px;
    min-height: 75px;
    width: 33%;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    font-size: 12px;
    font-family: 'Segoe UI';
    color: var(--toolbar-text-color)
}




#MenuContainer {
    cursor: pointer;
}

.DataOriginsColumnChooserField {
    font-size: 12px;
    font-family: 'Segoe UI';
    color: var(--table-data-color);
}

    .DataOriginsColumnChooserField:hover {
        background-color: Highlight;
    }

.DataOriginsCurrentColumns {
    padding-inline-start: 0px;
    width: 100%;
}

.Columns {
    display: inline-block;
    width: calc(33% - 36px);
}

.ColumnsList {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 350px;
    min-height: 75px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #1C6EA4;
}


.DataOriginsCurrentColumnInfoCaptions {
    width: 100px;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
}

.DataOriginsCurrentViewInfoCaptions {
    width: 125px;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
}

.DataOriginsCurrentColumnInfo {
    display: block;
    margin: 0px;
    padding: 10px;
    height: 150px;
    min-height: 75px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #1C6EA4;
}

.DataOriginsViewBuilderSelectedView {
    margin: 20px;
    width: 50%;
}

.DataOriginsCurrentViewInfo {
    display: inline-block;
    margin: 0px;
    padding: 10px;
    height: 500px;
    min-height: 75px;
    width: 33%;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #1C6EA4;
    color: var(--toolbar-text-color)
}

.DataOriginsCurrentViewFrozenColumns {
    width: calc(100% - 140px);
}

.DataOriginsCurrentColumn {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
    background: lightgray;
    padding: 0px;
    padding-left: 2px;
    padding-top: 1px;
    vertical-align: bottom;
    border: 1px solid #AAAAAA;
    height: 18px;
    list-style: none;
}

    .DataOriginsCurrentColumn.SelectedColumn {
        background: #004f70;
        color: white;
    }

.DataOriginsCurrentColumnCaption {
    width: calc(100% - 110px);
}

.DataOriginsCurrentColumnExpression {
    width: calc(100% - 110px);
}

.DataOriginsCurrentColumnFormat {
    width: calc(100% - 110px);
}
.DataOriginsCurrentColumnType {
    width: calc(100% - 110px);
}
.DataOriginsCurrentColumnWidth {
    width: calc(100% - 110px);
}

.DataOriginsColumnChooserButtons {
    display: inline-block;
    margin: 0px;
    padding: 3px;
    height: 500px;
    min-height: 75px;
    width: 30px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
}
/*Expander*/
.DataOriginsExpander {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    vertical-align: top;
}

    .DataOriginsExpander::before {
        content: "\25B6";
        color: black;
        display: inline-block;
    }

.DataOriginsExpanderOpen::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}
.DataOriginsExpanderContainer {
    display: none;
}
/*TreeView*/
.DataOriginsTreeView li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.DataOriginsTreeViewExpander {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    vertical-align: top;
}

    .DataOriginsTreeViewExpander::before {
        content: "\25B6";
        color: black;
        display: inline-block;
    }

.DataOriginsTreeViewExpanderOpen::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}

.DataOriginsTreeViewChildren {
    display: none;
}

.DataOriginsTreeViewOpen {
    display: block;
}

.DataOriginsTreeView ul {
    padding-left: 0px;
}

    .DataOriginsTreeView ul ul {
        padding-left: 8px;
    }

.DataOriginsTreeView li {
    padding-left: 0px;
}

.blink {
    animation: blinker 0.6s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}


/***********************  Banner and Menu ******************/
.DataOriginsMenuUserInfo {
    float: right;
    height: 40px;
}

#UserInfoIcon {
    cursor: pointer;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
    float: right;
    height: 29px;
}

.DataOriginsMenuText {
    color: white;
    float: left;
    font-family: 'Segoe UI';
    font-size: 25px;
    padding-left: 14px;
    padding-top: 0px;
    margin-left: 0px;
    margin-right: 6px;
    height: 50px;
}

.DataOriginsBanner {
    background-color: #004772;
    width: 100%;
    height: 40px;
    z-index: -1;
}

.DataOriginsSlideOutMenu {
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 0px;
    border-right: solid 1px grey;
    box-sizing: border-box;
    z-index: 10;
    background: whitesmoke;
}

.DataOriginsMenu {
    display: inline-block;
    height: 40px;
    font-size: 13px;
    float: left;
}

.DataOriginsUserMenu {
    position: absolute;
    top: 40px;
    bottom: 0;
    Right: 0;
    overflow: hidden;
    width: 0px;
    background-color: ghostwhite;
    border-left: solid 1px grey;
    z-index: 10;
}

.DataOriginsMenuIconBox {
    cursor: pointer;
    padding-left: 0px;
    padding-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    height: 40px;
    width: 40px;
    float: left;
    background-color: lightgray;
}


.DataOriginsMenuIcon {
    cursor: pointer;
    padding-left: 2px;
    padding-top: 1px;
    margin-left: 0px;
    margin-right: 0px;
    height: 35px;
}
/****************************************************************/
.KPI {
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    padding: 6px;
}

.KPICounter {
    align-self: center;
    width: 100%;
    text-align: center;
    font-size: 3vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.KPIHeader {
    height: 25px;
    border-bottom: 1px solid var(--card-border-color);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.KPIBody {
    height: calc(100% - 25px);
}

.KPIContainer {
    height: 100%;
    width: 100%;
    overflow:hidden;
}

.DataOriginsDataGrid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.AddNewButton {
    background-color: var(--add-new-button-background-color);
    color: var(--add-new-button-color);
    border-color: var(--add-new-button-background-color);
    opacity: 0.9;
}

    .AddNewButton:hover {
        opacity: 1;
    }

    

.OKButton {
    background-color: var(--ok-button-background-color);
    color: var(--ok-button-color);
    border-color: var(--ok-button-background-color);
    opacity: 0.9;
}

    .OKButton:hover {
        opacity: 1;
    }


.EditButton {
    background-color: var(--edit-button-background-color);
    color: var(--edit-button-color);
    border-color: var(--edit-button-background-color);
    opacity: 0.9;
}

    .EditButton:hover {
        opacity: 1;
    }


.DeleteButton {
    background-color: var(--delete-button-background-color);
    color: var(--delete-button-color);
    border-color: var(--delete-button-background-color);
    opacity: 0.9;
}

    .DeleteButton:hover {
        opacity: 1;
    }


.CloseButton {
    background-color: var(--close-button-background-color);
    color: var(--close-button-color);
    border-color: var(--close-button-background-color);
    opacity: 0.9;
}

    .CloseButton:hover {
        opacity: 1;
    }


.ActionsButton {
    background-color: var(--actions-button-background-color);
    color: var(--actions-button-color);
    border-color: var(--actions-button-background-color);
    opacity: 0.9;
}

    .ActionsButton:hover {
        opacity: 1;
    }


.PrintButton {
    background-color: var(--print-button-background-color);
    color: var(--print-button-color);
    border-color: var(--print-button-background-color);
    opacity: 0.9;
}

    .PrintButton:hover {
        opacity: 1;
    }


.HelpButton {
    background-color: var(--help-button-background-color);
    color: var(--help-button-color);
    border-color: var(--help-button-background-color);
    opacity: 0.9;
}

    .HelpButton:hover {
        opacity: 1;
    }

.UndoButton {
    background-color: var(--undo-button-background-color);
    color: var(--undo-button-color);
    border-color: var(--undo-button-background-color);
    opacity: 0.9;
}

    .UndoButton:hover {
        opacity: 1;
    }


.DataOriginsMenuUserInfo {
    float: right;
    height: 40px;
}

#UserInfoIcon {
    cursor: pointer;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
    float: right;
    height: 29px;
}

.DataOriginsMenuText {
    color: white;
    float: left;
    font-family: 'Segoe UI';
    font-size: 25px;
    padding-left: 14px;
    padding-top: 0px;
    margin-left: 0px;
    margin-right: 6px;
    height: 50px;
}


.DataOriginsBanner {
    background-color: #004772;
    width: 100%;
    height: 40px;
    z-index: -1;
}

.DataOriginsSlideOutMenu {
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 0px;
    border-right: solid 1px grey;
    box-sizing: border-box;
    z-index: 10;
    background: whitesmoke;
}

.DataOriginsMenu {
    display: inline-block;
    height: 40px;
    font-size: 13px;
    float: left;
}

.DataOriginsUserMenu {
    position: absolute;
    top: 40px;
    bottom: 0;
    Right: 0;
    overflow: hidden;
    width: 0px;
    background-color: ghostwhite;
    border-left: solid 1px grey;
    z-index: 10;
}

.DataOriginsMenuIconBox {
    cursor: pointer;
    padding-left: 0px;
    padding-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    height: 40px;
    width: 40px;
    float: left;
    background-color: lightgray;
}


.DataOriginsMenuIcon {
    cursor: pointer;
    padding-left: 2px;
    padding-top: 1px;
    margin-left: 0px;
    margin-right: 0px;
    height: 35px;
}
/****************************************************************/

/***************    Window Tabs and Windows *******************/

.Window {
}

#WindowTabs {
    user-select: none;
}

.WindowTabIcon {
}

.WindowTabCloseIcon {
    vertical-align: Top;
    height: 11px;
    width: 11px;
    margin-left: 5px;
    cursor: pointer;
}

.WindowTabText {
    color: inherit;
    margin-left: 5px;
    vertical-align: middle;
}

.WindowTab {
    color: #002249;
    border: none;
    outline: none;
    cursor: pointer;
    height: 35px;
    float: left;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 3px;
    padding-right: 2px;
    background-color: lightgray;
    margin-left: 2px;
}

.Active {
    background-color: white;
}
/*******************************************************************/





.ToolbarTitle {
    font-family: 'Segoe UI';
    font-size: 31px;
    color: var(--toolbar-title-color);
}


.GirdCurrentPage {
    background-color: grey;
}

.DataOriginsStatusbar {
}

.DataOriginsTabPanel {
}

.DataOriginsGroupBoxHeader {
    background: var(--background);
}

.DataOriginsGroupBox {
}

.DataOriginsControlCaption {
}

.DataOriginsInputControlContainer {
    border-style: solid;
    border-color: var(--control-input-border-color);
    border-width: var(--control-input-border-width);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.Focused {
    color: black;
    background-color: var(--control-input-focused-background-color);
    border-color: var(--control-input-focused-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(13,110,253,.25);
}

.DataOriginsInputControl {
}

.DataOriginsButtonControl {
    color: black;
    background-color: lightgrey;
    font-family: Arial;
}

    .DataOriginsButtonControl:hover {
        background-color: darkgrey;
    }



.HasErrors {
    color: red;
}

.DataGridColumnMenuItem:hover {
    background-color: var(--table-selected-row-bg) !important;
    color: var(--table-data-color) !important;
}

.DataGridColumnMenuIcon {
    width: 20px;
    height: 20px;
}
.resizer {
    width: 6px;
    height: 6px;
    border-radius: 50%; 
    background: white;
    border: 1px solid #4286f4;
    position: relative;
    z-index: 5000;
}

    .resizer.top-left {
        cursor: nwse-resize; 
    }

    .resizer.top-right {
        cursor: nesw-resize;
    }

    .resizer.bottom-left {
        cursor: nesw-resize;
    }

    .resizer.bottom-right {
        cursor: nwse-resize;
    }

    .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.no-close.ui-dialog-buttons {
        z-index: 10000;
    }

    .no-close .ui-dialog-titlebar-close {
        display: none;
    }

.KPIBadge {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
    /* Colors */
    color: #fff;
    /* Rounded border */
    border-radius: 9999px;
    height: 1.5rem;
    width: 1.5rem;
}

.DashboardToolbar {
    display:flex;
    justify-content: flex-end;
}

.banner {
    color: #fff;
    height: 20px;
    position: fixed;
    width: 100%;
    top: 0px;
    text-align: center;
    font-weight: bold;
    border-radius: 0 0 50% 50%;
    z-index: 1500;
    left: 70px;
}

.DaysOfMonthColumn {
    display: flex;
    justify-content: right;
    margin-right: 5px;
}