/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-jdpwmawkkf] {
    height: 100vh;
    font-family: var(--t3f-font-family);
    overflow: hidden;
}

[b-jdpwmawkkf] .icon {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-mask-position: center center;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-color: var(--dxbl-btn-color);
}

[b-jdpwmawkkf] #menu-top {
    display: none;
    border: 0;
    background: transparent;
}

[b-jdpwmawkkf] #menu-top:not(.hidden) {
    display: block;
}

[b-jdpwmawkkf] #menu-top.hidden {
    display: none;
}

@media (min-width: 769px) {
    [b-jdpwmawkkf] #menu-top {
        display: none;
    }
    
    [b-jdpwmawkkf] #menu-top:not(.hidden) {
        display: block;
    }
}

[b-jdpwmawkkf] .icon-back {
    -webkit-mask-image: url("images/back.svg");
    mask-image: url("images/back.svg");
}

[b-jdpwmawkkf] .icon-menu {
    -webkit-mask-image: url("images/menu.svg");
    mask-image: url("images/menu.svg");
}

[b-jdpwmawkkf] .content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

[b-jdpwmawkkf] .page-layout {
    height: 100%;
}

/* Ensure the grid layout items stretch to fill the row height */
[b-jdpwmawkkf] .page-layout .dxbl-grid-layout-item {
    align-self: stretch;
}

[b-jdpwmawkkf] .menu-button:hover .icon {
    background-color: var(--dxbl-btn-hover-color);
}

.nav-buttons-container[b-jdpwmawkkf] {
    display: flex;
    gap: 10px;
    padding: 0.5rem 0rem;
    flex-shrink: 0;
}

[b-jdpwmawkkf] .body-content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.button-link[b-jdpwmawkkf] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;
}

.button-link .menu-button[b-jdpwmawkkf] {
    background-image: url("images/chevron-double-left.svg");
    background-position: center;
    background-repeat: no-repeat;
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    padding: 0.375rem;
    cursor: pointer;
    display: block;
    background-size: contain;
    transform: scaleX(-1);
}

    .nav-buttons-container[b-jdpwmawkkf]  .menubutton-float-end {
        margin-left: auto;
    }

    .nav-buttons-container[b-jdpwmawkkf]  .dxbl-btn-icon-only {
        --dxbl-btn-padding-x: 0.75rem;
        --dxbl-btn-padding-y: 0.25rem;
    }

@media (max-width: 768px) {
    [b-jdpwmawkkf] #menu-top:not(.hidden) {
        display: block;
    }
    
    [b-jdpwmawkkf] #menu-top.hidden {
        display: block;
    }
}

/* Header Styles */
[b-jdpwmawkkf] .layout-header {
    background: transparent;
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
}

.header-container[b-jdpwmawkkf] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem 0.5rem;
    gap: 0.5rem;
}

.header-left[b-jdpwmawkkf] {
    display: flex;
    align-items: center;
}

.header-center[b-jdpwmawkkf] {
    display: flex;
    align-items: center;
}

.header-right[b-jdpwmawkkf] {
    display: none;
}

[b-jdpwmawkkf] .event-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    padding: 0;
}

[b-jdpwmawkkf] .event-label {
    color: #333;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

[b-jdpwmawkkf] .event-combobox {
    min-width: 300px;
    max-width: 400px;
}

[b-jdpwmawkkf] .event-combobox .dxbl-combobox {
    border-radius: 4px;
}

[b-jdpwmawkkf] .selected-event-badge {
    background: #e8f4fd;
    color: #1976d2;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 0.5rem;
}

@media (max-width: 768px) {
    .header-left[b-jdpwmawkkf] {
        display: none;
    }
    
    [b-jdpwmawkkf] .event-combobox {
        min-width: 200px;
        max-width: 100%;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
#sidebar[b-xggru5yewc] {
    min-width: 15rem;
    max-width: 15rem;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: transform 0.1s ease-out;
    height: 100%;
    max-height: 100%;
    background: linear-gradient(180deg, #333333 0%, #1A1A1A 100%);
    display: block;
}

    #sidebar.auto-expanded[b-xggru5yewc] {
        display: none;
    }

/* Expanded: over the top-right corner of the header, above the collapse chevron, the one spot the
   logo and the environment label leave free. Out of flow, so it does not widen the column. */
.nav-bell-host[b-xggru5yewc] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}

/* Collapsed: #sidebar is gone, so the bell takes its place in flow as a narrow dark rail, which
   keeps its light icon legible on light and dark themes alike. */
#sidebar.auto-expanded + .nav-bell-host[b-xggru5yewc] {
    position: static;
    height: 100%;
}

