/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   Application shell layout - see Docs/LayoutStructure.md for the full write-up.
   These rules target ids/classes rendered directly by THIS component's own markup
   (#tblMain, #NavContainer, #SideNav, #RightNav, #MainContentContainer, #MainContent,
   etc.), so Blazor CSS isolation correctly scopes them here. Page-content classes that
   CHILD components/pages render into (e.g. .MainTableContainer) must stay global in
   app.css instead - CSS isolation does not reach into child components/@Body content.
   ========================================================================== */

#tblMain.tblMain_MainSite[b-j2nb7bnng5] {
    display: flex;
    height: 100%;
    min-height: 670px; /* needed for height of time entry nav */
}

#NavContainer[b-j2nb7bnng5] {
    display: flex;
    min-height: 0; /* flex items default to min-height:auto, which lets tall content force
                      this item (and thus #tblMain/the whole page) taller than the viewport
                      instead of respecting the stretched 100% height - see Docs/LayoutStructure.md */
}

#SideNav[b-j2nb7bnng5] {
    height: 100%;
    min-height: 0;
    width: 250px;
}

    #SideNav > #SideNavContents[b-j2nb7bnng5] {
        overflow-y: auto;
        height: calc(100% - 58px);
    }

#PortalName[b-j2nb7bnng5] {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    border-bottom: 2px solid var(--Header_Footer_Border_LeftSidebarText_Color);
    background-color: var(--Login_LogOff_Top_Color);

}

#RightNav[b-j2nb7bnng5] {
    height: 100%;
    min-height: 0;
    width: 280px;
    min-width: 280px;
}

#TopRightControls[b-j2nb7bnng5] {
    height: 56px;
    border-left: 1px solid transparent;
    display: flex;
    background-color: var(--Top_Color);
}

#RightNavContents[b-j2nb7bnng5] {
    height: calc(100% - 56px); /* subtract height of TopRightControls */
    border-left: 2px solid var(--Header_Footer_Border_LeftSidebarText_Color);
    position: relative;
    left: -1px;
    overflow-y: auto;
    overflow-x: hidden;
}

.imgCompanyLogo[b-j2nb7bnng5] {
    width: 210px;
    margin: 0 0 0 20px;
    margin-top: 33px;
    margin-bottom: 10px;
}

div#UsernameContainer[b-j2nb7bnng5] {
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

div#TimeMessageContainer[b-j2nb7bnng5] {
    text-align: center;
    font-size: 13px;
    margin-top: 3px;
    color: var(--Header_Footer_Border_LeftSidebarText_Color);
}

div#SideTimeTracker[b-j2nb7bnng5] {
    margin: 19px;
    padding-top: 7px;
    border-top: 2px solid var(--LeftSideNav_Border_Color);
}

.RightNavTabIcon[b-j2nb7bnng5] {
    height: 30px;
    margin: 0px;
}

.RightNavTabHeaders[b-j2nb7bnng5] {
    display: flex;
    height: 100%;
}

.RightNavTabHeader[b-j2nb7bnng5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    cursor: pointer;
}

    .RightNavTabHeader:hover[b-j2nb7bnng5],
    .RightNavTabHeader.active[b-j2nb7bnng5] {
        background-color: var(--TopNav_Hover_Color);
    }

#InfoLogout[b-j2nb7bnng5] {
    flex-grow: 1;
    display: flex;
    position: relative;
}

#InfoContainer[b-j2nb7bnng5] {
    display: inline-block;
    width: 52px;
    height: 100%;
    border-right: 2px solid white;
    cursor: pointer;
}

    #InfoContainer:hover[b-j2nb7bnng5] {
        background-color: var(--TopNav_Hover_Color);
    }

#InfoIcon[b-j2nb7bnng5] {
    background-image: url("/images/about_2940539-white.png");
    width: 28px;
    height: 28px;
    background-position: center;
    background-size: cover;
    margin: 13px;
}

#LogOffContainer[b-j2nb7bnng5] {
    display: inline-block;
    height: 100%;
    margin: auto;
    width: 100%;
    font-size: 17px;
    text-align: center;
}

    #LogOffContainer a[b-j2nb7bnng5] {
        text-decoration: none;
        color: white;
        width: 100%;
        display: block;
        height: 100%;
        padding-top: 16px;
    }

    #LogOffContainer:hover[b-j2nb7bnng5] {
        background-color: var(--TopNav_Hover_Color);
    }

#MobileLogOffContainer[b-j2nb7bnng5] {
    display: none;
    background-color: var(--Login_LogOff_Top_Color);
}

    #MobileLogOffContainer a[b-j2nb7bnng5] {
        text-decoration: none;
        color: white;
    }

#Info[b-j2nb7bnng5] {
    text-align: center;
    padding: 30px;
}

    #Info .CopyRight[b-j2nb7bnng5],
    #Info .appVersion[b-j2nb7bnng5] {
        padding: 0 0 10px 0;
        font-size: 14px;
    }

    #Info .appVersion[b-j2nb7bnng5] {
        font-size: 16px;
    }

    #Info .Row[b-j2nb7bnng5] {
        font-family: Lato-Regular;
        font-weight: bold;
    }

    #Info .Rights[b-j2nb7bnng5] {
        font-size: 12px;
    }

    #Info #BusysolLogo[b-j2nb7bnng5] {
        width: 125px;
    }

#prodWrap[b-j2nb7bnng5] {
    display: flex;
    font-size: 18px;
    margin: 0 0 10px 0;
}

#prodName[b-j2nb7bnng5] {
    align-self: center;
    margin: 0 0 0 10px;
}

.tblMain_MainSite div#MainContentContainer[b-j2nb7bnng5] {
    width: calc(100% - 530px);
    min-width: 950px;
    min-height: 0;
}

/* #MainContent is the "inner main" area every page renders into (below #tblMenu). It is a
   flex column so a page's header (.fms-page-header, fixed height), main scrollable content
   (.MainTableContainer / .fms-edit-page content, flex: 1 1 auto), and optional footer
   (.fms-edit-page-save-bar, flex: 0 0 auto) stack without any hand-computed calc() height
   math - the footer can shrink/grow with its own content but the flex column guarantees the
   total never exceeds #MainContent's own height (which itself never exceeds the viewport). */
#MainContent[b-j2nb7bnng5] {
    width: 100%;
    height: calc(100% - 57px);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* only .MainTableContainer (or its wrapper) should scroll internally -
                          without this, any sub-pixel/rounding overflow from its flex children
                          gives #MainContent its own outer scrollbar alongside the inner one */
}

/* Mobile-only top controls (rendered by this component when IsMobileDevice is true).
   Hidden by default/desktop; background-color mirrors #TopRightControls' skin coloring.
   See Docs/LayoutStructure.md. */
#TopLeftControls[b-j2nb7bnng5] {
    display: none;
    background-color: var(--Top_Color);
}

/* Mirrors .RightNavTabHeaders/.RightNavTabHeader further up this file - #TopLeftControls
   holds ONLY this icon header row (legacy's MobileRadTabStrip); real tab content renders
   into the separate sibling #SideNavContents. */
.MobileTabHeaders[b-j2nb7bnng5] {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
}

.MobileTabHeader[b-j2nb7bnng5] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .MobileTabHeader:hover[b-j2nb7bnng5],
    .MobileTabHeader.active[b-j2nb7bnng5] {
        background-color: var(--TopNav_Hover_Color);
    }

    /* Inline SVG icons (see MainLayout.razor) recolor via fill: currentColor, driven by this
       element's color - no CSS filter involved, so the iOS Safari filter-repaint bug that
       affected the old <img> + filter approach does not apply here. */
    .MobileTabHeader .MobileTabIcon[b-j2nb7bnng5] {
        max-height: 100%;
        color: var(--LeftSideNav_Font_Color, #ffffff);
    }

#SideNavTimeEntry[b-j2nb7bnng5] {
    box-sizing: border-box;
    padding: 0 19px;
}

#blazor-error-ui[b-j2nb7bnng5] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-j2nb7bnng5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
[b-zax0ziotcd] .k-menu {
    width: 100%;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-qaywkk0srk],
.components-reconnect-repeated-attempt-visible[b-qaywkk0srk],
.components-reconnect-failed-visible[b-qaywkk0srk],
.components-pause-visible[b-qaywkk0srk],
.components-resume-failed-visible[b-qaywkk0srk],
.components-rejoining-animation[b-qaywkk0srk] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-qaywkk0srk],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-qaywkk0srk],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-qaywkk0srk],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-qaywkk0srk],
#components-reconnect-modal.components-reconnect-retrying[b-qaywkk0srk],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-qaywkk0srk],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-qaywkk0srk],
#components-reconnect-modal.components-reconnect-failed[b-qaywkk0srk],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-qaywkk0srk] {
    display: block;
}


#components-reconnect-modal[b-qaywkk0srk] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-qaywkk0srk 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-qaywkk0srk 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-qaywkk0srk 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-qaywkk0srk]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-qaywkk0srk 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-qaywkk0srk {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-qaywkk0srk {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-qaywkk0srk {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-qaywkk0srk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-qaywkk0srk] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-qaywkk0srk] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-qaywkk0srk] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-qaywkk0srk] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-qaywkk0srk] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-qaywkk0srk] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-qaywkk0srk 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-qaywkk0srk] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-qaywkk0srk {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/Maintenance/CategoryMaintenance.razor.rz.scp.css */
/* CategoryMaintenance.razor uses the standard .MainTableContainer class so it picks up
   app.css's shared flex/scroll chain instead of a page-specific duplicate (see app.css's
   ".MainTableContainer" comment block). TelerikTabStrip's own k-tabstrip/k-tabstrip-content
   elements aren't a DIRECT child of .MainTableContainer's own scroll rules in a way that reaches
   the ~18 grids nested inside its tabs (mirrors SecuritySettings.razor.css's identical fix - see
   the ".MainTableContainer > .k-tabstrip" comment there for the general explanation). Add the
   same .k-tabstrip flex chain, scoped here via ::deep since TelerikTabStrip is a child component
   whose rendered markup isn't covered by this page's own CSS isolation scope by default. This
   gives every grid on every tab a real height to work against so Pageable="false" grids scroll
   internally (via Kendo's own .k-grid-content overflow) instead of growing to fit every row. */
