@import '_content/MD.DynamicMail.UI.Blazor.Syncfusion/MD.DynamicMail.UI.Blazor.Syncfusion.bmjc0czs9o.bundle.scp.css';

/* /Components/Layout/AuthorizedAppBar.razor.rz.scp.css */
.appContentTopBar[b-m2ibheg7iw] {
    flex-shrink: 0;
    margin-bottom: var(--gm-shell-gap);
    border-radius: var(--gm-shell-gap);
    background-color: var(--gm-bg-panel);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.gm-appbar-wrap[b-m2ibheg7iw] {
    position: relative;
}

/* Two classes (0,2,0) so this beats Syncfusion's own single-class ".e-appbar" rule
   from bootstrap5.css, which is <link>-ed after our scoped CSS bundle in App.razor
   and would otherwise win the cascade on equal specificity, leaving the bar a
   different shade than .appContentPane despite both using --gm-bg-panel. */
[b-m2ibheg7iw] .e-appbar.gm-appbar {
    border-radius: var(--gm-shell-gap);
    background-color: var(--gm-bg-panel);
    color: var(--gm-text);
}

/* Was missing "::deep" here (unlike the equivalent rule in PublicAppBar.razor.css):
   .gm-appbar-toggle is applied via SfButton's CssClass, i.e. a CHILD COMPONENT, not a
   raw element written directly in this component's markup, so without "::deep" this
   rule was silently never matching the icon's color at all. */
[b-m2ibheg7iw] .gm-appbar-toggle {
    color: var(--gm-text);
}

.gm-appbar-title[b-m2ibheg7iw] {
    margin-left: 0.5rem;
    font-weight: 700;
}
/* /Components/Layout/AuthorizedLayout.razor.rz.scp.css */
.appMain[b-m2mqlpgkk8] {
    background-color: var(--gm-bg);
    padding: var(--gm-shell-gap);
    padding-bottom: calc(var(--gm-shell-gap) / 2);
    height: 100vh;
    box-sizing: border-box;
}

.appMainContentPanel[b-m2mqlpgkk8] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.appMainContent[b-m2mqlpgkk8] {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-height: 0;
}

.appMainContentFooter[b-m2mqlpgkk8] {
    flex-shrink: 0;
    padding-top: calc(var(--gm-shell-gap) / 2);
    text-align: center;
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

    /* Muted-but-legible link treatment so the footer's links don't clash with its
       small, subdued text color in either light or dark mode. */
    .appMainContentFooter a[b-m2mqlpgkk8] {
        color: inherit;
        text-decoration: underline;
    }

        .appMainContentFooter a:hover[b-m2mqlpgkk8] {
            color: var(--gm-text);
        }

.appMainContentArea[b-m2mqlpgkk8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin-left: var(--gm-shell-gap);
}

.appContentPane[b-m2mqlpgkk8] {
    background-color: var(--gm-bg-panel);
    flex-grow: 1;
    overflow-y: auto;
    height: 0;
    border-radius: var(--gm-shell-gap);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    box-sizing: border-box;
}

.appContentArea[b-m2mqlpgkk8] {
    min-width: 0;
}

#blazor-error-ui[b-m2mqlpgkk8] {
    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-m2mqlpgkk8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/AuthorizedNavMenu.razor.rz.scp.css */
/* Most selectors below are prefixed with "::deep": several classes are applied to
   NavLink-rendered <a> tags, and Blazor's CSS-isolation scope attribute is only ever
   added to a component's OWN raw HTML elements - NOT to elements produced by a child
   COMPONENT like NavLink, even though the "class" attribute itself is forwarded and
   rendered correctly. Without "::deep", those rules would silently fail to match any
   NavLink and the item would fall through to unstyled/global (e.g. Bootstrap's bare
   "a" tag) styling.

   EXCEPTION: .gm-nav itself (this component's own nav ROOT element, written directly
   in this component's markup) must NOT use "::deep". "::deep .foo" compiles to
   "[scope-attr] .foo" - a descendant selector requiring an ANCESTOR to carry the
   scope attribute. The root element carries the scope attribute on ITSELF, not on any
   ancestor, so it can never satisfy its own "::deep" rule and the rule silently stops
   matching (confirmed live: this previously left the sidebar nav with no flex,
   padding, or gap at all). Every other class here is a descendant of this root, so it
   always has a qualifying ancestor and "::deep" works fine for those. */
.gm-nav[b-ib6r8cxmf0] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    gap: 0.15rem;
}

/* Shared sizing for every sidebar icon, which now render via Syncfusion's built-in
   "e-icons" font (same family as the AppBar's own hamburger icon) instead of the old
   hand-rolled inline-SVG "gm-icon-*" classes - a single shared font scales far better
   to this many menu items than hand-drawing an SVG per icon. */
[b-ib6r8cxmf0] .gm-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    font-size: 1.05rem;
    color: var(--gm-text);
    flex-shrink: 0;
}

[b-ib6r8cxmf0] .gm-nav-separator {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--gm-border);
}

/* Rightmost/target class here is .gm-nav (this component's own root) - see the
   exception noted above. No "::deep" for the same reason. */
.appMainContentSidebar.closed .gm-nav[b-ib6r8cxmf0] {
    padding: 0.5rem 0.4rem;
}

/* Wraps every item that must stay pinned to the very bottom of the sidebar (Switch to
   classic layout, Getting Started): margin-top: auto on the GROUP - not on each item
   individually - pushes the whole group down as one block, so the items inside stay
   stacked directly against each other instead of each fighting for the remaining
   flex space on its own. */
[b-ib6r8cxmf0] .gm-nav-bottom-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gm-border);
}

[b-ib6r8cxmf0] .gm-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--gm-text);
    text-decoration: none;
    background: none;
    border: none;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}

    [b-ib6r8cxmf0] .gm-nav-link:hover {
        background-color: var(--gm-hover);
        text-decoration: none;
    }

/* Intentionally no ".gm-nav-link.active" rule: every item - NavLink or toggle button
   alike - should look like a plain menu button, never like a highlighted link, whether
   or not it matches the current page. */

[b-ib6r8cxmf0] .gm-nav-toggle {
    justify-content: flex-start;
}

[b-ib6r8cxmf0] .gm-nav-toggle-text {
    flex: 1;
}

[b-ib6r8cxmf0] .gm-nav-caret {
    transition: transform 0.15s ease-in-out;
}

[b-ib6r8cxmf0] .gm-nav-caret-open {
    transform: rotate(180deg);
}

[b-ib6r8cxmf0] .gm-nav-sublist {
    display: flex;
    flex-direction: column;
    padding-left: 1.25rem;
    gap: 0.1rem;
}

[b-ib6r8cxmf0] .gm-nav-sublink {
    font-size: 0.85rem;
}

/* The collapsed-state overrides (hiding text/carets/sublists, centering the icon) used
   to live here, but as "::deep .appMainContentSidebar.closed .foo" they could never
   actually match anything: "::deep" always requires THIS component's own scope
   attribute to sit on an ANCESTOR of the selected element, and ".appMainContentSidebar"
   is the root of AuthorizedSidebar.razor - a PARENT component that wraps this one, i.e.
   an ANCESTOR of every element here, never a descendant of them. There is no DOM order
   in which this component's scope can be an ancestor of an ancestor of itself, so the
   rule was silently dead CSS (confirmed via the compiled
   obj/.../AuthorizedNavMenu.razor.rz.scp.css output) - collapsing the sidebar visibly
   still showed the un-hidden, wrapping menu text instead of icons-only. Moved to
   AuthorizedSidebar.razor.css instead, written the other way around
   (".appMainContentSidebar.closed ::deep .gm-nav-text"), which is the only direction
   "::deep" can actually cross a component boundary: a selector segment OWNED BY the
   ancestor component, reaching DOWN into a descendant component's rendered classes. */
/* /Components/Layout/AuthorizedSidebar.razor.rz.scp.css */
.appMainContentSidebar[b-1yo8kfga25] {
    display: flex;
    flex-direction: column;
    background-color: var(--gm-bg-panel);
    border-radius: var(--gm-shell-gap);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gm-border);
    width: 260px;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.2s ease-in-out;
    box-sizing: border-box;
}

    .appMainContentSidebar.closed[b-1yo8kfga25] {
        width: 72px;
    }

.gm-sidebar-header[b-1yo8kfga25] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0.85rem;
    flex-shrink: 0;
}

/* Docked/collapsed state, driven by the "closed" class AuthorizedSidebar.razor toggles
   on its own root div (bound to SidebarState.IsOpen) instead of Syncfusion's
   JS-managed "e-close"/"e-dock" classes. */
.appMainContentSidebar.closed .gm-sidebar-header[b-1yo8kfga25] {
    padding: 1rem 0;
    justify-content: center;
}

.appMainContentSidebar.closed .gm-sidebar-title[b-1yo8kfga25] {
    display: none;
}

.gm-sidebar-title[b-1yo8kfga25] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--gm-text);
    white-space: nowrap;
}

.gm-sidebar-nav-wrapper[b-1yo8kfga25] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

    .gm-sidebar-nav-wrapper[b-1yo8kfga25]  .gm-nav {
        height: 100%;
    }

