.alertify-message {
        line-height: 20px;
    }

    /* Reserve the window scrollbar's gutter from the very first paint. site.css already sets this
       on html, but that file applies a beat after first paint, so the page paints full-width once
       and then pulls in ~15px when the gutter is reserved -- the tab / button strips (and the
       whole content) visibly narrowing on the right as it loads. Declaring it inline in the head
       (no network) pins it from frame one, so the content width never shifts. */
    html {
        scrollbar-gutter: stable;
    }

    .demo-btns .btn-icon.btn-lg {
        width: calc(3rem + -5px);
        line-height: 2.5rem;
    }

    /* --- Left sidebar width lock, declared HERE in the page head -------------------------
       This must live in the page head (render-blocking, applied at the very first paint) and
       AFTER app.bundle.css. The theme's default `.page-sidebar { width: 16.875rem }` is in the
       head; if our override sat only in the body-bottom style block, the browser would paint
       once at the default width and then shift to our width once it parsed that far -- the exact
       on-load width change being reported. Declaring it here pins the sidebar (and its slimScroll
       wrapper / nav) to one width from frame one. 18rem is a single adjustable value. */
    .page-sidebar {
        width: 18rem !important;
        min-width: 18rem !important;
        max-width: 18rem !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 18rem !important;
        flex: 0 0 18rem !important;
    }

    .page-sidebar > .slimScrollDiv,
    .page-sidebar #js-primary-nav {
        width: 18rem !important;
        min-width: 18rem !important;
        max-width: 18rem !important;
    }

    /* Reserve the nav's scrollbar space at all times so the menu content doesn't jump sideways
       when the OS scrollbar (present during load) is replaced by slimScroll's overlay bar. */
    .page-sidebar #js-primary-nav,
    .page-sidebar .primary-nav {
        scrollbar-gutter: stable;
        overflow-x: hidden !important;
    }

    /* --- On-load FOUC fix: keep the button / tab / toolbar strips horizontal from the
       very first paint. Their "remove bullets + lay out horizontally" rules otherwise come
       from stylesheets that arrive late (demo.min.css is linked at the BOTTOM of each view,
       so the toolbar briefly renders as a vertical bulleted list, and #myButton/#myTab can
       flash stacked on a slow load). Declaring the critical layout inline in the page head
       puts it in the CSSOM before first paint, so these strips never flash disordered. Values
       mirror demo.min.css / _PageBreadCrumb.cshtml exactly, so steady-state layout is same. */
    .demo-btns {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .demo-btns > li {
        display: inline-block;
        margin-bottom: 7px;
    }

    /* Full-width wrapper + strips from the first paint. Without .baf-tab-wrapper's width here,
       #myButton/#myTab compute 100% of a content-width wrapper and the strips (and their bottom
       border line) paint short, then snap to full width once the body-level styles parse. The
       border-bottom is the visible full-width line, so it must be hoisted too. Values mirror
       _001_ButtonAndTab.cshtml / _PageBreadCrumb.cshtml. */
    .baf-tab-wrapper,
    [data-baf-css-key="a19a7b7b0b332a1998b9"] {
        width: 100%;
        padding-right: 16px;
    }

    #myButton,
    #myTab {
        width: 100%;
        height: 40px;
    }

    #myButton {
        float: right;
        border-bottom: solid 4px #494777;
    }

    #myTab {
        padding-left: 10px;
        border-bottom: solid 4px #4a4877;
    }

    #myButton ul,
    #myTab ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #myButton ul li {
        float: right;
    }

    #myTab ul li {
        float: left;
    }

    /* --- On-load "no surprise resize" guard ----------------------------------------------
       The theme animates .page-logo and .page-header with `transition: all 470ms` using an
       OVERSHOOT easing (cubic-bezier(.34,1.25,.3,1)). So while the layout settles on load
       (web font swaps in, theme JS adjusts classes), any width/size change is ANIMATED with a
       bounce -- the sidebar/header/tabs visibly shrink then grow. This guard kills all
       transitions and animations until the page has finished loading; the script below removes
       the `baf-no-anim` class from the root html element a couple of frames after window.load,
       so intentional interactions (menu collapse, etc.) animate normally afterwards. It lives on
       the html element because the theme's startup script rewrites the body element's class. */
    .baf-no-anim *,
    .baf-no-anim *::before,
    .baf-no-anim *::after {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }

    /* --- On-load "no surprise resize" : hold only the CONTENT region hidden until JS has settled.
       The theme's DOMContentLoaded handler READS the screen width and rebuilds the nav + re-runs
       slimScroll AFTER first paint -- a JS-driven re-measure that CSS can't prevent. We hide just
       the page content (#js-page-content -- breadcrumb, tabs, grid), NOT the shell, so the left
       menu and top header stay on screen while the content settles off-screen behind the loader.
       visibility (not display:none) keeps real dimensions so plugins can still measure. */
    .baf-hold #js-page-content {
        visibility: hidden !important;
    }

    /* Page-load spinner: shown only while the layout is held (baf-hold). It covers just the content
       region -- right of the 18rem sidebar and below the 4.125rem header -- so the left menu and
       top header remain visible during load, and the spinner sits over the area that's settling. */
    #bafPageLoader {
        position: fixed;
        top: 4.125rem;
        left: 18rem;
        right: 0;
        bottom: 0;
        z-index: 30000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: #ffffff;
        color: #6153a3;
        font-family: 'Open Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 0.2px;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: opacity 0.18s ease-out;
        transition: opacity 0.18s ease-out;
    }

    .baf-hold #bafPageLoader {
        opacity: 1;
        pointer-events: auto;
    }

    /* Leaving for another page (_GlobalAjaxLoader nav click): fade the same loader in OVER the old
       content, which stays painted underneath (no blank frame). Short, so even a fast response
       finds it fully opaque - the next page opens with it at full opacity, making one continuous
       loader from click to reveal. */
    .baf-leaving #bafPageLoader {
        opacity: 1;
        pointer-events: auto;
        -webkit-transition-duration: 0.18s;
        transition-duration: 0.18s;
    }

    /* Keep the loader's fade working even while the no-animation guard is suppressing every other
       transition, so the page reveals as a smooth cross-fade (loader eases out over the already-
       settled page) instead of an abrupt pop. */
    .baf-no-anim #bafPageLoader {
        -webkit-transition: opacity 0.18s ease-out !important;
        transition: opacity 0.18s ease-out !important;
    }

    /* The one app-wide loader mark, at the one app-wide size: Loading.svg's natural 200x44 --
       identical to the global AJAX overlay (#bafGlobalAjaxLoader) and the per-page busy loader
       (#imgPageProgress). Sized explicitly so no inherited img rule can scale it.
       No keep-spinning override is needed here: the SVG animates via SMIL inside an <img>, which
       the `.baf-no-anim * { animation: none }` guard cannot reach (that guard is why the previous
       FontAwesome icon needed one). */
    #bafPageLoader img {
        width: 200px;
        height: 44px;
        user-select: none;
        -webkit-user-drag: none;
    }

    /* === List-grid vertical fill chain -- pure flexbox, no JS, no fixed heights. =============
       The grid card fills the height between the tabs and the (already-pinned) page footer, so the
       record-count / pagination / load-time bar sits flush at the card bottom on every list/view
       page. Scoped via :has(#datatable_tabletools_wrapper) so ONLY DataTables list grids match --
       AddOrUpdate forms and Dashboards reuse these wrapper classes but lack the wrapper id, so they
       are never touched (verified). main#js-page-content (= .page-content) and .page-content-wrapper
       are already flex columns, feeding real height into div.row. The page footer is a SIBLING of
       main, pinned by SmartAdmin's own layout (.footer-function-fixed: position:fixed; bottom:0 +
       .page-content padding-bottom), so this chain never moves it. KEY: flex:1 0 auto (grow, NEVER
       shrink) so a short page fills AND a tall table grows the chain past the viewport -> the
       document scrolls, rows never clip (no overflow:hidden anywhere). min-height:0 un-clamps the
       fill. The footer bar's inline margin-top:25px is overridden with margin-top:auto !important. */
    main#js-page-content > div.row:has(#datatable_tabletools_wrapper),
    main#js-page-content > div.row:has(#datatable_tabletools_wrapper) > .col-xl-12,
    .col-xl-12:has(#datatable_tabletools_wrapper) > .panel,
    .panel:has(#datatable_tabletools_wrapper) > .m-2,
    .m-2:has(#datatable_tabletools_wrapper) > .jarviswidget,
    .jarviswidget:has(#datatable_tabletools_wrapper) > .widget-body,
    .widget-body:has(#datatable_tabletools_wrapper) > #datatable_tabletools_wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
        min-height: 0;
        min-width: 0;
        max-width: 100%;
    }

    /* .row ships flex-wrap:wrap (vendors); force a non-wrapping column so its single grid column
       receives the full height. */
    main#js-page-content > div.row:has(#datatable_tabletools_wrapper) {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    /* .col-xl-12 ships flex:0 0 100% (vendors); the chain rule above re-asserts grow -- keep width. */
    main#js-page-content > div.row:has(#datatable_tabletools_wrapper) > .col-xl-12 {
        max-width: 100%;
    }

    /* Tabs and full-width utility rows stay natural height so all slack flows to the grid column. (_000_Common between them
       emits only style/script/link/hidden markup -- zero layout height -- so it needs no rule.) */
    main#js-page-content > div.row:has(#datatable_tabletools_wrapper) > .baf-tab-wrapper,
    main#js-page-content > div.row:has(#datatable_tabletools_wrapper) > .col-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* Inside the wrapper: toolbar + table keep natural height; the footer bar is dropped to the
       card bottom (collapses to 0 on a tall table). !important beats the footer's inline 25px. */
    #datatable_tabletools_wrapper > .dt-toolbar,
    #datatable_tabletools_wrapper > table#datatable_tabletools {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    #datatable_tabletools_wrapper > .dt-toolbar-footer {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-top: auto !important;
    }

    /* Hide the floating app-shortcut circle button (bottom-right corner) on every page. */
    #navShortcut,
    .shortcut-menu {
        display: none !important;
    }

    /* Small breathing space below the page footer. */
    .page-footer {
        margin-bottom: 0.8rem !important;
    }



    /* --- Kill the up/down bounce on the tabs & buttons (permanent, not just during load) -------
       The theme animates .page-logo / .page-header / .page-footer with
       `transition: all 470ms cubic-bezier(0.34, 1.25, 0.3, 1)`. The 1.25 control point makes it
       OVERSHOOT -- the element moves past its target and springs back, i.e. visibly up then down --
       and the tab/button strips sitting just below ride along. Removing the transition makes them
       settle into place with no vertical bounce. We also pin the strips themselves so nothing can
       animate their position. (Intentional hover/colour transitions on inner controls are on
       their own selectors and are unaffected.) */
    .page-logo,
    .page-header,
    .page-footer {
        -webkit-transition: none !important;
        transition: none !important;
    }

    .page-content > .row,
    .baf-tab-wrapper,
    #myButton,
    #myTab {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
    

@media (max-width: 991.98px) {
    #bafPageLoader {
        left: 0;
    }
}