[b-84r7rb6tkp] .MainTableContainer > .k-tabstrip {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

[b-84r7rb6tkp] .MainTableContainer > .k-tabstrip > .k-tabstrip-content {
    display: flex !important; /* Telerik renders this element with an inline
                       "style=display: block;" attribute directly on the DOM node - only
                       !important can override an inline style. */
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

[b-84r7rb6tkp] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .k-grid {
    flex: 1 1 auto;
    max-height: 100%;
}

[b-84r7rb6tkp] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .k-grid .k-grid-aria-root,
[b-84r7rb6tkp] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .k-grid .k-grid-container,
[b-84r7rb6tkp] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .k-grid .k-grid-content {
    min-height: 0;
}
/* /Components/Pages/Admin/Maintenance/PersonnelAdmin.razor.rz.scp.css */

/* Mirrors legacy ucPersonnelEdit.ascx's fixed pixel-width fields (e.g. License State 95px,
   Company Email 220px, Emergency Contact Name 249px), which never stretched to fill the page.
   Blazor's PersonnelEdit.razor uses a fluid Bootstrap row/col-md-* grid inside a single
   TelerikTabStrip that hosts every tab - including the grid-based tabs (Class/Cert, Committees,
   Crews, History, IECS Ranks, Leave, Qualifications, Sign Ons), each its own component. Anchoring
   this on #PersonnelAdminContainer (rather than scoping it to PersonnelEdit.razor.css) applies
   the same narrower, centered footprint uniformly to every tab regardless of which component
   renders its content. .k-tabstrip-content lives inside the child PersonnelEdit component, so
   ::deep is required for these descendant selectors to reach it. NOTE: for the modal selector,
   ::deep must sit immediately after .fms-add-personnel-modal-content (not at the start) since
   that element carries this component's own scope attribute directly - see the comment on the
   padding rule above. Placing ::deep before it would require a scoped ANCESTOR that doesn't
   exist (Telerik's own k-window-content wrapper isn't part of this component). */
[b-rmjmu5y9mw] #PersonnelAdminContainer .k-tabstrip-content,
.fms-add-personnel-modal-content[b-rmjmu5y9mw]  .k-tabstrip-content {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}

    /* Without an explicit width, the tabstrip content (a flex item via align-self above) shrinks
       to fit each tab's own intrinsic content width instead of sharing one common boundary -
       causing the Personal tab (widest, due to its multi-column field layout) to render wider
       than the Operational tab and the grid-based tabs (Class/Cert, Committees, Crews, History,
       IECS Ranks, Leave, Qualifications, Sign Ons). Forcing width: 100% (capped by max-width above)
       makes every tab - including each grid, which fills 100% of its own container - expand to
       the exact same boundary, no larger and no smaller. Also applied inside this page's
       "Add New Personnel" TelerikWindow modal (.fms-add-personnel-modal-content), which renders the
       same PersonnelEdit component/TelerikTabStrip but sits outside #PersonnelAdminContainer, so it
       otherwise misses this width-capping/centering treatment entirely. */
    [b-rmjmu5y9mw] #PersonnelAdminContainer .k-tabstrip-content .k-grid,
    .fms-add-personnel-modal-content[b-rmjmu5y9mw]  .k-tabstrip-content .k-grid {
        width: 100%;
    }

/* Bootstrap's .row applies negative gutter margins so its .col-* children's own padding lines
   back up with the container edge. Inside the width-capped tabstrip content above, this makes
   the .row itself render wider than its capped container, causing an unwanted horizontal
   scrollbar. Clip the .row back to the container's own width instead of removing the gutter
   margins globally (which are still needed for column alignment elsewhere). */
[b-rmjmu5y9mw] #PersonnelAdminContainer .row {
    max-width: 100%;
}

[b-rmjmu5y9mw] .SaveButtonTable {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 1px;
    margin-bottom: 0px;
    border-top: 2px solid;
    width: 100%;
    background-color: var(--Header_Footer_Border_LeftSidebarText_Color);
    border-top: 2px solid var(--Border_Color);
}

/* Percentage/flex-based height propagation from TelerikWindow's fixed Height="675px" down through
   ".k-window" -> ".k-window-content" -> this element proved unreliable in practice (this element
   kept sizing to its own tab content - e.g. 612px on Personal, 572px on Operational - instead of
   the window's full height). Sidestep that chain entirely: ".k-window-content" is made a
   positioning context in app.css (an ANCESTOR rendered by TelerikWindow itself, outside this
   component's scope), and this element is absolutely positioned to fill it exactly regardless of
   its own content's height, so the pinned .SaveButtonTable footer below always sits at the
   window's true bottom edge. NOTE: no "::deep" here - see the comment on the padding rule above
   for why ::deep never matched this element, which was the actual root cause of this bug. */
.fms-add-personnel-modal-content[b-rmjmu5y9mw] {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    /* PersonnelEdit.razor's own root ".fms-personnel-edit" div (rendered by the child component,
       hence ::deep) sits directly between .fms-add-personnel-modal-content above and .k-tabstrip
       below, but had no flex/height rules of its own - breaking the flex chain that lets
       .k-tabstrip below stretch to fill the fixed-height modal. Without this, the tab content grew
       to its own full height (e.g. the taller Personal tab) and pushed the Save/Cancel bar past
       the window's bottom instead of leaving .k-tabstrip-content to scroll internally. NOTE:
       ::deep is placed immediately after .fms-add-personnel-modal-content (not at the start) -
       see the ::deep placement comment on the width/centering rule above; the previous
       "::deep .fms-add-personnel-modal-content ..." form silently never matched. */
    .fms-add-personnel-modal-content[b-rmjmu5y9mw]  .fms-personnel-edit {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .fms-add-personnel-modal-content[b-rmjmu5y9mw]  .k-tabstrip {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .fms-add-personnel-modal-content[b-rmjmu5y9mw]  .k-tabstrip-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* Leaves room at the bottom so scrolled content never sits underneath the pinned
               Save/Cancel bar below. */
        padding-bottom: 30px;
        margin-bottom: 49px !important;
    }

    /* Pins PersonnelEdit.razor's Save/Cancel buttons (rendered as a .SaveButtonTable sibling
       AFTER the TelerikTabStrip, not inside any tab's Content, so it's outside the scrollable
       .k-tabstrip-content above) to the bottom of the modal, matching the same fixed footer
       look/behavior as SecuritySettings.razor's .SecurityBtnTable save bar and WebSettings.razor's
       .webSettingSaveContainer - both stay in view at the bottom of their container instead of
       scrolling away with the tab content above them. Requires the
       .fms-add-personnel-modal-content ancestor above to be position: relative. NOTE: ::deep
       placed immediately after .fms-add-personnel-modal-content - see comment above. */
    .fms-add-personnel-modal-content[b-rmjmu5y9mw]  .SaveButtonTable {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: var(--Header_Footer_Border_LeftSidebarText_Color);
        border-top: 2px solid var(--Border_Color);
        z-index: 2;
    }

/* /Components/Pages/Admin/Settings/SecuritySettings.razor.rz.scp.css */
/* Classes shared with WebSettings.razor - duplicated here (see WebSettings.razor.css for the
   WebSettings-labeled copies) since Blazor CSS isolation only scopes to one component.
   Renamed with a "SecuritySettings" prefix so it is obvious this copy is used here. */
.SecuritySettingsPanel[b-uvmyfdkdi0] {
}
@media (min-width: 2200px) {
    .SelfAdjustBreak[b-uvmyfdkdi0] {
        display: inline;
    }
}
.SecuritySettingsPanel input.k-input-inner[b-uvmyfdkdi0] {
    padding-block: 5px;
}
.SelfAdjustContainer[b-uvmyfdkdi0] {
    text-align: center;
}
.SelfAdjustInnerContainer[b-uvmyfdkdi0] {
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    display: inline-block;
    padding: 15px 0px 0px;
    text-align: center;
}

    .SelfAdjustInnerContainer span.subLabel[b-uvmyfdkdi0] {
        padding-right: 2px;
        margin-left: 10px;
    }

    .SelfAdjustInnerContainer span.subLabelValue[b-uvmyfdkdi0] {
        padding-right: 2px;
        margin-right: 8px;
    }
.SelfAdjustLabel[b-uvmyfdkdi0] {
    display: inline;
    white-space: nowrap;
}
[b-uvmyfdkdi0] .SecuritySettingsPanel .k-combobox .k-input-inner {
    font-size: 12px;
}

[b-uvmyfdkdi0] .SecuritySettingsPanel .k-button.inactive {
    background-color: var(--Body_Button_Color);
}


[b-uvmyfdkdi0] .SecuritySettingsPanel .k-combobox .k-input-button:hover,
[b-uvmyfdkdi0] .SecuritySettingsPanel .k-combobox .k-input-inner,
[b-uvmyfdkdi0] .SecuritySettingsPanel .k-button.inactive:hover,
[b-uvmyfdkdi0] .SecuritySettingsPanel .k-button:hover {
    background-color: var(--Body_Field_Button_Hover_Color);
}

[b-uvmyfdkdi0] .SecuritySettingsPanel .k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
    color: var(--Body_Field_Icon_Color);
}

[b-uvmyfdkdi0] .SecuritySettingsPanel .k-combobox .k-input-button,
[b-uvmyfdkdi0] .SecuritySettingsPanel .k-dropdownlist .k-input-button {
    border: none;
    background: var(--Body_Field_Button_Color);
    padding-block: 3.5px;
}

[b-uvmyfdkdi0] .SecuritySettingsPanel .k-button.active:hover {
    border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color);
    color: var(--Grid_Icon_Color);
    background-color: var(--Grid_Button_Hover_Color);
}

[b-uvmyfdkdi0] .SecuritySettingsPanel .k-button.inactive {
    color: var(--Body_Text_Color);
}

/* SecuritySettings.razor now uses the standard .MainTableContainer class (id retained on the
   markup for any incidental references) so it picks up app.css's shared flex/scroll chain
   instead of a page-specific duplicate (see app.css's ".MainTableContainer" comment block).
   TelerikTabStrip's own k-tabstrip/k-tabstrip-content elements aren't a DIRECT child of
   .MainTableContainer though (mirrors PersonnelEdit.razor's .fms-personnel-edit wrapper - see
   the ".MainTableContainer > .fms-personnel-edit" comment in app.css for the general
   explanation), so the shared ".MainTableContainer > .k-grid" rule doesn't reach grids nested
   inside this page's tabs (Groups, Roles, Check Permissions). Add the same .k-tabstrip flex
   chain, scoped here via ::deep since TelerikTabStrip is a child component whose rendered
   markup isn't covered by this page's own CSS isolation scope by default. */
[b-uvmyfdkdi0] .MainTableContainer > .k-tabstrip {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

[b-uvmyfdkdi0] .MainTableContainer > .k-tabstrip > .k-tabstrip-content {
    display: flex !important; /* Telerik renders this element with an inline
                       "style=display: block;" attribute directly on the DOM node (confirmed via
                       rendered HTML), which beats ANY external stylesheet rule regardless of
                       selector specificity - only !important can override an inline style, so
                       the plain "display: flex" above (no !important) was silently never taking
                       effect. Without this, .securityTableContainer's own "flex: 1 1 auto" has
                       no effect either (it only works when ITS parent is a flex container), so
                       it just sizes to its content instead of filling the tab pane, and the
                       height chain never reaches the nested .k-grid. */
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

[b-uvmyfdkdi0] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .k-grid {
    /* flex-grow: 0 so the grid sizes to its own content (Groups tab often only has a handful of
       rows) instead of stretching to fill all remaining space in the tab pane; flex-shrink: 1 and
       max-height: 100% still let it shrink/scroll internally when it has more rows than fit. */
    flex: 0 1 auto;
    max-height: 100%;
}

[b-uvmyfdkdi0] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .k-grid .k-grid-aria-root,
[b-uvmyfdkdi0] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .k-grid .k-grid-container,
[b-uvmyfdkdi0] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .k-grid .k-grid-content {
    min-height: 0;
}

/* The Roles tab (and similar tabs) wrap their TelerikGrid in one or more plain divs
   (.securityTableContainer/.PageTable/.MainPanel, then .RolesGridContainer) between
   .k-tabstrip-content and .k-grid. max-height:100%/height:100% only resolves against an
   ancestor with a REAL computed height - since these wrapper divs have no height/flex rules of
   their own, they break the chain started above, so .k-grid still has nothing to size against
   and grows to fit every row (the Groups tab has no such extra wrapper, which is why it wasn't
   affected). Make every such wrapper a flex column that fills its own parent, so the height
   chain reaches .k-grid regardless of how many plain divs sit in between. */
[b-uvmyfdkdi0] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .securityTableContainer,
[b-uvmyfdkdi0] .MainTableContainer > .k-tabstrip > .k-tabstrip-content .RolesGridContainer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
#SecuritySettingsContainer[b-uvmyfdkdi0]  .k-tabstrip-items-wrapper.k-hstack {
    border-bottom: 2px solid var(--Border_Color);
    padding-top: 5px;
}
#SecuritySettingsContainer .ControlTitle.PageInfoItem[b-uvmyfdkdi0] {
    background-color: var(--Header_Footer_Border_LeftSidebarText_Color);
}

#SecuritySettingsContainer .ControlTitle.PageInfoItem .PageInfoItem[b-uvmyfdkdi0] {
    top: 4px;
}