.gm-sidebar-footer[b-1yo8kfga25] {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem 0.85rem;
    border-top: 1px solid var(--gm-border);
}

.gm-collapse-btn[b-1yo8kfga25] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--gm-text);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

    .gm-collapse-btn:hover[b-1yo8kfga25] {
        background-color: var(--gm-hover);
    }

.gm-collapse-text[b-1yo8kfga25] {
    white-space: nowrap;
    overflow: hidden;
}

/* A self-contained background-image icon rather than a "bi bi-*-nav-menu" class:
   those classes are defined only in NavMenu.razor.css/AuthorizedNavMenu.razor.css,
   scoped by Blazor CSS isolation to those components, so they would not reach this
   button - and their fill is hardcoded white for the dark classic navbar, which would
   be invisible against this light sidebar anyway. */
.gm-collapse-icon[b-1yo8kfga25] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1px solid var(--gm-border);
    border-radius: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2333383f' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    transition: transform 0.15s ease-in-out;
}

/* The SVG above bakes its fill color into the data-URI itself, so a CSS variable
   can't reach into it - a separate dark-mode override swaps in a lighter-fill
   copy of the same arrow instead, matching --gm-text's dark value. */
html[data-bs-theme='dark'] .gm-collapse-icon[b-1yo8kfga25] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e6e8eb' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.appMainContentSidebar.closed .gm-collapse-text[b-1yo8kfga25] {
    display: none;
}

.appMainContentSidebar.closed .gm-collapse-btn[b-1yo8kfga25] {
    justify-content: center;
}

.appMainContentSidebar.closed .gm-collapse-icon[b-1yo8kfga25] {
    transform: rotate(180deg);
}

/* Icons-only collapsed rail for the nested AuthorizedNavMenu: text, carets, admin
   sub-lists and separators disappear, and every link centers its icon in the narrower
   72px width instead of left-aligning it. ".appMainContentSidebar.closed" is owned
   directly by THIS component, so it gets AuthorizedSidebar's own scope attribute
   appended normally; "::deep" after it then reaches down into AuthorizedNavMenu's
   rendered classes with no scope requirement of its own - the same working pattern as
   ".gm-sidebar-nav-wrapper ::deep .gm-nav" above. This has to live here rather than in
   AuthorizedNavMenu.razor.css: "::deep" can only reach DOWN from a selector segment
   owned by an ancestor component into a descendant's classes, never the other way
   around, and ".appMainContentSidebar" belongs to this (ancestor) component while
   ".gm-nav-text" etc. belong to the nested (descendant) AuthorizedNavMenu. */
.appMainContentSidebar.closed[b-1yo8kfga25]  .gm-nav-text,
.appMainContentSidebar.closed[b-1yo8kfga25]  .gm-nav-caret,
.appMainContentSidebar.closed[b-1yo8kfga25]  .gm-nav-sublist,
.appMainContentSidebar.closed[b-1yo8kfga25]  .gm-nav-separator {
    display: none;
}

.appMainContentSidebar.closed[b-1yo8kfga25]  .gm-nav-link {
    justify-content: center;
    padding: 0.55rem;
}
/* /Components/Layout/ConnectingOverlay.razor.rz.scp.css */
/* Sits above SfAppBar's own z-index: 1000 (see AuthorizedAppBar.razor/
   PublicAppBar.razor comments on that convention), so it blocks clicks on the
   AppBar too while visible.

   Delay-gated fade-in: starts at opacity 0 and only starts fading to visible after
   "animation-delay" has elapsed. On a normal/fast circuit connect, ConnectingOverlay's
   own OnAfterRender(firstRender) removes this element (via the component's @if)
   well before the delay elapses, so it is never actually seen at all - only a
   genuinely slow connect (the real-hosting scenario this exists for) keeps the
   element around long enough for the fade-in to complete and become visible. This
   avoids the previous "flashes instantly on every navigation, even fast ones"
   behavior. There is deliberately no matching fade-OUT transition: the element is
   removed from the DOM outright by Blazor's @if the moment OnAfterRender fires,
   which happens too fast for a CSS transition on the way out to have any visible
   effect, and adding one would require extra JS/timing complexity for no real
   benefit here. */
/* The full-screen element is now an invisible click-blocker (no dimming, no
   spinner/text): it swallows clicks landing before the circuit is live (the
   "have to click twice" symptom) from the very first frame, while only the thin
   top bar inside it is delay-gated (0.375s, i.e. the previous 0.25s + 50%). */
.gm-connecting-overlay[b-5sicp5sm49] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: transparent;
    cursor: progress;
}

.gm-connecting-bar[b-5sicp5sm49] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
    opacity: 0;
    animation: gm-connecting-bar-fade-in-b-5sicp5sm49 0.2s ease-in forwards;
    animation-delay: 0.375s;
}

.gm-connecting-bar[b-5sicp5sm49]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background-color: var(--bs-primary, #0d6efd);
    animation: gm-connecting-bar-slide-b-5sicp5sm49 1.1s ease-in-out infinite;
}

@keyframes gm-connecting-bar-fade-in-b-5sicp5sm49 {
    to {
        opacity: 1;
    }
}

@keyframes gm-connecting-bar-slide-b-5sicp5sm49 {
    from {
        left: -40%;
    }

    to {
        left: 100%;
    }
}
/* /Components/Layout/GotMiniLogo.razor.rz.scp.css */
.gm-logo[b-8fmk9thu0l] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: #0077ec;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.gm-logo-got[b-8fmk9thu0l] {
    color: #A97B50;
    font-weight: 700;
    font-size: 0.62rem;
}

.gm-logo-mini[b-8fmk9thu0l] {
    color: #00401A;
    font-weight: 700;
    font-size: 0.62rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-wv3chsdewo] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-wv3chsdewo] {
    flex: 1;
}

.sidebar[b-wv3chsdewo] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-wv3chsdewo] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-wv3chsdewo]  a, .top-row[b-wv3chsdewo]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-wv3chsdewo]  a:hover, .top-row[b-wv3chsdewo]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-wv3chsdewo]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-wv3chsdewo] {
        justify-content: space-between;
    }

    .top-row[b-wv3chsdewo]  a, .top-row[b-wv3chsdewo]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-wv3chsdewo] {
        flex-direction: row;
    }

    .sidebar[b-wv3chsdewo] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-wv3chsdewo] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-wv3chsdewo]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-wv3chsdewo], article[b-wv3chsdewo] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-wv3chsdewo] {
    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-wv3chsdewo] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-s55ngxs512] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-s55ngxs512] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-s55ngxs512] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-s55ngxs512] {
    font-size: 1.1rem;
}

.bi[b-s55ngxs512] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-s55ngxs512] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-s55ngxs512] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-s55ngxs512] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-s55ngxs512] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-s55ngxs512] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-s55ngxs512] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-s55ngxs512] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-s55ngxs512] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-s55ngxs512] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-s55ngxs512] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-s55ngxs512] {
        padding-bottom: 1rem;
    }

    .nav-item[b-s55ngxs512]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-s55ngxs512]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-s55ngxs512]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-s55ngxs512] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-s55ngxs512] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-s55ngxs512] {
        display: none;
    }

    .nav-scrollable[b-s55ngxs512] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/PublicAppBar.razor.rz.scp.css */
/* EXCEPTION: .appContentTopBar is this component's own root div, written directly in
   this component's markup, so it must NOT use "::deep". "::deep .foo" compiles to
   "[scope-attr] .foo" - a descendant selector requiring an ANCESTOR to carry the scope
   attribute. The root element carries the scope attribute on ITSELF, not on any
   ancestor, so it can never satisfy its own "::deep" rule and the rule silently stops
   matching. Every other class below is a genuine descendant of this root, so "::deep"
   works fine for those (see comments further down). */