/* The rail is drawn by the bell itself, so a viewer with no bell (no Read) gets no empty strip. */
#sidebar.auto-expanded + .nav-bell-host[b-xggru5yewc]  .notification-bell {
    height: 100%;
    align-items: flex-start;
    padding: 6px;
    background: linear-gradient(180deg, #333333 0%, #1A1A1A 100%);
}

    #sidebar .menu-closeonclick-placeholder[b-xggru5yewc] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Ensure this overlay never blocks clicks on the actual menu items */
        display: none;
        pointer-events: none;
    }

[b-xggru5yewc] .sidebar-header {
    padding: 2rem 1rem;
}

.logo[b-xggru5yewc] {
    text-align: center;
}

[b-xggru5yewc] .menu-button-container {
    align-self: center;
}

.menu-button[b-xggru5yewc] {
    padding: 0.375rem;
    width: 0.875rem;
    height: 0.875rem;
    border: 0;
    background-color: transparent;
    background-image: url("images/chevron-double-left.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: transform 0.2s ease;
}

[b-xggru5yewc] .menu.display-mobile {
    margin-bottom: 2rem;
}

[b-xggru5yewc] .menu {
    background-color: inherit;
}

    [b-xggru5yewc] .menu .dxbl-menu-item-list {
        gap: 0.5rem;
    }

[b-xggru5yewc] .menu-item {
    color: var(--bs-white);
    padding: 8px 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

[b-xggru5yewc] .menu-indent {
    padding-left: 20px !important;
}

[b-xggru5yewc] .menu-indent-2 {
    padding-left: 40px !important;
}

[b-xggru5yewc] .dxbl-treeview-node-content:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[b-xggru5yewc] .dxbl-treeview-node-child-nodes {
    padding-left: 0;
}

[b-xggru5yewc] .icon {
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.5rem;
    margin-right: 8px;
    opacity: 0.4;
}

[b-xggru5yewc] .home-icon {
    background-image: url("images/home.svg");
}

[b-xggru5yewc] .weather-icon {
    background-image: url("images/weather.svg");
}

[b-xggru5yewc] .counter-icon {
    background-image: url("images/counter.svg");
}

[b-xggru5yewc] .user-icon {
    background-image: url("images/account/user.svg");
}

[b-xggru5yewc] .logout-icon {
    background-image: url("images/account/log-out.svg");
}

[b-xggru5yewc] .settings-icon {
    background-image: url("images/account/settings.svg");
}

[b-xggru5yewc] .quote-icon {
    background-image: url("images/bootstrap-icons/chat-square-quote.svg");
}

[b-xggru5yewc] .parts-icon {
    background-image: url("images/bootstrap-icons/tools.svg");
    filter: brightness(0) invert(1);
    opacity: 0.4;
}

[b-xggru5yewc] .refresh-icon {
    background-image: url("images/bootstrap-icons/arrow-clockwise.svg");
    filter: brightness(0) invert(1);
    opacity: 0.4;
}

[b-xggru5yewc] .menu-item .spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
    border-color: currentColor;
    border-right-color: transparent;
}

[b-xggru5yewc] .menu-item .spinner-border-sm .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


[b-xggru5yewc] .footer {
    text-align: center;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

    [b-xggru5yewc] .footer .icon {
        margin-left: 0;
    }

#sidebar.auto-expanded[b-xggru5yewc]  .layout-item {
    display: block;
}

#sidebar.auto-expanded[b-xggru5yewc]  .footer {
    display: block;
}