#SecuritySettingsContainer .ControlTitle.PageInfoItem .ControlTitleRight[b-uvmyfdkdi0] {
    width: 320px;
    justify-content: right;
}

.SecuritySettingsLeft[b-uvmyfdkdi0], .SecuritySettingsRight[b-uvmyfdkdi0] {
    width: 50%;
}

.SecuritySettingsCenter[b-uvmyfdkdi0] {
    width: 100%;
}
.PermissionsContainer .SecuritySettingsColumn[b-uvmyfdkdi0],
.SecuritySettingsLeft[b-uvmyfdkdi0] {
    border-right: 2px solid var(--Header_Footer_Border_LeftSidebarText_Color);
}

.SecuritySettingsSplit[b-uvmyfdkdi0] {
    display: flex;
}

.SecuritySettingsSplitStyling[b-uvmyfdkdi0] {
    border-top: 2px solid var(--Header_Footer_Border_LeftSidebarText_Color);
}

[b-uvmyfdkdi0] .UserGroupsContainer {
    border-right: 2px solid var(--Header_Footer_Border_LeftSidebarText_Color);
    width: calc(100% + 2px);
    padding-right: 2px;
}
/* /Components/Pages/Admin/Settings/WebSettings.razor.rz.scp.css */


.fieldset-container[b-d7yi4bijav] {
    height: 100%;
}
.fieldset-container fieldset[b-d7yi4bijav] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .settingTable[b-d7yi4bijav] {
        padding: 5px 0px 15px;
        margin: auto;
    }
.webSettingSaveContainer[b-d7yi4bijav] {
    position: absolute;
    bottom: 0px;
    display: block;
    justify-content: center;
    width: 100%;
    background-color: var(--Header_Footer_Border_LeftSidebarText_Color);
    border-top: 2px solid var(--Border_Color);
}

.webSettingSaveContainer .SaveButtonTable[b-d7yi4bijav] {
    padding: 0px;
}

.imageFlexContainer[b-d7yi4bijav] {
    display: flex;
    padding: 20px;
    height: calc(100% - 80px);
}

    .imageFlexContainer .dropdownContainer[b-d7yi4bijav] {
        height: calc(100% - 18px)
    }

.imagePreview[b-d7yi4bijav] {
    text-align: center;
    height: 220px;
    display: flex;
    align-items: center;
}

.imgCompanyLogoPreview[b-d7yi4bijav] {
    width: 110px;
    margin: auto;
}

.backgroundPreview[b-d7yi4bijav] {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 258px;
    width: 530px;
    overflow: hidden;
}

.imgLoginPreview[b-d7yi4bijav] {
    height: 258px;
}

.backgroundPreview.Ratio1610[b-d7yi4bijav] {
    height: 291px;
}

    .backgroundPreview.Ratio1610 .imgLoginPreview[b-d7yi4bijav] {
        height: 291px;
    }

.backgroundPreview.Ratio32[b-d7yi4bijav] {
    height: 313px;
}

    .backgroundPreview.Ratio32 .imgLoginPreview[b-d7yi4bijav] {
        height: 313px;
    }

.backgroundPreview.Ratio43[b-d7yi4bijav] {
    height: 357px;
}

    .backgroundPreview.Ratio43 .imgLoginPreview[b-d7yi4bijav] {
        height: 357px;
    }

.ImageNameContainer[b-d7yi4bijav] {
    display: flex;
    width: 200px;
}

.specialWidth[b-d7yi4bijav] {
    width: 130px;
}

.webSetFileLabel[b-d7yi4bijav] {
    margin: 2px 10px;
    font-size: 11px;
    font-weight: bold;
}

.imagePreview[b-d7yi4bijav],
.backgroundPreview[b-d7yi4bijav],
.dropdownContainer.containerWithBorder[b-d7yi4bijav] {
    border-top: 2px solid var(--FieldsBackground_DropDown_SectionBars_Border_Color);
}

.backgroundPreview[b-d7yi4bijav],
.imagePreview[b-d7yi4bijav] {
    border-bottom: 2px solid var(--FieldsBackground_DropDown_SectionBars_Border_Color);
}

.webSettingSaveContainer .flexRow[b-d7yi4bijav] {
    flex-direction: row;
    margin: 10px 10px;
}

