:root {
    --dxbl-context-menu-item-focus-outline-color: #f8f8f8 !important;
    --dxbl-grid-focus-frame-color: #f8f8f8 !important;
    --dxbl-tabs-tab-focus-outline-color: #f8f8f8 !important;
    --dxbl-tabs-tab-selected-color: #f8f8f8 !important;
    --dxbl-grid-focus-frame-color: #f8f8f8 !important;
    --bs-primary: #f8f8f8 !important;
    --action-primary: #007bff !important;
}

.ui_color-1 {
    color: #6c757d;
}

.ui_color-2 {
    color: #2b2f3a;
}

.ui_color-3 {
    color: #bd2130;
}

.ui_color-4 {
    color: #fff;
}

.ui_color-5 {
    color: #009efb;
}

.ui_background-color-2 {
    background-color: #FFF !important;
}

.ui_background-color-3 {
    background-color: #2b2f3a;
}

.ui_background-color-4 {
    background-color: #009efb;
}

.ui_border-1 {
    border: 1px solid #dfdfdf !important;
    border-radius: .25rem;
}

.ui_opacity-05 {
    opacity: 0.5;
}

.ui_font-size-05rem {
    font-size: 0.5rem !important;
}

.ui_font-size-06rem {
    font-size: 0.6rem !important;
}

.ui_font-size-07rem {
    font-size: 0.7rem !important;
}

.ui_font-size-075rem {
    font-size: 0.75rem !important;
}

.ui_font-size-0875rem {
    font-size: 0.875rem !important;
}

.avatar-rectangle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}

    .avatar-rectangle .remove-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 20;
    }

.ui_font-size-1rem {
    font-size: 1rem !important;
}

.ui_font-size-125rem {
    font-size: 1.25rem;
}

.ui_font-size-2rem {
    font-size: 2rem;
}

.ui_font-size-3rem {
    font-size: 3rem;
}

.ui_font-weight-500 {
    font-weight: 500;
}

.ui_z-1 {
    z-index: 1;
}

.ui_z-2 {
    z-index: 2;
}

.ui_z-850 {
    z-index: 850;
}

.ui_z-950 {
    z-index: 950;
}

.ui_z-960 {
    z-index: 960;
}

.ui_z-970 {
    z-index: 970;
}

.ui_z-1000 {
    z-index: 1000;
}

.ui_top-0 {
    top: 0;
}

.ui_right-0 {
    right: 0;
}

.ui_bottom-0 {
    bottom: 0;
}

.ui_left-0 {
    left: 0;
}

.ui_w-1 {
    width: 22rem;
}

.ui_w-1rem {
    width: 1rem !important;
}

.ui_w-15rem {
    width: 1.5rem !important;
}

.ui_w-16rem {
    width: 16rem;
}

.ui_height-15rem {
    height: 1.5rem !important;
}

.ui_height-3rem {
    height: 3rem !important;
}

.ui_height-50p {
    height: 50% !important;
}