@media (max-width: 768px) {
    #sidebar[b-xggru5yewc] {
        display: none;
    }

        #sidebar.auto-expanded[b-xggru5yewc] {
            position: fixed;
            top: 0;
            left: 0;
            min-width: 0;
            width: min(20rem, 100vw);
            max-width: 100vw;
            z-index: 3;
            display: block;
        }

    /* Keep the bell in the grid's narrow first column while the menu is closed. Opening
       the menu overlays the page instead of making the content column only a few pixels wide. */
    .nav-bell-host[b-xggru5yewc],
    #sidebar.auto-expanded + .nav-bell-host[b-xggru5yewc] {
        position: static;
        height: 100%;
    }

    .nav-bell-host[b-xggru5yewc]  .notification-bell {
        height: 100%;
        align-items: flex-start;
        padding: 6px;
        background: linear-gradient(180deg, #333333 0%, #1A1A1A 100%);
    }

            #sidebar.auto-expanded[b-xggru5yewc]  .sidebar-header {
                border-bottom: 1px solid var(--bs-white);
            }

            #sidebar.auto-expanded .menu-button[b-xggru5yewc] {
                transform: scaleX(-1);
            }

        #sidebar:not(.auto-expanded)[b-xggru5yewc]  .dxbl-gridlayout-root {
            gap: unset !important;
        }

    .logo[b-xggru5yewc] {
        text-align: inherit;
    }

    [b-xggru5yewc] .menu-button-container {
        display: block;
    }

    [b-xggru5yewc] .layout-item {
        display: none;
    }

    [b-xggru5yewc] .footer {
        display: none;
    }
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* The T3central design system (Figma, "T3central Design System v2.4.1") with the values the app
   already implements; where each one comes from is in the SYS-718 pull request. The design's font,
   Instrument Sans, is not loaded by the app, so the panel uses the app's own. */

.notification-bell[b-llnv56iste] {
    display: inline-flex;
    align-items: center;
}

.bell-button[b-llnv56iste] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #ACACAC;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.bell-button:hover[b-llnv56iste],
.bell-button[aria-expanded="true"][b-llnv56iste] {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.1);
}

.bell-button:focus-visible[b-llnv56iste] {
    outline: 2px solid #CBD5E1;
    outline-offset: 2px;
}

.bell-icon[b-llnv56iste] {
    display: block;
    fill: currentColor;
}

/* A status pill (radius-sm) in the CTA orange, ringed in the sidebar's own colour so it reads as
   sitting on the bell rather than on top of it. Dark text: white on this orange is under 3:1. */
.bell-badge[b-llnv56iste] {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 4px;
    background: #E67E22;
    box-shadow: 0 0 0 2px #333333;
    color: #1A1A1A;
    font-family: var(--t3f-font-family);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.bell-panel[b-llnv56iste] {
    display: flex;
    flex-direction: column;
    max-height: 440px;
    font-family: var(--t3f-font-family);
    color: #1A1A2E;
    background: #FFFFFF;
}

.bell-panel-header[b-llnv56iste] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 49px;
    padding: 12px 16px;
    border-bottom: 1px solid #D1D2D4;
}

.bell-panel-heading[b-llnv56iste] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.bell-panel-title[b-llnv56iste] {
    font-size: 14px;
    font-weight: 700;
}

.bell-panel-count[b-llnv56iste] {
    color: #55565A;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bell-item:focus-visible[b-llnv56iste] {
    outline: 2px solid #0F3460;
    outline-offset: -2px;
}

.bell-panel-message[b-llnv56iste] {
    padding: 32px 16px;
    color: #55565A;
    font-size: 14px;
    text-align: center;
}

.bell-action-error[b-llnv56iste] {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #D1D2D4;
    color: #1A1A2E;
    background: #F7F7F5;
    font-size: 14px;
}

.bell-list[b-llnv56iste] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bell-list li + li[b-llnv56iste] {
    border-top: 1px solid rgba(209, 210, 212, 0.6);
}

/* The hover is the whole row's, so the dot's cell does not read as a separate strip. */
.bell-list li[b-llnv56iste] {
    display: flex;
    align-items: flex-start;
}

.bell-list li:hover[b-llnv56iste] {
    background-color: #F7F7F5;
}

.bell-item[b-llnv56iste] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 16px 12px 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bell-item:disabled[b-llnv56iste] {
    cursor: default;
}

/* Unread is an orange dot and a bold title, and nothing louder. Clicking the dot marks it read, as
   Jira's does, and a read row's gray dot marks it unread again. */
.bell-item-marker[b-llnv56iste] {
    display: flex;
    flex: 0 0 36px;
    justify-content: center;
    padding-top: 10px;
}

.bell-dot-button[b-llnv56iste] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.bell-dot-button:hover:not(:disabled)[b-llnv56iste] {
    background: rgba(230, 126, 34, 0.18);
}

.bell-dot-button:disabled[b-llnv56iste] {
    cursor: default;
}

.bell-dot-button:focus-visible[b-llnv56iste] {
    outline: 2px solid #0F3460;
    outline-offset: 0;
}

.bell-item-dot[b-llnv56iste] {
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E67E22;
}