[b-d7yi4bijav] .LoginImagePillButton {
    width: 150px;
    height: 30px;
    border-radius: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: transparent;
    color: var(--LeftSidebar_Text_ScrollbarBackground_Color, #b21f26);
    border: 2px solid var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
}
    [b-d7yi4bijav] .LoginImagePillButton:hover {
        background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
    }
        [b-d7yi4bijav] .k-grid.NoLeftRightPadding {
            padding-left: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
        }
        /* Classes shared with SecuritySettings.razor - duplicated here (see SecuritySettings.razor.css
   for the SecuritySettings-labeled copies) since Blazor CSS isolation only scopes to one component. */
        .SettingsPanel[b-d7yi4bijav] {
        }

            .SettingsPanel input.k-input-inner[b-d7yi4bijav] {
                padding-block: 5px;
            }

        [b-d7yi4bijav] .SettingsPanel .k-combobox .k-input-inner {
            font-size: 12px;
        }

        [b-d7yi4bijav] .SettingsPanel .k-combobox,
        [b-d7yi4bijav] .SettingsPanel .k-dropdownlist,
        [b-d7yi4bijav] .SettingsPanel .k-input {
            background: var(--Body_Field_Background_Color)
        }

        [b-d7yi4bijav] .SettingsPanel .k-button.inactive {
            background-color: var(--Body_Button_Color);
        }
        [b-d7yi4bijav] .SettingsPanel .k-combobox .k-input-inner,
        [b-d7yi4bijav] .SettingsPanel span.k-combobox:hover,
        [b-d7yi4bijav] .SettingsPanel span.k-dropdownlist:hover,
        [b-d7yi4bijav] .SettingsPanel span.k-combobox.k-input:hover .k-input-inner,
        [b-d7yi4bijav] .SettingsPanel span.telerik-blazor.k-input:hover,
        [b-d7yi4bijav] .SettingsPanel span.k-numerictextbox.k-input:hover {
            background-color: var(--Body_Field_Background_Hover_Color);
        }

        [b-d7yi4bijav] .SettingsPanel .k-combobox .k-input-button:hover,

        [b-d7yi4bijav] .SettingsPanel .k-button.inactive:hover,
        [b-d7yi4bijav] .SettingsPanel .k-button:hover {
            background-color: var(--Body_Field_Button_Hover_Color);
        }

        [b-d7yi4bijav] .SettingsPanel .k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
            color: var(--Body_Field_Icon_Color);
        }
        [b-d7yi4bijav] .SettingsPanel button.k-button.gridlike-button .k-button-icon.k-svg-icon > svg {
            color: var(--Grid_Icon_Color);
        }

        [b-d7yi4bijav] .SettingsPanel .k-combobox .k-input-button,
        [b-d7yi4bijav] .SettingsPanel .k-dropdownlist .k-input-button {
            border: none;
            background: var(--Body_Field_Button_Color);
            padding-block: 3.5px;
        }

        [b-d7yi4bijav] .SettingsPanel .k-button.active:hover {
            border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color);
            color: var(--Grid_Icon_Color);
            background-color: var(--Grid_Button_Hover_Color);
        }

        [b-d7yi4bijav] .SettingsPanel .k-button.inactive {
            color: var(--Body_Text_Color);
        }

        [b-d7yi4bijav] .SettingsPanel .k-tabstrip {
            height: calc(100% - 47px);
        }

        .WebSettingLeft[b-d7yi4bijav], .WebSettingRight[b-d7yi4bijav] {
            width: 50%;
        }

        .WebSettingCenter[b-d7yi4bijav] {
            width: 100%;
        }

        .WebSettingLeft[b-d7yi4bijav] {
            border-right: 2px solid var(--Header_Footer_Border_LeftSidebarText_Color);
        }

        .SecuritySettingsSplit[b-d7yi4bijav] {
            display: flex;
        }

        .SS_splitstyling[b-d7yi4bijav] {
            border-bottom: 2px solid var(--Header_Footer_Border_LeftSidebarText_Color);
        }

[b-d7yi4bijav] .k-radio:checked,
[b-d7yi4bijav] .k-radio.k-checked {
    border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color);
    color: var(--LeftSidebar_Text_ScrollbarBackground_Color, #b21f26);
    background-color: transparent;
}

    [b-d7yi4bijav] .k-radio:checked:focus,
    [b-d7yi4bijav] .k-radio.k-checked.k-focus {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--Sidebars_Border_Color) 30%, transparent)
    }
/* /Components/Pages/Admin/Workflow/Adjustments.razor.rz.scp.css */
/* CSS for Adjustments component */
[b-p7lvy6mity] .k-grid-header-sticky,
[b-p7lvy6mity] td.k-grid-content-sticky {
    background-color: transparent !important;
}
/* /Components/Pages/Admin/Workflow/DutyAdmin.razor.rz.scp.css */
/* Reuses the same icon color as EventCategoryVisuals's PendingSwap / UpcomingEventsGrid's
   "icon-pendingswap" class so swap-related icons are visually consistent across the app. */
.icon-pendingswap[b-2qo62p7mre] {
    color: var(--UpcomingEvents_Icon_PendingSwap_Color, #4a148c);
}

/* Locking the command column gives Kendo's sticky cells their own solid background so they can
   overlay content while scrolling, which stands out against the grid's alternating row/hover
   colors. Kendo sets that background with higher specificity, so !important is needed here to
   make the sticky cells transparent and let the column blend back in with its row. */
[b-2qo62p7mre] .k-grid-header-sticky,
[b-2qo62p7mre] td.k-grid-content-sticky {
    background-color: transparent !important;
}
.fms-edit-panel .SaveButtonTable[b-2qo62p7mre] {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 30px;
    padding-bottom: 20px;
}
/* /Components/Pages/Admin/Workflow/LeaveAdmin.razor.rz.scp.css */
/* CSS for LeaveAdmin component */
.MainTableContainer[b-s0mlitahs0],
.StationOpPanel[b-s0mlitahs0] {
    height: 100%;
}
/* /Components/Pages/Duty/CrewStaffingProfile.razor.rz.scp.css */
/* Locking a TimeEntriesGrid command column gives Kendo's sticky cells their own solid
   background so they can overlay content while scrolling, which stands out against the
   grid's alternating row/hover colors. Kendo sets that background with higher specificity,
   so !important is needed here to make the sticky cells transparent and let the column
   blend back in with its row. */
[b-v18m848rgd] .k-grid-header-sticky,
[b-v18m848rgd] td.k-grid-content-sticky {
    background-color: transparent !important;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* CSS for Home component */

/* Legacy Home.aspx let the browser's own scrollbar handle overflow: the whole content area
   (Messages/Event Signup/Swaps panels) grew to whatever height it needed and, once that
   exceeded the visible viewport, a single vertical scrollbar let the user scroll the panels
   as one unit while the left/right nav stayed put. app.css's shared "#MainContent > div:only-child"
   rule (see Docs/LayoutStructure.md) instead forces overflow: hidden on this page's root and
   expects an inner .MainTableContainer to own its own internal scrollbar - that pattern is right
   for grid-heavy pages (e.g. DepartedMembers.razor, where only the grid scrolls) but wrong for
   Home, whose root IS .MainTableContainer/div:only-child at the same time. Override just this
   page's root so the whole panel stack scrolls together instead of clipping. */
#HomeMainContent[b-58aq5ezw4m] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* Root-level TelerikPanelBar items render as .k-panelbar > .k-panelbar-header directly
   (there is no .k-panelbar-items wrapper, and .k-panelbar-item/.k-panelbar-group are only
   used for nested sub-items), so target .k-panelbar-header:first-child to affect only the
   first (Messages) panel. */

/* 1. Hides the arrow icon container for only the very first panel */
[b-58aq5ezw4m] .k-panelbar > .k-panelbar-header:first-child .k-panelbar-toggle {
    display: none !important;
}

/* 2. Changes the mouse cursor back to default arrow instead of a hand pointer */
[b-58aq5ezw4m] .k-panelbar > .k-panelbar-header:first-child {
    cursor: default !important;
}

    /* 3. Removes the subtle background hover/highlight color change */
    /*::deep .k-panelbar > .k-panelbar-header:first-child:hover,
    ::deep .k-panelbar > .k-panelbar-header:first-child > .k-link:hover {*/
        /*background: none !important;
        background-color: transparent !important;*/
    /*}*/

/* Locking a TimeEntriesGrid command column gives Kendo's sticky cells their own solid
   background so they can overlay content while scrolling, which stands out against the
   grid's alternating row/hover colors. Kendo sets that background with higher specificity,
   so !important is needed here to make the sticky cells transparent and let the column
   blend back in with its row. */
[b-58aq5ezw4m] .k-grid-header-sticky,
[b-58aq5ezw4m] td.k-grid-content-sticky {
    background-color: transparent !important;
}

.SaveButtonTable[b-58aq5ezw4m] {
    margin-bottom: 10px;
    margin-top: 0px;
}
/* /Components/Pages/Kiosk/DeployedPersonnel.razor.rz.scp.css */
/* CSS for DeployedPersonnel component */
div#DeployedPersonnelTenantPicker[b-b615ruviog] {
    max-width: 600px;
    margin: auto;
    width: 50%;
    min-width: 400px;
}
h2[b-b615ruviog] {
    text-align: center;
}
.tenant-btn[b-b615ruviog] {
    width: 100%;
}
#DeployedPersonnelContainer[b-b615ruviog] {
    background: var(--SectionBackground_Border_Color);
}
/* /Components/Pages/Operations/MyStationOperations.razor.rz.scp.css */
/* Locking a TimeEntriesGrid command column gives Kendo's sticky cells their own solid
   background so they can overlay content while scrolling, which stands out against the
   grid's alternating row/hover colors. Kendo sets that background with higher specificity,
   so !important is needed here to make the sticky cells transparent and let the column
   blend back in with its row. */
[b-yus84zh8c3] .k-grid-header-sticky,
[b-yus84zh8c3] td.k-grid-content-sticky {
    background-color: transparent !important;
}
/* /Components/Pages/Operations/UnitAssignment.razor.rz.scp.css */
#UnitAssignmentContainer[b-ndyp0zf1or] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.UABoard[b-ndyp0zf1or] {
    display: flex;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

/* Staffing (left) panel — default collapsed/unpinned (mirrors legacy §3.1 CollapsePanelByDefault).
   Collapsed state is a thin expansion bar only (no border/padding bulk). */
.UAStaffing[b-ndyp0zf1or] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    transition: width 0.15s ease-in-out;
    overflow: hidden;
    z-index: 5;
}

.UAStaffing.Collapsed[b-ndyp0zf1or] {
    width: 20px;
    cursor: pointer;
}

.UAStaffing.Collapsed:hover[b-ndyp0zf1or] {
    background: #f1f3f5;
}

.UAStaffing.Expanded[b-ndyp0zf1or] {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid #dee2e6;
}

/* Unpinned + expanded: overlay the main board (legacy "lays overtop the main unit panel area"). */
.UABoard:not(.Pinned) .UAStaffing.Expanded[b-ndyp0zf1or] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

/* Pinned + expanded: push the main board over instead of overlaying it. */
.UABoard.Pinned .UAStaffing.Expanded[b-ndyp0zf1or] {
    position: relative;
}

.UAStaffingHeader[b-ndyp0zf1or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}