.ui_max-h-90p {
    max-height: 99%;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.LoginFormButtons {
    display: block;
    width: 292px;
    height: 30px;
    margin: 5px;
    font-size: 15px
}

    .LoginFormButtons input {
        display: block;
        width: 292px;
        height: 26px;
    }

.externalLoginRow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

.externalLoginButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .externalLoginButton:hover {
        border-color: #bbb;
        background-color: #f7f7f7;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

/* The provider buttons submit a native GET form so the OAuth challenge is a real browser
   navigation (no Blazor circuit / JS-interop, which was cancelled by the redirect teardown).
   display:contents keeps the <button> as the direct flex child of .externalLoginRow. */
.externalLoginForm {
    display: contents;
}

/* Labeled variant: icon + text (e.g. "Prisijungti su Google"/"...su Microsoft"). Overrides the
   fixed 44px square to a full-width pill; buttons stack vertically in .externalLoginRow. */
.externalLoginButtonLabeled {
    width: 100%;
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 16px;
}

.externalLoginLabel {
    font-size: 14px;
    font-weight: 700;
    color: #3c4043;
    white-space: nowrap;
}

.Center {
    display: table;
    margin-right: auto;
    margin-left: auto;
}

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

    .Absolute-Center.is-Responsive {
        width: 50%;
        height: auto;
        min-width: 200px;
        max-width: 400px;
        max-height: 200px;
    }

.MainFormSideBar {
    height: 100vh;
    width: 3rem;
    z-index: 3;
    position: fixed;
    background: #2b2f3a;
}

.MainFormSideBarTransparent {
    height: 100vh;
    width: 19rem;
    left: 3rem;
    z-index: -1;
    position: fixed;
    pointer-events: auto;
    background: #41434a;
}

.MainFormSideBarItems {
    display: block;
}

    .MainFormSideBarItems ul {
        position: absolute;
        display: block !important;
        width: 3rem;
        z-index: 15 !important;
    }

    .MainFormSideBarItems a {
        font-size: 12px;
        height: 20px;
        text-decoration: none;
        background: #e6e6e6 !important;
    }

    .MainFormSideBarItems img {
        width: 32px;
        height: 32px;
    }

.MainFormTabs ul {
    text-align: center;
    list-style: none;
    display: flex;
    position: relative;
    left: 0px;
    height: 42px;
}

.MainFormTabs li {
    height: auto;
    text-align: center;
    border-radius: 5px;
}

.MainFormTabs {
    vertical-align: central;
    position: absolute;
    display: flex;
    margin-top: 50px;
    width: calc(100% - 3rem) !important;
    left: 3rem;
}

.MainFormGridArea {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 1rem;
    overflow: hidden;
}

.skip-pointer {
    pointer-events: none !important;
}

.auto-pointer {
    pointer-events: auto !important;
}

.all-pointer {
    pointer-events: all !important;
}

.ListTemplate {
    pointer-events: all;
    width: calc(100% - 5px);
    height: calc(100% - 0px);
    display: flex;
    flex-direction: column;
}

.ListTemplateHeaderLine {
    margin-top: 19px;
    height: 1px;
    background: #00000091;
}

.ListTemplateHeaders li {
    width: auto !important;
}

.ListTemplateHeaders ul {
    display: flex !important;
    height: auto;
}

.ListTemplateHeaders img {
    width: 24px;
    height: 24px;
}

.cellhighlightedbackground {
    background-color: rgba(0, 140, 255, 0.2);
    /* Transparent blue */
}

.hidden {
    display: none !important;
}

.checkBoxHidden {
    width: 0px !important;
    overflow: hidden !important;
}

.redErrorText {
    color: red;
    font-weight: bold;
    font-size: 14px;
    background-color: #ffe6e6;
    border: 1px solid red;
    padding: 5px;
    border-radius: 3px;
}

.app_a-color3 {
    color: #bd2130;
}

.app_a-color4 {
    color: #009efb;
}

.app_a_color5 {
    color: #5fba7d;
}

.baseWhiteBorder {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.BaseFormButtons {
    bottom: 0px;
    height: 33px;
    position: absolute;
    right: 5px;
}

.XLookUpSearchDropdownIcon {
    cursor: pointer;
    padding: 5px;
    overflow: visible;
    flex: 0 0 auto;
}

    .XLookUpSearchDropdownIcon:hover {
        background-color: #f0f0f0;
        border-radius: 6px;
    }

.XLookUpSearchIconWrapper {
    position: absolute;
    right: 5px !important;
    top: 10px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
}

/* Password reveal ("eye") toggle.
   The icon lives INSIDE the text box element, so the box is what it is positioned against — the
   outer XTextEdit wrapper is width:100% of its host and is regularly wider than the box itself
   (the login/reset/activation screens pin the box to 292px through .LoginFormButtons), which is
   what used to leave the eye floating in the gap to the right of the login password field.
   Room is reserved on the input so a long value scrolls beside the icon instead of under it. */
.XPasswordRevealHost {
    position: relative;
}

    .XPasswordRevealHost input {
        /* SetupXTextEdit's reserveIconSpace narrows every input by ~25px inline to clear the
           lookup/localization icon strip, which would leave a visible gap between the value and the
           eye. Padding is the right tool here, so drop that inline cap (a stylesheet !important
           outranks an inline declaration) and reserve the space on the input itself instead. */
        max-width: none !important;
        padding-right: 28px !important;
    }

.XPasswordRevealWrapper {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.XPasswordRevealIcon {
    font-size: 13px;
    line-height: 1;
    color: #8a8a8a;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
}

    .XPasswordRevealIcon:hover {
        color: #555;
        background-color: #f0f0f0;
    }

/* The rules block shown above the password fields on the activation / migration / reset screens. */
.PasswordRules {
    margin: 4px 5px 8px 5px;
    font-size: 12px;
    color: #555;
}

    .PasswordRules .PasswordRulesTitle {
        font-weight: 600;
    }

    .PasswordRules ul {
        margin: 2px 0 0 0;
        padding-left: 18px;
    }

    .PasswordRules li {
        line-height: 1.35;
    }


.XFileUpload {
    outline: none;
    background-color: #ffffff !important;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid #dddddd;
    width: 100% !important;
}

    .XFileUpload .filedata {
        display: flex;
        flex-direction: row;
        width: 100%;
        display: grid;
        padding-left: 1rem !important;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
        width: 100%;
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
    }

        .XFileUpload .filedata span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis !important;
        }

    .XFileUpload label {
        background-color: #f8f8f8;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-radius: 0.5rem;
    }

        .XFileUpload label label {
            text-decoration: underline;
            color: navy;
        }

            .XFileUpload label label:hover {
                text-decoration: underline;
                color: navy;
                cursor: pointer;
            }

    .XFileUpload .fileList {
        display: grid !important;
        width: 100% !important;
        flex-direction: row !important;
    }

    .XFileUpload i:hover {
        cursor: pointer;
    }

    .XFileUpload .uploadtip p {
        margin: 0;
        padding: 0;
    }

    .XFileUpload .dropzone {
        background-color: #f8f8f8 !important;
        border: 2px #dddddd dashed;
        border-radius: 0.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        width: 100%;
    }

        .XFileUpload .dropzone .browse {
            color: navy;
        }

            .XFileUpload .dropzone .browse:hover {
                text-decoration: underline;
                color: navy;
                cursor: pointer;
            }

.XLookUpEdit {
    width: 100%;
}

    .XLookUpEdit input {
        height: calc(40px - 20px);
        padding: 0px;
        margin-top: 15px;
        margin-bottom: 5px;
        margin-right: 30px;
        margin-left: 10px;
        width: 100% !important;
        box-sizing: border-box;
    }

.XLookUpEditRequired {
    text-indent: 0px !important;
    border-left: 2px solid #009efb !important;
    border-radius: 0.2rem !important;
}

.XLookUpSearchPopUp {
    position: absolute;
    min-width: 100%;
    width: auto;
    max-height: 300px;
    z-index: 6;
    text-wrap: nowrap;
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

    .XLookUpSearchPopUp div {
        cursor: pointer;
        padding-right: 10px;
        min-width: 50px;
        padding-left: 5px;
        border-radius: 6px;
        margin-bottom: 2px;
        white-space: pre !important;
    }

        .XLookUpSearchPopUp div:hover {
            background-color: #edf1f5;
        }

        .XLookUpSearchPopUp div[disabled="1"] {
            /* Your styles here */
            opacity: 0.5;
            pointer-events: none;
        }

/* "Create new" entry pinned to the top of the dropdown (XLookUpEdit.NewObjectType). */
.XLookUpEditNewObjectItem {
    position: sticky;
    top: -15px;
    z-index: 1;
    display: flex !important;
    align-items: center;
    cursor: pointer;
    padding: 4px 5px;
    margin: -15px -15px 4px -15px;
    background-color: white;
    border-bottom: 1px solid #e3e8ee;
    color: black;
}

    .XLookUpEditNewObjectItem:hover {
        background-color: #edf1f5;
    }

.XLookUpSearchPopUpMulti {
    position: absolute;
    min-width: 90%;
    width: 100%;
    max-width: 110%;
    max-height: 300px;
    z-index: 6;
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: auto;
}

    .XLookUpSearchPopUpMulti div {
        cursor: pointer;
        padding-right: 5px;
        padding-left: 5px;
        border-radius: 6px;
        margin-bottom: 2px;
        width: auto;
    }

    .XLookUpSearchPopUpMulti label {
        cursor: pointer;
        width: 100%;
    }

    .XLookUpSearchPopUpMulti input {
        width: auto;
    }

    .XLookUpSearchPopUpMulti div:hover {
        background-color: #edf1f5;
    }

.mfCloseTab {
    position: revert;
    top: 2px;
    right: 2px;
    margin-left: 15px;
    font-size: 10px;
    cursor: pointer;
}

.custom-control.custom-checkbox.d-inline-block {
    max-width: 20px;
}

.xcheckbox {
    accent-color: #d7cde2;
    display: inline-flex;
    align-items: center;
    width: auto;
}

.resizable {
    position: relative;
    overflow: auto;
    resize: both;
    min-width: 100px;
    min-height: 100px;
}

    .resizable::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: rgba(0, 0, 0, 0.2);
        cursor: nwse-resize;
    }

.xbutton button {
    height: 2rem;
    background: unset !important;
}

.xbutton {
    height: 2rem;
    width: 100%;
}

.listtemplate-row-selector {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.xbutton[role="ListTemplateRowSelector"] {
    all: unset !important;
    background-color: #fff;
    height: 2rem;
    width: fit-content;
    transition: height 0.3s ease;
    white-space: nowrap;
    margin: 0 !important;
    border: none;
    white-space: nowrap !important;
    user-select: none !important;
    pointer-events: none !important;
    background: unset !important;
}

    .xbutton[role="ListTemplateRowSelector"]:hover {
        white-space: nowrap !important;
    }

.xbutton[role="DropdownMenu"] {
    background-color: #fff;
    border: none;
    color: black;
    width: 100%;
    white-space: nowrap;
    padding-inline: 0.5rem;
    margin: 0 !important;
    margin-block: 0.1rem !important;
    background: unset !important;
}

    .xbutton[role="DropdownMenu"]:hover {
        background-color: #edf1f5 !important;
        color: black;
    }

.xbutton[role="NotificationPanel"] {
    background-color: #f8f8f8;
    border: none;
    color: black;
    width: 100%;
    height: 2rem;
    margin-top: 0.5rem;
    transition: height 0.3s ease;
    white-space: nowrap;
    padding-inline: 2rem;
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
    background: unset !important;
}

    .xbutton[role="NotificationPanel"]:hover {
        background-color: #ebebeb;
        color: black;
    }

.xbutton.admin[role="DropdownMenu"] {
    background-color: #d9dedb !important;
    background: unset !important;
}

    .xbutton.admin[role="DropdownMenu"]:hover {
        background-color: #edf1f5 !important;
        color: white;
        width: 100%;
    }

.xbutton[role="Filter"] {
    background-color: #fff;
    color: var(--action-primary);
    border-color: var(--action-primary);
    height: 2rem;
    width: 4.5rem;
    background: unset !important;
}

    .xbutton[role="Filter"]:hover {
        background-color: var(--action-primary) !important;
        color: white !important;
        border-color: var(--action-primary) !important;
    }

.xbutton[role="Action"] {
    border-color: var(--action-primary);
    height: 2.2rem !important;
    background-color: transparent;
    color: var(--action-primary);
    background: unset !important;
}

    .xbutton[role="Action"]:hover {
        background-color: var(--action-primary) !important;
        color: white !important;
    }

.xbutton[role="Navigation"] {
    border-color: transparent;
    height: 1.2rem !important;
    background-color: red !important;
    color: var(--action-primary);
    background: unset !important;
}

    .xbutton[role="Navigation"]:hover {
        border-color: transparent !important;
        color: var(--action-primary) !important;
    }

        .xbutton[role="Navigation"]:hover span {
            text-decoration: underline;
        }

.xbutton[role="SavePanel"] {
    height: 2rem;
    background: unset !important;
}

.xbutton[role="SavePanelClose"]:hover {
    background-color: #dc3545 !important;
}

.xbutton[role="SavePanelAction"] {
    height: 3rem;
    border-color: var(--action-primary);
    color: var(--action-primary);
    background: unset !important;
}

    .xbutton[role="SavePanelAction"]:hover {
        background-color: var(--action-primary) !important;
        border-color: var(--action-primary) !important;
        color: white !important;
    }

.xbutton.LanguageSelected {
    font-weight: bold;
    color: var(--action-primary);
    background: unset !important;
}

.XListBox {
    height: 100% !important;
}

.dxbs-listbox .list-group {
    margin-top: 3px !important;
}

.dxbs-listbox-item {
    display: flex !important;
    align-items: center !important;
    justify-content: start !important;
}

    .dxbs-listbox-item .dxbs-checkbox {
        width: fit-content;
    }

.XListBoxPaddingTopPlaceHolder {
    padding-top: 23px !important;
}

.XMemo textarea {
    padding-top: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100% !important;
    box-sizing: border-box;
}

/* Suppress the browser's dotted focus outline that leaks through inside the
   DevExpress focus border (DevExpress' own reset only targets a direct-child
   textarea, which doesn't match the memo's nested input). */
.XMemo textarea:focus,
.XMemo textarea:focus-visible,
.XMemo:focus,
.XMemo:focus-within,
.XMemo:focus-visible,
.XMemo :focus,
.XMemo :focus-visible {
    outline: none !important;
}

.XMemoRequired {
    border-left: 2px solid #009efb !important;
    border-radius: 0.25rem !important;
}

.appUpperRow {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: calc(100% - 1rem);
    padding-left: 4rem;
    background-color: white;
}

.appUpperLogo {
    position: absolute;
    top: 8px;
    left: 4rem;
    align-self: flex-start;
    margin: auto;
    height: 30px;
    width: auto;
}

    .appUpperLogo:hover {
        cursor: pointer;
    }

.userMenuDropDown {
    position: absolute;
    top: 30px;
    left: -18px !important;
    z-index: 500;
    float: left;
    max-width: 10rem;
    margin: .125rem 0 0;
    padding-top: 0.5rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
}

.appUserTopInfoLogo {
    top: 8px;
    height: 30px;
}

.appUserTopInfoAction {
    display: flex;
    flex-direction: row;
    gap: 1rem !important;
}

.appUserTopInfoPhoto {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.mainFormSideBarExpendor {
    color: #8991a9;
    position: relative;
    top: 0;
    right: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    font-size: 1rem;
    padding: 0;
}

.MainFormSideBarExpendedList {
    color: #8991a9;
    position: absolute;
    padding-top: 2rem;
    left: 3.4rem;
    top: 0rem;
    white-space: nowrap;
}

.MainFormSideBarListButton {
    position: relative;
    padding-left: 1rem;
    margin-top: 1rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    max-width: 2rem;
    max-height: 2rem;
    height: 48px;
    width: 48px;
}

.MainFormSideBarExpendedListName {
    color: #8991a9;
    position: absolute;
    left: 3rem;
    bottom: 0rem;
    font-weight: bold;
}

.ListTemplateFitlerPanel {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 6px;
    background: white;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    flex: none;
}

.ListTemplateFilterPanel {
}

.ListTemplateActionPanel {
    display: flex !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    flex-direction: row !important;
    background: white;
    gap: 1rem !important;
    align-items: center !important;
    width: 100% !important;
    padding-inline: 0.5rem;
    border-left: 1px solid #dfdfdf !important;
    border-right: 1px solid #dfdfdf !important;
    border-bottom: 1px solid #dfdfdf !important;
    border-radius: 0px;
    pointer-events: all;
    flex: none;
}

    .ListTemplateActionPanel svg:hover {
        cursor: pointer;
    }

.ListTemplateFitlerPanelButtons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 10px !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    height: 42px;
}

.FilterPanelSettings {
    align-items: center !important;
    display: flex;
    flex-direction: row;
    width: fit-content !important;
    gap: 1rem;
    justify-content: center;
    width: 3rem;
    height: 43px;
}

    .FilterPanelSettings button {
        height: 45px !important;
        width: fit-content !important;
    }

.CustomActionPanel {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.ListTemplateFilterFieldsPanel {
    display: flex;
    flex-direction: row;
    border: 1px solid #dfdfdf !important;
    position: relative;
    padding: 0.5rem;
    min-height: 60.83px;
    /* Never let the surrounding flex column (.ListFullContentWrapper, used when a ListFull is
       hosted directly inside a tab) shrink this panel down toward its one-row min-height — that
       squeezes the HidableFilters row out below the border. The grid below absorbs height. */
    flex-shrink: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.ListTemplateFilterSelectionPanel {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Filter "eye" (InnerFormFilterPanel): usable with a HidableFilters block, while hidden, or when
   the filters wrap past one line (FilterPanelOverflow.js sets data-filters-overflow). Hiding then
   also hides every filter below the first line (data-filter-overflow). */
.FilterPanelEyeWrap[data-has-hidable="0"] {
    opacity: 0.4;
    pointer-events: none;
}

.ListTemplateFilterFieldsPanel[data-filters-overflow] > .ListTemplateFilterFieldsPanelControlWrapper > .FilterPanelEyeWrap {
    opacity: 1;
    pointer-events: auto;
}

.ListTemplateFilterSelectionPanel.FiltersHidden [data-filter-overflow] {
    display: none !important;
}
/* A popup form stays 500-1300px wide on any screen, so its filter panel stacks the buttons under the
   fields as every panel does below 1600px - side by side, they squeeze the fields until icons cover dates. */
.inner-form-window:not(.page-form-window) .ListTemplateFilterFieldsPanel {
    flex-direction: column !important;
}

    .inner-form-window:not(.page-form-window) .ListTemplateFilterFieldsPanel .ListTemplateFilterFieldsPanelControlWrapper {
        width: 100%;
    }

.ListTemplateLeftPanel {
    position: relative;
    height: 100%;
}

    .ListTemplateLeftPanel .xtree {
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

/* Keep element scrollable but make scrollbars visually invisible */
.ListTemplateLeftPanelScroll {
    overflow: auto;
    max-height: 100%;
    -ms-overflow-style: auto; /* IE and Edge: keep scrolling */
    scrollbar-width: thin; /* Firefox: allow scrolling, make thin */
    scrollbar-color: transparent transparent; /* Firefox: make invisible */
}

    .ListTemplateLeftPanelScroll::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .ListTemplateLeftPanelScroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .ListTemplateLeftPanelScroll::-webkit-scrollbar-thumb {
        background-color: transparent; /* invisible thumb */
    }

.ListTemplateLeftPanelResize {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    background-color: white;
}

.xSpinEdit input {
    /*accent-color: #ced4da*/
    height: 40px;
    width: 100% !important;
    box-sizing: border-box;
    padding-top: 10px;
}

.xSpinEditRequired input {
    padding-left: 2px !important;
    text-indent: 0px !important;
    border-left: 2px solid #009efb !important;
    border-radius: 0.25rem !important;
}

.xTextEdit input {
    /*accent-color: #ced4da*/
    height: 40px;
    width: 100% !important;
    box-sizing: border-box;
    padding-top: 10px !important;
}

.XTextEditRequired input {
    text-indent: 0px !important;
    border-left: 2px solid #009efb !important;
    border-radius: 0.25rem !important;
}

.XDatePickerRequired input {
    padding-left: 2px !important;
    text-indent: 0px !important;
    border-left: 2px solid #009efb !important;
    border-radius: 0.25rem !important;
}

.XDateEdit input {
    padding-top: 10px !important;
    height: 40px;
    width: 100% !important;
    box-sizing: border-box;
}

.XDateEdit button {
    background-color: #20588a;
    height: 2.37rem !important;
    border-end-end-radius: 0.1rem !important
}

.dxbs-checkbox {
    width: 100%;
}

.GridDXCheckBox {
    width: 100%;
    align-items: center;
    justify-items: center;
    display: flex;
    justify-content: center
}

    .GridDXCheckBox.checkdisabled {
        pointer-events: none !important;
    }

.checkdisabled {
    pointer-events: none !important;
}

.ui_dxdatagrid-container {
    width: 100%;
    overflow-y: unset;
    border-radius: 6px !important;
    height: 100%;
}

.ui_dxtreelist-container {
    width: 100%;
    overflow-y: unset;
    height: 100%;
}

.ui_dxtreelist {
    height: 98%;
}

.ui_dxdatagrid {
    white-space: normal;
    line-height: 1.2;
    height: 98%;
    padding: 5px;
    text-align: center;
    visibility: visible;
    border: 0px !important;
    border-radius: 6px !important;
}

    .ui_dxdatagrid th,
    .ui_dxdatagrid td {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    .ui_dxdatagrid th {
        background-color: #f8f8f8;
    }

    .ui_dxdatagrid tbody tr:hover {
        background-color: #edf1f5 !important;
    }

    .ui_dxdatagrid .card {
        border-radius: 2px;
    }

.dxbs-scroll-viewer-content {
    overflow: auto;
}

.card-subtitle {
    font-size: 1.3rem;
    margin-bottom: 0.5rem !important;
}

.card-content-wrapper {
    padding: 1rem;
    padding-bottom: 0.5rem;
}

.inputcard-contentspannedgroup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding-left: 0rem !important;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    width: 100%;
}

.innerform-filterpanel {
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin-bottom: 0.5rem;
}

.innerform-filterpanelControls {
    align-items: start;
    display: flex;
    justify-content: center;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    flex-direction: row !important;
    gap: 0.5rem;
}

.innerform-filterpanelActions {
    align-items: start;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    width: 100%;
}

.innerform-filterpanelButtons {
    align-items: end;
    display: flex;
    justify-content: end;
    flex-direction: row !important;
    gap: 0.5rem;
    padding-left: 0.5rem;
}

.w-100-input input,
.w-100-input textarea,
.w-100-input dxbl-check,
.w-100-input dxbl-listbox {
    width: 100% !important;
}

.m-0-input input,
.m-0-input textarea,
.m-0-input dxbl-check,
.m-0-input dxbl-listbox {
    margin: 0 !important;
}

.input-card-component {
    display: block;
}

.ui_dxdatagrid th.dxbs-grid-checkbox-col {
    text-align: center !important;
}

.ui_position-topleft,
.ui_position-topright,
.ui_position-topcenter {
    top: 0;
}

.ui_position-bottomleft,
.ui_position-bottomright,
.ui_position-bottomcenter {
    bottom: 0;
}

.ui_appear_from_right {
    animation: toast_anim-slidein 0.1s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes ui_anim_appear_right {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes toast_anim-fadeout {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes toast_anim-slidein {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.ui_toast_fade {
    animation: toast_anim-fadeout 0.1s ease-in-out !important;
    animation-fill-mode: forwards;
}

.ui_toast {
    display: flex;
    flex-direction: column;
    animation: toast_anim-slidein 0.2s ease-in-out;
    animation-fill-mode: forwards;
    color: #fff;
}

.ui_toast-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 1100 !important;
    right: 1%;
    bottom: 1%;
}

    .ui_toast-container div:not(:last-child) {
        margin-bottom: 5px;
    }

.ui_toast-info {
    background-color: #34a9ad;
}

.ui_toast-success {
    background-color: #5fba7d;
}

.ui_toast-warning {
    background-color: #c1c13e;
}

.ui_toast-error {
    background-color: #ba5e5e;
}

.ui_toast-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.ui_toast-header {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    padding: 1rem 3rem 1rem 1rem;
}

    .ui_toast-header h5 {
        margin-bottom: 0;
    }

.ui_toast-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 100%;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    color: inherit;
    font-size: 1rem;
}

.ui_toast-message {
    position: relative;
    width: 100%;
    font-size: 0.8rem;
    overflow: hidden;
    padding: 1rem 3rem 1rem 1rem;
    word-break: break-all;
}

.ui_toast-history-button {
    right: 0;
    top: 50vh;
    width: 0.25rem;
    height: 5rem;
    border-radius: 0.25rem 0 0 0.25rem;
}

    .ui_toast-history-button:after {
        content: '';
        width: 1rem;
        height: 6rem;
        position: absolute;
        top: -0.5rem;
        right: 0;
    }

    .ui_toast-history-button:hover {
        width: 1rem;
    }

.ui_toast-history {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
    color: #fff;
}

.app_icon-button {
    color: #8991a9;
}

    .app_icon-button:hover {
        cursor: pointer;
    }

.app_icon-button-small {
    width: 1.5rem !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
    background-color: transparent;
    font-size: 1rem !important;
    padding: 0 !important;
}

    .app_icon-button-small:hover {
        cursor: pointer;
    }

.ui_icon-button-no-flex {
    width: 3rem;
    height: 100%;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    font-size: 1rem;
    padding: 0;
}

.ui_icon-button {
    width: 3rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    font-size: 1rem;
    padding: 0;
}

.ui_icon-button-small {
    width: 1.5rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    font-size: 1rem;
    padding: 0;
}

    .ui_icon-button-small:hover,
    .ui_icon-button:hover {
        cursor: pointer;
    }

.ui_icon-button-small-active,
.ui_icon-button-active {
    color: #009efb;
}

/* Expand-all/collapse-all buttons pinned to the top-left of a grouped ListFull grid,
   overlaying the DevExpress group panel strip (which has no template hook to render into). */
.listfull-group-actions {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 2.2rem;
    pointer-events: all;
}

    /* Square the buttons to their icon instead of the inherited height: 100% (which
       stretched them to the bar's 2.2rem height) so the global *:focus dotted outline
       hugs the visible button instead of a tall box around it. */
    .listfull-group-actions button {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 4px;
    }

/* Only reserve room for the buttons when ListFull actually renders them (a column is
   grouped) - .listfull-has-group-actions is toggled on the grid host div by ListFull.
   Reserving this space unconditionally left a dead gap in the "drag here to group" text
   whenever grouping was enabled but no column was grouped yet. */
.listfull-has-group-actions .dxbl-grid-group-panel-container {
    padding-left: 4rem !important;
}

.ui_spin {
    animation: 0.5s linear infinite ui_anim-spin;
}

@keyframes ui_anim-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ui_anim-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lds-ring {
    /* change color here */
    color: rgba(0, 0, 0, 0.91)
}

    .lds-ring,
    .lds-ring div {
        box-sizing: border-box;
    }

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    /* Fast loads never show the spinner: it fades in only if the load is still running after
       250 ms, so a click that completes in time reads as instant instead of "loading...". */
    opacity: 0;
    animation: lds-ring-appear 0.15s ease-in 250ms forwards;
}

@keyframes lds-ring-appear {
    to {
        opacity: 1;
    }
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 64px;
        height: 64px;
        margin: 8px;
        border: 8px solid currentColor;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: currentColor transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.ui_placeholder {
    color: #6c757d;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    left: -10px;
    top: 0.55rem !important;
    font-size: 12pt;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    user-select: none;
    width: 200px;
    margin: 0px !important;
    padding: 0px !important;
}

.red-border-xTextEdit {
    border: 1px solid red !important;
    border-left: 4px solid red !important;
}

.width-100 {
    width: 100%;
}

.NoLabelWrap label {
    text-wrap: nowrap !important;
}

.debug-info {
    font-size: 0.8em; /* Smaller font size */
    background-color: rgba(0, 0, 0, 0.1); /* Light grey background */
    color: rgba(0, 0, 0, 0.7); /* Dark grey text */
    padding: 5px; /* Padding around the text */
    border: 1px dashed rgba(0, 0, 0, 0.2); /* Optional dashed border */
    border-radius: 4px; /* Rounded corners */
    opacity: 0.8; /* Slightly reduced opacity */
    display: inline-block; /* Inline block to fit around text */
    font-family: monospace; /* Monospace font for debugging */
}

.debug-info-small {
    font-size: 0.5em; /* Smaller font size */
    background-color: rgba(0, 0, 0, 0.1); /* Light grey background */
    color: rgba(0, 0, 0, 0.7); /* Dark grey text */
    padding: 5px; /* Padding around the text */
    border: 1px dashed rgba(0, 0, 0, 0.2); /* Optional dashed border */
    border-radius: 4px; /* Rounded corners */
    opacity: 0.8; /* Slightly reduced opacity */
    display: inline-block; /* Inline block to fit around text */
    font-family: monospace; /* Monospace font for debugging */
}

.dxbl-checkbox-check-element {
    background-color: var(--action-primary) !important;
}

.dxbl-checkbox-unchecked .dxbl-checkbox-check-element {
    background-color: white !important;
}

.dxbl-tabs-item {
    width: fit-content;
}

.dxbl-grid-bottom-panel {
    height: fit-content !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 5px !important;
    padding-inline: 0.5rem !important;
}

/* The sticky tfoot (footer summary row, bottom:0, z-index:1) covers the custom horizontal
   scrollbar (absolute, bottom:0, z-index:1) when the grid is height-constrained inside a
   tab panel and vertical overflow forces the sticky footer to the visible bottom edge.
   Elevating the scrollbar to z-index:2 ensures it paints above the footer's compositing layer. */
.dxbl-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-hor-scroll-bar {
    z-index: 2 !important;
}

.dxbl-pager-active-page-btn {
    background-color: var(--action-primary) !important;
}


.dxbl-pager-page-size-selector {
    margin: 0 !important;
}

.dxbl-pager {
    margin: 0 !important;
}

.dxbl-grid-empty-row .dxbl-grid-empty-cell {
    border: none !important;
}

.MainFormTabFormat {
    max-height: 4rem !important;
    max-width: 400px !important;
    text-wrap: nowrap;
}

.dxbl-scroll-viewer-content ul li {
    margin-right: 2px;
}

.dxbl-tabs-item.dxbl-active {
    background-color: white !important;
    color: #5c5b5b !important;
    border: #dfdfdf 2px solid !important;
    border-bottom: none !important;
    cursor: pointer !important;
}

.dxbl-tabs-item:not(.dxbl-active) {
    background-color: #dedede !important;
    color: #5c5b5b !important;
    border: #dfdfdf 2px solid !important;
}

.dxbl-tabs-item.dxbl-active:hover {
    border: #757474 2px solid !important;
    border-bottom: none !important;
}

.dxbl-tabs-item:not(.dxbl-active):hover {
    border: #757474 2px solid !important;
}

.dxbl-tabs-tablist .dxbl-scroll-viewer-content {
    border: none;
    height: 2.4rem;
    overflow: hidden !important;
}

.dxbl-scroll-viewer-content ul {
    border-bottom: 6px solid #dfdfdf !important;
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after, .dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after {
    background-color: white !important;
}

.dxbl-tabs-item {
    border-left: solid 5px white !important;
}

.badge-primary {
    background-color: var(--action-primary);
    padding-right: 1.2rem !important;
}

.ui_badge-button {
    padding-inline: 0.5rem !important;
}

    .ui_badge-button svg:hover {
        cursor: pointer;
    }

.DisabledXTab {
    color: black;
    pointer-events: none;
    background-color: #9292923d;
}

.dxbl-tabs-item.DisabledXTab {
    background-color: #c8c8ce !important;
    border: none !important;
    color: #9c9ca6 !important;
}

.dxbl-grid {
    border-bottom: unset !important;
    border-right: unset !important;
    border-bottom-left-radius: unset !important;
    border-bottom-right-radius: unset !important;
}

.dxbl-grid-group-panel-container {
    height: fit-content !important;
    padding: 0 !important;
}

    .dxbl-grid-group-panel-container .dxbl-grid-header {
        margin: 0.5rem !important;
        margin-top: 0.2rem !important;
        padding: 0.2rem !important;
    }

.dxbl-grid-group-row {
    padding: 0rem !important;
    margin: 0rem !important;
}

    .dxbl-grid-group-row td {
        padding: 0rem !important;
        margin: 0rem !important;
    }

.dxbl-grid .dxbl-grid-table .dxbl-grid-expand-button-cell {
    padding: 0rem !important;
    height: 2rem;
}

.dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tbody > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > tfoot > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tfoot > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > thead > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > thead > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header) {
    padding: 0rem !important;
    padding-inline: 1rem !important;
    margin: 0rem !important;
    height: 2rem;
}

.dxbl-grid .dxbl-grid-table > tbody > tr:first-child > td {
    border-top-width: 0;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td:first-child, .dxbl-grid .dxbl-grid-table > tbody > tr > th:first-child:not(.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > tfoot > tr > td:first-child, .dxbl-grid .dxbl-grid-table > tfoot > tr > th:first-child:not(.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > thead > tr > td:first-child, .dxbl-grid .dxbl-grid-table > thead > tr > th:first-child:not(.dxbl-grid-bordered-left) {
    border-left-width: 0;
}

.dxbl-grid .dxbl-grid-table > tbody > tr:first-child > td {
    border-top-width: 0;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td:first-child, .dxbl-grid .dxbl-grid-table > tbody > tr > th:first-child, .dxbl-grid .dxbl-grid-table > tfoot > tr > td:first-child, .dxbl-grid .dxbl-grid-table > tfoot > tr > th:first-child, .dxbl-grid .dxbl-grid-table > thead > tr > td:first-child, .dxbl-grid .dxbl-grid-table > thead > tr > th:first-child {
    border-left-width: 0;
}

.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-group-footer-row > td > div[dxbl-grid-summary-item], .dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > td > div[dxbl-grid-summary-item], .dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-header-content > span {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tbody > tr > th, .dxbl-grid .dxbl-grid-table > tfoot > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > th, .dxbl-grid .dxbl-grid-table > thead > tr > td, .dxbl-grid .dxbl-grid-table > thead > tr > th {
    font-family: var(--dxbl-grid-font-family);
    font-size: var(--dxbl-grid-font-size);
    line-height: var(--dxbl-grid-line-height);
    border-color: inherit;
    border-style: inherit;
    border-width: 0;
    border-top-width: 0px;
    border-left-width: 0px;
    border-top-width: var(--dxbl-grid-border-width);
    border-left-width: var(--dxbl-grid-border-width);
    vertical-align: middle;
}

    .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-group-footer-row > td > div[dxbl-grid-summary-item], .dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > td > div[dxbl-grid-summary-item], .dxbl-grid .dxbl-grid-table > thead > tr > th, .dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-header-content > span {
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
    }

.dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tbody > tr > th, .dxbl-grid .dxbl-grid-table > tfoot > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > th, .dxbl-grid .dxbl-grid-table > thead > tr > td, .dxbl-grid .dxbl-grid-table > thead > tr > th {
    font-family: var(--dxbl-grid-font-family);
    font-size: var(--dxbl-grid-font-size);
    line-height: var(--dxbl-grid-line-height);
    border-color: inherit;
    border-style: inherit;
    border-width: 0;
    border-top-width: var(--dxbl-grid-border-width);
    border-left-width: var(--dxbl-grid-border-width);
    vertical-align: middle;
}

.dxbl-grid .dxbl-grid-empty-data-area {
    text-align: start !important;
}

.dxbl-scroll-viewer-vert-scroll-bar {
    right: 0px !important;
}

.dxbl-grid-header {
    height: fit-content !important;
}

.xtree {
    --spacing: 1.5rem;
    --radius: 10px;
    display: block !important; /* Aligns list items in a row */
    gap: 1.5rem; /* Adds spacing between each main list item */
    flex-wrap: nowrap !important;
    padding-left: 0 !important;
    margin: 0px;
    max-height: calc(100vh - 200px); /* Default max height for scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

    .xtree::-webkit-scrollbar {
        display: none; /* Chrome, Safari, and Opera */
    }

    .xtree.h-100 {
        height: 100%;
        max-height: 100%;
    }

    .xtree summary {
        list-style-type: none !important;
    }

    .xtree .TopLiParent {
        padding-left: 0 !important;
    }

        .xtree .TopLiParent > * {
        }

    .xtree .LiChildren {
        border-left: 1px dashed #ddd !important;
    }

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

        .xtree .TreeListLineDiv:hover {
            background-color: #f8f8f8;
        }

        .xtree .TreeListLineDiv:focus {
            outline: none !important;
        }

        .xtree .TreeListLineDiv.selected {
            font-weight: bold !important;
        }

    .xtree summary:focus {
        outline: none !important;
    }

    .xtree li {
        display: block !important;
        position: relative !important;
        padding-left: calc(2 * var(--spacing) - var(--radius) - 25px);
        text-align: left;
        border-radius: 0px !important;
        margin-left: 0.8rem !important;
    }

    .xtree ul {
        margin-left: calc(var(--radius) - var(--spacing));
        padding-left: 0 !important;
        display: contents !important;
    }

        .xtree ul li {
            border-left: 1px solid #ddd;
        }

            .xtree ul li:hover {
                background-color: transparent; /* Ensures sub-items do not change background on hover */
            }

            .xtree ul li:last-child {
                border-color: transparent;
            }

.InnerFormSkeletonConnected {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .InnerFormSkeletonConnected i {
        padding: 1rem;
        border: 1px solid #dfdfdf;
        border-radius: .25rem;
        margin-bottom: 1rem !important;
        width: 2rem;
        min-height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.InnerFormSkeletonContent {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.MainFormTabFormat.DasboardPanelTab {
    width: 5rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mfDashboardTab {
    position: revert !important;
    top: 2px !important;
    right: 2px !important;
    margin-left: 15px !important;
    cursor: pointer !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16pt !important;
    margin: 0 !important;
}

.DashboardPanel {
    width: calc(100vw - 5rem);
    height: 100% !important;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1.25rem;
    background: #eceff3;
}

    /* Dashboard grid spacing */
    .DashboardPanel .inputcard-contentspannedgroup {
        gap: 1.25rem;
    }

.left1 {
    padding-left: 15px;
}

.left2 {
    padding-left: 30px;
}

.left3 {
    padding-left: 45px;
}

.left4 {
    padding-left: 60px;
}

.left5 {
    padding-left: 75px;
}

.menu-item-selected {
    background-color: #d5d8db;
}

.grid-context-menu-item-full-expand,
.grid-context-menu-item-full-collapse,
.grid-context-menu-item-sort-ascending,
.grid-context-menu-item-sort-descending,
.grid-context-menu-item-group-by-column,
.grid-context-menu-item-ungroup-column,
.grid-context-menu-item-clear-grouping,
.grid-context-menu-item-show-group-panel,
.grid-context-menu-item-hide-column,
.grid-context-menu-item-column-chooser,
.grid-context-menu-item-fix-column-left,
.grid-context-menu-item-fix-column-right,
.grid-context-menu-item-unfix-column,
.grid-context-menu-item-clear-filter,
.grid-context-menu-item-expand-row,
.grid-context-menu-item-collapse-row,
.grid-context-menu-item-expand-detail-row,
.grid-context-menu-item-collapse-detail-row,
.grid-context-menu-item-new-row,
.grid-context-menu-item-edit-row,
.grid-context-menu-item-delete-row {
    width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat;
    background-color: gray;
}

.dropdown-item:active .grid-context-menu-item-full-expand,
.dropdown-item:active .grid-context-menu-item-full-collapse,
.dropdown-item:active .grid-context-menu-item-sort-ascending,
.dropdown-item:active .grid-context-menu-item-sort-descending,
.dropdown-item:active .grid-context-menu-item-group-by-column,
.dropdown-item:active .grid-context-menu-item-ungroup-column,
.dropdown-item:active .grid-context-menu-item-clear-grouping,
.dropdown-item:active .grid-context-menu-item-show-group-panel,
.dropdown-item:active .grid-context-menu-item-hide-column,
.dropdown-item:active .grid-context-menu-item-column-chooser,
.dropdown-item:active .grid-context-menu-item-fix-column-left,
.dropdown-item:active .grid-context-menu-item-fix-column-right,
.dropdown-item:active .grid-context-menu-item-unfix-column,
.dropdown-item:active .grid-context-menu-item-clear-filter,
.dropdown-item:active .grid-context-menu-item-expand-row,
.dropdown-item:active .grid-context-menu-item-collapse-row,
.dropdown-item:active .grid-context-menu-item-expand-detail-row,
.dropdown-item:active .grid-context-menu-item-collapse-detail-row,
.dropdown-item:active .grid-context-menu-item-new-row,
.dropdown-item:active .grid-context-menu-item-edit-row,
.dropdown-item:active .grid-context-menu-item-delete-row {
    background-color: white;
}

.dropdown-item.disabled .grid-context-menu-item-full-expand,
.dropdown-item.disabled .grid-context-menu-item-full-collapse,
.dropdown-item.disabled .grid-context-menu-item-sort-ascending,
.dropdown-item.disabled .grid-context-menu-item-sort-descending,
.dropdown-item.disabled .grid-context-menu-item-group-by-column,
.dropdown-item.disabled .grid-context-menu-item-ungroup-column,
.dropdown-item.disabled .grid-context-menu-item-clear-grouping,
.dropdown-item.disabled .grid-context-menu-item-show-group-panel,
.dropdown-item.disabled .grid-context-menu-item-unfix-column,
.dropdown-item.disabled .grid-context-menu-item-clear-filter,
.dropdown-item.disabled .grid-context-menu-item-expand-row,
.dropdown-item.disabled .grid-context-menu-item-collapse-row,
.dropdown-item.disabled .grid-context-menu-item-expand-detail-row,
.dropdown-item.disabled .grid-context-menu-item-collapse-detail-row,
.dropdown-item.disabled .grid-context-menu-item-new-row,
.dropdown-item.disabled .grid-context-menu-item-edit-row,
.dropdown-item.disabled .grid-context-menu-item-delete-row {
    background-color: #c3c2c2;
}

.grid-context-menu-item-full-expand {
    mask-image: url(/Images/icons/full-expand.svg);
    -webkit-mask-image: url(/Images/icons/full-expand.svg);
}

.grid-context-menu-item-full-collapse {
    mask-image: url(/Images/icons/full-collapse.svg);
    -webkit-mask-image: url(/Images/icons/full-collapse.svg);
}

.grid-context-menu-item-sort-ascending {
    mask-image: url(/Images/icons/sort-ascending.svg);
    -webkit-mask-image: url(/Images/icons/sort-ascending.svg);
}

.grid-context-menu-item-sort-descending {
    mask-image: url(/Images/icons/sort-descending.svg);
    -webkit-mask-image: url(/Images/icons/sort-descending.svg);
}

.grid-context-menu-item-group-by-column {
    mask-image: url(/Images/icons/group-by-column.svg);
    -webkit-mask-image: url(/Images/icons/group-by-column.svg);
}

.grid-context-menu-item-ungroup-column {
    mask-image: url(/Images/icons/ungroup-column.svg);
    -webkit-mask-image: url(/Images/icons/ungroup-column.svg);
}

.grid-context-menu-item-clear-grouping {
    mask-image: url(/Images/icons/clear-grouping.svg);
    -webkit-mask-image: url(/Images/icons/clear-grouping.svg);
}

.grid-context-menu-item-show-group-panel {
    mask-image: url(/Images/icons/show-group-panel.svg);
    -webkit-mask-image: url(/Images/icons/show-group-panel.svg);
}

.grid-context-menu-item-hide-column {
    mask-image: url(/Images/icons/hide-column.svg);
    -webkit-mask-image: url(/Images/icons/hide-column.svg);
}

.grid-context-menu-item-column-chooser {
    mask-image: url(/Images/icons/column-chooser.svg);
    -webkit-mask-image: url(/Images/icons/column-chooser.svg);
}

.grid-context-menu-item-fix-column-left {
    mask-image: url(/Images/icons/fix-column-left.svg);
    -webkit-mask-image: url(/Images/icons/fix-column-left.svg);
}

.grid-context-menu-item-fix-column-right {
    mask-image: url(/Images/icons/fix-column-right.svg);
    -webkit-mask-image: url(/Images/icons/fix-column-right.svg);
}

.grid-context-menu-item-unfix-column {
    mask-image: url(/Images/icons/unfix-column.svg);
    -webkit-mask-image: url(/Images/icons/unfix-column.svg);
}

.grid-context-menu-item-clear-filter {
    mask-image: url(/Images/icons/clear-filter.svg);
    -webkit-mask-image: url(/Images/icons/clear-filter.svg);
}

.grid-context-menu-item-expand-row {
    mask-image: url(/Images/icons/expand-row.svg);
    -webkit-mask-image: url(/Images/icons/expand-row.svg);
}

.grid-context-menu-item-collapse-row {
    mask-image: url(/Images/icons/collapse-row.svg);
    -webkit-mask-image: url(/Images/icons/collapse-row.svg);
}

.grid-context-menu-item-expand-detail-row {
    mask-image: url(/Images/icons/expand-detail-row.svg);
    -webkit-mask-image: url(/Images/icons/expand-detail-row.svg);
}

.grid-context-menu-item-collapse-detail-row {
    mask-image: url(/Images/icons/collapse-detail-row.svg);
    -webkit-mask-image: url(/Images/icons/collapse-detail-row.svg);
}

.grid-context-menu-item-new-row {
    mask-image: url(/Images/icons/new-row.svg);
    -webkit-mask-image: url(/Images/icons/new-row.svg);
}

.grid-context-menu-item-edit-row {
    mask-image: url(/Images/icons/edit-row.svg);
    -webkit-mask-image: url(/Images/icons/edit-row.svg);
}

.grid-context-menu-item-delete-row {
    mask-image: url(/Images/icons/delete-row.svg);
    -webkit-mask-image: url(/Images/icons/delete-row.svg);
}

.grid-context-menu-item-filter-row,
.grid-context-menu-item-footer {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

.menu-item-selected .grid-context-menu-item-filter-row,
.menu-item-selected .grid-context-menu-item-footer {
    background-color: gray;
}

.menu-item-selected.dropdown-item:active .grid-context-menu-item-filter-row,
.menu-item-selected.dropdown-item:active .grid-context-menu-item-footer {
    background-color: white;
}

.menu-item-selected .grid-context-menu-item-filter-row,
.menu-item-selected .grid-context-menu-item-footer {
    mask-image: url(/Images/icons/item-checked.svg);
    -webkit-mask-image: url(/Images/icons/item-checked.svg);
}

.--dxbl-context-menu-item-focus-outline-color {
}

.list-settings-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 2rem;
    padding-inline: 3rem
}

    .list-settings-items .bi:hover {
        cursor: pointer;
    }

    .list-settings-items .bi.active path {
        stroke: black;
        stroke-width: 1;
    }

.gridIcon:hover {
    cursor: pointer;
}

/* Grid "new object" button: both the add-icon and the loading spinner are always in the
   DOM; CSS swaps them so the spinner can appear the instant the button is clicked (a plain
   onmousedown handler adds .is-loading client-side, with no Blazor server round-trip). The
   Blazor _isOpeningNewForm flag also drives .is-loading so it stays in sync and is removed
   again if opening is cancelled. */
/* Two-class selector so this beats Bootstrap's `.spinner-border { display:inline-block }`
   (equal specificity would let Bootstrap win by load order and show the spinner always). */
.grid-new-icon .grid-new-spinner {
    display: none;
}

.grid-new-icon.is-loading .grid-new-spinner {
    display: inline-block;
}

.grid-new-icon.is-loading .grid-new-svg {
    display: none;
}

.listsettings-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.listsettings-footer-divider {
    border-top: 1px solid #dfdfdf;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.dxbl-tabs-content-panel {
    margin-top: 0.5rem !important;
}

/* An inactive DevExpress tab panel is moved off-screen (position: absolute at -10000px) but stays
   laid out, with a content-driven height. Grids inside it then oscillate: the scroll viewer toggles
   its vertical scrollbar and the table its no-scroll class every frame, forever, which kept the main
   thread ~70% busy while a form with such a tab sat idle. A height that doesn't depend on the content
   ends the loop (!important: the DevExpress theme's own rule for the panel wins otherwise). */
.dxbl-tabs-content:not(.dxbl-active) {
    height: 100% !important;
}

/* Positioned host so the loader can overlay the grid. Takes over the flex role the
   content wrapper used to play in the parent column, so the layout chain is unchanged. */
.ListFullLoadHost {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Loader sits on top of the (laid-out but transparent) grid while it loads and autofits,
   so the user never sees columns jerk from their default widths into the fitted layout. */
.ListFullLoadOverlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* A reload of a list that is already shown: the rows stay visible under this layer, which only
   catches the clicks at first; once the load has taken 250 ms it whitens them and the ring fades
   in (its own 250 ms delay, see .lds-ring). The ring sits in the middle of a short list and near
   the top of a long one, where it can be seen. */
.ListFullLoadOverlay.ListFullLoadOverlayOverRows {
    display: block;
    background-color: rgba(255, 255, 255, 0);
    animation: ListFullLoadVeil 0.15s ease-in 250ms forwards;
}

    .ListFullLoadOverlayOverRows .lds-ring {
        position: absolute;
        left: 50%;
        top: min(50%, 160px);
        transform: translate(-50%, -50%);
    }

@keyframes ListFullLoadVeil {
    to {
        background-color: rgba(255, 255, 255, 0.6);
    }
}

/* A load's rows waiting in their list for the fit that is going to move them (ListFullFitHold in
   ListFull.js): laid out, so the fit measures them, but not painted until the fitted widths are in.
   The frame around them - filters, header, pager - stays. */
[data-terra-rows-held] .dxbl-grid-table > tbody,
[data-terra-rows-held] .dxbl-grid-table > tfoot {
    visibility: hidden;
}

.ListFullContentWrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ListFullWrapper {
    display: flex;
    flex-direction: row;
    border: 1px solid #dfdfdf;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 0px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: clip;
    min-height: 0;
}

    .ListFullWrapper > .dxbl-splitter-pane {
        min-height: 0;
    }

/*#region List statistics strip (ListStatsPanel: between the action panel and the grid, same frame;
  count blocks in white boxes, then the grid's own state badges with their row counts) */

.list-stats-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: #f8f8f8;
    border-left: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    flex: none;
    pointer-events: all;
    overflow: hidden;
}

.list-stats-tile {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 0.1875rem 0.75rem;
    background: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    flex: none;
}

.list-stats-tile-caption {
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    color: #6c757d;
    white-space: nowrap;
}

.list-stats-tile-value {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: #2b2f3a;
    white-space: nowrap;
}

    .list-stats-tile-value.list-stats-danger {
        color: #bd2130;
    }

.list-stats-tile-extra {
    font-size: 11px;
    font-weight: 400;
    color: #6c757d;
    margin-left: 0.375rem;
}

.list-stats-divider {
    width: 1px;
    height: 2rem;
    background: #dfdfdf;
    margin: 0 0.25rem 0 0.5rem;
    flex: none;
}

.list-stats-states {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-left: 0.5rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    white-space: nowrap;
    font-size: 0.75rem;
}

.list-stats-total {
    color: #6c757d;
    flex: none;
}

    .list-stats-total b {
        color: #2b2f3a;
    }

.list-stats-state {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
}

.list-stats-badge {
    padding: 2px 5px;
    border-radius: 3px;
    color: #212529;
}

/*#endregion*/

/*#region ButtonDropdown*/

.ButtonDropdown {
    display: flex;
    flex-direction: row;
    height: 2rem;
    border: 1px solid #dfdfdf;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    user-select: none !important;
    position: relative;
}

    .ButtonDropdown p {
        margin: 0px !important;
        padding: 0px !important;
    }

    .ButtonDropdown .ButtonDropdownSide {
        white-space: nowrap !important;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0.5rem;
    }

        .ButtonDropdown .ButtonDropdownSide .BtnDropDownInvokerHolder {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

.ButtonDropdownSide.OneClickAction {
    width: 100%;
}

.ButtonDropdownSide.MultipleSelectionAction {
    width: fit-content;
}

.ButtonDropdownSide.OneClickAction.Active {
    color: var(--action-primary);
}

.ButtonDropdownSide.OneClickAction.StaticOneClickAction:hover {
    cursor: default;
    user-select: none;
    background-color: white;
}

.ButtonDropdown svg:hover {
    cursor: pointer;
    user-select: none;
}

.ButtonDropdownSide:hover {
    background-color: #f0f0f0;
    color: #000;
    cursor: pointer;
    border-radius: 6px;
}

/*#region ButtonDropdownGreen*/
.ButtonDropdownGreen {
    border: 1px solid #00693E;
    color: #00693E;
}

.ButtonDropdownSide.OneClickAction.ButtonDropdownSideGreen.StaticOneClickAction:hover {
    color: #00693E;
}

.ButtonDropdownSideGreen:hover {
    background-color: #00693E !important;
    color: white;
    border-radius: 4px;
}
/*#endregion */

/* Blocks all pointer interaction on a ButtonDropdown (both the one-click side and the
   dropdown arrow) while Disabled - e.g. the Save button during an in-flight save. */
.ButtonDropdownDisabled {
    opacity: 0.55;
}

    .ButtonDropdownDisabled .ButtonDropdownSide {
        pointer-events: none !important;
        cursor: default !important;
    }

/*#region InnerFormSavePanel saving indicator*/
.InnerFormSavePanelSavingIndicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.InnerFormSavePanelSpinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-color: currentColor transparent transparent transparent;
    border-radius: 50%;
    animation: InnerFormSavePanelSpin 0.8s linear infinite;
}

@keyframes InnerFormSavePanelSpin {
    to {
        transform: rotate(360deg);
    }
}
/*#endregion */

/*#region ButtonDropdownBlue*/
.ButtonDropdownBlue {
    border: 1px solid var(--action-primary);
    color: var(--action-primary);
}

.ButtonDropdownSide.OneClickAction.ButtonDropdownSideBlue.StaticOneClickAction:hover {
    color: var(--action-primary);
}

.ButtonDropdownSideBlue:hover {
    color: white;
    background-color: var(--action-primary);
    border-radius: 4px;
}
/*#endregion */
/*#endregion */

.ListFullSummaryContent {
    padding-inline: 1rem;
    border: 1px solid #dfdfdf;
}

.custom-tooltip-wrapper {
    display: flex; /* Removed position: relative */
}

.custom-tooltip {
    position: fixed; /* Changed from absolute to fixed */
    visibility: hidden;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.2s ease-in-out;
    z-index: 9999;
    pointer-events: none;
}

.pLink {
    color: var(--action-primary);
    text-decoration: underline;
    font-size: 0.76rem;
    white-space: nowrap;
    margin: 0;
    margin-inline: 5px;
}

    .pLink:hover {
        cursor: pointer;
    }

/*#region Search history (per-page filter-panel popup + the global "My history" form) */
/* Both surfaces used to be raw Bootstrap (form-control / btn-outline-*, 1.05em type), which read
   as a foreign dialog next to the rest of the app. These rules re-express them in the system's own
   language: 2rem controls, 1px #dfdfdf borders, 6px radius, #f8f8f8 section headers, #edf1f5 row
   hover, var(--action-primary) as the only accent - i.e. the same tokens .ButtonDropdown,
   .ListTemplateFilterFieldsPanel and .ui_dxdatagrid already use. */
.SearchHistoryWindow .dxbl-window-header,
.ExportFieldsWindow .dxbl-window-header {
    background-color: #f8f8f8;
    border-bottom: 1px solid #dfdfdf;
    font-size: 0.85rem;
}

.SearchHistoryWindow .dxbl-window-body {
    padding: 0 !important;
}

/* The grid export field picker reuses this popup's toolbar/list look; its list is one checkbox per line.
   Its body sits beside the window header, so it takes the remaining height instead of 100%. */
.ExportFieldsWindow .SearchHistoryContent {
    flex: 1;
    min-height: 0;
    height: auto;
}

.ExportFieldsList {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 0;
    padding: 0.5rem;
}

.SearchHistoryContent {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: #2b2f3a;
}

/* Same framing as the list pages' own filter panel, so the popup reads as "a filter panel plus a
   list" rather than as a differently-styled dialog. */
.SearchHistoryToolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.5rem;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    background-color: #fff;
}

.SearchHistoryToolbarSpacer {
    flex: 1;
}

.SearchHistoryInput,
.SearchHistorySelect {
    height: 2rem;
    padding-inline: 0.5rem;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    background-color: #fff;
    color: #2b2f3a;
    font-size: 0.8rem;
    outline: none;
}

.SearchHistoryInput {
    flex: 1;
    min-width: 0;
}

.SearchHistorySelect {
    width: auto;
    cursor: pointer;
}

    .SearchHistoryInput:focus,
    .SearchHistorySelect:focus {
        border-color: var(--action-primary);
    }

.SearchHistoryButton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2rem;
    padding-inline: 0.75rem;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    background-color: #fff;
    color: #2b2f3a;
    font-size: 0.8rem;
    white-space: nowrap;
    user-select: none;
}

    .SearchHistoryButton:hover:not(:disabled) {
        background-color: #f0f0f0;
        cursor: pointer;
    }

    .SearchHistoryButton:disabled {
        opacity: 0.5;
    }

    /* Toggled-on state of the date-range button - accent outline, filling on hover, exactly like
       .xbutton[role="Filter"] / .ButtonDropdownSideBlue. */
    .SearchHistoryButton.Active {
        border-color: var(--action-primary);
        color: var(--action-primary);
    }

        .SearchHistoryButton.Active:hover:not(:disabled) {
            background-color: var(--action-primary);
            border-color: var(--action-primary);
            color: #fff;
        }

    .SearchHistoryButton.Danger {
        color: #bd2130;
    }

        .SearchHistoryButton.Danger:hover:not(:disabled) {
            background-color: #bd2130;
            border-color: #bd2130;
            color: #fff;
        }

.SearchHistoryList {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    background-color: #fff;
}

/* Sticky day separator, styled like a grid header row. */
.SearchHistoryGroupHeader {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.375rem 0.5rem;
    background-color: #f8f8f8;
    border-bottom: 1px solid #dfdfdf;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 600;
}

.SearchHistoryRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

    .SearchHistoryRow:hover {
        background-color: #edf1f5;
    }

.SearchHistoryRowMain {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.SearchHistoryRowTime {
    color: var(--action-primary);
    font-size: 0.7rem;
    margin-bottom: 0.125rem;
}

.SearchHistoryRowCaption {
    color: #2b2f3a;
    font-weight: 600;
    line-height: 1.3;
}

.SearchHistoryRowSummary {
    color: #2b2f3a;
    line-height: 1.3;
}

.SearchHistoryRowSub {
    color: #6c757d;
    font-size: 0.75rem;
    margin-top: 0.125rem;
    line-height: 1.3;
}

.SearchHistoryRowDelete {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    color: #6c757d;
    cursor: pointer;
}

    .SearchHistoryRowDelete:hover {
        background-color: #bd2130;
        color: #fff;
    }

.SearchHistoryEmpty {
    padding: 1rem 0.5rem;
    color: #6c757d;
}
/*#endregion */
/*
* {
    outline: solid 1px red;
}
*/

.resize-drag {
    touch-action: none;
    box-sizing: border-box;
}

.ui_calendar .text-truncate {
    user-select: none;
}

.ui_calendar_table td, th {
    user-select: none;
}

*:focus {
    outline: 1px dotted var(--action-primary) !important;
    box-shadow: none !important;
}

dxbl-date-edit .dxbl-btn-group {
    display: none;
}

.LanguageSelectorLogin {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.MainFormTabsLoaderContrainer {
    position: absolute;
    z-index: 900;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 100vw;
    background-color: white;
}

    .MainFormTabsLoaderContrainer .lds-ring {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.ListTemplateLoaderContrainer {
    position: absolute;
    z-index: 300;
    height: calc(100vh - 100px);
    width: 100%;
    background-color: white;
    pointer-events: auto;
}

    .ListTemplateLoaderContrainer .lds-ring {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.InputTranslationIcon {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
}

.app-connected-user-list-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.app-connected-user-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.app-connected-user-icon {
    margin-bottom: 1rem;
    height: 2rem;
    border: 1px solid #dfdfdf;
    border-radius: .25rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    min-height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Single shared panel for the whole avatar stack - hovering anywhere over the group
   (not each individual bubble) reveals everyone currently viewing at once. */
.app-connected-user-summary {
    position: absolute;
    left: -210px;
    width: 200px;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    background-color: white;
    padding: .5rem;
    top: 0px;
    display: none;
    flex-direction: column;
    gap: .25rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.08) 0px 1px 3px;
}

.app-connected-user-list-wrapper:hover > .app-connected-user-summary {
    display: flex;
}

.app-connected-user-summary-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c757d;
    padding: 0 .25rem .25rem;
    border-bottom: 1px solid #eee;
    margin-bottom: .1rem;
}

.app-connected-user-summary-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: 220px;
    overflow-y: auto;
}

.app-connected-user-summary-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .15rem .25rem;
    border-radius: 4px;
    cursor: pointer;
}

.app-connected-user-summary-row:hover {
    background-color: #f5f5f5;
}

.app-connected-user-content-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-connected-user-content-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-connected-user-avatar {
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    white-space: nowrap;
}

/* Phase 3 live co-edit: small circular badge with the editing user's initials, in that user's
   colour, pinned to the top-right of the control they are editing. */
.coedit-user-badge {
    position: absolute;
    top: -7px;
    right: -5px;
    z-index: 20;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    opacity: 0.9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    white-space: nowrap;
}

/* Header stack of users currently editing this record (overlapping circular avatars). */
.coedit-editor-stack {
    padding-left: 4px;
}

.coedit-editor-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -6px;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg, #fff);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: default;
    white-space: nowrap;
}

.coedit-editor-avatar:first-child {
    margin-left: 0;
}

.LanguageDialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 300;
}

/* SIDEBAR */

.app_a_sidebar {
    position: fixed;
    left: 0;
    width: 16rem;
    height: 100vh;
    padding-top: 3rem;
    z-index: 900;
    overflow-y: auto;
    overflow-x: hidden;
}

    .app_a_sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .app_a_sidebar::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
    }

    .app_a_sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

        .app_a_sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

.app_a_collapse .app_a_sidebar {
    width: 3rem;
    height: 3rem;
}

.app_a_sidebar .app_a_top-row {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    display: flex;
    background-color: rgba(0, 0, 0, 0.4);
}

.app_a_collapse .app_a_sidebar .app_a_top-row {
    padding: 0;
}

.app_a_uncollapse-nav {
    display: none !important;
}

.app_a_collapse-nav {
    display: flex !important;
}

.app_a_collapse .app_a_uncollapse-nav {
    display: flex !important;
}

.app_a_collapse .app_a_collapse-nav {
    display: none !important;
}

.app_a_sidebar .nav {
    width: 100%;
    overflow-y: auto;
}

.app_a_sidebar .app_a_top-row .app_a_navbar-toggler {
    color: #009efb;
    position: absolute;
    top: 0;
    right: 0;
}

.app_a_sidebar .nav .nav-item {
    width: 100%;
}

    .app_a_sidebar .nav .nav-item .nav-link {
        position: relative;
        color: #8991a9;
        min-height: 3rem;
        display: flex;
        align-items: center;
        font-weight: 500;
    }

.nav-item .app_icon-button {
    position: absolute;
    top: 0;
    right: 0;
}

.app_a_sidebar .nav .nav-item .nav-link.active,
.app_a_sidebar .nav .nav-item .nav-link:hover {
    color: #FFF;
}

@media (min-width: 768px) {
    /* SIDEBAR */

    .app_a_collapse .app_a_sidebar {
        width: 16rem;
        height: 100vh;
        left: -14rem !important;
    }

        .app_a_collapse .app_a_sidebar .app_a_top-row {
            padding: 0rem;
        }

    .app_a_sidebar .app_a_top-row {
        padding: 0rem;
    }

    .app_a_component-sidebar-content {
        padding-right: 2.5rem;
    }

    .app_a_component-sidebar-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 2rem;
    }

    /* SIDEBAR */
}

/* Sidebar menu styles */

.app_a_collapse #app_sidebar {
    display: none;
}

/* MENU */
@media (min-width: 768px) {
    .app_a_collapse #app_sidebar {
        display: unset;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

.app_a_collapse #app_sidebar > .app_menu-item > .app_menu-link-expandable .app_menu-link-text::after {
    display: none;
}

.app_menu-item-expanded > .app_menu-link-expandable .app_menu-link-text:after {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
}

.app_menu-link-expandable .app_menu-link-text:after {
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color: #8991a9;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 3.5rem;
}

.app_menu-item .app_sub-menu {
    display: none;
    padding-left: 0.5rem;
    flex-direction: row;
    align-content: flex-start;
}

.app_menu-item.app_menu-item-expanded > .app_sub-menu {
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
}

.app_menu-item {
    cursor: pointer;
    z-index: 1;
}

.app_menu-link-text {
    padding-right: 3rem;
    word-break: break-word !important;
}

.app_a_collapse #app_sidebar > li.app_menu-item > .app_sub-menu {
    display: none;
}

.app_a_collapse #app_sidebar > li.app_menu-item {
}

    .app_a_collapse #app_sidebar > li.app_menu-item:hover > .app_menu-link {
        background: black;
    }

        .app_a_collapse #app_sidebar > li.app_menu-item:hover > .app_menu-link > .app_menu-link-text {
            position: fixed;
            left: 3rem;
            background: black;
            width: 16rem;
            height: 3rem;
            line-height: 3rem;
        }

    .app_a_collapse #app_sidebar > li.app_menu-item:hover > ul.app_sub-menu {
        display: block !important;
        position: fixed;
        left: 3rem;
        background: #41434a;
        width: 16rem;
        padding-left: 0rem;
        overflow-y: auto;
        overflow-x: hidden;
    }

        .app_a_collapse #app_sidebar ul.app_sub-menu > li {
            display: block !important;
            width: 100%;
        }

        .app_a_collapse #app_sidebar ul.app_sub-menu::-webkit-scrollbar {
            width: 10px;
        }

        .app_a_collapse #app_sidebar ul.app_sub-menu::-webkit-scrollbar-track {
            background: #2c2e33;
        }

        .app_a_collapse #app_sidebar ul.app_sub-menu::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

            .app_a_collapse #app_sidebar ul.app_sub-menu::-webkit-scrollbar-thumb:hover {
                background: #aaa;
            }

    /* Nested groups inside the collapsed-sidebar popup expand in place,
       downward in the same flyout. Only the top-level hovered group flies
       out from the sidebar. */
    .app_a_collapse #app_sidebar li.app_menu-item ul.app_sub-menu li.app_menu-item.app_menu-item-expanded > ul.app_sub-menu {
        display: block;
        position: static;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        padding-left: 0.5rem;
        overflow: visible;
    }

    .app_a_collapse #app_sidebar > li.app_menu-item:hover > .app_menu-link:after {
        content: "";
        height: 100vh;
        width: 16rem;
        position: fixed;
        background: #41434a;
        opacity: 0.8;
        top: 0;
        z-index: -1;
        left: 3rem;
    }

/* MENU*/

/* SIDEBAR */

.ui_input-text-container {
    height: 2.5rem !important;
}

.ui_input-container.ui_input-fill label.ui_input-label, .ui_input-container.ui_input-focus label.ui_input-label, .ui_input-container.ui_select-selected label.ui_input-label {
    transform: translateY(-60%) translateX(-20%) scale(0.6) !important
}

.app_xcalendar_timerow {
    display: flex;
    flex-direction: row;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.app_xcalendar_timeholder {
    display: flex;
    flex-direction: row;
    justify-content: left;
    flex-grow: 1;
    align-items: center;
}

.app_xcalendar_btnnowholder {
}

.TemplateReport {
    position: fixed;
    top: 1rem;
    left: 4rem;
    width: calc(100vw - 5rem);
    height: calc(100vh - 2rem) !important;
    border-radius: 6px !important;
    z-index: 10;
    background-color: white !important;
    overflow: auto;
}

    .TemplateReport .dxbrv-wrapper {
        height: 100% !important;
    }

    .TemplateReport .dxbl-treeview-items-container {
        height: fit-content;
    }

    .TemplateReport .dxbl-scroll-viewer-content ul {
        height: fit-content;
    }

    .TemplateReport .dx-blazor-reporting {
        height: calc(100vh - 4rem) !important;
    }

    .TemplateReport .dxbrv-wrapper {
        border: none;
    }

    .TemplateReport .TemplateReportHeader {
        display: flex;
        justify-content: end;
        align-items: center;
        padding-right: 1rem;
    }

.DashboardPanelItem {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-height: 360px;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

    /* Charts fill the card */
    .DashboardPanelItem > * {
        width: 100%;
    }

@media only screen and (max-width: 1600px) {
    .ListTemplateFilterFieldsPanel {
        flex-direction: column !important;
    }

    /* Scoped: only expand the wrapper to full width when inside the standard column-direction panel */
    .ListTemplateFilterFieldsPanel .ListTemplateFilterFieldsPanelControlWrapper {
        width: 100%;
    }

    /* Filter panel: step down multi-column outer groups only (ColumnCount=1 stays full-width) */
    .ListTemplateFilterSelectionPanel > [data-column-count="3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ListTemplateFilterSelectionPanel > [data-column-count="4"],
    .ListTemplateFilterSelectionPanel > [data-column-count="5"],
    .ListTemplateFilterSelectionPanel > [data-column-count="6"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Form cards: step 3-col → 2-col, 4-col → 2-col, 5/6-col → 3-col at ~125% zoom */
    .card-content-wrapper [data-column-count="3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .card-content-wrapper [data-column-count="4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .card-content-wrapper [data-column-count="5"],
    .card-content-wrapper [data-column-count="6"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .DashboardPanel .inputcard-contentspannedgroup {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

@media only screen and (max-width: 1200px) {
    .ListTemplateFilterFieldsPanel {
        flex-direction: column !important;
    }

    /* Scoped: only expand the wrapper to full width when inside the standard column-direction panel */
    .ListTemplateFilterFieldsPanel .ListTemplateFilterFieldsPanelControlWrapper {
        width: 100%;
    }

    /* Filter panel: further collapse at this breakpoint */
    .ListTemplateFilterSelectionPanel > [data-column-count="2"],
    .ListTemplateFilterSelectionPanel > [data-column-count="3"] {
        grid-template-columns: 1fr !important;
    }

    .ListTemplateFilterSelectionPanel > [data-column-count="4"],
    .ListTemplateFilterSelectionPanel > [data-column-count="5"],
    .ListTemplateFilterSelectionPanel > [data-column-count="6"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Form cards: collapse 2-col → 1, 3-col → 2, 4-col → 2, 5/6-col → 2 */
    .card-content-wrapper [data-column-count="2"] {
        grid-template-columns: 1fr !important;
    }

    .card-content-wrapper [data-column-count="3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .card-content-wrapper [data-column-count="4"],
    .card-content-wrapper [data-column-count="5"],
    .card-content-wrapper [data-column-count="6"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .DashboardPanel .inputcard-contentspannedgroup {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

@media only screen and (max-width: 768px) {
    .ListTemplateFilterFieldsPanel {
        flex-direction: column !important;
    }

    /* Scoped: only expand the wrapper to full width when inside the standard column-direction panel */
    .ListTemplateFilterFieldsPanel .ListTemplateFilterFieldsPanelControlWrapper {
        width: 100%;
    }

    /* Collapse all filter panel groups to single column at mobile */
    .ListTemplateFilterSelectionPanel [data-column-count] {
        grid-template-columns: 1fr !important;
    }

    /* Collapse everything to single column at mobile widths */
    .card-content-wrapper [data-column-count],
    .card-content-wrapper .inputcard-contentspannedgroup {
        grid-template-columns: 1fr !important;
    }

    .DashboardPanel .inputcard-contentspannedgroup {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .MainFormTabs {
        left: 0rem !important;
        width: calc(100% - 0rem) !important;
    }
}

.hiddenHeight {
    height: 0rem !important;
    overflow: hidden;
    min-height: 0rem;
}

.NewMailListBoxH {
    min-height: calc(3 * 1.8rem + 0.3rem) !important;
    padding-top: 0rem !important;
    margin: 0rem;
}

    .NewMailListBoxH ul {
        border: none !important;
    }

.dxbl-popup-portal {
    padding: 0px !important;
    margin: 0px !important;
}

.XHtmlEdit {
    width: 100% !important;
}

.XHtmlEditContainer {
    width: 620px;
    height: 300px;
}

html body .force-show {
    display: flex !important;
}

html body .force-hide {
    display: none !important;
}

.xMaskedInputWrapper .ui_placeholder {
    margin-left: 1rem;
    color: #6c757d !important;
}

.XColorPallete {
    width: 100%;
}

    .XColorPallete input {
        height: calc(40px - 20px);
        padding: 0px;
        margin-top: 15px;
        margin-bottom: 5px;
        margin-right: 30px;
        margin-left: 10px;
    }

.XColorPalleteRequired {
    text-indent: 0px !important;
    border-left: 2px solid #009efb !important;
    border-radius: 0.2rem !important;
}

.XColorPallete .ButtonDropdown {
    width: 100% !important;
}

.XColorPallete .OneClickAction {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    justify-content: start;
}

    .XColorPallete .OneClickAction:hover {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

.ActivityFields {
    overflow-x: auto !important;
    height: 500px !important;
    width: 800px !important;
}

    .ActivityFields .dxbl-grid-table {
        border: 1px solid #dee2e6 !important;
    }

.dxbl-checkbox-check-element::after {
    background-color: var(--action-primary) !important;
}

.ActivityFieldsRowControls {
    display: flex !important;
    flex-direction: row !important;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

.ProductDetailNewRowInfo p {
    margin: 0px;
}

.ProductDetailNewRowInfo {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .ProductDetailNewRowInfo .InfoElement {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

        .ProductDetailNewRowInfo .InfoElement p:last-child {
            font-weight: bold;
        }

.dxbl-splitter-separator .dxbl-splitter-resize-handle-image {
    background-color: var(--action-primary) !important;
}

.dxbl-splitter-separator .dxbl-splitter-button {
    color: var(--action-primary) !important;
}

.listFullTextInput {
    background-color: rgba(144, 238, 144, 0.4) !important;
    margin-block: 5px;
    border: none !important;
    display: flex !important;
    height: 1.5rem !important;
    font-size: 0.75rem !important;
    font-family: var(--dxbl-grid-font-family) !important;
    line-height: var(--dxbl-grid-line-height) !important;
}

.listFullSelectInput {
    background-color: rgba(144, 238, 144, 0.4) !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding-right: 20px !important;
    margin-block: 5px;
    border: none !important;
    height: 1.5rem !important;
    align-items: center;
    font-size: 0.75rem !important;
    font-family: var(--dxbl-grid-font-family) !important;
    line-height: var(--dxbl-grid-line-height) !important;
}

.img-thumbnail {
    border: 1px solid #ccc;
    padding: 5px;
    margin-top: 10px;
}

.mt-2 {
    margin-top: 1rem;
}

.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: min(250px, 100%);
    height: min(250px, 100%);
    margin-left: auto;
    margin-right: auto;
}

    .avatar .remove-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 20;
    }

.avatar, .signature-button {
    position: relative;
}
.avatar2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: min(250px, 100%);
    height: 80px;
    margin-left: auto;
    margin-right: auto;
}

    .avatar2 .remove-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 20;
    }

.avatar2, .signature-button {
    position: relative;
}

.avatar-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    outline: none;
}

.avatar-circle {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.avatar-rectangle {
    position: relative;
    width: 100%;
    height: 50%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.avatar-button:hover .avatar-circle {
    filter: brightness(0.85);
    transform: scale(1.02);
}
.avatar-button:hover .avatar-rectangle {
    filter: brightness(0.85);
    transform: scale(1.02);
}

.avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .avatar-overlay svg {
        margin-bottom: 6px;
    }

.avatar-button:hover .avatar-overlay {
    opacity: 1;
}

.signature {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 6rem;
}

.signature-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
}

    .signature-button .remove-button {
        position: absolute;
        top: -10px;
        right: -10px;
        z-index: 20;
    }

.signature-area {
    position: relative;
    width: min(420px, 100%);
    height: 120px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f3f3f3 0%, #e6e6e6 100%);
    border: 2px dashed #bdbdbd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signature-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: white;
    z-index: 0;
}

.signature-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #7a7a7a;
    font-size: 1rem;
    font-style: italic;
    opacity: 0.8;
    height: 100%;
}

.signature-placeholder,
.signature-overlay {
    position: relative;
    z-index: 1;
}

.signature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    stroke: #8c8c8c;
}

.signature-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-align: center;
    border-radius: 12px;
}

    .signature-overlay .overlay-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
    }

.signature-button:hover .signature-overlay {
    opacity: 1;
}

.signature-button:hover .signature-area {
    border-color: #888;
    transform: scale(1.02);
}

.remove-button {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 20; /* higher than overlay/image */
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

    .remove-button:hover {
        background: rgba(255,0,0,0.95);
    }

    .remove-button svg {
        width: 16px;
        height: 16px;
        stroke: #333;
    }

    .remove-button:hover svg {
        stroke: white;
    }

.NewEmailReaderBoxH {
    min-height: calc(6 * 2.2rem + 0.5rem) !important;
    padding-top: 0rem !important;
    margin: 0rem;
}

/* Generated-code preview boxes (QR code / barcode on the User card) - same clickable-box language
   as .signature-button/.signature-area, but the click generates the image rather than uploading one. */
.code-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
}

.code-area {
    position: relative;
    width: min(420px, 100%);
    height: 120px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f3f3f3 0%, #e6e6e6 100%);
    border: 2px dashed #bdbdbd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.code-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: white;
    z-index: 0;
}

.code-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #7a7a7a;
    font-size: 1rem;
    font-style: italic;
    position: relative;
    z-index: 1;
}

.code-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
}

.code-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}

.code-overlay .overlay-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
}

.code-button:hover .code-overlay {
    opacity: 1;
}

.code-button:hover .code-area {
    border-color: #888;
    transform: scale(1.02);
}

    .NewEmailReaderBoxH ul {
        border: none !important;
    }


.NewPermissionListBoxH {
    height: 400px !important;
    padding-top: 0rem !important;
    margin: 0rem;
    min-width: 300px !important;
    overflow-y: auto !important;
}

    .NewPermissionListBoxH ul {
        border: none !important;
    }

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 13px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 1;
    min-width: 13px;
    padding: 0 2px;
}

.notification-card {
    border-left: 3px solid #17a2b8;
    background: #fff;
    border-radius: 4px;
    width: 90%;
    margin: 0 auto 0.75rem;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .notification-card:hover {
        transform: scale(1.02);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    .notification-card.notification-unread {
        background: #f0f8ff;
        border-left-color: #007bff;
        font-weight: 500;
    }

.unread-indicator {
    width: 8px;
    height: 8px;
    background-color: #007bff;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    flex-shrink: 0;
}

/* The dismiss (x) on a notification card, and the group that holds it beside the unread dot.
   Deliberately quiet until the card is hovered: it sits on every unread card, and a row of hard
   x's reads as a list of things to delete rather than a list of reminders. */
.notification-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.notification-dismiss {
    border: 0;
    background: transparent;
    color: #8a94a6;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.notification-card:hover .notification-dismiss {
    opacity: 1;
}

.notification-dismiss:hover,
.notification-dismiss:focus-visible {
    opacity: 1;
    color: #dc3545;
}

.notification-filter-buttons {
    display: flex;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 3px;
    width: 90%;
    margin: 0 auto;
    gap: 0;
}

    .notification-filter-buttons .filter-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.5rem 0.25rem;
        border: none;
        background: transparent;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.7rem;
        font-weight: 500;
        transition: all 0.2s ease;
        color: #6c757d;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

        .notification-filter-buttons .filter-btn i {
            font-size: 1rem;
            display: block;
        }

        .notification-filter-buttons .filter-btn span {
            display: block;
            line-height: 1;
        }

        .notification-filter-buttons .filter-btn:hover:not(.active) {
            background: rgba(255, 255, 255, 0.5);
            color: #495057;
        }

        .notification-filter-buttons .filter-btn.active {
            background: #fff;
            color: #007bff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
        }

.notification-card-body {
    padding: 0.35rem 0.35rem;
    font-size: 0.9rem;
}

.notification-period {
    font-size: 0.8em;
    color: #666;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #dc3545;
    color: white;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: bold;
    line-height: 1;
    padding: 0 4px;
}

.dxbl-btn.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-filled,
.dxbl-btn.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-filled:hover {
    --dxbl-btn-color: #000 !important;
    --dxbl-btn-hover-color: #000 !important;
    opacity: 1 !important;
}

/* Make the "Apply" button in the column filter popup visible.
   By default DevExpress renders it with --dxbl-btn-bg: transparent, so it looks invisible.
   The Apply button is the last button in the filter menu dropdown footer. */
.dxbl-grid-filter-menu-dropdown > .dxbl-dropdown-footer > .dxbl-btn:last-child {
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-bg: #0d6efd !important;
    --dxbl-btn-border-color: #0d6efd !important;
    --dxbl-btn-hover-color: #fff !important;
    --dxbl-btn-hover-bg: #0b5ed7 !important;
    --dxbl-btn-hover-border-color: #0b5ed7 !important;
    --dxbl-btn-disabled-bg: #0d6efd !important;
    --dxbl-btn-disabled-color: #fff !important;
    --dxbl-btn-disabled-border-color: #0d6efd !important;
    opacity: 1 !important;
}

/* ===== Time tracker (monthly timesheet matrix) ===== */
.tt-filter-panel {
    display: flex;
    flex-direction: row;
    border: 1px solid #dfdfdf !important;
    padding: 0.5rem;
    min-height: 60.83px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 100%;
    flex-shrink: 0;
}

.tt-filter-buttons {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.tt-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 10px;
}

.tt-month-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tt-month-label {
    font-weight: 600;
    font-size: 14px;
    color: #2b2f3a;
    margin-left: 0.5rem;
    text-transform: capitalize;
}

.tt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 11px;
    color: #444;
}

.tt-leg {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tt-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
}

.tt-matrix {
    margin-top: 10px;
    width: 100%;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.tt-scroll {
    overflow: auto;
    max-height: calc(100vh - 320px);
    min-height: 260px;
}

.tt-grid {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    table-layout: fixed;
    width: max-content;
}

.tt-grid th,
.tt-grid td {
    height: 32px;
    padding: 0 4px;
    border-right: 1px solid #eef0f2;
    border-bottom: 1px solid #eef0f2;
    background: #fff;
    box-sizing: border-box;
    white-space: nowrap;
}

.tt-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 44px;
    background: #f6f8fa;
    color: #2b2f3a;
    font-weight: 600;
    text-align: center;
}

.tt-sticky-l { position: sticky; z-index: 2; }
.tt-sticky-r { position: sticky; z-index: 2; }
.tt-grid thead th.tt-sticky-l,
.tt-grid thead th.tt-sticky-r { z-index: 4; }

.tt-c1 { left: 0; width: 54px; min-width: 54px; text-align: right; }
.tt-c2 { left: 54px; width: 200px; min-width: 200px; text-align: left; border-right: 1px solid #dfdfdf; }

.tt-r1 { right: 0; }
.tt-r2 { right: 56px; border-left: 1px solid #dfdfdf; }
.tt-sum { width: 56px; min-width: 56px; text-align: center; }

.tt-muted { color: #8a8a8a; }
.tt-strong { font-weight: 600; }

.tt-name,
.tt-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-day { width: 40px; min-width: 40px; }
.tt-day-num { display: block; line-height: 1.1; }
.tt-day-dow { display: block; font-size: 9px; font-weight: 400; color: #8a8a8a; text-transform: uppercase; }

.tt-cell {
    width: 40px;
    min-width: 40px;
    text-align: center;
    cursor: pointer;
    font-size: 10px;
}

.tt-cell:hover { outline: 2px solid #009efb; outline-offset: -2px; }

.tt-grid .tt-weekend { background: #f3f4f6; }
.tt-grid .tt-holiday { background: #FFF5E6; }
.tt-grid td.tt-today { background: #eef7ff; }
.tt-grid th.tt-today .tt-day-num { display: inline-block; min-width: 20px; padding: 1px 4px; border-radius: 10px; background: #009efb; color: #fff; }
.tt-grid th.tt-today .tt-day-dow { color: #009efb; font-weight: 600; }

.tt-grid .tt-full, .tt-swatch.tt-full { background: rgba(0, 101, 8, .4); }
.tt-grid .tt-less, .tt-swatch.tt-less { background: rgba(255, 255, 0, .4); }
.tt-grid .tt-more, .tt-swatch.tt-more { background: rgba(139, 69, 19, .4); }
.tt-grid .tt-law, .tt-swatch.tt-law { background: rgba(30, 122, 175, .4); }
.tt-swatch.tt-holiday { background: #FFF5E6; }

.tt-empty-row { text-align: center; color: #8a8a8a; height: 64px; }

/* Edited (manually saved) cell: corner marker. */
.tt-grid td.tt-edited { position: relative; }
.tt-grid td.tt-edited::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #009efb transparent transparent;
}
.tt-swatch.tt-edited-swatch { background: linear-gradient(225deg, #009efb 40%, #fff 40%); }

/* Day window: entry cards. */
.tt-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    background: #f6f8fa;
    font-size: 12px;
    cursor: pointer;
}
.tt-entry:hover { border-color: #009efb; }
.tt-entry-active { border-color: #009efb; background: #e6f4ff; }
.tt-entry-worktime { cursor: default; background: #fff; }
.tt-entry-worktime:hover { border-color: #dfdfdf; }
.tt-entry-title { font-weight: 600; margin-bottom: 2px; color: #2b2f3a; }
.tt-entry-delete { border: none; background: transparent; color: #bd2130; cursor: pointer; padding: 0 2px; }
.tt-entry-delete:hover { color: #e74c3c; }