: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;
}

/* Google Maps pin before the text of a grid address cell (ListFull, GoogleMaps.IsAddressColumn). */
.ListFullMapPin {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
}

    .ListFullMapPin:hover {
        color: var(--action-primary, #007bff);
        background-color: #f0f0f0;
    }

/* XMemo's Google Maps pin sits over the textarea's top-right corner; keep the text clear of it. */
.dxbl-memo-edit.XMemoMapLinkHost > textarea {
    padding-right: 40px !important;
}

/* 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;
    }

/* Flyout submenu inside a dropdown menu (PeriodMenuItems; placed by DropdownSubmenu in Extensions.js).
   Same frame as the menu itself (toggleDropDownMenu's inline styles); entries left-aligned as there. */
.DropdownSubmenu > .xbutton[role="DropdownMenu"],
.DropdownSubmenuPanel > .xbutton[role="DropdownMenu"] {
    justify-content: flex-start;
    text-align: left;
    padding: 0.5rem;
}

.DropdownSubmenuTrigger .dxbl-btn-caption {
    display: flex;
    align-items: center;
    width: 100%;
}

.DropdownSubmenuChevron {
    margin-left: auto;
    padding-left: 1rem;
    font-size: 0.75em;
}

.DropdownSubmenu.open > .DropdownSubmenuTrigger {
    background-color: #edf1f5 !important;
}

.DropdownSubmenuPanel {
    display: none;
    position: fixed;
    z-index: 10001;
    flex-direction: column;
    min-width: max-content;
    padding: 0.3rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.DropdownSubmenu.open > .DropdownSubmenuPanel {
    display: flex;
}

.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;
}
.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;
    /* page-size selector right after the page numbers, not at the far right (where the
       virtual assistant button sits) */
    justify-content: flex-start !important;
    gap: 1.5rem;
}

/* 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;
}

/* Footer summary flicker: when the rows fit, DevExpress marks the table "no-scroll" and stretches it
   to 100% with a filler row. That 100% counts the 17px under the horizontal scrollbar, so with less
   than that to spare the table overflows, DevExpress switches scrolling back on, the rows fit again -
   a loop of ~13 flips a second. The table keeps its rows' height instead: the footer sits under the
   last row and the leftover space stays empty below it. */
.dxbl-grid .dxbl-grid-table.dxbl-grid-table-no-scroll {
    height: auto !important;
}

.dxbl-grid .dxbl-grid-table > tbody > .dxbl-grid-empty-row {
    display: none !important;
}

/* ...and the scroll area shrinks to that table, so the scrollbar and pager follow the footer instead of
   leaving an empty band inside the grid. min-height: 0 lets it shrink below its content, or the grid
   overflows and DevExpress never switches back to scrolling. */
.dxbl-grid:has(> .dxbl-scroll-viewer .dxbl-grid-table-no-scroll) > .dxbl-scroll-viewer {
    flex: 0 1 auto !important;
    min-height: 0 !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;
}

.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;
}

/*#region Dashboard (home tab: view switcher, filter row) */
/* House tokens only: 2rem controls, 1px #dfdfdf borders, 6px radius, #f0f0f0 / #edf1f5 hover,
   var(--action-primary) as the one accent; the page keeps the #eceff3 dashboard background. */
.DashboardPanel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.DashboardHeader {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.DashboardNavButton,
.DashboardRefreshButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    color: #2b2f3a;
}

    .DashboardNavButton:hover:not(:disabled),
    .DashboardRefreshButton:hover {
        background-color: #f0f0f0;
    }

    .DashboardNavButton:disabled {
        opacity: 0.55;
    }

    .DashboardNavButton:focus-visible,
    .DashboardRefreshButton:focus-visible,
    .DashboardViewTitle:focus-visible,
    .DashboardViewList button:focus-visible {
        outline: 1px dotted var(--action-primary);
    }

.DashboardRefreshButton {
    width: 1.75rem;
    height: 1.75rem;
    color: #6c757d;
}

/* Pritaikyti, + Naujas darbalaukis and the Pritaikyti-mode buttons: the nav buttons' look, sized to their text. */
.DashboardHeaderButton {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    height: 2rem;
    padding: 0 0.75rem;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #2b2f3a;
    white-space: nowrap;
}

    .DashboardHeaderButton:hover:not(:disabled) {
        background-color: #f0f0f0;
    }

    .DashboardHeaderButton:disabled {
        opacity: 0.55;
    }

    .DashboardHeaderButton:focus-visible {
        outline: 1px dotted var(--action-primary);
    }

.DashboardHeaderButtonDanger {
    color: #bd2130;
}

.DashboardHeaderButtonPrimary {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
    color: #fff;
}

    .DashboardHeaderButtonPrimary:hover:not(:disabled) {
        background-color: var(--action-primary);
        opacity: 0.9;
    }

.DashboardViewPicker {
    position: relative;
}

.DashboardViewTitle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 1.3rem;
    font-weight: 500;
    color: #2b2f3a;
}

    .DashboardViewTitle:hover {
        background-color: #fff;
        border-color: #dfdfdf;
    }

.DashboardViewListBackdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.DashboardViewList.baseWhiteBorder {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 16rem;
    margin: 0;
    padding: 0.375rem;
    list-style: none;
}

    .DashboardViewList button {
        display: block;
        width: 100%;
        padding: 0.375rem 0.625rem;
        background: transparent;
        border: 0;
        border-radius: 6px;
        text-align: left;
        font-size: 0.875rem;
        color: #212529;
    }

        .DashboardViewList button:hover,
        .DashboardViewList button[aria-selected="true"] {
            background-color: #edf1f5;
        }

        .DashboardViewList button[aria-selected="true"] {
            font-weight: 600;
        }

.DashboardViewCount {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.DashboardFilterBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
}

.DashboardFilterField {
    width: 17rem;
}

.DashboardFilterDates {
    display: flex;
    gap: 0.5rem;
    width: 22rem;
}

    .DashboardFilterDates > * {
        flex: 1 1 0;
    }

.DashboardUpdated {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.75rem;
    color: #6c757d;
}

.DashboardEmpty {
    padding: 2rem;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Widgets: white cards on the #eceff3 page (border #e4e8ee, 8px radius), 12px text, sequential blues for parts. */
.DashboardContent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity 0.15s;
}

.DashboardReloading {
    opacity: 0.5;
    pointer-events: none;
}

.DashboardGrid {
    display: grid;
    gap: 1rem;
}

.DashboardCols5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.DashboardCols3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.DashboardCols21 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.DashboardCard,
.DashboardKpi {
    box-sizing: border-box;
    min-width: 0;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
}

.DashboardCard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.DashboardCardHeader {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

    .DashboardCardHeader h2 {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: #2b2f3a;
    }

.DashboardCardSubtitle,
.DashboardKpiSub,
.DashboardKpiDelta,
.DashboardMuted {
    font-size: 0.75rem;
    color: #6c757d;
}

.DashboardSpacer {
    flex-grow: 1;
}

.DashboardLink {
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.75rem;
    color: #009efb;
    cursor: pointer;
}

    .DashboardLink:hover {
        color: var(--action-primary);
    }

.DashboardTableToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    color: #6c757d;
}

    .DashboardTableToggle:hover {
        background-color: #f0f0f0;
    }

    .DashboardTableToggle[aria-pressed="true"] {
        border-color: var(--action-primary);
        color: var(--action-primary);
    }

.DashboardLegend {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}

.DashboardLegendLine {
    width: 14px;
    height: 2px;
    background-color: var(--action-primary, #007bff);
}

    .DashboardLegendLine.DashboardTrendPrevious {
        background-color: #adb5bd;
    }

.DashboardKpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.875rem 1.125rem;
    font: inherit;
    text-align: left;
    color: #212529;
}

.DashboardClickable {
    cursor: pointer;
}

.DashboardKpi.DashboardClickable:hover {
    border-color: var(--action-primary);
}

.DashboardKpiLabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6c757d;
}

.DashboardKpiValue {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: #2b2f3a;
}

.DashboardGood {
    color: #00693e !important;
}

.DashboardBad {
    color: #bd2130 !important;
}

.DashboardStrong {
    font-weight: 600;
}

.DashboardNumeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.DashboardSwatch {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.DashboardEmptyText {
    padding: 1rem 0;
    font-size: 0.75rem;
    color: #6c757d;
}

.DashboardTrend {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.DashboardTrendAxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 2.75rem;
    height: 230px;
    font-size: 0.75rem;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

    .DashboardTrendAxis span {
        line-height: 0;
    }

.DashboardTrendPlot {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    padding-right: 4.5rem;
}

.DashboardTrendArea {
    position: relative;
    height: 230px;
    border-bottom: 1px solid #dee2e6;
}

    .DashboardTrendArea svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .DashboardTrendArea polyline {
        fill: none;
        stroke-width: 2;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

        .DashboardTrendArea polyline.DashboardTrendCurrent {
            stroke: var(--action-primary, #007bff);
        }

        .DashboardTrendArea polyline.DashboardTrendPrevious {
            stroke: #adb5bd;
        }

.DashboardTrendGrid {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #f0f0f0;
}

.DashboardTrendDot {
    position: absolute;
    left: 100%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

    .DashboardTrendDot.DashboardTrendCurrent {
        background-color: var(--action-primary, #007bff);
    }

    .DashboardTrendDot.DashboardTrendPrevious {
        background-color: #adb5bd;
    }

.DashboardTrendEnd {
    position: absolute;
    left: 100%;
    margin: -0.5rem 0 0 0.625rem;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

.DashboardTrendEndCurrent {
    font-weight: 600;
    color: #212529;
}

.DashboardTrendLabels {
    position: relative;
    height: 1.25rem;
    font-size: 0.75rem;
    color: #6c757d;
}

    .DashboardTrendLabels span {
        position: absolute;
        top: 5px;
        transform: translateX(-50%);
        white-space: nowrap;
    }

/* OEE tile: spans two of six KPI columns; the three factors sit side by side under the total. */
.DashboardCols6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Own desktops (S13): 4 columns; a KPI tile takes 1, a card 2, a wide widget the whole row. */
.DashboardDesktopGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* A widget's cell: the Pritaikyti bar (when shown) above the widget, which fills the rest of the row's height. */
.DashboardDesktopItem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .DashboardDesktopItem > :last-child {
        flex-grow: 1;
    }

/* A widget collapsed to its header (its arrow) keeps its column but not the row's height. */
.DashboardCardCollapsed {
    align-self: start;
}

    .DashboardDesktopItem > .DashboardCardCollapsed {
        flex-grow: 0;
    }

.DashboardDesktopItemBar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 2px 2px 2px 8px;
    background-color: #fff;
    border: 1px dashed #dfdfdf;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #6c757d;
}

    .DashboardDesktopItemBar > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .DashboardDesktopItemBar .DashboardNavButton {
        width: 1.5rem;
        height: 1.5rem;
    }

.DashboardDesktopEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* "+ Pridėti valdiklį": the library, grouped by role view, under the button (same look as the view list). */
.DashboardWidgetLibrary.baseWhiteBorder {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: 26rem;
    max-height: 28rem;
    overflow-y: auto;
    padding: 0.375rem;
}

.DashboardWidgetLibraryGroup {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6c757d;
}

.DashboardWidgetLibrary button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    width: 100%;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    text-align: left;
    font-size: 0.8125rem;
    color: #212529;
}

    .DashboardWidgetLibrary button:hover:not(:disabled) {
        background-color: #edf1f5;
    }

    .DashboardWidgetLibrary button:disabled {
        opacity: 0.55;
    }

.DashboardWidgetLibraryName {
    font-weight: 600;
}

.DashboardWidgetLibraryWidth {
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

.DashboardWidgetLibraryText {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: #6c757d;
}

.DashboardDesktopSpan2 {
    grid-column: span 2;
}

.DashboardDesktopSpan4 {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .DashboardDesktopGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .DashboardDesktopGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .DashboardDesktopSpan2 {
        grid-column: 1 / -1;
    }
}

.DashboardSpan2 {
    display: flex;
    grid-column: span 2;
}

    .DashboardSpan2 > .DashboardKpi {
        flex-grow: 1;
    }

.DashboardOee {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
}

.DashboardOeeFactors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.DashboardOeeFactor {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.DashboardOeeFactorValue {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

/* Daily line (Broko tendencija): a dashed target line and labels on single points. */
.DashboardTrendTarget {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed #adb5bd;
}

.DashboardTrendTargetLabel {
    position: absolute;
    left: 100%;
    margin: -0.5rem 0 0 0.625rem;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

.DashboardTrendPointLabel {
    position: absolute;
    transform: translate(-50%, -1.5rem);
    font-size: 0.75rem;
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
}

.DashboardTrendPoint {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background-color: var(--action-primary, #007bff);
}

.DashboardLegendLine.DashboardLegendDashed {
    height: 0;
    border-top: 1px dashed #adb5bd;
    background-color: transparent;
}

/* Chart hover (DashboardHoverLayer): bands over the plot; the tooltip looks like the app's .custom-tooltip. */
.DashboardHover {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.DashboardHoverBand {
    position: absolute;
    top: 0;
    bottom: 0;
}

    .DashboardHoverGuide::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        border-left: 1px solid #ced4da;
        visibility: hidden;
    }

    .DashboardHoverSlot:hover {
        background-color: rgba(0, 123, 255, 0.06);
    }

.DashboardHoverDot {
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    visibility: hidden;
}

    .DashboardHoverDot.DashboardTrendCurrent {
        background-color: var(--action-primary, #007bff);
    }

    .DashboardHoverDot.DashboardTrendPrevious {
        background-color: #adb5bd;
    }

.DashboardHoverTip {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-left: 10px;
    padding: 5px 8px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    pointer-events: none;
}

.DashboardHoverTipLeft {
    left: auto;
    right: 50%;
    margin: 0 10px 0 0;
}

.DashboardHoverBand:hover::before,
.DashboardHoverBand:hover .DashboardHoverDot {
    visibility: visible;
}

.DashboardHoverBand:hover .DashboardHoverTip {
    display: flex;
}

.DashboardStack {
    display: flex;
    gap: 2px;
    height: 26px;
}

    .DashboardStack span {
        flex-basis: 0;
        min-width: 4px;
    }

        .DashboardStack span:first-child {
            border-radius: 4px 0 0 4px;
        }

        .DashboardStack span:last-child {
            border-radius: 0 4px 4px 0;
        }

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

.DashboardStackRow {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 70px 104px;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 7px 4px;
    background: none;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    font: inherit;
    font-size: 0.75rem;
    text-align: left;
    color: #212529;
}


/* Prastovų priežastys: a ring with the total in the middle and one legend row per reason (canvas Main artboard). */
.DashboardDonut {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 22px;
    margin-top: 10px;
}

.DashboardDonutRing {
    position: relative;
    flex-shrink: 0;
    width: 180px;
    height: 180px;
}

.DashboardDonutCenter {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.DashboardDonutValue {
    font-size: 22px;
    font-weight: 600;
    color: #2b2f3a;
}

.DashboardDonutRows {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    gap: 2px;
}

.DashboardDonutRow {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 64px 40px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    background: none;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: 0.75rem;
    text-align: left;
    color: #212529;
}

    .DashboardDonutRow.DashboardClickable:hover {
        background-color: #edf1f5;
    }

.DashboardStackRow.DashboardClickable:hover,
.DashboardBarRow.DashboardClickable:hover,
.DashboardStage.DashboardClickable:hover {
    background-color: #edf1f5;
}

.DashboardCardFooter {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    font-size: 0.75rem;
    color: #6c757d;
}

    .DashboardCardFooter span:last-child {
        font-weight: 600;
    }

.DashboardBarRow {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 4px;
    background: none;
    border: 0;
    border-radius: 6px;
    font: inherit;
    text-align: left;
    color: #212529;
}

.DashboardBarText {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.DashboardBarLine {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.DashboardBar {
    min-width: 2px;
    height: 14px;
    background-color: var(--action-primary, #007bff);
    border-radius: 0 4px 4px 0;
}

.DashboardStages {
    display: flex;
    align-items: stretch;
}

.DashboardStage {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 6px 2px;
    background: none;
    border: 0;
    border-radius: 6px;
    font: inherit;
    text-align: left;
    color: #212529;
}

.DashboardStageName {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

.DashboardStageCount {
    font-size: 22px;
    font-weight: 600;
    color: #2b2f3a;
}

.DashboardStageLate {
    font-size: 0.75rem;
    white-space: nowrap;
}

.DashboardStageArrow {
    display: flex;
    align-items: center;
    padding: 0 1px;
    color: #adb5bd;
}

.DashboardTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

    .DashboardTable th {
        height: 32px;
        padding: 0 0.75rem;
        text-align: left;
        font-weight: 600;
        background-color: #f4f4f5;
        border-bottom: 1px solid #dee2e6;
    }

    .DashboardTable td {
        height: 34px;
        padding: 0 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }

    .DashboardTable .DashboardNumeric {
        text-align: right;
    }

.DashboardAlertType {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.DashboardAlertObject {
    color: #009efb;
}

.DashboardCols4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.DashboardCols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.DashboardSpark {
    position: relative;
    display: block;
    height: 28px;
    margin-top: 6px;
}

    .DashboardSpark svg {
        display: block;
        width: 100%;
        height: 28px;
    }

    .DashboardSpark polyline {
        fill: none;
        stroke: #adb5bd;
        stroke-width: 1.5;
        stroke-linejoin: round;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
    }

.DashboardSparkDot {
    position: absolute;
    right: -4px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background-color: var(--action-primary);
    box-shadow: 0 0 0 2px #fff;
}

.DashboardPairs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.DashboardPairsPlot {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.DashboardPairsArea {
    position: relative;
    height: 220px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
}

.DashboardPair {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    padding: 0 10px;
}

    .DashboardPair > span {
        position: relative;
        width: 24px;
        border-radius: 4px 4px 0 0;
        background-color: #adb5bd;
    }

        .DashboardPair > span.DashboardPairDone {
            background-color: var(--action-primary);
        }

.DashboardPairPercent {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 4px;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

.DashboardPairLabels {
    display: flex;
    justify-content: space-around;
    padding-top: 6px;
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
}

    .DashboardPairLabels span {
        width: 120px;
        line-height: 1.3;
    }

.DashboardLegendSwatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #adb5bd;
}

    .DashboardLegendSwatch.DashboardPairDone {
        background-color: var(--action-primary);
    }

.DashboardProgress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .DashboardProgress > span:first-child {
        flex-grow: 1;
        height: 6px;
        border-radius: 3px;
        background-color: #cde2fb;
    }

    .DashboardProgress > span:first-child > span {
        display: block;
        height: 6px;
        border-radius: 3px;
        background-color: var(--action-primary);
    }

    .DashboardProgress > span:last-child {
        width: 32px;
        text-align: right;
        color: #6c757d;
    }

.DashboardColsMine {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}

.DashboardCols32 {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.DashboardCols23 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

.DashboardKpiHead {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.DashboardKpiLine {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
}

.DashboardSalesBars {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 4px 10px;
    margin-top: 6px;
    font-size: 0.75rem;
}

    .DashboardSalesBars > span:nth-child(odd) {
        color: #6c757d;
    }

    .DashboardSalesBars > span:nth-child(even) {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.DashboardSalesBar {
    height: 8px;
    border-radius: 0 4px 4px 0;
    background-color: var(--action-primary);
}

    .DashboardSalesBar.DashboardTrendPrevious {
        background-color: #adb5bd;
    }

.DashboardTaskGroup {
    margin-top: 8px;
    padding: 4px 8px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #dfdfdf;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
}

.DashboardTaskRow,
.DashboardAlertCard {
    width: 100%;
    font: inherit;
    text-align: left;
    color: #212529;
    background-color: #fff;
}

.DashboardTaskRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

    .DashboardTaskRow > span:first-child {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }

    .DashboardTaskRow > span:last-child {
        text-align: right;
        font-size: 0.75rem;
        color: #6c757d;
    }

.DashboardTaskObject {
    font-size: 0.75rem;
    color: #009efb;
}

.DashboardAlertCards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.DashboardAlertCard {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 10px;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
}

    .DashboardAlertCard svg {
        margin-top: 3px;
    }

    .DashboardAlertCard > span:last-child {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 0.75rem;
        color: #6c757d;
    }

    .DashboardAlertCard strong {
        font-size: 13px;
        font-weight: 600;
        color: #212529;
    }

        .DashboardAlertCard strong.DashboardBad {
            color: #bd2130;
        }

/* "Barai dabar": one chip per bar; shape + colour + text, as the canvas Main artboard. */
.DashboardStatusStrip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
}

.DashboardStatusCaption {
    margin-right: 0.25rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6c757d;
}

.DashboardStatusChip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #212529;
}

    .DashboardStatusChip:disabled {
        opacity: 1;
        color: #212529;
    }

    .DashboardStatusChip.DashboardClickable:hover {
        border-color: var(--action-primary);
    }

.DashboardStatusName {
    font-weight: 600;
}

.DashboardStatusText {
    color: #6c757d;
}

.DashboardStatusWorking path {
    fill: #5fba7d;
    stroke: #3f8f5a;
}

.DashboardStatusStopped path {
    fill: #6c757d;
    stroke: #6c757d;
}

.DashboardStatusIdle path,
.DashboardStatusOff path {
    fill: #fff;
    stroke: #adb5bd;
}

.DashboardStatusOff .DashboardStatusName {
    font-weight: 400;
    color: #6c757d;
}

.DashboardStatusItem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* A recorded downtime: the one red state (canvas "alert" chip). */
.DashboardStatusChip.DashboardStatusAlert,
.DashboardStatusChip.DashboardStatusAlert:disabled {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

    .DashboardStatusAlert .DashboardStatusText {
        color: #fff;
    }

.DashboardStatusAlert path {
    fill: #fff;
    stroke: #fff;
}

/* A changeover within its norm (canvas "warn"). */
.DashboardStatusWarn path {
    fill: #c1c13e;
    stroke: #8a8a2a;
}

/* Cechas: shift progress row and one card per bar, as the canvas B1 artboard. */
.DashboardShiftBar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
}

.DashboardShiftName {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2b2f3a;
    white-space: nowrap;
}

.DashboardShiftProgress {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px;
}

.DashboardShiftProgressText {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
}

    .DashboardShiftProgressText b {
        font-weight: 600;
    }

.DashboardShiftTrack {
    display: block;
    height: 6px;
    border-radius: 3px;
    background-color: #cde2fb;
}

    .DashboardShiftTrack > span {
        display: block;
        height: 6px;
        border-radius: 3px;
        background-color: var(--action-primary);
    }

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

.DashboardLiveDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #5fba7d;
}

.DashboardBarCard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-top: 4px solid #adb5bd;
    border-radius: 8px;
}

    .DashboardBarCard.DashboardStatusWorking {
        border-top-color: #5fba7d;
    }

    .DashboardBarCard.DashboardStatusStopped {
        border-top-color: #6c757d;
    }

    .DashboardBarCard.DashboardStatusAlert {
        border-top-color: #dc3545;
    }

    .DashboardBarCard.DashboardStatusWarn {
        border-top-color: #c1c13e;
    }

    .DashboardBarCard.DashboardStatusAlert .DashboardBarCardHead {
        background-color: #dc3545;
        color: #fff;
    }

.DashboardBarCardHead {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 14px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e4e8ee;
    font-size: 13px;
    font-weight: 600;
    color: #212529;
}

.DashboardStatusWorking .DashboardBarCardHead {
    background-color: #fff;
}

.DashboardStatusIdle .DashboardBarCardHead,
.DashboardStatusOff .DashboardBarCardHead {
    color: #6c757d;
}

.DashboardBarCardSince {
    font-size: 0.75rem;
    font-weight: 400;
}

.DashboardBarCardAction {
    font-size: 0.75rem;
    font-weight: 400;
}

    .DashboardStatusAlert .DashboardBarCardAction {
        color: #fff;
        text-decoration: underline;
    }

.DashboardBarCardBody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    font-size: 0.75rem;
}

.DashboardBarCardTitle {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .DashboardBarCardTitle h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #2b2f3a;
    }

    .DashboardBarCardTitle b {
        font-size: 0.875rem;
        font-weight: 600;
    }

.DashboardBarCardOrder {
    color: var(--action-primary);
}

.DashboardBarCardDone {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .DashboardBarCardDone .DashboardShiftTrack,
    .DashboardBarCardDone .DashboardShiftTrack > span {
        height: 8px;
        border-radius: 4px;
    }

.DashboardBarCardFoot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

/* TV ekranas (/tv): the Cechas cards in large type for a 1920×1080 shop-floor screen, as the canvas B2 artboard. */
.DashboardTv {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 24px;
    overflow: hidden;
    background-color: #eceff3;
    color: #212529;
    font-size: 20px;
}

.DashboardTvHeader {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 32px;
    height: 100px;
    box-sizing: border-box;
    padding: 0 28px;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
}

.DashboardTvTitle {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.DashboardTvWorkshop {
    font-size: 34px;
    font-weight: 600;
    color: #2b2f3a;
}

.DashboardTvMuted {
    color: #6c757d;
}

.DashboardTvLost {
    font-weight: 600;
    color: #bd2130;
}

.DashboardTvClock {
    font-size: 60px;
    font-weight: 600;
    color: #2b2f3a;
}

.DashboardTvKpi {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.DashboardTvKpiLabel {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6c757d;
}

.DashboardTvKpiValue {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    color: #2b2f3a;
}

.DashboardTvKpiOf {
    font-size: 22px;
    font-weight: 400;
    color: #6c757d;
}

.DashboardTvKpiDivider {
    width: 1px;
    height: 56px;
    background-color: #dfdfdf;
}

.DashboardTvBars {
    display: grid;
    flex-grow: 1;
    gap: 20px;
    min-height: 0;
}

.DashboardTv .DashboardBarCard {
    border-top-width: 10px;
}

.DashboardTv .DashboardBarCardHead {
    gap: 12px;
    height: 58px;
    flex-shrink: 0;
    padding: 0 22px;
    font-size: 26px;
}

    .DashboardTv .DashboardBarCardHead svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

.DashboardTv .DashboardBarCardBody {
    flex-grow: 1;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 20px;
    font-size: 20px;
}

.DashboardTvBarName {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .DashboardTvBarName h3 {
        margin: 0;
        font-size: 34px;
        font-weight: 600;
    }

    .DashboardTvBarName span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.DashboardTv .DashboardShiftProgressText {
    align-items: baseline;
    font-size: 20px;
}

    .DashboardTv .DashboardShiftProgressText b {
        font-size: 30px;
    }

.DashboardTv .DashboardBarCardDone .DashboardShiftTrack,
.DashboardTv .DashboardBarCardDone .DashboardShiftTrack > span {
    height: 16px;
    border-radius: 8px;
}

/* A bar that needs someone now is red all over, so it reads from across the hall. */
.DashboardTv .DashboardBarCard.DashboardStatusAlert {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

    .DashboardTv .DashboardStatusAlert .DashboardBarCardHead {
        border-bottom-color: rgba(255, 255, 255, 0.35);
    }

    .DashboardTv .DashboardStatusAlert .DashboardTvMuted {
        color: #fff;
    }

    .DashboardTv .DashboardStatusAlert .DashboardShiftTrack {
        background-color: rgba(255, 255, 255, 0.35);
    }

        .DashboardTv .DashboardStatusAlert .DashboardShiftTrack > span {
            background-color: #fff;
        }

.DashboardTv .DashboardBarCard.DashboardStatusIdle,
.DashboardTv .DashboardBarCard.DashboardStatusOff {
    color: #6c757d;
}

    .DashboardTv .DashboardStatusIdle .DashboardShiftTrack,
    .DashboardTv .DashboardStatusOff .DashboardShiftTrack {
        background-color: #eceff3;
    }

        .DashboardTv .DashboardStatusIdle .DashboardShiftTrack > span,
        .DashboardTv .DashboardStatusOff .DashboardShiftTrack > span {
            background-color: #adb5bd;
        }

/* Ten bars or more: one size smaller so every tile still fits. */
.DashboardTvDense .DashboardBarCardHead {
    height: 46px;
    font-size: 22px;
}

.DashboardTvDense .DashboardBarCardBody {
    padding: 12px 18px 14px;
    font-size: 18px;
}

.DashboardTvDense .DashboardTvBarName h3 {
    font-size: 28px;
}

.DashboardTvDense .DashboardShiftProgressText b {
    font-size: 26px;
}

.DashboardTvPanels {
    display: grid;
    flex-shrink: 0;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    height: 280px;
}

.DashboardTvPanel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    box-sizing: border-box;
    padding: 16px 24px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
    font-size: 22px;
}

.DashboardTvPanelAlert {
    background-color: #ffe6e6;
    border-color: #ffe6e6;
    color: #bd2130;
}

    .DashboardTvPanelAlert .DashboardTvKpiLabel {
        color: #bd2130;
    }

.DashboardTvTable {
    width: 100%;
    border-collapse: collapse;
}

    .DashboardTvTable td {
        padding: 4px 16px 4px 0;
        white-space: nowrap;
    }

        .DashboardTvTable td:last-child {
            padding-right: 0;
        }

    .DashboardTvTable .DashboardTvEllipsis {
        width: 100%;
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 1200px) {
    .DashboardCols5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .DashboardColsMine,
    .DashboardCols4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .DashboardCols3,
    .DashboardCols2,
    .DashboardCols32,
    .DashboardCols23,
    .DashboardCols21 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .DashboardCols5,
    .DashboardCols4,
    .DashboardColsMine {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dark mode (Trello 16922): the dashboard was built beside the dark mode preview, so it had no dark styles.
   Each override below swaps a light neutral for the preview's --erp-* token; status colours and white text on
   coloured chips stay. Nothing here applies without .erp-dark on <html>. */
.erp-dark .DashboardPanel {
    background: var(--erp-surface);
}

.erp-dark .DashboardNavButton,
.erp-dark .DashboardRefreshButton {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
    color: var(--erp-text-emph);
}

.erp-dark .DashboardNavButton:hover:not(:disabled),
.erp-dark .DashboardRefreshButton:hover {
    background-color: var(--erp-hover-neutral);
}

.erp-dark .DashboardRefreshButton {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardHeaderButton {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
    color: var(--erp-text-emph);
}

.erp-dark .DashboardHeaderButton:hover:not(:disabled) {
    background-color: var(--erp-hover-neutral);
}

.erp-dark .DashboardHeaderButtonDanger {
    color: var(--erp-danger);
}

.erp-dark .DashboardViewTitle {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardViewTitle:hover {
    background-color: var(--erp-strip);
    border-color: var(--erp-border);
}

.erp-dark .DashboardViewList button {
    color: var(--erp-text);
}

.erp-dark .DashboardViewList button:hover,
.erp-dark .DashboardViewList button[aria-selected="true"] {
    background-color: var(--erp-surface);
}

.erp-dark .DashboardViewCount {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardFilterBar {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
}

.erp-dark .DashboardUpdated {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardEmpty {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
    color: var(--erp-text-muted);
}

.erp-dark .DashboardCard,
.erp-dark .DashboardKpi {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
}

.erp-dark .DashboardCardHeader h2 {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardCardSubtitle,
.erp-dark .DashboardKpiSub,
.erp-dark .DashboardKpiDelta,
.erp-dark .DashboardMuted {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardLink {
    color: var(--erp-link);
}

.erp-dark .DashboardTableToggle {
    border: 1px solid var(--erp-border);
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTableToggle:hover {
    background-color: var(--erp-hover-neutral);
}

.erp-dark .DashboardKpi {
    color: var(--erp-text);
}

.erp-dark .DashboardKpiLabel {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardKpiValue {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardGood {
    color: var(--erp-save) !important;
}

.erp-dark .DashboardBad {
    color: var(--erp-danger) !important;
}

.erp-dark .DashboardEmptyText {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTrendAxis {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTrendArea {
    border-bottom: 1px solid var(--erp-border);
}

.erp-dark .DashboardTrendGrid {
    background-color: var(--erp-hover-neutral);
}

.erp-dark .DashboardTrendDot {
    box-shadow: 0 0 0 2px var(--erp-strip);
}

.erp-dark .DashboardTrendEnd {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTrendEndCurrent {
    color: var(--erp-text);
}

.erp-dark .DashboardTrendLabels {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardDesktopItemBar {
    background-color: var(--erp-strip);
    border: 1px dashed var(--erp-border);
    color: var(--erp-text-muted);
}

.erp-dark .DashboardWidgetLibraryGroup {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardWidgetLibrary button {
    color: var(--erp-text);
}

.erp-dark .DashboardWidgetLibrary button:hover:not(:disabled) {
    background-color: var(--erp-surface);
}

.erp-dark .DashboardWidgetLibraryWidth {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardWidgetLibraryText {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardOeeFactor {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardOeeFactorValue {
    color: var(--erp-text);
}

.erp-dark .DashboardTrendTargetLabel {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTrendPointLabel {
    color: var(--erp-text);
}

.erp-dark .DashboardHoverGuide::before {
    border-left: 1px solid var(--erp-border);
}

.erp-dark .DashboardHoverDot {
    box-shadow: 0 0 0 2px var(--erp-strip);
}

.erp-dark .DashboardStackRow {
    border-bottom: 1px solid var(--erp-border);
    color: var(--erp-text);
}

.erp-dark .DashboardDonutValue {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardDonutRow {
    color: var(--erp-text);
}

.erp-dark .DashboardDonutRow.DashboardClickable:hover {
    background-color: var(--erp-surface);
}

.erp-dark .DashboardStackRow.DashboardClickable:hover,
.erp-dark .DashboardBarRow.DashboardClickable:hover,
.erp-dark .DashboardStage.DashboardClickable:hover {
    background-color: var(--erp-surface);
}

.erp-dark .DashboardCardFooter {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardBarRow {
    color: var(--erp-text);
}

.erp-dark .DashboardStage {
    color: var(--erp-text);
}

.erp-dark .DashboardStageName {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardStageCount {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardTable th {
    background-color: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
}

.erp-dark .DashboardTable td {
    border-bottom: 1px solid var(--erp-border);
}

.erp-dark .DashboardAlertObject {
    color: var(--erp-link);
}

.erp-dark .DashboardSparkDot {
    box-shadow: 0 0 0 2px var(--erp-strip);
}

.erp-dark .DashboardPairsArea {
    border-bottom: 1px solid var(--erp-border);
}

.erp-dark .DashboardPairPercent {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardPairLabels {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardProgress > span:first-child {
    background-color: rgba(76, 157, 255, 0.25);
}

.erp-dark .DashboardProgress > span:last-child {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardSalesBars > span:nth-child(odd) {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTaskGroup {
    background-color: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTaskRow,
.erp-dark .DashboardAlertCard {
    color: var(--erp-text);
    background-color: var(--erp-strip);
}

.erp-dark .DashboardTaskRow {
    border-bottom: 1px solid var(--erp-border);
}

.erp-dark .DashboardTaskRow > span:last-child {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTaskObject {
    color: var(--erp-link);
}

.erp-dark .DashboardAlertCard {
    border: 1px solid var(--erp-border);
}

.erp-dark .DashboardAlertCard > span:last-child {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardAlertCard strong {
    color: var(--erp-text);
}

.erp-dark .DashboardAlertCard strong.DashboardBad {
    color: var(--erp-danger);
}

.erp-dark .DashboardStatusStrip {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
}

.erp-dark .DashboardStatusCaption {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardStatusChip {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
    color: var(--erp-text);
}

.erp-dark .DashboardStatusChip:disabled {
    color: var(--erp-text);
}

.erp-dark .DashboardStatusText {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardStatusStopped path {
    fill: var(--erp-text-muted);
    stroke: var(--erp-text-muted);
}

.erp-dark .DashboardStatusIdle path,
.erp-dark .DashboardStatusOff path {
    fill: var(--erp-strip);
}

.erp-dark .DashboardStatusOff .DashboardStatusName {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardStatusAlert path {
    fill: var(--erp-strip);
    stroke: var(--erp-strip);
}

.erp-dark .DashboardShiftBar {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
}

.erp-dark .DashboardShiftName {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardShiftTrack {
    background-color: rgba(76, 157, 255, 0.25);
}

.erp-dark .DashboardBarCard {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
}

.erp-dark .DashboardBarCard.DashboardStatusStopped {
    border-top-color: var(--erp-text-muted);
}

.erp-dark .DashboardBarCardHead {
    background-color: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
    color: var(--erp-text);
}

.erp-dark .DashboardStatusWorking .DashboardBarCardHead {
    background-color: var(--erp-strip);
}

.erp-dark .DashboardStatusIdle .DashboardBarCardHead,
.erp-dark .DashboardStatusOff .DashboardBarCardHead {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardBarCardTitle h3 {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardTv {
    background-color: var(--erp-surface);
    color: var(--erp-text);
}

.erp-dark .DashboardTvHeader {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
}

.erp-dark .DashboardTvWorkshop {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardTvMuted {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTvLost {
    color: var(--erp-danger);
}

.erp-dark .DashboardTvClock {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardTvKpiLabel {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTvKpiValue {
    color: var(--erp-text-emph);
}

.erp-dark .DashboardTvKpiOf {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTvKpiDivider {
    background-color: var(--erp-border);
}

.erp-dark .DashboardTv .DashboardStatusAlert .DashboardShiftTrack > span {
    background-color: var(--erp-strip);
}

.erp-dark .DashboardTv .DashboardBarCard.DashboardStatusIdle,
.erp-dark .DashboardTv .DashboardBarCard.DashboardStatusOff {
    color: var(--erp-text-muted);
}

.erp-dark .DashboardTv .DashboardStatusIdle .DashboardShiftTrack,
.erp-dark .DashboardTv .DashboardStatusOff .DashboardShiftTrack {
    background-color: var(--erp-surface);
}

.erp-dark .DashboardTvPanel {
    background-color: var(--erp-strip);
    border: 1px solid var(--erp-border);
}

.erp-dark .DashboardTvPanelAlert {
    background-color: rgba(255, 107, 120, 0.15);
    border-color: rgba(255, 107, 120, 0.35);
    color: var(--erp-danger);
}

.erp-dark .DashboardTvPanelAlert .DashboardTvKpiLabel {
    color: var(--erp-danger);
}
/*#endregion */

/* Dashboard on tablets and phones. The six-column KPI row (production view: OEE spanning two, then plan, scrap, OTIF, changeover, late orders)
   was the only grid without a breakpoint, so on a phone its tiles were squeezed side by side and their text was cut off. Phone-only rules:
   desktop widths are not touched. */
@media (max-width: 1200px) {
    .DashboardCols6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .DashboardCols6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The OEE tile (with its three factors) takes the whole row. */
    .DashboardSpan2 {
        grid-column: 1 / -1;
    }

    /* More width for the charts. */
    .DashboardPanel {
        padding: 0.75rem;
    }

    .DashboardCard {
        padding: 0.875rem;
    }

    /* Chart text a little larger, so axes, labels and legends can be read without zooming. */
    .DashboardTrendAxis,
    .DashboardTrendLabels,
    .DashboardTrendEnd,
    .DashboardTrendPointLabel,
    .DashboardLegend,
    .DashboardBarText,
    .DashboardBarLine,
    .DashboardDonutRow,
    .DashboardStageName,
    .DashboardStackRow {
        font-size: 0.8125rem;
    }

    /* A wide table scrolls sideways inside its card instead of running off the screen. */
    .DashboardTable {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    /* The ring above its legend: beside it the legend rows had room for hardly a word of the name. */
    .DashboardDonut {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .DashboardDonutRing {
        align-self: center;
    }
}


.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*/

/* Monitoring's auto-refresh label (MonitoringRefreshStatus): muted like .list-stats-total, glows once after
   each load in the live-row-update colours (terra-live-row-blink, components.css). */
.monitoring-refresh-status {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
    animation: terra-live-row-blink 1.4s ease-out 1;
}

/*#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;
}

/*#region Invoice items summary - purchase document footer: payments left, totals right */
.InvoiceItemsSummary {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 10px;
}

.InvoiceItemsSummaryBlock {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .InvoiceItemsSummaryBlock:first-child {
        padding-right: 1.5rem;
        border-right: 1px solid #dfdfdf;
    }

.InvoiceItemsSummaryRow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

    .InvoiceItemsSummaryRow > span:first-child {
        font-size: 0.75rem;
        color: #6c757d;
    }

    .InvoiceItemsSummaryRow > span:last-child {
        font-size: 0.875rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.InvoiceItemsSummaryStrong > span:last-child {
    font-weight: 700;
}

.InvoiceItemsSummaryTotal {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid #dfdfdf;
}

    .InvoiceItemsSummaryTotal > span:first-child {
        font-size: 0.875rem;
        font-weight: 600;
        color: #212529;
    }

    .InvoiceItemsSummaryTotal > span:last-child {
        font-size: 1.125rem;
        font-weight: 700;
    }
/*#endregion*/

.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;
    }

@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;
    }
}

@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;
    }
}

@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;
    }

    .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: var(--action-primary, #007bff);
        font-weight: 500;
    }

.unread-indicator {
    width: 8px;
    height: 8px;
    background-color: var(--action-primary, #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;
}

/* The panel header's "Clear all": a quiet text button that turns red on hover, like the card's x. */
.notification-clear-all {
    border: 0;
    background: transparent;
    color: #8a94a6;
    font-size: 0.75rem;
    white-space: nowrap;
    margin-left: auto;
    padding: 0 4px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.notification-clear-all:hover:not(:disabled),
.notification-clear-all:focus-visible {
    color: #dc3545;
}

.notification-clear-all:disabled {
    opacity: 0.5;
    cursor: default;
}

.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: var(--action-primary, #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-grid .tt-absence, .tt-swatch.tt-absence { background: rgba(30, 122, 175, .25); }
.tt-grid td.tt-absence { font-weight: 600; text-align: center; }

.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; }

/* Monitoring's TV mode (/monitoring-tv): who is working now, in large type for a 1920x1080 shop-floor screen. Sizes and
   colours follow the workshop TV screen (.DashboardTv); lanes are bars, cards are people. */
.MonitoringTv {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 24px;
    overflow: hidden;
    background-color: #eceff3;
    color: #212529;
    font-size: 20px;
    outline: none;
}

/* Nobody presses "Reload" at a TV: the page's watchdog (DashboardTvWatchdog) reloads it once the server answers. */
body:has(.MonitoringTv) #components-reconnect-modal {
    display: none !important;
}

.MonitoringTvHeader {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 32px;
    height: 100px;
    box-sizing: border-box;
    padding: 0 28px;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
}

.MonitoringTvTitle {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.MonitoringTvName {
    font-size: 34px;
    font-weight: 600;
    color: #2b2f3a;
}

.MonitoringTvMuted {
    color: #6c757d;
}

.MonitoringTvLost,
.MonitoringTvBad {
    font-weight: 600;
    color: #bd2130;
}

.MonitoringTvSpacer {
    flex-grow: 1;
}

.MonitoringTvClock {
    font-size: 60px;
    font-weight: 600;
    color: #2b2f3a;
}

.MonitoringTvKpi {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.MonitoringTvKpiLabel {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6c757d;
}

.MonitoringTvKpiValue {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    color: #2b2f3a;
}

    .MonitoringTvKpiValue.MonitoringTvBad {
        color: #bd2130;
    }

.MonitoringTvKpiDivider {
    width: 1px;
    height: 56px;
    background-color: #dfdfdf;
}

.MonitoringTvExit {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background-color: transparent;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    color: #6c757d;
    cursor: pointer;
}

    .MonitoringTvExit:hover {
        background-color: #f0f0f0;
    }

    .MonitoringTvExit svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.MonitoringTvEmpty {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #6c757d;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
}

.MonitoringTvLanes {
    display: grid;
    flex-grow: 1;
    gap: 20px;
    min-height: 0;
}

.MonitoringTvLane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
}

.MonitoringTvLaneHead {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
    padding: 14px 18px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e4e8ee;
}

.MonitoringTvLaneTitle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .MonitoringTvLaneTitle h2 {
        flex-grow: 1;
        margin: 0;
        overflow: hidden;
        font-size: 26px;
        font-weight: 600;
        color: #2b2f3a;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.MonitoringTvLaneBody {
    display: grid;
    flex-grow: 1;
    min-height: 0;
}

.MonitoringTvCard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: 12px 18px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
}

/* Every line keeps its height; when a card is too short its last line is cut, never the info line. */
.MonitoringTvCard > * {
    flex-shrink: 0;
}

.MonitoringTvLaneBody .MonitoringTvCard {
    border-width: 0 1px 1px 0;
    border-color: #edf1f5;
    border-radius: 0;
}

/* Past its end time while still working: the same "late" the Monitoring tab's Veluoja counts. */
.MonitoringTvCard.MonitoringTvCardLate {
    outline: 2px solid #dc3545;
    outline-offset: -2px;
}

.MonitoringTvCardTop {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.MonitoringTvCardName {
    flex-grow: 1;
    overflow: hidden;
    font-size: 1.15em;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The card's operation, part, product and order on one line. When it is wider than the card it runs as a ticker
   (Monitoring TV, manager's note): it starts at its beginning, moves left until all of it has gone, and starts again, at a
   steady speed (the page sets animation-duration from the text's length and keeps the page up until the run is done). A
   line that fits stays still: the overflow, 100% - 100cqw, is then 0 or less, and clamp() turns the run into 0; any
   overflow at all saturates it to a full run. */
.MonitoringTvCardInfo {
    container-type: inline-size;
    overflow: hidden;
    white-space: nowrap;
}

    .MonitoringTvCardInfo > span {
        display: inline-block;
        animation: MonitoringTvTicker 20s linear infinite;
    }

@keyframes MonitoringTvTicker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * clamp(0px, (100% - 100cqw) * 1000, 100%)));
    }
}

.MonitoringTvChip {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    color: #6c757d;
    background-color: #edf1f5;
}

/* The efficiency chip colours of Operaciju suvestine and Gaminiai gamyboje (ManufactoryEffectiveness). */
.MonitoringTvChipGood {
    color: #212529;
    background-color: #90EE90;
}

.MonitoringTvChipBad {
    color: #212529;
    background-color: #F47E7E;
}

.MonitoringTvProgress {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.MonitoringTvTrack {
    flex-grow: 1;
    height: 10px;
    overflow: hidden;
    border-radius: 5px;
    background-color: #edf1f5;
}

    .MonitoringTvTrack > span {
        display: block;
        height: 100%;
        background-color: #4CAF50;
    }

.MonitoringTvCardTimes {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    white-space: nowrap;
}

/* Monitoring tab: the TV mode button keeps its own width among the toolbar controls. */
.xbutton.MonitoringTvOpen {
    width: auto;
    flex: none;
}

/* Work-time correction popup: the grid takes its rows' height (up to 420px) instead of 98% of a
   container that is itself only as tall as the rows, which cut ~4px and forced a vertical scroll. */
.WorkTimeCorrectionGrid .ui_dxdatagrid {
    height: auto;
    max-height: 420px;
}

/*#region Timesheet (TimeTracker): month summary, employees, month calendar, day entry. On a phone the employee list and the chosen
   employee's month take turns (.tt2-has-sel); desktop widths show both side by side. */
/* The page area (.MainFormGridArea) has a fixed height and hides overflow: the page fills it, and the list and the calendar scroll inside. */
.tt2 { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; flex: 1 1 auto; min-height: 0; box-sizing: border-box; }
.tt2 .card { background: #fff; border: 1px solid #e4e8ee; border-radius: 8px; }
.tt2-hidden { display: none !important; }

.tt2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; }
.tt2-toolbar > :first-child { flex: 0 1 17rem; min-width: 10rem; }
.tt2-month { position: relative; display: flex; align-items: center; gap: 0.375rem; }
.tt2-month-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.75rem; border: 1px solid #dfdfdf; border-radius: 6px; background: #fff; font-weight: 600; color: #2b2f3a; }
.tt2-month-btn:hover, .tt2-icon-btn:hover { background: #f0f0f0; }
.tt2-month-btn .fa-calendar { color: var(--action-primary, #007bff); }
.tt2-chev { font-size: 0.7rem; color: #6c757d; }
.tt2-picker-backdrop { position: fixed; inset: 0; z-index: 1055; }
.tt2-picker { position: absolute; top: 2.5rem; left: 2.25rem; z-index: 1060; width: 18.5rem; padding: 0.875rem; background: #fff; border: 1px solid #e4e8ee; border-radius: 8px; box-shadow: 0 10px 30px rgba(20, 30, 50, 0.18); }
.tt2-picker-year { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.tt2-icon-btn { height: 2rem; min-width: 2rem; border: 1px solid #dfdfdf; border-radius: 6px; background: #fff; color: #2b2f3a; }
.tt2-picker-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tt2-picker-month { height: 2.5rem; border: 1px solid #e4e8ee; border-radius: 6px; background: #fff; color: #2b2f3a; }
.tt2-picker-month:hover { background: #edf1f5; }
.tt2-picker-month.tt2-picker-active { background: var(--action-primary, #007bff); border-color: var(--action-primary, #007bff); color: #fff; font-weight: 600; }

.tt2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.tt2-kpi { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e4e8ee; border-radius: 8px; }
.tt2-kpi span { font-size: 0.75rem; color: #6c757d; }
.tt2-kpi b { font-size: 1.5rem; font-weight: 600; color: #2b2f3a; }
.tt2-kpi b.tt2-warn { color: #b45309; }

.tt2-body { display: flex; align-items: stretch; gap: 0.75rem; flex: 1 1 auto; min-height: 0; }
.tt2-list { flex: 0 0 29rem; max-width: 100%; min-height: 0; overflow-y: auto; align-self: stretch; }
.tt2-detail { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.tt2-hint { padding: 2rem; text-align: center; color: #6c757d; font-size: 0.875rem; }

.tt2-list-head, .tt2-emp { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 4rem; grid-template-areas: "name strip hours"; gap: 0.625rem; align-items: center; padding: 0.5rem 0.875rem; }
.tt2-list-head { border-bottom: 1px solid #e4e8ee; font-size: 0.75rem; font-weight: 600; color: #6c757d; }
.tt2-list-head > :last-child { text-align: right; }
.tt2-emp { width: 100%; border: 0; border-bottom: 1px solid #eef1f5; background: #fff; text-align: left; color: #2b2f3a; }
.tt2-emp:hover { background: #f5f9ff; }
.tt2-emp.tt2-emp-active { background: #f3f8ff; box-shadow: inset 3px 0 0 var(--action-primary, #007bff); font-weight: 600; }
.tt2-emp-name { grid-area: name; min-width: 0; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt2-emp-name small { display: block; font-size: 0.6875rem; font-weight: 400; color: #7a8494; }
.tt2-strip { grid-area: strip; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 1px; }
.tt2-emp-hours { grid-area: hours; text-align: right; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tt2-t { display: block; height: 14px; border-radius: 2px; background: #f1f3f6; }
.tt2-t-full { background: #7DC38A; }
.tt2-t-less { background: #F2D45C; }
.tt2-t-more { background: #D2A27A; }
.tt2-t-abs { background: #7FB2DA; }
.tt2-t-off { background: #e3e7ec; }

.tt2-month-card { flex: 1 1 auto; min-height: 0; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; overflow: auto; }
.tt2-month-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tt2-month-title { display: flex; flex-direction: column; min-width: 0; }
.tt2-month-title b { font-size: 1rem; }
.tt2-month-title small, .tt2-month-sum small { font-size: 0.75rem; color: #6c757d; }
.tt2-month-sum { text-align: right; white-space: nowrap; }
.tt2-back { display: none; align-items: center; gap: 0.375rem; height: 2.75rem; padding: 0 0.75rem; border: 1px solid #dfdfdf; border-radius: 6px; background: #fff; color: #2b2f3a; }
.tt2-dow, .tt2-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
/* The calendar takes all the room the page has: its weeks share the height. */
.tt2-cal { flex: 1 1 auto; grid-auto-rows: minmax(62px, 1fr); }
.tt2-dow { font-size: 0.6875rem; text-align: center; color: #7a8494; }
.tt2-day { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 62px; padding: 6px 8px; border: 1px solid #e4e8ee; border-radius: 8px; background: #fff; color: #c3c9d2; text-align: left; font-size: 0.75rem; }
.tt2-day-blank { border: 0; background: transparent; }
.tt2-dn { font-size: 0.6875rem; color: #6c757d; }
.tt2-dv { font-weight: 600; font-variant-numeric: tabular-nums; }
.tt2-d-full { background: #E4F4E6; color: #1f5d27; }
.tt2-d-less { background: #FFF6C7; color: #7a5b00; }
.tt2-d-more { background: #F3E3D3; color: #6b4423; }
.tt2-d-abs { background: #DCEBF7; color: #1d5f8f; }
.tt2-d-off { background: #f1f3f6; color: #9aa3b0; }
.tt2-day:not(.tt2-day-blank):hover { outline: 2px solid #b9d6ff; }
.tt2-day.tt2-day-today { box-shadow: inset 0 0 0 1px var(--action-primary, #007bff); }
.tt2-day.tt2-day-sel { outline: 2px solid var(--action-primary, #007bff); }
.tt2-day.tt2-day-edited::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #009efb transparent transparent; border-top-right-radius: 8px; }
.tt2-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.75rem; color: #5b6472; }
.tt2-legend .tt2-t { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

.tt2-day-card { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* The day's entries in a popup (a bottom sheet on a phone). */
.tt2-modal-backdrop { position: fixed; inset: 0; z-index: 1070; background: rgba(20, 30, 50, 0.35); }
/* Centred without a transform: a transformed parent would make the dropdowns inside (position: fixed) measure from the popup instead of the screen. */
.tt2 .tt2-modal { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 1075; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow: auto; box-shadow: 0 16px 48px rgba(20, 30, 50, 0.28); }
/* A dropdown inside the popup (operation list): as wide as its longest entry, but never wider than the screen. */
.tt2-modal .XLookUpSearchPopUp { max-width: min(34rem, calc(100vw - 2rem)); overflow-x: auto; }
.tt2-day-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tt2-day-title small { font-size: 0.75rem; color: #6c757d; }
.tt2-day-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tt2-worktime { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.5rem 0.75rem; background: #f3f8ff; border: 1px solid #d6e7fb; border-radius: 8px; font-size: 0.8125rem; }
.tt2-entries { display: flex; flex-direction: column; gap: 0.375rem; }
.tt2-entry { display: grid; grid-template-columns: minmax(0, 1.2fr) 8.5rem minmax(0, 1.2fr) 2.25rem; gap: 0.625rem; align-items: center; padding: 0.5rem 0.75rem; border: 1px solid #e4e8ee; border-radius: 8px; font-size: 0.8125rem; cursor: pointer; }
.tt2-entry.tt2-entry-active { border-color: var(--action-primary, #007bff); background: #f7fbff; }
.tt2-entry-time { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tt2-range { color: #6c757d; font-size: 0.75rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.tt2-entry-note { color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt2-form-title { font-size: 0.75rem; font-weight: 600; color: #6c757d; }
.tt2-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.tt2-form-wide { grid-column: 1 / -1; }
.tt2-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

@media (max-width: 900px) {
    .tt2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tt2-body { flex-direction: column; }
    .tt2-list, .tt2-detail { flex: 1 1 0; }
    /* The list and the employee's month take turns. */
    .tt2.tt2-has-sel .tt2-list, .tt2:not(.tt2-has-sel) .tt2-detail { display: none; }
    .tt2-back { display: inline-flex; }
    /* The month needs the room: the summary tiles step aside while an employee is open. */
    .tt2.tt2-has-sel .tt2-kpis { display: none; }
    .tt2-list-head { display: none; }
    .tt2-emp { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name hours" "strip strip"; min-height: 3.5rem; padding: 0.75rem 0.875rem; row-gap: 0.5rem; }
    .tt2-strip .tt2-t { height: 18px; }
    .tt2-day { min-height: 50px; padding: 4px 6px; }
    .tt2 .tt2-modal { inset: auto 0 0 0; margin: 0; width: auto; height: auto; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .tt2-month-btn, .tt2-icon-btn { height: 2.75rem; }
    .tt2-month-head { flex-wrap: wrap; }
    .tt2-entry { grid-template-columns: minmax(0, 1fr) 7.5rem 2.75rem; }
    .tt2-entry-note { display: none; }
    .tt2-picker { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; border-radius: 16px 16px 0 0; padding-bottom: 1.5rem; }
}
/*#endregion */

@media (max-width: 767.98px) {
    /* 100vh on a phone includes the part under the browser bars: the end of a long menu could not be scrolled into view. */
    :not(.app_a_collapse) > .app_a_sidebar { height: 100dvh; padding-bottom: 4rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
}

/*#region Attendance (Lankomumas): who is in, who is not, where they are. Summary tiles that filter, then one row per employee in a card
   (on a phone the row stacks). The day picker is the timesheet's month picker with a day grid; on a phone it is a bottom sheet. */
.att { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; flex: 1 1 auto; min-height: 0; box-sizing: border-box; }
.att-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; }
.att-filters { display: contents; }
.att-filters.att-filters-off { display: none; }
.att-filters > * { flex: 0 1 14rem; min-width: 9rem; }
.att-eye, .att-refresh { flex: none; }
.att-dl { white-space: nowrap; }
.att-dn { font-style: normal; font-weight: 400; color: #6c757d; }
.att-date .tt2-picker { left: 0; }
.att-updated { margin-left: auto; font-size: 0.75rem; color: #6c757d; }

.att-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.att-cal-wd { text-align: center; font-size: 0.6875rem; font-weight: 600; color: #6c757d; padding-bottom: 0.25rem; }
.att-cal-day { height: 2.25rem; border: 1px solid transparent; border-radius: 6px; background: #fff; color: #2b2f3a; font-variant-numeric: tabular-nums; }
.att-cal-day:hover { background: #edf1f5; }
.att-cal-we { color: #a61e1e; }
.att-cal-today { border-color: var(--action-primary, #007bff); }
.att-cal-day.att-cal-on { background: var(--action-primary, #007bff); border-color: var(--action-primary, #007bff); color: #fff; font-weight: 600; }
.att-cal-foot { display: flex; justify-content: flex-end; margin-top: 0.625rem; }
.att-cal-today-btn { height: 2rem; padding: 0 0.75rem; border: 1px solid #dfdfdf; border-radius: 6px; background: #fff; color: var(--action-primary, #007bff); font-weight: 600; }

.att-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.att-tile { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e4e8ee; border-left-width: 4px; border-radius: 8px; text-align: left; color: #2b2f3a; }
.att-tile span { font-size: 0.75rem; color: #6c757d; }
.att-tile b { font-size: 1.5rem; font-weight: 600; }
.att-tile b small { font-size: 0.8125rem; font-weight: 400; color: #6c757d; }
.att-tile:hover { background: #f5f9ff; }
.att-tile.att-tile-on { box-shadow: 0 0 0 2px var(--action-primary, #007bff) inset; }
.att-tile-present { border-left-color: #2fb26a; }
.att-tile-absent { border-left-color: #dc3545; }
.att-tile-pending { border-left-color: #adb5bd; }
.att-tile-excused { border-left-color: #e6a700; }

.att-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.8125rem; color: #5b6472; min-height: 1.5rem; }
.att-note-off { padding: 0.125rem 0.625rem; border-radius: 999px; background: #eef0f3; color: #5b6472; font-weight: 600; }
.att-clear { border: 0; background: none; color: var(--action-primary, #007bff); }
.att-team { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.75rem; border: 1px solid #dfdfdf; border-radius: 999px; background: #fff; color: #2b2f3a; font-weight: 600; }
.att-team:hover { background: #f0f0f0; }
.att-team.att-team-on { background: var(--action-primary, #007bff); border-color: var(--action-primary, #007bff); color: #fff; }

.att-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.625rem; align-content: start; padding-bottom: 0.5rem; }
.att-card { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; padding: 0.75rem 0.875rem; background: #fff; border: 1px solid #e4e8ee; border-left: 4px solid #adb5bd; border-radius: 8px; }
.att-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.att-who { display: flex; flex-direction: column; min-width: 0; }
.att-who b { font-size: 0.875rem; font-weight: 600; color: #2b2f3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-role { font-size: 0.6875rem; color: #7a8494; line-height: 1.3; width: 100%; }
.att-card > .att-role { flex: none; }
.att-badge { flex: none; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #eef1f5; color: #5b6472; }
.att-line { font-size: 0.8125rem; color: #2b2f3a; }
.att-line small { color: #6c757d; font-size: 0.75rem; }
.att-line .fa-regular { color: #7a8494; margin-right: 0.25rem; }
.att-where .fa-solid { color: #7a8494; }
.att-muted { color: #8a94a3; }
/* Where: the pin stays beside the first line; section, machine and operation are a short trail, the "working now" tag ends it. */
.att-where { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid #eef1f5; font-size: 0.75rem; color: #5b6472; }
.att-where { align-items: center; }
.att-where > .fa-solid { flex: none; margin: 0; }
.att-path { container-type: inline-size; overflow: hidden; white-space: nowrap; min-width: 0; flex: 1 1 0; line-height: 1.35; }
.att-path > span { display: inline-block; animation: MonitoringTvTicker 20s linear infinite; }
.att-working { flex: none; font-style: normal; font-weight: 600; color: #1f5d27; background: #E4F4E6; padding: 0 0.5rem; border-radius: 999px; }
.att-empty { grid-column: 1 / -1; }

.att-s-present { border-left-color: #2fb26a; }
.att-s-present .att-badge { background: #E4F4E6; color: #1f5d27; }
.att-s-present.att-late { border-left-color: #e6a700; }
.att-s-present.att-late .att-badge { background: #FFF6C7; color: #7a5b00; }
.att-s-absent { border-left-color: #dc3545; background: #fffafa; }
.att-s-absent .att-badge { background: #FDE8E8; color: #a61e1e; }
.att-s-pending .att-badge { background: #eef1f5; color: #5b6472; }
.att-s-excused { border-left-color: #e6a700; }
.att-s-excused .att-badge { background: #FFF6C7; color: #7a5b00; }
.att-s-off { border-left-color: #d5dae1; }

@media (max-width: 900px) {
    .att-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .att-filters { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 0.5rem; }
    .att-filters.att-filters-off { display: none; }
    .att-filters > * { flex: 1 1 100%; }
    .att-eye, .att-refresh { height: 2.75rem; min-width: 2.75rem; }
    /* One row: day, eye, refresh. Today is in the picker. */
    .att-today, .att-updated { display: none !important; }
    /* The four counts are small tiles: label and number on one line, two by two. */
    .att-tiles { gap: 0.5rem; }
    .att-tile { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; }
    .att-tile span { font-size: 0.75rem; }
    .att-tile b { font-size: 1.125rem; }
    .att-tile b small { display: none; }
    .att-badge { font-size: 0.6875rem; padding: 0.0625rem 0.5rem; }
    .att-team { height: 2.5rem; }
    .att-updated { margin-left: 0; }
    .att-list { grid-template-columns: 1fr; }
    .att-card { padding: 0.875rem; }
    .att-dn { display: none; }
    .att-date .tt2-month-btn { flex: 1 1 auto; justify-content: center; }
    .att-date { flex: 1 1 0; min-width: 0; width: auto; }
    .att-cal-day { height: 2.75rem; }
    .att-cal-today-btn { height: 2.75rem; }
}
/*#endregion */

/*#region Dark mode preview */
/* Experiment: the moon button in the top bar (MainFormTabs.razor) puts .erp-dark +
   data-bs-theme="dark" on <html> (Extensions.js terraToggleDarkPreview; saved per user in
   base_UserConfig.DarkMode). data-bs-theme switches on the
   Bootstrap 5.3 dark variables, which bootstrap-external's DevExpress colours derive from. Values: the
   dark palette in DARK_MODE_FEASIBILITY.md. Tuned on Pasiūlymai / Užsakymai and its form; other pages get the
   generic part only. Nothing here applies while the class is absent. */
/* Doubled selector: Blazing Berry's [data-bs-theme=dark] block loads later and would win a tie. */
.erp-dark[data-bs-theme=dark] {
    --erp-surface: #1c1f25;
    --erp-strip: #252930;
    --erp-hover: #2c3440;
    --erp-hover-neutral: #2e323b;
    --erp-selected: #3a3f4a;
    --erp-text: #e3e6eb;
    --erp-text-emph: #f2f4f7;
    --erp-text-muted: #9aa3b2;
    --erp-tab-caption: #b4bac4;
    --erp-tab-inactive: #2a2e36;
    --erp-border: #3a3f4a;
    --erp-border-editor: #4a505c;
    --action-primary: #4c9dff !important;
    --erp-link: #3db4ff;
    --erp-save: #2fae6e;
    --erp-danger: #ff6b78;
    --erp-danger-button: #f0606d;
    --erp-invalid: #ff5c5c;
    --erp-on-accent: #13151a;
    --erp-chip-text: #1b1e24;
    --erp-float-shadow: rgba(0, 0, 0, .5);
    --erp-backdrop: rgba(0, 0, 0, .6);
    /* !important: on <html> these meet :root's own !important declarations of the same names. */
    --bs-primary: #252930 !important;
    --bs-body-bg: #1c1f25;
    --bs-body-color: #e3e6eb;
    --bs-border-color: #4a505c;
    --bs-danger: #f0606d;
    --bs-danger-rgb: 240, 96, 109;
}

.erp-dark .ListTemplate {
    color: var(--erp-text);
    background-color: var(--erp-surface);
}

/* Shell: page background (panel.css sets body white !important), top bar, sidebar */
.erp-dark body {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text);
}

.erp-dark .appUpperRow {
    background-color: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
}

/* The logo PNG has dark lettering; inverting it keeps the purple dots' hue. A light logo file would replace this. */
.erp-dark .appUpperLogo {
    filter: invert(1) hue-rotate(180deg);
}

.erp-dark .app_a_background-color-3 {
    background-color: #13151a;
}

/* List page: filter panel, action toolbar, stats strip, grid frame */
.erp-dark .ui_background-color-2,
.erp-dark .ListTemplateFitlerPanel,
.erp-dark .ListTemplateActionPanel {
    background: var(--erp-surface) !important;
}

.erp-dark .ListTemplateFilterFieldsPanel,
.erp-dark .ListTemplateActionPanel,
.erp-dark .dxbl-scroll-viewer-content ul {
    border-color: var(--erp-border) !important;
}

.erp-dark .list-stats-panel,
.erp-dark .ListFullWrapper,
.erp-dark .ButtonDropdown {
    border-color: var(--erp-border);
}

.erp-dark .list-stats-panel {
    background: var(--erp-strip);
}

.erp-dark .list-stats-tile {
    background: var(--erp-surface);
    border-color: var(--erp-border);
}

.erp-dark .list-stats-tile-caption,
.erp-dark .list-stats-tile-extra,
.erp-dark .list-stats-total,
.erp-dark .ui_placeholder {
    color: var(--erp-text-muted);
}

.erp-dark .list-stats-tile-value,
.erp-dark .list-stats-total b {
    color: var(--erp-text-emph);
}

.erp-dark .list-stats-tile-value.list-stats-danger {
    color: var(--erp-danger);
}

/* Hover: grid rows, lookup items, dropdown menu items */
.erp-dark .ui_dxdatagrid tbody tr:hover,
.erp-dark .xbutton[role="DropdownMenu"]:hover,
.erp-dark .DropdownSubmenu.open > .DropdownSubmenuTrigger {
    background-color: var(--erp-hover) !important;
}

.erp-dark .XLookUpSearchPopUp div:hover,
.erp-dark .XLookUpSearchPopUpMulti div:hover,
.erp-dark .XLookUpEditNewObjectItem:hover {
    background-color: var(--erp-hover);
}

.erp-dark .XLookUpSearchDropdownIcon:hover,
.erp-dark .ButtonDropdownSide:hover {
    background-color: var(--erp-hover-neutral);
    color: var(--erp-text);
}

/* Floating popups: lookup lists, and ButtonDropdown menus. Extensions.js moves a ButtonDropdown menu
   to <body> when it opens; for a page inside .erp-dark it copies .erp-dark + data-bs-theme onto it,
   so "body > .erp-dark" is exactly those menus. Its colours are inline styles, hence !important. */
.erp-dark .XLookUpSearchPopUp,
.erp-dark .XLookUpSearchPopUpMulti,
.erp-dark .baseWhiteBorder,
body > .erp-dark {
    background-color: var(--erp-strip) !important;
    color: var(--erp-text) !important;
    border: 1px solid var(--erp-border) !important;
    box-shadow: 0 0 10px var(--erp-float-shadow) !important;
}

.erp-dark .XLookUpEditNewObjectItem {
    background-color: var(--erp-strip);
    border-bottom-color: var(--erp-border);
    color: var(--erp-text);
}

body > .erp-dark .dxbl-btn {
    color: var(--erp-text);
    border-color: transparent;
}

body > .erp-dark .dxbl-btn:hover {
    background-color: var(--erp-hover);
}

body > .erp-dark .dxbl-btn:disabled {
    color: var(--erp-text-muted);
}

/* Form window (InnerFormSkeleton): frame, title, cards, tabs, footer buttons */
.erp-dark .ui_border-1 {
    border-color: var(--erp-border) !important;
}

.erp-dark .inner-form-window h6 {
    color: var(--erp-text-emph);
}

.erp-dark .card {
    background-color: var(--erp-surface);
    border-color: var(--erp-border);
}

.erp-dark .card-subtitle.text-muted,
.erp-dark .card-subtitle.text-muted span {
    color: var(--erp-text-muted) !important;
}

.erp-dark .dxbl-tabs-item.dxbl-active {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-emph) !important;
    border-color: var(--erp-border) !important;
}

.erp-dark .dxbl-tabs-item:not(.dxbl-active) {
    background-color: var(--erp-tab-inactive) !important;
    color: var(--erp-tab-caption) !important;
    border-color: var(--erp-border) !important;
}

.erp-dark .dxbl-tabs-item:hover {
    border-color: var(--erp-text-muted) !important;
}

.erp-dark .ButtonDropdownGreen {
    border-color: var(--erp-save);
    color: var(--erp-save);
}

.erp-dark .ButtonDropdownGreen .ButtonDropdownSideText {
    color: var(--erp-save);
}

.erp-dark .xbutton.dxbl-btn-outline-secondary {
    border-color: var(--erp-border);
    color: var(--erp-text);
}

.erp-dark .dxbl-checkbox-unchecked .dxbl-checkbox-check-element {
    background-color: var(--erp-surface) !important;
    border-color: var(--erp-border-editor);
}

.erp-dark .dxbl-scroll-viewer-scroll-thumb {
    background-color: var(--erp-border-editor) !important;
}

/* Grid column filter menu (DevExpress drop-down, rendered under <body>) */
.erp-dark .dxbl-filter-menu-dropdown .dxbl-btn-secondary {
    background-color: var(--erp-hover-neutral);
    border-color: var(--erp-border);
    color: var(--erp-text);
}

.erp-dark .dxbl-filter-menu-dropdown .dxbl-btn-primary,
.erp-dark .dxbl-filter-menu-dropdown .dxbl-btn-primary:disabled {
    color: var(--erp-on-accent) !important;
}

.erp-dark .dxbl-filter-menu-dropdown .dxbl-btn-primary:hover {
    background-color: var(--erp-link) !important;
    border-color: var(--erp-link) !important;
}

/* XCalendar pop-up (panel.css) */
.erp-dark .ui_datepicker-calendar-container {
    background-color: var(--erp-strip);
    color: var(--erp-text);
    border-color: var(--erp-border);
    box-shadow: 0 0 10px var(--erp-float-shadow);
}

.erp-dark .ui_calendar_week {
    background: var(--erp-strip);
}

.erp-dark .ui_calendar_weekend {
    background-color: var(--erp-tab-inactive);
}

.erp-dark .ui_calendar_other_month {
    background-color: var(--erp-hover);
    color: var(--erp-text-muted);
}

.erp-dark .ui_calendar_disabled {
    background-color: rgba(255, 92, 92, .15) !important;
}

.erp-dark .ui_calendar_active,
.erp-dark .ui_calendar_available:hover {
    outline-color: var(--action-primary);
}

/* ButtonDropdown: the static caption side has no hover in light (white = its background); filled hovers get dark text */
.erp-dark .ButtonDropdownSide.OneClickAction.StaticOneClickAction:hover {
    background-color: transparent;
}

.erp-dark .ButtonDropdownSideBlue:hover {
    color: var(--erp-on-accent);
}

.erp-dark .ButtonDropdownSideGreen:hover {
    background-color: var(--erp-save) !important;
    color: var(--erp-on-accent);
}

/* Virtual assistant (ChatForm + XAiChat). Its purple accent is lifted for dark (#b69ce0, 6.2:1 on the strip). */
.erp-dark .terra-chat-root {
    --terra-chat-accent: #b69ce0;
}

.erp-dark .terra-chat-panel {
    background: var(--erp-surface);
}

.erp-dark .demo-chat-ui-description {
    color: var(--erp-text-muted);
}

.erp-dark .demo-chat .terra-chip {
    background: var(--erp-strip);
    border-color: var(--erp-border);
}

.erp-dark .demo-chat .terra-chip:hover {
    background: var(--erp-hover);
}

.erp-dark .terra-chat-panel .dxbl-chatui-submitarea {
    background: var(--erp-strip) !important;
    border-color: var(--erp-border);
}

.erp-dark .terra-chat-panel .dxbl-chatui-submitarea:focus-within {
    background: var(--erp-surface) !important;
}

.erp-dark .terra-chat-panel .dxbl-chatui-submitarea textarea {
    color: var(--erp-text);
}

.erp-dark .terra-chat-aside {
    background: var(--erp-strip);
    border-right-color: var(--erp-border);
}

.erp-dark .terra-chat-newbtn {
    background: var(--erp-surface);
    border-color: var(--erp-border-editor);
    color: var(--erp-text);
}

.erp-dark .terra-chat-item__title {
    color: var(--erp-text);
}

.erp-dark .terra-chat-imports__line,
.erp-dark .terra-chat-loading,
.erp-dark .demo-chat .terra-msg__name,
.erp-dark .demo-chat .terra-typing__text {
    color: var(--erp-text-muted);
}

.erp-dark .demo-chat .demo-assistant-message .terra-msg__bubble,
.erp-dark .demo-chat .demo-chat-file-chip {
    background: var(--erp-strip);
    color: var(--erp-text);
}

.erp-dark .demo-chat .demo-user-message .terra-msg__bubble {
    background: rgba(182, 156, 224, .18);
    color: var(--erp-text);
}

.erp-dark .demo-chat .demo-error-message .terra-msg__bubble {
    color: var(--erp-danger);
}

.erp-dark .demo-chat .demo-chat-file-chip--button,
.erp-dark .demo-chat-content.is-markdown strong,
.erp-dark .demo-chat-content.is-markdown h1,
.erp-dark .demo-chat-content.is-markdown h2,
.erp-dark .demo-chat-content.is-markdown h3,
.erp-dark .demo-chat-content.is-markdown h4,
.erp-dark .demo-chat-content.is-markdown ul + p,
.erp-dark .demo-chat-content.is-markdown ol + p {
    color: var(--erp-text-emph);
}

.erp-dark .demo-chat-content.is-markdown code,
.erp-dark .demo-chat-content.is-markdown pre {
    background: rgba(255, 255, 255, .06);
}

.erp-dark .demo-chat-content.is-markdown blockquote {
    border-left-color: var(--erp-border);
    color: var(--erp-text-muted);
}

.erp-dark .demo-chat-content.is-markdown th,
.erp-dark .demo-chat-content.is-markdown td {
    border-color: var(--erp-border);
}

/* Side panels: notifications and recent history (MainFormNotificationPanel / MainFormRecentHistoryPanel) */
.erp-dark .notification-filter-buttons {
    background: var(--erp-strip);
}

.erp-dark .notification-filter-buttons .filter-btn {
    color: var(--erp-text-muted);
}

.erp-dark .notification-filter-buttons .filter-btn:hover:not(.active) {
    background: var(--erp-hover);
    color: var(--erp-text);
}

.erp-dark .notification-filter-buttons .filter-btn.active {
    background: var(--erp-surface);
    color: var(--action-primary);
}

.erp-dark .notification-card {
    background: var(--erp-strip);
    color: var(--erp-text);
}

.erp-dark .notification-card.notification-unread {
    background: var(--erp-hover);
    color: var(--erp-text);
}

.erp-dark .notification-period {
    color: var(--erp-text-muted);
}

/* Plain Bootstrap 4 inputs (XCalendar hour/minute fields, in-grid editors): bootstrap.min.css hard-codes white */
.erp-dark .form-control,
.erp-dark .form-select {
    background-color: var(--erp-surface);
    border-color: var(--erp-border-editor);
    color: var(--erp-text);
}

.erp-dark .form-control:disabled,
.erp-dark .form-control[readonly] {
    background-color: var(--erp-strip);
}

.erp-dark .ui_input-container .form-control {
    border-color: var(--erp-border-editor);
}

.erp-dark .ui_input-container .form-control:focus {
    background-color: var(--erp-surface);
    color: var(--erp-text);
}

/* XTreeList (tree panels, group trees): hover row and guide lines */
.erp-dark .xtree .TreeListLineDiv:hover {
    background-color: var(--erp-hover);
}

.erp-dark .xtree .LiChildren {
    border-left-color: var(--erp-border) !important;
}

.erp-dark .xtree ul li {
    border-left-color: var(--erp-border);
}

/* Lookup list items painted with a DB colour (GlobalXLookUpEdit.js sets it inline) */
.erp-dark [dropselector][style*="background-color"] {
    color: var(--erp-chip-text);
}

/* Lookups painted with a DB colour (priority, state) */
.erp-dark .XLookUpEdit input[style*="background-color"] {
    color: var(--erp-chip-text);
}

/* Colours picked by users in the DB stay as chip backgrounds; only their text is forced dark. */
.erp-dark .list-stats-badge,
.erp-dark [class^="COLOR"] > span {
    color: var(--erp-chip-text);
}

.erp-dark .ImagePreview {
    background-color: var(--erp-strip);
    border-color: var(--erp-border);
}
/*#endregion */

/*#region ImagePreviewInnerForm */
/* A document photo shown before it is downloaded; the photo fits the window. */
.ImagePreview {
    height: calc(100% - 0.5rem);
    margin: 0 0.5rem 0.5rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    overflow: hidden;
}

.ImagePreview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/*#endregion */

/*#region Page "?" menu and "Parašyti mums" (PageHelpButton, FeedbackDialog, PageHelpHost) */
.page-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.page-help__toggle {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8a909c;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}

    .page-help__toggle:hover,
    .page-help__toggle.is-open {
        color: #1a1a2e;
        background: #eef0f3;
    }

/* In a list's toolbar the "?" matches the printer and import icons beside it. */
.page-help--toolbar {
    align-self: center;
}

    .page-help--toolbar .page-help__toggle {
        width: 2rem;
        height: 2rem;
        border-radius: 4px;
        color: inherit;
        font-size: 1rem;
    }

/* A window title's "?" is a little quieter. */
.card-header .page-help__toggle {
    width: 22px;
    height: 22px;
    font-size: 0.88rem;
}

.page-help__backdrop {
    position: fixed;
    inset: 0;
    z-index: 2050;
}

.page-help__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: -6px;
    z-index: 2051;
    width: 290px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .14);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-help__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: #1a1a2e;
}

    .page-help__item:hover,
    .page-help__item:focus-visible {
        background: #f2f4f7;
        outline: none;
    }

.page-help__icon {
    width: 18px;
    margin-top: 2px;
    text-align: center;
    color: #4b5160;
}

.page-help__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.page-help__title {
    font-size: 0.92rem;
    font-weight: 600;
    white-space: normal;
}

.page-help__hint {
    font-size: 0.78rem;
    color: #6b7280;
    white-space: normal;
    line-height: 1.3;
}

.page-help-cards__page {
    font-size: 0.82rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.page-help-cards {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-help-cards__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e3e6ea;
    border-radius: 7px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    color: #1a1a2e;
}

    .page-help-cards__item:hover:not(:disabled) {
        background: #f2f4f7;
    }

    .page-help-cards__item:disabled {
        opacity: .5;
        cursor: default;
    }

/* "Parašyti mums" */
.feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(17, 24, 39, .35);
    backdrop-filter: blur(2px);
}

.feedback-dialog {
    position: relative;
    width: 520px;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 22px 18px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(17, 24, 39, .25);
    color: #1a1a2e;
}

.feedback-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #4b5160;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .feedback-dialog__close:hover {
        background: #f2f4f7;
    }

.feedback-dialog__title {
    margin: 0 32px 4px 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.feedback-dialog__intro {
    margin: 0 0 14px;
    font-size: 0.82rem;
    color: #4b5160;
}

.feedback-kinds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.feedback-kind {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #dde1e7;
    border-radius: 10px;
    background: #fff;
    color: #1a1a2e;
    text-align: left;
    cursor: pointer;
}

    .feedback-kind:hover {
        border-color: #b9c0ca;
    }

    .feedback-kind.is-active {
        background: #111318;
        border-color: #111318;
        color: #fff;
    }

.feedback-kind__head {
    font-weight: 600;
    font-size: 0.92rem;
}

    .feedback-kind__head i {
        margin-right: 4px;
    }

.feedback-kind__hint {
    font-size: 0.78rem;
    opacity: .8;
}

.feedback-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.88rem;
    font-weight: 600;
}

.feedback-input,
.feedback-textarea {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    padding: 8px 11px;
    border: 1px solid #dde1e7;
    border-radius: 8px;
    background: #fff;
    color: #1a1a2e;
    font-size: 0.9rem;
}

.feedback-textarea {
    min-height: 110px;
    resize: vertical;
}

    .feedback-input:focus,
    .feedback-textarea:focus {
        outline: none;
        border-color: #8a93a3;
        box-shadow: 0 0 0 3px rgba(138, 147, 163, .18);
    }

.feedback-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.feedback-image {
    position: relative;
    width: 88px;
    height: 64px;
    border: 1px solid #dde1e7;
    border-radius: 7px;
    overflow: hidden;
    background: #f5f6f8;
}

    .feedback-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.feedback-image__remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 19, 24, .7);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    cursor: pointer;
}

/* Bottom-left of a thumbnail: opens the crop editor (Feedback.js crop). */
.feedback-image__crop {
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 19, 24, .7);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    cursor: pointer;
}

    .feedback-image__crop:disabled {
        opacity: .5;
        cursor: default;
    }

/* The crop editor over the feedback form: the picture, the dragged selection, and the two buttons. */
.feedback-crop {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1rem;
    background: rgba(17, 24, 39, .72);
}

.feedback-crop__hint {
    color: #fff;
    font-size: 0.85rem;
}

.feedback-crop__stage {
    position: relative;
    line-height: 0;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.feedback-crop__canvas {
    display: block;
    max-width: 92vw;
    max-height: calc(92vh - 110px);
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

.feedback-crop__box {
    position: absolute;
    border: 2px dashed #fff;
    outline: 1px solid rgba(0, 0, 0, .6);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
    pointer-events: none;
}

    .feedback-crop__box[hidden] {
        display: none;
    }

.feedback-crop__bar {
    display: flex;
    gap: 8px;
}

.feedback-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feedback-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px dashed #c9ced6;
    border-radius: 7px;
    background: #fff;
    color: #2b2f3a;
    font-size: 0.8rem;
    cursor: pointer;
}

    .feedback-tool:hover:not(:disabled) {
        background: #f2f4f7;
    }

    .feedback-tool:disabled {
        opacity: .55;
        cursor: default;
    }

.feedback-notice {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #4b5160;
}

    .feedback-notice.is-error {
        color: #bd2130;
    }

.feedback-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.feedback-footer--end {
    justify-content: flex-end;
}

.feedback-page {
    min-width: 0;
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feedback-send,
.feedback-button {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.feedback-send {
    border: 1px solid #111318;
    background: #111318;
    color: #fff;
}

    .feedback-send:disabled {
        border-color: #9ca3af;
        background: #9ca3af;
        cursor: default;
    }

.feedback-button {
    border: 1px solid #dde1e7;
    background: #fff;
    color: #1a1a2e;
}

    .feedback-button:hover {
        background: #f2f4f7;
    }

.feedback-done {
    text-align: center;
    padding-top: 6px;
}

.feedback-done__icon {
    font-size: 2rem;
    color: #2e9d62;
    margin-bottom: 8px;
}

.feedback-done .feedback-dialog__title {
    margin-right: 0;
}

.erp-dark .page-help__toggle:hover,
.erp-dark .page-help__toggle.is-open,
.erp-dark .page-help__item,
.erp-dark .page-help-cards__item,
.erp-dark .feedback-dialog,
.erp-dark .feedback-kind,
.erp-dark .feedback-input,
.erp-dark .feedback-textarea,
.erp-dark .feedback-button,
.erp-dark .feedback-tool {
    color: var(--erp-text);
}

.erp-dark .page-help__toggle:hover,
.erp-dark .page-help__toggle.is-open,
.erp-dark .page-help__item:hover,
.erp-dark .page-help__item:focus-visible,
.erp-dark .page-help-cards__item:hover:not(:disabled),
.erp-dark .feedback-dialog__close:hover,
.erp-dark .feedback-tool:hover:not(:disabled),
.erp-dark .feedback-button:hover {
    background: var(--erp-hover-neutral);
}

.erp-dark .page-help__menu,
.erp-dark .feedback-dialog,
.erp-dark .page-help-cards__item,
.erp-dark .feedback-kind,
.erp-dark .feedback-input,
.erp-dark .feedback-textarea,
.erp-dark .feedback-tool,
.erp-dark .feedback-button {
    background: var(--erp-surface);
    border-color: var(--erp-border);
}

.erp-dark .feedback-kind.is-active,
.erp-dark .feedback-send {
    background: var(--erp-text-emph);
    border-color: var(--erp-text-emph);
    color: var(--erp-on-accent);
}

.erp-dark .page-help__hint,
.erp-dark .page-help__icon,
.erp-dark .feedback-dialog__intro,
.erp-dark .feedback-dialog__close,
.erp-dark .feedback-page,
.erp-dark .feedback-notice,
.erp-dark .page-help-cards__page {
    color: var(--erp-text-muted);
}

.erp-dark .feedback-overlay {
    background: var(--erp-backdrop);
}
/*#endregion */
/* Attendance as a status board (like the TV monitoring): a column per status, people move between columns as their status changes. */
.att-board { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: 0.75rem; overflow: auto; align-items: stretch; }
.att-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; min-height: 0; overflow-y: auto; padding: 0.5rem; border-radius: 10px; background: rgba(127, 127, 127, 0.08); }
.att-col-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0.75rem; border-radius: 8px; font-weight: 700; border-left: 6px solid #adb5bd; background: var(--erp-surface, #fff); }
.att-col-head b { font-size: 1.6rem; }
.att-col-head.att-s-present { border-left-color: #2fb26a; }
.att-col-head.att-s-absent { border-left-color: #dc3545; }
.att-col-head.att-s-excused { border-left-color: #0d6efd; }
.att-col-head.att-s-pending { border-left-color: #e6a700; }
.att-col-empty { padding: 1rem; text-align: center; opacity: 0.6; }
.att-board .att-card { animation: att-arrive 0.45s ease; }
@keyframes att-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .att-board .att-card { animation: none; } }
@media (max-width: 767.98px) { .att-board { grid-auto-flow: row; grid-auto-columns: auto; overflow-y: auto; } .att-col { overflow: visible; } }

.att.att-tv { position: fixed; inset: 0; z-index: 2500; padding: 1rem 1.25rem; background: var(--erp-surface, #fff); overflow: hidden; font-size: 1.25rem; }
.att.att-tv .att-filters, .att.att-tv .att-date, .att.att-tv .att-eye, .att.att-tv .att-note, .att.att-tv .att-tiles { display: none !important; }
.att.att-tv .att-toolbar { justify-content: flex-end; }
.att.att-tv .att-col-head { font-size: 1.6rem; }
.att.att-tv .att-col-head b { font-size: 2.6rem; }
.att.att-tv .att-card { font-size: 1.2rem; }
.att.att-tv .att-card b { font-size: 1.35rem; }

/* TimeTracker overview ("Bendra lentelė"): all employees x all days */
.tt2-overview { overflow: auto; max-height: calc(100vh - 14rem); padding: 0; }
.tt2-ov { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 0.8125rem; }
.tt2-ov th, .tt2-ov td { padding: 0; text-align: center; border-bottom: 1px solid var(--erp-border, #e5e7eb); min-width: 2.75rem; }
.tt2-ov thead th { position: sticky; top: 0; z-index: 2; background: var(--erp-surface, #fff); padding: 0.4rem 0.25rem; }
.tt2-ov .tt2-ov-name { position: sticky; left: 0; z-index: 3; min-width: 11rem; max-width: 14rem; text-align: left; padding: 0.4rem 0.6rem; background: var(--erp-surface, #fff); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt2-ov .tt2-ov-name small { display: block; font-weight: 400; opacity: 0.65; }
.tt2-ov .tt2-ov-sum { position: sticky; right: 0; z-index: 2; min-width: 4rem; font-weight: 700; background: var(--erp-surface, #fff); padding: 0 0.5rem; }
.tt2-ov .tt2-ov-we { opacity: 0.6; }
.tt2-ov .tt2-ov-today { outline: 2px solid var(--action-primary, #007bff); outline-offset: -2px; }
.tt2-ov-cell { display: block; width: 100%; min-height: 2.25rem; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.tt2-ov-cell:hover, .tt2-ov-cell:focus-visible { outline: 2px solid var(--action-primary, #007bff); outline-offset: -2px; }

/* Invoice import: the upload row (a large drop area, chips for the chosen files, one solid button). */
.import-upload { display: flex; align-items: stretch; gap: 12px; width: 100%; }
.import-upload__drop { flex: 1 1 auto; min-width: 16rem; }
.import-upload__drop .XFileUpload { border: 0; padding: 0; background: transparent !important; }
.import-upload__drop .XFileUpload .filedata { display: none !important; }
.import-upload__drop .XFileUpload .dropzone {
    box-sizing: border-box; min-height: 64px; width: 100%; padding: 0.75rem 1rem !important;
    border: 2px dashed #9bbcf3; border-radius: 10px; background-color: #f3f8ff !important; color: #212529;
    font-size: 0.9rem; font-weight: 500;
}
.import-upload__drop .XFileUpload .dropzone label { background: transparent !important; padding: 0; color: var(--action-primary); font-weight: 600; text-decoration: underline; }
.import-upload__drop .XFileUpload .dropzone:hover { background-color: #e8f1ff !important; border-color: var(--action-primary); }
.import-upload__files { flex: 0 1 330px; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; max-height: 110px; overflow-y: auto; }
.import-upload__chip { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 6px 0 8px; border: 1px solid #dfdfdf; border-radius: 6px; background: #f8f9fa; font-size: 0.8rem; }
.import-upload__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-upload__size { flex: 0 0 auto; color: #6c757d; font-size: 0.72rem; }
.import-upload__remove { flex: 0 0 auto; border: 0; background: transparent; color: #6c757d; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.import-upload__remove:hover { color: #bd2130; }
.import-upload > .xbutton { width: auto !important; min-width: 9rem; align-self: center; height: 2.5rem !important; }
@media (max-width: 767.98px) {
    .import-upload { flex-direction: column; }
    .import-upload__files { flex-basis: auto; max-height: none; }
    .import-upload > .xbutton { width: 100% !important; }
}
html.erp-dark .import-upload__drop .XFileUpload .dropzone { background-color: color-mix(in srgb, var(--action-primary) 12%, var(--erp-surface)) !important; border-color: color-mix(in srgb, var(--action-primary) 55%, transparent); color: var(--erp-text); }
html.erp-dark .import-upload__drop .XFileUpload .dropzone:hover { background-color: color-mix(in srgb, var(--action-primary) 20%, var(--erp-surface)) !important; border-color: var(--action-primary); }
html.erp-dark .import-upload__chip { background: var(--erp-strip); border-color: var(--erp-border); color: var(--erp-text); }
html.erp-dark .import-upload__size, html.erp-dark .import-upload__remove { color: var(--erp-text-muted); }
html.erp-dark .import-upload__remove:hover { color: var(--erp-danger); }
html.erp-dark .import-upload__drop .XFileUpload .dropzone label { color: var(--action-primary) !important; }