.UAStaffing.Expanded .UAStaffingHeader[b-ndyp0zf1or] {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
}

.UAStaffing.Collapsed .UAStaffingHeader[b-ndyp0zf1or] {
    justify-content: center;
    padding: 0.5rem 0;
    height: 100%;
}

.UAStaffing.Collapsed .UAStaffingHeaderActions[b-ndyp0zf1or] {
    height: 100%;
}

[b-ndyp0zf1or] .UAStaffingToggleButton {
    padding: 0 !important;
    color: var(--Header_Button_Color, #b21f26);
}

    [b-ndyp0zf1or] .UAStaffingToggleButton .k-svg-icon {
        /* Default thickness is 2. Increase to 3.5 or 4 for a bolder look */
           --kendo-icon-stroke-width: 3.5; 
    }
/* Optional: Ensures the bolder chevron edges do not clip on the sides */
[b-ndyp0zf1or] .UAStaffingToggleButton svg {
    overflow: visible !important;
}

.UAStaffing.Collapsed[b-ndyp0zf1or]  .UAStaffingToggleButton {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.UAStaffingHeaderActions[b-ndyp0zf1or] {
    display: flex;
    /*align-items: center;*/
    gap: 0.25rem;
}

[b-ndyp0zf1or] .UAPinButton.Pinned {
    color: var(--Header_Button_Color, #b21f26);
}

[b-ndyp0zf1or] .UABoard .k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
    color: var(--Header_Button_Color, #b21f26);
}
/* Unpinned: show the pin icon at a 45deg "loose" angle. Pinned: rotate upright/"locked-in".
   TelerikButton renders its icon in a child <span> (k-svg-icon) - ::deep is required (on
   .UAPinButton itself too) since CSS-isolation scope attributes don't propagate into the
   third-party component's rendered markup. */
[b-ndyp0zf1or] .UAPinButton .k-svg-icon {
    display: inline-block;
    transition: transform 0.15s ease-in-out;
    transform: rotate(45deg);
    color: var(--Header_Button_Color, #b21f26);
}

[b-ndyp0zf1or] .UAPinButton.Pinned .k-svg-icon {
    transform: rotate(0deg);
    color: var(--Header_Button_Color, #b21f26);
}

/* Optional: Ensures the bolder chevron edges do not clip on the sides */
[b-ndyp0zf1or] .UAPinButton svg {
    overflow: visible !important;
}


.UAStaffingList[b-ndyp0zf1or] {
    overflow-y: auto;
    height: calc(100% - 40px);
}

.UAStaffPersonRow[b-ndyp0zf1or] {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: grab;
}

.UAStaffPersonRow:hover[b-ndyp0zf1or] {
    background: #f8f9fa;
}

.UAStaffName[b-ndyp0zf1or] {
    font-weight: 500;
}

.UAStaffStart[b-ndyp0zf1or] {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Main board (unit blocks) — mirrors legacy's RecalculateColumnCount/AddColumnBreak:
   unit blocks are a fixed width and flow into as many columns as fit (Assigned Units
   and Unassigned Units both use the same multi-column treatment), rather than
   stretching each block to fill the full container width. A minimum of 3 columns
   is guaranteed via the container's min-width. */
.UAMain[b-ndyp0zf1or] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.75rem 1rem;
    overflow-y: auto;
}

/* Section label/divider bar above each unit group (Assigned Units / Unassigned Units),
   matching legacy's full-width banner-style group headers. */
.UASectionHeader[b-ndyp0zf1or] {
    margin: 0 -1rem 0.75rem -1rem;
    background: #e9ecef;
    font-weight: 600;
    text-align: center;
    padding: 8px 0px;
    color: var(--LeftSidebar_Text_ScrollbarBackground_Color);
    background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
    border-bottom: 2px solid var(--Border_Color);
}

.UASectionHeader.mt-4[b-ndyp0zf1or] {
    margin-top: 1.5rem;
}

/* Controls column widths. Min width is column width x min number of columns + 10px times number of spaces between columns */
.UAUnitGrid[b-ndyp0zf1or] {
    column-width: 320px;
    column-gap: 20px;
    min-width: calc(320px * 2 + 20px * 1);
}

.UAUnitBlock[b-ndyp0zf1or] {
    width: 100%;
    border: 1px solid var(--FieldsBackground_DropDown_SectionBars_Border_Color);
    border-radius: 4px;
    overflow: hidden;
    break-inside: avoid-column;
    margin-bottom: 0.75rem;
    display: inline-block;
}

    .UAUnitBlock.DragOver[b-ndyp0zf1or] {
        outline: 2px dashed var(--kendo-color-primary, #0d6efd);
    }

.UAUnitHeader[b-ndyp0zf1or] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    background: #f1f3f5;
    /*font-weight: 600;*/
    cursor: pointer;
    /*From legacy*/
    /*width: 250px;*/
    /*display: block;*/
    color: var(--LeftSidebar_Text_ScrollbarBackground_Color);
    break-before: avoid-column;
    break-after: avoid-column;
    break-inside: avoid-column;
    border-top: 2px solid var(--Border_Color);
    background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
}

.UAPositionRow[b-ndyp0zf1or] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.35rem 0.6rem;
    border-top: 1px solid #f0f0f0;
    min-height: 2rem;
    white-space: nowrap;
    background-color: white;
    break-before: avoid-column;
    break-after: avoid-column;
    break-inside: avoid-column;
    border-top: 1px solid var(--Border_Color);
    /*width: 250px;*/
}
    .UAPositionRow:hover[b-ndyp0zf1or] {
        background-color: var(--FieldsBorder_MenuBorder_RightSidebar_Info_Color);
    }

.UAPositionRow.Occupied[b-ndyp0zf1or] {
    background: #f8fff8;
}

.UAPositionRow.DragOver[b-ndyp0zf1or] {
    outline: 2px dashed var(--kendo-color-primary, #0d6efd);
    outline-offset: -2px;
    background-color: var(--FieldsBorder_MenuBorder_RightSidebar_Info_Color);
}

.UAPositionDescription[b-ndyp0zf1or] {
    font-size: 12px;
    /*color: #495057;*/
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width : 80px;
    /*From Legacy*/
    padding-top: 7px;
    border: none;
    color: var(--LeftSidebar_Text_ScrollbarBackground_Color);
    white-space: nowrap;
}

.UADuplicateIcon[b-ndyp0zf1or] {
    color: #dc3545;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

[b-ndyp0zf1or] .UADuplicateIcon .k-svg-icon {
    width: 14px;
    height: 14px;
}

.UAPositionOccupants[b-ndyp0zf1or] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-start;
    margin-left: 0.5rem;
    /*From Legacy*/
    color: var(--LeftSidebar_Text_ScrollbarBackground_Color);
}

.UAOccupant[b-ndyp0zf1or] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.1rem 0.4rem;
    background: var(--UA_Occupant_Background, #e7f5ff);
    border-radius: 3px;
    font-size: 12px;
    cursor: grab;
}

.UAOccupantName[b-ndyp0zf1or] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.UAOverrideToggleIcon[b-ndyp0zf1or] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    padding: 1px;
}

.UAOverrideStatusIcon[b-ndyp0zf1or] {
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    padding: 1px;
}

.UAOverrideStateIcon[b-ndyp0zf1or] {
    width: 12px;
    height: 12px;
}

[b-ndyp0zf1or] .UAOverrideToggleIcon.Locked .UAOverrideStateIcon,
[b-ndyp0zf1or] .UAOverrideStatusIcon.Locked .UAOverrideStateIcon {
    color: var(--UA_Locked_Icon_Color, #b42318);
}

[b-ndyp0zf1or] .UAOverrideToggleIcon.Unlocked .UAOverrideStateIcon,
[b-ndyp0zf1or] .UAOverrideStatusIcon.Unlocked .UAOverrideStateIcon {
    color: var(--UA_Unlocked_Icon_Color, #027a48);
}

.UAOverrideToggleIcon.Locked[b-ndyp0zf1or],
.UAOverrideStatusIcon.Locked[b-ndyp0zf1or] {
    background-color: var(--UA_Locked_Icon_Background, rgba(180, 35, 24, 0.12));
}

.UAOverrideToggleIcon.Unlocked[b-ndyp0zf1or],
.UAOverrideStatusIcon.Unlocked[b-ndyp0zf1or] {
    background-color: var(--UA_Unlocked_Icon_Background, rgba(2, 122, 72, 0.12));
}

.UAOverrideToggleIcon:hover[b-ndyp0zf1or] {
    filter: brightness(0.95);
}

[b-ndyp0zf1or] .UARemoveButton {
    padding: 0 !important;
    line-height: 1;
}

.UAEmptyText[b-ndyp0zf1or] {
    color: var(--Grid_Text_Color);
    font-style: italic;
    padding: 0.5rem 0;
    break-inside: avoid-column;
    display: inline-block;
    width: 100%;
}
/* /Components/Pages/Public/Default.razor.rz.scp.css */
/* Ensure the page fills full viewport height since this page has no layout wrapper.
   Legacy's #tblDefault/.DefaultContentMainClass use height:100% (not min-height:100vh).
   Forcing min-height:100vh here stretched the container taller than its content,
   pushing DefaultFooter far below the fold on mobile. Match legacy with height:100%. */
[b-sbivjvoj9t] #tblDefault {
    height: 100%;
}
/* /Components/Pages/Public/NoAccess.razor.rz.scp.css */
/* CSS for NoAccess component */
#tblNoAccess[b-htq5ceh99l] {
    display: flex;
    justify-content: center;
    height: 100%;
}

.NoAccessContentMainClass[b-htq5ceh99l] {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#NoAccessContentMain[b-htq5ceh99l],
#NoAccessContentMain *[b-htq5ceh99l] {
    color: #fff; 
}

#NoAccessTop[b-htq5ceh99l] {
    display: flex;
    justify-content: center;
    height: 80px;
    width: 350px;
}

#NoAccessTop > div[b-htq5ceh99l] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    font-size: 24px;
}

#NoAccessTop .Rockwell[b-htq5ceh99l] {
    font-size: 30px;
}
#NoAccessContentContainer[b-htq5ceh99l] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 350px;
    /*height: 180px;*/
    margin: 3px 0 0 0;
    z-index: 1;
}