/* A read row's dot marks it unread again; dark enough for the 3:1 a control needs against white. */
.bell-dot-button.is-read .bell-item-dot[b-llnv56iste] {
    background: #8E8F93;
}

.bell-dot-button.is-read:hover:not(:disabled)[b-llnv56iste] {
    background: rgba(142, 143, 147, 0.18);
}

.bell-unread-toggle[b-llnv56iste] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #55565A;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* The checkbox stays in the page for keyboard and screen readers; the track beside it is drawn. */
.bell-switch-input[b-llnv56iste] {
    position: absolute;
    right: 0;
    width: 32px;
    height: 18px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.bell-switch[b-llnv56iste] {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: #ACACAC;
    transition: background-color 0.15s ease;
}

.bell-switch[b-llnv56iste]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFFFFF;
    transition: transform 0.15s ease;
}

.bell-switch-input:checked + .bell-switch[b-llnv56iste] {
    background: #0F3460;
}

.bell-switch-input:checked + .bell-switch[b-llnv56iste]::after {
    transform: translateX(14px);
}

.bell-switch-input:focus-visible + .bell-switch[b-llnv56iste] {
    outline: 2px solid #0F3460;
    outline-offset: 2px;
}

.bell-switch-input:disabled + .bell-switch[b-llnv56iste] {
    opacity: 0.5;
}

.bell-item-text[b-llnv56iste] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.bell-item-title[b-llnv56iste] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.bell-item.is-unread .bell-item-title[b-llnv56iste] {
    font-weight: 700;
}

.bell-item-body[b-llnv56iste] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #55565A;
    font-size: 14px;
    line-height: 20px;
    white-space: pre-line;
}

.bell-item-time[b-llnv56iste] {
    color: #55565A;
    font-size: 12px;
    line-height: 16px;
}

.bell-sr-only[b-llnv56iste] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The way to the all-notifications page (SYS-708), in the header's own action style. */
.bell-panel-footer[b-llnv56iste] {
    flex-shrink: 0;
    border-top: 1px solid #D1D2D4;
}

.bell-panel-footer a[b-llnv56iste] {
    display: block;
    padding: 12px 16px;
    color: #0F3460;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.bell-panel-footer a:hover[b-llnv56iste] {
    background-color: #F7F7F5;
}

.bell-panel-footer a:focus-visible[b-llnv56iste] {
    outline: 2px solid #0F3460;
    outline-offset: -2px;
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* This page paints its own dark surface rather than following the active theme, and that is
   deliberate on two counts. SYS-412 asks for a 2px #444 border and a soft white glow around the
   player, and both of those only read against a known-dark backdrop - a white glow on a light
   page is invisible. And no theme in this application actually darkens the page body: T3Dark
   goes through IsT3Theme, which applies the light t3-page-bg to T3Light and T3Dark alike, while
   FluentDark reports data-is-dark="true" over a pure white body. The dark themes restyle the
   DevExpress components and stop there. So "follow the theme" would have meant "be light in all
   ten", which is the one thing this page cannot be.
   The colours below are therefore fixed, and every one of them is stated rather than mixed out
   of the theme's currentColor. Nothing here changes on a theme switch. */
.home-announcement[b-zvd6sknbf2] {
    /* Sits within the sidebar's own linear-gradient(#333, #1a1a1a), so the two surfaces agree
       across the seam instead of meeting light against dark. The backdrop below repeats it, so
       this one covers the panel while that one covers everything the panel cannot reach. */
    background-color: #1c1c1c;
    color: #e8e8e8;

    /* .body-content is a column flex container with overflow:hidden, so the page root has to
       claim the remaining height and own its own scrollbar - min-height:0 because a flex item
       defaults to min-height:auto and refuses to shrink below its content. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    /* 3rem horizontally, not 1.5: overflow-y:auto above computes overflow-x to auto as well, so
       this box clips its own children. At the widest sizes the player fills the panel and its
       48px halo would be sheared off flat against both edges. The padding is what it spreads
       into. */
    padding: 2rem 3rem;
}

/* The dark used to stop at this element's own box, leaving a 16px white frame above and to
   either side: .content contributes that padding horizontally and the nav-button strip sits
   above, and .body-content's overflow:hidden clips a negative margin rather than letting it
   bleed. A fixed layer is the way out - ancestor overflow does not clip fixed positioning, so
   this reaches the window edge where a margin cannot. z-index:-1 drops it behind everything
   that paints a background of its own, the sidebar's gradient included, while still covering
   the white body canvas underneath. It belongs to this component, so it is gone the moment the
   page is, and no shared layout or other screen is touched to get it. */
.home-announcement[b-zvd6sknbf2]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #1c1c1c;
}