.appContentTopBar[b-mkegofg3fn] {
    flex-shrink: 0;
    margin-bottom: var(--gm-shell-gap);
    border-radius: var(--gm-shell-gap);
    background-color: var(--gm-bg-panel);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

[b-mkegofg3fn] .gm-appbar-wrap {
    position: relative;
}

/* Two classes (0,2,0) so this beats Syncfusion's own single-class ".e-appbar" rule
   from bootstrap5.css, which is <link>-ed after our scoped CSS bundle in App.razor
   and would otherwise win the cascade on equal specificity, leaving the bar a
   different shade than .appContentPane despite both using --gm-bg-panel. Already had
   "::deep" for this same "matches elements rendered by a child component" reason
   (SfAppBar). */
[b-mkegofg3fn] .e-appbar.gm-appbar {
    border-radius: var(--gm-shell-gap);
    background-color: var(--gm-bg-panel);
    color: var(--gm-text);
}

/* "::deep" throughout this file: several of these classes are applied to elements
   rendered by child COMPONENTS (SfButton, <NavLink>), and Blazor's CSS-isolation scope
   attribute is only ever added to a component's OWN raw HTML elements, not to
   elements produced by a child component - even though "class"/"CssClass" itself is
   forwarded and rendered correctly. Without "::deep" those rules would silently fail
   to match. Applied uniformly (including rules targeting plain elements) for
   consistency. */
[b-mkegofg3fn] .gm-appbar-toggle {
    color: var(--gm-text);
}

/* Syncfusion's SfDropDownButton always tags its icon with "e-icon-left" (the class
   name it uses for an icon sitting to the LEFT OF TEXT), even when there is no text
   at all (Content=""). Bootstrap5.css's ".e-btn-icon.e-icon-left" rule widens the
   icon's box to 2em and shifts it with "margin-left: -0.5em" - both meant to line the
   icon up correctly once real button text follows it. With no text, that widened/
   shifted box just pushes the hamburger glyph off-center to the left inside the
   button (confirmed via getComputedStyle: icon center was ~7px left of the button's
   center). Resetting width/margin back to the plain single-icon defaults (matching
   AuthorizedAppBar's plain SfButton hamburger, which never gets this class) centers
   it correctly. */
[b-mkegofg3fn] .gm-appbar-toggle .e-btn-icon.e-icon-left {
    width: auto;
    margin-left: 0;
}

[b-mkegofg3fn] .gm-appbar-title {
    margin-left: 0.5rem;
    font-weight: 700;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.appMain[b-4107detw1o] {
    background-color: var(--gm-bg);
    padding: var(--gm-shell-gap);
    padding-bottom: calc(var(--gm-shell-gap) / 2);
    height: 100vh;
    box-sizing: border-box;
}

.appMainContentPanel[b-4107detw1o] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.appMainContent[b-4107detw1o] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
}

.appMainContentFooter[b-4107detw1o] {
    flex-shrink: 0;
    padding-top: calc(var(--gm-shell-gap) / 2);
    text-align: center;
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

    /* Muted-but-legible link treatment so the footer's links don't clash with its
       small, subdued text color in either light or dark mode. */
    .appMainContentFooter a[b-4107detw1o] {
        color: inherit;
        text-decoration: underline;
    }

        .appMainContentFooter a:hover[b-4107detw1o] {
            color: var(--gm-text);
        }

.appContentPane[b-4107detw1o] {
    background-color: var(--gm-bg-panel);
    flex-grow: 1;
    overflow-y: auto;
    height: 0;
    border-radius: var(--gm-shell-gap);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    box-sizing: border-box;
}

.appContentArea[b-4107detw1o] {
    min-width: 0;
}

#blazor-error-ui[b-4107detw1o] {
    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-4107detw1o] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-hvnitk7d72],
.components-reconnect-repeated-attempt-visible[b-hvnitk7d72],
.components-reconnect-failed-visible[b-hvnitk7d72],
.components-pause-visible[b-hvnitk7d72],
.components-resume-failed-visible[b-hvnitk7d72],
.components-rejoining-animation[b-hvnitk7d72] {
    display: none;
}

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


#components-reconnect-modal[b-hvnitk7d72] {
    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-hvnitk7d72 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-hvnitk7d72 {
    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/Layout/UserMenu.razor.rz.scp.css */
/* Most selectors below are prefixed with "::deep": several classes are applied to
   NavLink-rendered <a> tags (Settings, Register, Login), and Blazor's CSS-isolation
   scope attribute is only ever added to a component's OWN raw HTML elements - NOT to
   elements produced by a child COMPONENT like NavLink, even though the "class"
   attribute itself is forwarded and rendered correctly. Without "::deep", those rules
   would silently fail to match and the links would fall through to unstyled/global
   (e.g. Bootstrap's bare "a" tag) styling.

   EXCEPTION: .gm-user-menu-anchor itself (this component's own root div, written
   directly in this component's markup) must NOT use "::deep". "::deep .foo" compiles
   to "[scope-attr] .foo" - a descendant selector requiring an ANCESTOR to carry the
   scope attribute. The root element carries the scope attribute on ITSELF, not on any
   ancestor, so it can never satisfy its own "::deep" rule and the rule silently stops
   matching (confirmed live: this previously left the whole anchor at position:static,
   so Register/Login/the avatar button rendered in normal page flow instead of pinned
   inside the top-right of the AppBar). Every other class here is a descendant of this
   root, so "::deep" works fine for those. */
.gm-user-menu-anchor[b-fktlkuagsf] {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    /* Syncfusion's sticky .e-appbar sets z-index: 1000 on itself, which otherwise wins
       stacking order over this sibling anchor and swallows its clicks. */
    z-index: 1001;
}

[b-fktlkuagsf] .gm-user-menu {
    position: relative;
}

[b-fktlkuagsf] .gm-user-avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

[b-fktlkuagsf] .gm-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #0077ec;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
}

[b-fktlkuagsf] .gm-user-avatar-lg {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

[b-fktlkuagsf] .gm-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--gm-bg-panel);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

[b-fktlkuagsf] .gm-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem 0.75rem;
}

[b-fktlkuagsf] .gm-user-dropdown-identity {
    min-width: 0;
}

[b-fktlkuagsf] .gm-user-name {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fktlkuagsf] .gm-user-role-badge {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background-color: #e8f5e9;
    color: #00401A;
    font-size: 0.7rem;
    font-weight: 600;
}

[b-fktlkuagsf] .gm-user-dropdown-item {
    display: flex;
    align-items: center;
    /* flex-start so every plain nav/action item (Settings, Logout) lines up on the
       left like a normal menu button; the Dark Theme row below is the one exception
       that still needs its switch pushed to the right. */
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    color: var(--gm-text);
    text-decoration: none;
    background: none;
    border: none;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

    [b-fktlkuagsf] .gm-user-dropdown-item:hover {
        background-color: var(--gm-hover);
        text-decoration: none;
    }

[b-fktlkuagsf] .gm-user-dropdown-toggle {
    justify-content: space-between;
    cursor: default;
}

    [b-fktlkuagsf] .gm-user-dropdown-toggle:hover {
        background-color: transparent;
    }

[b-fktlkuagsf] .gm-user-dropdown-separator {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--gm-border);
}

[b-fktlkuagsf] .gm-user-dropdown-button {
    width: 100%;
}

[b-fktlkuagsf] .gm-user-dropdown-button-end {
    justify-content: flex-end;
}

[b-fktlkuagsf] .gm-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    font-size: 1rem;
    flex-shrink: 0;
}

[b-fktlkuagsf] .gm-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
}

    [b-fktlkuagsf] .gm-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

[b-fktlkuagsf] .gm-switch-slider {
    position: absolute;
    inset: 0;
    background-color: #ccc;
    border-radius: 999px;
    transition: background-color 0.15s ease-in-out;
}

    [b-fktlkuagsf] .gm-switch-slider::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        left: 2px;
        bottom: 2px;
        background-color: #fff;
        border-radius: 50%;
        transition: transform 0.15s ease-in-out;
    }

[b-fktlkuagsf] .gm-switch input:checked + .gm-switch-slider {
    background-color: #0077ec;
}

    [b-fktlkuagsf] .gm-switch input:checked + .gm-switch-slider::before {
        transform: translateX(16px);
    }

[b-fktlkuagsf] .gm-auth-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-fktlkuagsf] .gm-auth-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--gm-text);
    font-size: 0.88rem;
    /* Outlined/secondary button treatment (border + panel fill) so Register reads as
       a real button next to Login's solid primary button below, instead of looking
       like a bare text link. */
    border: 1px solid var(--gm-border);
    background-color: var(--gm-bg-panel);
}

    [b-fktlkuagsf] .gm-auth-link:hover {
        background-color: var(--gm-hover);
        text-decoration: none;
    }

[b-fktlkuagsf] .gm-auth-link-primary {
    border-color: #0077ec;
    background-color: #0077ec;
    color: #fff;
}

    [b-fktlkuagsf] .gm-auth-link-primary:hover {
        border-color: #005fc1;
        background-color: #005fc1;
        color: #fff;
    }
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
.dashboard-panel-metric[b-pejn9hxw12] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.dashboard-panel-caption[b-pejn9hxw12] {
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.dashboard-panel-status-list[b-pejn9hxw12] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}
/* /Components/Pages/Dashboard/Panels/AdminStatsCard.razor.rz.scp.css */
.admin-stats-metric[b-qm6npi5ob1] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.admin-stats-chart[b-qm6npi5ob1] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.admin-stats-chart--stacked[b-qm6npi5ob1] {
    flex-direction: column;
    align-items: stretch;
}