#ltNoAccessMsgContainer[b-htq5ceh99l] {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    margin: 25px;
}
/* /Components/Pages/Reports/Admin/MailingLabels.razor.rz.scp.css */
#reportViewer1.report-viewer-container[b-e84bfacvgy] {
    position: relative;
}

.report-frame[b-e84bfacvgy] {
    width: 100%;
    height: 900px;
    border: 1px solid #ccc;
}
/* /Components/Pages/Reports/Admin/MeetingAttendanceForms.razor.rz.scp.css */
#reportViewer1.report-viewer-container[b-fjr20bam51] {
    position: relative;
}

.report-frame[b-fjr20bam51] {
    width: 100%;
    height: 900px;
    border: 1px solid #ccc;
}
/* /Components/Pages/Reports/PersonnelAnalysis.razor.rz.scp.css */
/* Reuses the same icon color as EventCategoryVisuals's PendingSwap / UpcomingEventsGrid's
   "icon-pendingswap" class so swap-related icons are visually consistent across the app. */
.icon-pendingswap[b-m0t4imw55c] {
    color: var(--UpcomingEvents_Icon_PendingSwap_Color, #4a148c);
}
/* /Components/Pages/Reports/PersonnelProfile.razor.rz.scp.css */
/* Locking a TimeEntriesGrid command column gives Kendo's sticky cells their own solid
   background so they can overlay content while scrolling, which stands out against the
   grid's alternating row/hover colors. Kendo sets that background with higher specificity,
   so !important is needed here to make the sticky cells transparent and let the column
   blend back in with its row. */
[b-e26xxh0xfz] .k-grid-header-sticky,
[b-e26xxh0xfz] td.k-grid-content-sticky {
    background-color: transparent !important;
}
/* /Components/Pages/Reports/Standby/IndividualStaffingProfile.razor.rz.scp.css */
/* CSS for IndividualStaffingProfile component */
.TotalHours[b-s1zftjgvda],
.TotalMinutes[b-s1zftjgvda] {
    display: inline-block;
}
.TotalHours[b-s1zftjgvda] {
    width: 119px;
    margin-left: 30px;
}
.TotalMinutes[b-s1zftjgvda] {
    width: 86px;
}
[b-s1zftjgvda] tfoot.k-table-tfoot tr,
[b-s1zftjgvda] tfoot.k-table-tfoot tr:hover {
    background: var( --LeftSidebar_Text_ScrollbarBackground_Color);
}
[b-s1zftjgvda] tfoot.k-table-tfoot td {
    color: white;
}
.FooterTotal[b-s1zftjgvda] {
    text-align: right;
    margin-right: 12px;
}
.FooterCalc[b-s1zftjgvda] {
    position: relative;
    left: -3px;
}
/* /Components/Shared/Common/RoleSettings.razor.rz.scp.css */
/* CSS for RoleSettings component */
.EditPermissionContainer[b-4gxhmf7dxt] {
    display: flex;
    align-items: start;
}
div#EditPermissionContainer[b-4gxhmf7dxt] {
    padding: 4px;
    padding-top: 15px;
    border-top: 2px solid var(--Border_Color);
}
div#EditPermissionContainer .flexChild[b-4gxhmf7dxt] {
    margin-top: 10px;
}
/* /Components/Shared/Common/UpcomingEventsGrid.razor.rz.scp.css */
.calendarCellContent[b-0r9i73qyln] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 20px;
}