/* margin:auto rather than align-items:center on the parent: centring a flex item that has grown
   taller than its container clips the top of it, and the clipped part cannot be scrolled to. */
.home-announcement-panel[b-zvd6sknbf2] {
    margin: auto;
    width: 100%;
    max-width: 60rem;
    text-align: center;
}

.home-announcement-heading[b-zvd6sknbf2] {
    margin: 0;
    font-family: var(--t3-font-family-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: #f5f5f5;
}

/* Routes.razor renders <FocusOnNavigate Selector="h1" />, which focuses the first h1 on every
   navigation so a screen reader announces the new page. The browser then draws its focus ring
   around the heading, which reads as a stray border. Suppressed rather than left alone because
   the element carries tabindex="-1": no keyboard user can ever reach it, so the ring conveys
   nothing to anybody. The old home page had no h1 at all, which is why this is new. */
.home-announcement-heading:focus[b-zvd6sknbf2] {
    outline: none;
}

.home-announcement-subheading[b-zvd6sknbf2] {
    margin: 0.75rem auto 0;
    max-width: 44rem;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.5;
    color: #b8b8b8;
}

/* The glow, the crisp edge and the radius are what SYS-412's reference image shows. They are NOT
   the literal box-shadow the ticket comment carries: that snippet asks for
   `0 0 15px rgba(255,255,255,0.2)`, which was applied first, measured, and is very nearly
   invisible - a 15px blur at a fifth opacity does not lift the player off the page at all, let
   alone produce the halo in the picture. Three layers rather than one is what actually gets
   there: a hairline ring for the bright edge, a tight bloom, and a wide falloff.
   Its max-width/height pair in the same snippet is the browser's way of holding a native
   <video>'s aspect ratio; the width/aspect-ratio below is the iframe equivalent. That width also
   bounds the HEIGHT, so the player gives up width before pushing the closing line off a short
   screen - the 22rem being the heading, subheading, links and padding stacked above and below.
   The 20rem floor stops that shrinking to something unwatchable on a very short window; past
   that point the root's overflow-y takes over and the page scrolls instead. */
.home-announcement-video[b-zvd6sknbf2] {
    width: min(100%, max(20rem, calc((100dvh - 22rem) * 16 / 9)));
    margin: 1.75rem auto 0;
    aspect-ratio: 16 / 9;
    border: 2px solid #444444;
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.30),
        0 0 20px rgba(255, 255, 255, 0.45),
        0 0 48px rgba(255, 255, 255, 0.22);
    overflow: hidden;
    background-color: #101010;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-announcement-video iframe[b-zvd6sknbf2] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.home-announcement-video-pending[b-zvd6sknbf2] {
    margin: 0;
    font-size: 0.95rem;
    color: #9a9a9a;
}

.home-announcement-links[b-zvd6sknbf2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin: 1.75rem 0 0;
    font-size: 0.95rem;
    color: #b8b8b8;
}

/* The colour is not cosmetic. Nothing in the application gives an anchor a colour of its own -
   measured, they compute to rgb(66,66,66) - so left alone these would be near-black text on a
   #1c1c1c surface and effectively unreadable. The underline is the affordance: without it a link
   is distinguished from the text around it by brightness alone, which is not one. */