.admin-stats-chart-graph[b-qm6npi5ob1] {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-stats-chart-legend[b-qm6npi5ob1] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.admin-stats-chart--stacked .admin-stats-chart-legend[b-qm6npi5ob1] {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    column-gap: 12px;
    row-gap: 4px;
    justify-content: start;
}

.admin-stats-chart-legend li[b-qm6npi5ob1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-stats-chart-legend-swatch[b-qm6npi5ob1] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
/* /Components/Pages/Dashboard/Panels/MiniByRecordChartCard.razor.rz.scp.css */
.mini-record-toggle[b-frqpymxm2q] {
    display: inline-flex;
}

.mini-record-chart[b-frqpymxm2q] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.mini-record-chart--stacked[b-frqpymxm2q] {
    flex-direction: column;
    align-items: stretch;
}

.mini-record-chart-graph[b-frqpymxm2q] {
    flex: 1 1 auto;
    min-width: 0;
}

.mini-record-chart-legend[b-frqpymxm2q] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.mini-record-chart-legend li[b-frqpymxm2q] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-record-chart-legend-swatch[b-frqpymxm2q] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mini-record-table[b-frqpymxm2q] {
    width: 100%;
    max-width: 320px;
}
/* /Components/Pages/Dashboard/Panels/MiniOwnershipChartCard.razor.rz.scp.css */
.mini-ownership-toggle[b-iikbcg2b3q] {
    display: inline-flex;
}

.mini-ownership-chart[b-iikbcg2b3q] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.mini-ownership-chart--stacked[b-iikbcg2b3q] {
    flex-direction: column;
    align-items: stretch;
}

.mini-ownership-chart-graph[b-iikbcg2b3q] {
    flex: 1 1 auto;
    min-width: 0;
}

.mini-ownership-chart-legend[b-iikbcg2b3q] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.mini-ownership-chart-legend li[b-iikbcg2b3q] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-ownership-chart-legend-swatch[b-iikbcg2b3q] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mini-ownership-table[b-iikbcg2b3q] {
    width: 100%;
    max-width: 320px;
}
/* /Components/Pages/Dashboard/Panels/NotificationsSummaryCard.razor.rz.scp.css */
.notifications-summary[b-7iqxbd2sys] {
    cursor: pointer;
}

.notifications-summary-metric[b-7iqxbd2sys] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
}

.notifications-summary-caption[b-7iqxbd2sys] {
    text-align: center;
}

.notifications-summary-chart[b-7iqxbd2sys] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.notifications-summary-chart-graph[b-7iqxbd2sys] {
    flex: 1 1 auto;
    min-width: 0;
}

.notifications-summary-chart-legend[b-7iqxbd2sys] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.notifications-summary-chart-legend-swatch[b-7iqxbd2sys] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    margin-right: 6px;
}

@media (max-width: 360px) {
    .notifications-summary-chart[b-7iqxbd2sys] {
        flex-direction: column;
        align-items: stretch;
    }

    .notifications-summary-chart-legend[b-7iqxbd2sys] {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(3, auto);
        column-gap: 12px;
    }
}
/* /Components/Pages/Dashboard/Panels/SceneryByRecordChartCard.razor.rz.scp.css */
.scenery-record-toggle[b-g87sqwhr57] {
    display: inline-flex;
}

.scenery-record-chart[b-g87sqwhr57] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.scenery-record-chart--stacked[b-g87sqwhr57] {
    flex-direction: column;
    align-items: stretch;
}

.scenery-record-chart-graph[b-g87sqwhr57] {
    flex: 1 1 auto;
    min-width: 0;
}

.scenery-record-chart-legend[b-g87sqwhr57] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.scenery-record-chart-legend li[b-g87sqwhr57] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scenery-record-chart-legend-swatch[b-g87sqwhr57] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.scenery-record-table[b-g87sqwhr57] {
    width: 100%;
    max-width: 320px;
}
/* /Components/Pages/Dashboard/Panels/SceneryOwnershipChartCard.razor.rz.scp.css */
.scenery-ownership-toggle[b-vh18unskb2] {
    display: inline-flex;
}