[b-0r9i73qyln] .k-calendar-td.k-other-month {
    background-color: color-mix(in srgb, var(--Grid_Text_Color, #8f90ba) 12%, transparent);
}

.calendarDayNumber[b-0r9i73qyln] {
    position: relative;
    z-index: 0;
    font-size: inherit;
}

.calendarDayNumber:has(+ .calendarEventIcon)[b-0r9i73qyln] {
    font-size: 0.8em;
    position: absolute;
    bottom: -2px;
    right: -2px;
}

.calendarEventIcon[b-0r9i73qyln] {
    position: absolute;
    top: -4px;
    left: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    opacity: 1;
    z-index: 1;
    background: var(--kendo-color-surface, #fff);
    border-radius: 50%;
}

.calendarEventIcon :deep(svg)[b-0r9i73qyln] {
    width: 100%;
    height: 100%;
}

.icon-meeting[b-0r9i73qyln] {
    color: var(--UpcomingEvents_Icon_Meeting_Color, #0d47a1);
}

.icon-drill[b-0r9i73qyln] {
    color: var(--UpcomingEvents_Icon_Drill_Color, #e65100);
}

.icon-activities[b-0r9i73qyln] {
    color: var(--UpcomingEvents_Icon_Activities_Color, #1b5e20);
}

.icon-duty[b-0r9i73qyln] {
    color: var(--UpcomingEvents_Icon_Duty_Color, #006064);
}

.icon-pendingswap[b-0r9i73qyln] {
    color: var(--UpcomingEvents_Icon_PendingSwap_Color, #4a148c);
}

.icon-activityexpiration[b-0r9i73qyln] {
    color: var(--UpcomingEvents_Icon_ActivityExpiration_Color, #b71c1c);
}

.icon-optimization[b-0r9i73qyln] {
    color: var(--UpcomingEvents_Icon_MultipleEvents_Color, #000000);
}

.icon-class[b-0r9i73qyln] {
    color: var(--UpcomingEvents_Icon_Class_Color, #000000);
}


.calendarLegend[b-0r9i73qyln] {
    margin-top: 6px;
    font-size: 0.75rem;
}

.calendarLegend summary[b-0r9i73qyln] {
    cursor: pointer;
    font-weight: 600;
    text-align: left;
    list-style: none;
}

.calendarLegend summary[b-0r9i73qyln]::-webkit-details-marker {
    display: none;
}

.calendarLegend summary[b-0r9i73qyln]::before {
    content: "▸ ";
}

.calendarLegend[open] summary[b-0r9i73qyln]::before {
    content: "▾ ";
}

.calendarLegendItems[b-0r9i73qyln] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: center;
    margin-top: 6px;
}

.legendItem[b-0r9i73qyln] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.legendItem :deep(svg)[b-0r9i73qyln] {
    width: 14px;
    height: 14px;
    color: inherit;
    fill: currentColor;
}

[b-0r9i73qyln] .currentEventRow {
    background-color: color-mix(in srgb, var(--UpcomingEvents_CurrentEvent_Color, #ffe082) 40%, transparent) !important;
    box-shadow: inset 3px 0 0 0 var(--UpcomingEvents_CurrentEvent_Color, #ffb300);
}

[b-0r9i73qyln] .currentEventRow .nestedGroup {
    font-weight: 600;
}

[b-0r9i73qyln] .k-grid-table button.telerik-blazor.k-icon-button {
    background: transparent;
}
/* /Components/Shared/Crews/CrewQualificationsCrosstab.razor.rz.scp.css */
/* Horizontal scrolling for the pivot's many Crew/Qualification leaf columns is handled by
   TelerikPivotGrid's own ColumnHeadersWidth/RowHeadersWidth parameters (see
   CrewQualificationsCrosstab.razor) - fixing each column/row header to a set pixel width lets
   Kendo's layout engine overflow and scroll the column-headers/values panes internally, instead
   of shrinking columns to fit. Do not override .k-pivotgrid's internal grid-template-columns/rows
   via CSS: that was tried and broke Kendo's row virtualization (duplicated/misplaced rows). */
.fms-crew-qualifications-crosstab[b-sv0htgc3qp] {
    max-width: 100%;
}
/* /Components/Shared/Duty/DutyAssignmentEdit.razor.rz.scp.css */
/* CSS for DutyAssignmentEdit component */
.fms-edit-panel.fms-duty-assignment-edit[b-z34tp9t9tw] {
    padding-bottom: 15px;
}
.fms-edit-panel .SaveButtonTable[b-z34tp9t9tw] {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 30px;
    padding-bottom: 20px;
}
.Infomsg[b-z34tp9t9tw] {
    padding-left: 10px;
    font-style: italic;
}

.DAShiftOverrideToggleIcon[b-z34tp9t9tw],
.DAShiftOverrideStatusIcon[b-z34tp9t9tw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid transparent;
}

.DAShiftOverrideToggleIcon[b-z34tp9t9tw] {
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.DAShiftOverrideStateIcon[b-z34tp9t9tw] {
    font-size: 1rem;
}

[b-z34tp9t9tw] .DAShiftOverrideToggleIcon.Locked .DAShiftOverrideStateIcon,
[b-z34tp9t9tw] .DAShiftOverrideStatusIcon.Locked .DAShiftOverrideStateIcon {
    color: var(--UA_OverrideLocked_Icon_Color, #b42318);
}

[b-z34tp9t9tw] .DAShiftOverrideToggleIcon.Unlocked .DAShiftOverrideStateIcon,
[b-z34tp9t9tw] .DAShiftOverrideStatusIcon.Unlocked .DAShiftOverrideStateIcon {
    color: var(--UA_OverrideUnlocked_Icon_Color, #027a48);
}

.DAShiftOverrideToggleIcon.Locked[b-z34tp9t9tw],
.DAShiftOverrideStatusIcon.Locked[b-z34tp9t9tw] {
    background: var(--UA_OverrideLocked_Bg, rgba(180, 35, 24, 0.12));
    border-color: var(--UA_OverrideLocked_Border, rgba(180, 35, 24, 0.35));
}

.DAShiftOverrideToggleIcon.Unlocked[b-z34tp9t9tw],
.DAShiftOverrideStatusIcon.Unlocked[b-z34tp9t9tw] {
    background: var(--UA_OverrideUnlocked_Bg, rgba(2, 122, 72, 0.12));
    border-color: var(--UA_OverrideUnlocked_Border, rgba(2, 122, 72, 0.35));
}

.DAShiftOverrideToggleIcon:hover[b-z34tp9t9tw] {
    filter: brightness(0.97);
}
/* /Components/Shared/Duty/ShiftEdit.razor.rz.scp.css */
.ShiftOverrideToggleIcon[b-w9jsw5223b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
}

.ShiftOverrideStatusIcon[b-w9jsw5223b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: default;
    border: 1px solid transparent;
    opacity: 0.75;
}

.ShiftOverrideStateIcon[b-w9jsw5223b] {
    font-size: 1rem;
}

[b-w9jsw5223b] .ShiftOverrideToggleIcon.Locked .ShiftOverrideStateIcon,
[b-w9jsw5223b] .ShiftOverrideStatusIcon.Locked .ShiftOverrideStateIcon {
    color: var(--UA_OverrideLocked_Icon_Color, #b42318);
}

[b-w9jsw5223b] .ShiftOverrideToggleIcon.Unlocked .ShiftOverrideStateIcon,
[b-w9jsw5223b] .ShiftOverrideStatusIcon.Unlocked .ShiftOverrideStateIcon {
    color: var(--UA_OverrideUnlocked_Icon_Color, #027a48);
}

.ShiftOverrideToggleIcon.Locked[b-w9jsw5223b],
.ShiftOverrideStatusIcon.Locked[b-w9jsw5223b] {
    background: var(--UA_OverrideLocked_Bg, rgba(180, 35, 24, 0.12));
    border-color: var(--UA_OverrideLocked_Border, rgba(180, 35, 24, 0.35));
}

.ShiftOverrideToggleIcon.Unlocked[b-w9jsw5223b],
.ShiftOverrideStatusIcon.Unlocked[b-w9jsw5223b] {
    background: var(--UA_OverrideUnlocked_Bg, rgba(2, 122, 72, 0.12));
    border-color: var(--UA_OverrideUnlocked_Border, rgba(2, 122, 72, 0.35));
}

.ShiftOverrideToggleIcon:hover[b-w9jsw5223b] {
    filter: brightness(0.97);
}
.SaveButtonTable[b-w9jsw5223b]  {
    margin-bottom: 15px;
}
/* /Components/Shared/Error.razor.rz.scp.css */
/* CSS for Error component */
.HomeBtn[b-njv181b549] {
    width: 300px;
    justify-content: center;
    text-align: center;
    margin-inline: auto;
    padding: 7px;
    margin-top: 10px;
}
/* /Components/Shared/Inventory/InventoryAssignmentEdit.razor.rz.scp.css */
/* CSS for InventoryAssignmentEdit component */
[b-txowc8fzsh] .SaveButtonTable {
    margin-top: 0px;
}
/* /Components/Shared/Inventory/InventoryControlEdit.razor.rz.scp.css */
/* CSS for InventoryControlEdit component */
[b-5dlihy9sy5] .SaveButtonTable {
    margin-top: 0px;
}
/* /Components/Shared/Inventory/InventorySizeMaintenance.razor.rz.scp.css */
/* CSS for InventorySizeMaintenance component */
[b-sn7pnskkhm] .k-grid .k-grid-container {
    flex: 0 1 auto;
}
/* /Components/Shared/Meetings/MeetingEdit.razor.rz.scp.css */
/* CSS for MeetingEdit component */

/* Matches the margin used by .flexChild (app.css) for the other rows, but keeps the
   checkbox and its label laid out side-by-side (flexChild uses flex-direction: column,
   which would stack them vertically instead). */
.closedCheckboxRow[b-iaypgm1ykf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 20px 13px 15px;
}
.fms-edit-panel[b-iaypgm1ykf]  .SaveButtonTable {
    margin-top: 0px;
}
.ControlTitle.WindowControls[b-iaypgm1ykf] {
    margin-bottom: 0px; 
}
/* /Components/Shared/Meetings/Roster.razor.rz.scp.css */
/* CSS for Roster component */
.RosterContainer .SaveButtonTable[b-qwtwvzscy0] {
    padding-top: 0px;
}

[b-qwtwvzscy0] .RosterContainer .SaveButtonTable button.k-button {
    width: 135px;
}

.RosterContainer .FormLabel label[b-qwtwvzscy0] {
    position: relative;
    top: 2px;
}
.ControlSubTitleLeft[b-qwtwvzscy0] {
    display: inline;
}
.ControlSubTitleRight[b-qwtwvzscy0] {
    float: right;
}
.RosterLabel[b-qwtwvzscy0] {
    display: inline;
    padding-right: 15px;
}
[b-qwtwvzscy0] .MembersMainContent div.k-grid.roster-attendees-grid-editable div.k-grid-content {
    max-height: 285px !important;
}
/* /Components/Shared/Messages/MessagesEdit.razor.rz.scp.css */
/* CSS for MessagesEdit component */
[b-sble2fpjg4] .fms-messages-edit {
    width: 900px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* TelerikEditor has no built-in Resizable parameter (unlike TelerikGrid/TelerikWindow), so the
   resize handle is added via plain CSS on the component's own root element instead. */
[b-sble2fpjg4] .fms-messages-editor-resizable {
    resize: vertical;
    overflow: auto;
}
[b-sble2fpjg4] .SaveButtonTable {
    padding-bottom: 0px;
}
/* /Components/Shared/Messages/MessagesGrid.razor.rz.scp.css */
.fms-message-text-preview[b-dk5bwd7h17] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
}

.fms-messages-readonly[b-dk5bwd7h17]  .k-grid-toolbar {
    display: none;
}

.fms-message-html-body[b-dk5bwd7h17] {
    padding: 0.5rem 1rem;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* Single source of truth for FMS.Web.Core page header chrome, used by PageHeader.razor.
   Replaces the previously divergent .PageInfo (bare), .PageInfo.SwitchHolder, and
   .PageInfo.fms-edit-form patterns - every page header now shares the same background color,
   border, height, title alignment, center-zone alignment, and right-zone alignment. */

.fms-page-header[b-gp7sbihpl8] {
    display: flex !important;
    align-items: center;
    position: relative;
    width: 100%;
    height: 48px;
    /* This component is rendered as a flex item inside #MainContent's/a page's own
       flex-column wrapper (see app.css's "#MainContent > div:only-child" rule). Flex items
       default to flex-shrink: 1, so when a page's .MainTableContainer content wants more
       vertical space than is available, the browser will compress this header down toward
       0 height instead of respecting its 48px size - flex: 0 0 auto pins it to its own
       height so only .MainTableContainer ever shrinks/scrolls. */
    flex: 0 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 2px solid var(--Border_Color);
    background-color: var(--Header_Background_Color);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 15px;
}

.fms-page-header-title[b-gp7sbihpl8] {
    flex: 0 0 auto;
}

    .fms-page-header-title h2[b-gp7sbihpl8] {
        margin: 0;
        font-size: 18px;
    }

.fms-page-header-center[b-gp7sbihpl8] {
    display: flex;
    position: absolute;
    left: 0;
    width: 100%;
    justify-content: center;
    height: inherit;
    gap: 15px;
    white-space: nowrap;
    pointer-events: none;
}

/* NOTE: pointer-events re-enabling for this zone's content lives in app.css (global), not here.
   CenterContent is a RenderFragment supplied by the consuming page, so its markup never receives
   this component's CSS-isolation scope attribute - a "> *" rule here would silently fail to match,
   leaving pointer-events: none inherited and the content unclickable. See app.css's
   ".fms-page-header-center > *" rule for the actual override. */
.fms-page-header-right[b-gp7sbihpl8] {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* /Components/Shared/Personnel/PersonnelAdminHistoryEdit.razor.rz.scp.css */
/* The legacy rblExitDate RadioButtonList always stacked "Exit Date" above "No Exit Date"
   regardless of whether the Exit Date picker was visible. The <label> elements here are
   inline by default, so they only stack once the picker's flex sibling forces a wrap;
   force them to always stack vertically to match legacy. */
.PAHExitDate .RadioButtonList[b-xu03y0fjmn] {
    display: flex;
    flex-direction: column;
    /* Prevent the "No Exit Date" label text from wrapping onto a second line once the
       Exit Date picker (a flex sibling) appears and narrows the space available here. */
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 10px;
}

/* .PAHExitDate's shared FMS.css rule (display:flex, padding-top:22px) vertically centers its
   flex children by default. Now that the RadioButtonList is two lines tall, that centers the
   Exit Date picker against the whole stacked radio list instead of its top line; force both
   flex children to top-align so the picker lines up with Entry Date's picker. */
.PAHExitDate[b-xu03y0fjmn] {
    align-items: flex-start;
}

.DurationColumnLeft .inlineValidator[b-xu03y0fjmn] {
    padding-left: 8px !important;
}
td.DurationColumnLeft[b-xu03y0fjmn] {
    width: 375px;
}
[b-xu03y0fjmn] .SaveButtonTable {
    padding-bottom: 0px;
}
/* /Components/Shared/Personnel/PersonnelCommitteeHistoryEdit.razor.rz.scp.css */
/* CSS for PersonnelCommitteeHistoryEdit component */
.fms-edit-panel[b-q8z6tq3bmj]  .SaveButtonTable {
    margin-top: 5px;
    padding-bottom: 3px;
}
/* /Components/Shared/Personnel/PersonnelEdit.razor.rz.scp.css */
/* Legacy ucPersonnelEdit.ascx laid out the Personal/Operational tab fields with fixed pixel
   widths (e.g. License State 95px, Company Email 220px, Emergency Contact Name 249px), which
   never stretched to fill the available page width. Capping/centering the overall tab strip to
   match legacy's narrower, more compact form is handled globally in FMS.css (keyed off
   #PersonnelAdminContainer) so the same treatment applies to every tab, including the grid-based
   tabs (Committees, Crews, History, etc.) that are separate components not reachable/consistently
   styled via this scoped stylesheet. See FMS.css's "#PersonnelAdminContainer .k-tabstrip" rule. */

[b-2kb5wuo7j2] .fms-personnel-editForm {
    width: 900px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Mirrors legacy ucPersonnelEdit.ascx's tblEmergency layout: Company/Personal Email stacked in a
   narrow left column, with the three Emergency Contact rows occupying the wider right column,
   separated by a vertical divider (legacy's tblEmergencyContact1/2/3 sat in a "rightContainer" td
   next to the email td). */
[b-2kb5wuo7j2] .fms-personal-lower-section {
    position: relative;
}

[b-2kb5wuo7j2] .fms-emergency-contact-column {
    border-left: 1px solid var(--Body_Field_Border_Color, #ccc);
}

@media (max-width: 765px) {
    [b-2kb5wuo7j2] .fms-emergency-contact-column {
        border-left: none;
        border-top: 1px solid var(--Body_Field_Border_Color, #ccc);
        padding-top: 1rem;
        margin-top: 1rem;
    }
}

.ssn-input-wrapper[b-2kb5wuo7j2] {
    position: relative;
    display: block;
}
[b-2kb5wuo7j2] .ssn-input-wrapper .k-input {
    padding-right: 2rem;
}

[b-2kb5wuo7j2] .ssn-input-wrapper .ssn-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0 6px;
    min-width: 0;
    height: calc(100% - 3px);
    border: none;
    border-radius: 0px 3px 0px 0px;
    background: transparent !important;
    background-color: var(--Grid_Button_Color) !important;
}
/* /Components/Shared/Personnel/PersonnelIECSRanksEdit.razor.rz.scp.css */
/* CSS for PersonnelIECSRanksEdit component */
.fms-iecs-rank-edit[b-fvarqpmsyy]  .SaveButtonTable {
    padding: 0px;
}
/* /Components/Shared/Personnel/PersonnelLeaveDonut.razor.rz.scp.css */
/* Donut chart + legend styling for PersonnelLeaveDonut.razor.
   Extracted from wwwroot/css/FMS.css since these selectors are specific to this
   component and not reused elsewhere, to make them easier to track/maintain. */

#DonutLabelContainer .LeaveBalanceColumn div[b-ojgviss8pd] {
    padding: 5px 15px;
    padding-bottom: 0px;
    line-height: 12px;
}

.LeaveBalanceColumn[b-ojgviss8pd] {
    line-height: 11px;
}

.LeaveLabel[b-ojgviss8pd] {
    font-weight: normal;
    margin: 0px;
    font-size: 11px;
}

#DonutContainer[b-ojgviss8pd] {
    position: relative;
    top: 0px;
}

.StationOpPanel #DonutLabelContainer[b-ojgviss8pd] {
    padding-top: 18px;
    padding-left: 10px;
}

#DonutLabelContainer[b-ojgviss8pd] {
    width: 100%;
}

#DonutLabelContainer[b-ojgviss8pd],
#DonutLabelContainer input[b-ojgviss8pd],
#DonutContainer[b-ojgviss8pd],
#DonutContainer input[b-ojgviss8pd] {
    display: inline-block !important;
}

.DonutLabel[b-ojgviss8pd] {
    text-align: center;
}

.DonutTitle[b-ojgviss8pd] {
    font-weight: bold !important;
    font-size: 12px !important;
    text-transform: uppercase;
    position: relative;
    top: -27px;
}

.DonutChartWrapper[b-ojgviss8pd] {
    position: relative;
}

.DonutSubtitle[b-ojgviss8pd] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

.DonutDiv[b-ojgviss8pd] {
    padding: 3px 0px;
}

    .DonutDiv > div[b-ojgviss8pd] {
        display: inline-block !important;
    }

.DonutDiv[b-ojgviss8pd] {
    float: right;
    padding-right: 5px;
    width: 100%;
}

    .DonutDiv span[b-ojgviss8pd] {
        margin: 2px 5px;
        font-size: 11px;
        font-weight: normal;
    }

    .DonutDiv > span[b-ojgviss8pd] {
        margin-right: 15px;
    }

.BonusLeaveArea.DonutDiv[b-ojgviss8pd] {
    border-bottom: none !important;
}

.colorSwatch[b-ojgviss8pd] {
    height: 14px;
    width: 14px;
    position: relative;
    top: 3px;
}

    .colorSwatch.Red[b-ojgviss8pd] {
        background: #e74c3c;
    }

    .colorSwatch.lGreen[b-ojgviss8pd] {
        background: #2ecc71;
    }

    .colorSwatch.dGreen[b-ojgviss8pd] {
        background: #2e8540;
    }

.DaysDisplay[b-ojgviss8pd] {
    float: right;
    line-height: 24px;
    font-weight: bold !important;
    margin-left: 20px;
}
/* /Components/Shared/Personnel/PersonnelQuickEdit.razor.rz.scp.css */
/* CSS for PersonnelQuickEdit component */
.fms-personnel-quick-edit[b-rm44cc0z7i] {
    padding-top: 15px;
}
[b-rm44cc0z7i] .SaveButtonTable {
    padding-bottom: 20px;
}
/* /Components/Shared/Personnel/PersonnelTimeEntry.razor.rz.scp.css */
/* Matches legacy ucPersonnelTimeEntry.ascx layout: a centered panel with visible field
   labels above each dropdown, a divider under the current-status area, and a small
   pill-shaped Enter/Undo button (rounded, ~100px wide) instead of the default
   rectangular Telerik button. */

[b-i9zuxjqhxc] .tblPersonnelEntry {
    box-sizing: border-box;
    padding: 15px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

[b-i9zuxjqhxc] .pteFieldsContainer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-i9zuxjqhxc] .pteField {
    display: flex;
    flex-direction: column;
}

[b-i9zuxjqhxc] .pteField > label {
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}

[b-i9zuxjqhxc] .pteField .k-dropdownlist,
[b-i9zuxjqhxc] .pteField .k-picker {
    width: 100%;
}

[b-i9zuxjqhxc] .Controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    [b-i9zuxjqhxc] .Controls .k-button {
        border-radius: 20px !important;
        width: 100px;
        padding: 3px 5px;
        margin: 15px 0 0;
        display: inline-block;
        background-color: transparent;
        border: 2px solid var(--LeftSidebar_FieldsBorder_Color, #ffffff) !important;
        color: #ffffff !important;
    }

        [b-i9zuxjqhxc] .Controls .k-button:hover {
            background-color: var(--Login_LogOff_Top_Color) !important;
            border: 2px solid var(--LeftSidebar_FieldsBorder_Color, #ffffff) !important;
        }

/* /Components/Shared/Schedules/ScheduleEdit.razor.rz.scp.css */
/* CSS for ScheduleEdit component */
.ScheduleContainer[b-bplpy806qc] {
    display: inline !important;
}
    .ScheduleContainer.ModalPanel label[b-bplpy806qc] {
        padding-left: 10px;
        color: var(--Body_Text_Color);
    }

.DurationOptions label[b-bplpy806qc] {
    padding-top: 0px;
    padding-left: 0px;
    height: 30px;
    line-height: 30px;
}

.DurationOptions .k-input[b-bplpy806qc],
.DurationOptions .k-picker[b-bplpy806qc] {
    margin-left: 12px;
}

.DurationOptions[b-bplpy806qc] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
.tblScheduleDiv[b-bplpy806qc] {
    padding: 10px;
}
table#tblScheduleEdit[b-bplpy806qc] {
    padding-top: 20px;
    border-left: none;
}

.FrequencyTable td[b-bplpy806qc] {
    vertical-align: top;
}
tr.FreqRow > td[b-bplpy806qc] {
    padding-top: 15px;
}

.lblStartDate[b-bplpy806qc] {
    padding-right: 12px;
}

tr.DurationRow > td[b-bplpy806qc],
tr.DailyFreqRow > td[b-bplpy806qc] {
    padding-top: 12px;
}

.weekly-checkboxes-container[b-bplpy806qc] {
    display: inline;
}

    .weekly-checkboxes-container label[b-bplpy806qc] {
        padding: 0px;
    }

td.DailyFreqColumnLeft[b-bplpy806qc] {
    width: 10%;
    padding-right: 12px;
}

    td.DailyFreqColumnLeft .DailyFreqColumnLabel[b-bplpy806qc] {
        line-height: 36px;
    }
.FrequencyTable .Defaults[b-bplpy806qc] {
    width: 925px;
    padding: 25px 0px 10px;
}
[b-bplpy806qc] label.enddate-label .k-datepicker {
    margin-left: 15px;
}

[b-bplpy806qc] .SaveButtonTable {
    margin-top: 10px;
    margin-bottom: 5px;
}
/* /Components/Shared/TimeEntries/TimeEntryEdit.razor.rz.scp.css */
/* CSS for TimeEntryEdit component */
/* fms-time-entry-edit: scoping class for TimeEntryEdit.razor's own .fms-edit-panel wrapper div.
   TimeEntryEdit.razor is now shared by both TimeEntriesGrid.razor's ZeroHoursOnly popup (Home.razor's
   post-login zero-hour window) and its AdminByDate popup (Admin/Adjustments.razor), so this single
   selector covers both.  */
.fms-edit-panel.fms-time-entry-edit[b-z05q4nrjip] {
    margin: 10px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
/* /Components/Shared/Units/UnitEdit.razor.rz.scp.css */
/* CSS for UnitEdit component */
[b-yfp2z2wata] .fms-edit-panel {
    padding-bottom: 0px;
}