.home-announcement-links a[b-zvd6sknbf2] {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.home-announcement-link-separator[b-zvd6sknbf2] {
    color: #6a6a6a;
}

/* The two halves need about 744px side by side, and the content area is the viewport less the
   sidebar and this page's padding - so below roughly this width they wrap, and a separator
   between them is left dangling at the end of the first line. Hiding it turns the wrap into two
   clean sentences. Measured at the default size mode: a larger one wraps a little sooner and
   loses the separator a little late, which is why the rule hides an ornament rather than
   carrying any layout. */
@media (max-width: 68rem) {
    .home-announcement-link-separator[b-zvd6sknbf2] {
        display: none;
    }
}
/* /Components/Shared/MediaDownloadButton.razor.rz.scp.css */
/* Sized and coloured to sit beside the hand-rolled close button in the media viewers, which is a
   bare <button> with no framework styling of its own. */
.media-download-button[b-7fbmk2drsm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.media-download-button:hover:not(:disabled)[b-7fbmk2drsm] {
    color: #0d6efd;
    background-color: #e9ecef;
}

.media-download-button:disabled[b-7fbmk2drsm] {
    opacity: 0.4;
    cursor: default;
}
/* /Modules/Notifications/UI/Pages/AllNotifications.razor.rz.scp.css */
/* Charcoal and orange follow the saved T3 Central Figma brand board and notification email.
   Neutral roles use the existing T3 theme tokens; typography remains the application's. The text
   action's navy is the bell's, so the two read as one control set. */
.notifications-page[b-boun7knnh8] {
    --inbox-charcoal: #292929;
    --inbox-orange: #E98B00;
    --inbox-action: #0F3460;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 8px 0 16px;
}

.notifications-heading[b-boun7knnh8],
.notifications-card[b-boun7knnh8] {
    max-width: 880px;
}

.notifications-heading[b-boun7knnh8] {
    flex-shrink: 0;
    margin-bottom: 16px;
}

.notifications-heading h1[b-boun7knnh8] {
    margin: 0;
    color: var(--inbox-charcoal);
    font-size: 18px;
    font-weight: 700;
}

/* The card runs to the bottom of the window and only the list scrolls, so the filter and Mark all
   stay in reach however far down the user has read. min-height: 0 lets each level shrink below its
   content, without which the list grows past the window with no scrollbar. */
.notifications-card[b-boun7knnh8] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--t3-border, #D1D2D4);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--inbox-charcoal);
    overflow: hidden;
}

.notifications-scroller[b-boun7knnh8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.notifications-more[b-boun7knnh8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--t3-border, #D1D2D4);
    color: var(--t3-text, #55565A);
    font-size: 13px;
}

/* The marker the browser watches for the end of the list (AllNotifications.razor.js). */
.notifications-sentinel[b-boun7knnh8] {
    height: 1px;
}

.notifications-toolbar[b-boun7knnh8],
.notifications-card > .notifications-message[b-boun7knnh8] {
    flex-shrink: 0;
}

.notifications-toolbar[b-boun7knnh8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--t3-border, #D1D2D4);
}

.notifications-filter[b-boun7knnh8] {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--t3-border, #D1D2D4);
    border-radius: 8px;
}

.filter-option[b-boun7knnh8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--t3-text, #55565A);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.filter-option:hover:not(:disabled)[b-boun7knnh8] {
    background: var(--t3-background, #F7F7F5);
}

.filter-option.is-selected[b-boun7knnh8],
.filter-option.is-selected:hover:not(:disabled)[b-boun7knnh8] {
    background: var(--inbox-charcoal);
    color: #FFFFFF;
}

.filter-count[b-boun7knnh8] {
    font-size: 12px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* A text action rather than a button: a bulk mark should not compete with the filter. */
.notifications-mark-all[b-boun7knnh8] {
    padding: 4px 0;
    border: none;
    background: transparent;
    color: var(--inbox-action);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.notifications-mark-all:hover:not(:disabled)[b-boun7knnh8] {
    text-decoration: underline;
}

.notifications-secondary[b-boun7knnh8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 10px;
    border: 1px solid var(--t3-border, #D1D2D4);
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--t3-text, #55565A);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.notifications-secondary:hover:not(:disabled)[b-boun7knnh8] {
    background: var(--t3-background, #F7F7F5);
    color: var(--inbox-charcoal);
}

.notifications-secondary .oi[b-boun7knnh8] {
    font-size: 10px;
}

.notifications-mark-all:disabled[b-boun7knnh8],
.notifications-secondary:disabled[b-boun7knnh8],
.filter-option:disabled[b-boun7knnh8] {
    opacity: 0.5;
    cursor: default;
}

.filter-option:focus-visible[b-boun7knnh8],
.notifications-mark-all:focus-visible[b-boun7knnh8],
.notifications-secondary:focus-visible[b-boun7knnh8],
.notification-row:focus-visible[b-boun7knnh8],
.notification-dot-button:focus-visible[b-boun7knnh8] {
    outline: 2px solid var(--inbox-charcoal);
    outline-offset: 2px;
}

.notifications-message[b-boun7knnh8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 32px 16px;
    color: var(--t3-text, #55565A);
    font-size: 14px;
}

.notifications-list[b-boun7knnh8] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notifications-list li + li[b-boun7knnh8] {
    border-top: 1px solid var(--t3-border, #D1D2D4);
}

/* The hover is the whole row's, so the dot's cell does not read as a separate control strip. */
.notifications-list li[b-boun7knnh8] {
    display: flex;
    align-items: flex-start;
}

.notifications-list li:hover[b-boun7knnh8] {
    background: var(--t3-background, #F7F7F5);
}

.notification-marker[b-boun7knnh8] {
    display: flex;
    flex: 0 0 40px;
    justify-content: center;
    padding-top: 10px;
}

.notification-dot-button[b-boun7knnh8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

@media (pointer: coarse) {
    .notification-dot-button[b-boun7knnh8] {
        width: 44px;
        height: 44px;
        margin-top: -10px;
    }
}

.notification-dot-button:hover:not(:disabled)[b-boun7knnh8] {
    background: rgba(233, 139, 0, 0.16);
}

.notification-dot-button:disabled[b-boun7knnh8] {
    cursor: default;
}

.notification-dot[b-boun7knnh8] {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--inbox-orange);
}

/* A read row's dot marks it unread again. Gray rather than nothing, so the way back is visible;
   dark enough for the 3:1 a control needs against white. */
.notification-dot-button.is-read .notification-dot[b-boun7knnh8] {
    background: #8E8F93;
}

.notification-dot-button.is-read:hover:not(:disabled)[b-boun7knnh8] {
    background: rgba(142, 143, 147, 0.18);
}

.notification-row[b-boun7knnh8] {
    display: flex;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 12px 16px 12px 0;
    border: none;
    background: transparent;
    color: var(--t3-text, #55565A);
    text-align: left;
    cursor: pointer;
}

.notification-content[b-boun7knnh8] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.notification-top[b-boun7knnh8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.notification-type[b-boun7knnh8] {
    color: var(--t3-text, #55565A);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.notification-time[b-boun7knnh8] {
    color: var(--t3-text, #55565A);
    font-size: 12px;
}

.notification-title[b-boun7knnh8] {
    color: var(--inbox-charcoal);
    font-size: 14px;
    font-weight: 400;
}

.notification-row.is-unread .notification-title[b-boun7knnh8] {
    font-weight: 700;
}

.notification-body[b-boun7knnh8] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 14px;
    white-space: pre-line;
}

.notifications-sr-only[b-boun7knnh8] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 560px) {
    .notifications-toolbar[b-boun7knnh8] {
        padding: 8px 12px;
    }

    .notification-row[b-boun7knnh8] {
        padding: 12px 12px 12px 0;
    }
}
/* /Modules/Notifications/UI/Pages/NotificationSettings.razor.rz.scp.css */
/* The Figma design system (T3central Design System v2.4.1): type scale, 4px spacing, radii and
   elevation are its rules. It carries no colour values the app has implemented except through
   /login, where the Figma login design landed, so every colour below is /login's or the design
   sheet's own, named at its declaration. The font is the app's (--t3f-font-family): Instrument
   Sans is not loaded anywhere. */
.ns-page[b-cntzmokzil] {
    /* Dark/Primary: /login's heading colour (.login-box h3). */
    --ns-dark: #1a1a2e;
    /* Primary CTA fill: /login's own-provider button (.btn-local). */
    --ns-cta: #0f3460;
    /* Muted Text: /login's .text-muted. */
    --ns-muted: #666;
    /* Card: /login's .login-box background. */
    --ns-card: #fff;
    /* Subtle/Border: the design sheet's chevron stroke; the app implements no border hex of its own. */
    --ns-subtle: #cbd5e1;
    /* Danger: /login's .login-alert. */
    --ns-danger: #dc3545;

    /* MainLayout hides overflow, so the page owns its scrolling. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ns-header[b-cntzmokzil] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ns-title[b-cntzmokzil] {
    margin: 0;
    font-weight: 700;
}

.ns-lede[b-cntzmokzil] {
    margin: 0;
    font-size: 14px;
}

/* Caption: 12/400, muted. */
.ns-caption[b-cntzmokzil] {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--ns-muted);
}

/* Elevation 0, flat with a border; radius xl for a panel. */
.ns-card[b-cntzmokzil] {
    background: var(--ns-card);
    border: 1px solid var(--ns-subtle);
    border-radius: 12px;
    padding: 8px 24px;
}

.ns-table[b-cntzmokzil] {
    width: 100%;
    border-collapse: collapse;
}

.ns-table th[b-cntzmokzil],
.ns-table td[b-cntzmokzil] {
    padding: 16px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ns-subtle);
}

.ns-table tbody tr:last-child th[b-cntzmokzil],
.ns-table tbody tr:last-child td[b-cntzmokzil] {
    border-bottom: none;
}

.ns-table th + th[b-cntzmokzil],
.ns-table th + td[b-cntzmokzil],
.ns-table td + td[b-cntzmokzil] {
    padding-left: 16px;
}

/* H3 card heading: 18/700. */
.ns-module[b-cntzmokzil] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: var(--ns-dark);
}

/* Label: uppercase 10/700. */
.ns-table .ns-label[b-cntzmokzil] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ns-muted);
    vertical-align: bottom;
}

.ns-channel-cell[b-cntzmokzil] {
    width: 160px;
}

.ns-type-cell[b-cntzmokzil] {
    font-weight: 400;
}

/* Body bold: 14/700. */
.ns-type-name[b-cntzmokzil] {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--ns-dark);
}

.ns-note[b-cntzmokzil] {
    margin: 4px 0 8px;
}

.ns-switch[b-cntzmokzil] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* The real checkbox stays in the page for the keyboard and screen readers, above the track, so a
   pointer lands on the control itself. */
.ns-switch input[b-cntzmokzil] {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 36px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

/* The off track needs 3:1 against the card for its shape (WCAG 1.4.11): the slate fill is 1.49:1
   on white, so the outline carries it, in Muted Text, 5.74:1. */
.ns-track[b-cntzmokzil] {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid var(--ns-muted);
    border-radius: 10px;
    background: var(--ns-subtle);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ns-track[b-cntzmokzil]::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ns-card);
    transition: transform 0.15s ease;
}

.ns-switch input:checked + .ns-track[b-cntzmokzil] {
    background: var(--ns-cta);
    border-color: var(--ns-cta);
}

.ns-switch input:checked + .ns-track[b-cntzmokzil]::after {
    transform: translateX(16px);
}

.ns-switch input:focus-visible + .ns-track[b-cntzmokzil] {
    outline: 2px solid var(--ns-cta);
    outline-offset: 2px;
}

.ns-switch input:disabled[b-cntzmokzil],
.ns-switch input:disabled ~ span[b-cntzmokzil] {
    cursor: not-allowed;
}

.ns-switch input:disabled + .ns-track[b-cntzmokzil] {
    opacity: 0.5;
}

/* Caption 12/600. */
.ns-state[b-cntzmokzil] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ns-dark);
}

/* Radius lg for a button; secondary, so outlined in the CTA colour rather than filled. */
.ns-button[b-cntzmokzil] {
    padding: 4px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ns-cta);
    background: var(--ns-card);
    border: 1px solid var(--ns-cta);
    border-radius: 8px;
    cursor: pointer;
}

.ns-button:hover:not(:disabled)[b-cntzmokzil] {
    color: var(--ns-card);
    background: var(--ns-cta);
}

.ns-button:focus-visible[b-cntzmokzil] {
    outline: 2px solid var(--ns-cta);
    outline-offset: 2px;
}

.ns-button:disabled[b-cntzmokzil] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* A line of information on a card, radius sm, border only. */
.ns-notice[b-cntzmokzil] {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--ns-dark);
    background: var(--ns-card);
    border: 1px solid var(--ns-subtle);
    border-left: 4px solid var(--ns-cta);
    border-radius: 4px;
}

.ns-notice-danger[b-cntzmokzil] {
    border-left-color: var(--ns-danger);
}

.ns-coming-soon[b-cntzmokzil] {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--ns-muted);
}

.ns-coming-soon a[b-cntzmokzil] {
    color: var(--ns-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ns-coming-soon a:focus-visible[b-cntzmokzil] {
    outline: 2px solid var(--ns-dark);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Modules/Pricing/UI/Components/TaxRatePercentEdit.razor.rz.scp.css */
.tax-rate-percent-edit[b-amx4uhdfri] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* The editor is a child component, so its element is only reachable with ::deep — which works
   here because this is a .razor.css file and not an inline <style> block. */
.tax-rate-percent-edit[b-amx4uhdfri]  .dxbl-spin-edit {
    flex: 1;
    min-width: 0;
}

.tax-rate-percent-edit-unit[b-amx4uhdfri] {
    flex: 0 0 auto;
    color: var(--bs-secondary-color, #6c757d);
}