/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-00uvaa0sfd] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-00uvaa0sfd] {
    flex: 1;

    /* A flex item defaults to min-width:auto, so it refuses to shrink below its widest
       content and a wide table (the activity log grid) makes the whole page scroll
       sideways instead. Zero lets the page stay put and the grid scroll inside itself. */
    min-width: 0;
}

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

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

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

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

    /* The row's links, in one group at its left - the site's pages or a home page's own, an
       event's login, and Help last (2026-09-27) - while the profile icon stays at the right. The
       row is a flex row justified to the end, so the way to keep the group at the left is an
       auto margin on its right: it takes all the free space and pushes the rest away. */
    .top-row .cm-header-links[b-00uvaa0sfd] {
        order: -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 1.25rem;
        margin-right: auto;
    }

    /* The site's own pages, About Us and Why Use Us. No ::deep - this nav is in the layout's own
       markup, and the link rules above only reach into child components. */
    .top-row .cm-sitepages[b-00uvaa0sfd],
    .top-row .cm-homesite-pages[b-00uvaa0sfd] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 1.25rem;
    }

    .top-row .cm-sitepages a[b-00uvaa0sfd],
    .top-row .cm-homesite-pages a[b-00uvaa0sfd],
    .top-row .cm-header-login[b-00uvaa0sfd] {
        /* The group's gap spaces them; the row's own 1.5rem left margin on every link is not wanted
           here, where it made the gaps uneven. */
        margin-left: 0;
        white-space: nowrap;
        text-decoration: none;

        /* Bold italic, two pixels smaller than the row's own size. calc on 1em rather than a
           fixed point size, so it stays two smaller than whatever the theme sets rather than
           being pinned to what the theme happens to set today. */
        font-weight: 700;
        font-style: italic;
        font-size: calc(1em - 2px);
    }

    .top-row .cm-sitepages a:hover[b-00uvaa0sfd],
    .top-row .cm-sitepages a:focus-visible[b-00uvaa0sfd],
    .top-row .cm-homesite-pages a:hover[b-00uvaa0sfd],
    .top-row .cm-homesite-pages a:focus-visible[b-00uvaa0sfd],
    .top-row .cm-header-login:hover[b-00uvaa0sfd],
    .top-row .cm-header-login:focus-visible[b-00uvaa0sfd] {
        text-decoration: underline;
    }

    /* A home page's own pages (2026-09-27): the one being shown is underlined. */
    .top-row .cm-homesite-pages a.cm-homesite-current[b-00uvaa0sfd] {
        text-decoration: underline;
        text-underline-offset: 0.25em;
    }

    /* The row is a fixed height for its usual one line; a home page with more pages than fit
       grows it instead of letting the second line spill over the content. */
    .top-row:has(.cm-homesite-pages)[b-00uvaa0sfd] {
        height: auto;
        min-height: 3.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* A home page in its own frame has no nav bar, so its logo heads this row (2026-09-27). */
    .top-row .cm-homesite-logo[b-00uvaa0sfd] {
        order: -2;
        display: inline-flex;
        align-items: center;
        margin-right: 1.25rem;
    }

    .top-row .cm-homesite-logo img[b-00uvaa0sfd] {
        width: auto;
        height: 2.5rem;
        max-width: 10rem;
        object-fit: contain;
    }

    /* ---- a home page's header in its own frame (2026-09-28, after nmra2026.org's) ------------
       Pinned to the top of the window at every width, tall with a large logo until the page is
       scrolled, then the usual size (cm-homesite-shrunk, from wwwroot/js/home-header.js). */
    .top-row.cm-homesite-header[b-00uvaa0sfd] {
        position: sticky;
        top: 0;
        z-index: 10;
        height: auto;
        min-height: 3.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        transition: padding 0.25s ease;
    }

    .top-row.cm-homesite-header .cm-homesite-logo img[b-00uvaa0sfd] {
        height: 6rem;
        max-width: 16rem;
        transition: height 0.25s ease, max-width 0.25s ease;
    }

    .top-row.cm-homesite-header.cm-homesite-shrunk[b-00uvaa0sfd] {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .top-row.cm-homesite-header.cm-homesite-shrunk .cm-homesite-logo img[b-00uvaa0sfd] {
        height: 2.5rem;
        max-width: 10rem;
    }

    /* The way in - Attendees Login or RSVP Login - as a button at the right of the links, the
       way nmra2026.org's Registration stands out. Help, when shown, still comes last. */
    .top-row.cm-homesite-header .cm-header-links[b-00uvaa0sfd] {
        flex: 1;
    }

    .top-row.cm-homesite-header .cm-header-login[b-00uvaa0sfd] {
        margin-left: auto;
        padding: 0.35rem 0.9rem;
        border-radius: 0.35rem;
        background: var(--cm-accent, #1b6ec2);
        color: #ffffff;
    }

    .top-row.cm-homesite-header .cm-header-login:hover[b-00uvaa0sfd],
    .top-row.cm-homesite-header .cm-header-login:focus-visible[b-00uvaa0sfd] {
        text-decoration: none;
        filter: brightness(0.9);
    }

    /* ---- the menu, one level deep (2026-09-28) ------------------------------------------------ */
    .top-row .cm-homesite-menu[b-00uvaa0sfd] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 1.25rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .top-row .cm-homesite-item[b-00uvaa0sfd] {
        position: relative;
        display: flex;
        align-items: center;
    }

    /* The arrow beside a page with pages under it: a button of its own, for a keyboard or a
       touch screen, since hover is for a mouse. */
    .top-row .cm-homesite-toggle[b-00uvaa0sfd] {
        display: inline-flex;
        align-items: center;
        margin-left: 0.15rem;
        padding: 0 0.2rem;
        border: 0;
        background: none;
        color: inherit;
        line-height: 1;
        cursor: pointer;
    }

    .top-row .cm-homesite-toggle[b-00uvaa0sfd]::before {
        content: "\25BE";
        font-size: 0.85em;
    }

    .top-row .cm-homesite-submenu[b-00uvaa0sfd] {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 20;
        min-width: 12rem;
        margin: 0;
        padding: 0.35rem 0;
        list-style: none;
        background: var(--cm-raised, #ffffff);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 0.35rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .top-row .cm-homesite-item:hover > .cm-homesite-submenu[b-00uvaa0sfd],
    .top-row .cm-homesite-item:focus-within:not(.cm-dismissed) > .cm-homesite-submenu[b-00uvaa0sfd],
    .top-row .cm-homesite-item.cm-open > .cm-homesite-submenu[b-00uvaa0sfd] {
        display: block;
    }

    .top-row .cm-homesite-submenu a[b-00uvaa0sfd] {
        display: block;
        padding: 0.35rem 1rem;
    }

    .top-row .cm-homesite-submenu a:hover[b-00uvaa0sfd],
    .top-row .cm-homesite-submenu a:focus-visible[b-00uvaa0sfd] {
        background: rgba(27, 110, 194, 0.1);
        text-decoration: none;
    }

    /* The page shown is one of those under this one. */
    .top-row .cm-homesite-pages a.cm-homesite-current-branch[b-00uvaa0sfd] {
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 0.25em;
    }

    /* The Menu button is for a narrow screen only - see below. */
    .top-row .cm-homesite-menu-button[b-00uvaa0sfd] {
        display: none;
    }

    /* The profile icon is a target, not a piece of text: a round hit area, no underline, and
       it takes its color from the theme's body text rather than the link color. */
    .top-row[b-00uvaa0sfd]  .cm-profile-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        color: var(--cm-text, #212529);
    }

    .top-row[b-00uvaa0sfd]  .cm-profile-link:hover,
    .top-row[b-00uvaa0sfd]  .cm-profile-link:focus-visible {
        text-decoration: none;
        background-color: var(--cm-raised, rgba(0, 0, 0, 0.06));
        color: var(--cm-accent, #1b6ec2);
    }

    .top-row[b-00uvaa0sfd]  .cm-profile-link svg {
        width: 1.4rem;
        height: 1.4rem;
        display: block;
    }

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

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

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

/* A home page's menu on a narrow screen (2026-09-28): folded behind a Menu button, opening as a
   list under the header, each page's own pages listed beneath it. The logo is smaller to start. */
@media (max-width: 767.98px) {
    .top-row .cm-homesite-menu-button[b-00uvaa0sfd] {
        display: inline-flex;
        align-items: center;
        padding: 0.3rem 0.75rem;
        border: 1px solid rgba(0, 0, 0, 0.25);
        border-radius: 0.35rem;
        background: none;
        color: inherit;
    }

    .top-row .cm-homesite-menu-button[b-00uvaa0sfd]::before {
        content: "\2630";
        margin-right: 0.4rem;
    }

    .top-row .cm-homesite-pages:not(.cm-open) .cm-homesite-menu[b-00uvaa0sfd] {
        display: none;
    }

    .top-row .cm-homesite-pages.cm-open .cm-homesite-menu[b-00uvaa0sfd] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 20;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: var(--cm-raised, #ffffff);
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .top-row .cm-homesite-item[b-00uvaa0sfd] {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-row .cm-homesite-toggle[b-00uvaa0sfd] {
        display: none;
    }

    .top-row .cm-homesite-submenu[b-00uvaa0sfd],
    .top-row .cm-homesite-item:hover > .cm-homesite-submenu[b-00uvaa0sfd] {
        display: block;
        position: static;
        min-width: 0;
        padding: 0.25rem 0 0 1rem;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .top-row .cm-homesite-submenu a[b-00uvaa0sfd] {
        padding: 0.2rem 0;
    }

    .top-row.cm-homesite-header .cm-homesite-logo img[b-00uvaa0sfd] {
        height: 4rem;
        max-width: 12rem;
    }
}

/* Nothing slides for a visitor who has asked for less motion: the header changes size at once. */
@media (prefers-reduced-motion: reduce) {
    .top-row.cm-homesite-header[b-00uvaa0sfd],
    .top-row.cm-homesite-header .cm-homesite-logo img[b-00uvaa0sfd] {
        transition: none;
    }
}

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

    .sidebar[b-00uvaa0sfd] {
        /* 15% narrower than the 250px it was, giving the content area that much more room. */
        width: 212.5px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

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

#blazor-error-ui[b-00uvaa0sfd] {
    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-00uvaa0sfd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---- Page footer ------------------------------------------------------- */

/* The shell is a column: the page fills what is left above the footer, and the footer spans
   the sidebar and the content beneath both. */
.cm-shell[b-00uvaa0sfd] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cm-shell > .page[b-00uvaa0sfd] {
    flex: 1;
}

.cm-footer[b-00uvaa0sfd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-top: 1px solid var(--cm-border, #d6d5d5);
    background-color: var(--cm-surface, #f7f7f7);
    color: var(--cm-text, #212529);
}

.cm-footer a[b-00uvaa0sfd] {
    color: var(--cm-link, #1b6ec2);
}

.cm-footer-sep[b-00uvaa0sfd] {
    opacity: 0.5;
}

.cm-copyright[b-00uvaa0sfd] {
    opacity: 0.85;
}

/* The footer is now two stacked lines - links and copyright, then the social icons - so the
   flex direction turns and each line centres its own contents. */
.cm-footer[b-00uvaa0sfd] {
    flex-direction: column;
    gap: 0.35rem;
}

.cm-footer-line[b-00uvaa0sfd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* The icons take the footer's own text color rather than the link color: six colored glyphs
   in a row would shout louder than the links above them. They brighten to the link color on
   hover, which is where they do read as links. */
.cm-footer-social[b-00uvaa0sfd] {
    gap: 0.75rem;
}

    .cm-footer-social a[b-00uvaa0sfd] {
        display: inline-flex;
        color: var(--cm-text, #212529);
        opacity: 0.75;
        line-height: 1;
    }

        .cm-footer-social a:hover[b-00uvaa0sfd],
        .cm-footer-social a:focus-visible[b-00uvaa0sfd] {
            color: var(--cm-link, #1b6ec2);
            opacity: 1;
        }

    .cm-footer-social svg[b-00uvaa0sfd] {
        width: 1.05rem;
        height: 1.05rem;
        fill: currentColor;
    }

/* dbo.SystemSettings.ApplicationVersion, the last line of the footer. 8pt as asked - a point
   size rather than rem, which is what "8 point" means and what the browser converts for itself
   (8pt is about 10.7px at the default 96dpi). */
.cm-footer-version[b-00uvaa0sfd] {
    font-size: 8pt;
    font-weight: 700;
    font-style: italic;
    opacity: 0.8;
}

/* While the cookie banner is over the foot of the page, the page ends this much higher up, so
   nothing it covers is unreachable. Matches the banner's own maximum height plus its padding -
   see Components/Shared/CookieConsentBanner.razor.css - and disappears the moment the banner
   is answered. */
.cm-shell-cookie[b-00uvaa0sfd] {
    padding-bottom: 20rem;
}

/* Narrower screens wrap the banner's text and stack its buttons, so it stands taller. Both
   figures clear the banner as it first appears, measured in a browser rather than guessed;
   opening Manage Consent Preferences makes it taller still, and closing it again is how the
   reader gets the page back. */
@media (max-width: 36rem) {
    .cm-shell-cookie[b-00uvaa0sfd] {
        padding-bottom: 32rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-vaqw04k8ud] {
    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-vaqw04k8ud] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

    /* No padding, so the title centres on the sidebar rather than 8px right of it. Bootstrap's
       ps-3 used to be on this element and was removed from the markup: the spacing utilities
       are declared !important, so no amount of specificity here could have overridden it. */
    padding-left: 0;
    padding-right: 0;
}

/* Bootstrap lays this out as a flex row with space-between; centre it instead. Qualified with
   .navbar so it beats Bootstrap's own .navbar > .container-fluid on specificity rather than on
   stylesheet order. */
.top-row.navbar > .container-fluid[b-vaqw04k8ud] {
    justify-content: center;
}

.navbar-brand[b-vaqw04k8ud] {
    font-size: 1.1rem;
    line-height: 1.15;
    white-space: normal;

    /* .navbar-brand ships with a right margin for the links that normally follow it; there are
       none here, and it would shift the centred text left by that much. */
    margin-right: 0;
    text-align: center;
}

/* The organization name, with the sub-organization underneath when there is one. */
/* The mark sits beside the name rather than above it: the bar is short, and a stacked lockup
   would push the organization's name off the top row on a phone. */
.cm-brand[b-vaqw04k8ud] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.cm-brand-logo[b-vaqw04k8ud] {
    flex: none;
    width: 2rem;
    height: 2rem;
}

.cm-brand-text[b-vaqw04k8ud] {
    min-width: 0;
}

.cm-brand-title[b-vaqw04k8ud] {
    display: block;
}

.cm-brand-subtitle[b-vaqw04k8ud] {
    display: block;
    font-size: 0.8rem;
    opacity: 0.85;
}

/* The organization chosen from the dropdown, named under the brand. Set apart from the
   subtitle above it - that one is part of the site's identity, this one is a choice the viewer
   made and can change. */
.cm-brand-organization[b-vaqw04k8ud] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.95;
}

.bi[b-vaqw04k8ud] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;    /* the icon keeps its size next to a label that wraps */
}

.bi-house-door-fill-nav-menu[b-vaqw04k8ud] {
    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-people-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");
}

.bi-building-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm-6 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm-6 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm-6 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1zm1 0v14h10V1H3z'/%3E%3C/svg%3E");
}

/* An event's gallery of uploaded photos (2026-10-12): Bootstrap Icons' image. */
.bi-image-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z'/%3E%3C/svg%3E");
}

.bi-journal-text-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3z'/%3E%3C/svg%3E");
}

.bi-gear-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-vaqw04k8ud] {
    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-vaqw04k8ud] {
    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-vaqw04k8ud] {
    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-vaqw04k8ud] {
    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-vaqw04k8ud] {
    font-size: 0.9rem;
    padding-bottom: 0.15rem;
}

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

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

    /* min-height rather than height, and a normal line-height: a label too long for the
       sidebar ("System settings", "Activity Log") wraps to two lines, and a fixed 3rem box
       with a 3rem line-height let the second line spill over the item below it. */
    .nav-item[b-vaqw04k8ud]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        /* Still a min-height rather than a height, for the same reason as before: a label too
           long for the sidebar wraps, and a fixed box would let the second line spill over the
           item below. 2.25rem keeps a comfortable target while closing up the column. */
        min-height: 2.25rem;
        display: flex;
        align-items: center;
        line-height: 1.25;
        padding-block: 0.3rem;
        width: 100%;

        /* 90% of whatever the links inherit, rather than a fixed px: expressed this way the
           ratio survives a change to the base size. The icons are sized in rem and so keep
           their own dimensions. */
        font-size: 0.9em;
        font-weight: 700;
    }

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

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

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

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

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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Contact Us and Contact Messages. Both are email icons and never appear together - the form
   is hidden from system administrators, the grid is offered only to them - but the open
   envelope reads as "messages received" against the plain one for "send us a message". */
.bi-envelope-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z'/%3E%3C/svg%3E");
}

.bi-envelope-open-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.817l5.75 3.45L8 8.917l1.25.75L15 6.217V5.4a1 1 0 0 0-.53-.882l-6-3.2ZM15 7.383l-4.778 2.867L15 13.117V7.383Zm-.035 6.88L8 10.082l-6.965 4.18A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738ZM1 13.116l4.778-2.867L1 7.383v5.734ZM7.059.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765l6-3.2Z'/%3E%3C/svg%3E");
}

.bi-exclamation-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E");
}

/* The organization dropdown sits where a nav link would, so it lines up with them. */
/* The dropdowns sit in the same column as the links, so they carry the same tightened gap. */
.cm-nav-select[b-vaqw04k8ud] {
    padding-block: 0.2rem;
}

/* Submitted by wwwroot/js/nav-organization.js on change, so the button is only there for a
   browser with no script. The .cm-js class is set by that file, which means the button is shown
   exactly when it is needed and never flickers in for the people who do not need it. */
.cm-nav-go[b-vaqw04k8ud] {
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.15rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
}

/* Not :global() - that is a CSS-modules idiom and Blazor's scoped-CSS rewriter drops the rule
   outright, silently. Written plainly, the rewriter appends the scope to the last compound
   selector, giving `html.cm-js .cm-nav-go[b-hash]`, which is what this needs. */
html.cm-js .cm-nav-go[b-vaqw04k8ud] {
    display: none;
}

.cm-nav-select select[b-vaqw04k8ud] {
    width: 100%;
    font-weight: 700;

    /* Smaller than the nav links and with the side padding trimmed: "Select an Organization" is
       the longest thing this control ever shows, and at the links' own size it was clipped in
       the narrowed sidebar. The right padding still has to clear the dropdown arrow. */
    font-size: 0.78em;
    padding-inline: 0.4rem 1.5rem;
}

/* The Add Blog Entry link's glyph. Hand-written like the rest of the nav icons - the app ships
   no icon font - and white, because the sidebar is dark in every theme. */
.bi-pencil-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/%3E%3C/svg%3E");
}

/* Mail Merge Fields: a nested list, for a catalogue of dropdowns and their entries. */
.bi-list-nested-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' 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");
}

/* A question mark in a circle, for the Help System. */
.bi-question-circle-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3C/svg%3E");
}


/* Online Chat (2026-09-26) is a button, not a link - it opens the chat window over the page - and
   has to line up with the links above and below it. */
.nav-item[b-vaqw04k8ud]  .cm-chat-link {
    text-align: left;
    cursor: pointer;
}

.bi-chat-nav-menu[b-vaqw04k8ud] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3Cpath d='m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9 9 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.4 10.4 0 0 1-.524 2.318l-.003.011a11 11 0 0 1-.244.637c-.079.186.074.394.273.362a22 22 0 0 0 .693-.125m.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6-3.004 6-7 6a8 8 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a11 11 0 0 0 .398-2'/%3E%3C/svg%3E");
}

/* How many chats are waiting on a reply, beside Online Chats. */
.cm-nav-count[b-vaqw04k8ud] {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 0.65rem;
    background: #dc3545;
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.25rem;
    text-align: center;
}

/* A home page's own logo in the corner (2026-09-27), in place of the mark: as tall as the
   bar allows and its own shape, however wide or square it was drawn. */
.cm-brand-logo-image[b-vaqw04k8ud] {
    width: auto;
    height: 2.5rem;
    max-width: 9rem;
    object-fit: contain;
    border-radius: 0.25rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-otq2j3d38p],
.components-reconnect-repeated-attempt-visible[b-otq2j3d38p],
.components-reconnect-failed-visible[b-otq2j3d38p],
.components-pause-visible[b-otq2j3d38p],
.components-resume-failed-visible[b-otq2j3d38p],
.components-rejoining-animation[b-otq2j3d38p] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AccessibilityStatement.razor.rz.scp.css */
/* The legal pages: a single measured column, since long paragraphs are unreadable at the full
   width of a wide screen. Shared verbatim with PrivacyPolicy.razor.css and TermsOfUse.razor.css. */

.cm-legal[b-ig8ogp4a44] {
    max-width: 52rem;
}

/* The page title is an h1, like every other page's, and nothing is set on it here: it should
   look like the title of any other page. */

/* The sections within it - h2 now that the title is h1. Smaller than the title and spaced away
   from the text above. */
.cm-legal h2[b-ig8ogp4a44] {
    margin-top: 1.5rem;
    font-size: 1.1rem;
}

.cm-legal p[b-ig8ogp4a44],
.cm-legal li[b-ig8ogp4a44] {
    line-height: 1.5;
}

.cm-legal ul[b-ig8ogp4a44] {
    margin-bottom: 1rem;
}

.cm-effective[b-ig8ogp4a44] {
    opacity: 0.75;
    font-style: italic;
}

.cm-legal-address[b-ig8ogp4a44] {
    margin-top: 0.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.25rem;
    background-color: var(--cm-surface, #ffffff);
    font-style: normal;
}
/* /Components/Pages/ActivityLog.razor.rz.scp.css */
/* The activity log grid: a wide, dense table that has to stay readable on a laptop, so the
   type is small and the table gets its own horizontal scroller rather than forcing the page
   to scroll sideways. */

.cm-log[b-suev4lrrzs] {
    font-size: 0.8em;
}

.cm-section[b-suev4lrrzs] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-suev4lrrzs] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

/* Auto-fit rather than a fixed column count: the seven filters sit on one row on a wide
   screen and reflow to two or three on a narrow one without a breakpoint for each case. */
.cm-filter-fields[b-suev4lrrzs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.cm-field > label[b-suev4lrrzs] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

.cm-log .form-control[b-suev4lrrzs] {
    font-size: 1em;
    padding: 0.25rem 0.5rem;
    height: auto;
    min-height: 0;
    line-height: 1.35;
}

.cm-filter-actions[b-suev4lrrzs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.6rem;
}

.cm-log .btn[b-suev4lrrzs] {
    font-size: 1em;
}

.cm-count[b-suev4lrrzs] {
    opacity: 0.75;
}

.cm-empty[b-suev4lrrzs] {
    opacity: 0.75;
}

.cm-grid-scroll[b-suev4lrrzs] {
    overflow-x: auto;
}

.cm-grid[b-suev4lrrzs] {
    font-size: 1em;
    margin-bottom: 0.75rem;
}

.cm-grid th[b-suev4lrrzs] {
    white-space: nowrap;
}

.cm-grid td[b-suev4lrrzs] {
    vertical-align: top;
}

/* The timestamp reads wrong when it wraps mid-value. */
.cm-when[b-suev4lrrzs] {
    white-space: nowrap;
}

/* Everything else is nailed to a column width; the message takes what is left. */
.cm-message[b-suev4lrrzs] {
    min-width: 18rem;
}

.cm-message pre[b-suev4lrrzs] {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0.25rem 0 0;
    font-size: 0.95em;
}

.cm-message summary[b-suev4lrrzs] {
    cursor: pointer;
    opacity: 0.75;
}

.cm-ok[b-suev4lrrzs] {
    color: var(--cm-ok, #26b050);
}

.cm-bad[b-suev4lrrzs] {
    color: var(--cm-bad, #e50000);
}

.cm-paging[b-suev4lrrzs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* The headings are the sort controls, so they should not read as links in the body text. */
.cm-grid thead a[b-suev4lrrzs] {
    color: inherit;
    text-decoration: none;
}

.cm-grid thead a:hover[b-suev4lrrzs] {
    text-decoration: underline;
}

.cm-sorted[b-suev4lrrzs] {
    font-weight: 700;
}

.cm-arrow[b-suev4lrrzs] {
    opacity: 0.7;
}
/* /Components/Pages/AddTestOrganization.razor.rz.scp.css */
/* The Add Test Organization form: each section boxed with its title sitting on the top-left of
   the border, the way System Settings and the organization profile draw theirs. Scoped CSS reaches
   only this page, so the box rules are repeated here rather than borrowed. */

.cm-lead[b-yk9mcha402] {
    opacity: 0.85;
}

.cm-section[b-yk9mcha402] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-yk9mcha402] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

.cm-field[b-yk9mcha402] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-yk9mcha402] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

/* ::deep because the inputs are rendered by InputText, a child component with its own scope
   identifier rather than this page's. */
.cm-field[b-yk9mcha402]  .cm-short {
    max-width: 12rem;
}

.cm-profilebar[b-yk9mcha402] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
/* /Components/Pages/AttendeeImport.razor.rz.scp.css */
/* The spreadsheet import. The boxed-form look is not shared between pages - each page carries its
   own copy of .cm-section, .cm-field and .cm-profilebar - so without this file the page renders as
   bare Bootstrap: no box, and a legend the full width of the page. */

.cm-attendeeimport .cm-section[b-n1khrzptd4] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 1.25rem;
}

.cm-attendeeimport legend[b-n1khrzptd4] {
    float: none;
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.cm-attendeeimport .cm-field[b-n1khrzptd4] {
    margin-bottom: 0.75rem;
}

.cm-attendeeimport .cm-field label[b-n1khrzptd4] {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

.cm-attendeeimport .cm-profilebar[b-n1khrzptd4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.cm-attendeeimport .cm-templatelink[b-n1khrzptd4] {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.95em;
}

/* The drop box is every upload's now (2026-10-02) - in wwwroot/app.css. */

/* ---- what happened ------------------------------------------------------------------------ */

.cm-attendeeimport ul.text-danger[b-n1khrzptd4] {
    margin-bottom: 0;
}
/* /Components/Pages/AttendeeProfile.razor.rz.scp.css */
/* The attendee profile. Attendee Information is one tall group in the left column; Contact
   Information, Properties and Mentorship stack down the right, so the two columns finish at
   roughly the same depth instead of leaving one of them empty. */

.cm-attendeeprofile .cm-section[b-46h55xxirs] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 1.25rem;
}

.cm-attendeeprofile legend[b-46h55xxirs] {
    float: none;
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.cm-attendeeprofile .cm-field[b-46h55xxirs] {
    margin-bottom: 0.75rem;
}

.cm-attendeeprofile .cm-field label[b-46h55xxirs] {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

/* A disabled fieldset greys its contents, which is right for a control that cannot be used but
   wrong for a whole form being read. Keep the text legible and let the cursor say it is not
   editable. */
.cm-attendeeprofile fieldset[disabled] .form-control[b-46h55xxirs],
.cm-attendeeprofile fieldset[disabled] .form-select[b-46h55xxirs] {
    opacity: 1;
    background-color: var(--cm-surface-muted, rgba(0, 0, 0, 0.04));
    cursor: not-allowed;
}

.cm-readonly-note[b-46h55xxirs] {
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--cm-accent, #1b6ec2);
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 8%, transparent);
    margin-bottom: 1rem;
}

/* A flag and the date it stamps, on one row: checkbox, then the date's label, then the box.
   Everything is on one line, so the whole row centres vertically rather than aligning to the
   bottom of a label stacked above an input. */
.cm-pair[b-46h55xxirs] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* A minimum width on each of the two label columns, so the pairs line up with each other:
   without it "Delete Date" being wider than "Lock Date" pushes its box out of step with the
   one above, and the two rows read as ragged rather than as a pair. */
.cm-pair-check[b-46h55xxirs] {
    flex: 0 0 auto;
    min-width: 7rem;
}

.cm-pair-check .form-check[b-46h55xxirs] {
    margin-bottom: 0;
}

/* The label sits to the left of the box rather than above it, so it must not be a block and
   must not wrap - a two-word label breaking in half would drag the box down with it. */
.cm-pair-date[b-46h55xxirs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
}

.cm-pair-date label[b-46h55xxirs] {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 700;
    white-space: nowrap;
    min-width: 6rem;
}

/* Wide enough for MM/DD/YYYY and no wider - the box is never typed into, so there is nothing
   to leave room for. */
.cm-pair-date .form-control[b-46h55xxirs] {
    width: 7.5rem;
    flex: 0 0 auto;
}

/* Narrow enough that the three parts no longer fit across, the checkbox takes its own line and
   the label and box stay together on the next one. */
@media (max-width: 991.98px) {
    .cm-pair[b-46h55xxirs] {
        display: block;
    }

    .cm-pair-check[b-46h55xxirs] {
        margin-bottom: 0.5rem;
    }
}

/* The formatted address is built by the application, never typed, so it reads as text rather
   than as an empty box waiting for input - and it does not resize: four lines holds an address.
   This scoped rule out-specifies the global one in app.css, so it has to say so itself. */
.cm-attendeeprofile .cm-address[b-46h55xxirs] {
    resize: none;
    white-space: pre-wrap;
}

.cm-attendeeprofile .cm-date[b-46h55xxirs] {
    max-width: 12rem;
}

.cm-profilebar[b-46h55xxirs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* ---- boxes that fold (2026-09-24: Address and Dates) ---------------------------------------
   The legend is a button, dressed as the legend it stands in for: the box's title in bold, with
   an arrow saying which way it is - pointing right while folded, down while open. */

.cm-attendeeprofile .cm-fold-toggle[b-46h55xxirs] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.cm-attendeeprofile .cm-fold-toggle[b-46h55xxirs]::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease-in-out;
}

.cm-attendeeprofile .cm-fold-toggle[aria-expanded="true"][b-46h55xxirs]::before {
    transform: rotate(45deg);
}

.cm-attendeeprofile .cm-fold-toggle:focus-visible[b-46h55xxirs] {
    outline: 2px solid var(--cm-focus, #1b6ec2);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

/* Folded, the box is just its title on the border - not a tall empty frame. */
.cm-attendeeprofile .cm-fold:has(> .cm-fold-body[hidden])[b-46h55xxirs] {
    padding-bottom: 0.25rem;
}

.cm-attendeeprofile .cm-fold:has(> .cm-fold-body[hidden]) legend[b-46h55xxirs] {
    margin-bottom: 0;
}

/* ---- the RSVPs / Registration Items grid (2026-09-24) --------------------------------------
   Grid styles are scoped per page in this app, like the boxes, so this page carries its own
   copy of the few the grid uses - the same as Attendees.razor.css. */

.cm-attendeeprofile .cm-grid-scroll[b-46h55xxirs] {
    overflow-x: auto;
}

.cm-attendeeprofile .cm-grid[b-46h55xxirs] {
    font-size: 1em;
    margin-bottom: 0;
}

.cm-attendeeprofile .cm-grid th[b-46h55xxirs] {
    white-space: nowrap;
}

.cm-attendeeprofile .cm-grid td[b-46h55xxirs] {
    vertical-align: top;
    white-space: nowrap;
}

.cm-attendeeprofile .cm-grid td.cm-wrap[b-46h55xxirs] {
    white-space: normal;
}

.cm-attendeeprofile .cm-num[b-46h55xxirs] {
    text-align: right;
}

.cm-attendeeprofile .cm-empty[b-46h55xxirs] {
    opacity: 0.75;
    font-style: italic;
}

.cm-attendeeprofile .cm-flag-cell[b-46h55xxirs] {
    text-align: center;
    width: 1%;
}

/* The staff Registration page's two columns (2026-10-07: "I want the registration grid to be 60% of the width on
   the right. On the left 40% I need the EventItems"): Event Items and the Registration grid, one above the other
   on a narrow screen, and the grid alone, full width, for somebody who may only look. */
.cm-reg-columns[b-46h55xxirs] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: start;
}

.cm-reg-columns.cm-reg-columns-one[b-46h55xxirs] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 991.98px) {
    .cm-reg-columns[b-46h55xxirs] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A long list scrolls inside its box, so the Registration grid stays in view while an item is dragged to it. */
.cm-reg-options-scroll[b-46h55xxirs] {
    max-height: 70vh;
    overflow-y: auto;
}

/* A panel per item setting, as the calendar's palette has them (2026-10-07): open, its color as a dot. */
.cm-reg-group[b-46h55xxirs] {
    border: 1px solid var(--cm-border, #dee2e6);
    border-left: 4px solid var(--cm-reg-color, var(--cm-accent, #1b6ec2));
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    background: var(--cm-surface, #ffffff);
}

.cm-reg-group > summary[b-46h55xxirs] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.cm-reg-group > summary[b-46h55xxirs]::before {
    content: "\25B8";
    display: inline-block;
    width: 0.8em;
    transition: transform 0.15s ease;
}

.cm-reg-group[open] > summary[b-46h55xxirs]::before {
    transform: rotate(90deg);
}

.cm-reg-group > summary[b-46h55xxirs]::-webkit-details-marker {
    display: none;
}

.cm-reg-swatch[b-46h55xxirs] {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--cm-reg-color, var(--cm-accent, #1b6ec2));
}

.cm-reg-groupcount[b-46h55xxirs] {
    font-weight: 400;
    color: var(--cm-muted, #6c757d);
}

.cm-reg-group .cm-reg-options[b-46h55xxirs] {
    margin-bottom: 0;
}

/* An item is picked up by its row. */
.cm-reg-options tr[draggable="true"][b-46h55xxirs] {
    cursor: grab;
}

/* While an item is over the grid, so it is plain where it is about to land. */
.cm-reg-dropping[b-46h55xxirs] {
    outline: 3px dashed var(--cm-accent, #6f42c1);
    outline-offset: 2px;
}

.cm-reg-qty[b-46h55xxirs] {
    width: 5.5rem;
    margin-left: auto;
    text-align: right;
}

.cm-reg-grandtotal th[b-46h55xxirs],
.cm-reg-grandtotal td[b-46h55xxirs] {
    font-weight: 700;
}
/* /Components/Pages/Attendees.razor.rz.scp.css */
/* The attendee grid. Five columns, so unlike the user grid it fits without shrinking the type
   and the widths can be fixed proportions rather than left to the content. */

.cm-attendees[b-16hrp8nf7x] {
    font-size: 0.9em;
}

.cm-attendeebar[b-16hrp8nf7x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.cm-attendees .btn[b-16hrp8nf7x] {
    font-size: 1em;
}

.cm-count[b-16hrp8nf7x] {
    opacity: 0.75;
}

.cm-hint[b-16hrp8nf7x] {
    opacity: 0.6;
    font-style: italic;
}

.cm-grid-scroll[b-16hrp8nf7x] {
    overflow-x: auto;
}

.cm-grid[b-16hrp8nf7x] {
    font-size: 1em;
    margin-bottom: 0.75rem;
}

/* table-layout: fixed is what makes the colgroup widths binding; without it the browser is
   free to ignore them and size the columns by their content instead. */
.cm-attendeegrid[b-16hrp8nf7x] {
    table-layout: fixed;
    width: 100%;
    min-width: 40rem;
}

/* Seven columns now. The two flags take their width from Full Name, which had the most to
   spare - the other four were already as narrow as their content allows. */
.cm-w-id[b-16hrp8nf7x] { width: 10%; }
.cm-w-name[b-16hrp8nf7x] { width: 24%; }
.cm-w-phone[b-16hrp8nf7x] { width: 15%; }
.cm-w-email[b-16hrp8nf7x] { width: 25%; }
.cm-w-flag[b-16hrp8nf7x] { width: 8%; }
.cm-w-delete[b-16hrp8nf7x] { width: 10%; }

.cm-grid th[b-16hrp8nf7x] {
    white-space: nowrap;
}

.cm-grid td[b-16hrp8nf7x] {
    vertical-align: top;
    white-space: nowrap;
}

/* The two columns that hold free text wrap instead, so a long address or name is readable
   rather than clipped at a fixed width. */
.cm-attendeegrid td.cm-wrap[b-16hrp8nf7x] {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The heading is the sort control, so it should not read as body text. */
.cm-grid thead a[b-16hrp8nf7x] {
    color: inherit;
    text-decoration: none;
}

.cm-grid thead a:hover[b-16hrp8nf7x] {
    text-decoration: underline;
}

.cm-sorted[b-16hrp8nf7x] {
    font-weight: 700;
}

.cm-arrow[b-16hrp8nf7x] {
    opacity: 0.7;
}

/* The filter row sits under the headings; its inputs should not inflate the row height. */
.cm-filters th[b-16hrp8nf7x] {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
}

.cm-attendees .form-control[b-16hrp8nf7x] {
    font-size: 1em;
    padding: 0.15rem 0.35rem;
    height: auto;
    min-height: 0;
    line-height: 1.3;
    min-width: 0;
}

.cm-num[b-16hrp8nf7x] {
    text-align: right;
}

.cm-empty[b-16hrp8nf7x] {
    opacity: 0.75;
    font-style: italic;
}

/* Delete sits at the right-hand end and is centred in its column, so the row of bins reads as
   one column of controls rather than as ragged text. The two flags are centred for the same
   reason. */
.cm-delete-head[b-16hrp8nf7x],
.cm-delete-cell[b-16hrp8nf7x],
.cm-flag-cell[b-16hrp8nf7x] {
    text-align: center;
}

/* A disabled checkbox is greyed almost to invisibility by default, which is wrong for one being
   used to report a value rather than to refuse input. Keep it legible and let the cursor say it
   is not something to click. */
.cm-attendees .cm-flag[b-16hrp8nf7x] {
    opacity: 1;
    cursor: default;
    float: none;
    margin: 0;
}

.cm-attendees .cm-flag:disabled[b-16hrp8nf7x] {
    filter: none;
}

/* The minimum table width has to grow with the two extra columns, or the flags squeeze the
   name and email columns instead of turning the scroller on. */
.cm-attendeegrid[b-16hrp8nf7x] {
    min-width: 52rem;
}

.cm-trash[b-16hrp8nf7x] {
    line-height: 1;
    padding: 0.2rem 0.55rem;
}

/* The nav's .bi icons are white SVGs painted as background images, which is right on the dark
   sidebar and invisible on a white table row - and there is no bin among them. This is the
   Bootstrap Icons bin drawn as a mask instead of a background, so the shape takes the button's
   own color: red while the button is at rest, white once the hover inverts it. */
.cm-trash-icon[b-16hrp8nf7x] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--cm-trash-mask);
    mask-image: var(--cm-trash-mask);
}

/* The way back, for a row already marked deleted. */
.cm-restore-icon[b-16hrp8nf7x] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--cm-restore-mask);
    mask-image: var(--cm-restore-mask);
}

.cm-restore-icon[b-16hrp8nf7x] {
    --cm-restore-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
}

/* A deleted row is still listed - it just should not read as a live one. */
.cm-attendeegrid tbody tr.cm-deleted > td[b-16hrp8nf7x] {
    opacity: 0.55;
    font-style: italic;
}

.cm-trash-icon[b-16hrp8nf7x] {
    --cm-trash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'/%3E%3C/svg%3E");
}

/* The form every delete button posts to. It carries nothing but the antiforgery token, so it
   has no height of its own and should take up no space. */
.cm-hiddenform[b-16hrp8nf7x] {
    margin: 0;
}

/* The whole row is double-clickable, so say so with the cursor and light the row under the
   pointer. The accent tint is mixed into the theme's own surface color, so it reads the same
   way on the light themes and the dark ones instead of being a fixed grey.
   Both rules have to beat Bootstrap's .table-striped, which paints every other row through
   --bs-table-striped-bg at (0,2,0); these are (0,3,0) and (0,3,1). */
.cm-grid tbody tr[data-row-href][b-16hrp8nf7x] {
    cursor: pointer;
}

.cm-attendees .cm-grid tbody tr[data-row-href]:hover > td[b-16hrp8nf7x] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 14%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
}

.cm-paging[b-16hrp8nf7x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* At phone width the fixed proportions stop helping: the table keeps its minimum width and the
   scroller takes over, which is the same answer the user grid gives. */
@media (max-width: 575.98px) {
    .cm-attendees[b-16hrp8nf7x] {
        font-size: 0.8em;
    }
}
/* /Components/Pages/BlogEntries.razor.rz.scp.css */
/* The blog entries grid. Small type and its own horizontal scroller, like the other grids. */

.cm-blogs[b-6n7qlkskqg] {
    font-size: 0.85em;
}

.cm-blogbar[b-6n7qlkskqg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cm-count[b-6n7qlkskqg],
.cm-hint[b-6n7qlkskqg] {
    opacity: 0.75;
}

.cm-hint[b-6n7qlkskqg] {
    font-style: italic;
}

.cm-grid-scroll[b-6n7qlkskqg] {
    overflow-x: auto;
}

.cm-grid[b-6n7qlkskqg] {
    table-layout: fixed;
}

.cm-grid th[b-6n7qlkskqg] {
    white-space: nowrap;
}

.cm-grid td[b-6n7qlkskqg] {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.cm-num[b-6n7qlkskqg] {
    text-align: right;
}

.cm-when[b-6n7qlkskqg] {
    white-space: nowrap;
}

.cm-empty[b-6n7qlkskqg] {
    opacity: 0.75;
    font-style: italic;
}

/* A row opens its entry on a double click, the same gesture the other grids use. */
.cm-grid tbody tr[data-row-href][b-6n7qlkskqg] {
    cursor: pointer;
}
/* /Components/Pages/BlogEntry.razor.rz.scp.css */
/* The blog editor. Quill gives its container no height of its own, and an entry is longer than
   a comment or a contact message, so this one is taller than the 12rem those use. */
.cm-blogedit[b-frye8ff7pd]  .cm-quill,
.cm-blogedit .cm-quill[b-frye8ff7pd] {
    min-height: 22rem;
    background-color: var(--cm-surface, #ffffff);
    color: var(--cm-text, #212529);
}

/* Quill draws its own chrome, which defaults to light. Point it at the theme's colors so the
   editor does not sit as a white slab on the dark themes. */
.cm-blogedit[b-frye8ff7pd]  .ql-toolbar,
.cm-blogedit[b-frye8ff7pd]  .ql-container {
    border-color: var(--cm-border, #d6d5d5);
}

.cm-blogedit[b-frye8ff7pd]  .cm-quill-value {
    display: none;
}

.cm-field[b-frye8ff7pd] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-frye8ff7pd] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

/* The published flag is a checkbox with its label beside it, not above it. */
.cm-check > label[b-frye8ff7pd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 1;
}

.cm-section[b-frye8ff7pd] {
    max-width: 60rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
}

    .cm-section > legend[b-frye8ff7pd] {
        width: auto;
        padding: 0 0.4rem;
        font-size: 1rem;
        font-weight: 600;
    }

.cm-blogbar[b-frye8ff7pd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Kept clear of the save row above it: deleting an entry should not be a neighbour of saving. */
.cm-blogdelete[b-frye8ff7pd] {
    margin-top: 1.5rem;
}
/* /Components/Pages/BlogView.razor.rz.scp.css */
/* A blog entry in the content panel. The body is whatever Quill wrote, so the rules here are
   about giving that HTML sane spacing rather than styling particular elements. */

.cm-blog[b-crwd9j0ixj] {
    max-width: 52rem;
}

.cm-blog-meta[b-crwd9j0ixj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.85em;
    opacity: 0.75;
}

.cm-blog-sep[b-crwd9j0ixj] {
    opacity: 0.5;
}

/* A draft is only ever visible to its author or an administrator, so this says why it looks
   different from what a visitor would see. */
.cm-blog-draft[b-crwd9j0ixj] {
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--cm-bad, #e50000);
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.9;
}

.cm-blog-body[b-crwd9j0ixj] {
    line-height: 1.55;
}

    .cm-blog-body :first-child[b-crwd9j0ixj] {
        margin-top: 0;
    }

    .cm-blog-body img[b-crwd9j0ixj] {
        max-width: 100%;
        height: auto;
    }

    .cm-blog-body blockquote[b-crwd9j0ixj] {
        margin-left: 0;
        padding-left: 0.9rem;
        border-left: 3px solid var(--cm-border, #d6d5d5);
        opacity: 0.9;
    }

.cm-blog-actions[b-crwd9j0ixj] {
    margin-top: 1.5rem;
}

/* The bare /Blog address, which lists the entries instead of showing one. */
.cm-blog-list[b-crwd9j0ixj] {
    list-style: none;
    padding-left: 0;
}

    .cm-blog-list li[b-crwd9j0ixj] {
        padding: 0.25rem 0;
    }

    .cm-blog-list .cm-blog-meta[b-crwd9j0ixj] {
        display: inline;
        margin-left: 0.5rem;
    }

.cm-empty[b-crwd9j0ixj] {
    opacity: 0.75;
}

/* Previous on the left, Next on the right, at the foot of an entry. The one that has nowhere to
   go keeps its place, greyed out, so the pair does not jump about. */
/* Three columns, so Back to Blog Entry sits in the true middle however long the two either side
   are - Previous against the left edge, Next against the right. */
.cm-blog-pager[b-crwd9j0ixj] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cm-border, #d6d5d5);
}

.cm-blog-prev[b-crwd9j0ixj],
.cm-blog-next[b-crwd9j0ixj],
.cm-blog-back[b-crwd9j0ixj] {
    font-weight: 600;
    text-decoration: none;
}

.cm-blog-prev[b-crwd9j0ixj] {
    grid-column: 1;
    justify-self: start;
}

.cm-blog-back[b-crwd9j0ixj] {
    grid-column: 2;
    justify-self: center;
}

.cm-blog-next[b-crwd9j0ixj] {
    grid-column: 3;
    justify-self: end;
    text-align: right;
}

.cm-blog-prev:hover[b-crwd9j0ixj],
.cm-blog-next:hover[b-crwd9j0ixj],
.cm-blog-back:hover[b-crwd9j0ixj] {
    text-decoration: underline;
}

.cm-blog-off[b-crwd9j0ixj] {
    opacity: 0.4;
    cursor: default;
}
/* /Components/Pages/ContactMessages.razor.rz.scp.css */
/* The Contact Messages grid, and the panel a row opens below it. */

.cm-messages[b-1y792nvn7n] {
    font-size: 0.8em;
}

.cm-grid-scroll[b-1y792nvn7n] {
    overflow-x: auto;
}

.cm-grid[b-1y792nvn7n] {
    font-size: 1em;
    margin-bottom: 0.5rem;
}

.cm-grid th[b-1y792nvn7n] {
    white-space: nowrap;
}

.cm-grid td[b-1y792nvn7n] {
    vertical-align: top;
    white-space: nowrap;
}

.cm-when[b-1y792nvn7n] {
    white-space: nowrap;
}

/* The message preview: the full text is the browser's own tooltip. */
.cm-description[b-1y792nvn7n] {
    cursor: help;
    white-space: nowrap;
}

.cm-empty[b-1y792nvn7n] {
    opacity: 0.75;
    font-style: italic;
}

.cm-count[b-1y792nvn7n] {
    opacity: 0.75;
}

.cm-paging[b-1y792nvn7n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* A single click opens the row, so say so with the cursor and light the row under the pointer.
   Both rules have to beat Bootstrap's .table-striped, which paints every other row through
   --bs-table-striped-bg at (0,2,0); these are (0,3,0) and (0,3,1). */
.cm-grid tbody tr[data-row-href][b-1y792nvn7n] {
    cursor: pointer;
}

.cm-messages .cm-grid tbody tr[data-row-href]:hover > td[b-1y792nvn7n] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 14%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
}

/* The row whose message is open below. (0,3,1), so it beats the striping too. */
.cm-messages .cm-grid tbody tr.cm-selected > td[b-1y792nvn7n] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 24%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
    font-weight: 600;
}

/* ---- The message panel ------------------------------------------------- */

.cm-section[b-1y792nvn7n] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-1y792nvn7n] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

/* Label/value pairs in two columns, the labels sized to their content. */
.cm-detail-grid[b-1y792nvn7n] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 1rem;
    margin: 0 0 0.9rem;
}

.cm-detail-grid dt[b-1y792nvn7n] {
    font-weight: 600;
    opacity: 0.85;
}

.cm-detail-grid dd[b-1y792nvn7n] {
    margin: 0;
}

/* The message itself is plain text, so the line breaks the sender typed are the only
   formatting there is - pre-wrap is what keeps them. */
.cm-message-body[b-1y792nvn7n] {
    white-space: pre-wrap;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.25rem;
    background-color: var(--cm-surface, #ffffff);
    margin-bottom: 0.9rem;
}

.cm-attachments h3[b-1y792nvn7n] {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.cm-attachments ul[b-1y792nvn7n] {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.9rem;
}

.cm-attachments li[b-1y792nvn7n] {
    margin-bottom: 0.2rem;
}

.cm-attachments li .cm-count[b-1y792nvn7n] {
    margin-left: 0.5rem;
}

/* ---- The attachment viewer --------------------------------------------- */

.cm-viewer-bar[b-1y792nvn7n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cm-viewer-image[b-1y792nvn7n] {
    display: block;
    max-width: 100%;
    max-height: 32rem;
    height: auto;
}

.cm-viewer-frame[b-1y792nvn7n] {
    display: block;
    width: 100%;
    height: 32rem;
    border: 1px solid var(--cm-border, #d6d5d5);
}

.cm-download[b-1y792nvn7n] {
    margin-left: 0.75rem;
}

.cm-num[b-1y792nvn7n] {
    text-align: right;
}
/* /Components/Pages/ContactUs.razor.rz.scp.css */
/* The Contact Us form: a single column, since every field is full width. */

.cm-contact[b-unqncrsyr5] {
    font-size: 0.9em;
    max-width: 48rem;
}

.cm-intro[b-unqncrsyr5] {
    opacity: 0.85;
    margin-bottom: 1rem;
}

.cm-field[b-unqncrsyr5] {
    margin-bottom: 0.9rem;
}

.cm-field > label[b-unqncrsyr5] {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.cm-contact[b-unqncrsyr5]  .form-control,
.cm-contact[b-unqncrsyr5]  .form-select,
.cm-contact .form-control[b-unqncrsyr5] {
    font-size: 1em;
}

.cm-contact[b-unqncrsyr5]  .form-text,
.cm-contact .form-text[b-unqncrsyr5] {
    font-size: 0.9em;
    margin-top: 0.15rem;
}

/* The editor needs a working height; Quill gives its container none of its own. */
.cm-contact[b-unqncrsyr5]  .cm-quill,
.cm-contact .cm-quill[b-unqncrsyr5] {
    min-height: 12rem;
    background-color: var(--cm-surface, #ffffff);
}
/* /Components/Pages/CSSPreview.razor.rz.scp.css */
/* Scoped to the theme preview. Everything else on the page is styled by the theme under test,
   which is the whole point - only this chrome is held constant so the themes can be compared. */

/* The theme's background color, above Heading Level One (2026-10-06). */
.cm-preview-bg[b-t0ntrya717] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.cm-preview-bg label[b-t0ntrya717] {
    font-weight: 600;
}

.cm-preview-bg output[b-t0ntrya717] {
    font-family: Consolas, 'Courier New', monospace;
}

.cm-preview-bar[b-t0ntrya717] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.cm-preview-themes[b-t0ntrya717] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cm-chip[b-t0ntrya717] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 999px;
    font-size: 0.8rem;
    text-decoration: none;
}

.cm-chip:hover[b-t0ntrya717] {
    border-color: var(--cm-accent, #1b6ec2);
}

.cm-chip-current[b-t0ntrya717] {
    background-color: var(--cm-accent, #1b6ec2);
    border-color: var(--cm-accent, #1b6ec2);
    color: var(--cm-accent-text, #ffffff);
}

.cm-chip-mode[b-t0ntrya717] {
    font-size: 0.7rem;
    opacity: 0.75;
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* The error page is a short, centred message rather than a form, so it is centred on the page
   and given room to breathe instead of sitting hard against the top-left. */

.cm-error[b-pc2mowsf3s] {
    max-width: 40rem;
    margin: 0 auto;
    padding-block: 3rem;
    text-align: center;
}

.cm-error h2[b-pc2mowsf3s] {
    margin-bottom: 0.25rem;
}

.cm-error h3[b-pc2mowsf3s] {
    margin-bottom: 1.25rem;
}

.cm-error p[b-pc2mowsf3s] {
    margin-bottom: 1rem;
}

.cm-reference code[b-pc2mowsf3s] {
    /* The trace id is long and hyphen-free, so let it break rather than widen the page. */
    word-break: break-all;
}
/* /Components/Pages/ErrorLogs.razor.rz.scp.css */
/* The user grid: thirteen columns, so the type is small and the table gets its own horizontal
   scroller rather than forcing the page to scroll sideways. */

.cm-users[b-9aq2vk4web] {
    font-size: 0.8em;
}

.cm-userbar[b-9aq2vk4web] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.cm-users .btn[b-9aq2vk4web] {
    font-size: 1em;
}

.cm-count[b-9aq2vk4web] {
    opacity: 0.75;
}

.cm-hint[b-9aq2vk4web] {
    opacity: 0.6;
    font-style: italic;
}

.cm-grid-scroll[b-9aq2vk4web] {
    overflow-x: auto;
}

.cm-grid[b-9aq2vk4web] {
    font-size: 1em;
    margin-bottom: 0.75rem;
}

.cm-grid th[b-9aq2vk4web] {
    white-space: nowrap;
}

.cm-grid td[b-9aq2vk4web] {
    vertical-align: top;
    white-space: nowrap;
}

/* The heading is the sort control, so it should not read as body text. */
.cm-grid thead a[b-9aq2vk4web] {
    color: inherit;
    text-decoration: none;
}

.cm-grid thead a:hover[b-9aq2vk4web] {
    text-decoration: underline;
}

.cm-sorted[b-9aq2vk4web] {
    font-weight: 700;
}

.cm-arrow[b-9aq2vk4web] {
    opacity: 0.7;
}

/* The filter row sits under the headings; its inputs should not inflate the row height. */
.cm-filters th[b-9aq2vk4web] {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
}

.cm-users .form-control[b-9aq2vk4web],
.cm-users .form-select[b-9aq2vk4web] {
    font-size: 1em;
    padding: 0.15rem 0.35rem;
    height: auto;
    min-height: 0;
    line-height: 1.3;
    min-width: 6rem;
}

.cm-num[b-9aq2vk4web] {
    text-align: right;
}

.cm-when[b-9aq2vk4web] {
    white-space: nowrap;
}

.cm-empty[b-9aq2vk4web] {
    opacity: 0.75;
    font-style: italic;
}

/* The whole row is double-clickable, so say so with the cursor and light the row under the
   pointer. The accent tint is mixed into the theme's own surface color, so it reads the same
   way on the light themes and the dark ones instead of being a fixed grey.
   Both rules have to beat Bootstrap's .table-striped, which paints every other row through
   --bs-table-striped-bg at (0,2,0); these are (0,3,0) and (0,3,1). */
.cm-grid tbody tr[data-row-href][b-9aq2vk4web] {
    cursor: pointer;
}

.cm-users .cm-grid tbody tr[data-row-href]:hover > td[b-9aq2vk4web] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 14%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
}

.cm-paging[b-9aq2vk4web] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Only the opening of the description is shown; the rest is in the browser's own tooltip, so
   the cursor hints that hovering is worth doing. */
.cm-description[b-9aq2vk4web] {
    cursor: help;
    white-space: nowrap;
}
/* /Components/Pages/EventGallery.razor.rz.scp.css */
/* An event's gallery of uploaded photos (2026-10-12): a grid of small previews, as many to a row as fit, each opening
   at full size. */

.cm-gallery-back[b-zriwgqmn9f] {
    margin-top: -0.25rem;
    margin-bottom: 1rem;
}

.cm-gallery-count[b-zriwgqmn9f] {
    opacity: 0.8;
    margin-bottom: 0.75rem;
}

.cm-gallery[b-zriwgqmn9f] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
}

.cm-gallery-photo[b-zriwgqmn9f] {
    margin: 0;
}

.cm-gallery-photo a[b-zriwgqmn9f] {
    display: block;
    border-radius: 0.375rem;
    overflow: hidden;
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    background: var(--cm-raised, transparent);
}

.cm-gallery-photo img[b-zriwgqmn9f] {
    display: block;
    width: 100%;
    height: 10rem;
    object-fit: cover;
}

.cm-gallery-photo a:focus-visible[b-zriwgqmn9f] {
    outline: 3px solid var(--cm-accent, #0d6efd);
    outline-offset: 2px;
}

.cm-gallery-caption[b-zriwgqmn9f] {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    overflow-wrap: break-word;
}

.cm-gallery-by[b-zriwgqmn9f] {
    opacity: 0.8;
}

.cm-gallery-empty[b-zriwgqmn9f] {
    font-style: italic;
    opacity: 0.85;
}
/* /Components/Pages/EventProfile.razor.rz.scp.css */
/* The event profile. Three rows: two columns of one height, then the content group across the
   full width, then social media beside the venues grid. */

.cm-eventprofile .cm-section[b-c21iqgikcm] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 1.25rem;
}

.cm-eventprofile legend[b-c21iqgikcm] {
    float: none;
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.cm-eventprofile .cm-field[b-c21iqgikcm] {
    margin-bottom: 0.75rem;
}

.cm-eventprofile .cm-field label[b-c21iqgikcm] {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

/* A disabled fieldset greys its contents, which is right for a control that cannot be used but
   wrong for a whole form being read. Keep the text legible; the cursor says it is not editable. */
.cm-eventprofile fieldset[disabled] .form-control[b-c21iqgikcm],
.cm-eventprofile fieldset[disabled] .form-select[b-c21iqgikcm] {
    opacity: 1;
    background-color: var(--cm-surface-muted, rgba(0, 0, 0, 0.04));
    cursor: not-allowed;
}

.cm-readonly-note[b-c21iqgikcm] {
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--cm-accent, #1b6ec2);
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 8%, transparent);
    margin-bottom: 1rem;
}

/* ---- boxes of their own height -------------------------------------------------------------

   These two rules made a box fill its column, so that Basic Information and Event Properties
   were always the same height. That was right while each column held one box. It is not now:
   Payment Processing and Web Pages are boxes of their own in the right-hand column, and a box
   above them stretched to the full column height left 628px of nothing between its last field
   and its own foot - and stretched the description editor beside it to match.

   So the rule is kept for anything that still asks for it by class, and the two boxes on this
   tab no longer do: each is as tall as what is in it. */
.cm-eventprofile .cm-grow[b-c21iqgikcm] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cm-eventprofile .cm-field-grow[b-c21iqgikcm] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The editor is the part that takes up the slack. min-height keeps it usable when the other
   column happens to be the shorter of the two. */
/* The description box.

   It used to be flex: 1 1 auto with a 12rem floor, which meant it stretched to whatever height
   the Event Properties column next to it happened to be - 581px on a wide screen - and the floor
   never bound it. Reducing that floor changed nothing on screen, so this sets the height
   instead: 16rem is 45% of the height it was actually rendering at, and the box scrolls when
   there is more text than that. */
.cm-eventprofile .cm-quill-grow[b-c21iqgikcm] {
    flex: 0 0 auto;
    height: 16rem;
    overflow: auto;
}

/* The toolbar-free editors in the content group. A fixed working height, since nothing here
   has to match a neighbouring column. */
.cm-eventprofile .cm-quill-block[b-c21iqgikcm] {
    min-height: 9rem;
}

/* Without a toolbar Quill's snow theme leaves the editor with no top border of its own, which
   reads as an unfinished box. Give it the same edge every other control has. */
.cm-eventprofile .cm-quill[b-c21iqgikcm] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    background: var(--cm-input-bg, #ffffff);
}

.cm-eventprofile .cm-short[b-c21iqgikcm] {
    max-width: 12rem;
}

/* ---- the venues grid ---------------------------------------------------------------------- */

.cm-venuegrid[b-c21iqgikcm] {
    font-size: 0.85em;
    margin-bottom: 0;
}

.cm-venuegrid th[b-c21iqgikcm] {
    white-space: nowrap;
}

.cm-grid-scroll[b-c21iqgikcm] {
    overflow-x: auto;
}

.cm-empty[b-c21iqgikcm] {
    opacity: 0.75;
    font-style: italic;
}

.cm-profilebar[b-c21iqgikcm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* The home page button and the note beside it. */
.cm-homepage[b-c21iqgikcm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cm-homepage-hint[b-c21iqgikcm] {
    opacity: 0.7;
    font-style: italic;
}

/* ---- the tab strip ------------------------------------------------------------------------
   Links, not buttons: each tab is a place the server can be asked for, so the strip works with
   no script and every tab is linkable. */
/* One strip that wraps. How many tabs are on a line is the browser's to decide from the
   window: eighteen fit across a wide screen, four or five across a phone, and nothing in the
   markup names a break.

   The rule the open tab sits on is the container's, so it is always under the last line however
   many lines there are.

   row-gap is 2px rather than 0 for the sake of the open tab, which hangs 2px below itself to
   break through that rule. On the last line it breaks through and joins the panel, which is the
   point; on any line above, that 2px lands in this gap instead of over the tabs beneath. */
.cm-tabs[b-c21iqgikcm] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.25rem;
    row-gap: 2px;
    border-bottom: 2px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    margin-bottom: 1rem;
}

.cm-tab[b-c21iqgikcm] {
    /* Tight against text this small. Narrower padding also buys width - more tabs reach each
       line before the strip wraps. */
    padding: 0.25rem 0.55rem;

    /* Every tab is drawn, in the same line and color the open one uses, so the strip reads as
       a row of tabs rather than as words with one box among them. What marks the open one is
       its fill and the way it breaks through the rule below. */
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-bottom: none;

    border-radius: 0.375rem 0.375rem 0 0;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;

    /* Two thirds of the body size, and bold to carry at that size. */
    font-size: 0.67rem;
    font-weight: 700;
}

/* Sits on top of the strip's own border, so the open tab joins the panel below it. Harmless on
   a tab that has wrapped above the last line: the 2px falls in the strip's row gap. */
.cm-tab[b-c21iqgikcm] {
    margin-bottom: -2px;
}

.cm-tab:hover[b-c21iqgikcm] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 10%, transparent);
}

.cm-tab-on[b-c21iqgikcm] {
    border-bottom: 2px solid var(--cm-surface, #ffffff);
    background-color: var(--cm-surface, #ffffff);
}


.cm-tabpanel[b-c21iqgikcm] {
    min-height: 20rem;
}

/* ---- the bars above the grids, and the grids themselves ------------------------------------ */
.cm-rowbar[b-c21iqgikcm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.cm-filterbox[b-c21iqgikcm] {
    max-width: 14rem;
}

.cm-count[b-c21iqgikcm] {
    opacity: 0.75;
}

.cm-hint[b-c21iqgikcm] {
    opacity: 0.6;
    font-style: italic;
}

.cm-eugrid[b-c21iqgikcm],
.cm-venuegrid[b-c21iqgikcm] {
    table-layout: fixed;
    width: 100%;
}

.cm-w-euname[b-c21iqgikcm] { width: 40%; }
.cm-w-euflag[b-c21iqgikcm] { width: 25%; }
.cm-w-euaccess[b-c21iqgikcm] { width: 20%; }

/* An event user's second grid (2026-10-02): the setting's title, then six boxes of even width. */
.cm-eusettings[b-c21iqgikcm] {
    table-layout: fixed;
    width: 100%;
}

.cm-eusettings th:first-child[b-c21iqgikcm] {
    width: 28%;
    font-weight: 600;
}

.cm-eusettings th[b-c21iqgikcm] {
    vertical-align: bottom;
}

.cm-eusettings td[b-c21iqgikcm],
.cm-eusettings thead th:not(:first-child)[b-c21iqgikcm] {
    text-align: center;
}

/* Its boxes are controls, not reports: a darker edge to see them by and a pointer. A grayed one is
   faded - clicked, it says why (wwwroot/js/event-user-access.js). */
.cm-eventprofile .cm-eusettings .cm-flag[b-c21iqgikcm] {
    border-color: #929292;
    cursor: pointer;
}

.cm-eventprofile .cm-eusettings .cm-flag[aria-disabled="true"][b-c21iqgikcm] {
    opacity: 0.4;
    cursor: not-allowed;
}
.cm-w-venue[b-c21iqgikcm] { width: 70%; }
.cm-w-venueflag[b-c21iqgikcm] { width: 30%; }

.cm-eventprofile .cm-grid td[b-c21iqgikcm] {
    vertical-align: top;
}

.cm-eventprofile .cm-grid td.cm-wrap[b-c21iqgikcm] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.cm-flag-cell[b-c21iqgikcm] {
    text-align: center;
}

/* A disabled checkbox reporting a value should stay legible rather than fading out. */
.cm-eventprofile .cm-flag[b-c21iqgikcm] {
    opacity: 1;
    cursor: default;
    float: none;
    margin: 0;
}

/* Rows that open something say so, and the venue whose rooms are on show stays marked.
   Both have to beat Bootstrap's .table-striped at (0,2,0). */
.cm-eventprofile .cm-grid tbody tr[data-row-href][b-c21iqgikcm] {
    cursor: pointer;
}

.cm-eventprofile .cm-grid tbody tr[data-row-href]:hover > td[b-c21iqgikcm] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 14%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
}

.cm-eventprofile .cm-grid tbody tr.cm-row-on > td[b-c21iqgikcm] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 22%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
    font-weight: 600;
}

/* ---- the panels below the grids ------------------------------------------------------------ */
.cm-subsection[b-c21iqgikcm] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem 0.75rem;
    margin-bottom: 1rem;
}

.cm-subsection legend[b-c21iqgikcm] {
    float: none;
    width: auto;
    padding: 0 0.35rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.cm-sublabel[b-c21iqgikcm] {
    display: block;
    margin-top: 0.4rem;
    font-weight: 400;
    font-size: 0.9em;
    opacity: 0.85;
}

/* The question an empty Items grid asks. */
.cm-prompt[b-c21iqgikcm] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--cm-accent, #1b6ec2);
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 8%, transparent);
}

.cm-prompt p[b-c21iqgikcm] {
    margin-bottom: 0.5rem;
}

.cm-paging[b-c21iqgikcm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* ---- the venue grid's two controls ---------------------------------------------------------
   The delete column, and the bin itself. Same shape as the attendees grid, so the two read the
   same way. */
.cm-w-venue[b-c21iqgikcm] { width: 55%; }
.cm-w-venueflag[b-c21iqgikcm] { width: 27%; }
.cm-w-venuedel[b-c21iqgikcm] { width: 18%; }

.cm-trash[b-c21iqgikcm] {
    line-height: 1;
    padding: 0.2rem 0.55rem;
}

/* A bin that cannot be used right now: greyed the way Bootstrap greys a disabled button, but
   still clickable - pressing it says why, in the application's dialog (data-cm-alert,
   wwwroot/js/confirm-submit.js). A real disabled button would take no click at all. */
.cm-trash.cm-trash-locked[b-c21iqgikcm] {
    opacity: 0.45;
    cursor: not-allowed;
}

.cm-trash.cm-trash-locked:hover[b-c21iqgikcm],
.cm-trash.cm-trash-locked:focus[b-c21iqgikcm] {
    color: var(--bs-danger, #dc3545);
    background-color: transparent;
}

/* The nav's .bi icons are white SVGs painted as backgrounds - right on the dark sidebar and
   invisible on a table row - and there is no bin among them. This is the Bootstrap Icons bin
   drawn as a mask, so the shape takes the button's own color. */
.cm-trash-icon[b-c21iqgikcm] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--cm-trash-mask);
    mask-image: var(--cm-trash-mask);
    --cm-trash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'/%3E%3C/svg%3E");
}

/* The primary box is a control, not a report, so it keeps a pointer - except on the venue that
   already holds the flag, where there is nothing to turn off. */
.cm-eventprofile .cm-venuegrid .cm-flag:not(:disabled)[b-c21iqgikcm] {
    cursor: pointer;
}

/* The forms the grid's controls post to carry nothing visible. */
.cm-hiddenform[b-c21iqgikcm] {
    margin: 0;
}

/* The fallback submit inside each primary form. wwwroot/js/venue-form.js submits on change and
   marks the document, so this is only ever seen by a browser that did not run it. */
html.cm-js .cm-nojs[b-c21iqgikcm] {
    display: none;
}

.cm-nojs[b-c21iqgikcm] {
    font-size: 0.75em;
    padding: 0.1rem 0.4rem;
}

/* The rooms grid's five columns: two names, the room use, the used flag, and the bin that takes
   the room off the event (2026-09-29). */
.cm-roomgrid[b-c21iqgikcm] {
    table-layout: fixed;
    width: 100%;
}

.cm-w-roomname[b-c21iqgikcm] { width: 27%; }
.cm-w-roomuse[b-c21iqgikcm] { width: 19%; }
.cm-w-roomused[b-c21iqgikcm] { width: 14%; }
.cm-w-roomdel[b-c21iqgikcm] { width: 13%; }

/* Room Used is a control, not a report, so it keeps a pointer while it can be changed. */
.cm-eventprofile .cm-roomgrid .cm-flag:not(:disabled)[b-c21iqgikcm] {
    cursor: pointer;
}

/* ---- Item settings ----------------------------------------------------------------------- */

/* The master list picker: a tick, a title, and what kind of item it is. Nothing here is sorted
   or filtered, so the columns carry no controls. */
.cm-mastergrid[b-c21iqgikcm],
.cm-settinggrid[b-c21iqgikcm] {
    table-layout: fixed;
    width: 100%;
}

.cm-w-include[b-c21iqgikcm] { width: 22%; }
.cm-w-mastertitle[b-c21iqgikcm] { width: 58%; }
.cm-w-masterreg[b-c21iqgikcm] { width: 20%; }

/* Eight columns, adding to 100%. Each is at least as wide as the longest word in its heading
   ("Registration", "Include", "Details"), so a heading wraps between words rather than running
   into the next one - at two-thirds of the row, which is what the grid is given from xl up. */
.cm-w-settitle[b-c21iqgikcm] { width: 25%; }
.cm-w-setflag[b-c21iqgikcm] { width: 15%; }
.cm-w-setorder[b-c21iqgikcm] { width: 9%; }
.cm-w-setcost[b-c21iqgikcm] { width: 11%; }
.cm-w-setitems[b-c21iqgikcm] { width: 9%; }
.cm-w-setcolor[b-c21iqgikcm] { width: 9%; }
.cm-w-setdetails[b-c21iqgikcm] { width: 11%; }
.cm-w-setdel[b-c21iqgikcm] { width: 11%; }

/* The Include boxes are controls, so they keep a pointer; the rest of the picker reports. */
.cm-eventprofile .cm-mastergrid .cm-flag:not(:disabled)[b-c21iqgikcm] {
    cursor: pointer;
}

/* The settings grid's Options box is a control - it posts when it changes - so it keeps a
   pointer while it can be changed, as the rooms grid's Room Used does. */
.cm-eventprofile .cm-settinggrid .cm-flag:not(:disabled)[b-c21iqgikcm] {
    cursor: pointer;
}

/* A draggable row says so: grab to pick it up, grabbing while it is held. */
.cm-eventprofile .cm-settinggrid tbody tr[draggable="true"][b-c21iqgikcm] {
    cursor: grab;
}

.cm-eventprofile .cm-settinggrid tbody tr.cm-dragging[b-c21iqgikcm],
.cm-eventprofile .cm-roomgrid tbody tr.cm-dragging[b-c21iqgikcm] {
    cursor: grabbing;
    opacity: 0.5;
}

/* Where the held row will land, drawn on the row it is over rather than as a gap, so the table
   does not reflow under the pointer mid-drag. The Rooms grid drags too (2026-09-29). */
.cm-eventprofile .cm-settinggrid tbody tr.cm-drop-before > td[b-c21iqgikcm],
.cm-eventprofile .cm-roomgrid tbody tr.cm-drop-before > td[b-c21iqgikcm] {
    box-shadow: inset 0 2px 0 0 var(--bs-primary, #0d6efd);
}

.cm-eventprofile .cm-settinggrid tbody tr.cm-drop-after > td[b-c21iqgikcm],
.cm-eventprofile .cm-roomgrid tbody tr.cm-drop-after > td[b-c21iqgikcm] {
    box-shadow: inset 0 -2px 0 0 var(--bs-primary, #0d6efd);
}

/* The message shown when a drop is refused. Over the page rather than in the flow: it is the
   answer to something the reader just tried to do, and belongs where they were looking. */
.cm-rulewarning[b-c21iqgikcm] {
    position: fixed;
    inset: 0;
    z-index: 1065;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.cm-rulewarning-backdrop[b-c21iqgikcm] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.cm-rulewarning-panel[b-c21iqgikcm] {
    position: relative;
    width: min(30rem, 100%);
    background: var(--cm-surface, #ffffff);
    color: var(--cm-text, #212529);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    padding: 1.25rem 1.5rem 1.5rem;
}

.cm-rulewarning-title[b-c21iqgikcm] {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}

.cm-rulewarning-panel p[b-c21iqgikcm] {
    margin-bottom: 0.75rem;
}

/* Says something is wrong with what is on screen, rather than with what was just done - it
   stays until the thing it describes is fixed. */
.cm-warning[b-c21iqgikcm] {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(180, 120, 0, 0.45);
    border-left-width: 4px;
    border-radius: 0.375rem;
    background: rgba(255, 193, 7, 0.12);
}

/* Item Order on the item setting form: a short number, so its label sits beside it rather than
   above it and the box stops at the width the value needs. */
.cm-eventprofile .cm-inline[b-c21iqgikcm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* A label and its box, kept together when .cm-inline wraps. The space between pairs is the
   pair's own, so a pair that wraps onto a new line starts flush with the one above - which is
   why app.css's margin on the color label is taken off here. */
.cm-eventprofile .cm-inline-pair[b-c21iqgikcm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.cm-eventprofile .cm-inline-pair .cm-color-label[b-c21iqgikcm] {
    margin-left: 0;
}

.cm-eventprofile .cm-inline label[b-c21iqgikcm] {
    margin-bottom: 0;
}

/* ::deep, because the box is rendered by InputNumber rather than by this page, and a scoped
   rule only reaches markup the page wrote itself. The label above it is this page's, which is
   why the flex rule works without it. */
.cm-eventprofile .cm-inline[b-c21iqgikcm]  .cm-short {
    width: 6rem;
    flex: 0 0 auto;
}

/* A box that cannot be used right now - the item form's Duration In Minutes while Include on
   Calendar is unticked (2026-09-29). It is readonly and aria-disabled rather than disabled, so it
   still posts and says why when clicked, and is grayed here the way a disabled box is. ::deep
   because InputNumber renders the box. */
.cm-eventprofile[b-c21iqgikcm]  .form-control[aria-disabled="true"] {
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--cm-muted, #6c757d);
    cursor: not-allowed;
}

/* ---- Event items --------------------------------------------------------------------------- */

.cm-itemgrid[b-c21iqgikcm] {
    table-layout: fixed;
    width: 100%;
}

.cm-w-itemid[b-c21iqgikcm] { width: 9%; }
.cm-w-itemcategory[b-c21iqgikcm] { width: 22%; }
.cm-w-itemtitle[b-c21iqgikcm] { width: 29%; }
/* Without categories the title has the category's share too (2026-09-30). */
.cm-w-itemtitle-wide[b-c21iqgikcm] { width: 51%; }
/* Wide enough for the presenter's name under the photograph (2026-10-03). */
.cm-w-itemshot[b-c21iqgikcm] { width: 16%; }
.cm-w-itempresenter[b-c21iqgikcm] { width: 24%; }
.cm-w-itemdel[b-c21iqgikcm] { width: 8%; }

/* The item's own address, which only applies to an offsite item. Disabled rather than hidden:
   the fields stay where they are so the form does not jump when the box is ticked, and greyed
   says "not for this item" more plainly than an empty space does. */
.cm-eventprofile .cm-offsite[b-c21iqgikcm] {
    margin: 0.75rem 0;
    padding: 0.5rem 0.9rem 0.75rem;
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
    border-radius: 0.375rem;
}

.cm-eventprofile .cm-offsite legend[b-c21iqgikcm] {
    font-size: 0.95rem;
    font-weight: 600;
    width: auto;
    padding: 0 0.35rem;
    margin: 0;
}

/* The item form's own boxes (2026-09-30): Presenters, and Cost, Attendance and Tickets. Drawn
   like the address box - groups within the form, lighter than the sections around it. */
.cm-eventprofile .cm-itemgroup[b-c21iqgikcm] {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.9rem 0.25rem;
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
    border-radius: 0.375rem;
}

.cm-eventprofile .cm-itemgroup legend[b-c21iqgikcm] {
    font-size: 0.95rem;
    font-weight: 600;
    width: auto;
    padding: 0 0.35rem;
    margin: 0;
}

/* A date field is as wide as a date and no wider. ::deep because InputText renders the box. */
.cm-eventprofile .cm-inline[b-c21iqgikcm]  .cm-date {
    width: 11rem;
    flex: 0 0 auto;
}

/* The short editors on the item form: notes and requirements, not pages. */
.cm-eventprofile .cm-quill-short[b-c21iqgikcm]  .ql-editor,
.cm-eventprofile .cm-quill-short .ql-editor[b-c21iqgikcm] {
    min-height: 6rem;
}

/* ---- Owners and presenters ------------------------------------------------------------------ */

.cm-presentergrid[b-c21iqgikcm] {
    table-layout: fixed;
    width: 100%;
}

.cm-w-preshot[b-c21iqgikcm] { width: 8%; }
.cm-w-presname[b-c21iqgikcm] { width: 26%; }
.cm-w-preswhere[b-c21iqgikcm] { width: 22%; }
.cm-w-presitem[b-c21iqgikcm] { width: 36%; }
.cm-w-presdel[b-c21iqgikcm] { width: 8%; }

/* The head shot in the grid. Fixed at the stored proportions - 400 by 500 - so a row is the
   same height whether the person has a photograph or not, and the column does not jump as the
   pictures arrive. */
.cm-headshot-cell[b-c21iqgikcm] {
    padding-block: 0.25rem;
}

.cm-headshot-thumb[b-c21iqgikcm] {
    width: 40px;
    height: 50px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

/* Landscape in the same 50px of row height, so the rows stay level whichever shape they hold. */
.cm-headshot-thumb.cm-landscape[b-c21iqgikcm] {
    width: 62px;
    height: 50px;
}

/* The item grid's owner or presenter, under the photograph (2026-10-03), or alone without one. Small,
   so the row stays close to the picture's height, and wrapping rather than widening the column. */
.cm-headshot-name[b-c21iqgikcm] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8em;
    line-height: 1.2;
    overflow-wrap: break-word;
}

/* Where a photograph would be. Drawn rather than left empty so the column reads as a column. */
.cm-headshot-none[b-c21iqgikcm] {
    display: block;
    width: 40px;
    height: 50px;
    border: 1px dashed #c9c9c9;
    border-radius: 3px;
    background: #f5f5f5;
}

/* ---- The head shot on the presenter's form --------------------------------------------------- */

.cm-headshot-row[b-c21iqgikcm] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cm-headshot-row .cm-headshot[b-c21iqgikcm] {
    /* Half the stored size: large enough to see what it is, small enough to leave the form's
       fields beside it. */
    width: 200px;
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
}

/* A club's picture is its layout, stored the other way round. */
.cm-headshot-row .cm-headshot.cm-landscape[b-c21iqgikcm],
.cm-headshot-row .cm-headshot-none.cm-landscape[b-c21iqgikcm] {
    width: 250px;
    height: 200px;
}

.cm-headshot-row .cm-headshot-none[b-c21iqgikcm] {
    width: 200px;
    height: 250px;
}

.cm-headshot-controls[b-c21iqgikcm] {
    flex: 1 1 18rem;
    min-width: 0;
}

/* The tick and its label on one line, and the label at the weight of a choice rather than of a
   heading - it is one option among the controls, not a section of the form. */
.cm-headshot-controls .cm-flag[b-c21iqgikcm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.cm-headshot-controls .cm-flag label[b-c21iqgikcm] {
    font-weight: 400;
    margin: 0;
}

/* ---- Sponsors ------------------------------------------------------------------------------ */

/* Two grids in two columns, so each one is half the width the others on this page get. Fixed
   layout and named columns, because a sponsor's name and a package's are both long enough to
   push the money and the bin off the end if the browser is left to decide. */
.cm-pkggrid[b-c21iqgikcm],
.cm-spongrid[b-c21iqgikcm] {
    table-layout: fixed;
    width: 100%;
}

.cm-w-pkgname[b-c21iqgikcm] { width: 34%; }
.cm-w-pkglevel[b-c21iqgikcm] { width: 24%; }
.cm-w-pkgcost[b-c21iqgikcm] { width: 17%; }
.cm-w-pkgtaken[b-c21iqgikcm] { width: 15%; }
.cm-w-pkgdel[b-c21iqgikcm] { width: 10%; }

/* A Title or Room Sponsor package, said under its name in the grid (2026-10-01). */
.cm-sponsorship-tag[b-c21iqgikcm] {
    display: block;
    font-size: 0.85em;
    opacity: 0.8;
}

/* The package form's two sponsorship boxes, a little apart from the numbers above them. */
.cm-sponsorships[b-c21iqgikcm] {
    margin-bottom: 0.5rem;
}

/* The sponsor form's logo (2026-10-01), shown above its file box. */
.cm-sponsor-logo img[b-c21iqgikcm] {
    max-height: 5rem;
    max-width: 100%;
    margin-bottom: 0.4rem;
}

.cm-w-sponname[b-c21iqgikcm] { width: 25%; }
.cm-w-sponpkg[b-c21iqgikcm] { width: 22%; }
.cm-w-sponowed[b-c21iqgikcm] { width: 15%; }
.cm-w-sponcontract[b-c21iqgikcm] { width: 17%; }
.cm-w-sponagreement[b-c21iqgikcm] { width: 12%; }
.cm-w-spondel[b-c21iqgikcm] { width: 9%; }

/* Money and counts read down their last digit. The rule is here rather than only on the grids
   above because .cm-num is used on this page's other grids as well and was never defined for
   them - a number in a right-aligned column is the only thing that class has ever meant. */
.cm-eventprofile .cm-num[b-c21iqgikcm] {
    text-align: right;
}

/* A sponsor whose signed contract is on file cannot be removed, so the bin's place carries a
   padlock instead. It is a statement, not a control: no pointer, and the title says why. */
.cm-locked-mark[b-c21iqgikcm] {
    opacity: 0.55;
    cursor: help;
}

/* The same fact, said in full, on the form for that sponsor. */
.cm-locked[b-c21iqgikcm] {
    margin: 0.4rem 0 0;
    opacity: 0.85;
    font-style: italic;
}

/* ---- an item's variants ------------------------------------------------------------------------
   The grid sits inside the item form under Option Label, so it is sized like a field rather than
   like a page-width grid, and its columns are fixed so the cells line up under their headings. */

.cm-optionbox[b-c21iqgikcm] {
    max-width: 34rem;
}

.cm-optionbox .cm-optiongrid[b-c21iqgikcm] {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 0.35rem;
}

.cm-optionbox .cm-optiongrid th[b-c21iqgikcm],
.cm-optionbox .cm-optiongrid td[b-c21iqgikcm] {
    padding: 0.2rem 0.3rem;
    vertical-align: middle;
}

.cm-optionbox .cm-optiongrid input[b-c21iqgikcm] {
    width: 100%;
}

.cm-w-optiontext[b-c21iqgikcm] { width: 58%; }
.cm-w-optionnum[b-c21iqgikcm] { width: 16%; }
.cm-w-optionbin[b-c21iqgikcm] { width: 10%; }


/* ---- the invitation and the thank you ------------------------------------------------------ */

/* The label and its edit link on one line, the link pushed to the right so the two documents'
   links sit above each other rather than wherever the label happens to end. */
.cm-eventprofile .cm-docbar[b-c21iqgikcm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.cm-eventprofile .cm-docbar label[b-c21iqgikcm] {
    margin-bottom: 0;
}

/* A link in every respect but the element: no border, no padding of its own. */
.cm-eventprofile .cm-doclink[b-c21iqgikcm] {
    padding: 0;
    border: 0;
    font-size: 0.875rem;
}

/* The preview. Tall enough to show an invitation at its real size, scrolling when the document
   is longer than that, and with nothing about it that invites a click: no caret, no hover, and
   the toolbar is not rendered at all (data-quill-bare). */
.cm-eventprofile .cm-quill-preview[b-c21iqgikcm] {
    /* Half the 22rem these were. They are previews - the whole document is read in the dialog -
       so they show the opening and scroll for the rest. */
    height: 11rem;
    overflow: auto;
    background: var(--cm-input-bg, #ffffff);
}

.cm-eventprofile .cm-quill-preview[b-c21iqgikcm]  .ql-editor,
.cm-eventprofile .cm-quill-preview .ql-editor[b-c21iqgikcm] {
    cursor: default;
}

/* Quill greys a read-only editor's placeholder into near-invisibility; this is the only text an
   empty preview has, so it keeps the same weight as any other hint on the page. */
.cm-eventprofile .cm-quill-preview[b-c21iqgikcm]  .ql-editor.ql-blank::before,
.cm-eventprofile .cm-quill-preview .ql-editor.ql-blank[b-c21iqgikcm]::before {
    font-style: normal;
    color: var(--cm-muted, #6c757d);
}

/* ---- the window the editors open in -------------------------------------------------------- */

.cm-eventprofile .cm-dialog[b-c21iqgikcm] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(24, 20, 28, 0.55);
}

/* hidden is how the script opens and closes it, and display:flex above would otherwise win. */
.cm-eventprofile .cm-dialog[hidden][b-c21iqgikcm] {
    display: none;
}

/* The card: as tall as it needs to be up to most of the screen, never taller, because the part
   that scrolls is the body rather than the window. */
.cm-eventprofile .cm-dialog-card[b-c21iqgikcm] {
    display: flex;
    flex-direction: column;
    width: min(64rem, 100%);
    max-height: min(46rem, 90vh);
    background: var(--cm-card-bg, #ffffff);
    border-radius: 0.5rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.cm-eventprofile .cm-dialog-head[b-c21iqgikcm],
.cm-eventprofile .cm-dialog-foot[b-c21iqgikcm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
}

.cm-eventprofile .cm-dialog-foot[b-c21iqgikcm] {
    border-bottom: 0;
    border-top: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
}

.cm-eventprofile .cm-dialog-head h2[b-c21iqgikcm] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.15rem;
}

.cm-eventprofile .cm-dialog-x[b-c21iqgikcm] {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
    color: inherit;
}

/* The scrollable part, as asked for: the toolbar stays put at the top of the editor and the
   document moves under it. */
.cm-eventprofile .cm-dialog-body[b-c21iqgikcm] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    min-height: 0;
}

.cm-eventprofile .cm-quill-document[b-c21iqgikcm] {
    min-height: 24rem;
}

/* Quill's toolbar sticks to the top of the scrolling body, so the formatting controls are still
   there at the foot of a long invitation. */
.cm-eventprofile .cm-dialog-body[b-c21iqgikcm]  .ql-toolbar,
.cm-eventprofile .cm-dialog-body .ql-toolbar[b-c21iqgikcm] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--cm-card-bg, #ffffff);
}


/* ---- the arrangeable sections ---------------------------------------------------------------

   The event profile's sections can be dragged between three places: the left column, the right
   column, and a band across both. The band is where the full-width sections live - the
   invitation and thank you, the social links - and a section dragged into it spans the page.

   Only the third column needs a rule: the other two are Bootstrap's own columns, and everything
   about the dragging itself is in wwwroot/js/section-layout.js and the shared styles it uses. */

.cm-eventprofile .cm-section-band[b-c21iqgikcm] {
    /* An empty band still has to be a target, or a section dragged out of it could never be put
       back. This is the height of a line, which is enough to drop onto. */
    min-height: 2rem;
}

/* The two half-width columns keep their own height while empty, for the same reason. */
.cm-eventprofile [data-cm-section-column="1"]:empty[b-c21iqgikcm],
.cm-eventprofile [data-cm-section-column="2"]:empty[b-c21iqgikcm] {
    min-height: 4rem;
}


/* ---- Continuing Education Credit Information ------------------------------------------------

   The group on the item form, the three pictures a certificate is printed with, and the window
   the certificate itself is designed in. */

.cm-eventprofile .cm-cegroup[b-c21iqgikcm] {
    /* Set apart from the item's own fields: everything inside it is about the certificate rather
       than about what the item is or costs. */
    margin-top: 1rem;
}

/* Each stored picture, beside what it is. A signature is wide and short, so the box is sized to
   hold one without stretching it. */
.cm-eventprofile .cm-ceimages img[b-c21iqgikcm] {
    max-width: 100%;
    max-height: 5rem;
    background: #ffffff;
}

.cm-eventprofile .cm-ceuploads .cm-rowbar[b-c21iqgikcm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The certificate's window is wider than the others, because what it holds is a sheet of paper
   and the paper is not going to be narrower than 8.5 inches. */
.cm-eventprofile .cm-dialog-card.cm-dialog-page[b-c21iqgikcm] {
    width: min(58rem, 100%);
    max-height: 94vh;
}

.cm-eventprofile .cm-certificate-body[b-c21iqgikcm] {
    /* The toolbar above the page, both centered in the part that scrolls, with room around them
       so the edges of the sheet are visible against the background. A column (2026-09-30: "when
       editing a CE Certificate the editor toolbar is on the left when it should be on top"):
       Quill puts its toolbar just before the page, and a row set the two side by side. */
    display: flex;
    flex-direction: column;
    background: var(--cm-page-behind, #52504f);
    padding: 1.25rem;
}

/* The toolbar is the page's width, so it reads as the top of the sheet. Auto margins center it and
   the page while the window is wider than the paper, and give way when it is narrower, so every
   part of the sheet can still be scrolled to. It stays at the top while the page scrolls under it
   (the sticky rule on .cm-dialog-body's toolbar above). */
.cm-eventprofile .cm-certificate-body[b-c21iqgikcm]  .ql-toolbar,
.cm-eventprofile .cm-certificate-body .ql-toolbar[b-c21iqgikcm] {
    flex: 0 0 auto;
    width: 816px;
    margin-inline: auto;
}

/* A sheet of letter paper: 8.5 by 11 inches at 96 pixels to the inch, which is what the browser
   means by an inch. The editor is exactly this and no larger - a certificate that will not fit on
   the page will not fit on the paper either. */
.cm-eventprofile .cm-certificate-page[b-c21iqgikcm] {
    flex: 0 0 auto;
    width: 816px;
    margin-inline: auto;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}

/* Quill's own box has to be transparent for the background to show through it, and exactly one
   page tall: what runs past the bottom of the sheet scrolls, and prints on nothing. */
.cm-eventprofile .cm-certificate-page[b-c21iqgikcm]  .ql-container,
.cm-eventprofile .cm-certificate-page .ql-container[b-c21iqgikcm] {
    background: transparent;
    border: 0;
}

.cm-eventprofile .cm-certificate-page[b-c21iqgikcm]  .ql-editor,
.cm-eventprofile .cm-certificate-page .ql-editor[b-c21iqgikcm] {
    /* The width comes from the page above rather than being set again here: the page carries a
       border, and a second 816 inside it would be that much wider than the paper. */
    width: auto;
    height: 1056px;
    max-height: 1056px;
    overflow-y: auto;
    /* No margin: what is written reaches the edges of the sheet (2026-09-30: "I need the border
       for the page set to .0 inches"; it was half an inch). */
    padding: 0;
    background: transparent;
}

/* While a picture is over the page, so it is plain where it is about to land. */
.cm-eventprofile .cm-certificate-page.cm-certificate-dropping[b-c21iqgikcm] {
    outline: 3px dashed var(--cm-accent, #6f42c1);
    outline-offset: -3px;
}

/* The file picker is a label wrapping a hidden input, so it needs a button's cursor. */
.cm-eventprofile .cm-certificate-choose[b-c21iqgikcm] {
    margin: 0;
    cursor: pointer;
}

/* The registration tab's grid. Half the page, because registration is one item and a table of
   one row stretched across the whole width reads as though rows are missing from it. Full width
   on a narrow screen, where half of it would be too little to read. */
.cm-eventprofile .cm-halfwide[b-c21iqgikcm] {
    max-width: 50%;
}

/* The eight Include flags on the Item Setting form (2026-09-30), set a little apart from the boxes
   above them. */
.cm-eventprofile .cm-include-flags[b-c21iqgikcm] {
    margin-top: 0.5rem;
}

@media (max-width: 991.98px) {
    .cm-eventprofile .cm-halfwide[b-c21iqgikcm] {
        max-width: 100%;
    }
}

/* The upload template link on the RSVP - Attendees - tab. */
.cm-templatelink[b-c21iqgikcm] {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.95em;
}

/* The website key at the top of a personal event's RSVPs tab: eight characters and a hyphen,
   read off a screen onto a card, so wide enough for those and spaced so each one is clear. */
.cm-eventprofile .cm-websitekey .form-control[b-c21iqgikcm] {
    max-width: 11rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
}

/* Each RSVP row's Send Invitation: the button's words stay on one line, and the column is no
   wider than they are. On a phone that one line takes the width the names need, so there the two
   words stack instead. */
.cm-send-cell[b-c21iqgikcm] {
    width: 1%;
    white-space: nowrap;
}

/* RSVP, to the right of Send Invitation in the same cell. */
.cm-send-cell .cm-rsvp[b-c21iqgikcm] {
    margin-left: 0.25rem;
}

@media (max-width: 575.98px) {
    .cm-send-cell[b-c21iqgikcm] {
        white-space: normal;
    }
}

/* The RSVP/Attendees grid keeps its words whole. "anywhere" (the grids' rule, above) lets a cell
   shrink to a letter's width, and with the invitation column taking its share a phone read
   "Simo n Tobia s"; "break-word" only breaks a word too long for any line, so the grid scrolls
   sideways in its box instead. Placed after that rule, which it matches for specificity. */
.cm-eventprofile .cm-attendeegrid td.cm-wrap[b-c21iqgikcm] {
    overflow-wrap: break-word;
}

/* An event of a locked organization (2026-09-26): upright and bold, as on the organization. */
.cm-locked-note[b-c21iqgikcm] {
    font-style: normal;
    font-weight: 700;
    opacity: 1;
    margin-bottom: 0.75rem;
}

.cm-locked-note p + p[b-c21iqgikcm] {
    font-weight: 400;
}

/* The event's logo at the top left, beside the page's title (2026-09-29). A fixed height, and no
   wider than a share of the screen, so a wide logo is shrunk whole rather than crowding the
   title; smaller on a phone. Without a logo the title keeps the space under it that it had. */
.cm-profile-heading[b-c21iqgikcm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.cm-profile-heading h1[b-c21iqgikcm] {
    margin: 0;
    min-width: 0;
}

.cm-profile-logo[b-c21iqgikcm] {
    flex: none;
    height: 5rem;
    width: auto;
    max-width: min(16rem, 30vw);
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .cm-profile-logo[b-c21iqgikcm] {
        height: 3.5rem;
    }
}

/* What the Category dropdown's Add New Category did, beside it (2026-09-30). */
.cm-category-status[b-c21iqgikcm] {
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.cm-category-status.cm-category-saved[b-c21iqgikcm] {
    color: var(--bs-success);
}

/* The item's CE certificate (2026-10-06): the page it prints on, 8.5 by 11 inches, merged with the
   item's values - see CECertificateMerge. */
.cm-item-certificate-sheet[b-c21iqgikcm] {
    box-sizing: border-box;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    margin: 0 auto 1rem;
    padding: 12px 15px;
    background: #ffffff;
    color: #000000;
    border: 1px solid var(--cm-border, #d6d5d5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: auto;
}

/* A presenter's Instructors Signature on their form (2026-10-06), at the height a certificate draws it. */
.cm-signature[b-c21iqgikcm] {
    display: block;
    width: auto;
    max-width: 100%;
    margin-bottom: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--cm-border, #d6d5d5);
}

/* Landscape (2026-10-06: "both portrait and landscape formats"): the CE certificate's sheet 11 by 8.5 inches -
   its toolbar as wide - in its window and on the item form. wwwroot/js/page-orientation.js turns the window's
   as the choice is made. */
.cm-eventprofile .cm-certificate-body.cm-landscape[b-c21iqgikcm]  .ql-toolbar,
.cm-eventprofile .cm-certificate-body.cm-landscape .ql-toolbar[b-c21iqgikcm] {
    width: 1056px;
}

.cm-eventprofile .cm-certificate-page.cm-landscape[b-c21iqgikcm] {
    width: 1056px;
}

.cm-eventprofile .cm-certificate-page.cm-landscape[b-c21iqgikcm]  .ql-editor,
.cm-eventprofile .cm-certificate-page.cm-landscape .ql-editor[b-c21iqgikcm] {
    height: 816px;
    max-height: 816px;
}

.cm-item-certificate-sheet.cm-landscape[b-c21iqgikcm] {
    width: 11in;
    min-height: 8.5in;
}

/* The page frame (2026-10-06: "a page frame would work, please add it  It needs a width and a color", then
   "run it to the PDF edge"): a line along the sheet's four edges, drawn over what is written so nothing
   covers it, and the writing starting an eighth of an inch inside it (CECertificateFrame.Gap). The sheet
   carries cm-framed and the two custom properties; wwwroot/js/page-frame.js changes them in the window as
   the CE box's fields change. */
.cm-eventprofile .cm-certificate-page.cm-framed[b-c21iqgikcm],
.cm-item-certificate-sheet.cm-framed[b-c21iqgikcm] {
    position: relative;
}

.cm-eventprofile .cm-certificate-page.cm-framed[b-c21iqgikcm]::after,
.cm-item-certificate-sheet.cm-framed[b-c21iqgikcm]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--cm-frame-width, 0px) solid var(--cm-frame-color, #000000);
    pointer-events: none;
    z-index: 2;
}

.cm-eventprofile .cm-certificate-page.cm-framed[b-c21iqgikcm]  .ql-editor,
.cm-eventprofile .cm-certificate-page.cm-framed .ql-editor[b-c21iqgikcm],
.cm-item-certificate-sheet.cm-framed[b-c21iqgikcm] {
    padding: calc(var(--cm-frame-width, 0px) + 12px);
}
/* /Components/Pages/Events.razor.rz.scp.css */
/* The events grid. Eight columns, most of them free text, so the type is small and the table
   gets its own horizontal scroller rather than forcing the page to scroll sideways. */

.cm-events[b-q37rwwjp94] {
    font-size: 0.85em;
}

.cm-eventbar[b-q37rwwjp94] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.cm-events .btn[b-q37rwwjp94] {
    font-size: 1em;
}

.cm-count[b-q37rwwjp94] {
    opacity: 0.75;
}

.cm-hint[b-q37rwwjp94] {
    opacity: 0.6;
    font-style: italic;
}

.cm-grid-scroll[b-q37rwwjp94] {
    overflow-x: auto;
}

.cm-grid[b-q37rwwjp94] {
    font-size: 1em;
    margin-bottom: 0.75rem;
}

.cm-eventgrid[b-q37rwwjp94] {
    table-layout: fixed;
    width: 100%;
    min-width: 66rem;
}

/* The seven columns add up to 100 again now that Event Location has gone; the width it had went
   to the title and the tag line, which are the two that run out of room first. */
.cm-w-id[b-q37rwwjp94] { width: 7%; }
.cm-w-org[b-q37rwwjp94] { width: 16%; }
.cm-w-title[b-q37rwwjp94] { width: 23%; }
.cm-w-tagline[b-q37rwwjp94] { width: 24%; }
.cm-w-type[b-q37rwwjp94] { width: 10%; }
.cm-w-list[b-q37rwwjp94] { width: 10%; }
.cm-w-status[b-q37rwwjp94] { width: 10%; }

.cm-grid th[b-q37rwwjp94] {
    white-space: nowrap;
}

.cm-grid td[b-q37rwwjp94] {
    vertical-align: top;
    white-space: nowrap;
}

/* The text columns wrap instead, so a long title or tag line is readable rather than clipped. */
.cm-eventgrid td.cm-wrap[b-q37rwwjp94] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.cm-grid thead a[b-q37rwwjp94] {
    color: inherit;
    text-decoration: none;
}

.cm-grid thead a:hover[b-q37rwwjp94] {
    text-decoration: underline;
}

.cm-sorted[b-q37rwwjp94] {
    font-weight: 700;
}

.cm-arrow[b-q37rwwjp94] {
    opacity: 0.7;
}

.cm-filters th[b-q37rwwjp94] {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
}

.cm-events .form-control[b-q37rwwjp94] {
    font-size: 1em;
    padding: 0.15rem 0.35rem;
    height: auto;
    min-height: 0;
    line-height: 1.3;
    min-width: 0;
}

.cm-num[b-q37rwwjp94] {
    text-align: right;
}

.cm-empty[b-q37rwwjp94] {
    opacity: 0.75;
    font-style: italic;
}

/* The whole row is double-clickable, so say so with the cursor and light the row under the
   pointer. Both rules have to beat Bootstrap's .table-striped at (0,2,0). */
.cm-grid tbody tr[data-row-href][b-q37rwwjp94] {
    cursor: pointer;
}

.cm-events .cm-grid tbody tr[data-row-href]:hover > td[b-q37rwwjp94] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 14%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
}

.cm-paging[b-q37rwwjp94] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
/* /Components/Pages/EventSubmission.razor.rz.scp.css */
/* The form an event home page's "Submit a ..." links open (2026-10-05). The boxed look is scoped per
   page in this app, so this carries its own copies - the registration page's rules. */

.cm-sub-event[b-sld7eakkoo] {
    margin-top: -0.25rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    opacity: 0.85;
}

.cm-submission[b-sld7eakkoo] {
    max-width: 52rem;
}

.cm-submission .cm-section[b-sld7eakkoo] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 1.25rem;
}

.cm-submission legend[b-sld7eakkoo] {
    float: none;
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.cm-submission .cm-field[b-sld7eakkoo] {
    margin-bottom: 0.75rem;
}

.cm-submission .cm-field label[b-sld7eakkoo] {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

.cm-submission .cm-profilebar[b-sld7eakkoo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
/* /Components/Pages/Faq.razor.rz.scp.css */
/* The FAQ: one measured column, like the legal pages, because long paragraphs are unreadable at
   the full width of a wide screen. */

.cm-faq[b-hgd9ab2g0k] {
    max-width: 52rem;
}

.cm-faq-intro[b-hgd9ab2g0k] {
    margin-bottom: 1.5rem;
}

/* The section headings. Smaller than the page title and spaced away from the answers above, so
   the page reads as a handful of groups rather than one long list. */
.cm-faq h2[b-hgd9ab2g0k] {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

/* One question. A details element, so it opens on a click or the space bar with no script at
   all - and the browser's own disclosure triangle tells a screen reader whether it is open. */
.cm-faq details[b-hgd9ab2g0k] {
    border-bottom: 1px solid rgba(128, 128, 128, 0.18);
    padding: 0.1rem 0;
}

.cm-faq summary[b-hgd9ab2g0k] {
    padding: 0.55rem 0.25rem;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.4;
}

/* The focus ring has to be visible: this is the only thing on the page a keyboard lands on. */
.cm-faq summary:focus-visible[b-hgd9ab2g0k] {
    outline: 2px solid var(--cm-accent, #1b6ec2);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

.cm-faq summary:hover[b-hgd9ab2g0k] {
    color: var(--cm-accent, #1b6ec2);
}

/* The answer, indented under its question so an open one reads as belonging to it. */
.cm-faq details > p[b-hgd9ab2g0k],
.cm-faq details > ul[b-hgd9ab2g0k] {
    margin: 0 0 0.75rem 1.25rem;
    line-height: 1.55;
}

.cm-faq details > ul[b-hgd9ab2g0k] {
    padding-left: 1rem;
}

.cm-faq details li[b-hgd9ab2g0k] {
    margin-bottom: 0.3rem;
    line-height: 1.5;
}

.cm-faq code[b-hgd9ab2g0k] {
    font-size: 0.85em;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* The photo rows, the text between them, the gallery and the sign-off moved to
   Shared/HomeDesign.razor.css on 2026-09-25, with the markup, so an organization's home page
   shares them. What is left is this page's own. */

/* The organization's own home page, rendered as written. Images are held to the column so a
   wide one cannot push the page sideways, and video keeps its shape. */
.cm-homepage-content[b-gts594pz0r] {
    line-height: 1.6;
}

.cm-homepage-content img[b-gts594pz0r],
.cm-homepage-content iframe[b-gts594pz0r] {
    max-width: 100%;
}

.cm-homepage-content iframe[b-gts594pz0r] {
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* The invitation to test drive the site. Centred on the line and set in bold - it is the one
   thing on this page addressed to somebody who has not signed up yet, so it reads as an offer
   rather than as a sentence that happens to be a link.

   font-weight sits on the anchor, not on the paragraph: site.css styles links directly, and a
   weight inherited from the paragraph loses to any rule that names the anchor itself. */
.cm-testdrive[b-gts594pz0r] {
    text-align: center;
}

.cm-testdrive a[b-gts594pz0r] {
    font-weight: 700;
}
/* /Components/Pages/HomePagePreview.razor.rz.scp.css */
/* The preview. Everything outside .cm-preview-page belongs to the preview rather than to the
   page being previewed, and is kept visually apart from it for that reason. */

.cm-preview[b-vux4djvz04] {
    max-width: 60rem;
    margin: 0 auto;
}

.cm-preview-bar[b-vux4djvz04] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
}

.cm-preview-label[b-vux4djvz04] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-right: 0.5rem;
}

.cm-preview-name[b-vux4djvz04] {
    font-size: 1.2rem;
    font-weight: 600;
}

/* The saved content, rendered as written. Images are held to the column so a wide one cannot
   push the page sideways. */
.cm-preview-page[b-vux4djvz04] {
    line-height: 1.6;
}

.cm-preview-page img[b-vux4djvz04],
.cm-preview-page iframe[b-vux4djvz04] {
    max-width: 100%;
}

.cm-preview-page iframe[b-vux4djvz04] {
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.cm-empty[b-vux4djvz04] {
    opacity: 0.75;
    font-style: italic;
}
/* /Components/Pages/OrganizationProfile.razor.rz.scp.css */
/* The organization profile: the same boxed sections as the system settings form, plus the
   read-only states this form has and that one does not. */

.cm-settings[b-e1i3bhzfzf] {
    font-size: 0.8em;
}

.cm-section[b-e1i3bhzfzf] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-e1i3bhzfzf] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

/* A smaller legend box inside a section (2026-10-10): the Credit Card Processing box's Sandbox and Production keys,
   its Cards Accepted and its Other Ways to Pay. */
.cm-subsection[b-e1i3bhzfzf] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem 0.5rem;
    margin: 0.75rem 0;
    min-width: 0;
}

.cm-subsection > legend[b-e1i3bhzfzf] {
    float: none;
    width: auto;
    padding: 0 0.35rem;
    margin-bottom: 0.3rem;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1;
}

/* The ways to pay: a box, the brand's small marks and its name on one line. Bootstrap's form-check floats its box
   into a gutter; here it sits in the line. */
.cm-pay-method-grid[b-e1i3bhzfzf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.4rem 1rem;
}

.cm-pay-method[b-e1i3bhzfzf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 0;
    margin: 0;
    padding-left: 0;
}

.cm-pay-method .form-check-input[b-e1i3bhzfzf] {
    float: none;
    flex: none;
    margin: 0;
}

.cm-pay-method .form-check-label[b-e1i3bhzfzf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cm-pay-brand[b-e1i3bhzfzf] {
    flex: none;
    width: 38px;
    height: 24px;
}

.cm-pay-method-row[b-e1i3bhzfzf] {
    padding: 0.4rem 0;
}

.cm-pay-method-row + .cm-pay-method-row[b-e1i3bhzfzf] {
    border-top: 1px solid var(--cm-border, #e3e3e3);
}

/* What a ticked way to pay brings with it, under its box. */
.cm-pay-method-detail[b-e1i3bhzfzf] {
    margin: 0.35rem 0 0.2rem 1.6rem;
}

.cm-pay-method-steps[b-e1i3bhzfzf] {
    margin: 0;
}

.cm-field[b-e1i3bhzfzf] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-e1i3bhzfzf] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

/* ::deep because most inputs are rendered by InputText/InputSelect, which are child components
   and so carry their own scope identifier rather than this page's. */
.cm-settings[b-e1i3bhzfzf]  .form-control,
.cm-settings[b-e1i3bhzfzf]  .form-select,
.cm-settings .form-control[b-e1i3bhzfzf] {
    font-size: 1em;
    padding: 0.25rem 0.5rem;
    height: auto;
    min-height: 0;
    line-height: 1.35;
}

.cm-settings[b-e1i3bhzfzf]  .form-check {
    margin-bottom: 0.5rem;
}

.cm-settings[b-e1i3bhzfzf]  .form-text,
.cm-settings .form-text[b-e1i3bhzfzf] {
    font-size: 0.9em;
    margin-top: 0.1rem;
}

.cm-settings[b-e1i3bhzfzf]  .validation-message {
    font-size: 0.9em;
}

.cm-settings[b-e1i3bhzfzf]  .btn,
.cm-settings .btn[b-e1i3bhzfzf] {
    font-size: 1em;
}

/* A disabled control still has to be legible - these are how the page shows a value that is
   computed rather than typed, so they are read, not skipped. Browsers grey them out heavily by
   default, which reads as "broken" rather than "not yours to change". */
.cm-settings .form-control:disabled[b-e1i3bhzfzf],
.cm-settings[b-e1i3bhzfzf]  .form-control:disabled,
.cm-settings[b-e1i3bhzfzf]  .form-select:disabled {
    opacity: 1;
    background-color: color-mix(in srgb, var(--cm-text, #212529) 6%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
    cursor: not-allowed;
}

.cm-readonly-note[b-e1i3bhzfzf] {
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 0.75rem;
}

/* Comments shown to someone who may not edit them: the stored HTML, rendered. Bounded so a long
   note scrolls inside its box instead of stretching the row. */
.cm-comments-readonly[b-e1i3bhzfzf] {
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.25rem;
    background-color: var(--cm-surface, #ffffff);
}

.cm-comments-readonly[b-e1i3bhzfzf]  p:last-child {
    margin-bottom: 0;
}

.cm-empty[b-e1i3bhzfzf] {
    opacity: 0.75;
    font-style: italic;
}


/* ---- Organization Users grid ------------------------------------------- */

.cm-orguserbar[b-e1i3bhzfzf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.cm-orguserbar input[b-e1i3bhzfzf] {
    width: auto;
    min-width: 12rem;
}

.cm-grid-scroll[b-e1i3bhzfzf] {
    overflow-x: auto;
}

.cm-grid[b-e1i3bhzfzf] {
    font-size: 1em;
    margin-bottom: 0.25rem;
}

.cm-grid th[b-e1i3bhzfzf] {
    white-space: nowrap;
}

.cm-grid td[b-e1i3bhzfzf] {
    vertical-align: middle;
    white-space: nowrap;
}

.cm-num[b-e1i3bhzfzf] {
    text-align: right;
}

.cm-centre[b-e1i3bhzfzf] {
    text-align: center;
}

.cm-count[b-e1i3bhzfzf] {
    opacity: 0.75;
}

.cm-empty[b-e1i3bhzfzf] {
    opacity: 0.75;
    font-style: italic;
}

/* The two access flags. A submit button drawn as a checkbox, so one click both sets the flag
   and saves it - there is no edit form behind this grid. */
.cm-flag[b-e1i3bhzfzf] {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    line-height: 1;
    font-size: 0.8rem;
    border: 1px solid var(--cm-muted, #6c757d);
    border-radius: 0.2rem;
    background-color: var(--cm-surface, #ffffff);
    color: var(--cm-accent-text, #ffffff);
    cursor: pointer;
}

.cm-flag-on[b-e1i3bhzfzf] {
    background-color: var(--cm-accent, #1b6ec2);
    border-color: var(--cm-accent, #1b6ec2);
}

.cm-flag:disabled[b-e1i3bhzfzf] {
    cursor: not-allowed;
    opacity: 0.65;
}

.cm-paging[b-e1i3bhzfzf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

/* The Organization Users rows open a profile, so say so with the cursor and light the row under
   the pointer. Both rules have to beat Bootstrap's .table-striped at (0,2,0). */
.cm-grid tbody tr[data-row-href][b-e1i3bhzfzf] {
    cursor: pointer;
}

.cm-orgusers .cm-grid tbody tr[data-row-href]:hover > td[b-e1i3bhzfzf] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 14%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
}

/* The locked notice. Bold and upright rather than the italic, faded styling the ordinary
   read-only note uses: this one is telling someone their organization has been stopped, which
   is not a detail to be skimmed past. */
.cm-locked-note[b-e1i3bhzfzf] {
    font-style: normal;
    font-weight: 700;
    opacity: 1;
}

/* The organization's events grid. Five columns, with the title taking the width the id column
   used to hold, and wrapping rather than being clipped when a title runs long. */
.cm-orgeventgrid[b-e1i3bhzfzf] {
    table-layout: fixed;
    width: 100%;
}

.cm-w-evtitle[b-e1i3bhzfzf] { width: 40%; }
.cm-w-evtype[b-e1i3bhzfzf] { width: 16%; }
.cm-w-evlist[b-e1i3bhzfzf] { width: 18%; }
.cm-w-evdate[b-e1i3bhzfzf] { width: 13%; }

.cm-orgeventgrid td.cm-wrap[b-e1i3bhzfzf] {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The Add Event link above the events grid. Spaced off the grid so it reads as a control over
   it rather than as part of the table. */
.cm-orgevents .cm-rowbar[b-e1i3bhzfzf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* ---- arranging the sections -------------------------------------------------------------------
   wwwroot/js/section-layout.js adds cm-draggable-legend to each legend it has turned into a drag
   handle, and it only does that for a system administrator - so none of this reaches anybody
   else's page. The rules are scoped like the rest of this file, which is fine for a class added
   at runtime: the scope attribute is already on the legend the server rendered. */

.cm-draggable-legend[b-e1i3bhzfzf] {
    cursor: grab;
}

.cm-draggable-legend:active[b-e1i3bhzfzf] {
    cursor: grabbing;
}

/* The legend is the handle, so it says so where the handle is. */
.cm-draggable-legend[b-e1i3bhzfzf]::after {
    content: " ⠿";
    opacity: 0.45;
    font-size: 0.85em;
}

.cm-section-dragging[b-e1i3bhzfzf] {
    opacity: 0.55;
    outline: 2px dashed var(--cm-accent, #1b6ec2);
}

.cm-section-status[b-e1i3bhzfzf] {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--cm-muted, #6c757d);
}

/* Delete Organization, alone at the foot of Basic Information: set apart from the boxes above
   by a rule, with the note on what it does beside the button. */
.cm-delete-organization[b-e1i3bhzfzf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cm-border, #d6d5d5);
}

.cm-delete-organization .cm-hint[b-e1i3bhzfzf] {
    font-size: 0.85rem;
    color: var(--cm-muted, #6c757d);
}

/* A deleted organization's notice, with Restore Organization at its right-hand end. */
.cm-deleted-notice[b-e1i3bhzfzf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cm-deleted-notice > span[b-e1i3bhzfzf] {
    flex: 1 1 20rem;
}

.cm-deleted-notice form[b-e1i3bhzfzf] {
    margin: 0;
}

/* The save row: Save on the left, Add Test Organization pushed to the right-hand end and level
   with the button rather than with the notes that can sit above it. The bottom margin is the
   one the Save button used to carry itself. */
.cm-saverow[b-e1i3bhzfzf] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cm-saverow-end[b-e1i3bhzfzf] {
    margin-left: auto;
    white-space: nowrap;
}

/* A stock email trigger that is switched off reads as switched off. */
.cm-triggergrid tbody tr.cm-trigger-off > td[b-e1i3bhzfzf] {
    opacity: 0.55;
}

/* The five yes/no columns carry long names; they wrap onto two lines so all ten columns fit. */
.cm-triggergrid thead th.cm-centre[b-e1i3bhzfzf] {
    white-space: normal;
    width: 7rem;
}

/* Organization Users - deleting a user, with the bin and the way back as on the attendee grid. */
.cm-trash[b-e1i3bhzfzf] {
    line-height: 1;
    padding: 0.2rem 0.55rem;
}

/* The nav's .bi icons are white SVGs painted as background images, which is right on the dark
   sidebar and invisible on a white table row - and there is no bin among them. This is the
   Bootstrap Icons bin drawn as a mask instead of a background, so the shape takes the button's
   own color: red while the button is at rest, white once the hover inverts it. */
.cm-trash-icon[b-e1i3bhzfzf] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--cm-trash-mask);
    mask-image: var(--cm-trash-mask);
}

/* The way back, for a row already marked deleted. */
.cm-restore-icon[b-e1i3bhzfzf] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--cm-restore-mask);
    mask-image: var(--cm-restore-mask);
}

.cm-restore-icon[b-e1i3bhzfzf] {
    --cm-restore-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
}

.cm-trash-icon[b-e1i3bhzfzf] {
    --cm-trash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'/%3E%3C/svg%3E");
}

/* A deleted member is still listed for an administrator - in red, so it does not read as a live one. */
.cm-orgusers .cm-grid tbody tr.cm-deleted > td[b-e1i3bhzfzf] {
    color: var(--bs-danger, #b02a37);
    font-style: italic;
}

/* Why a lock was put on, and the paragraphs after it: ordinary weight, so the one bold line above
   still reads as the headline (2026-09-26). */
.cm-locked-note p + p[b-e1i3bhzfzf] {
    font-weight: 400;
}

/* A service fee card: what is on file, then the button that replaces it. */
.cm-fee-card[b-e1i3bhzfzf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* The Events tab's Add Event, grayed while this person cannot add one (2026-09-30), and still
   clickable: the click says why. */
.cm-add-event[aria-disabled="true"][b-e1i3bhzfzf] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- the IRS Exemption Letter's window ------------------------------------------------------------
   Until 2026-09-30 this page had no styles for it, so "View the IRS Exemption Letter" opened it in
   the page's own flow at the very foot of the page - which cannot scroll while a window is open
   (body.cm-dialog-showing) - and the letter was cut off at the bottom of the browser window. It is
   the event profile's window now: over the page, never taller than the screen, its body the part
   that scrolls. */
.cm-dialog[b-e1i3bhzfzf] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(24, 20, 28, 0.55);
}

/* hidden is how the script opens and closes it, and display:flex above would otherwise win. */
.cm-dialog[hidden][b-e1i3bhzfzf] {
    display: none;
}

.cm-dialog-card[b-e1i3bhzfzf] {
    display: flex;
    flex-direction: column;
    width: min(64rem, 100%);
    max-height: 90vh;
    background: var(--cm-card-bg, #ffffff);
    border-radius: 0.5rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.cm-dialog-head[b-e1i3bhzfzf],
.cm-dialog-foot[b-e1i3bhzfzf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
}

.cm-dialog-foot[b-e1i3bhzfzf] {
    flex-wrap: wrap;
    border-bottom: 0;
    border-top: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
}

.cm-dialog-head h2[b-e1i3bhzfzf] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.15rem;
}

.cm-dialog-x[b-e1i3bhzfzf] {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
    color: inherit;
}

.cm-dialog-body[b-e1i3bhzfzf] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    min-height: 0;
}

/* The letter itself. A PDF fills the window's height - an <object> is 150 pixels high unless it is
   told otherwise - and brings its own scrolling; a picture is shown whole, never wider than the
   window. */
.cm-letter-pdf[b-e1i3bhzfzf] {
    display: block;
    width: 100%;
    height: calc(90vh - 10rem);
    min-height: 16rem;
    border: 0;
}

.cm-letter-image[b-e1i3bhzfzf] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
/* /Components/Pages/Organizations.razor.rz.scp.css */
/* The user grid: thirteen columns, so the type is small and the table gets its own horizontal
   scroller rather than forcing the page to scroll sideways. */

.cm-users[b-ih8u2y6a07] {
    font-size: 0.8em;
}

.cm-userbar[b-ih8u2y6a07] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.cm-users .btn[b-ih8u2y6a07] {
    font-size: 1em;
}

.cm-count[b-ih8u2y6a07] {
    opacity: 0.75;
}

.cm-hint[b-ih8u2y6a07] {
    opacity: 0.6;
    font-style: italic;
}

.cm-grid-scroll[b-ih8u2y6a07] {
    overflow-x: auto;
}

.cm-grid[b-ih8u2y6a07] {
    font-size: 1em;
    margin-bottom: 0.75rem;
}

.cm-grid th[b-ih8u2y6a07] {
    white-space: nowrap;
}

.cm-grid td[b-ih8u2y6a07] {
    vertical-align: top;
    white-space: nowrap;
}

/* The heading is the sort control, so it should not read as body text. */
.cm-grid thead a[b-ih8u2y6a07] {
    color: inherit;
    text-decoration: none;
}

.cm-grid thead a:hover[b-ih8u2y6a07] {
    text-decoration: underline;
}

.cm-sorted[b-ih8u2y6a07] {
    font-weight: 700;
}

.cm-arrow[b-ih8u2y6a07] {
    opacity: 0.7;
}

/* The filter row sits under the headings; its inputs should not inflate the row height. */
.cm-filters th[b-ih8u2y6a07] {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
}

.cm-users .form-control[b-ih8u2y6a07],
.cm-users .form-select[b-ih8u2y6a07] {
    font-size: 1em;
    padding: 0.15rem 0.35rem;
    height: auto;
    min-height: 0;
    line-height: 1.3;
    min-width: 6rem;
}

.cm-num[b-ih8u2y6a07] {
    text-align: right;
}

.cm-when[b-ih8u2y6a07] {
    white-space: nowrap;
}

.cm-empty[b-ih8u2y6a07] {
    opacity: 0.75;
    font-style: italic;
}

/* The whole row is double-clickable, so say so with the cursor and light the row under the
   pointer. The accent tint is mixed into the theme's own surface color, so it reads the same
   way on the light themes and the dark ones instead of being a fixed grey.
   Both rules have to beat Bootstrap's .table-striped, which paints every other row through
   --bs-table-striped-bg at (0,2,0); these are (0,3,0) and (0,3,1). */
.cm-grid tbody tr[data-row-href][b-ih8u2y6a07] {
    cursor: pointer;
}

.cm-users .cm-grid tbody tr[data-row-href]:hover > td[b-ih8u2y6a07] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 14%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
}

.cm-paging[b-ih8u2y6a07] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* The grid lays itself out from the <colgroup> above the header rather than from its content,
   which is what makes those percentages the widths that actually render - with the default auto
   layout a percentage is only a suggestion and the content wins. Scoped to this page, so the
   users grid keeps sizing itself from its own content. */
.cm-grid[b-ih8u2y6a07] {
    table-layout: fixed;
}

/* Values wrap inside their column instead of running past it. The body cells inherit nowrap
   from the shared rule above, which with a fixed layout would push text out of the cell rather
   than into a second line; a contact name in 10% of the width needs to wrap. Headers stay on
   one line - they are short, and a wrapped sort link reads badly. */
.cm-grid td[b-ih8u2y6a07] {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ---- Deleted and locked organizations ----------------------------------------------------

   Red is the theme's own --cm-bad, which every theme sets for its background. No theme has a
   yellow, and a fixed one fails half of them - pure yellow all but vanishes on white. So the
   yellow is mixed with the theme's text color: a dark gold on the light themes, a bright yellow
   on the dark ones, readable on both.

   Color on the cells rather than the row, because Bootstrap colors every cell itself through
   .table > :not(caption) > * > *. Both rules repeat :hover so the hover rule above, which sets
   the text color back to --cm-text, does not wash the color out; they come after that rule and
   match its weight. */
.cm-users .cm-grid tbody tr.cm-org-deleted > td[b-ih8u2y6a07],
.cm-users .cm-grid tbody tr.cm-org-deleted:hover > td[b-ih8u2y6a07],
.cm-key-deleted[b-ih8u2y6a07] {
    color: var(--cm-bad, #dc3545);
}

.cm-users .cm-grid tbody tr.cm-org-locked > td[b-ih8u2y6a07],
.cm-users .cm-grid tbody tr.cm-org-locked:hover > td[b-ih8u2y6a07],
.cm-key-locked[b-ih8u2y6a07] {
    color: color-mix(in srgb, #f2c200 60%, var(--cm-text, #212529));
}

.cm-key-deleted[b-ih8u2y6a07],
.cm-key-locked[b-ih8u2y6a07] {
    font-weight: 600;
}

.cm-rowkey[b-ih8u2y6a07] {
    font-size: 0.9em;
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
/* The legal pages: a single measured column, since long paragraphs are unreadable at the full
   width of a wide screen. Shared verbatim with TermsOfUse.razor.css. */

.cm-legal[b-obdgv8k5u7] {
    max-width: 52rem;
}

/* The page title is an h1, like every other page's, and nothing is set on it here: it should
   look like the title of any other page. */

/* The sections within it - h2 now that the title is h1. Smaller than the title and spaced away
   from the text above. */
.cm-legal h2[b-obdgv8k5u7] {
    margin-top: 1.5rem;
    font-size: 1.1rem;
}

.cm-legal p[b-obdgv8k5u7],
.cm-legal li[b-obdgv8k5u7] {
    line-height: 1.5;
}

.cm-legal ul[b-obdgv8k5u7] {
    margin-bottom: 1rem;
}

.cm-effective[b-obdgv8k5u7] {
    opacity: 0.75;
    font-style: italic;
}

.cm-legal-address[b-obdgv8k5u7] {
    margin-top: 0.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.25rem;
    background-color: var(--cm-surface, #ffffff);
    font-style: normal;
}
/* /Components/Pages/RsvpCode.razor.rz.scp.css */
/* The /rsvp code page: one short box, in the site's usual boxed look. */

.cm-rsvpcode[b-d2dudc2t34] {
    max-width: 32rem;
}

.cm-rsvpcode .cm-section[b-d2dudc2t34] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 1.25rem;
}

.cm-rsvpcode legend[b-d2dudc2t34] {
    float: none;
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.cm-rsvpcode .cm-field label[b-d2dudc2t34] {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

/* A code is read off a card: large, spaced, and all capitals as it is typed. */
.cm-rsvpcode .cm-code[b-d2dudc2t34] {
    max-width: 14rem;
    font-size: 1.35rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: Consolas, "Courier New", monospace;
}

.cm-rsvpcode .cm-profilebar[b-d2dudc2t34] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
/* /Components/Pages/SponsorPage.razor.rz.scp.css */
/* A sponsor's page (2026-10-01): the name, and the contact details under it. */

.cm-sponsor-page[b-a5ezya0e6j] {
    max-width: 40rem;
    margin: 1rem auto;
}

.cm-sponsor-contact[b-a5ezya0e6j] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    font-size: 1.1em;
}

.cm-sponsor-contact dt[b-a5ezya0e6j] {
    font-weight: 700;
}

.cm-sponsor-contact dd[b-a5ezya0e6j] {
    margin: 0;
}

.cm-sponsor-none[b-a5ezya0e6j] {
    font-style: italic;
}
/* /Components/Pages/StartRegistration.razor.rz.scp.css */
/* The public RSVP / registration page. The boxed look and the grid styles are scoped per page in
   this app, so this carries its own copies - the same rules the attendee form uses. */

.cm-reg-event[b-dvk5gjby1k] {
    margin-top: -0.25rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    opacity: 0.85;
}

.cm-registration[b-dvk5gjby1k] {
    max-width: 52rem;
}

.cm-registration .cm-section[b-dvk5gjby1k] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 1.25rem;
}

.cm-registration legend[b-dvk5gjby1k] {
    float: none;
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.cm-registration .cm-field[b-dvk5gjby1k] {
    margin-bottom: 0.75rem;
}

.cm-registration .cm-field label[b-dvk5gjby1k] {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

/* A last name and a zip code are short; a full-width box for either looks like it wants a
   paragraph. */
.cm-registration .cm-short[b-dvk5gjby1k] {
    max-width: 20rem;
}

.cm-registration .cm-profilebar[b-dvk5gjby1k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cm-registration .cm-grid-scroll[b-dvk5gjby1k] {
    overflow-x: auto;
}

.cm-registration .cm-grid[b-dvk5gjby1k] {
    margin-bottom: 0.5rem;
}

.cm-registration .cm-grid th[b-dvk5gjby1k] {
    white-space: nowrap;
}

.cm-registration .cm-grid td[b-dvk5gjby1k] {
    vertical-align: middle;
}

.cm-registration .cm-grid td.cm-wrap[b-dvk5gjby1k] {
    white-space: normal;
}

.cm-registration .cm-grid td label[b-dvk5gjby1k] {
    margin: 0;
    cursor: pointer;
}

.cm-registration .cm-num[b-dvk5gjby1k] {
    text-align: right;
    white-space: nowrap;
}

.cm-registration .cm-flag-cell[b-dvk5gjby1k] {
    text-align: center;
    width: 1%;
    white-space: nowrap;
}

.cm-registration .cm-reg-qty[b-dvk5gjby1k] {
    display: inline-block;
    width: auto;
}

.cm-registration .cm-empty[b-dvk5gjby1k] {
    opacity: 0.75;
    font-style: italic;
}

.cm-registration .cm-reg-count:empty[b-dvk5gjby1k] {
    display: none;
}

/* A no already on file, said above the options it can be changed with. */
.cm-registration .cm-reg-declined[b-dvk5gjby1k] {
    font-style: italic;
}

/* What is owed, as two columns: the label, then the amount lined up on the right. */
.cm-registration .cm-reg-total[b-dvk5gjby1k] {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 2rem;
    row-gap: 0.25rem;
    margin-bottom: 1rem;
}

.cm-registration .cm-reg-total dd[b-dvk5gjby1k] {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cm-registration .cm-reg-total dt:last-of-type[b-dvk5gjby1k],
.cm-registration .cm-reg-total dd:last-of-type[b-dvk5gjby1k] {
    font-weight: 700;
}
/* /Components/Pages/StockEmailTriggerEditor.razor.rz.scp.css */
/* The stock email trigger editor: boxed sections with their titles on the border, the way the
   profiles draw theirs. Scoped CSS reaches only this page, so the box rules are repeated here. */

.cm-lead[b-ag6hx9az4g] {
    opacity: 0.85;
}

.cm-section[b-ag6hx9az4g] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-ag6hx9az4g] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

.cm-field[b-ag6hx9az4g] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-ag6hx9az4g] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

/* ::deep because the inputs are rendered by InputText, a child component with its own scope
   identifier rather than this page's. */
.cm-field[b-ag6hx9az4g]  .cm-short {
    max-width: 12rem;
}

.cm-profilebar[b-ag6hx9az4g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cm-rowbar[b-ag6hx9az4g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* /Components/Pages/Subscribe.razor.rz.scp.css */
/* The Subscribe form: one narrow column, as Contact Us is. */

.cm-subscribe-page[b-rc3snlxx68] {
    font-size: 0.9em;
    max-width: 36rem;
}

.cm-intro[b-rc3snlxx68] {
    opacity: 0.85;
    margin-bottom: 1rem;
}

.cm-field[b-rc3snlxx68] {
    margin-bottom: 0.9rem;
}

.cm-field > label:not(.form-check-label)[b-rc3snlxx68] {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.cm-subscribe-page[b-rc3snlxx68]  .form-control,
.cm-subscribe-page .form-control[b-rc3snlxx68] {
    font-size: 1em;
}
/* /Components/Pages/TermsOfUse.razor.rz.scp.css */
/* The legal pages: a single measured column, since long paragraphs are unreadable at the full
   width of a wide screen. Shared verbatim with TermsOfUse.razor.css. */

.cm-legal[b-97coy4ul1r] {
    max-width: 52rem;
}

/* The page title is an h1, like every other page's, and nothing is set on it here: it should
   look like the title of any other page. */

/* The sections within it - h2 now that the title is h1. Smaller than the title and spaced away
   from the text above. */
.cm-legal h2[b-97coy4ul1r] {
    margin-top: 1.5rem;
    font-size: 1.1rem;
}

.cm-legal p[b-97coy4ul1r],
.cm-legal li[b-97coy4ul1r] {
    line-height: 1.5;
}

.cm-legal ul[b-97coy4ul1r] {
    margin-bottom: 1rem;
}

.cm-effective[b-97coy4ul1r] {
    opacity: 0.75;
    font-style: italic;
}

.cm-legal-address[b-97coy4ul1r] {
    margin-top: 0.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.25rem;
    background-color: var(--cm-surface, #ffffff);
    font-style: normal;
}
/* /Components/Pages/UserProfile.razor.rz.scp.css */
/* The user profile form. Same boxed-section look as the system settings form, so the two read
   as one family. */

.cm-profile[b-mixb3b6ty8] {
    font-size: 0.8em;
}

.cm-section[b-mixb3b6ty8] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-mixb3b6ty8] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

.cm-field[b-mixb3b6ty8] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-mixb3b6ty8] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

/* ::deep because most inputs are rendered by InputText/InputSelect, which are child components
   carrying their own scope identifier rather than this page's. */
.cm-profile[b-mixb3b6ty8]  .form-control,
.cm-profile[b-mixb3b6ty8]  .form-select,
.cm-profile .form-control[b-mixb3b6ty8],
.cm-profile .form-select[b-mixb3b6ty8] {
    font-size: 1em;
    padding: 0.25rem 0.5rem;
    height: auto;
    min-height: 0;
    line-height: 1.35;
}

/* A read-only field should look settled rather than broken - muted, but not the washed-out
   grey a disabled control usually gets. */
.cm-profile .form-control[disabled][b-mixb3b6ty8] {
    background-color: var(--cm-raised, #f7f7f7);
    color: var(--cm-text, #212529);
    opacity: 1;
}

.cm-profile[b-mixb3b6ty8]  .form-text,
.cm-profile .form-text[b-mixb3b6ty8] {
    font-size: 0.9em;
    margin-top: 0.1rem;
}

.cm-profile[b-mixb3b6ty8]  .validation-message {
    font-size: 0.9em;
}

.cm-profile[b-mixb3b6ty8]  .btn {
    font-size: 1em;
}

/* ---- Comments editor --------------------------------------------------- */

/* The textarea behind the editor only carries the value to the server; the editor is the UI. */
.cm-profile[b-mixb3b6ty8]  .cm-quill-value {
    display: none;
}

.cm-quill[b-mixb3b6ty8] {
    min-height: 12rem;
    background-color: var(--cm-surface, #ffffff);
    color: var(--cm-text, #212529);
}

/* Quill draws its own chrome, which defaults to light. Point it at the theme's colors so the
   editor does not sit as a white slab on the dark themes. */
.cm-profile[b-mixb3b6ty8]  .ql-toolbar,
.cm-profile[b-mixb3b6ty8]  .ql-container {
    border-color: var(--cm-border, #d6d5d5);
}

.cm-profile[b-mixb3b6ty8]  .ql-toolbar {
    background-color: var(--cm-raised, #f7f7f7);
}

.cm-profile[b-mixb3b6ty8]  .ql-editor.ql-blank::before {
    color: var(--cm-muted, #6c757d);
}

.cm-profile[b-mixb3b6ty8]  .ql-snow .ql-stroke {
    stroke: var(--cm-text, #212529);
}

.cm-profile[b-mixb3b6ty8]  .ql-snow .ql-fill {
    fill: var(--cm-text, #212529);
}

.cm-profile[b-mixb3b6ty8]  .ql-snow .ql-picker {
    color: var(--cm-text, #212529);
}

.cm-profile[b-mixb3b6ty8]  .ql-snow .ql-picker-options {
    background-color: var(--cm-surface, #ffffff);
    border-color: var(--cm-border, #d6d5d5);
}

/* The Merge Content dropdown, appended to Quill's toolbar by quill-editor.js. Quill styles its
   own pickers but not a plain select, so this makes it sit with the rest of the toolbar. */
.cm-profile[b-mixb3b6ty8]  .cm-merge-group {
    float: right;
}

.cm-profile[b-mixb3b6ty8]  select.cm-merge {
    height: 24px;
    max-width: 12rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 3px;
    background-color: var(--cm-surface, #ffffff);
    color: var(--cm-text, #212529);
    font-size: 12px;
    padding: 0 0.25rem;
}

/* Account Delete Date: the checkbox that toggles it sits to the left of the date. ::deep for the
   checkbox, which InputCheckbox renders with its own scope. */
.cm-checkdate[b-mixb3b6ty8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cm-checkdate[b-mixb3b6ty8]  .form-check-input {
    flex: none;
    margin: 0;
}
/* /Components/Pages/Users.razor.rz.scp.css */
/* The user grid: thirteen columns, so the type is small and the table gets its own horizontal
   scroller rather than forcing the page to scroll sideways. */

.cm-users[b-azvcnjj47f] {
    font-size: 0.8em;
}

.cm-userbar[b-azvcnjj47f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.cm-users .btn[b-azvcnjj47f] {
    font-size: 1em;
}

.cm-count[b-azvcnjj47f] {
    opacity: 0.75;
}

.cm-hint[b-azvcnjj47f] {
    opacity: 0.6;
    font-style: italic;
}

.cm-grid-scroll[b-azvcnjj47f] {
    overflow-x: auto;
}

.cm-grid[b-azvcnjj47f] {
    font-size: 1em;
    margin-bottom: 0.75rem;
}

.cm-grid th[b-azvcnjj47f] {
    white-space: nowrap;
}

.cm-grid td[b-azvcnjj47f] {
    vertical-align: top;
    white-space: nowrap;
}

/* The heading is the sort control, so it should not read as body text. */
.cm-grid thead a[b-azvcnjj47f] {
    color: inherit;
    text-decoration: none;
}

.cm-grid thead a:hover[b-azvcnjj47f] {
    text-decoration: underline;
}

.cm-sorted[b-azvcnjj47f] {
    font-weight: 700;
}

.cm-arrow[b-azvcnjj47f] {
    opacity: 0.7;
}

/* The filter row sits under the headings; its inputs should not inflate the row height. */
.cm-filters th[b-azvcnjj47f] {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
}

.cm-users .form-control[b-azvcnjj47f],
.cm-users .form-select[b-azvcnjj47f] {
    font-size: 1em;
    padding: 0.15rem 0.35rem;
    height: auto;
    min-height: 0;
    line-height: 1.3;
    min-width: 6rem;
}

.cm-num[b-azvcnjj47f] {
    text-align: right;
}

.cm-when[b-azvcnjj47f] {
    white-space: nowrap;
}

.cm-empty[b-azvcnjj47f] {
    opacity: 0.75;
    font-style: italic;
}

/* The whole row is double-clickable, so say so with the cursor and light the row under the
   pointer. The accent tint is mixed into the theme's own surface color, so it reads the same
   way on the light themes and the dark ones instead of being a fixed grey.
   Both rules have to beat Bootstrap's .table-striped, which paints every other row through
   --bs-table-striped-bg at (0,2,0); these are (0,3,0) and (0,3,1). */
.cm-grid tbody tr[data-row-href][b-azvcnjj47f] {
    cursor: pointer;
}

.cm-users .cm-grid tbody tr[data-row-href]:hover > td[b-azvcnjj47f] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 14%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
}

.cm-paging[b-azvcnjj47f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Deleting a user - the bin and the way back, as on the attendee grid. */
.cm-delete-head[b-azvcnjj47f],
.cm-delete-cell[b-azvcnjj47f] {
    text-align: center;
}

.cm-trash[b-azvcnjj47f] {
    line-height: 1;
    padding: 0.2rem 0.55rem;
}

/* The nav's .bi icons are white SVGs painted as background images, which is right on the dark
   sidebar and invisible on a white table row - and there is no bin among them. This is the
   Bootstrap Icons bin drawn as a mask instead of a background, so the shape takes the button's
   own color: red while the button is at rest, white once the hover inverts it. */
.cm-trash-icon[b-azvcnjj47f] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--cm-trash-mask);
    mask-image: var(--cm-trash-mask);
}

/* The way back, for a row already marked deleted. */
.cm-restore-icon[b-azvcnjj47f] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--cm-restore-mask);
    mask-image: var(--cm-restore-mask);
}

.cm-restore-icon[b-azvcnjj47f] {
    --cm-restore-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
}

.cm-trash-icon[b-azvcnjj47f] {
    --cm-trash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'/%3E%3C/svg%3E");
}

/* A deleted user is still listed for an administrator - it just should not read as a live one. */
.cm-grid tbody tr.cm-deleted > td[b-azvcnjj47f] {
    color: var(--bs-danger, #b02a37);
    font-style: italic;
}

/* The form every delete button posts to; it carries only the antiforgery token. */
.cm-hiddenform[b-azvcnjj47f] {
    margin: 0;
}
/* /Components/Shared/BlogPanels.razor.rz.scp.css */
/* A home site's blog page (2026-10-02): a legend box a month (2026-10-10), one under another, with a panel per entry
   in each. */
.cm-blog-panels[b-2h6djbijuw] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-block: 1.5rem 1rem;
}

/* A month: drawn as the profiles' legend boxes are (a fieldset's border and its legend), but a details element, so the
   month and year in the top border open and close it. The title sits on the border with the page's own background
   behind it, as a legend does. */
.cm-blog-month[b-2h6djbijuw] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
    border-radius: 0.375rem;
    padding: 0 1rem 1rem;
}

.cm-blog-month:not([open])[b-2h6djbijuw] {
    padding-bottom: 0.4rem;
}

.cm-blog-month > summary[b-2h6djbijuw] {
    list-style: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: -0.8rem 0 0 -0.4rem;
    padding: 0 0.4rem;
    line-height: 1.5;
    background: var(--cm-bg, var(--bs-body-bg, #fff));
    font-weight: 700;
    cursor: pointer;
}

.cm-blog-month > summary[b-2h6djbijuw]::-webkit-details-marker {
    display: none;
}

/* An arrow that turns as it opens. */
.cm-blog-month > summary[b-2h6djbijuw]::before {
    content: "\25B8";
    display: inline-block;
    transition: transform 0.15s ease;
}

.cm-blog-month[open] > summary[b-2h6djbijuw]::before {
    transform: rotate(90deg);
}

.cm-blog-month-title[b-2h6djbijuw] {
    font-size: 1.1em;
}

.cm-blog-month-count[b-2h6djbijuw] {
    font-weight: 400;
    font-size: 0.9em;
    opacity: 0.75;
}

.cm-blog-month-entries[b-2h6djbijuw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.cm-blog-panel[b-2h6djbijuw] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
    border-radius: 0.5rem;
    background: var(--cm-raised, transparent);
}

/* The title, its date, and "more..." at the right - the whole line opens and closes it. */
.cm-blog-panel > summary[b-2h6djbijuw] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
}

.cm-blog-panel > summary[b-2h6djbijuw]::-webkit-details-marker {
    display: none;
}

.cm-blog-panel-title[b-2h6djbijuw] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1.1em;
}

.cm-blog-panel-meta[b-2h6djbijuw] {
    font-size: 0.9em;
    opacity: 0.75;
}

.cm-blog-panel-more[b-2h6djbijuw] {
    color: var(--cm-link, var(--bs-link-color));
    text-decoration: underline;
    white-space: nowrap;
}

.cm-blog-more-open[b-2h6djbijuw],
.cm-blog-panel[open] .cm-blog-more-closed[b-2h6djbijuw] {
    display: none;
}

.cm-blog-panel[open] .cm-blog-more-open[b-2h6djbijuw] {
    display: inline;
}

.cm-blog-panel-body[b-2h6djbijuw] {
    padding: 0 0.9rem 0.9rem;
}

/* The site's blog page: the entry's own address, under its words. */
.cm-blog-panel-link[b-2h6djbijuw] {
    margin: -0.4rem 0 0;
    padding: 0 0.9rem 0.9rem;
    font-weight: 600;
}

.cm-blog-show-more[b-2h6djbijuw] {
    align-self: center;
    margin-top: 0.5rem;
}

.cm-blog-none[b-2h6djbijuw] {
    font-style: italic;
    opacity: 0.8;
}
/* /Components/Shared/BlogTab.razor.rz.scp.css */
/* The Blog tab of an organization's or an event's profile (2026-10-01): a grid of the entries and a
   panel over the page with the entry and its editor. The panel itself is .cm-modal (wwwroot/app.css),
   and so is the form's column layout there, since EditForm draws the form element. */

.cm-blogtab-bar[b-oq34ecsdr2] {
    margin-bottom: 0.75rem;
}

/* The entries in a panel a month (2026-10-09), one under another, as the Press page's are. */
.cm-blogtab-months[b-oq34ecsdr2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cm-blogtab-month[b-oq34ecsdr2] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
    border-radius: 0.5rem;
    background: var(--cm-raised, transparent);
}

/* The month and how many: the whole line opens and closes it, with an arrow that turns. */
.cm-blogtab-month > summary[b-oq34ecsdr2] {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
}

.cm-blogtab-month > summary[b-oq34ecsdr2]::-webkit-details-marker {
    display: none;
}

.cm-blogtab-month > summary[b-oq34ecsdr2]::before {
    content: "\25B8";
    display: inline-block;
    transition: transform 0.15s ease;
}

.cm-blogtab-month[open] > summary[b-oq34ecsdr2]::before {
    transform: rotate(90deg);
}

.cm-blogtab-month-title[b-oq34ecsdr2] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1.1em;
}

.cm-blogtab-month-count[b-oq34ecsdr2] {
    font-size: 0.9em;
    opacity: 0.75;
}

.cm-blogtab-list[b-oq34ecsdr2] {
    list-style: none;
    margin: 0;
    padding: 0 0.9rem 0.6rem;
}

.cm-blogtab-entry[b-oq34ecsdr2] {
    padding: 0.65rem 0;
    border-top: 1px solid var(--cm-border, rgba(0, 0, 0, 0.1));
}

/* The date and title on one line, the Published box and the trash at its right. */
.cm-blogtab-entry-head[b-oq34ecsdr2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.cm-blogtab-entry-head time[b-oq34ecsdr2] {
    white-space: nowrap;
    opacity: 0.8;
}

.cm-blogtab-entry-title[b-oq34ecsdr2] {
    font-weight: 600;
}

.cm-blogtab-entry-tools[b-oq34ecsdr2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.cm-blogtab-publish[b-oq34ecsdr2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.9em;
    white-space: nowrap;
    cursor: pointer;
}

.cm-blogtab-publish .form-check-input[b-oq34ecsdr2] {
    margin: 0;
}

.cm-blogtab-preview[b-oq34ecsdr2] {
    margin: 0.3rem 0 0;
}

/* Show More... and Show Less: a link's look, inline at the end of the words. */
.cm-blogtab-more[b-oq34ecsdr2] {
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-weight: 600;
    white-space: nowrap;
}

.cm-blogtab-full[b-oq34ecsdr2] {
    margin-top: 0.3rem;
}

.cm-blogtab-full:focus[b-oq34ecsdr2] {
    outline: none;
}

.cm-blogtab-show-more[b-oq34ecsdr2] {
    align-self: center;
    margin-top: 0.25rem;
}

.cm-blogtab-trash[b-oq34ecsdr2] {
    padding: 0.1rem 0.35rem;
    color: var(--cm-bad, #b02a37);
}

.cm-blogtab-trash[aria-disabled="true"][b-oq34ecsdr2] {
    opacity: 0.45;
}

.cm-blogtab-trash-icon[b-oq34ecsdr2] {
    width: 1rem;
    height: 1rem;
}

/* Title, author, date and the Published box across the top of the panel; one above another on a phone. */
.cm-blogtab-fields[b-oq34ecsdr2] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 9rem auto;
    gap: 0.5rem 1rem;
    align-items: end;
}

@media (max-width: 767.98px) {
    .cm-blogtab-fields[b-oq34ecsdr2] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The editor gets a working height of its own; the panel's body scrolls around it. */
.cm-blogtab-quill[b-oq34ecsdr2] {
    min-height: 20rem;
}

.cm-blogtab-foot[b-oq34ecsdr2] {
    margin-top: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--cm-border, rgba(0, 0, 0, 0.175));
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* The Yes/No dialog. It sits over the page rather than in the flow, so the question is answered
   before anything else - which is the point of asking it. */

.cm-ask[b-a9jdi0t17k] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.cm-ask-backdrop[b-a9jdi0t17k] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* No close control and no click-away: the two buttons are the only ways out, because the
   application is waiting for one of them. */
.cm-ask-panel[b-a9jdi0t17k] {
    position: relative;
    width: min(32rem, 100%);
    background: var(--cm-surface, #ffffff);
    color: var(--cm-text, #212529);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    padding: 1.25rem 1.5rem 1.5rem;
}

.cm-ask-title[b-a9jdi0t17k] {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.cm-ask-question[b-a9jdi0t17k] {
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.cm-ask-detail[b-a9jdi0t17k] {
    margin-bottom: 1rem;
    opacity: 0.85;
}

.cm-ask-detail p:last-child[b-a9jdi0t17k] {
    margin-bottom: 0;
}

.cm-ask-buttons[b-a9jdi0t17k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

/* Yes leads, so it is the wider of the two and the one the eye lands on first. */
.cm-ask-buttons .btn[b-a9jdi0t17k] {
    min-width: 6rem;
}

/* ---- client mode: the one shared <dialog> the script opens (2026-09-24) ---------------------
   A native dialog, so showModal() lifts it above everything else - including a panel that is
   itself asking - and the browser draws the dimmed page behind it as ::backdrop. The dialog
   element is only the frame: the panel inside is the same .cm-ask-panel as above. */

.cm-ask-dialog[b-a9jdi0t17k] {
    padding: 0;
    border: 0;
    background: transparent;
    width: min(32rem, calc(100% - 3rem));
    max-width: none;
    overflow: visible;
}

.cm-ask-dialog[b-a9jdi0t17k]::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.cm-ask-dialog .cm-ask-panel[b-a9jdi0t17k] {
    width: 100%;
}

/* The Prompt kind's text box: full width, with room between it and the buttons. */
.cm-ask-input[b-a9jdi0t17k] {
    margin-bottom: 1rem;
}

/* A label doing a question's job reads as one, not as a form field's caption. */
label.cm-ask-question[b-a9jdi0t17k] {
    display: block;
}
/* /Components/Shared/CookieConsentBanner.razor.rz.scp.css */
/* The cookie banner. Docked over the foot of the page rather than laid across it: the page
   underneath stays readable and usable, so somebody can still sign in, or read the privacy
   policy the banner points them at, before deciding. */

.cm-cookie[b-bhk76lw9yw] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1070;
    display: flex;
    justify-content: center;
    padding: 1rem;
    /* The strip itself catches no clicks - only the panel does - so nothing behind the empty
       space beside the panel is blocked. */
    pointer-events: none;
}

.cm-cookie-panel[b-bhk76lw9yw] {
    position: relative;
    pointer-events: auto;
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
    display: flex;
    flex-direction: column;
    width: min(46rem, 100%);
    max-height: min(26rem, 55vh);
    background: var(--cm-surface, #ffffff);
    color: var(--cm-text, #212529);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
    padding: 1.25rem 1.5rem 1.25rem;
}

.cm-cookie-title[b-bhk76lw9yw] {
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
}

/* Only the text scrolls, so the three buttons are always in view - the panel cannot be
   dismissed any other way, and a visitor should never have to hunt for the way out. */
.cm-cookie-scroll[b-bhk76lw9yw] {
    overflow-y: auto;
    padding-right: 0.5rem;
    margin-bottom: 1rem;
}

.cm-cookie-scroll p[b-bhk76lw9yw] {
    margin-bottom: 0.75rem;
}

/* The disclosure holding the three categories. Closed to begin with: the buttons answer the
   banner without it, and anyone who wants the detail opens it. */
.cm-cookie-details[b-bhk76lw9yw] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
}

.cm-cookie-manage[b-bhk76lw9yw] {
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0 0 0.5rem;
}

.cm-cookie-details[open] .cm-cookie-manage[b-bhk76lw9yw] {
    margin-bottom: 0.75rem;
}

.cm-cookie-group[b-bhk76lw9yw] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cm-border, rgba(0, 0, 0, 0.1));
}

.cm-cookie-group p[b-bhk76lw9yw] {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.925em;
}

.cm-cookie-head[b-bhk76lw9yw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cm-cookie-name[b-bhk76lw9yw] {
    font-weight: 600;
    margin: 0;
}

/* The one category with no switch says so in words rather than showing a control that does
   nothing when it is pressed. */
.cm-cookie-always[b-bhk76lw9yw] {
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.75;
    white-space: nowrap;
}

.cm-cookie-rights[b-bhk76lw9yw] {
    margin-top: 1rem;
    font-size: 0.9em;
    opacity: 0.9;
}

.cm-cookie-buttons[b-bhk76lw9yw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
}

/* ---- The switches ----------------------------------------------------------------------- */

/* A checkbox drawn as a switch: the input keeps its own behaviour, its keyboard focus and its
   posted value, and only its appearance changes. Nothing here depends on script. */
.cm-switch[b-bhk76lw9yw] {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 3rem;
    height: 1.6rem;
}

.cm-switch input[b-bhk76lw9yw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.cm-switch-track[b-bhk76lw9yw] {
    pointer-events: none;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: var(--cm-muted, #adb5bd);
    transition: background-color 0.15s ease-in-out;
}

/* The knob. Drawn on the track rather than as its own element, so the switch is two nodes. */
.cm-switch-track[b-bhk76lw9yw]::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease-in-out;
}

.cm-switch input:checked + .cm-switch-track[b-bhk76lw9yw] {
    background: var(--bs-primary, #0d6efd);
}

.cm-switch input:checked + .cm-switch-track[b-bhk76lw9yw]::after {
    transform: translateX(1.4rem);
}

.cm-switch input:focus-visible + .cm-switch-track[b-bhk76lw9yw] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* On a narrow screen the panel takes the whole width and the buttons stack rather than
   shrinking to the point of being hard to hit. */
@media (max-width: 36rem) {
    .cm-cookie[b-bhk76lw9yw] {
        padding: 0.75rem;
    }

    .cm-cookie-panel[b-bhk76lw9yw] {
        padding: 1rem;
        max-height: 65vh;
    }

    .cm-cookie-buttons .btn[b-bhk76lw9yw] {
        flex: 1 1 100%;
    }
}
/* /Components/Shared/EmailSubscriptionAdmin.razor.rz.scp.css */
/* The Email Marketing grids' ordering and filters (2026-10-08), as the System Settings administrators grid has them. */

/* A heading is the control that orders its grid, so it reads as a heading rather than as a link. */
.cm-grid thead a[b-evcrjiys4b] {
    color: inherit;
    text-decoration: none;
}

.cm-grid thead a:hover[b-evcrjiys4b],
.cm-grid thead a:focus-visible[b-evcrjiys4b] {
    text-decoration: underline;
}

.cm-sorted[b-evcrjiys4b] {
    font-weight: 700;
}

.cm-arrow[b-evcrjiys4b] {
    opacity: 0.7;
}

/* The filter row sits under the headings; its boxes shouldn't make the row tall or the columns wide. */
.cm-filters th[b-evcrjiys4b] {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
    font-weight: normal;
}

.cm-filters .form-control[b-evcrjiys4b],
.cm-filters .form-select[b-evcrjiys4b] {
    min-width: 6rem;
}

/* The hint, Filter and Clear above each grid, on one line while they fit. */
.cm-email-filterbar[b-evcrjiys4b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
/* /Components/Shared/EventDayCalendar.razor.rz.scp.css */
/* The Calendar tab's day calendar (2026-09-28) - see EventDayCalendar.razor.

   One quarter hour is --cm-daycal-slot high, and everything vertical is a multiple of it: the
   hour labels, the lines in each room's column, and every block, whose top and height the
   script gives in quarter hours. The blocks, and the outline that shows where a drag would land,
   are made by wwwroot/js/event-day-calendar.js, so they carry no scope attribute and are reached
   with ::deep from the room column that holds them. */

.cm-daycal[b-jqe76kk9ik] {
    --cm-daycal-slot: 1rem;
    --cm-daycal-timecol: 5.25rem;
    --cm-daycal-colmin: 9.5rem;
    --cm-daycal-line: color-mix(in srgb, var(--cm-border, #dee2e6) 45%, transparent);
    --cm-daycal-hourline: var(--cm-border, #dee2e6);
}

/* ---- the dates, at the top ---------------------------------------------------------------- */

.cm-daycal-nav[b-jqe76kk9ik] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cm-daycal-select[b-jqe76kk9ik] {
    width: auto;
    min-width: 17rem;
    max-width: 100%;
}

/* ---- the panels beside the calendar ------------------------------------------------------- */

.cm-daycal-body[b-jqe76kk9ik] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.cm-daycal-palette[b-jqe76kk9ik] {
    flex: 0 0 16rem;
    max-height: 75vh;
    overflow-y: auto;
    position: sticky;
    top: 0.5rem;
}

.cm-daycal-main[b-jqe76kk9ik] {
    flex: 1 1 auto;
    min-width: 0;
}

.cm-daycal-tip[b-jqe76kk9ik] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}

.cm-daycal-group[b-jqe76kk9ik] {
    border: 1px solid var(--cm-border, #dee2e6);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    background: var(--cm-surface, #ffffff);
}

.cm-daycal-group > summary[b-jqe76kk9ik] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    font-weight: 700;
    cursor: pointer;
}

/* The disclosure triangle, kept: it is what says the panel opens and closes. */
.cm-daycal-group > summary[b-jqe76kk9ik]::before {
    content: "\25B8";
    display: inline-block;
    width: 0.8em;
    transition: transform 0.15s ease;
}

.cm-daycal-group[open] > summary[b-jqe76kk9ik]::before {
    transform: rotate(90deg);
}

.cm-daycal-group > summary[b-jqe76kk9ik]::-webkit-details-marker {
    display: none;
}

.cm-daycal-group > summary[b-jqe76kk9ik] {
    list-style: none;
}

.cm-daycal-swatch[b-jqe76kk9ik] {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--cm-daycal-color, var(--cm-accent, #1b6ec2));
}

.cm-daycal-groupcount[b-jqe76kk9ik] {
    font-weight: 400;
    color: var(--cm-muted, #6c757d);
}

.cm-daycal-items[b-jqe76kk9ik] {
    list-style: none;
    margin: 0;
    padding: 0 0.5rem 0.5rem;
}

.cm-daycal-noitems[b-jqe76kk9ik] {
    margin: 0;
    padding: 0 0.6rem 0.5rem;
}

.cm-daycal-item[b-jqe76kk9ik] {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
    padding: 0.3rem 1.1rem 0.3rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--cm-daycal-color, var(--cm-accent, #1b6ec2)) 40%, transparent);
    border-left: 4px solid var(--cm-daycal-color, var(--cm-accent, #1b6ec2));
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--cm-daycal-color, var(--cm-accent, #1b6ec2)) 10%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
    font-size: 0.85rem;
    line-height: 1.25;
    cursor: grab;
    user-select: none;
}

.cm-daycal-item:hover[b-jqe76kk9ik] {
    background: color-mix(in srgb, var(--cm-daycal-color, var(--cm-accent, #1b6ec2)) 20%, var(--cm-surface, #ffffff));
}

.cm-daycal-item:focus-visible[b-jqe76kk9ik] {
    outline: 2px solid var(--cm-focus, var(--cm-accent, #1b6ec2));
    outline-offset: 1px;
}

.cm-daycal-itemtitle[b-jqe76kk9ik] {
    font-weight: 600;
}

.cm-daycal-itemmeta[b-jqe76kk9ik] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--cm-muted, #6c757d);
}

/* How many times the item is on the calendar, on the top right corner of its name (2026-09-29).
   The page's text and surface colors turned round, so it reads in every theme whatever color the
   setting has. The item keeps room on its right for it. */
.cm-daycal-count[b-jqe76kk9ik] {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 0.65rem;
    background: var(--cm-text, #212529);
    color: var(--cm-surface, #ffffff);
    box-shadow: 0 0 0 2px var(--cm-surface, #ffffff);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.cm-daycal-count[hidden][b-jqe76kk9ik] {
    display: none;
}

/* ---- the calendar ------------------------------------------------------------------------- */

.cm-daycal-scroll[b-jqe76kk9ik] {
    max-height: 75vh;
    overflow: auto;
    border: 1px solid var(--cm-border, #dee2e6);
    border-radius: 0.375rem;
    background: var(--cm-surface, #ffffff);
}

.cm-daycal-scroll:focus-visible[b-jqe76kk9ik] {
    outline: 2px solid var(--cm-focus, var(--cm-accent, #1b6ec2));
    outline-offset: 2px;
}

/* At least as wide as its columns' smallest widths, so the header and the time column - which
   stick inside it - keep sticking however far the calendar is scrolled across. */
.cm-daycal-grid[b-jqe76kk9ik] {
    display: grid;
    /* Dragging across it moves blocks; it never selects the hour labels or room names. */
    user-select: none;
    grid-template-columns: var(--cm-daycal-timecol) repeat(var(--cm-daycal-rooms), minmax(var(--cm-daycal-colmin), 1fr));
    grid-template-rows: auto calc(var(--cm-daycal-slots) * var(--cm-daycal-slot));
    min-width: calc(var(--cm-daycal-timecol) + var(--cm-daycal-rooms) * var(--cm-daycal-colmin));
}

.cm-daycal-corner[b-jqe76kk9ik],
.cm-daycal-roomhead[b-jqe76kk9ik] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--cm-surface, #ffffff);
    border-bottom: 1px solid var(--cm-daycal-hourline);
}

.cm-daycal-corner[b-jqe76kk9ik] {
    left: 0;
    z-index: 5;
    border-right: 1px solid var(--cm-daycal-hourline);
}

.cm-daycal-roomhead[b-jqe76kk9ik] {
    padding: 0.4rem 0.5rem;
    border-left: 1px solid var(--cm-daycal-hourline);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    /* A word too long for the column still wraps, but only when it cannot break anywhere else. */
    overflow-wrap: break-word;
}

.cm-daycal-roomname[b-jqe76kk9ik] {
    display: block;
}

/* What the room is used for, on a line of its own below the name (2026-09-29). */
.cm-daycal-roomuse[b-jqe76kk9ik] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--cm-muted, #6c757d);
}

.cm-daycal-hours[b-jqe76kk9ik] {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--cm-surface, #ffffff);
    border-right: 1px solid var(--cm-daycal-hourline);
}

.cm-daycal-hour[b-jqe76kk9ik] {
    box-sizing: border-box;
    height: calc(4 * var(--cm-daycal-slot));
    padding: 0.1rem 0.4rem 0;
    border-top: 1px solid var(--cm-daycal-hourline);
    font-size: 0.75rem;
    text-align: right;
    white-space: nowrap;
    color: var(--cm-muted, #6c757d);
}

.cm-daycal-hour:first-child[b-jqe76kk9ik] {
    border-top: 0;
}

/* A line at every quarter hour, and a stronger one on the hour. */
.cm-daycal-room[b-jqe76kk9ik] {
    position: relative;
    border-left: 1px solid var(--cm-daycal-hourline);
    background-image:
        linear-gradient(to bottom, var(--cm-daycal-hourline) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cm-daycal-line) 1px, transparent 1px);
    background-size: 100% calc(4 * var(--cm-daycal-slot)), 100% var(--cm-daycal-slot);
}

.cm-daycal-room.cm-daycal-over[b-jqe76kk9ik] {
    background-color: color-mix(in srgb, var(--cm-accent, #1b6ec2) 5%, transparent);
}

/* ---- the blocks, which the script draws --------------------------------------------------- */

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0.1rem 0.3rem;
    border: 1px solid color-mix(in srgb, var(--cm-daycal-color, var(--cm-accent, #1b6ec2)) 45%, transparent);
    border-left: 4px solid var(--cm-daycal-color, var(--cm-accent, #1b6ec2));
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--cm-daycal-color, var(--cm-accent, #1b6ec2)) 18%, var(--cm-surface, #ffffff));
    color: var(--cm-text, #212529);
    font-size: 0.75rem;
    line-height: 1.15;
    overflow: hidden;
    z-index: 1;
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block[draggable="true"] {
    cursor: grab;
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block:hover,
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block:focus-visible {
    z-index: 2;
    overflow: visible;
    min-height: fit-content;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block:focus-visible {
    outline: 2px solid var(--cm-focus, var(--cm-accent, #1b6ec2));
    outline-offset: 1px;
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-blocktitle {
    font-weight: 600;
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-blocktime {
    color: var(--cm-muted, #6c757d);
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block.cm-daycal-canceled .cm-daycal-blocktitle {
    text-decoration: line-through;
}

/* A block in its tab's color - its item setting's (2026-09-29: "make the calendar items background
   the color of their tab") - with its words in black or white, whichever reads better on it
   (--cm-daycal-text, from ItemColor.TextOn). A setting with no color keeps the tinted look above. */
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block.cm-daycal-colored {
    border-color: color-mix(in srgb, var(--cm-daycal-color) 70%, #000000);
    background: var(--cm-daycal-color);
    color: var(--cm-daycal-text, #000000);
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block.cm-daycal-colored .cm-daycal-blocktime {
    color: inherit;
    opacity: 0.85;
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block.cm-daycal-dragging {
    opacity: 0.45;
}

/* A block's bottom edge, dragged to change how long its item runs (2026-09-29). The script draws it
   straight after its block, at the block's own end and as wide - beside the block rather than in
   it, since a press inside a draggable block would start the browser's own drag. touch-action
   none, so a finger drags it rather than scrolling the page. */
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-resize {
    position: absolute;
    box-sizing: border-box;
    height: 8px;
    cursor: ns-resize;
    touch-action: none;
    border-radius: 0 0 0.25rem 0.25rem;
    z-index: 4;
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-resize:hover,
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block:hover + .cm-daycal-resize,
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-resize.cm-daycal-resizing {
    background: color-mix(in srgb, var(--cm-daycal-color, var(--cm-accent, #1b6ec2)) 55%, transparent);
}

/* On a block of its own color the edge would not show, so it takes the block's words' color. */
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-resize.cm-daycal-colored:hover,
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block:hover + .cm-daycal-resize.cm-daycal-colored,
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-resize.cm-daycal-colored.cm-daycal-resizing {
    background: color-mix(in srgb, var(--cm-daycal-text, #000000) 40%, transparent);
}

/* While its edge is held the block is exactly as long as it would be - not grown to show its
   whole title, as hovering does - and above its neighbors. */
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-block.cm-daycal-resizing {
    min-height: 0;
    overflow: hidden;
    z-index: 3;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

/* Where a drag would land, and until when. Red when it would run past midnight. */
.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-ghost {
    position: absolute;
    left: 1px;
    right: 1px;
    box-sizing: border-box;
    padding: 0.1rem 0.3rem;
    border: 2px dashed var(--cm-daycal-color, var(--cm-accent, #1b6ec2));
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--cm-daycal-color, var(--cm-accent, #1b6ec2)) 12%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 3;
}

.cm-daycal-room[b-jqe76kk9ik]  .cm-daycal-ghost.cm-daycal-refused {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
}

.cm-daycal-unshown[b-jqe76kk9ik] {
    margin-top: 0.5rem;
}

/* ---- the dialog: the same look as the application's own (ConfirmDialog.razor.css) ---------- */

.cm-daycal-dialog[b-jqe76kk9ik] {
    padding: 0;
    border: 0;
    background: transparent;
    width: min(30rem, calc(100% - 3rem));
    max-width: none;
    overflow: visible;
}

.cm-daycal-dialog[b-jqe76kk9ik]::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.cm-daycal-dialog-panel[b-jqe76kk9ik] {
    background: var(--cm-surface, #ffffff);
    color: var(--cm-text, #212529);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    padding: 1.25rem 1.5rem 1.5rem;
}

.cm-daycal-dialog-title[b-jqe76kk9ik] {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.cm-daycal-dialog-item[b-jqe76kk9ik] {
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.cm-daycal-field[b-jqe76kk9ik] {
    margin-bottom: 0.75rem;
}

.cm-daycal-field label[b-jqe76kk9ik] {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

.cm-daycal-dialog-error[b-jqe76kk9ik] {
    margin: 0 0 0.75rem;
}

.cm-daycal-dialog-copy[b-jqe76kk9ik] {
    margin: 0 0 1rem;
}

.cm-daycal-dialog-buttons[b-jqe76kk9ik] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.cm-daycal-dialog-buttons .btn[b-jqe76kk9ik] {
    min-width: 6rem;
}

/* ---- a phone: the panels above the calendar ----------------------------------------------- */

@media (max-width: 767.98px) {
    .cm-daycal-body[b-jqe76kk9ik] {
        flex-direction: column;
    }

    .cm-daycal-palette[b-jqe76kk9ik] {
        flex: none;
        width: 100%;
        max-height: 18rem;
        position: static;
    }

    .cm-daycal-main[b-jqe76kk9ik] {
        width: 100%;
    }

    .cm-daycal-select[b-jqe76kk9ik] {
        min-width: 0;
        width: 100%;
    }
}
/* /Components/Shared/HomeDesign.razor.rz.scp.css */
/* The three photos above the heading: one row, always, with nothing between them and
   nothing between the row and the heading below it. */

.cm-hero[b-sjst3hdjdg] {
    display: flex;
    gap: 0;
    /* Kept on one line at every width - three across is the point of the row. */
    flex-wrap: nowrap;
}

.cm-hero img[b-sjst3hdjdg] {
    /* Equal share of the row from a zero basis, so the three photos stay the same width
       whatever their natural sizes are. min-width:0 lets a flex item shrink that far. */
    flex: 1 1 0;
    min-width: 0;

    /* The three differ in aspect ratio, so they are cropped to one common height rather
       than each keeping its own and leaving the row ragged. */
    height: clamp(110px, 17vw, 260px);
    object-fit: cover;

    /* block, or the line box around an inline image adds a few pixels of gap underneath. */
    display: block;
}

/* The word cloud is artwork, not a photograph: cropping it cuts words off, so it is fitted
   whole. Its own background is white like the page's, so the letterboxing does not show.
   Qualified with img so it outweighs the .cm-hero img rule above, which is the more specific
   of the two and would otherwise keep winning. */
.cm-hero img.cm-hero-graphic[b-sjst3hdjdg] {
    object-fit: contain;
}

/* The text sits centred in the gap between the two photo rows. Equal padding above and below
   does that, but only once the heading's own top margin and the paragraph's bottom margin are
   out of the way - those are unequal by default and would push the block off centre.

   The headings inside are the page's own markup, not this component's, so the rules below
   reach them with ::deep. */
.cm-intro[b-sjst3hdjdg] {
    text-align: center;
    padding-block: 2.5rem;
}

/* Centred on both: .cm-intro already centres its contents, and these say so on the elements
   themselves so the rule survives a heading picking up an alignment from elsewhere. Note this
   centres them in the content column, which is the page minus the nav bar - the column's centre
   is not the window's centre while the sidebar is there. */
.cm-intro[b-sjst3hdjdg]  h1 {
    margin-top: 0;
    text-align: center;
}

/* The strapline under the name - an h2 now that the greeting above it is the page's h1. */
.cm-intro[b-sjst3hdjdg]  h2 {
    text-align: center;
}

/* "Welcome To" is the first line of the one heading the page has, and the application's name is
   the second - see .cm-intro-title in app.css. Nothing between them. */
.cm-intro[b-sjst3hdjdg]  .cm-welcome {
    margin-bottom: 0;
}

.cm-intro[b-sjst3hdjdg]  p:last-child {
    margin-bottom: 0;
}

/* The second row, below the text: three photos centred as a group. Unlike the hero strip
   these keep their own proportions, so nothing is cropped. */
.cm-gallery[b-sjst3hdjdg] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    /* Spacing above comes from .cm-intro's padding, so the text stays centred between the rows. */
    margin-top: 0;
}

.cm-gallery img[b-sjst3hdjdg] {
    /* One height for all three - the landscape photo's - with the width following from each
       photo's own aspect ratio, so the two portraits end up narrower rather than cropped. */
    height: clamp(120px, 17vw, 290px);
    width: auto;
    display: block;

    /* Three photos side by side come to about 3.2x their height in width, which is wider than
       the content column on a small screen. Allowing them to shrink keeps the row on one line
       instead of pushing the whole page into a sideways scroll; object-fit then crops rather
       than stretches. At normal widths there is room and nothing is cropped. */
    flex: 0 1 auto;
    min-width: 0;
    object-fit: cover;
}
/* /Components/Shared/HomePageEditor.razor.rz.scp.css */
/* The home page editor: a button on the form, and a panel that opens over the page. */

.cm-homepage[b-ps3wg0sroh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cm-homepage-hint[b-ps3wg0sroh] {
    opacity: 0.7;
    font-style: italic;
}

/* ---- the panel ------------------------------------------------------------------------- */

/* The panel's own rules - .cm-modal and its parts - are in wwwroot/app.css (2026-10-01), shared with
   the Blog tab's editor (Shared/BlogTab.razor). */

/* ---- what the panel holds ---------------------------------------------------------------- */

.cm-homepage-empty[b-ps3wg0sroh] {
    opacity: 0.75;
    font-style: italic;
}

/* The editor gets a working height of its own; the panel's body scrolls around it. */
.cm-homepage-quill[b-ps3wg0sroh] {
    min-height: 22rem;
}

/* Content laid out for reading. Media is held inside the panel rather than allowed to set the
   panel's width, and a table gets its own scroller for the same reason. */
.cm-homepage-view img[b-ps3wg0sroh],
.cm-homepage-view iframe[b-ps3wg0sroh],
.cm-homepage-view video[b-ps3wg0sroh] {
    max-width: 100%;
    height: auto;
}

.cm-homepage-view iframe[b-ps3wg0sroh] {
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 0;
}

.cm-homepage-view table[b-ps3wg0sroh] {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* ---- the pages menu (2026-09-27) --------------------------------------------------------
   For the administrators: which page is open, the order of them all, and the open page's link.
   Above the editor, inside the part of the panel that scrolls. */

.cm-homepages[b-ps3wg0sroh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cm-border, #d6d5d5);
}

.cm-homepages-bar[b-ps3wg0sroh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cm-homepages-bar label[b-ps3wg0sroh] {
    font-weight: 600;
}

/* The tip to the right of Add a New Page. */
.cm-homepages-tip[b-ps3wg0sroh] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
}

.cm-homepages-notice[b-ps3wg0sroh] {
    margin: 0;
    font-weight: 600;
}

/* The pages, in link order: one column, or two from the sixth page on (2026-09-28). */
.cm-homepages-caption[b-ps3wg0sroh] {
    margin: 0 0 0.25rem;
    font-style: italic;
    color: var(--bs-secondary-color, #6c757d);
}

.cm-homepages-list[b-ps3wg0sroh] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 32rem;
    border-top: 1px solid var(--cm-border, #dee2e6);
}

.cm-homepages-list.cm-homepages-two-columns[b-ps3wg0sroh] {
    columns: 2;
    column-gap: 1.5rem;
    max-width: 62rem;
}

/* Each row is picked up by its whole width, opens its page on a double-click or Enter, and is
   never split across the two columns. */
.cm-homepages-row[b-ps3wg0sroh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--cm-border, #dee2e6);
    break-inside: avoid;
    cursor: grab;
}

.cm-homepages-row:focus-visible[b-ps3wg0sroh] {
    outline: 2px solid var(--cm-accent, #1b6ec2);
    outline-offset: -2px;
}

.cm-homepages-position[b-ps3wg0sroh] {
    min-width: 1.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color, #6c757d);
}

.cm-homepages-title[b-ps3wg0sroh] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cm-homepages-row.cm-dragging[b-ps3wg0sroh] {
    opacity: 0.5;
}

.cm-homepages-row.cm-drop-before[b-ps3wg0sroh] {
    box-shadow: inset 0 3px 0 var(--cm-accent, #0d6efd);
}

.cm-homepages-row.cm-drop-after[b-ps3wg0sroh] {
    box-shadow: inset 0 -3px 0 var(--cm-accent, #0d6efd);
}

/* A page listed under another in the header's menu (2026-09-28): indented beneath it. */
.cm-homepages-row.cm-homepages-child[b-ps3wg0sroh] {
    padding-left: 2rem;
}

.cm-homepages-row.cm-homepages-child .cm-homepages-title[b-ps3wg0sroh]::before {
    content: "\21B3";
    margin-right: 0.35rem;
    opacity: 0.6;
}

/* Dropped here, a page goes under this one. */
.cm-homepages-row.cm-drop-into[b-ps3wg0sroh] {
    outline: 2px dashed var(--cm-accent, #0d6efd);
    outline-offset: -2px;
    background: rgba(27, 110, 194, 0.1);
}

/* The page open in the editor. */
.cm-homepages-row.cm-homepages-open[b-ps3wg0sroh] {
    font-weight: 600;
    background: rgba(27, 110, 194, 0.08);
}

.cm-homepages-home[b-ps3wg0sroh] {
    opacity: 0.7;
    font-style: italic;
}

/* The delete icon at the end of each row (2026-09-27), in the danger color; the home page's is
   greyed and says why when pressed. */
.cm-homepages-actions[b-ps3wg0sroh] {
    flex: none;
    width: 2rem;
    text-align: center;
}

.cm-homepages-delete[b-ps3wg0sroh] {
    padding: 0 0.25rem;
    line-height: 1;
    color: var(--bs-danger, #dc3545);
    cursor: pointer;
}

.cm-homepages-delete[aria-disabled="true"][b-ps3wg0sroh] {
    color: var(--cm-text, #212529);
    opacity: 0.35;
    cursor: not-allowed;
}

.cm-homepages-trash[b-ps3wg0sroh] {
    width: 1rem;
    height: 1rem;
    display: block;
}

.cm-homepages-error[b-ps3wg0sroh] {
    margin: 0;
}

/* The open page's Link Title and Link URL, side by side where there is room. */
.cm-homepages-fields[b-ps3wg0sroh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cm-homepages-fields .cm-field[b-ps3wg0sroh] {
    flex: 1 1 14rem;
}

/* ---- the layout and the two menus, in a panel that folds away (2026-09-30) -------------------- */
.cm-homepages-panel[b-ps3wg0sroh] {
    border: 1px solid var(--cm-border, #dee2e6);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem 0.75rem;
}

.cm-homepages-panel > summary[b-ps3wg0sroh] {
    cursor: pointer;
    padding: 0.35rem 0;
    font-weight: 700;
}

/* The header, the footer and the sidebars, side by side: a box and a background each. */
.cm-homepages-layout[b-ps3wg0sroh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    align-items: flex-start;
    margin: 0.25rem 0 0.75rem;
}

.cm-layout-part[b-ps3wg0sroh] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 11rem;
}

.cm-layout-label[b-ps3wg0sroh] {
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: 0.15rem;
}

.cm-layout-status[b-ps3wg0sroh] {
    flex-basis: 100%;
    margin: 0;
    min-height: 1.2em;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
}

.cm-layout-status.cm-layout-failed[b-ps3wg0sroh] {
    color: var(--cm-bad, #c62828);
}

/* The header's menu and the sidebar's, side by side; one above the other on a narrow screen. */
.cm-homepages-menus[b-ps3wg0sroh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
}

@media (max-width: 767.98px) {
    .cm-homepages-menus[b-ps3wg0sroh] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cm-homepages-menu-title[b-ps3wg0sroh] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
}

.cm-homepages-menus .cm-homepages-list[b-ps3wg0sroh] {
    max-width: none;
    min-height: 2.6rem;
}

/* An empty menu is still somewhere to drop a page, and says so. */
.cm-homepages-menus .cm-homepages-list:empty[b-ps3wg0sroh] {
    border: 1px dashed var(--cm-border, #dee2e6);
    border-radius: 0.35rem;
}

.cm-homepages-menus .cm-homepages-list:empty[b-ps3wg0sroh]::before {
    content: "Drag a page here";
    display: block;
    padding: 0.6rem 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

.cm-homepages-menus .cm-homepages-list.cm-drop-end[b-ps3wg0sroh] {
    outline: 2px dashed var(--cm-accent, #1b6ec2);
    outline-offset: 2px;
}

/* What the footer is, above its editor (2026-10-01: "Add a footer editor"). */
.cm-homepages-footer-tip[b-ps3wg0sroh] {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* The footer's social media icons, under its editor (2026-10-01): shown, not edited. The icons come
   from Shared/SocialIconLinks.razor, hence ::deep. */
.cm-homepages-footer-social[b-ps3wg0sroh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
}

.cm-homepages-footer-social[b-ps3wg0sroh]  .cm-homepages-footer-icons {
    display: flex;
    gap: 0.75rem;
}

.cm-homepages-footer-social[b-ps3wg0sroh]  .cm-homepages-footer-icons a {
    color: var(--cm-text, #212529);
}

.cm-homepages-footer-social[b-ps3wg0sroh]  .cm-homepages-footer-icons svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: currentColor;
}
/* /Components/Shared/HomeSignOff.razor.rz.scp.css */
/* The sign-off closing a home page, as the first line of the page footer (2026-09-27; it sat
   under the content before). Centered like the footer's other lines, at the footer's own size,
   and set apart from the legal links under it by the italic: it names who runs the service
   rather than linking anywhere. */
.cm-system-footer[b-c27ld5yege] {
    margin: 0;
    text-align: center;
    font-style: italic;
    font-weight: 600;
    opacity: 0.85;
}
/* /Components/Shared/ItemDetailAdmin.razor.rz.scp.css */
/* This component draws its own grids, so it needs its own copy of the few rules they use. The
   pages that host it define the same ones, but scoped CSS is scoped to the file whose markup it
   came from: a rule written in EventProfile.razor.css carries that page's attribute and never
   matches a row this component rendered. That is why the delete button here was a bare rectangle
   until 2026-09-22 - the button was there, the bin was not. */

.cm-trash[b-93ivagk0o0] {
    line-height: 1;
    padding: 0.2rem 0.55rem;
}

/* The nav's .bi icons are white SVGs painted as backgrounds - right on the dark sidebar and
   invisible on a table row - and there is no bin among them. This is the Bootstrap Icons bin
   drawn as a mask, so the shape takes the button's own color. */
.cm-trash-icon[b-93ivagk0o0] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--cm-trash-mask);
    mask-image: var(--cm-trash-mask);
    --cm-trash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'/%3E%3C/svg%3E");
}

/* The eight Include flags on the master list form (2026-09-30), set a little apart from the boxes
   above them. */
.cm-include-flags[b-93ivagk0o0] {
    margin-top: 0.5rem;
}
/* /Components/Shared/MergeFieldsTab.razor.rz.scp.css */
/* The merge field catalogue. A wide, text-heavy grid, so the columns are fixed and the long
   ones wrap rather than pushing the table sideways. */

.cm-mergefields[b-nw10mvnqox] {
    max-width: 90rem;
}

.cm-mergebar[b-nw10mvnqox] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cm-mergebar select[b-nw10mvnqox],
.cm-mergebar input[b-nw10mvnqox] {
    width: auto;
    min-width: 12rem;
}

.cm-mergegrid[b-nw10mvnqox] {
    table-layout: fixed;
    width: 100%;
}

.cm-w-mfgroup[b-nw10mvnqox] { width: 11%; }
.cm-w-mflabel[b-nw10mvnqox] { width: 24%; }
.cm-w-mfinsert[b-nw10mvnqox] { width: 22%; }
.cm-w-mfeditors[b-nw10mvnqox] { width: 33%; }
.cm-w-mfactive[b-nw10mvnqox] { width: 10%; }

.cm-mergegrid code[b-nw10mvnqox] {
    font-size: 0.9em;
    word-break: break-word;
}

/* Marks the few fields that insert text there and then rather than a token, since the two read
   alike in a list and behave nothing alike. */
.cm-mergekind[b-nw10mvnqox] {
    display: inline-block;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.35rem;
    margin-right: 0.35rem;
    border-radius: 0.25rem;
    background: var(--cm-muted, #adb5bd);
    color: #ffffff;
}

.cm-mergenote[b-nw10mvnqox] {
    font-size: 0.9em;
    opacity: 0.85;
}

.cm-count[b-nw10mvnqox] {
    margin-left: auto;
    opacity: 0.8;
}

/* The tick list of editors on the form: a box each, boxed off so it reads as one answer. */
.cm-mergeeditors[b-nw10mvnqox] {
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
    border-radius: 0.375rem;
}

.cm-mergeeditors legend[b-nw10mvnqox] {
    font-size: 0.95rem;
    font-weight: 600;
    width: auto;
    padding: 0 0.35rem;
    margin: 0;
}

/* Delete sits apart from Save and Cancel: it is not another way of finishing the form. */
.cm-mergedelete[b-nw10mvnqox] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cm-border, rgba(0, 0, 0, 0.12));
}

/* A label beside its box rather than above it, for the one short number on the form. */
.cm-inline[b-nw10mvnqox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cm-inline .cm-short[b-nw10mvnqox] {
    width: 6rem;
}

/* The row open in the form. */
.cm-mergegrid tbody tr[b-nw10mvnqox] {
    cursor: pointer;
}

/* The field's form is a boxed section, as on the rest of the profile it now sits on (2026-10-01).
   A scoped copy, since the profile's own rules carry the profile's scope and not this tab's. */
.cm-section[b-nw10mvnqox] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-nw10mvnqox] {
    float: none;
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

.cm-field[b-nw10mvnqox] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-nw10mvnqox] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}
/* /Components/Shared/NewOrganizationForm.razor.rz.scp.css */
/* The boxed-form look, copied from OrganizationProfile.razor.css: scoped styles are per
   component, and without its own copy this form's fieldset renders as a bare Bootstrap one. */

.cm-section[b-lfpa5qadpq] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
    max-width: 40rem;
}

.cm-section > legend[b-lfpa5qadpq] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

.cm-field[b-lfpa5qadpq] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-lfpa5qadpq] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

/* Add Organization and Cancel, under the fields. */
.cm-formbar[b-lfpa5qadpq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}
/* /Components/Shared/OrganizationHomeView.razor.rz.scp.css */
/* An organization's home page. The heading lines sit inside HomeDesign's .cm-intro, which
   centres them; these only size them. Everything here is centred, as asked: "all centered on
   the page". */

.cm-site-welcome[b-riw1exwhqr] {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
}

.cm-site-name[b-riw1exwhqr] {
    margin-bottom: 0.5rem;
}

.cm-site-presenter[b-riw1exwhqr] {
    font-style: italic;
    opacity: 0.85;
}

.cm-site-tagline[b-riw1exwhqr] {
    margin-top: 0.75rem;
}

/* The two event lists, under the heading. No bullets: a centred bulleted list puts its bullets
   wherever each line happens to start. */
.cm-site-events[b-riw1exwhqr] {
    margin-top: 1.75rem;
    text-align: center;
}

.cm-site-list[b-riw1exwhqr] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cm-site-list li[b-riw1exwhqr] {
    margin-bottom: 0.5rem;
}

.cm-site-list a[b-riw1exwhqr] {
    font-weight: 600;
}

/* The dates on a line of their own under the title, quieter than it. */
.cm-site-dates[b-riw1exwhqr] {
    display: block;
    font-size: 0.9em;
    opacity: 0.8;
}

.cm-site-none[b-riw1exwhqr] {
    font-style: italic;
    opacity: 0.8;
}

/* Under a page the organization wrote itself, the lists get the room .cm-intro would have
   given them. */
.cm-site-events-block[b-riw1exwhqr] {
    padding-block: 1.5rem 2.5rem;
}

/* The heading and lists in place of the name and tag line of the site's stored page: centred,
   with the room HomeDesign's .cm-intro gives them on the built-in page. */
.cm-site-intro[b-riw1exwhqr] {
    text-align: center;
    padding-block: 2.5rem;
}

/* The organization's own home page, rendered as written - the same rules as the site's home
   page. ::deep because the content is markup, not this component's elements. Images are held to
   the column so a wide one cannot push the page sideways, and video keeps its shape. */
.cm-homepage-content[b-riw1exwhqr] {
    line-height: 1.6;
}

.cm-homepage-content[b-riw1exwhqr]  img,
.cm-homepage-content[b-riw1exwhqr]  iframe {
    max-width: 100%;
}

.cm-homepage-content[b-riw1exwhqr]  iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}
/* /Components/Shared/PaymentProcessingTab.razor.rz.scp.css */
/* Organization 0's Payment Processing tab (2026-10-07): each box drawn as a legend box, as the System Settings tab's
   are ("Put Legend boxes around Admin Fees & Payment types"). A component's styles are its own, so the profile's
   .cm-section rules don't reach it; these are the System Settings tab's. */

.cm-payment-processing[b-5bx4lw3c2b] {
    font-size: 0.8em;
}

.cm-section[b-5bx4lw3c2b] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-5bx4lw3c2b] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

.cm-field[b-5bx4lw3c2b] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-5bx4lw3c2b] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

.cm-payment-processing .form-control[b-5bx4lw3c2b] {
    font-size: 1em;
    padding: 0.25rem 0.5rem;
    height: auto;
    min-height: 0;
    line-height: 1.35;
}

.cm-payment-processing .form-text[b-5bx4lw3c2b] {
    font-size: 0.9em;
    margin-top: 0.1rem;
}

.cm-payment-processing .btn[b-5bx4lw3c2b] {
    font-size: 1em;
}

.cm-short[b-5bx4lw3c2b] {
    max-width: 7rem;
}

.cm-num[b-5bx4lw3c2b] {
    text-align: right;
}

.cm-num .cm-short[b-5bx4lw3c2b] {
    margin-left: auto;
    text-align: right;
}

.cm-admin-fee-by-category > caption[b-5bx4lw3c2b] {
    caption-side: top;
    padding-top: 0.75rem;
    font-weight: 600;
    color: inherit;
}

.cm-payment-types td[b-5bx4lw3c2b],
.cm-admin-fee-by-category td[b-5bx4lw3c2b] {
    vertical-align: middle;
}
/* /Components/Shared/PressPanels.razor.rz.scp.css */
/* The Press page (2026-10-08): a panel a month, one under another, as the blog's panels are. */
.cm-press[b-bvwlhu1am8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block: 1rem;
}

.cm-press-month[b-bvwlhu1am8] {
    border: 1px solid var(--cm-border, rgba(0, 0, 0, 0.15));
    border-radius: 0.5rem;
    background: var(--cm-raised, transparent);
}

/* The month and how many: the whole line opens and closes it, with an arrow that turns. */
.cm-press-month > summary[b-bvwlhu1am8] {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
}

.cm-press-month > summary[b-bvwlhu1am8]::-webkit-details-marker {
    display: none;
}

.cm-press-month > summary[b-bvwlhu1am8]::before {
    content: "\25B8";
    display: inline-block;
    transition: transform 0.15s ease;
}

.cm-press-month[open] > summary[b-bvwlhu1am8]::before {
    transform: rotate(90deg);
}

.cm-press-month-title[b-bvwlhu1am8] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1.1em;
}

.cm-press-month-count[b-bvwlhu1am8] {
    font-size: 0.9em;
    opacity: 0.75;
}

.cm-press-list[b-bvwlhu1am8] {
    list-style: none;
    margin: 0;
    padding: 0 0.9rem 0.6rem;
}

.cm-press-release[b-bvwlhu1am8] {
    padding: 0.75rem 0;
    border-top: 1px solid var(--cm-border, rgba(0, 0, 0, 0.1));
}

.cm-press-release-head[b-bvwlhu1am8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
}

.cm-press-not-public[b-bvwlhu1am8] {
    font-size: 0.8em;
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 0.25rem;
    background: #fff3cd;
    color: #664d03;
}

.cm-press-summary[b-bvwlhu1am8] {
    margin-block: 0.35rem 0.5rem;
}

.cm-press-add[b-bvwlhu1am8] {
    margin-block: 0.5rem 1rem;
}

.cm-press-show-more[b-bvwlhu1am8] {
    align-self: center;
    margin-top: 0.5rem;
}

.cm-press-none[b-bvwlhu1am8] {
    font-style: italic;
    opacity: 0.8;
}

/* The preview window: tall enough to read a page, the PDF filling it below its head. */
.cm-press-viewer[b-bvwlhu1am8] {
    width: min(64rem, 100%);
    height: min(90vh, 70rem);
    max-height: none;
}

.cm-press-viewer-body[b-bvwlhu1am8] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.cm-press-frame[b-bvwlhu1am8] {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    background: #525659;
}
/* /Components/Shared/PressTab.razor.rz.scp.css */
/* Organization 0's Press tab (2026-10-08): the grid, and the release's panel - as the Blog tab's. */
.cm-presstab-bar[b-6oii0pjpvf] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cm-presstab-grid th[b-6oii0pjpvf],
.cm-presstab-grid td[b-6oii0pjpvf] {
    vertical-align: top;
}

.cm-presstab-delete[b-6oii0pjpvf] {
    width: 3rem;
    text-align: center;
}

.cm-presstab-trash[b-6oii0pjpvf] {
    padding: 0 0.25rem;
    color: var(--bs-danger, #dc3545);
}

.cm-presstab-trash-icon[b-6oii0pjpvf] {
    width: 1rem;
    height: 1rem;
}

.cm-presstab-fields[b-6oii0pjpvf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 1.5rem;
}

.cm-presstab-fields .cm-field[b-6oii0pjpvf] {
    min-width: 12rem;
}

.cm-presstab-quill[b-6oii0pjpvf] {
    min-height: 12rem;
}

.cm-presstab-current[b-6oii0pjpvf] {
    margin-bottom: 0.35rem;
}

.cm-presstab-foot[b-6oii0pjpvf] {
    padding: 0 1rem 1rem;
}
/* /Components/Shared/StockEmailsTab.razor.rz.scp.css */
/* The stock email page: a grid of the emails with the editor beneath it. */

.cm-stock[b-93aotdqp8u] {
    font-size: 0.95em;
}

.cm-stockbar[b-93aotdqp8u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cm-count[b-93aotdqp8u],
.cm-hint[b-93aotdqp8u] {
    opacity: 0.75;
}

.cm-hint[b-93aotdqp8u] {
    font-style: italic;
}

.cm-grid-scroll[b-93aotdqp8u] {
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.cm-grid[b-93aotdqp8u] {
    table-layout: fixed;
}

    .cm-grid th[b-93aotdqp8u] {
        white-space: nowrap;
    }

    .cm-grid td[b-93aotdqp8u] {
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    /* The whole cell is the link, so the row reads as one target rather than as two words that
       happen to be clickable. */
    .cm-grid td a[b-93aotdqp8u] {
        display: block;
        color: inherit;
        text-decoration: none;
    }

    .cm-grid tbody tr:hover td[b-93aotdqp8u] {
        background-color: var(--cm-raised, #f7f7f7);
    }

/* The row currently open in the editor below. */
.cm-grid tbody tr.cm-selected > td[b-93aotdqp8u] {
    background-color: var(--cm-accent, #1b6ec2);
    color: var(--cm-accent-text, #ffffff);
}

.cm-num[b-93aotdqp8u] {
    text-align: right;
}

.cm-preview[b-93aotdqp8u] {
    opacity: 0.8;
}

.cm-empty[b-93aotdqp8u] {
    opacity: 0.75;
    font-style: italic;
}

/* The editor. Quill gives its container no height of its own, and an email is a document, so
   this is taller than the editors that sit inside a form as one field among many. */
.cm-stock[b-93aotdqp8u]  .cm-quill,
.cm-stock .cm-quill[b-93aotdqp8u] {
    min-height: 24rem;
    background-color: var(--cm-surface, #ffffff);
    color: var(--cm-text, #212529);
}

.cm-stock[b-93aotdqp8u]  .ql-toolbar,
.cm-stock[b-93aotdqp8u]  .ql-container {
    border-color: var(--cm-border, #d6d5d5);
}

.cm-stock[b-93aotdqp8u]  .cm-quill-value {
    display: none;
}

/* The merge dropdown carries long labels - "Emergency Contact Phone Number" - so it is given
   room rather than being clipped to the width of the toolbar's other controls. */
.cm-stock[b-93aotdqp8u]  .cm-merge {
    max-width: 14rem;
}

.cm-section[b-93aotdqp8u] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
}

    .cm-section > legend[b-93aotdqp8u] {
        width: auto;
        padding: 0 0.4rem;
        font-size: 1rem;
        font-weight: 600;
    }

.cm-field[b-93aotdqp8u] {
    margin-bottom: 0.5rem;
}

    .cm-field > label[b-93aotdqp8u] {
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.95em;
        opacity: 0.85;
    }

.cm-stockdelete[b-93aotdqp8u] {
    margin-top: 1.5rem;
}

/* The Do Not Delete column: a box set right in the grid, centred under its heading. */
.cm-flag-cell[b-93aotdqp8u] {
    text-align: center;
}

.cm-grid .cm-flag[b-93aotdqp8u] {
    float: none;
    margin: 0;
    cursor: pointer;
}

/* The one-per-row forms the boxes post carry nothing visible. */
.cm-hiddenform[b-93aotdqp8u] {
    margin: 0;
}

/* Their fallback submit. wwwroot/js/venue-form.js submits on change and marks the document, so
   this is only ever seen by a browser that did not run it. */
html.cm-js .cm-nojs[b-93aotdqp8u] {
    display: none;
}

.cm-nojs[b-93aotdqp8u] {
    font-size: 0.75em;
    padding: 0.1rem 0.4rem;
}

/* Why the delete button is greyed out, beside it. */
.cm-stockdelete .cm-hint[b-93aotdqp8u] {
    margin-left: 0.75rem;
}
/* /Components/Shared/SystemSettingsTab.razor.rz.scp.css */
/* The system settings form: compact fields, and each section boxed with its title sitting on
   the top-left of the border. A fieldset/legend pair gives that natively, so the border break
   behind the title is the browser's own rather than something faked with a background color. */

.cm-settings[b-lib7kq441d] {
    font-size: 0.8em;
}

.cm-section[b-lib7kq441d] {
    border: 1px solid var(--cm-border, #d6d5d5);
    border-radius: 0.375rem;
    padding: 0.25rem 0.9rem 0.6rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cm-section > legend[b-lib7kq441d] {
    float: none;              /* Bootstrap makes legends full-width block elements; undo that */
    width: auto;
    padding: 0 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
}

.cm-field[b-lib7kq441d] {
    margin-bottom: 0.5rem;
}

.cm-field > label[b-lib7kq441d] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95em;
    opacity: 0.85;
}

/* ::deep because the inputs are rendered by InputText/InputSelect, which are child components
   and so carry their own scope identifier rather than this page's. */
.cm-settings[b-lib7kq441d]  .form-control,
.cm-settings[b-lib7kq441d]  .form-select {
    font-size: 1em;
    padding: 0.25rem 0.5rem;
    height: auto;
    min-height: 0;
    line-height: 1.35;
}

.cm-settings[b-lib7kq441d]  .form-check {
    margin-bottom: 0.5rem;
}

.cm-settings[b-lib7kq441d]  .form-text {
    font-size: 0.9em;
    margin-top: 0.1rem;
}

.cm-settings[b-lib7kq441d]  .validation-message {
    font-size: 0.9em;
}

.cm-settings[b-lib7kq441d]  .btn {
    font-size: 1em;
}


/* ---- System Administrators grid --------------------------------------- */

/* The add row and the filter row are separate forms, so each is its own flex line. */
.cm-adminbar[b-lib7kq441d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* The button, the dropdown and its two buttons all belong on one line, so this inner group
   does not wrap even though the bar around it may. */
.cm-adminnew[b-lib7kq441d] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* .cm-adminnew sets display:flex at (0,1,0), which would win over the browser's own
   [hidden] rule and leave the row visible. Qualified to (0,2,0) so hidden still means
   hidden - the same specificity trap that .cm-hero-graphic fell into. */
.cm-adminbar [hidden][b-lib7kq441d] {
    display: none;
}

/* Bootstrap's .form-select is width:100%, which in a flex row makes the dropdown claim the
   whole line and pushes Save and Cancel onto the next one. Sized to its content instead. */
.cm-admins select.form-select[b-lib7kq441d] {
    width: auto;
    min-width: 16rem;
    max-width: 28rem;
}

/* Wrappers for a post, with nothing of their own to show. */
.cm-rowform[b-lib7kq441d] {
    margin: 0;
}

.cm-grid-scroll[b-lib7kq441d] {
    overflow-x: auto;
}

.cm-grid[b-lib7kq441d] {
    font-size: 1em;
    margin-bottom: 0.25rem;
}

.cm-grid th[b-lib7kq441d] {
    white-space: nowrap;
}

.cm-grid td[b-lib7kq441d] {
    vertical-align: middle;
    white-space: nowrap;
}

/* The heading is the sort control, so it should not read as body text. */
.cm-grid thead a[b-lib7kq441d] {
    color: inherit;
    text-decoration: none;
}

.cm-grid thead a:hover[b-lib7kq441d] {
    text-decoration: underline;
}

.cm-sorted[b-lib7kq441d] {
    font-weight: 700;
}

.cm-arrow[b-lib7kq441d] {
    opacity: 0.7;
}

/* The filter row sits under the headings; its inputs should not inflate the row height. */
.cm-filters th[b-lib7kq441d] {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
}

.cm-admins .form-control[b-lib7kq441d],
.cm-admins .form-select[b-lib7kq441d] {
    font-size: 1em;
    padding: 0.15rem 0.35rem;
    height: auto;
    min-height: 0;
    line-height: 1.3;
}

.cm-num[b-lib7kq441d] {
    text-align: right;
}

.cm-actions[b-lib7kq441d] {
    text-align: right;
    white-space: nowrap;
}

/* The administrators grid honours the widths declared in its <colgroup>. Without this the table
   lays itself out from its content and treats those percentages as suggestions - the delete
   column came out at 8% of the table rather than the share it was given. */
.cm-admins .cm-grid[b-lib7kq441d] {
    table-layout: fixed;
}

/* The delete button is a bin rather than the word Delete. Sized and padded so the button stays
   a comfortable target - an icon button that shrinks to the glyph is hard to hit - and the
   glyph itself takes the button's color, so the outline-danger styling still reaches it. */
.cm-delete[b-lib7kq441d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.45rem;
    line-height: 1;
}

    .cm-delete svg[b-lib7kq441d] {
        width: 0.95rem;
        height: 0.95rem;
        fill: currentColor;
    }

.cm-count[b-lib7kq441d] {
    opacity: 0.75;
}

.cm-empty[b-lib7kq441d] {
    opacity: 0.75;
    font-style: italic;
}

/* ---- On organization 0's profile (2026-10-01) ------------------------------------------ */

/* The tab's own two tabs sit under the profile's, a step in from them. */
.cm-settings-tabs[b-lib7kq441d] {
    margin-bottom: 0.75rem;
}

/* Where the paired settings went, said once at the top of the box. */
.cm-settings-pairs[b-lib7kq441d] {
    margin: 0 0 0.6rem;
}

.cm-categories .cm-grid[b-lib7kq441d] {
    margin-bottom: 0.5rem;
}