.scenery-ownership-chart[b-vh18unskb2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.scenery-ownership-chart--stacked[b-vh18unskb2] {
    flex-direction: column;
    align-items: stretch;
}

.scenery-ownership-chart-graph[b-vh18unskb2] {
    flex: 1 1 auto;
    min-width: 0;
}

.scenery-ownership-chart-legend[b-vh18unskb2] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.scenery-ownership-chart-legend li[b-vh18unskb2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scenery-ownership-chart-legend-swatch[b-vh18unskb2] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.scenery-ownership-table[b-vh18unskb2] {
    width: 100%;
    max-width: 320px;
}
/* /Components/Pages/Minis/ImageCountBadge.razor.rz.scp.css */
/* Pill badge showing how many images a mini has, out of the configured maximum. */
.image-count-badge[b-i3umrp7p3s] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: #343a40;
    color: #f8f9fa;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
    border: none;
    font-family: inherit;
}

/* Only the MyMinis grid passes a handler; the admin overview stays a plain label. */
.image-count-badge--clickable[b-i3umrp7p3s] {
    cursor: pointer;
}

.image-count-badge--clickable:hover[b-i3umrp7p3s],
.image-count-badge--clickable:focus-visible[b-i3umrp7p3s] {
    background-color: #495057;
}

.image-count-badge svg[b-i3umrp7p3s] {
    width: 0.95em;
    height: 0.95em;
    flex: none;
}
/* /Components/Shared/Chat/ChatPanel.razor.rz.scp.css */
.gm-chat-panel[b-z0kc9179s4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 600px;
    /* Reserves exactly the caller-supplied Width (used as the flex-basis here)
       and never grows or shrinks it - without this, the default flex-shrink: 1
       lets a sibling with flex-grow (e.g. LoanDetailsPage's .loan-details-main)
       squeeze this panel down or push it off-screen entirely instead of sitting
       at its intended fixed width next to the main content. */
    flex: 0 0 auto;
    /* Establishes a positioning context so any absolutely-positioned internal
       Syncfusion elements (e.g. the scroll-to-bottom FAB button) stay contained
       within this panel's own bounds instead of the nearest positioned ancestor
       further up the page. */
    position: relative;
}

.gm-chat-panel__load-more[b-z0kc9179s4] {
    align-self: center;
    margin-bottom: 0.5rem;
    background: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

/* Every message-level class below is applied via our own MessageTemplate content,
   which renders as a plain child of SfChatUI's markup rather than this component's
   own root - so, per the project's usual Blazor CSS-isolation rule, these need
   ::deep to keep matching regardless of the scope attribute SfChatUI's internal
   markup does or doesn't carry. */
[b-z0kc9179s4] .gm-chat-message {
    display: flex;
    margin: 0.35rem 0;
}

[b-z0kc9179s4] .gm-chat-message--own {
    justify-content: flex-end;
}

[b-z0kc9179s4] .gm-chat-message--other {
    justify-content: flex-start;
}

[b-z0kc9179s4] .gm-chat-message--system {
    justify-content: center;
    width: 100%;
    text-align: center;
    font-style: italic;
    color: var(--bs-secondary-color, #6c757d);
    background-color: var(--bs-tertiary-bg, #f5f5f5);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

/* Syncfusion's OWN per-message wrapper elements (".e-message-item" and
   ".e-message-group", neither of which comes from our MessageTemplate) cap every
   message - own, other, or system alike - to a "max-width: 75%" column aligned to
   whichever side ("e-left"/"e-right") that message's Author.ID resolved to. Our
   template content renders entirely inside that column, so nothing inside our own
   template can widen it. A system message has no "side" at all - it must span the
   full row - so these two wrapper elements are widened directly (via :has(),
   detecting our own root ".gm-chat-message--system" marker anywhere among their
   descendants) whenever they contain one. */
[b-z0kc9179s4] .e-message-item:has(.gm-chat-message--system),
[b-z0kc9179s4] .e-message-group:has(.gm-chat-message--system) {
    width: 100% !important;
    max-width: 100% !important;
}

[b-z0kc9179s4] .gm-chat-message__bubble {
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--bs-tertiary-bg, #f1f1f1);
}

[b-z0kc9179s4] .gm-chat-message--own .gm-chat-message__bubble {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
}

[b-z0kc9179s4] .gm-chat-message__author {
    font-weight: 600;
    font-size: 0.8rem;
}

[b-z0kc9179s4] .gm-chat-message__text {
    white-space: pre-wrap;
    word-break: break-word;
}

[b-z0kc9179s4] .gm-chat-message__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6c757d);
}

[b-z0kc9179s4] .gm-chat-message__status--read {
    color: var(--bs-primary, #0d6efd);
}

.gm-chat-footer[b-z0kc9179s4] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.5rem;
}

.gm-chat-footer__input[b-z0kc9179s4] {
    flex: 1 1 auto;
    resize: none;
}
/* /Components/Shared/RowActionMenu.razor.rz.scp.css */
/* This IS a raw element written directly in this component's own markup, so it
   correctly carries the scope attribute already - no "::deep" needed. "display:
   contents" makes it take no box of its own, so it doesn't disturb the surrounding
   grid cell's layout (it exists purely so the rules below have a real DOM ancestor
   to attach their required scope attribute to - see the comment in RowActionMenu.razor). */
.row-action-menu-host[b-m60njidysh] {
    display: contents;
}

/* Matches AuthorizedAppBar's hamburger look (transparent/borderless via the SfDropDownButton's
   own "e-inherit" CssClass, icon colour inherited from this rule) instead of the old compact
   size. "::deep" is required: .row-action-menu is applied via a CHILD COMPONENT's CssClass
   (SfDropDownButton), not a raw element written directly in this component's own markup, so
   without "::deep" this rule would never match (same Blazor CSS-isolation gotcha as
   AuthorizedAppBar.razor.css's .gm-appbar-toggle rule). */
[b-m60njidysh] .row-action-menu {
    color: var(--gm-text);
}

/* Same fix as PublicAppBar.razor.css's .gm-appbar-toggle rule: Syncfusion's
   SfDropDownButton always tags its icon "e-icon-left" (meant for icon-plus-text
   buttons) even with Content="", and bootstrap5.css's ".e-btn-icon.e-icon-left" rule
   widens/shifts the icon box, pushing the hamburger glyph off-center. Reset back to
   the plain single-icon defaults so it centers like AuthorizedAppBar's hamburger. */
[b-m60njidysh] .row-action-menu .e-btn-icon.e-icon-left {
    width: auto;
    margin-left: 0;
}

[b-m60njidysh] .row-action-menu .gm-three-dots-horizontal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--gm-text);
}

[b-m60njidysh] .row-action-menu .gm-three-dots-horizontal-icon::before {
    content: "\22EF";
    font-size: 1rem;
    line-height: 1;
}
/* /Features/GettingStarted/GettingStartedListPage.razor.rz.scp.css */
/* SfListView renders each item as its own <li class="e-list-item"> wrapping an
   "e-list-wrapper" div - neither is written directly in this component's markup (they
   come from the SfListView child component itself), so matching them needs "::deep"
   the same way a class forwarded through NavLink/SfButton's CssClass does. Both are
   reset to zero so this component's own ".gs-item" card (below) owns the entire visual
   box instead of nesting inside Syncfusion's default list-row chrome (a plain
   1px bottom hairline with no side border/radius/background - the "flat list" look the
   article overview used to have, unlike the bordered cards on the collection page). */
/* IMPORTANT: SfListView's root element does not receive this component's CSS-isolation
   scope attribute, so a selector that starts with "::deep .gs-listview" never matches
   (the scope attribute gets attached to the element BEFORE ::deep, which here is the
   SfListView root itself). The rules are therefore anchored on ".gs-listview-host", a
   plain div written in this component's own markup that does carry the scope attribute.
   Specificity also has to beat Syncfusion's ".e-listview .e-list-item" (1px bottom
   border) and the root ".e-listview" border, hence the extra host + class chain. */
.gs-listview-host[b-w6murhojs8]  .e-listview.gs-listview {
    border: none;
    border-radius: 0;
    background-color: transparent;
}

.gs-listview-host[b-w6murhojs8]  .e-listview.gs-listview .e-list-item,
.gs-listview-host[b-w6murhojs8]  .e-listview.gs-listview .e-list-item.e-hover,
.gs-listview-host[b-w6murhojs8]  .e-listview.gs-listview .e-list-item.e-active {
    border: none;
    background-color: transparent;
    margin-bottom: 0.75rem;
}

.gs-listview-host[b-w6murhojs8]  .e-listview.gs-listview .e-list-item:last-child {
    margin-bottom: 0;
}

.gs-listview-host[b-w6murhojs8]  .e-listview.gs-listview .e-list-wrapper {
    padding: 0;
}

/* Matches MiniCollectionListView.razor.css's ".collection-list-row" card look, using
   the same Bootstrap variables so the border/background swap automatically between
   light and dark mode along with the rest of the app. */
.gs-item[b-w6murhojs8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg, #fff);
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
}

.gs-item:hover[b-w6murhojs8] {
    border-color: var(--bs-primary, #0d6efd);
}

.gs-item-body h1[b-w6murhojs8] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.gs-item-body h2[b-w6murhojs8] {
    font-size: 1rem;
    font-weight: normal;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.25rem;
}

.gs-item-actions[b-w6murhojs8] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* SfButton's own root <button> is produced by that child component, not written
   directly here, so this also needs "::deep" to actually match it (see the .gs-listview
   comment above for the same rule). Deliberately NOT "e-small": at that size the icon
   glyph is barely legible, which was the actual complaint - a normal-sized outline
   button with a colored icon (set via CssClass="e-outline"/"e-primary"/"e-danger" on
   the SfButton itself) is both bigger and higher-contrast. */
[b-w6murhojs8] .gs-item-actions .e-btn.gs-action-btn {
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
}
/* /Features/Loans/LoanDetailsPage.razor.rz.scp.css */
.loan-details-header[b-2yz3ersyhd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Bootstrap's "form-control" sets width: 100%, but that alone doesn't stop the
   browser's own intrinsic min-content width for <input type="number"> (which is
   wider than this grid's 85px Quantity column) from forcing the column - and with
   it, the whole grid's auto-layout table - wider than intended, which is what
   produced a horizontal scrollbar only on rows rendering this input. min-width: 0
   lets the input actually shrink to the column instead of protecting its intrinsic
   size, and box-sizing keeps that width inclusive of padding/border. */
.loan-quantity-input[b-2yz3ersyhd] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


.loan-details-layout[b-2yz3ersyhd] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    /* Without this, a flex container's own min-width defaults to "auto" (its
       content's intrinsic size), which can keep the row as a whole from ever
       shrinking below that size - the same overflow problem min-width: 0 below
       solves for .loan-details-main, but one level up. */
    min-width: 0;
}

/* The loan chat panel is a sibling of this element inside .loan-details-layout and
   owns its own width (see LoanChatPanel.razor / ChatPanel.razor's Width parameter,
   sourced from SiteSettings.LoanChatPanelWidthPx) - reserved via flex: 0 0 auto on
   the chat panel's own root (ChatPanel.razor.css), not here. */
.loan-details-main[b-2yz3ersyhd] {
    /* flex-basis: 0% (not the previous "auto") deliberately ignores this element's
       own content when sizing it, and instead sizes it purely from available flex
       space - auto would otherwise let a wide SfGrid's natural/max-content width
       (which ignores each GridColumn's Width once there's no explicit width on the
       grid itself) push this item's preferred size out to (or beyond) the full row,
       leaving the fixed-width chat panel no room and forcing it off-screen instead
       of appearing next to the grid. */
    flex: 1 1 0%;
    min-width: 0;
    /* If the grid still needs more room than this element is given (e.g. on a
       narrower monitor), let THIS element scroll internally instead of the whole
       row/page growing wider than the viewport. */
    overflow-x: auto;
}

.loan-details-facts[b-2yz3ersyhd] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    margin: 0 0 1rem;
}

.loan-details-facts dt[b-2yz3ersyhd] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.loan-details-facts dd[b-2yz3ersyhd] {
    margin: 0;
}

.loan-details-status[b-2yz3ersyhd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The period/note editor used to sit flush against the lines grid immediately below
   it, with no visual separation between the two. */
.loans-header-editor[b-2yz3ersyhd] {
    margin-bottom: 1.5rem;
    /* Bootstrap's .row (used just below) applies negative left/right margins equal
       to half its gutter (.g-2 => --bs-gutter-x: 0.5rem, so -0.25rem each side) on
       the assumption it's nested inside an element with matching padding to absorb
       that overhang - normally a .container or a parent .col. This element has
       neither, so the row bled 0.25rem past this wrapper on each side, into
       .loan-details-main's overflow-x: auto, producing a horizontal scrollbar (and
       the page landing pre-scrolled to reveal it) even though nothing here visually
       needed to scroll. Matching padding here cancels the row's own negative
       margin instead of letting it escape into the scrollable ancestor. */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Stacks the layout to a single column on narrow viewports, so a future chat panel
   added as a sibling of .loan-details-main will naturally fall below the lines grid
   instead of squeezing it. */
@media (max-width: 700px) {
    .loan-details-layout[b-2yz3ersyhd] {
        flex-direction: column;
    }
}

/* Bootstrap's .col-auto columns (label + date input, label + date input, Save
   button) use flex-shrink: 0 and width: auto, so each claims its own full natural
   content width. .row itself does default to flex-wrap: wrap, but without an
   explicit width boundary here that wrap can fail to kick in before the row's
   unbroken content forces .loan-details-main (which has overflow-x: auto) into a
   horizontal scrollbar. min-width: 0 lets the row actually respect its container's
   width instead of sizing from content, and flex-wrap is restated so oversized
   content wraps to a second line instead of overflowing sideways. */
.loans-header-editor .row[b-2yz3ersyhd] {
    min-width: 0;
    flex-wrap: wrap;
}

/* /Features/Minis/Basket/BasketItemRow.razor.rz.scp.css */
.basket-row[b-yjpr4vza1w] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.basket-row-image[b-yjpr4vza1w] {
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: .25rem;
}

.basket-row-image img[b-yjpr4vza1w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.basket-row-name[b-yjpr4vza1w] {
    font-weight: 600;
    font-size: 1.05rem;
}

.basket-row-owner[b-yjpr4vza1w] {
    color: var(--bs-secondary-color, #6c757d);
}

/* Checkout must block while any line carries this state. */
.basket-row-invalid[b-yjpr4vza1w] {
    background-color: var(--bs-danger-bg-subtle, #f8d7da);
}

.basket-row-invalid-reason[b-yjpr4vza1w] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .35rem;
    color: var(--bs-danger-text-emphasis, #58151c);
}
/* /Features/Minis/Basket/BasketPage.razor.rz.scp.css */
.basket-header[b-l0mn44isot] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.basket-header-actions[b-l0mn44isot] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.basket-period[b-l0mn44isot] {
    margin-bottom: 1.5rem;
}

.basket-list[b-l0mn44isot] {
    display: flex;
    flex-direction: column;
}
/* /Features/Minis/Basket/FavoriteBasketPage.razor.rz.scp.css */
.basket-header[b-6ydgqdlv72] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.basket-header-actions[b-6ydgqdlv72] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.basket-list[b-6ydgqdlv72] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
/* /Features/Minis/Basket/MiniLendableChip.razor.rz.scp.css */
/* The chip is a button so the click stays in the Blazor event pipeline and can be kept
   from reaching the surrounding markup. These rules reset the button defaults that the
   Syncfusion e-chip look does not cover, and carry the three chip states. */

.e-chip.mini-chip-button[b-inz5mzh2m5] {
    font: inherit;
    line-height: 1.2;
    border: none;
    cursor: pointer;
}

.e-chip.mini-chip-button:focus-visible[b-inz5mzh2m5] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.e-chip.mini-chip-not-lendable[b-inz5mzh2m5] {
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    cursor: default;
}

.e-chip.mini-chip-add[b-inz5mzh2m5] {
    background-color: var(--bs-success-bg-subtle, #d1e7dd);
    color: var(--bs-success-text-emphasis, #0a3622);
}

.e-chip.mini-chip-in-basket[b-inz5mzh2m5] {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary-text-emphasis, #052c65);
    font-weight: 600;
}

/* The two availability states stay clickable, so unlike mini-chip-not-lendable they keep
   the pointer cursor: the basket accepts the mini and the loan conversion turns it down. */

.e-chip.mini-chip-not-available[b-inz5mzh2m5] {
    background-color: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #58151c);
}

.e-chip.mini-chip-loan-planned[b-inz5mzh2m5] {
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #664d03);
}
/* /Features/Minis/Collection/MiniCollection.razor.rz.scp.css */
/* The page title shares its row with the save-query action, so the action stays
   visible while the query panel is collapsed without costing a row of its own. */
.collection-page-header[b-73v772m6bw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* The accordion renders its own markup, so the header layout needs ::deep. */
[b-73v772m6bw] .collection-query-accordion {
    margin-bottom: 1rem;
}

.collection-query-header[b-73v772m6bw] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.collection-toolbar[b-73v772m6bw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e0e0e0);
    padding-bottom: .5rem;
}

.collection-count[b-73v772m6bw] {
    font-weight: 600;
}

.collection-toolbar-right[b-73v772m6bw] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.collection-view-switch[b-73v772m6bw] {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.collection-basket[b-73v772m6bw] {
    position: relative;
    display: inline-flex;
}

.collection-basket-badge[b-73v772m6bw] {
    position: absolute;
    top: -.5rem;
    right: -.5rem;
    z-index: 1;
}

.collection-basket-button[b-73v772m6bw] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

/* The active view is marked with an underline, matching the reference layout. Uses
   Bootstrap's own theme-aware variables (not hardcoded near-black hex codes) so the
   active label/underline stay visible instead of rendering as near-invisible
   dark-on-dark text once "data-bs-theme=dark" flips --bs-body-color to a light
   value and this rule's old hardcoded #212121 stayed dark regardless. */
.collection-view-button[b-73v772m6bw] {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--bs-secondary-color, #757575);
    padding: .5rem .75rem;
    cursor: pointer;
}

    .collection-view-button:hover[b-73v772m6bw] {
        color: var(--bs-body-color, #212121);
    }

    .collection-view-button.is-active[b-73v772m6bw] {
        color: var(--bs-body-color, #212121);
        border-bottom-color: var(--bs-body-color, #212121);
        font-weight: 600;
    }

    .collection-view-button:focus-visible[b-73v772m6bw] {
        outline: 2px solid var(--bs-body-color, #212121);
        outline-offset: 2px;
    }
/* /Features/Minis/Collection/MiniCollectionGalleryView.razor.rz.scp.css */
.collection-gallery[b-nodob0vvfg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.collection-card[b-nodob0vvfg] {
    outline: none;
}

/* Only the image and the title navigate, so the chip can be clicked without opening the
   details page. The anchors keep the surrounding design by inheriting their colour. */
.collection-card-image[b-nodob0vvfg],
.collection-card-title[b-nodob0vvfg] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.collection-card-title[b-nodob0vvfg] {
    display: block;
    font-size: 1.05rem;
    font-weight: 500;
}

.collection-card-title:hover[b-nodob0vvfg] {
    text-decoration: underline;
}

.collection-card-image:focus-visible[b-nodob0vvfg],
.collection-card-title:focus-visible[b-nodob0vvfg] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.collection-card[b-nodob0vvfg]  .e-card {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The content area fills the remaining height so the fact and tag columns can
   be pushed to the bottom regardless of the description length. */
.collection-card[b-nodob0vvfg]  .e-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* The image is always square. On hover it shrinks proportionally in both
   directions, which frees the space the description expands into. */
.collection-card-image[b-nodob0vvfg] {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
    transition: width 0.2s ease-in-out;
}

.collection-card-image img[b-nodob0vvfg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-card-description[b-nodob0vvfg] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
}

.collection-card:hover .collection-card-image[b-nodob0vvfg],
.collection-card:focus-within .collection-card-image[b-nodob0vvfg] {
    width: 70%;
}

.collection-card:hover .collection-card-description[b-nodob0vvfg],
.collection-card:focus-within .collection-card-description[b-nodob0vvfg] {
    max-height: 100px;
    opacity: 1;
    margin-bottom: 0.5rem;
}

/* The facts always sit above the tags: side by side squeezed both columns even in
   the widest layout. */
.collection-card-columns[b-nodob0vvfg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
}

.collection-card-facts[b-nodob0vvfg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    margin: 0;
    font-size: 0.9rem;
}

.collection-card-facts dt[b-nodob0vvfg] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.collection-card-facts dd[b-nodob0vvfg] {
    margin: 0;
}

.collection-card-tags[b-nodob0vvfg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-content: flex-start;
}

.collection-card-tag[b-nodob0vvfg] {
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    font-size: 0.8rem;
}

.collection-card-muted[b-nodob0vvfg] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
    font-size: 0.85rem;
}

@media (max-width: 1200px) {
    .collection-gallery[b-nodob0vvfg] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .collection-gallery[b-nodob0vvfg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .collection-gallery[b-nodob0vvfg] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Minis/Collection/MiniCollectionListView.razor.rz.scp.css */
.collection-list[b-3a81wtfpzf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.collection-list-row[b-3a81wtfpzf] {
    display: grid;
    grid-template-columns: 170px minmax(14rem, auto) minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg, #fff);
}

.collection-list-row:hover[b-3a81wtfpzf] {
    border-color: var(--bs-primary, #0d6efd);
}

/* Only the image and the name navigate, so the chip can be clicked without opening the
   details page. The anchors keep the surrounding design by inheriting their colour. */
.collection-list-image[b-3a81wtfpzf],
.collection-list-name[b-3a81wtfpzf] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.collection-list-name:hover[b-3a81wtfpzf] {
    text-decoration: underline;
}

.collection-list-image:focus-visible[b-3a81wtfpzf],
.collection-list-name:focus-visible[b-3a81wtfpzf] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.collection-list-image[b-3a81wtfpzf] {
    position: relative;
    display: block;
    width: 170px;
    height: 170px;
    overflow: hidden;
    border-radius: 0.375rem;
    background-color: var(--bs-tertiary-bg, #f1f1f1);
}

.collection-list-image img[b-3a81wtfpzf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-list-name-row[b-3a81wtfpzf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.collection-list-name[b-3a81wtfpzf] {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
}

.collection-list-image-count[b-3a81wtfpzf] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-align: center;
}

.collection-list-details[b-3a81wtfpzf] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    margin: 0;
}

.collection-list-details dt[b-3a81wtfpzf] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.collection-list-details dd[b-3a81wtfpzf] {
    margin: 0;
}

.collection-list-tags[b-3a81wtfpzf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-content: flex-start;
}

.collection-list-description-caption[b-3a81wtfpzf] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.15rem;
}

.collection-list-description-text[b-3a81wtfpzf] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.collection-list-no-description[b-3a81wtfpzf] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

.collection-tag[b-3a81wtfpzf] {
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    font-size: 0.85rem;
}

.collection-list-no-tags[b-3a81wtfpzf] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

@media (max-width: 768px) {
    .collection-list-row[b-3a81wtfpzf] {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .collection-list-image[b-3a81wtfpzf] {
        width: 120px;
        height: 120px;
    }

    .collection-list-description[b-3a81wtfpzf],
    .collection-list-tags[b-3a81wtfpzf] {
        grid-column: 1 / -1;
    }
}
/* /Features/Minis/Collection/MiniDetails.razor.rz.scp.css */
.mini-details-header[b-6o2lc8ytvl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mini-details-columns[b-6o2lc8ytvl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

    .mini-details-columns h2[b-6o2lc8ytvl] {
        font-size: 1.05rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.mini-details-image[b-6o2lc8ytvl] {
    width: 100%;
    height: 320px;
    object-fit: contain;
}

.mini-details-facts dl[b-6o2lc8ytvl] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    margin: 0;
}

.mini-details-facts dt[b-6o2lc8ytvl] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.mini-details-facts dd[b-6o2lc8ytvl] {
    margin: 0;
}

.mini-details-tag-list[b-6o2lc8ytvl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mini-details-tag[b-6o2lc8ytvl] {
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    font-size: 0.85rem;
}

.mini-details-muted[b-6o2lc8ytvl] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

@media (max-width: 1200px) {
    .mini-details-columns[b-6o2lc8ytvl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .mini-details-columns[b-6o2lc8ytvl] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mini-details-image-clickable[b-6o2lc8ytvl] {
    cursor: pointer;
}

.mini-details-enlarged-image[b-6o2lc8ytvl] {
    width: 100%;
    height: 70vh;
    object-fit: contain;
}

[b-6o2lc8ytvl] .mini-details-carousel .e-carousel-navigators .e-previous,
[b-6o2lc8ytvl] .mini-details-carousel .e-carousel-navigators .e-next {
    display: flex;
    align-items: center;
    justify-content: center;
}

    [b-6o2lc8ytvl] .mini-details-carousel .e-carousel-navigators .e-previous .e-btn,
    [b-6o2lc8ytvl] .mini-details-carousel .e-carousel-navigators .e-next .e-btn {
        width: 2.5rem;
        height: 2.5rem;
        background-color: rgb(128, 128, 128) !important;
        border-radius: 50%;
        opacity: 1;
    }

        [b-6o2lc8ytvl] .mini-details-carousel .e-carousel-navigators .e-previous .e-btn:hover,
        [b-6o2lc8ytvl] .mini-details-carousel .e-carousel-navigators .e-next .e-btn:hover {
            background-color: rgba(0, 0, 0, 0.25) !important;
        }

        [b-6o2lc8ytvl] .mini-details-carousel .e-carousel-navigators .e-previous .e-btn .e-btn-icon,
        [b-6o2lc8ytvl] .mini-details-carousel .e-carousel-navigators .e-next .e-btn .e-btn-icon {
            color: rgba(0, 0, 0, 1) !important;
        }

[b-6o2lc8ytvl] .mini-details-enlarged-carousel {
    display: flex;
    flex-direction: column;
    z-index: 1010;
}

    [b-6o2lc8ytvl].mini-details-enlarged-carousel .e-carousel-items {
        order: 1;
    }

    [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-indicators {
        order: 2;
        position: relative;
        bottom: auto;
        display: flex;
        justify-content: center;
        padding: 0.5rem 0;
        gap: 0.5rem !important;
    }

        [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-indicators .e-indicator-bars {
            display: flex;
        }

            [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .mini-details-thumb-indicator {
                width: 2rem;
                height: 2rem;
                margin: 0;
                padding: 2px;
                border: 2px solid transparent;
                border-radius: 0.25rem;
                background-color: var(--bs-secondary-bg, #e9ecef);
                cursor: pointer;
                overflow: hidden;
            }

                [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .mini-details-thumb-indicator img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

            [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .mini-details-thumb-indicator {
                border-color: var(--bs-primary, #3c78ef);
            }

    [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-navigators .e-previous,
    [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-navigators .e-next {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-navigators .e-previous .e-btn,
        [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-navigators .e-next .e-btn {
            width: 2.5rem;
            height: 2.5rem;
            background-color: rgb(128, 128, 128) !important;
            border-radius: 50%;
            opacity: 1;
        }

            [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-navigators .e-previous .e-btn:hover,
            [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-navigators .e-next .e-btn:hover {
                background-color: rgba(0, 0, 0, 0.25) !important;
            }

            [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-navigators .e-previous .e-btn .e-btn-icon,
            [b-6o2lc8ytvl] .mini-details-enlarged-carousel .e-carousel-navigators .e-next .e-btn .e-btn-icon {
                color: rgba(0, 0, 0, 1) !important;
            }

[b-6o2lc8ytvl] .e-dlg-overlay {
    background-color: rgba(60, 60, 60, 0.55) !important;
    opacity: 1 !important;
}
/* /Features/Minis/Favorites/MiniFavoriteStar.razor.rz.scp.css */
/* The star is a button so the click stays in the Blazor event pipeline and can be kept
   from reaching the surrounding anchor. These rules reset the button defaults and carry
   the two states: white fill with a grey outline when the mini is not a favorite, yellow
   fill when it is. */

.mini-favorite-star[b-ynlcid3ze1] {
    background: none;
    border: none;
    padding: 0;
    line-height: 0;
    cursor: pointer;
}

    .mini-favorite-star:focus-visible[b-ynlcid3ze1] {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: 2px;
    }

    .mini-favorite-star svg[b-ynlcid3ze1] {
        width: 1.25rem;
        height: 1.25rem;
        stroke-width: 1.5;
    }

.mini-favorite-star-off svg[b-ynlcid3ze1] {
    fill: #fff;
    stroke: var(--bs-secondary-color, #6c757d);
}

.mini-favorite-star-on svg[b-ynlcid3ze1] {
    fill: #ffc107;
    stroke: #b8860b;
}
/* /Features/Notifications/NotificationsPage.razor.rz.scp.css */
.notifications-page[b-pdwyfjhnih] {
    color: var(--gm-text);
}

.notifications-list[b-pdwyfjhnih] {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--gm-border);
    border-radius: 8px;
    overflow: hidden;
}

.notification-item[b-pdwyfjhnih] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-top: 1px solid var(--gm-border);
    background-color: var(--gm-bg-panel);
}

.notification-item:first-child[b-pdwyfjhnih] {
    border-top: none;
}

.notification-item--unread[b-pdwyfjhnih] {
    background-color: color-mix(in srgb, var(--gm-bg-panel) 80%, var(--bs-primary) 20%);
}

.notification-main[b-pdwyfjhnih] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.notification-unread-dot[b-pdwyfjhnih] {
    margin-top: 0.45rem;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    flex: 0 0 8px;
    background-color: var(--bs-primary);
}

.notification-message[b-pdwyfjhnih] {
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.notification-item--unread .notification-message[b-pdwyfjhnih] {
    font-weight: 600;
}

.notification-side[b-pdwyfjhnih] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
}

.notification-age[b-pdwyfjhnih] {
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

.notification-item--read .notification-age[b-pdwyfjhnih] {
    color: var(--gm-text-muted);
}
/* /Features/Scenery/Collection/SceneryCollection.razor.rz.scp.css */
/* The page title shares its row with the save-query action, so the action stays
   visible while the query panel is collapsed without costing a row of its own. */
.collection-page-header[b-w19vly4mos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* The accordion renders its own markup, so the header layout needs ::deep. */
[b-w19vly4mos] .collection-query-accordion {
    margin-bottom: 1rem;
}

.collection-query-header[b-w19vly4mos] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.collection-toolbar[b-w19vly4mos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e0e0e0);
    padding-bottom: .5rem;
}

.collection-count[b-w19vly4mos] {
    font-weight: 600;
}

.collection-toolbar-right[b-w19vly4mos] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.collection-view-switch[b-w19vly4mos] {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

/* The active view is marked with an underline, matching the reference layout. Uses
   Bootstrap's own theme-aware variables (not hardcoded near-black hex codes) so the
   active label/underline stay visible instead of rendering as near-invisible
   dark-on-dark text once "data-bs-theme=dark" flips --bs-body-color to a light
   value and this rule's old hardcoded #212121 stayed dark regardless. */
.collection-view-button[b-w19vly4mos] {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--bs-secondary-color, #757575);
    padding: .5rem .75rem;
    cursor: pointer;
}

    .collection-view-button:hover[b-w19vly4mos] {
        color: var(--bs-body-color, #212121);
    }

    .collection-view-button.is-active[b-w19vly4mos] {
        color: var(--bs-body-color, #212121);
        border-bottom-color: var(--bs-body-color, #212121);
        font-weight: 600;
    }

    .collection-view-button:focus-visible[b-w19vly4mos] {
        outline: 2px solid var(--bs-body-color, #212121);
        outline-offset: 2px;
    }
/* /Features/Scenery/Collection/SceneryCollectionGalleryView.razor.rz.scp.css */
.collection-gallery[b-7vpso6wdvl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.collection-card[b-7vpso6wdvl] {
    outline: none;
}

/* Only the image and the title navigate, so the chip can be clicked without opening the
   details page. The anchors keep the surrounding design by inheriting their colour. */
.collection-card-image[b-7vpso6wdvl],
.collection-card-title[b-7vpso6wdvl] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.collection-card-title[b-7vpso6wdvl] {
    display: block;
    font-size: 1.05rem;
    font-weight: 500;
}

.collection-card-title:hover[b-7vpso6wdvl] {
    text-decoration: underline;
}

.collection-card-image:focus-visible[b-7vpso6wdvl],
.collection-card-title:focus-visible[b-7vpso6wdvl] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.collection-card[b-7vpso6wdvl]  .e-card {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The content area fills the remaining height so the fact and tag columns can
   be pushed to the bottom regardless of the description length. */
.collection-card[b-7vpso6wdvl]  .e-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* The image is always square. On hover it shrinks proportionally in both
   directions, which frees the space the description expands into. */
.collection-card-image[b-7vpso6wdvl] {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
    transition: width 0.2s ease-in-out;
}

.collection-card-image img[b-7vpso6wdvl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-card-description[b-7vpso6wdvl] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
}

.collection-card:hover .collection-card-image[b-7vpso6wdvl],
.collection-card:focus-within .collection-card-image[b-7vpso6wdvl] {
    width: 70%;
}

.collection-card:hover .collection-card-description[b-7vpso6wdvl],
.collection-card:focus-within .collection-card-description[b-7vpso6wdvl] {
    max-height: 100px;
    opacity: 1;
    margin-bottom: 0.5rem;
}

/* The facts always sit above the tags: side by side squeezed both columns even in
   the widest layout. */
.collection-card-columns[b-7vpso6wdvl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
}

.collection-card-facts[b-7vpso6wdvl] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    margin: 0;
    font-size: 0.9rem;
}

.collection-card-facts dt[b-7vpso6wdvl] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.collection-card-facts dd[b-7vpso6wdvl] {
    margin: 0;
}

.collection-card-tags[b-7vpso6wdvl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-content: flex-start;
}

.collection-card-tag[b-7vpso6wdvl] {
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    font-size: 0.8rem;
}

.collection-card-muted[b-7vpso6wdvl] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
    font-size: 0.85rem;
}

@media (max-width: 1200px) {
    .collection-gallery[b-7vpso6wdvl] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .collection-gallery[b-7vpso6wdvl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .collection-gallery[b-7vpso6wdvl] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Scenery/Collection/SceneryCollectionListView.razor.rz.scp.css */
.collection-list[b-k1lzzru97c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.collection-list-row[b-k1lzzru97c] {
    display: grid;
    grid-template-columns: 170px minmax(14rem, auto) minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg, #fff);
}

.collection-list-row:hover[b-k1lzzru97c] {
    border-color: var(--bs-primary, #0d6efd);
}

/* Only the image and the name navigate, so the chip can be clicked without opening the
   details page. The anchors keep the surrounding design by inheriting their colour. */
.collection-list-image[b-k1lzzru97c],
.collection-list-name[b-k1lzzru97c] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.collection-list-name:hover[b-k1lzzru97c] {
    text-decoration: underline;
}

.collection-list-image:focus-visible[b-k1lzzru97c],
.collection-list-name:focus-visible[b-k1lzzru97c] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.collection-list-image[b-k1lzzru97c] {
    position: relative;
    display: block;
    width: 170px;
    height: 170px;
    overflow: hidden;
    border-radius: 0.375rem;
    background-color: var(--bs-tertiary-bg, #f1f1f1);
}

.collection-list-image img[b-k1lzzru97c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-list-name-row[b-k1lzzru97c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.collection-list-name[b-k1lzzru97c] {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
}

.collection-list-image-count[b-k1lzzru97c] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-align: center;
}

.collection-list-details[b-k1lzzru97c] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    margin: 0;
}

.collection-list-details dt[b-k1lzzru97c] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.collection-list-details dd[b-k1lzzru97c] {
    margin: 0;
}

.collection-list-tags[b-k1lzzru97c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-content: flex-start;
}

.collection-list-description-caption[b-k1lzzru97c] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.15rem;
}

.collection-list-description-text[b-k1lzzru97c] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.collection-list-no-description[b-k1lzzru97c] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

.collection-tag[b-k1lzzru97c] {
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    font-size: 0.85rem;
}

.collection-list-no-tags[b-k1lzzru97c] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

@media (max-width: 768px) {
    .collection-list-row[b-k1lzzru97c] {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .collection-list-image[b-k1lzzru97c] {
        width: 120px;
        height: 120px;
    }

    .collection-list-description[b-k1lzzru97c],
    .collection-list-tags[b-k1lzzru97c] {
        grid-column: 1 / -1;
    }
}
/* /Features/Scenery/Collection/SceneryDetails.razor.rz.scp.css */
.scenery-details-header[b-9xr8x2sgu2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.scenery-details-columns[b-9xr8x2sgu2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

    .scenery-details-columns h2[b-9xr8x2sgu2] {
        font-size: 1.05rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.scenery-details-image[b-9xr8x2sgu2] {
    width: 100%;
    height: 320px;
    object-fit: contain;
}

.scenery-details-facts dl[b-9xr8x2sgu2] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    margin: 0;
}

.scenery-details-facts dt[b-9xr8x2sgu2] {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.scenery-details-facts dd[b-9xr8x2sgu2] {
    margin: 0;
}

.scenery-details-tag-list[b-9xr8x2sgu2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.scenery-details-tag[b-9xr8x2sgu2] {
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    font-size: 0.85rem;
}

.scenery-details-muted[b-9xr8x2sgu2] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

@media (max-width: 1200px) {
    .scenery-details-columns[b-9xr8x2sgu2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .scenery-details-columns[b-9xr8x2sgu2] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.scenery-details-image-clickable[b-9xr8x2sgu2] {
    cursor: pointer;
}

.scenery-details-enlarged-image[b-9xr8x2sgu2] {
    width: 100%;
    height: 70vh;
    object-fit: contain;
}

[b-9xr8x2sgu2] .scenery-details-carousel .e-carousel-navigators .e-previous,
[b-9xr8x2sgu2] .scenery-details-carousel .e-carousel-navigators .e-next {
    display: flex;
    align-items: center;
    justify-content: center;
}

    [b-9xr8x2sgu2] .scenery-details-carousel .e-carousel-navigators .e-previous .e-btn,
    [b-9xr8x2sgu2] .scenery-details-carousel .e-carousel-navigators .e-next .e-btn {
        width: 2.5rem;
        height: 2.5rem;
        background-color: rgb(128, 128, 128) !important;
        border-radius: 50%;
        opacity: 1;
    }

        [b-9xr8x2sgu2] .scenery-details-carousel .e-carousel-navigators .e-previous .e-btn:hover,
        [b-9xr8x2sgu2] .scenery-details-carousel .e-carousel-navigators .e-next .e-btn:hover {
            background-color: rgba(0, 0, 0, 0.25) !important;
        }

        [b-9xr8x2sgu2] .scenery-details-carousel .e-carousel-navigators .e-previous .e-btn .e-btn-icon,
        [b-9xr8x2sgu2] .scenery-details-carousel .e-carousel-navigators .e-next .e-btn .e-btn-icon {
            color: rgba(0, 0, 0, 1) !important;
        }

[b-9xr8x2sgu2] .scenery-details-enlarged-carousel {
    display: flex;
    flex-direction: column;
    z-index: 1010;
}

    [b-9xr8x2sgu2].scenery-details-enlarged-carousel .e-carousel-items {
        order: 1;
    }

    [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-indicators {
        order: 2;
        position: relative;
        bottom: auto;
        display: flex;
        justify-content: center;
        padding: 0.5rem 0;
        gap: 0.5rem !important;
    }

        [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-indicators .e-indicator-bars {
            display: flex;
        }

            [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .scenery-details-thumb-indicator {
                width: 2rem;
                height: 2rem;
                margin: 0;
                padding: 2px;
                border: 2px solid transparent;
                border-radius: 0.25rem;
                background-color: var(--bs-secondary-bg, #e9ecef);
                cursor: pointer;
                overflow: hidden;
            }

                [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .scenery-details-thumb-indicator img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

            [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .scenery-details-thumb-indicator {
                border-color: var(--bs-primary, #3c78ef);
            }

    [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-navigators .e-previous,
    [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-navigators .e-next {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-navigators .e-previous .e-btn,
        [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-navigators .e-next .e-btn {
            width: 2.5rem;
            height: 2.5rem;
            background-color: rgb(128, 128, 128) !important;
            border-radius: 50%;
            opacity: 1;
        }

            [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-navigators .e-previous .e-btn:hover,
            [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-navigators .e-next .e-btn:hover {
                background-color: rgba(0, 0, 0, 0.25) !important;
            }

            [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-navigators .e-previous .e-btn .e-btn-icon,
            [b-9xr8x2sgu2] .scenery-details-enlarged-carousel .e-carousel-navigators .e-next .e-btn .e-btn-icon {
                color: rgba(0, 0, 0, 1) !important;
            }

[b-9xr8x2sgu2] .e-dlg-overlay {
    background-color: rgba(60, 60, 60, 0.55) !important;
    opacity: 1 !important;
}
/* /Features/Scenery/Favorites/SceneryFavoriteStar.razor.rz.scp.css */
/* The star is a button so the click stays in the Blazor event pipeline and can be kept
   from reaching the surrounding anchor. These rules reset the button defaults and carry
   when the scenery is not a favorite
   fill when it is. */

.mini-favorite-star[b-47dfhilktp] {
    background: none;
    border: none;
    padding: 0;
    line-height: 0;
    cursor: pointer;
}

    .mini-favorite-star:focus-visible[b-47dfhilktp] {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: 2px;
    }

    .mini-favorite-star svg[b-47dfhilktp] {
        width: 1.25rem;
        height: 1.25rem;
        stroke-width: 1.5;
    }

.mini-favorite-star-off svg[b-47dfhilktp] {
    fill: #fff;
    stroke: var(--bs-secondary-color, #6c757d);
}

.mini-favorite-star-on svg[b-47dfhilktp] {
    fill: #ffc107;
    stroke: #b8860b;
}
/* /Features/UserPreferences/Preferences.razor.rz.scp.css */
.preferences-tab-content[b-8xmil96o6u] {
    padding-top: 0.5rem;
    padding-left: 0.5rem;
}