@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

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

main[b-137228am7a] {
    flex: 1;
    /* No overflow / min-width: 0 here. Clipping main (or a wrapper inside it)
       makes a wide QuickGrid scroll in its own box, whose horizontal
       scrollbar ends up at the bottom of a very tall grid. Instead a wide
       grid widens the page (see .page below) so the browser's own scrollbar
       is used, and the sidebar stays pinned with sticky left: 0. */
}

.sidebar[b-137228am7a] {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    background-image: var(--my-sidebar-color);
}

.top-row[b-137228am7a] {
    /*background-color: #f7f7f7;*/
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

@media (min-width: 641px) {
    .page[b-137228am7a] {
        flex-direction: row;
        /* Normally the viewport width, but grows to fit content that can't
           shrink (wide grids), so the sidebar's sticky range covers the
           whole horizontal scroll. */
        width: fit-content;
        min-width: 100%;
    }

    .sidebar[b-137228am7a] {
        width: 270px;
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 10;   /* above sticky grid headers (z 2) when the page scrolls sideways */
    }

    .top-row[b-137228am7a] {
        position: sticky;
        top: 0;
        z-index: 3;    /* above sticky grid headers too */
    }

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

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

#blazor-error-ui[b-137228am7a] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-137228am7a] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-4clhzikofs] {
    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-4clhzikofs] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

.header-logo[b-4clhzikofs] {
    background: url('Images/wakr_logo_sm.png') no-repeat center;
    background-size: contain;
    height: 32px;
    width: 32px;
}

.navbar-brand[b-4clhzikofs] {
    font-size: 1.1rem;
    color: rgba(255, 209, 0);
}

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

.bi-shield-exclamation-nav-menu[b-4clhzikofs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-shield-exclamation' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z'/%3E%3C/svg%3E");
}


.bi-tools-nav-menu[b-4clhzikofs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-tools' viewBox='0 0 16 16'%3E%3Cpath d='M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'/%3E%3C/svg%3E");
}

.bi-person-vcard-fill-nav-menu[b-4clhzikofs] {
    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-vcard-fill' 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-2zm9 1.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5M9 8a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1h-4A.5.5 0 0 0 9 8m1 2.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5m-1 2C9 10.567 7.21 9 5 9c-2.086 0-3.8 1.398-3.984 3.181A1 1 0 0 0 2 13h6.96q.04-.245.04-.5M7 6a2 2 0 1 0-4 0 2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}

.bi-calendar-event-fill-nav-menu[b-4clhzikofs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-calendar-event-fill' viewBox='0 0 16 16'%3E%3Cpath d='M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

.bi-envelope-at-fill-nav-menu[b-4clhzikofs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-envelope-at-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 2A2 2 0 0 0 .05 3.555L8 8.414l7.95-4.859A2 2 0 0 0 14 2zm-2 9.8V4.698l5.803 3.546zm6.761-2.97-6.57 4.026A2 2 0 0 0 2 14h6.256A4.5 4.5 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586zM16 9.671V4.697l-5.803 3.546.338.208A4.5 4.5 0 0 1 12.5 8c1.414 0 2.675.652 3.5 1.671'/%3E%3Cpath d='M15.834 12.244c0 1.168-.577 2.025-1.587 2.025-.503 0-1.002-.228-1.12-.648h-.043c-.118.416-.543.643-1.015.643-.77 0-1.259-.542-1.259-1.434v-.529c0-.844.481-1.4 1.26-1.4.585 0 .87.333.953.63h.03v-.568h.905v2.19c0 .272.18.42.411.42.315 0 .639-.415.639-1.39v-.118c0-1.277-.95-2.326-2.484-2.326h-.04c-1.582 0-2.64 1.067-2.64 2.724v.157c0 1.867 1.237 2.654 2.57 2.654h.045c.507 0 .935-.07 1.18-.18v.731c-.219.1-.643.175-1.237.175h-.044C10.438 16 9 14.82 9 12.646v-.214C9 10.36 10.421 9 12.485 9h.035c2.12 0 3.314 1.43 3.314 3.034zm-4.04.21v.227c0 .586.227.8.581.8.31 0 .564-.17.564-.743v-.367c0-.516-.275-.708-.572-.708-.346 0-.573.245-.573.791'/%3E%3C/svg%3E");
}

.bi-house-door-fill-nav-menu[b-4clhzikofs] {
    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-question-circle-fill-nav-menu[b-4clhzikofs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-question-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.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.286a.237.237 0 0 0 .236.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927'/%3E%3C/svg%3E");
}

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

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

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

.bi-person-nav-menu[b-4clhzikofs] {
    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-4clhzikofs] {
    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-4clhzikofs] {
    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-4clhzikofs] {
    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");
}

.bi-people-fill[b-4clhzikofs] {
    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-lines-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'%3E%3C/path%3E%3C/svg%3E");
    /*display: inline-block;
    width: 16px;*/ /* Set the size of the icon */
    /*height: 16px;*/ /* Set the size of the icon */
    /*background-size: contain;*/ /* Ensure the SVG fits the container */
    /*background-repeat: no-repeat;*/
}

/* Org Entries — building */
.bi-building-nav-menu[b-4clhzikofs] {
    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 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%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-1V1Zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1Z'/%3E%3C/svg%3E");
}

/* Finance Summary — bar chart */
.bi-bar-chart-nav-menu[b-4clhzikofs] {
    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='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2z'/%3E%3C/svg%3E");
}

.bi-people-nav-menu[b-4clhzikofs] {
    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 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3Cpath fill-rule='evenodd' d='M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z'/%3E%3Cpath d='M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}

/* AKR Submissions — send/paper plane */
.bi-send-nav-menu[b-4clhzikofs] {
    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.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z'/%3E%3C/svg%3E");
}

.bi-broadcast-nav-menu[b-4clhzikofs] {
    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='M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.707.707 5 5 0 0 1 0-7.07.5.5 0 0 1 .707.707m5.656-.707a.5.5 0 0 1 .707 0 5 5 0 0 1 0 7.07.5.5 0 0 1-.707-.707 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.707m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: text-bottom;
}

.bi-kendo-nav-menu[b-4clhzikofs] {
    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 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: text-bottom;
}

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Additional nav icons (distinct per menu item) ---------- */
.bi-credit-card-nav-menu[b-4clhzikofs] {
    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-2zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z'/%3E%3Cpath d='M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.bi-megaphone-nav-menu[b-4clhzikofs] {
    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='M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0zm-1 .724c-2.067.95-4.539 1.481-7 1.656v6.237a25 25 0 0 1 1.088.085c2.053.204 4.038.668 5.912 1.56zm-8 7.841V4.934c-.68.027-1.399.043-2.008.053A2.02 2.02 0 0 0 0 7v2c0 1.106.896 2.02 2.008 2.02.529 0 1.267.017 2.008.053zM3 15.323V11.5H1.98A2.5 2.5 0 0 0 3 15.323'/%3E%3C/svg%3E");
}
.bi-translate-nav-menu[b-4clhzikofs] {
    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.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z'/%3E%3Cpath d='M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31'/%3E%3C/svg%3E");
}
.bi-calendar3-nav-menu[b-4clhzikofs] {
    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='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}
.bi-calendar-check-nav-menu[b-4clhzikofs] {
    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 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-5.146-5.146-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708'/%3E%3C/svg%3E");
}
.bi-trophy-nav-menu[b-4clhzikofs] {
    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='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935'/%3E%3C/svg%3E");
}
.bi-file-text-nav-menu[b-4clhzikofs] {
    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.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zm0 2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zm0 2a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z'/%3E%3C/svg%3E");
}
.bi-search-nav-menu[b-4clhzikofs] {
    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='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
}
.bi-cash-nav-menu[b-4clhzikofs] {
    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 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3Cpath d='M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.bi-cash-stack-nav-menu[b-4clhzikofs] {
    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='M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3Cpath d='M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.bi-archive-nav-menu[b-4clhzikofs] {
    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.643 15C13.979 15 15 13.845 15 12.5V5H1v7.5C1 13.845 2.021 15 3.357 15zM5.5 7h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1M.8 1a.8.8 0 0 0-.8.8V3a.8.8 0 0 0 .8.8h14.4A.8.8 0 0 0 16 3V1.8a.8.8 0 0 0-.8-.8z'/%3E%3C/svg%3E");
}
.bi-gear-nav-menu[b-4clhzikofs] {
    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-.872zM8 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-box-arrow-in-right-nav-menu[b-4clhzikofs] {
    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='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z'/%3E%3Cpath fill-rule='evenodd' d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E");
}

/* Ensure the new icons size correctly even if the base .bi rule is overridden. */
.bi-credit-card-nav-menu[b-4clhzikofs],
.bi-megaphone-nav-menu[b-4clhzikofs],
.bi-translate-nav-menu[b-4clhzikofs],
.bi-calendar3-nav-menu[b-4clhzikofs],
.bi-calendar-check-nav-menu[b-4clhzikofs],
.bi-trophy-nav-menu[b-4clhzikofs],
.bi-file-text-nav-menu[b-4clhzikofs],
.bi-search-nav-menu[b-4clhzikofs],
.bi-cash-nav-menu[b-4clhzikofs],
.bi-cash-stack-nav-menu[b-4clhzikofs],
.bi-archive-nav-menu[b-4clhzikofs],
.bi-gear-nav-menu[b-4clhzikofs],
.bi-box-arrow-in-right-nav-menu[b-4clhzikofs] {
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: text-bottom;
}

/* Bootstrap Icons font glyphs (bootstrap-icons.css is loaded in App.razor), sized and coloured
   to sit alongside the SVG background icons above. */
.bi.nav-font-icon[b-4clhzikofs] {
    background: none;
    color: white;
    font-size: 1.1rem;
    line-height: 1.25rem;
    text-align: center;
}

.bi.nav-font-icon[b-4clhzikofs]::before {
    vertical-align: top;
}

/* ---------- Collapsible nav groups ---------- */
.nav-group[b-4clhzikofs] {
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* The toggle checkbox is hidden; the header <label> drives it. */
.nav-group-toggle[b-4clhzikofs] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.nav-group-header[b-4clhzikofs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.6rem 1.5rem;
    color: #b9c2cc;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
}

    .nav-group-header:hover[b-4clhzikofs] {
        color: #fff;
        background-color: rgba(255,255,255,0.06);
    }

.nav-group-title[b-4clhzikofs] {
    flex: 1 1 auto;
}

/* Caret: a small chevron that points right when closed, down when open. */
.nav-group-caret[b-4clhzikofs] {
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg); /* points right (collapsed) */
    transition: transform 0.15s ease;
    margin-left: 0.25rem;
}

.nav-group-toggle:checked ~ .nav-group-header .nav-group-caret[b-4clhzikofs] {
    transform: rotate(45deg); /* points down (expanded) */
}

/* Items are hidden until the group's checkbox is checked. */
.nav-group-items[b-4clhzikofs] {
    display: none;
}

.nav-group-toggle:checked ~ .nav-group-items[b-4clhzikofs] {
    display: block;
}

/* Tighten spacing for items inside a group. */
.nav-group-items[b-4clhzikofs]  .nav-link {
    height: 2.6rem;
    line-height: 2.6rem;
}

.nav-group-items .nav-item:first-of-type[b-4clhzikofs] {
    padding-top: 0.25rem;
}

.nav-group-items .nav-item:last-of-type[b-4clhzikofs] {
    padding-bottom: 0.5rem;
}

/* ---------- Where you are: WAKR yellow marks the open group and the current page ---------- */
/* Open group: heading (title, caret and icon) in WAKR yellow, and a yellow rail down its left edge. */
.nav-group:has(> .nav-group-toggle:checked)[b-4clhzikofs] {
    box-shadow: inset 3px 0 0 var(--my-yellow-color, #ffd100);
    background-color: rgba(255,255,255,0.03);
}

.nav-group-toggle:checked ~ .nav-group-header[b-4clhzikofs] {
    color: var(--my-yellow-color, #ffd100);
}

    /* SVG icons are drawn white; this filter turns white into WAKR yellow (#ffd100). */
    .nav-group-toggle:checked ~ .nav-group-header .bi:not(.nav-font-icon)[b-4clhzikofs] {
        filter: brightness(0) saturate(100%) invert(79%) sepia(66%) saturate(1500%) hue-rotate(359deg) brightness(104%) contrast(104%);
    }

    .nav-group-toggle:checked ~ .nav-group-header .bi.nav-font-icon[b-4clhzikofs] {
        color: var(--my-yellow-color, #ffd100);
    }

/* Current page: a yellow bar on the left of its link. */
.nav-item[b-4clhzikofs]  a.active {
    box-shadow: inset 3px 0 0 var(--my-yellow-color, #ffd100);
}
/* /Components/Pages/Help/Help.razor.rz.scp.css */
/* ===== Help tiles (same left-border-stripe treatment as the event cards on
   /eventselectfy27) ===== */
.help-tile[b-a8o4o33399] {
    border-left: 6px solid var(--my-yellow-color, #ffd100);
    background-color: var(--surface-bg, #fff);
    color: var(--text-color, #111);
}

    .help-tile .card-body[b-a8o4o33399] {
        background-color: inherit;
        color: inherit;
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* =========================================================
   Home / landing page
   Uses the site tokens from myapp.css (--my-yellow-color, --surface-bg,
   --text-color, --muted-text-color, --chip-bg, --wakr-radius-lg) so it works
   in light and dark mode.
   ========================================================= */

/* ---------- Hero: full-width, photos cross-fade (pure CSS) ---------- */
.home-hero[b-t11cjeq2c2] {
    position: relative;
    min-height: clamp(420px, 72vh, 680px);
    margin: -1.1rem -1.5rem 0;          /* bleed past the page padding */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: #111;
}

.hero-slides[b-t11cjeq2c2], .hero-shade[b-t11cjeq2c2] { position: absolute; inset: 0; }

.hero-slide[b-t11cjeq2c2] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: hero-fade-b-t11cjeq2c2 28s infinite;
    transform: scale(1.04);
}
/* Delays start 1.4s "early" so the first photo is already showing when the page appears
   (otherwise the hero is black for the first fade-in). */
.hero-slide:nth-child(1)[b-t11cjeq2c2] { animation-delay: -1.4s; }
.hero-slide:nth-child(2)[b-t11cjeq2c2] { animation-delay: 5.6s; }
.hero-slide:nth-child(3)[b-t11cjeq2c2] { animation-delay: 12.6s; }
.hero-slide:nth-child(4)[b-t11cjeq2c2] { animation-delay: 19.6s; }

/* each photo: fade in, hold, slow zoom, fade out (4 photos x 7s) */
@keyframes hero-fade-b-t11cjeq2c2 {
    0%   { opacity: 0; transform: scale(1.04); }
    5%   { opacity: 1; }
    25%  { opacity: 1; }
    32%  { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0; }
}

.hero-shade[b-t11cjeq2c2] {
    background:
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.85) 100%),
        radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}

.hero-content[b-t11cjeq2c2] {
    position: relative;
    z-index: 1;
    padding: 3rem 1.25rem;
    max-width: 860px;
}

.hero-logo[b-t11cjeq2c2] {
    width: 96px;
    height: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}

.hero-title[b-t11cjeq2c2] {
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 .5rem;
    text-shadow: 0 2px 16px rgba(0,0,0,.6);
    letter-spacing: -.01em;
}
.hero-inc[b-t11cjeq2c2] { font-weight: 400; font-size: .55em; opacity: .85; white-space: nowrap; }

.hero-arts[b-t11cjeq2c2] {
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--my-yellow-color);
    margin: 0 0 .75rem;
}
.hero-arts span[b-t11cjeq2c2] { color: #fff; opacity: .6; padding: 0 .3em; }

.hero-lead[b-t11cjeq2c2] {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    opacity: .92;
    margin: 0 auto 1.75rem;
    max-width: 36rem;
}

.hero-actions[b-t11cjeq2c2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

/* hero buttons: yellow primary, translucent others (all keep the site's yellow hover) */
.home-hero .btn-hero[b-t11cjeq2c2],
.home-hero .btn-hero-primary[b-t11cjeq2c2] {
    min-height: 46px;
    padding: .55rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.home-hero .btn-hero-primary[b-t11cjeq2c2] {
    background-color: var(--my-yellow-color);
    border-color: var(--my-yellow-color);
    color: #000;
}
.home-hero .btn-hero[b-t11cjeq2c2] {
    background-color: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
}
.home-hero .btn-hero-ghost[b-t11cjeq2c2] { background-color: transparent; }

/* ---------- Facts strip ---------- */
.home-facts[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 -1.5rem;
    background: #000;
    color: #fff;
    border-top: 4px solid var(--my-yellow-color);
}
.fact[b-t11cjeq2c2] {
    padding: 1.4rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.12);
}
.fact:last-child[b-t11cjeq2c2] { border-right: 0; }
.fact-big[b-t11cjeq2c2] {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--my-yellow-color);
    line-height: 1.1;
}
.fact-label[b-t11cjeq2c2] { font-size: .85rem; opacity: .85; }

/* ---------- Sections ---------- */
.home-section[b-t11cjeq2c2] {
    max-width: 1140px;
    margin: 3.5rem auto 0;
}

.section-title[b-t11cjeq2c2] {
    text-align: center;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.section-title[b-t11cjeq2c2]::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: .6rem auto 0;
    border-radius: 2px;
    background: var(--my-yellow-color);
}
.section-title.text-start[b-t11cjeq2c2]::after { margin-left: 0; }

/* ---------- The arts ---------- */
.arts-grid[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.art-card[b-t11cjeq2c2] {
    background: var(--surface-bg);
    color: var(--text-color);
    border: 1px solid var(--chip-bg);
    border-radius: var(--wakr-radius-lg);
    overflow: hidden;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.art-card:hover[b-t11cjeq2c2] { transform: translateY(-4px); box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.14); }
.art-img[b-t11cjeq2c2] {
    height: 190px;
    background-size: cover;
    background-position: center;
    border-bottom: 4px solid var(--my-yellow-color);
}
.art-body[b-t11cjeq2c2] { padding: 1.1rem 1.2rem 1.3rem; }
.art-body h3[b-t11cjeq2c2] { font-size: 1.25rem; font-weight: 700; margin-bottom: .4rem; }
.art-jp[b-t11cjeq2c2] { font-weight: 400; color: var(--muted-text-color); margin-left: .35rem; font-size: .95em; }
.art-body p[b-t11cjeq2c2] { margin: 0; color: var(--muted-text-color); line-height: 1.55; }

/* ---------- Who we are ---------- */
.home-about[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 2rem;
    align-items: center;
}
.about-photo[b-t11cjeq2c2] {
    min-height: 320px;
    height: 100%;
    border-radius: var(--wakr-radius-lg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 .75rem 2rem rgba(0,0,0,.18);
}
.about-text p[b-t11cjeq2c2] { line-height: 1.7; color: var(--text-color); }

/* ---------- Committee ---------- */
.committee-grid[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* the four officers under the President */
    gap: 1rem;
}
.person-card[b-t11cjeq2c2] {
    background: var(--surface-bg);
    border: 1px solid var(--chip-bg);
    border-radius: var(--wakr-radius-lg);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease;
}
.person-card:hover[b-t11cjeq2c2] { border-color: var(--my-yellow-color); transform: translateY(-2px); }
.person-avatar[b-t11cjeq2c2] {
    width: 56px;
    height: 56px;
    margin: 0 auto .7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: var(--my-yellow-color);
    font-weight: 700;
    font-size: 1.15rem;
    border: 2px solid var(--my-yellow-color);
}
.person-role[b-t11cjeq2c2] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}
.person-name[b-t11cjeq2c2] { font-weight: 700; font-size: 1.05rem; margin: .15rem 0 .35rem; color: var(--text-color); }
.person-email[b-t11cjeq2c2] { font-size: .82rem; word-break: break-all; }

.technical-panel[b-t11cjeq2c2] {
    margin-top: 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--wakr-radius-lg);
    background: var(--chip-bg);
}
.technical-title[b-t11cjeq2c2] {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-text-color);
    margin-bottom: .6rem;
}
.technical-list[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem 1.5rem;
    margin: 0;
}
.technical-list dt[b-t11cjeq2c2] { font-weight: 700; color: var(--text-color); }
.technical-list dd[b-t11cjeq2c2] { margin: 0; color: var(--muted-text-color); }

/* ---------- Contact & voting ---------- */
.home-contact[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
.contact-card[b-t11cjeq2c2], .voting-card[b-t11cjeq2c2] {
    border-radius: var(--wakr-radius-lg);
    padding: 1.4rem 1.5rem;
}
.contact-card[b-t11cjeq2c2] { background: var(--surface-bg); border: 1px solid var(--chip-bg); }
.contact-list[b-t11cjeq2c2] { list-style: none; padding: 0; margin: 0; }
.contact-list li[b-t11cjeq2c2] { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; color: var(--text-color); }
.contact-list i[b-t11cjeq2c2] { color: var(--my-yellow-color); font-size: 1.15rem; width: 1.3rem; text-align: center; }

.voting-card[b-t11cjeq2c2] {
    background: #000;
    color: #fff;
    border-left: 6px solid var(--my-yellow-color);
}
.voting-title[b-t11cjeq2c2] { font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; color: var(--my-yellow-color); }
.voting-card p[b-t11cjeq2c2] { margin: 0; line-height: 1.6; opacity: .9; }

/* ---------- Supporters ---------- */
.home-sponsor[b-t11cjeq2c2] {
    max-width: 1140px;
    margin: 3.5rem auto 1rem;
    padding: 1.75rem 0 .5rem;
    border-top: 1px solid var(--chip-bg);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.sponsor-logo[b-t11cjeq2c2] { width: 260px; max-width: 40%; height: auto; }
.home-sponsor p[b-t11cjeq2c2] { margin: 0; font-size: .88rem; color: var(--muted-text-color); line-height: 1.6; }

/* dark mode: the mono logo needs to be light on black */
body.darkmode .sponsor-logo[b-t11cjeq2c2] { filter: invert(1); }

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
    .home-facts[b-t11cjeq2c2] { grid-template-columns: repeat(2, 1fr); }
    .fact:nth-child(2)[b-t11cjeq2c2] { border-right: 0; }
    .fact:nth-child(-n+2)[b-t11cjeq2c2] { border-bottom: 1px solid rgba(255,255,255,.12); }
    .arts-grid[b-t11cjeq2c2] { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .art-img[b-t11cjeq2c2] { height: 220px; }
    .home-about[b-t11cjeq2c2] { grid-template-columns: 1fr; }
    .about-photo[b-t11cjeq2c2] { min-height: 220px; }
    .home-contact[b-t11cjeq2c2] { grid-template-columns: 1fr; }
    .committee-grid[b-t11cjeq2c2] { grid-template-columns: repeat(2, 1fr); }
    .technical-list[b-t11cjeq2c2] { grid-template-columns: 1fr; }
}

/* ---------- Phone ---------- */
@media (max-width: 575.98px) {
    .home-hero[b-t11cjeq2c2] { margin: -1.1rem -.75rem 0; min-height: 540px; }
    .home-facts[b-t11cjeq2c2] { margin: 0 -.75rem; }
    .hero-logo[b-t11cjeq2c2] { width: 72px; }
    .hero-actions .btn[b-t11cjeq2c2] { flex: 1 1 calc(50% - .6rem); justify-content: center; }
    .home-section[b-t11cjeq2c2] { margin-top: 2.5rem; }
    .home-sponsor[b-t11cjeq2c2] { flex-direction: column; text-align: center; }
    .sponsor-logo[b-t11cjeq2c2] { max-width: 80%; }
}

/* ---------- No motion for people who ask for less ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-slide[b-t11cjeq2c2] { animation: none; transform: none; }
    .hero-slide:first-child[b-t11cjeq2c2] { opacity: 1; }
    .art-card[b-t11cjeq2c2], .person-card[b-t11cjeq2c2] { transition: none; }
    .art-card:hover[b-t11cjeq2c2], .person-card:hover[b-t11cjeq2c2] { transform: none; }
}

/* ---------- Committee: President leads, then the other four ---------- */
/* wide and short: avatar on the left, role / name / email stacked beside it */
.person-card--lead[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: center;
    max-width: 440px;
    margin: 0 auto 1rem;
    padding: 1rem 1.25rem;
    text-align: left;
    border: 2px solid var(--my-yellow-color);
    box-shadow: 0 .6rem 1.5rem rgba(0,0,0,.12);
}
.person-card--lead .person-avatar[b-t11cjeq2c2] {
    grid-row: 1 / span 3;
    width: 64px;
    height: 64px;
    margin: 0;
    font-size: 1.35rem;
}
.person-card--lead .person-name[b-t11cjeq2c2] { font-size: 1.25rem; margin: .1rem 0 .2rem; }

.committee-all[b-t11cjeq2c2] {
    text-align: center;
    margin: 1rem 0 0;
    font-size: .92rem;
    color: var(--muted-text-color);
}
.committee-all i[b-t11cjeq2c2] { color: var(--my-yellow-color); margin-right: .25rem; }

/* ---------- Technical board: Chair over all arts ---------- */
.technical-chair[b-t11cjeq2c2] {
    padding-bottom: .65rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--chip-bg);
    font-weight: 700;
    color: var(--text-color);
}
.technical-chair-label[b-t11cjeq2c2] {
    display: inline-block;
    margin-right: .5rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: #000;
    color: var(--my-yellow-color);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.technical-list[b-t11cjeq2c2] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991.98px) {
    .technical-list[b-t11cjeq2c2] { grid-template-columns: 1fr; }   /* stack the arts on tablets and phones */
}

/* ---------- Section intro line ---------- */
.section-lead[b-t11cjeq2c2] {
    text-align: center;
    max-width: 640px;
    margin: -.5rem auto 1.5rem;
    color: var(--muted-text-color);
}

/* ---------- Find a club (radio + :checked filter, no script) ---------- */
.club-filter[b-t11cjeq2c2] { position: absolute; opacity: 0; pointer-events: none; }

.club-chips[b-t11cjeq2c2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.club-chips label[b-t11cjeq2c2] {
    cursor: pointer;
    padding: .4rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--chip-bg);
    background: var(--surface-bg);
    font-weight: 600;
    font-size: .9rem;
    transition: background-color .15s ease, border-color .15s ease;
}
.club-chips label span[b-t11cjeq2c2] { opacity: .6; margin-left: .25rem; }
.club-chips label:hover[b-t11cjeq2c2] { border-color: var(--my-yellow-color); }

#club-all:checked ~ .club-chips label[for="club-all"][b-t11cjeq2c2],
#club-k:checked ~ .club-chips label[for="club-k"][b-t11cjeq2c2],
#club-i:checked ~ .club-chips label[for="club-i"][b-t11cjeq2c2],
#club-j:checked ~ .club-chips label[for="club-j"][b-t11cjeq2c2] {
    background: #000;
    color: var(--my-yellow-color);
    border-color: #000;
}
#club-all:focus-visible ~ .club-chips label[for="club-all"][b-t11cjeq2c2],
#club-k:focus-visible ~ .club-chips label[for="club-k"][b-t11cjeq2c2],
#club-i:focus-visible ~ .club-chips label[for="club-i"][b-t11cjeq2c2],
#club-j:focus-visible ~ .club-chips label[for="club-j"][b-t11cjeq2c2] {
    outline: 3px solid var(--my-yellow-color);
    outline-offset: 2px;
}

#club-k:checked ~ .club-grid .club-card:not(.art-k)[b-t11cjeq2c2],
#club-i:checked ~ .club-grid .club-card:not(.art-i)[b-t11cjeq2c2],
#club-j:checked ~ .club-grid .club-card:not(.art-j)[b-t11cjeq2c2] { display: none; }

.club-grid[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.club-card[b-t11cjeq2c2] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.1rem;
    border-radius: var(--wakr-radius-lg);
    border: 1px solid var(--chip-bg);
    border-left: 5px solid var(--my-yellow-color);
    background: var(--surface-bg);
    color: var(--text-color);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.club-card:hover[b-t11cjeq2c2] { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.12); color: var(--text-color); }
.club-name[b-t11cjeq2c2] { font-weight: 700; font-size: 1.05rem; }
.club-area[b-t11cjeq2c2] { font-size: .88rem; color: var(--muted-text-color); }
.club-region[b-t11cjeq2c2] { opacity: .75; }
.club-arts[b-t11cjeq2c2] { display: flex; gap: .35rem; flex-wrap: wrap; }
.club-art[b-t11cjeq2c2] {
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--chip-bg);
}
.club-art.k[b-t11cjeq2c2] { background: #000; color: var(--my-yellow-color); }
.club-art.i[b-t11cjeq2c2] { background: var(--pill-info-bg); color: var(--pill-info-fg); }
.club-art.j[b-t11cjeq2c2] { background: var(--pill-ok-bg); color: var(--pill-ok-fg); }
.club-more[b-t11cjeq2c2] { margin-top: auto; padding-top: .35rem; font-size: .8rem; font-weight: 600; color: var(--muted-text-color); }

/* ---------- Club map (Show map button; map drawn by wwwroot/js/club-map.js) ---------- */
.club-map-toggle[b-t11cjeq2c2] {
    margin-left: .5rem;
    border: 1px solid #000; background: #000; color: #fff;
    border-radius: 999px; padding: .4rem 1rem; font-weight: 600; font-size: .9rem;
    transition: background var(--wakr-transition, .15s), color var(--wakr-transition, .15s);
}
.club-map-toggle:hover[b-t11cjeq2c2], .club-map-toggle:focus-visible[b-t11cjeq2c2] { background: var(--my-yellow-color); color: #000; }
.club-finder.map-on .club-grid[b-t11cjeq2c2] { display: none; }
.club-map[b-t11cjeq2c2] {
    height: 460px; border-radius: var(--wakr-radius-lg, 12px); overflow: hidden;
    border: 1px solid rgba(0,0,0,.12); box-shadow: 0 .4rem 1rem rgba(0,0,0,.08);
}
.club-map-note[b-t11cjeq2c2] { font-size: .88rem; color: var(--muted-text-color); }

/* ---------- Start training ---------- */
.start-steps[b-t11cjeq2c2] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    counter-reset: none;
}
.start-steps li[b-t11cjeq2c2] {
    display: flex;
    gap: .9rem;
    padding: 1.2rem;
    border-radius: var(--wakr-radius-lg);
    background: var(--chip-bg);
}
.start-steps p[b-t11cjeq2c2] { margin: .25rem 0 0; color: var(--muted-text-color); font-size: .92rem; line-height: 1.5; }
.start-no[b-t11cjeq2c2] {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--my-yellow-color);
    color: #000;
    font-weight: 700;
}

/* ---------- Upcoming events ---------- */
.event-strip[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.event-tile[b-t11cjeq2c2] {
    display: flex;
    gap: .9rem;
    padding: 1rem;
    border-radius: var(--wakr-radius-lg);
    border: 1px solid var(--chip-bg);
    background: var(--surface-bg);
}
.event-date[b-t11cjeq2c2] {
    flex: 0 0 auto;
    width: 3.4rem;
    border-radius: var(--wakr-radius);
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .35rem 0;
}
.event-day[b-t11cjeq2c2] { font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--my-yellow-color); }
.event-mon[b-t11cjeq2c2] { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.event-type[b-t11cjeq2c2] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}
.event-name[b-t11cjeq2c2] { font-weight: 700; line-height: 1.25; color: var(--text-color); }
.event-meta[b-t11cjeq2c2] { font-size: .82rem; color: var(--muted-text-color); margin-top: .15rem; }

/* ---------- Members & policies ---------- */
.home-links[b-t11cjeq2c2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.links-card[b-t11cjeq2c2] {
    padding: 1.3rem 1.5rem;
    border-radius: var(--wakr-radius-lg);
    border: 1px solid var(--chip-bg);
    background: var(--surface-bg);
}
.links-title[b-t11cjeq2c2] { font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; }
.links-title i[b-t11cjeq2c2] { color: var(--my-yellow-color); margin-right: .35rem; }
.links-card ul[b-t11cjeq2c2] { list-style: none; padding: 0; margin: 0; }
.links-card li[b-t11cjeq2c2] { padding: .3rem 0; border-bottom: 1px dashed var(--chip-bg); }
.links-card li:last-child[b-t11cjeq2c2] { border-bottom: 0; }
.links-note[b-t11cjeq2c2] { margin: .75rem 0 0; font-size: .82rem; color: var(--muted-text-color); }

/* ---------- Social line ---------- */
.home-social[b-t11cjeq2c2] {
    max-width: 1140px;
    margin: .25rem auto 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    font-size: .9rem;
}
.home-social i[b-t11cjeq2c2] { color: var(--my-yellow-color); margin-right: .25rem; }

/* ---------- New sections on tablets and phones ---------- */
@media (max-width: 991.98px) {
    .start-steps[b-t11cjeq2c2] { grid-template-columns: 1fr; }
    .event-strip[b-t11cjeq2c2] { grid-template-columns: repeat(2, 1fr); }
    .home-links[b-t11cjeq2c2] { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .event-strip[b-t11cjeq2c2] { grid-template-columns: 1fr; }
    .club-grid[b-t11cjeq2c2] { grid-template-columns: 1fr; }
    .club-map[b-t11cjeq2c2] { height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
    .club-card[b-t11cjeq2c2] { transition: none; }
    .club-card:hover[b-t11cjeq2c2] { transform: none; }
}

/* ---------- Club reps (under the technical board) ---------- */
.club-rep-list[b-t11cjeq2c2] { grid-template-columns: repeat(4, 1fr); }
.club-rep-note[b-t11cjeq2c2] { margin: .75rem 0 0; font-size: .85rem; color: var(--muted-text-color); }
@media (max-width: 991.98px) {
    .club-rep-list[b-t11cjeq2c2] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .club-rep-list[b-t11cjeq2c2] { grid-template-columns: 1fr; }
}

/* ---------- Back to top (bottom right; shown by back-to-top.js once scrolled) ---------- */
.back-to-top[b-t11cjeq2c2] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #000;
    color: var(--my-yellow-color);
    font-size: 1.3rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .2s, transform .2s, visibility .2s, background-color .2s, color .2s;
}
.back-to-top.show[b-t11cjeq2c2] { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover[b-t11cjeq2c2], .back-to-top:focus-visible[b-t11cjeq2c2] { background: var(--my-yellow-color); color: #000; }
@media (max-width: 575.98px) {
    .back-to-top[b-t11cjeq2c2] { right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top[b-t11cjeq2c2] { transition: none; }
}

/* Clubs with a vote (10+ members): a thin yellow bar and a small tag - kept quiet on purpose */
.club-rep-list > div[b-t11cjeq2c2] { padding-left: .6rem; border-left: 3px solid transparent; }
.club-rep-list > div.club-rep-votes[b-t11cjeq2c2] { border-left-color: var(--my-yellow-color); }
.club-rep-vote[b-t11cjeq2c2] {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .4rem;
    border: 1px solid var(--my-yellow-color);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    vertical-align: middle;
    color: var(--muted-text-color);
}
/* /Components/Pages/Membership/FY25/MemberEmailFY25.razor.rz.scp.css */
/* =========================
   Toolbar v2 – grouped actions (WAKR theme)
   ========================= */
.wakr-toolbar[b-9uqtoqrhvt] {
    margin-top: .5rem;
    margin-bottom: .75rem;
}

.wakr-toolbar-top[b-9uqtoqrhvt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.wakr-summary[b-9uqtoqrhvt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--muted-text-color);
    white-space: nowrap;
}

.wakr-dot[b-9uqtoqrhvt] {
    color: var(--muted-text-color);
}

.wakr-selected-count.active[b-9uqtoqrhvt] {
    color: var(--my-dark-color);
    font-weight: bold;
}

body.darkmode .wakr-selected-count.active[b-9uqtoqrhvt] {
    color: var(--my-light-color);
}

.wakr-filter-chips[b-9uqtoqrhvt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wakr-filter-badge[b-9uqtoqrhvt] {
    background: var(--chip-bg);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
}

.wakr-reset-btn[b-9uqtoqrhvt] {
    font-size: .85rem;
}

.wakr-toolbar-groups[b-9uqtoqrhvt] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--chip-bg);
    border-radius: 6px;
}

.wakr-btn-group[b-9uqtoqrhvt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wakr-group-label[b-9uqtoqrhvt] {
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted-text-color);
}

.wakr-group-buttons[b-9uqtoqrhvt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wakr-group-buttons .btn[b-9uqtoqrhvt] {
    font-size: .82rem;
    padding: .3rem .6rem;
    min-height: unset;
    white-space: nowrap;
}

.wakr-group-buttons .btn:disabled[b-9uqtoqrhvt] {
    opacity: .55;
    cursor: not-allowed;
}

.wakr-btn-primary[b-9uqtoqrhvt] {
    background-color: var(--my-yellow-color);
    border-color: var(--my-yellow-color);
    color: var(--my-dark-color);
    font-weight: bold;
}

    .wakr-btn-primary:hover[b-9uqtoqrhvt],
    .wakr-btn-primary:focus[b-9uqtoqrhvt],
    .wakr-btn-primary:active[b-9uqtoqrhvt] {
        background-color: var(--my-yellow-color) !important;
        border-color: var(--my-yellow-color) !important;
        color: var(--my-dark-color) !important;
        filter: brightness(.95);
    }

/* Column Title Styling */
[b-9uqtoqrhvt] .quickgrid[theme=corporate] .col-title {
    gap: 0.4rem; /* Separate the sort indicator from title text */
    font-weight: bold;
    text-transform: uppercase;
}

[b-9uqtoqrhvt] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Column Title Hover and Active States */
[b-9uqtoqrhvt] .quickgrid[theme=corporate] button.col-title:hover, [b-9uqtoqrhvt] .quickgrid[theme=corporate] .col-options-button:hover {
    background-color: var(--col-title-color);
}

[b-9uqtoqrhvt] .quickgrid[theme=corporate] button.col-title:active, [b-9uqtoqrhvt] .quickgrid[theme=corporate] .col-options-button:active {
    background-color: var(--col-title-color);
}

/* Subtle Stripe Effect - Alternating Row Colors */
[b-9uqtoqrhvt] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.4); /* Even rows have a light background */
}

[b-9uqtoqrhvt] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.05); /* Slightly darker background for odd rows */
}

/* Prevent Row Collapse */
[b-9uqtoqrhvt] tbody tr {
    height: 1.8rem;
}

/* Checkbox Group Styling */
.checkbox-group[b-9uqtoqrhvt] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Ensure no overflow */
    white-space: nowrap; /* Prevent text from wrapping */
}

    .checkbox-group label[b-9uqtoqrhvt] {
        margin-right: 10px; /* Optional: adjust space between checkboxes */
        display: flex;
        align-items: center;
    }

/* Thin Column Separator Line */
[b-9uqtoqrhvt] .quickgrid[theme=corporate] th,
[b-9uqtoqrhvt] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Light gray line between columns */
    padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* Add padding around the text */
}

    /* Remove right border on last column */
    [b-9uqtoqrhvt] .quickgrid[theme=corporate] th:last-child,
    [b-9uqtoqrhvt] .quickgrid[theme=corporate] td:last-child {
        border-right: none;
    }

/* Centering the checkbox within the column */
[b-9uqtoqrhvt] .checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    align-items: center; /* Centers the checkbox vertically */
}

/* Styling the checkbox to make it stand out more */
.checkbox-container input[type="checkbox"].styled-checkbox[b-9uqtoqrhvt] {
    width: 22px; /* Size the checkbox */
    height: 22px; /* Size the checkbox */
    border: 2px solid #000000; /* Add border to the checkbox */
    background-color: #ffffff; /* Set background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    appearance: none; /* Remove default checkbox appearance */
    border-radius: 4px; /* Optional: Add rounded corners to the checkbox */
    position: relative; /* Position relative for the custom checkmark */
}

    /* Make the checkbox more noticeable on hover */
    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-9uqtoqrhvt] {
        border-color: #000000; /* Change border color on hover */
        background-color: #f0f0f0; /* Change background on hover */
    }

    /* Checkbox checked state */
    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-9uqtoqrhvt] {
        background-color: var(--my-yellow-color); /* Highlight the checkbox when checked */
        border-color: #000000; /* Match border with checked color */
    }

        /* Custom checkmark appearance when checked */
        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-9uqtoqrhvt]::after {
            content: ''; /* Empty content for the checkmark */
            position: absolute;
            top: 4px; /* Position the checkmark inside the checkbox */
            left: 4px;
            width: 10px; /* Size of the checkmark */
            height: 10px; /* Size of the checkmark */
            background-color: #ffffff; /* White checkmark color */
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%); /* Creating the checkmark shape */
        }

    /* Adjust the checkbox when unchecked */
    .checkbox-container input[type="checkbox"].styled-checkbox:not(:checked)[b-9uqtoqrhvt]::after {
        content: ''; /* Empty content for unchecked state */
    }

th:contains("Kendo (Sort)")[b-9uqtoqrhvt],
td:nth-child(1)[b-9uqtoqrhvt] { /* Adjust the nth-child if necessary */
    display: none;
}

.grid .paidup-column[b-9uqtoqrhvt] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .paidup-column[b-9uqtoqrhvt] {
    border: solid 1px #fff;
}

.grid .paidup-column.paid[b-9uqtoqrhvt] {
    font-weight: bold;
    background-color: #8df1b3;
}

.grid .paidup-column.due[b-9uqtoqrhvt] {
    background-color: #d5a6bd;
}

.grid .paidup-column.paid[b-9uqtoqrhvt]::after {
    content: "PAID";
}

.grid .paidup-column.due[b-9uqtoqrhvt]::after {
    content: "DUE";
}

.grid .juniorsenior-column[b-9uqtoqrhvt] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .juniorsenior-column[b-9uqtoqrhvt] {
    border: solid 1px #fff;
}

.grid .juniorsenior-column.senior[b-9uqtoqrhvt] {
    font-weight: bold;
    background-color: #ffd800;
}

.grid .juniorsenior-column.junior[b-9uqtoqrhvt]::after {
    content: "junior";
}

.grid .juniorsenior-column.senior[b-9uqtoqrhvt]::after {
    content: "senior";
}

/* Gender column */
.grid .gender-column[b-9uqtoqrhvt] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .gender-column[b-9uqtoqrhvt] {
    border: solid 1px #fff;
}

.grid .gender-column.male[b-9uqtoqrhvt] {
    font-weight: bold;
    background-color: #6fa8dc;
}

.grid .gender-column.female[b-9uqtoqrhvt] {
    background-color: #f982e9;
}

.grid .gender-column.male[b-9uqtoqrhvt]::after {
    content: "male";
}

.grid .gender-column.female[b-9uqtoqrhvt]::after {
    content: "female";
}

/* Membership type column */
.grid .memtype-column[b-9uqtoqrhvt] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .memtype-column[b-9uqtoqrhvt] {
    border: solid 1px #fff;
}

.grid .memtype-column.new[b-9uqtoqrhvt] {
    background-color: #8df1b3;
}

.grid .memtype-column.renew[b-9uqtoqrhvt] {
    font-weight: bold;
}

.grid .memtype-column.life[b-9uqtoqrhvt] {
    font-weight: bold;
    background-color: #F87C1D;
}

.grid .memtype-column.new[b-9uqtoqrhvt]::after {
    content: "new";
}

.grid .memtype-column.renew[b-9uqtoqrhvt]::after {
    content: "renew";
}

.grid .memtype-column.life[b-9uqtoqrhvt]::after {
    content: "life";
}


/* /Components/Pages/Membership/FY25/MemberEmailGradingFY25.razor.rz.scp.css */
/* =========================
   Toolbar v2 – grouped actions (WAKR theme)
   ========================= */
.wakr-toolbar[b-ed1ymvs8sn] {
    margin-top: .5rem;
    margin-bottom: .75rem;
}

.wakr-toolbar-top[b-ed1ymvs8sn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.wakr-summary[b-ed1ymvs8sn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--muted-text-color);
    white-space: nowrap;
}

.wakr-dot[b-ed1ymvs8sn] {
    color: var(--muted-text-color);
}

.wakr-selected-count.active[b-ed1ymvs8sn] {
    color: var(--my-dark-color);
    font-weight: bold;
}

body.darkmode .wakr-selected-count.active[b-ed1ymvs8sn] {
    color: var(--my-light-color);
}

.wakr-filter-chips[b-ed1ymvs8sn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wakr-filter-badge[b-ed1ymvs8sn] {
    background: var(--chip-bg);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
}

.wakr-reset-btn[b-ed1ymvs8sn] {
    font-size: .85rem;
}

.wakr-toolbar-groups[b-ed1ymvs8sn] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--chip-bg);
    border-radius: 6px;
}

.wakr-btn-group[b-ed1ymvs8sn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wakr-group-label[b-ed1ymvs8sn] {
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted-text-color);
}

.wakr-group-buttons[b-ed1ymvs8sn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wakr-group-buttons .btn[b-ed1ymvs8sn] {
    font-size: .82rem;
    padding: .3rem .6rem;
    min-height: unset;
    white-space: nowrap;
}

.wakr-group-buttons .btn:disabled[b-ed1ymvs8sn] {
    opacity: .55;
    cursor: not-allowed;
}

.wakr-btn-primary[b-ed1ymvs8sn] {
    background-color: var(--my-yellow-color);
    border-color: var(--my-yellow-color);
    color: var(--my-dark-color);
    font-weight: bold;
}

    .wakr-btn-primary:hover[b-ed1ymvs8sn],
    .wakr-btn-primary:focus[b-ed1ymvs8sn],
    .wakr-btn-primary:active[b-ed1ymvs8sn] {
        background-color: var(--my-yellow-color) !important;
        border-color: var(--my-yellow-color) !important;
        color: var(--my-dark-color) !important;
        filter: brightness(.95);
    }

/* Column Title Styling */
[b-ed1ymvs8sn] .quickgrid[theme=corporate] .col-title {
    gap: 0.4rem; /* Separate the sort indicator from title text */
    font-weight: bold;
    text-transform: uppercase;
}

[b-ed1ymvs8sn] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Column Title Hover and Active States */
[b-ed1ymvs8sn] .quickgrid[theme=corporate] button.col-title:hover, [b-ed1ymvs8sn] .quickgrid[theme=corporate] .col-options-button:hover {
    background-color: var(--col-title-color);
}

[b-ed1ymvs8sn] .quickgrid[theme=corporate] button.col-title:active, [b-ed1ymvs8sn] .quickgrid[theme=corporate] .col-options-button:active {
    background-color: var(--col-title-color);
}

/* Subtle Stripe Effect - Alternating Row Colors */
[b-ed1ymvs8sn] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.4); /* Even rows have a light background */
}

[b-ed1ymvs8sn] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.05); /* Slightly darker background for odd rows */
}

/* Prevent Row Collapse */
[b-ed1ymvs8sn] tbody tr {
    height: 1.8rem;
}

/* Checkbox Group Styling */
.checkbox-group[b-ed1ymvs8sn] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Ensure no overflow */
    white-space: nowrap; /* Prevent text from wrapping */
}

    .checkbox-group label[b-ed1ymvs8sn] {
        margin-right: 10px; /* Optional: adjust space between checkboxes */
        display: flex;
        align-items: center;
    }

/* Thin Column Separator Line */
[b-ed1ymvs8sn] .quickgrid[theme=corporate] th,
[b-ed1ymvs8sn] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Light gray line between columns */
    padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* Add padding around the text */
}

    /* Remove right border on last column */
    [b-ed1ymvs8sn] .quickgrid[theme=corporate] th:last-child,
    [b-ed1ymvs8sn] .quickgrid[theme=corporate] td:last-child {
        border-right: none;
    }

/* Centering the checkbox within the column */
[b-ed1ymvs8sn] .checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    align-items: center; /* Centers the checkbox vertically */
}

/* Styling the checkbox to make it stand out more */
.checkbox-container input[type="checkbox"].styled-checkbox[b-ed1ymvs8sn] {
    width: 22px; /* Size the checkbox */
    height: 22px; /* Size the checkbox */
    border: 2px solid #000000; /* Add border to the checkbox */
    background-color: #ffffff; /* Set background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    appearance: none; /* Remove default checkbox appearance */
    border-radius: 4px; /* Optional: Add rounded corners to the checkbox */
    position: relative; /* Position relative for the custom checkmark */
}

    /* Make the checkbox more noticeable on hover */
    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-ed1ymvs8sn] {
        border-color: #000000; /* Change border color on hover */
        background-color: #f0f0f0; /* Change background on hover */
    }

    /* Checkbox checked state */
    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-ed1ymvs8sn] {
        background-color: var(--my-yellow-color); /* Highlight the checkbox when checked */
        border-color: #000000; /* Match border with checked color */
    }

        /* Custom checkmark appearance when checked */
        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-ed1ymvs8sn]::after {
            content: ''; /* Empty content for the checkmark */
            position: absolute;
            top: 4px; /* Position the checkmark inside the checkbox */
            left: 4px;
            width: 10px; /* Size of the checkmark */
            height: 10px; /* Size of the checkmark */
            background-color: #ffffff; /* White checkmark color */
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%); /* Creating the checkmark shape */
        }

    /* Adjust the checkbox when unchecked */
    .checkbox-container input[type="checkbox"].styled-checkbox:not(:checked)[b-ed1ymvs8sn]::after {
        content: ''; /* Empty content for unchecked state */
    }

th:contains("Kendo (Sort)")[b-ed1ymvs8sn],
td:nth-child(1)[b-ed1ymvs8sn] { /* Adjust the nth-child if necessary */
    display: none;
}

.grid .paidup-column[b-ed1ymvs8sn] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .paidup-column[b-ed1ymvs8sn] {
    border: solid 1px #fff;
}

.grid .paidup-column.paid[b-ed1ymvs8sn] {
    font-weight: bold;
    background-color: #8df1b3;
}

.grid .paidup-column.due[b-ed1ymvs8sn] {
    background-color: #d5a6bd;
}

.grid .paidup-column.paid[b-ed1ymvs8sn]::after {
    content: "PAID";
}

.grid .paidup-column.due[b-ed1ymvs8sn]::after {
    content: "DUE";
}

.grid .yesno-column[b-ed1ymvs8sn] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .yesno-column[b-ed1ymvs8sn] {
    border: solid 1px #fff;
}

.grid .yesno-column.yes[b-ed1ymvs8sn] {
    font-weight: bold;
    background-color: #8df1b3;
}

.grid .yesno-column.no[b-ed1ymvs8sn] {
    background-color: #d5a6bd;
}

.grid .yesno-column.yes[b-ed1ymvs8sn]::after {
    content: "Yes";
}

.grid .yesno-column.no[b-ed1ymvs8sn]::after {
    content: "No";
}

.grid .juniorsenior-column[b-ed1ymvs8sn] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .juniorsenior-column[b-ed1ymvs8sn] {
    border: solid 1px #fff;
}

.grid .juniorsenior-column.senior[b-ed1ymvs8sn] {
    font-weight: bold;
    background-color: #ffd800;
}

.grid .juniorsenior-column.junior[b-ed1ymvs8sn]::after {
    content: "junior";
}

.grid .juniorsenior-column.senior[b-ed1ymvs8sn]::after {
    content: "senior";
}

/* Gender column */
.grid .gender-column[b-ed1ymvs8sn] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .gender-column[b-ed1ymvs8sn] {
    border: solid 1px #fff;
}

.grid .gender-column.male[b-ed1ymvs8sn] {
    font-weight: bold;
    background-color: #6fa8dc;
}

.grid .gender-column.female[b-ed1ymvs8sn] {
    background-color: #f982e9;
}

.grid .gender-column.male[b-ed1ymvs8sn]::after {
    content: "male";
}

.grid .gender-column.female[b-ed1ymvs8sn]::after {
    content: "female";
}

/* Membership type column */
.grid .memtype-column[b-ed1ymvs8sn] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid .focused .memtype-column[b-ed1ymvs8sn] {
    border: solid 1px #fff;
}

.grid .memtype-column.new[b-ed1ymvs8sn] {
    background-color: #8df1b3;
}

.grid .memtype-column.renew[b-ed1ymvs8sn] {
    font-weight: bold;
}

.grid .memtype-column.life[b-ed1ymvs8sn] {
    font-weight: bold;
    background-color: #F87C1D;
}

.grid .memtype-column.new[b-ed1ymvs8sn]::after {
    content: "new";
}

.grid .memtype-column.renew[b-ed1ymvs8sn]::after {
    content: "renew";
}

.grid .memtype-column.life[b-ed1ymvs8sn]::after {
    content: "life";
}

.container[b-ed1ymvs8sn] {
    width: 500px;
    max-width: 100%;
}

.form-group[b-ed1ymvs8sn] {
    margin-bottom: 12px;
}

label[b-ed1ymvs8sn] {
    display: block;
    margin-bottom: 4px;
}

input[b-ed1ymvs8sn] {
    border: 1px solid #ccc;
}

input[b-ed1ymvs8sn],
.ql-editor[b-ed1ymvs8sn] {
    padding: 4px;
    font-size: 14px;
}

#editor[b-ed1ymvs8sn] {
    height: 130px;
}
/* /Components/Pages/Membership/FY25/MemberLookupFY25.razor.rz.scp.css */
/* Column Title Styling */
[b-ecc8drepfm] .quickgrid[theme=corporate] .col-title {
    gap: 0.4rem; /* Separate the sort indicator from title text */
    font-weight: bold;
    text-transform: uppercase;
}

[b-ecc8drepfm] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Column Title Hover and Active States */
[b-ecc8drepfm] .quickgrid[theme=corporate] button.col-title:hover, [b-ecc8drepfm] .quickgrid[theme=corporate] .col-options-button:hover {
    background-color: var(--col-title-color);
}

[b-ecc8drepfm] .quickgrid[theme=corporate] button.col-title:active, [b-ecc8drepfm] .quickgrid[theme=corporate] .col-options-button:active {
    background-color: var(--col-title-color);
}

/* Subtle Stripe Effect - Alternating Row Colors */
[b-ecc8drepfm] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.4); /* Even rows have a light background */
}

[b-ecc8drepfm] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.05); /* Slightly darker background for odd rows */
}

/* Prevent Row Collapse */
[b-ecc8drepfm] tbody tr {
    height: 1.8rem;
}

/* Checkbox Group Styling */
.checkbox-group[b-ecc8drepfm] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Ensure no overflow */
    white-space: nowrap; /* Prevent text from wrapping */
}

    .checkbox-group label[b-ecc8drepfm] {
        margin-right: 10px; /* Optional: adjust space between checkboxes */
        display: flex;
        align-items: center;
    }

/* Thin Column Separator Line */
[b-ecc8drepfm] .quickgrid[theme=corporate] th,
[b-ecc8drepfm] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Light gray line between columns */
    padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* Add padding around the text */
}

    /* Remove right border on last column */
    [b-ecc8drepfm] .quickgrid[theme=corporate] th:last-child,
    [b-ecc8drepfm] .quickgrid[theme=corporate] td:last-child {
        border-right: none;
    }

/* Centering the checkbox within the column */
[b-ecc8drepfm] .checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    align-items: center; /* Centers the checkbox vertically */
}

/* Styling the checkbox to make it stand out more */
.checkbox-container input[type="checkbox"].styled-checkbox[b-ecc8drepfm] {
    width: 22px; /* Size the checkbox */
    height: 22px; /* Size the checkbox */
    border: 2px solid #000000; /* Add border to the checkbox */
    background-color: #ffffff; /* Set background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    appearance: none; /* Remove default checkbox appearance */
    border-radius: 4px; /* Optional: Add rounded corners to the checkbox */
    position: relative; /* Position relative for the custom checkmark */
}

    /* Make the checkbox more noticeable on hover */
    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-ecc8drepfm] {
        border-color: #000000; /* Change border color on hover */
        background-color: #f0f0f0; /* Change background on hover */
    }

    /* Checkbox checked state */
    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-ecc8drepfm] {
        background-color: var(--my-yellow-color); /* Highlight the checkbox when checked */
        border-color: #000000; /* Match border with checked color */
    }

        /* Custom checkmark appearance when checked */
        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-ecc8drepfm]::after {
            content: ''; /* Empty content for the checkmark */
            position: absolute;
            top: 4px; /* Position the checkmark inside the checkbox */
            left: 4px;
            width: 10px; /* Size of the checkmark */
            height: 10px; /* Size of the checkmark */
            background-color: #ffffff; /* White checkmark color */
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%); /* Creating the checkmark shape */
        }

    /* Adjust the checkbox when unchecked */
    .checkbox-container input[type="checkbox"].styled-checkbox:not(:checked)[b-ecc8drepfm]::after {
        content: ''; /* Empty content for unchecked state */
    }

th:contains("Kendo (Sort)")[b-ecc8drepfm],
td:nth-child(1)[b-ecc8drepfm] { /* Adjust the nth-child if necessary */
    display: none;
}
/* /Components/Pages/Membership/FY26/EventFY26.razor.rz.scp.css */
.form-section[b-5z0gry9x4j] {
    border: 1px solid rgba(0,0,0,.06);
}

    .form-section + .form-section[b-5z0gry9x4j] {
        margin-top: 1rem;
    }

.card-header[b-5z0gry9x4j] {
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.avatar-circle[b-5z0gry9x4j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f3f5;
    font-size: .75rem;
    font-weight: 600;
    color: #495057;
}

/* compact time fields */
.time-input[b-5z0gry9x4j] {
    min-width: 8rem;
}
/* ~HH:MM fits nicely */

/* --- Card sections --- */
.form-section[b-5z0gry9x4j] {
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--my-yellow-color);
    border-radius: .75rem;
    overflow: hidden;
}

    .form-section + .form-section[b-5z0gry9x4j] {
        margin-top: 1rem;
    }

    .form-section .card-header[b-5z0gry9x4j] {
        background: #fff;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        .form-section .card-header .bi[b-5z0gry9x4j] {
            opacity: .6;
        }

/* --- Compact, aligned inputs with leading icons --- */
.input-icon[b-5z0gry9x4j] {
    position: relative;
}

    .input-icon > .bi[b-5z0gry9x4j] {
        position: absolute;
        left: .75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        opacity: .55;
        font-size: 1rem;
    }

    /* ::deep - the inputs are rendered by InputText/InputDate/InputSelect child
       components, which scoped CSS can't otherwise reach (the icon then sat over the text). */
    .input-icon[b-5z0gry9x4j]  .form-control,
    .input-icon[b-5z0gry9x4j]  .form-select {
        padding-left: 2.25rem;
    }

/* Narrow time inputs */
.time-input[b-5z0gry9x4j] {
    max-width: 170px;
}

/* Sticky preview polish */
.sticky-top[b-5z0gry9x4j] {
    z-index: 2;
}

.preview-card .badge[b-5z0gry9x4j] {
    font-weight: 600;
}

/* Avatar chip (admins list) */
.avatar-circle[b-5z0gry9x4j] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-100);
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-gray-700);
}

/* Art chips (Kendo/Iaido/Jodo including seminar codes) */
.badge-art[b-5z0gry9x4j] {
    border: 1px solid transparent;
    font-weight: 600;
}

    .badge-art[data-art="K"][b-5z0gry9x4j],
    .badge-art[data-art="KS"][b-5z0gry9x4j] {
        color: #0d6efd;
        background-color: rgba(13,110,253,.08);
        border-color: rgba(13,110,253,.28);
    }

    .badge-art[data-art="I"][b-5z0gry9x4j],
    .badge-art[data-art="IS"][b-5z0gry9x4j],
    .badge-art[data-art="IJS"][b-5z0gry9x4j] {
        color: #6f42c1;
        background-color: rgba(111,66,193,.08);
        border-color: rgba(111,66,193,.28);
    }

    .badge-art[data-art="J"][b-5z0gry9x4j],
    .badge-art[data-art="JS"][b-5z0gry9x4j] {
        color: #198754;
        background-color: rgba(25,135,84,.08);
        border-color: rgba(25,135,84,.28);
    }

/* Subtle section footnotes */
.form-text[b-5z0gry9x4j] {
    margin-top: .25rem;
    color: var(--bs-gray-600);
}

/* Buttons */
.btn svg[b-5z0gry9x4j], .btn i[b-5z0gry9x4j] {
    vertical-align: -2px;
}

/* Validation summary as a tidy alert */
.validation-summary-valid[b-5z0gry9x4j] {
    display: none;
}

.validation-summary-errors[b-5z0gry9x4j] {
    border-left: 4px solid var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text);
    padding: .75rem .75rem .75rem 1rem;
    border-radius: .5rem;
}

/* Calendar chip */
.calendar-chip[b-5z0gry9x4j] {
    width: 64px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    text-align: center;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

    .calendar-chip .month[b-5z0gry9x4j] {
        background: var(--my-yellow-color);
        color: #fff;
        font-weight: 700;
        font-size: .75rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: .25rem .25rem;
    }

    .calendar-chip .day[b-5z0gry9x4j] {
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1.15;
        padding-top: .15rem;
    }

    .calendar-chip .dow[b-5z0gry9x4j] {
        font-size: .72rem;
        color: var(--bs-gray-600);
        padding-bottom: .25rem;
    }

/* Make the date row breathe and wrap nicely */
.calendar-row[b-5z0gry9x4j] {
    gap: .75rem;
}

.quick-picks .btn[b-5z0gry9x4j] {
    padding: .15rem .5rem;
}

/* /Components/Pages/Membership/FY26/EventSelectFY26.razor.rz.scp.css */
/* ===== Event cards (polish) ===== */
.event-card[b-mqj14pun52] {
    cursor: pointer;
    transition: transform .06s ease, box-shadow .06s ease;
    background-color: var(--surface-bg, #fff);
    color: var(--text-color, #111);
    border-color: rgba(0,0,0,.125);
}

    .event-card:hover[b-mqj14pun52] {
        transform: translateY(-2px);
        box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
    }

    .event-card .card-body[b-mqj14pun52] {
        padding: .9rem 1rem .75rem;
        background-color: inherit;
        color: inherit;
    }

/* Title: full card width, wraps to two lines before truncating */
.title[b-mqj14pun52] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* Meta row: date & location on one line */
.meta[b-mqj14pun52] {
    display: flex;
    gap: .75rem;
    align-items: center;
    overflow: hidden;
    color: var(--muted-text-color, #6c757d);
}

    .meta .text-truncate[b-mqj14pun52] {
        max-width: 100%;
    }

/* Stat chips (4 on md+, 2 on xs) */
.stat-chips[b-mqj14pun52] {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    overflow: hidden;
}

    .stat-chips .chip[b-mqj14pun52] {
        flex: 1 1 0;
        min-width: 0;
    }

@media (max-width: 575.98px) {
    .stat-chips[b-mqj14pun52] {
        flex-wrap: wrap;
    }

        /* Phones: keep each chip whole and let it drop to the next row,
           instead of squeezing its text onto two lines */
        .stat-chips .chip[b-mqj14pun52] {
            flex: 1 0 auto;
            white-space: nowrap;
        }

    /* Date stays on one line; the location truncates instead */
    .meta > span:first-child[b-mqj14pun52] {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .meta > .text-truncate[b-mqj14pun52] {
        min-width: 0;
    }
}

.chip-surplus[b-mqj14pun52] {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

.chip-deficit[b-mqj14pun52] {
    background: rgba(220, 53, 69, .12);
    color: #dc3545;
}

[data-bs-theme="dark"] .chip-surplus[b-mqj14pun52] {
    background: rgba(25, 135, 84, .25);
    color: #75b798;
}

[data-bs-theme="dark"] .chip-deficit[b-mqj14pun52] {
    background: rgba(220, 53, 69, .25);
    color: #ea868f;
}
/* Chip */
.chip[b-mqj14pun52] {
    display: inline-block;
    font-size: .8rem;
    line-height: 1.6;
    padding: .15rem .5rem;
    border-radius: 9999px;
    background: var(--chip-bg, rgba(108,117,125,.08)); /* secondary-subtle */
    color: var(--muted-text-color, #6c757d);
    text-align: center;
    user-select: none;
}

/* ===== Type stripes (left border) ===== */
.type-grading[b-mqj14pun52] {
    border-left: 6px solid #0d6efd;
}

.type-seminar[b-mqj14pun52] {
    border-left: 6px solid #20c997;
}

.type-competition[b-mqj14pun52] {
    border-left: 6px solid #d63384;
}

.type-committee[b-mqj14pun52] {
    border-left: 6px solid #6f42c1;
}

.type-training[b-mqj14pun52] {
    border-left: 6px solid #198754;
}

.type-exam[b-mqj14pun52] {
    border-left: 6px solid #fd7e14;
}

.type-default[b-mqj14pun52] {
    border-left: 6px solid #6c757d;
}

/* Arts inside grading */
.type-grading-kendo[b-mqj14pun52] {
    border-left: 6px solid #0a58ca;
}

.type-grading-iaido[b-mqj14pun52] {
    border-left: 6px solid #20c997;
}

.type-grading-jodo[b-mqj14pun52] {
    border-left: 6px solid #d63384;
}

/* Seminar variants */
.type-seminar-kendo[b-mqj14pun52] {
    border-left: 6px solid #0a58ca;
}

.type-seminar-iaido[b-mqj14pun52] {
    border-left: 6px solid #20c997;
}

.type-seminar-jodo[b-mqj14pun52] {
    border-left: 6px solid #d63384;
}

.type-seminar-mixed[b-mqj14pun52] {
    border-left: 6px solid #6f42c1;
}

/* ===== Badges (keep brand hues, translucent bg) ===== */
.badge-grading[b-mqj14pun52] {
    background-color: #0d6efd1a;
    color: #0d6efd;
}

.badge-seminar[b-mqj14pun52] {
    background-color: #20c9971a;
    color: #20c997;
}

.badge-competition[b-mqj14pun52] {
    background-color: #d633841a;
    color: #d63384;
}

.badge-committee[b-mqj14pun52] {
    background-color: #6f42c11a;
    color: #6f42c1;
}

.badge-training[b-mqj14pun52] {
    background-color: #1987541a;
    color: #198754;
}

.badge-exam[b-mqj14pun52] {
    background-color: #fd7e141a;
    color: #fd7e14;
}

.badge-default[b-mqj14pun52] {
    background-color: #6c757d1a;
    color: #6c757d;
}

/* Grading arts badges */
.badge-grading-kendo[b-mqj14pun52] {
    background-color: #0a58ca1a;
    color: #0a58ca;
}

.badge-grading-iaido[b-mqj14pun52] {
    background-color: #20c9971a;
    color: #20c997;
}

.badge-grading-jodo[b-mqj14pun52] {
    background-color: #d633841a;
    color: #d63384;
}

/* Seminar variant badges */
.badge-seminar-kendo[b-mqj14pun52] {
    background-color: #0a58ca1a;
    color: #0a58ca;
}

.badge-seminar-iaido[b-mqj14pun52] {
    background-color: #20c9971a;
    color: #20c997;
}

.badge-seminar-jodo[b-mqj14pun52] {
    background-color: #d633841a;
    color: #d63384;
}

.badge-seminar-mixed[b-mqj14pun52] {
    background-color: #6f42c11a;
    color: #6f42c1;
}

/* Header strip: type badge left, actions right - its own row, never over the title */
.event-card .event-card-head[b-mqj14pun52] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem .25rem 1rem;
    background-color: transparent;
    border-bottom: 0;
}

    .event-card .event-card-head .badge[b-mqj14pun52] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.event-card .card-actions[b-mqj14pun52] {
    margin-left: auto;
    display: flex;
    flex-shrink: 0;
    gap: .25rem;
    position: relative;
    z-index: 3; /* above the card's stretched-link */
}

    .event-card .card-actions .btn[b-mqj14pun52] {
        position: relative;
        z-index: 4;
    }

    /* Keep Delete apart from the others so it's harder to hit by mistake */
    .event-card .card-actions .action-delete[b-mqj14pun52] {
        margin-left: .5rem;
    }

/* Phones: icon-only buttons get a comfortable tap target */
@media (max-width: 767.98px) {
    .event-card .card-actions .btn[b-mqj14pun52] {
        min-width: 2.25rem;
        min-height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.event-card .stretched-link[b-mqj14pun52]::after {
    z-index: 1;
}

.chip-no-financial[b-mqj14pun52] {
    background: rgba(108, 117, 125, .06);
    color: rgba(108, 117, 125, .4);
    font-style: italic;
}

[data-bs-theme="dark"] .chip-no-financial[b-mqj14pun52] {
    background: rgba(108, 117, 125, .12);
    color: rgba(108, 117, 125, .5);
}

.financial-summary-bar[b-mqj14pun52] {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding-bottom: 0.75rem;
}

.summary-chip[b-mqj14pun52] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
}

.chip-income[b-mqj14pun52] {
    background: #d1e7dd;
    color: #0a3622;
}

.chip-expense[b-mqj14pun52] {
    background: #f8d7da;
    color: #842029;
}
/* /Components/Pages/Membership/FY26/MemberEmailFY26.razor.rz.scp.css */
/* =========================
   QuickGrid – Corporate Theme (scoped, tidy)
   ========================= */

/* Accent + hover variables (consistent across pages) */
:root[b-rnix3v4e32] {
    --col-title-color: var(--my-yellow-color); /* chevrons/accent */
    --col-title-hover-bg: var(--my-yellow-color);
    --col-title-hover-text: var(--my-dark-color);
}

/* -------- Header text / layout -------- */
[b-rnix3v4e32] .quickgrid[theme=corporate] thead th {
    background: var(--surface-bg);
    color: var(--text-color);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

body.darkmode[b-rnix3v4e32]  .quickgrid[theme=corporate] thead th {
    border-bottom-color: rgba(255,255,255,.12);
}

/* Title + chevron */
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-title {
    gap: .4rem;
    font-weight: bold;
    text-transform: uppercase;
    color: inherit; /* inherit from TH */
}

[b-rnix3v4e32] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Buttons (title + options) – DO NOT use 'background' shorthand */
[b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title,
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button {
    background-color: transparent !important; /* preserve bg-image icons */
    color: var(--text-color) !important;
    border: 0;
    border-radius: .25rem;
    padding: .125rem .25rem;
    transition: background-color .15s ease, color .15s ease, filter .15s ease;
}

    /* Yellow hover/focus/active (keeps your “pill” hover) */
    [b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title:hover,
    [b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title:focus,
    [b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title:active,
    [b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button:hover,
    [b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button:focus,
    [b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button:active {
        background-color: var(--col-title-hover-bg) !important;
        color: var(--col-title-hover-text) !important; /* readable on yellow */
        outline: none;
    }
        /* chevron readable over yellow */
        [b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title:hover .sort-indicator,
        [b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title:focus .sort-indicator,
        [b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title:active .sort-indicator {
            color: var(--col-title-hover-text) !important;
        }

/* --- Column options icon (background-image safe + theme aware) --- */
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button {
    /* keep built-in bg-image; just ensure it’s centered and sized */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1rem 1rem !important;
    /* recolor the bg-image via filter: none in light, invert in dark */
    filter: var(--qg-opts-icon-filter, none) !important;
    /* inline <i>/<svg> fallback uses current text color */
    color: var(--text-color) !important;
    opacity: 1 !important;
}
/* Dark mode: flip black bg-image to white */
body.darkmode[b-rnix3v4e32]  .quickgrid[theme=corporate] .col-options-button {
    --qg-opts-icon-filter: invert(1) brightness(1.1) contrast(1.05);
}
/* On hover: show yellow bg + dark glyph (remove invert) */
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button:hover,
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button:focus,
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button:active {
    filter: none !important;
}

/* If icons are inline (font icon / svg), inherit currentColor */
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button .oi,
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button .bi,
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button i,
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button svg,
[b-rnix3v4e32] .quickgrid[theme=corporate] .col-options-button svg *,
[b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title .oi,
[b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title .bi,
[b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title i,
[b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title svg,
[b-rnix3v4e32] .quickgrid[theme=corporate] button.col-title svg * {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* -------- Column borders & padding -------- */
[b-rnix3v4e32] .quickgrid[theme=corporate] th,
[b-rnix3v4e32] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0,0,0,.10);
    padding: .2rem;
}

body.darkmode[b-rnix3v4e32]  .quickgrid[theme=corporate] th,
body.darkmode[b-rnix3v4e32]  .quickgrid[theme=corporate] td {
    border-right-color: rgba(255,255,255,.12);
}

[b-rnix3v4e32] .quickgrid[theme=corporate] th:last-child,
[b-rnix3v4e32] .quickgrid[theme=corporate] td:last-child {
    border-right: none;
}

/* -------- Theme-aware striping -------- */
[b-rnix3v4e32] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: transparent;
}

[b-rnix3v4e32] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: var(--chip-bg);
}

/* Prevent row collapse */
[b-rnix3v4e32] tbody tr {
    height: 1.8rem;
}

/* =========================
   Column-options panel controls
   ========================= */
.checkbox-group[b-rnix3v4e32] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

    .checkbox-group label[b-rnix3v4e32] {
        margin-right: 10px;
        display: flex;
        align-items: center;
    }

/* =========================
   Checkbox cells
   ========================= */
[b-rnix3v4e32] .checkbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-container input[type="checkbox"].styled-checkbox[b-rnix3v4e32] {
    width: 22px;
    height: 22px;
    border: 2px solid #000000;
    background-color: #ffffff;
    transition: all .3s ease;
    appearance: none;
    border-radius: 4px;
    position: relative;
}

    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-rnix3v4e32] {
        border-color: #000000;
        background-color: #f0f0f0;
    }

    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-rnix3v4e32] {
        background-color: var(--my-yellow-color);
        border-color: #000000;
    }

        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-rnix3v4e32]::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 10px;
            height: 10px;
            background-color: #ffffff;
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%);
        }

/* =========================
   (Non-standard) hide column example
   ========================= */
th:contains("Kendo (Sort)")[b-rnix3v4e32],
td:nth-child(1)[b-rnix3v4e32] {
    display: none;
}

/* =========================
   Toolbar v2 – grouped actions (WAKR theme)
   ========================= */
.wakr-toolbar[b-rnix3v4e32] {
    margin-top: .5rem;
    margin-bottom: .75rem;
}

.wakr-toolbar-top[b-rnix3v4e32] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.wakr-summary[b-rnix3v4e32] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--muted-text-color);
    white-space: nowrap;
}

.wakr-dot[b-rnix3v4e32] {
    color: var(--muted-text-color);
}

.wakr-selected-count.active[b-rnix3v4e32] {
    color: var(--my-dark-color);
    font-weight: bold;
}

body.darkmode .wakr-selected-count.active[b-rnix3v4e32] {
    color: var(--my-light-color);
}

.wakr-filter-chips[b-rnix3v4e32] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wakr-filter-badge[b-rnix3v4e32] {
    background: var(--chip-bg);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
}

.wakr-reset-btn[b-rnix3v4e32] {
    font-size: .85rem;
}

.wakr-toolbar-groups[b-rnix3v4e32] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--chip-bg);
    border-radius: 6px;
}

.wakr-btn-group[b-rnix3v4e32] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wakr-group-label[b-rnix3v4e32] {
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted-text-color);
}

.wakr-group-buttons[b-rnix3v4e32] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wakr-group-buttons .btn[b-rnix3v4e32] {
    font-size: .82rem;
    padding: .3rem .6rem;
    min-height: unset;
    white-space: nowrap;
}

.wakr-group-buttons .btn:disabled[b-rnix3v4e32] {
    opacity: .55;
    cursor: not-allowed;
}

.wakr-btn-primary[b-rnix3v4e32] {
    background-color: var(--my-yellow-color);
    border-color: var(--my-yellow-color);
    color: var(--my-dark-color);
    font-weight: bold;
}

    .wakr-btn-primary:hover[b-rnix3v4e32],
    .wakr-btn-primary:focus[b-rnix3v4e32],
    .wakr-btn-primary:active[b-rnix3v4e32] {
        background-color: var(--my-yellow-color) !important;
        border-color: var(--my-yellow-color) !important;
        color: var(--my-dark-color) !important;
        filter: brightness(.95);
    }

/* =========================
   Pill/flag columns
   ========================= */
.grid .paidup-column[b-rnix3v4e32],
.grid .juniorsenior-column[b-rnix3v4e32],
.grid .gender-column[b-rnix3v4e32],
.grid .memtype-column[b-rnix3v4e32] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0,0,0,.02);
}

.grid .focused .paidup-column[b-rnix3v4e32],
.grid .focused .juniorsenior-column[b-rnix3v4e32],
.grid .focused .gender-column[b-rnix3v4e32],
.grid .focused .memtype-column[b-rnix3v4e32] {
    border: 1px solid #fff;
}

/* Paid/Due */
.grid .paidup-column.paid[b-rnix3v4e32] {
    font-weight: bold;
    background-color: #8df1b3;
}

.grid .paidup-column.due[b-rnix3v4e32] {
    background-color: #d5a6bd;
}

.grid .paidup-column.paid[b-rnix3v4e32]::after {
    content: "PAID";
}

.grid .paidup-column.due[b-rnix3v4e32]::after {
    content: "DUE";
}

/* Junior/Senior */
.grid .juniorsenior-column.senior[b-rnix3v4e32] {
    font-weight: bold;
    background-color: #ffd800;
}

.grid .juniorsenior-column.junior[b-rnix3v4e32]::after {
    content: "junior";
}

.grid .juniorsenior-column.senior[b-rnix3v4e32]::after {
    content: "senior";
}

/* Gender */
.grid .gender-column.male[b-rnix3v4e32] {
    font-weight: bold;
    background-color: #6fa8dc;
}

.grid .gender-column.female[b-rnix3v4e32] {
    background-color: #f982e9;
}

.grid .gender-column.other[b-rnix3v4e32] {
    background-color: #9B59B6;
}

.grid .gender-column.male[b-rnix3v4e32]::after {
    content: "male";
}

.grid .gender-column.female[b-rnix3v4e32]::after {
    content: "female";
}

.grid .gender-column.other[b-rnix3v4e32]::after {
    content: "other";
}

/* Membership type */
.grid .memtype-column.new[b-rnix3v4e32] {
    background-color: #8df1b3;
}

.grid .memtype-column.renew[b-rnix3v4e32] {
    font-weight: bold;
}

.grid .memtype-column.life[b-rnix3v4e32] {
    font-weight: bold;
    background-color: #F87C1D;
}

.grid .memtype-column.new[b-rnix3v4e32]::after {
    content: "new";
}

.grid .memtype-column.renew[b-rnix3v4e32]::after {
    content: "renew";
}

.grid .memtype-column.life[b-rnix3v4e32]::after {
    content: "life";
}
/* /Components/Pages/Membership/FY26/MemberEmailGradingFY26.razor.rz.scp.css */
/* =========================
   QuickGrid – Corporate Theme (scoped, tidy)
   ========================= */

/* Accent for headers/sort chevrons + hover colors (consistent across pages) */
:root[b-tffoaxxrk1] {
    --col-title-color: var(--my-yellow-color);
    --col-title-hover-bg: var(--my-yellow-color);
    --col-title-hover-text: var(--my-dark-color);
}

/* -------- Header cells use theme colors -------- */
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th {
    background: var(--surface-bg);
    color: var(--text-color);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

body.darkmode[b-tffoaxxrk1]  .quickgrid[theme=corporate] thead th {
    border-bottom-color: rgba(255,255,255,.12);
}

/* Title layout + chevron accent */
[b-tffoaxxrk1] .quickgrid[theme=corporate] .col-title {
    gap: .4rem;
    font-weight: bold;
    text-transform: uppercase;
    color: inherit; /* inherit from TH */
}

[b-tffoaxxrk1] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Header title/options buttons (avoid 'background:' shorthand so we don't wipe bg-image icons) */
[b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title,
[b-tffoaxxrk1] .quickgrid[theme=corporate] .col-options-button {
    background-color: transparent !important; /* keep any background-image icon */
    color: var(--text-color) !important;
    border: 0;
    border-radius: .25rem;
    padding: .125rem .25rem;
    transition: background-color .15s ease, color .15s ease, filter .15s ease;
}

    /* Hover/focus/active: yellow pill + dark text/chevron */
    [b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title:hover,
    [b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title:focus,
    [b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title:active,
    [b-tffoaxxrk1] .quickgrid[theme=corporate] .col-options-button:hover,
    [b-tffoaxxrk1] .quickgrid[theme=corporate] .col-options-button:focus,
    [b-tffoaxxrk1] .quickgrid[theme=corporate] .col-options-button:active {
        background-color: var(--col-title-hover-bg) !important;
        color: var(--col-title-hover-text) !important;
        outline: none;
    }
        /* Keep chevron readable over yellow */
        [b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title:hover .sort-indicator,
        [b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title:focus .sort-indicator,
        [b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title:active .sort-indicator {
            color: var(--col-title-hover-text) !important;
        }

/* -------- Column options icon (background-image safe + theme aware) -------- */
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button {
    /* keep background-image icon intact and centered */
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1rem 1rem !important;
    /* inline <i>/<svg> fallback uses current text color */
    color: var(--text-color) !important;
    opacity: 1 !important; /* some skins fade this */
    /* recolor bg-image via filter: none in light, inverted in dark */
    filter: var(--qg-opts-icon-filter, none) !important;
}
/* Dark mode: flip black bg-image icon to white */
body.darkmode[b-tffoaxxrk1]  .quickgrid[theme=corporate] thead th .col-options-button {
    --qg-opts-icon-filter: invert(1) brightness(1.1) contrast(1.05);
}
/* On hover/focus/active: yellow background + dark glyph (remove invert) */
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button:hover,
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button:focus,
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button:active {
    background-color: var(--col-title-hover-bg) !important;
    color: var(--col-title-hover-text) !important;
    filter: none !important;
    outline: none;
}
/* If the icon is inline (font icon/SVG), inherit currentColor */
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button .oi,
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button .bi,
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button i,
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button svg,
[b-tffoaxxrk1] .quickgrid[theme=corporate] thead th .col-options-button svg *,
[b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title .oi,
[b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title .bi,
[b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title i,
[b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title svg,
[b-tffoaxxrk1] .quickgrid[theme=corporate] button.col-title svg * {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* -------- Column borders, padding, striping -------- */
[b-tffoaxxrk1] .quickgrid[theme=corporate] th,
[b-tffoaxxrk1] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0,0,0,.10);
    padding: .2rem;
}

body.darkmode[b-tffoaxxrk1]  .quickgrid[theme=corporate] th,
body.darkmode[b-tffoaxxrk1]  .quickgrid[theme=corporate] td {
    border-right-color: rgba(255,255,255,.12);
}

[b-tffoaxxrk1] .quickgrid[theme=corporate] th:last-child,
[b-tffoaxxrk1] .quickgrid[theme=corporate] td:last-child {
    border-right: none;
}

[b-tffoaxxrk1] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: transparent;
}

[b-tffoaxxrk1] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: var(--chip-bg);
}

/* Prevent row collapse */
[b-tffoaxxrk1] tbody tr {
    height: 1.8rem;
}

/* =========================
   Column-options panel controls
   ========================= */
.checkbox-group[b-tffoaxxrk1] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

    .checkbox-group label[b-tffoaxxrk1] {
        margin-right: 10px;
        display: flex;
        align-items: center;
    }

/* =========================
   Checkbox cells
   ========================= */
[b-tffoaxxrk1] .checkbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-container input[type="checkbox"].styled-checkbox[b-tffoaxxrk1] {
    width: 22px;
    height: 22px;
    border: 2px solid #000000;
    background-color: #ffffff;
    transition: all .3s ease;
    appearance: none;
    border-radius: 4px;
    position: relative;
}

    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-tffoaxxrk1] {
        border-color: #000000;
        background-color: #f0f0f0;
    }

    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-tffoaxxrk1] {
        background-color: var(--my-yellow-color);
        border-color: #000000;
    }

        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-tffoaxxrk1]::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 10px;
            height: 10px;
            background-color: #ffffff;
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%);
        }

/* =========================
   (Non-standard) hide column example
   ========================= */
th:contains("Kendo (Sort)")[b-tffoaxxrk1],
td:nth-child(1)[b-tffoaxxrk1] {
    display: none;
}

/* =========================
   Toolbar v2 – grouped actions (WAKR theme)
   ========================= */
.wakr-toolbar[b-tffoaxxrk1] {
    margin-top: .5rem;
    margin-bottom: .75rem;
}

.wakr-toolbar-top[b-tffoaxxrk1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.wakr-summary[b-tffoaxxrk1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--muted-text-color);
    white-space: nowrap;
}

.wakr-dot[b-tffoaxxrk1] {
    color: var(--muted-text-color);
}

.wakr-selected-count.active[b-tffoaxxrk1] {
    color: var(--my-dark-color);
    font-weight: bold;
}

body.darkmode .wakr-selected-count.active[b-tffoaxxrk1] {
    color: var(--my-light-color);
}

.wakr-filter-chips[b-tffoaxxrk1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wakr-filter-badge[b-tffoaxxrk1] {
    background: var(--chip-bg);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
}

.wakr-reset-btn[b-tffoaxxrk1] {
    font-size: .85rem;
}

.wakr-toolbar-groups[b-tffoaxxrk1] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--chip-bg);
    border-radius: 6px;
}

.wakr-btn-group[b-tffoaxxrk1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wakr-group-label[b-tffoaxxrk1] {
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted-text-color);
}

.wakr-group-buttons[b-tffoaxxrk1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wakr-group-buttons .btn[b-tffoaxxrk1] {
    font-size: .82rem;
    padding: .3rem .6rem;
    min-height: unset;
    white-space: nowrap;
}

.wakr-group-buttons .btn:disabled[b-tffoaxxrk1] {
    opacity: .55;
    cursor: not-allowed;
}

.wakr-btn-primary[b-tffoaxxrk1] {
    background-color: var(--my-yellow-color);
    border-color: var(--my-yellow-color);
    color: var(--my-dark-color);
    font-weight: bold;
}

    .wakr-btn-primary:hover[b-tffoaxxrk1],
    .wakr-btn-primary:focus[b-tffoaxxrk1],
    .wakr-btn-primary:active[b-tffoaxxrk1] {
        background-color: var(--my-yellow-color) !important;
        border-color: var(--my-yellow-color) !important;
        color: var(--my-dark-color) !important;
        filter: brightness(.95);
    }

/* =========================
   Pill/flag columns
   ========================= */
.grid .paidup-column[b-tffoaxxrk1],
.grid .yesno-column[b-tffoaxxrk1],
.grid .juniorsenior-column[b-tffoaxxrk1],
.grid .gender-column[b-tffoaxxrk1],
.grid .memtype-column[b-tffoaxxrk1] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0,0,0,.02);
}

.grid .focused .paidup-column[b-tffoaxxrk1],
.grid .focused .yesno-column[b-tffoaxxrk1],
.grid .focused .juniorsenior-column[b-tffoaxxrk1],
.grid .focused .gender-column[b-tffoaxxrk1],
.grid .focused .memtype-column[b-tffoaxxrk1] {
    border: 1px solid #fff;
}

/* Paid/Due */
.grid .paidup-column.paid[b-tffoaxxrk1] {
    font-weight: bold;
    background-color: #8df1b3;
}

.grid .paidup-column.due[b-tffoaxxrk1] {
    background-color: #d5a6bd;
}

.grid .paidup-column.paid[b-tffoaxxrk1]::after {
    content: "PAID";
}

.grid .paidup-column.due[b-tffoaxxrk1]::after {
    content: "DUE";
}

/* Yes/No */
.grid .yesno-column.yes[b-tffoaxxrk1] {
    font-weight: bold;
    background-color: #8df1b3;
}

.grid .yesno-column.no[b-tffoaxxrk1] {
    background-color: #d5a6bd;
}

.grid .yesno-column.yes[b-tffoaxxrk1]::after {
    content: "Yes";
}

.grid .yesno-column.no[b-tffoaxxrk1]::after {
    content: "No";
}

/* Junior/Senior */
.grid .juniorsenior-column.senior[b-tffoaxxrk1] {
    font-weight: bold;
    background-color: #ffd800;
}

.grid .juniorsenior-column.junior[b-tffoaxxrk1]::after {
    content: "junior";
}

.grid .juniorsenior-column.senior[b-tffoaxxrk1]::after {
    content: "senior";
}

/* Gender */
.grid .gender-column.male[b-tffoaxxrk1] {
    font-weight: bold;
    background-color: #6fa8dc;
}

.grid .gender-column.female[b-tffoaxxrk1] {
    background-color: #f982e9;
}

.grid .gender-column.other[b-tffoaxxrk1] {
    background-color: #9B59B6;
}

.grid .gender-column.male[b-tffoaxxrk1]::after {
    content: "male";
}

.grid .gender-column.female[b-tffoaxxrk1]::after {
    content: "female";
}

.grid .gender-column.other[b-tffoaxxrk1]::after {
    content: "other";
}

/* Membership type */
.grid .memtype-column.new[b-tffoaxxrk1] {
    background-color: #8df1b3;
}

.grid .memtype-column.renew[b-tffoaxxrk1] {
    font-weight: bold;
}

.grid .memtype-column.life[b-tffoaxxrk1] {
    font-weight: bold;
    background-color: #F87C1D;
}

.grid .memtype-column.new[b-tffoaxxrk1]::after {
    content: "new";
}

.grid .memtype-column.renew[b-tffoaxxrk1]::after {
    content: "renew";
}

.grid .memtype-column.life[b-tffoaxxrk1]::after {
    content: "life";
}

/* =========================
   Misc form bits on this page
   ========================= */
.container[b-tffoaxxrk1] {
    width: 500px;
    max-width: 100%;
}

.form-group[b-tffoaxxrk1] {
    margin-bottom: 12px;
}

label[b-tffoaxxrk1] {
    display: block;
    margin-bottom: 4px;
}

input[b-tffoaxxrk1] {
    border: 1px solid #ccc;
}

input[b-tffoaxxrk1], .ql-editor[b-tffoaxxrk1] {
    padding: 4px;
    font-size: 14px;
}

#editor[b-tffoaxxrk1] {
    height: 130px;
}
.event-fin-summary[b-tffoaxxrk1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
}

.fin-group[b-tffoaxxrk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.fin-label[b-tffoaxxrk1] {
    color: #6c757d;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fin-value[b-tffoaxxrk1] {
    font-size: 0.9rem;
    font-weight: 600;
}

.fin-divider[b-tffoaxxrk1] {
    width: 1px;
    height: 32px;
    background: var(--bs-border-color, #dee2e6);
}

.fin-paid .fin-value[b-tffoaxxrk1] {
    color: #198754;
}

.fin-unpaid .fin-value[b-tffoaxxrk1] {
    color: #dc3545;
}

.fin-refund .fin-value[b-tffoaxxrk1] {
    color: #fd7e14;
}

.fin-surplus .fin-value[b-tffoaxxrk1] {
    color: #198754;
}

.fin-deficit .fin-value[b-tffoaxxrk1] {
    color: #dc3545;
}
/* /Components/Pages/Membership/FY27/EventFY27.razor.rz.scp.css */
.form-section[b-gztiqbuq5i] {
    border: 1px solid rgba(0,0,0,.06);
}

    .form-section + .form-section[b-gztiqbuq5i] {
        margin-top: 1rem;
    }

.card-header[b-gztiqbuq5i] {
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.avatar-circle[b-gztiqbuq5i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f3f5;
    font-size: .75rem;
    font-weight: 600;
    color: #495057;
}

/* compact time fields */
.time-input[b-gztiqbuq5i] {
    min-width: 8rem;
}
/* ~HH:MM fits nicely */

/* --- Card sections --- */
.form-section[b-gztiqbuq5i] {
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--my-yellow-color);
    border-radius: .75rem;
    overflow: hidden;
}

    .form-section + .form-section[b-gztiqbuq5i] {
        margin-top: 1rem;
    }

    .form-section .card-header[b-gztiqbuq5i] {
        background: #fff;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        .form-section .card-header .bi[b-gztiqbuq5i] {
            opacity: .6;
        }

/* --- Compact, aligned inputs with leading icons --- */
.input-icon[b-gztiqbuq5i] {
    position: relative;
}

    .input-icon > .bi[b-gztiqbuq5i] {
        position: absolute;
        left: .75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        opacity: .55;
        font-size: 1rem;
    }

    /* ::deep - the inputs are rendered by InputText/InputDate/InputSelect child
       components, which scoped CSS can't otherwise reach (the icon then sat over the text). */
    .input-icon[b-gztiqbuq5i]  .form-control,
    .input-icon[b-gztiqbuq5i]  .form-select {
        padding-left: 2.25rem;
    }

/* Narrow time inputs */
.time-input[b-gztiqbuq5i] {
    max-width: 170px;
}

/* Sticky preview polish */
.sticky-top[b-gztiqbuq5i] {
    z-index: 2;
}

.preview-card .badge[b-gztiqbuq5i] {
    font-weight: 600;
}

/* Avatar chip (admins list) */
.avatar-circle[b-gztiqbuq5i] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-100);
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-gray-700);
}

/* Art chips (Kendo/Iaido/Jodo including seminar codes) */
.badge-art[b-gztiqbuq5i] {
    border: 1px solid transparent;
    font-weight: 600;
}

    .badge-art[data-art="K"][b-gztiqbuq5i],
    .badge-art[data-art="KS"][b-gztiqbuq5i] {
        color: #0d6efd;
        background-color: rgba(13,110,253,.08);
        border-color: rgba(13,110,253,.28);
    }

    .badge-art[data-art="I"][b-gztiqbuq5i],
    .badge-art[data-art="IS"][b-gztiqbuq5i],
    .badge-art[data-art="IJS"][b-gztiqbuq5i] {
        color: #6f42c1;
        background-color: rgba(111,66,193,.08);
        border-color: rgba(111,66,193,.28);
    }

    .badge-art[data-art="J"][b-gztiqbuq5i],
    .badge-art[data-art="JS"][b-gztiqbuq5i] {
        color: #198754;
        background-color: rgba(25,135,84,.08);
        border-color: rgba(25,135,84,.28);
    }

/* Subtle section footnotes */
.form-text[b-gztiqbuq5i] {
    margin-top: .25rem;
    color: var(--bs-gray-600);
}

/* Buttons */
.btn svg[b-gztiqbuq5i], .btn i[b-gztiqbuq5i] {
    vertical-align: -2px;
}

/* Validation summary as a tidy alert */
.validation-summary-valid[b-gztiqbuq5i] {
    display: none;
}

.validation-summary-errors[b-gztiqbuq5i] {
    border-left: 4px solid var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text);
    padding: .75rem .75rem .75rem 1rem;
    border-radius: .5rem;
}

/* Calendar chip */
.calendar-chip[b-gztiqbuq5i] {
    width: 64px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    text-align: center;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

    .calendar-chip .month[b-gztiqbuq5i] {
        background: var(--my-yellow-color);
        color: #fff;
        font-weight: 700;
        font-size: .75rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: .25rem .25rem;
    }

    .calendar-chip .day[b-gztiqbuq5i] {
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1.15;
        padding-top: .15rem;
    }

    .calendar-chip .dow[b-gztiqbuq5i] {
        font-size: .72rem;
        color: var(--bs-gray-600);
        padding-bottom: .25rem;
    }

/* Make the date row breathe and wrap nicely */
.calendar-row[b-gztiqbuq5i] {
    gap: .75rem;
}

.quick-picks .btn[b-gztiqbuq5i] {
    padding: .15rem .5rem;
}

/* /Components/Pages/Membership/FY27/EventSelectFY27.razor.rz.scp.css */
/* ===== Event cards (polish) ===== */
.event-card[b-ur5w5065s5] {
    cursor: pointer;
    background-color: var(--surface-bg, #fff);
    color: var(--text-color, #111);
    border-color: rgba(0,0,0,.125);
}

    .event-card .card-body[b-ur5w5065s5] {
        padding: .9rem 1rem .75rem;
        background-color: inherit;
        color: inherit;
    }

/* Title: full card width, wraps to two lines before truncating */
.title[b-ur5w5065s5] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* Meta row: date & location on one line */
.meta[b-ur5w5065s5] {
    display: flex;
    gap: .75rem;
    align-items: center;
    overflow: hidden;
    color: var(--muted-text-color, #6c757d);
}

    .meta .text-truncate[b-ur5w5065s5] {
        max-width: 100%;
    }

/* Stat chips (4 on md+, 2 on xs) */
.stat-chips[b-ur5w5065s5] {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    overflow: hidden;
}

    .stat-chips .chip[b-ur5w5065s5] {
        flex: 1 1 0;
        min-width: 0;
    }

@media (max-width: 575.98px) {
    .stat-chips[b-ur5w5065s5] {
        flex-wrap: wrap;
    }

        /* Phones: keep each chip whole and let it drop to the next row,
           instead of squeezing its text onto two lines */
        .stat-chips .chip[b-ur5w5065s5] {
            flex: 1 0 auto;
            white-space: nowrap;
        }

    /* Date stays on one line; the location truncates instead */
    .meta > span:first-child[b-ur5w5065s5] {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .meta > .text-truncate[b-ur5w5065s5] {
        min-width: 0;
    }
}

.chip-surplus[b-ur5w5065s5] {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

.chip-deficit[b-ur5w5065s5] {
    background: rgba(220, 53, 69, .12);
    color: #dc3545;
}

[data-bs-theme="dark"] .chip-surplus[b-ur5w5065s5] {
    background: rgba(25, 135, 84, .25);
    color: #75b798;
}

[data-bs-theme="dark"] .chip-deficit[b-ur5w5065s5] {
    background: rgba(220, 53, 69, .25);
    color: #ea868f;
}
/* Chip */
.chip[b-ur5w5065s5] {
    display: inline-block;
    font-size: .8rem;
    line-height: 1.6;
    padding: .15rem .5rem;
    border-radius: 9999px;
    background: var(--chip-bg, rgba(108,117,125,.08)); /* secondary-subtle */
    color: var(--muted-text-color, #6c757d);
    text-align: center;
    user-select: none;
}

/* ===== Type stripes (left border) ===== */
.type-grading[b-ur5w5065s5] {
    border-left: 6px solid #0d6efd;
}

.type-seminar[b-ur5w5065s5] {
    border-left: 6px solid #20c997;
}

.type-competition[b-ur5w5065s5] {
    border-left: 6px solid #d63384;
}

.type-committee[b-ur5w5065s5] {
    border-left: 6px solid #6f42c1;
}

.type-training[b-ur5w5065s5] {
    border-left: 6px solid #198754;
}

.type-exam[b-ur5w5065s5] {
    border-left: 6px solid #fd7e14;
}

.type-default[b-ur5w5065s5] {
    border-left: 6px solid #6c757d;
}

/* Arts inside grading */
.type-grading-kendo[b-ur5w5065s5] {
    border-left: 6px solid #0a58ca;
}

.type-grading-iaido[b-ur5w5065s5] {
    border-left: 6px solid #20c997;
}

.type-grading-jodo[b-ur5w5065s5] {
    border-left: 6px solid #d63384;
}

/* Seminar variants */
.type-seminar-kendo[b-ur5w5065s5] {
    border-left: 6px solid #0a58ca;
}

.type-seminar-iaido[b-ur5w5065s5] {
    border-left: 6px solid #20c997;
}

.type-seminar-jodo[b-ur5w5065s5] {
    border-left: 6px solid #d63384;
}

.type-seminar-mixed[b-ur5w5065s5] {
    border-left: 6px solid #6f42c1;
}

/* ===== Badges (keep brand hues, translucent bg) ===== */
.badge-grading[b-ur5w5065s5] {
    background-color: #0d6efd1a;
    color: #0d6efd;
}

.badge-seminar[b-ur5w5065s5] {
    background-color: #20c9971a;
    color: #20c997;
}

.badge-competition[b-ur5w5065s5] {
    background-color: #d633841a;
    color: #d63384;
}

.badge-committee[b-ur5w5065s5] {
    background-color: #6f42c11a;
    color: #6f42c1;
}

.badge-training[b-ur5w5065s5] {
    background-color: #1987541a;
    color: #198754;
}

.badge-exam[b-ur5w5065s5] {
    background-color: #fd7e141a;
    color: #fd7e14;
}

.badge-default[b-ur5w5065s5] {
    background-color: #6c757d1a;
    color: #6c757d;
}

/* Grading arts badges */
.badge-grading-kendo[b-ur5w5065s5] {
    background-color: #0a58ca1a;
    color: #0a58ca;
}

.badge-grading-iaido[b-ur5w5065s5] {
    background-color: #20c9971a;
    color: #20c997;
}

.badge-grading-jodo[b-ur5w5065s5] {
    background-color: #d633841a;
    color: #d63384;
}

/* Seminar variant badges */
.badge-seminar-kendo[b-ur5w5065s5] {
    background-color: #0a58ca1a;
    color: #0a58ca;
}

.badge-seminar-iaido[b-ur5w5065s5] {
    background-color: #20c9971a;
    color: #20c997;
}

.badge-seminar-jodo[b-ur5w5065s5] {
    background-color: #d633841a;
    color: #d63384;
}

.badge-seminar-mixed[b-ur5w5065s5] {
    background-color: #6f42c11a;
    color: #6f42c1;
}

/* Header strip: type badge left, actions right - its own row, never over the title */
.event-card .event-card-head[b-ur5w5065s5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem .25rem 1rem;
    background-color: transparent;
    border-bottom: 0;
}

    .event-card .event-card-head .badge[b-ur5w5065s5] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.event-card .card-actions[b-ur5w5065s5] {
    margin-left: auto;
    display: flex;
    flex-shrink: 0;
    gap: .25rem;
    position: relative;
    z-index: 3; /* above the card's stretched-link */
}

    .event-card .card-actions .btn[b-ur5w5065s5] {
        position: relative;
        z-index: 4;
    }

    /* Keep Delete apart from the others so it's harder to hit by mistake */
    .event-card .card-actions .action-delete[b-ur5w5065s5] {
        margin-left: .5rem;
    }

/* Phones: icon-only buttons get a comfortable tap target */
@media (max-width: 767.98px) {
    .event-card .card-actions .btn[b-ur5w5065s5] {
        min-width: 2.25rem;
        min-height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.event-card .stretched-link[b-ur5w5065s5]::after {
    z-index: 1;
}

.chip-no-financial[b-ur5w5065s5] {
    background: rgba(108, 117, 125, .06);
    color: rgba(108, 117, 125, .4);
    font-style: italic;
}

[data-bs-theme="dark"] .chip-no-financial[b-ur5w5065s5] {
    background: rgba(108, 117, 125, .12);
    color: rgba(108, 117, 125, .5);
}

.financial-summary-bar[b-ur5w5065s5] {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding-bottom: 0.75rem;
}

.summary-chip[b-ur5w5065s5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
}

.chip-income[b-ur5w5065s5] {
    background: #d1e7dd;
    color: #0a3622;
}

.chip-expense[b-ur5w5065s5] {
    background: #f8d7da;
    color: #842029;
}
/* /Components/Pages/Membership/FY27/EventSetupWizardFY27.razor.rz.scp.css */
/* ===== Event setup wizard ===== */
.wizard[b-jbgdc47lzc] {
    max-width: 52rem;
}

/* Matches the member registration wizard's progress bar */
.wizard-progress[b-jbgdc47lzc] {
    height: 2rem;
}

    .wizard-progress .progress-bar[b-jbgdc47lzc] {
        background-color: var(--my-yellow-color);
        color: #000;
        font-weight: bold;
        white-space: nowrap;
        overflow: visible;
        padding-left: .75rem;
        text-align: left;
    }

/* Step names: done steps are links back */
.wizard-steps[b-jbgdc47lzc] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--muted-text-color, #6c757d);
    counter-reset: wstep;
}

    .wizard-steps li[b-jbgdc47lzc] {
        counter-increment: wstep;
        display: flex;
        align-items: center;
        gap: .35rem;
    }

        .wizard-steps li[b-jbgdc47lzc]::before {
            content: counter(wstep);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 50%;
            border: 1px solid currentColor;
            font-size: .75rem;
        }

        .wizard-steps li.current[b-jbgdc47lzc] {
            color: var(--text-color, #111);
            font-weight: 600;
        }

            .wizard-steps li.current[b-jbgdc47lzc]::before {
                background: var(--my-yellow-color);
                border-color: var(--my-yellow-color);
                color: #000;
            }

        .wizard-steps li.done[b-jbgdc47lzc]::before {
            content: "✓";
        }

/* Plain text links - the app theme paints every .btn (even .btn-link) as a black box */
.link-button[b-jbgdc47lzc] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--bs-link-color, #006bb7);
    text-decoration: underline;
    cursor: pointer;
}

    .link-button:hover[b-jbgdc47lzc],
    .link-button:focus-visible[b-jbgdc47lzc] {
        color: var(--my-dark-color, #111);
        background: var(--my-yellow-color);
    }

/* Step 1: type cards */
.type-grid[b-jbgdc47lzc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .75rem;
}

.type-card[b-jbgdc47lzc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .9rem;
    text-align: left;
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background: var(--surface-bg, #fff);
    color: var(--text-color, #111);
    transition: border-color .1s ease, box-shadow .1s ease;
}

    .type-card:hover[b-jbgdc47lzc] {
        border-color: var(--my-yellow-color);
    }

    .type-card:focus-visible[b-jbgdc47lzc] {
        outline: 2px solid var(--my-yellow-color);
        outline-offset: 2px;
    }

    .type-card.selected[b-jbgdc47lzc] {
        border-color: var(--my-yellow-color);
        box-shadow: 0 0 0 .2rem rgba(255, 209, 0, .25);
    }

    .type-card .bi[b-jbgdc47lzc] {
        font-size: 1.4rem;
    }

    .type-card .type-name[b-jbgdc47lzc] {
        font-weight: 600;
    }

    .type-card .type-blurb[b-jbgdc47lzc] {
        font-size: .8rem;
        color: var(--muted-text-color, #6c757d);
    }

/* Step 4 */
.fee-note[b-jbgdc47lzc] {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    height: 100%;
    padding: .6rem .75rem;
    border-radius: .5rem;
    background: var(--chip-bg, rgba(108, 117, 125, .08));
}

    .fee-note .bi[b-jbgdc47lzc] {
        font-size: 1.25rem;
    }

.date-step[b-jbgdc47lzc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .25rem;
    border-radius: 50%;
    background: var(--my-yellow-color);
    color: #000;
    font-size: .75rem;
    font-weight: 700;
}

/* Step 5 */
.review-list[b-jbgdc47lzc] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: .35rem 1rem;
    margin-bottom: 1rem;
}

    .review-list dt[b-jbgdc47lzc] {
        font-weight: 600;
        color: var(--muted-text-color, #6c757d);
    }

    .review-list dd[b-jbgdc47lzc] {
        margin: 0;
    }

@media (max-width: 575.98px) {
    .review-list[b-jbgdc47lzc] {
        grid-template-columns: 1fr;
        gap: 0;
    }

        .review-list dd[b-jbgdc47lzc] {
            margin-bottom: .5rem;
        }
}

.announce-preview[b-jbgdc47lzc] {
    padding: .75rem 1rem;
    border-left: 4px solid var(--my-yellow-color);
    border-radius: .25rem;
    background: var(--chip-bg, rgba(108, 117, 125, .08));
    font-size: .9rem;
}

/* Back / Next */
.wizard-nav[b-jbgdc47lzc] {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1rem;
}

/* Step 6 */
.next-step[b-jbgdc47lzc] {
    margin-bottom: .75rem;
}

    .next-step.done[b-jbgdc47lzc] {
        border-color: var(--bs-success, #198754);
    }

.step-num[b-jbgdc47lzc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--my-yellow-color);
    color: #000;
    font-size: .9rem;
    font-weight: 700;
}

/* Step 2: hour + minutes side by side */
.time-pick[b-jbgdc47lzc] {
    display: flex;
    gap: .35rem;
}

    .time-pick .form-select:first-child[b-jbgdc47lzc] {
        flex: 1 1 auto;
    }

    .time-pick .form-select:last-child[b-jbgdc47lzc] {
        flex: 0 0 5.5rem;
    }

    .type-card:disabled[b-jbgdc47lzc] {
        opacity: .45;
        cursor: not-allowed;
    }

        .type-card:disabled:hover[b-jbgdc47lzc] {
            border-color: var(--bs-border-color, #dee2e6);
        }

/* Step 1: art buttons, then "or Taikai" set slightly apart */
.art-row[b-jbgdc47lzc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.art-or[b-jbgdc47lzc] {
    color: var(--muted-text-color, #6c757d);
    font-size: .85rem;
}

/* Automation timeline */
.timeline-table td[b-jbgdc47lzc], .timeline-table th[b-jbgdc47lzc] {
    vertical-align: middle;
}
/* /Components/Pages/Membership/FY27/MemberEmailFY27.razor.rz.scp.css */
/* =========================
   QuickGrid – Corporate Theme (scoped, tidy)
   ========================= */

/* Accent + hover variables (consistent across pages) */
:root[b-vnwtewq0sy] {
    --col-title-color: var(--my-yellow-color); /* chevrons/accent */
    --col-title-hover-bg: var(--my-yellow-color);
    --col-title-hover-text: var(--my-dark-color);
}

/* -------- Header text / layout -------- */
[b-vnwtewq0sy] .quickgrid[theme=corporate] thead th {
    background: var(--surface-bg);
    color: var(--text-color);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

body.darkmode[b-vnwtewq0sy]  .quickgrid[theme=corporate] thead th {
    border-bottom-color: rgba(255,255,255,.12);
}

/* Title + chevron */
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-title {
    gap: .4rem;
    font-weight: bold;
    text-transform: uppercase;
    color: inherit; /* inherit from TH */
}

[b-vnwtewq0sy] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Buttons (title + options) – DO NOT use 'background' shorthand */
[b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title,
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button {
    background-color: transparent !important; /* preserve bg-image icons */
    color: var(--text-color) !important;
    border: 0;
    border-radius: .25rem;
    padding: .125rem .25rem;
    transition: background-color .15s ease, color .15s ease, filter .15s ease;
}

    /* Yellow hover/focus/active (keeps your “pill” hover) */
    [b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title:hover,
    [b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title:focus,
    [b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title:active,
    [b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button:hover,
    [b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button:focus,
    [b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button:active {
        background-color: var(--col-title-hover-bg) !important;
        color: var(--col-title-hover-text) !important; /* readable on yellow */
        outline: none;
    }
        /* chevron readable over yellow */
        [b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title:hover .sort-indicator,
        [b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title:focus .sort-indicator,
        [b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title:active .sort-indicator {
            color: var(--col-title-hover-text) !important;
        }

/* --- Column options icon (background-image safe + theme aware) --- */
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button {
    /* keep built-in bg-image; just ensure it’s centered and sized */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1rem 1rem !important;
    /* recolor the bg-image via filter: none in light, invert in dark */
    filter: var(--qg-opts-icon-filter, none) !important;
    /* inline <i>/<svg> fallback uses current text color */
    color: var(--text-color) !important;
    opacity: 1 !important;
}
/* Dark mode: flip black bg-image to white */
body.darkmode[b-vnwtewq0sy]  .quickgrid[theme=corporate] .col-options-button {
    --qg-opts-icon-filter: invert(1) brightness(1.1) contrast(1.05);
}
/* On hover: show yellow bg + dark glyph (remove invert) */
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button:hover,
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button:focus,
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button:active {
    filter: none !important;
}

/* If icons are inline (font icon / svg), inherit currentColor */
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button .oi,
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button .bi,
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button i,
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button svg,
[b-vnwtewq0sy] .quickgrid[theme=corporate] .col-options-button svg *,
[b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title .oi,
[b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title .bi,
[b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title i,
[b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title svg,
[b-vnwtewq0sy] .quickgrid[theme=corporate] button.col-title svg * {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* -------- Column borders & padding -------- */
[b-vnwtewq0sy] .quickgrid[theme=corporate] th,
[b-vnwtewq0sy] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0,0,0,.10);
    padding: .2rem;
}

body.darkmode[b-vnwtewq0sy]  .quickgrid[theme=corporate] th,
body.darkmode[b-vnwtewq0sy]  .quickgrid[theme=corporate] td {
    border-right-color: rgba(255,255,255,.12);
}

[b-vnwtewq0sy] .quickgrid[theme=corporate] th:last-child,
[b-vnwtewq0sy] .quickgrid[theme=corporate] td:last-child {
    border-right: none;
}

/* -------- Theme-aware striping -------- */
[b-vnwtewq0sy] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: transparent;
}

[b-vnwtewq0sy] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: var(--chip-bg);
}

/* Prevent row collapse */
[b-vnwtewq0sy] tbody tr {
    height: 1.8rem;
}

/* =========================
   Column-options panel controls
   ========================= */
.checkbox-group[b-vnwtewq0sy] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

    .checkbox-group label[b-vnwtewq0sy] {
        margin-right: 10px;
        display: flex;
        align-items: center;
    }

/* =========================
   Checkbox cells
   ========================= */
[b-vnwtewq0sy] .checkbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-container input[type="checkbox"].styled-checkbox[b-vnwtewq0sy] {
    width: 22px;
    height: 22px;
    border: 2px solid #000000;
    background-color: #ffffff;
    transition: all .3s ease;
    appearance: none;
    border-radius: 4px;
    position: relative;
}

    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-vnwtewq0sy] {
        border-color: #000000;
        background-color: #f0f0f0;
    }

    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-vnwtewq0sy] {
        background-color: var(--my-yellow-color);
        border-color: #000000;
    }

        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-vnwtewq0sy]::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 10px;
            height: 10px;
            background-color: #ffffff;
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%);
        }

/* =========================
   (Non-standard) hide column example
   ========================= */
th:contains("Kendo (Sort)")[b-vnwtewq0sy],
td:nth-child(1)[b-vnwtewq0sy] {
    display: none;
}

/* =========================
   Toolbar v2 – grouped actions (WAKR theme)
   ========================= */
.wakr-toolbar[b-vnwtewq0sy] {
    margin-top: .5rem;
    margin-bottom: .75rem;
}

.wakr-toolbar-top[b-vnwtewq0sy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.wakr-summary[b-vnwtewq0sy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--muted-text-color);
    white-space: nowrap;
}

.wakr-dot[b-vnwtewq0sy] {
    color: var(--muted-text-color);
}

.wakr-selected-count.active[b-vnwtewq0sy] {
    color: var(--my-dark-color);
    font-weight: bold;
}

body.darkmode .wakr-selected-count.active[b-vnwtewq0sy] {
    color: var(--my-light-color);
}

.wakr-filter-chips[b-vnwtewq0sy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wakr-filter-badge[b-vnwtewq0sy] {
    background: var(--chip-bg);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
}

.wakr-reset-btn[b-vnwtewq0sy] {
    font-size: .85rem;
}

.wakr-toolbar-groups[b-vnwtewq0sy] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--chip-bg);
    border-radius: 6px;
}

.wakr-btn-group[b-vnwtewq0sy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wakr-group-label[b-vnwtewq0sy] {
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted-text-color);
}

.wakr-group-buttons[b-vnwtewq0sy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wakr-group-buttons .btn[b-vnwtewq0sy] {
    font-size: .82rem;
    padding: .3rem .6rem;
    min-height: unset;
    white-space: nowrap;
}

.wakr-group-buttons .btn:disabled[b-vnwtewq0sy] {
    opacity: .55;
    cursor: not-allowed;
}

.wakr-btn-primary[b-vnwtewq0sy] {
    background-color: var(--my-yellow-color);
    border-color: var(--my-yellow-color);
    color: var(--my-dark-color);
    font-weight: bold;
}

    .wakr-btn-primary:hover[b-vnwtewq0sy],
    .wakr-btn-primary:focus[b-vnwtewq0sy],
    .wakr-btn-primary:active[b-vnwtewq0sy] {
        background-color: var(--my-yellow-color) !important;
        border-color: var(--my-yellow-color) !important;
        color: var(--my-dark-color) !important;
        filter: brightness(.95);
    }

/* =========================
   Pill/flag columns
   ========================= */
.grid .paidup-column[b-vnwtewq0sy],
.grid .juniorsenior-column[b-vnwtewq0sy],
.grid .gender-column[b-vnwtewq0sy],
.grid .memtype-column[b-vnwtewq0sy] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 999px;
    border: 1px solid var(--chip-bg);
    padding: 2px 8px;
    text-align: center;
    background-color: rgba(0,0,0,.02);
}

.grid .focused .paidup-column[b-vnwtewq0sy],
.grid .focused .juniorsenior-column[b-vnwtewq0sy],
.grid .focused .gender-column[b-vnwtewq0sy],
.grid .focused .memtype-column[b-vnwtewq0sy] {
    border: 1px solid #fff;
}

/* Paid/Due */
.grid .paidup-column.paid[b-vnwtewq0sy] {
    font-weight: bold;
    background-color: var(--pill-ok-bg); color: var(--pill-ok-fg);
}

.grid .paidup-column.due[b-vnwtewq0sy] {
    background-color: var(--pill-bad-bg); color: var(--pill-bad-fg);
}

.grid .paidup-column.paid[b-vnwtewq0sy]::after {
    content: "PAID";
}

.grid .paidup-column.due[b-vnwtewq0sy]::after {
    content: "DUE";
}

/* Junior/Senior */
.grid .juniorsenior-column.senior[b-vnwtewq0sy] {
    font-weight: bold;
    background-color: #ffd800;
}

.grid .juniorsenior-column.junior[b-vnwtewq0sy]::after {
    content: "junior";
}

.grid .juniorsenior-column.senior[b-vnwtewq0sy]::after {
    content: "senior";
}

/* Gender */
.grid .gender-column.male[b-vnwtewq0sy] {
    font-weight: bold;
    background-color: #6fa8dc;
}

.grid .gender-column.female[b-vnwtewq0sy] {
    background-color: #f982e9;
}

.grid .gender-column.other[b-vnwtewq0sy] {
    background-color: #9B59B6;
}

.grid .gender-column.male[b-vnwtewq0sy]::after {
    content: "male";
}

.grid .gender-column.female[b-vnwtewq0sy]::after {
    content: "female";
}

.grid .gender-column.other[b-vnwtewq0sy]::after {
    content: "other";
}

/* Membership type */
.grid .memtype-column.new[b-vnwtewq0sy] {
    background-color: var(--pill-ok-bg); color: var(--pill-ok-fg);
}

.grid .memtype-column.renew[b-vnwtewq0sy] {
    font-weight: bold;
}

.grid .memtype-column.life[b-vnwtewq0sy] {
    font-weight: bold;
    background-color: #F87C1D;
}

.grid .memtype-column.new[b-vnwtewq0sy]::after {
    content: "new";
}

.grid .memtype-column.renew[b-vnwtewq0sy]::after {
    content: "renew";
}

.grid .memtype-column.life[b-vnwtewq0sy]::after {
    content: "life";
}
/* /Components/Pages/Membership/FY27/MemberEmailGradingFY27.razor.rz.scp.css */
/* =========================
   QuickGrid – Corporate Theme (scoped, tidy)
   ========================= */

/* Accent for headers/sort chevrons + hover colors (consistent across pages) */
:root[b-irb1s69owh] {
    --col-title-color: var(--my-yellow-color);
    --col-title-hover-bg: var(--my-yellow-color);
    --col-title-hover-text: var(--my-dark-color);
}

/* -------- Header cells use theme colors -------- */
[b-irb1s69owh] .quickgrid[theme=corporate] thead th {
    background: var(--surface-bg);
    color: var(--text-color);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

body.darkmode[b-irb1s69owh]  .quickgrid[theme=corporate] thead th {
    border-bottom-color: rgba(255,255,255,.12);
}

/* Title layout + chevron accent */
[b-irb1s69owh] .quickgrid[theme=corporate] .col-title {
    gap: .4rem;
    font-weight: bold;
    text-transform: uppercase;
    color: inherit; /* inherit from TH */
}

[b-irb1s69owh] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Header title/options buttons (avoid 'background:' shorthand so we don't wipe bg-image icons) */
[b-irb1s69owh] .quickgrid[theme=corporate] button.col-title,
[b-irb1s69owh] .quickgrid[theme=corporate] .col-options-button {
    background-color: transparent !important; /* keep any background-image icon */
    color: var(--text-color) !important;
    border: 0;
    border-radius: .25rem;
    padding: .125rem .25rem;
    transition: background-color .15s ease, color .15s ease, filter .15s ease;
}

    /* Hover/focus/active: yellow pill + dark text/chevron */
    [b-irb1s69owh] .quickgrid[theme=corporate] button.col-title:hover,
    [b-irb1s69owh] .quickgrid[theme=corporate] button.col-title:focus,
    [b-irb1s69owh] .quickgrid[theme=corporate] button.col-title:active,
    [b-irb1s69owh] .quickgrid[theme=corporate] .col-options-button:hover,
    [b-irb1s69owh] .quickgrid[theme=corporate] .col-options-button:focus,
    [b-irb1s69owh] .quickgrid[theme=corporate] .col-options-button:active {
        background-color: var(--col-title-hover-bg) !important;
        color: var(--col-title-hover-text) !important;
        outline: none;
    }
        /* Keep chevron readable over yellow */
        [b-irb1s69owh] .quickgrid[theme=corporate] button.col-title:hover .sort-indicator,
        [b-irb1s69owh] .quickgrid[theme=corporate] button.col-title:focus .sort-indicator,
        [b-irb1s69owh] .quickgrid[theme=corporate] button.col-title:active .sort-indicator {
            color: var(--col-title-hover-text) !important;
        }

/* -------- Column options icon (background-image safe + theme aware) -------- */
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button {
    /* keep background-image icon intact and centered */
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1rem 1rem !important;
    /* inline <i>/<svg> fallback uses current text color */
    color: var(--text-color) !important;
    opacity: 1 !important; /* some skins fade this */
    /* recolor bg-image via filter: none in light, inverted in dark */
    filter: var(--qg-opts-icon-filter, none) !important;
}
/* Dark mode: flip black bg-image icon to white */
body.darkmode[b-irb1s69owh]  .quickgrid[theme=corporate] thead th .col-options-button {
    --qg-opts-icon-filter: invert(1) brightness(1.1) contrast(1.05);
}
/* On hover/focus/active: yellow background + dark glyph (remove invert) */
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button:hover,
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button:focus,
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button:active {
    background-color: var(--col-title-hover-bg) !important;
    color: var(--col-title-hover-text) !important;
    filter: none !important;
    outline: none;
}
/* If the icon is inline (font icon/SVG), inherit currentColor */
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button .oi,
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button .bi,
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button i,
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button svg,
[b-irb1s69owh] .quickgrid[theme=corporate] thead th .col-options-button svg *,
[b-irb1s69owh] .quickgrid[theme=corporate] button.col-title .oi,
[b-irb1s69owh] .quickgrid[theme=corporate] button.col-title .bi,
[b-irb1s69owh] .quickgrid[theme=corporate] button.col-title i,
[b-irb1s69owh] .quickgrid[theme=corporate] button.col-title svg,
[b-irb1s69owh] .quickgrid[theme=corporate] button.col-title svg * {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* -------- Column borders, padding, striping -------- */
[b-irb1s69owh] .quickgrid[theme=corporate] th,
[b-irb1s69owh] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0,0,0,.10);
    padding: .2rem;
}

body.darkmode[b-irb1s69owh]  .quickgrid[theme=corporate] th,
body.darkmode[b-irb1s69owh]  .quickgrid[theme=corporate] td {
    border-right-color: rgba(255,255,255,.12);
}

[b-irb1s69owh] .quickgrid[theme=corporate] th:last-child,
[b-irb1s69owh] .quickgrid[theme=corporate] td:last-child {
    border-right: none;
}

[b-irb1s69owh] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: transparent;
}

[b-irb1s69owh] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: var(--chip-bg);
}

/* Prevent row collapse */
[b-irb1s69owh] tbody tr {
    height: 1.8rem;
}

/* =========================
   Column-options panel controls
   ========================= */
.checkbox-group[b-irb1s69owh] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

    .checkbox-group label[b-irb1s69owh] {
        margin-right: 10px;
        display: flex;
        align-items: center;
    }

/* =========================
   Checkbox cells
   ========================= */
[b-irb1s69owh] .checkbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-container input[type="checkbox"].styled-checkbox[b-irb1s69owh] {
    width: 22px;
    height: 22px;
    border: 2px solid #000000;
    background-color: #ffffff;
    transition: all .3s ease;
    appearance: none;
    border-radius: 4px;
    position: relative;
}

    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-irb1s69owh] {
        border-color: #000000;
        background-color: #f0f0f0;
    }

    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-irb1s69owh] {
        background-color: var(--my-yellow-color);
        border-color: #000000;
    }

        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-irb1s69owh]::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 10px;
            height: 10px;
            background-color: #ffffff;
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%);
        }

/* =========================
   (Non-standard) hide column example
   ========================= */
th:contains("Kendo (Sort)")[b-irb1s69owh],
td:nth-child(1)[b-irb1s69owh] {
    display: none;
}

/* =========================
   Toolbar v2 – grouped actions (WAKR theme)
   ========================= */
.wakr-toolbar[b-irb1s69owh] {
    margin-top: .5rem;
    margin-bottom: .75rem;
}

.wakr-toolbar-top[b-irb1s69owh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.wakr-summary[b-irb1s69owh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--muted-text-color);
    white-space: nowrap;
}

.wakr-dot[b-irb1s69owh] {
    color: var(--muted-text-color);
}

.wakr-selected-count.active[b-irb1s69owh] {
    color: var(--my-dark-color);
    font-weight: bold;
}

body.darkmode .wakr-selected-count.active[b-irb1s69owh] {
    color: var(--my-light-color);
}

.wakr-filter-chips[b-irb1s69owh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wakr-filter-badge[b-irb1s69owh] {
    background: var(--chip-bg);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
}

.wakr-reset-btn[b-irb1s69owh] {
    font-size: .85rem;
}

.wakr-toolbar-groups[b-irb1s69owh] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--chip-bg);
    border-radius: 6px;
}

.wakr-btn-group[b-irb1s69owh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wakr-group-label[b-irb1s69owh] {
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted-text-color);
}

.wakr-group-buttons[b-irb1s69owh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wakr-group-buttons .btn[b-irb1s69owh] {
    font-size: .82rem;
    padding: .3rem .6rem;
    min-height: unset;
    white-space: nowrap;
}

.wakr-group-buttons .btn:disabled[b-irb1s69owh] {
    opacity: .55;
    cursor: not-allowed;
}

.wakr-btn-primary[b-irb1s69owh] {
    background-color: var(--my-yellow-color);
    border-color: var(--my-yellow-color);
    color: var(--my-dark-color);
    font-weight: bold;
}

    .wakr-btn-primary:hover[b-irb1s69owh],
    .wakr-btn-primary:focus[b-irb1s69owh],
    .wakr-btn-primary:active[b-irb1s69owh] {
        background-color: var(--my-yellow-color) !important;
        border-color: var(--my-yellow-color) !important;
        color: var(--my-dark-color) !important;
        filter: brightness(.95);
    }

/* =========================
   Pill/flag columns
   ========================= */
.grid .paidup-column[b-irb1s69owh],
.grid .yesno-column[b-irb1s69owh],
.grid .juniorsenior-column[b-irb1s69owh],
.grid .gender-column[b-irb1s69owh],
.grid .memtype-column[b-irb1s69owh] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 999px;
    border: 1px solid var(--chip-bg);
    padding: 2px 8px;
    text-align: center;
    background-color: rgba(0,0,0,.02);
}

.grid .focused .paidup-column[b-irb1s69owh],
.grid .focused .yesno-column[b-irb1s69owh],
.grid .focused .juniorsenior-column[b-irb1s69owh],
.grid .focused .gender-column[b-irb1s69owh],
.grid .focused .memtype-column[b-irb1s69owh] {
    border: 1px solid #fff;
}

/* Paid/Due */
.grid .paidup-column.paid[b-irb1s69owh] {
    font-weight: bold;
    background-color: var(--pill-ok-bg); color: var(--pill-ok-fg);
}

.grid .paidup-column.due[b-irb1s69owh] {
    background-color: var(--pill-bad-bg); color: var(--pill-bad-fg);
}

.grid .paidup-column.paid[b-irb1s69owh]::after {
    content: "PAID";
}

.grid .paidup-column.due[b-irb1s69owh]::after {
    content: "DUE";
}

/* Yes/No */
.grid .yesno-column.yes[b-irb1s69owh] {
    font-weight: bold;
    background-color: var(--pill-ok-bg); color: var(--pill-ok-fg);
}

.grid .yesno-column.no[b-irb1s69owh] {
    background-color: var(--pill-bad-bg); color: var(--pill-bad-fg);
}

.grid .yesno-column.yes[b-irb1s69owh]::after {
    content: "Yes";
}

.grid .yesno-column.no[b-irb1s69owh]::after {
    content: "No";
}

/* Junior/Senior */
.grid .juniorsenior-column.senior[b-irb1s69owh] {
    font-weight: bold;
    background-color: #ffd800;
}

.grid .juniorsenior-column.junior[b-irb1s69owh]::after {
    content: "junior";
}

.grid .juniorsenior-column.senior[b-irb1s69owh]::after {
    content: "senior";
}

/* Gender */
.grid .gender-column.male[b-irb1s69owh] {
    font-weight: bold;
    background-color: #6fa8dc;
}

.grid .gender-column.female[b-irb1s69owh] {
    background-color: #f982e9;
}

.grid .gender-column.other[b-irb1s69owh] {
    background-color: #9B59B6;
}

.grid .gender-column.male[b-irb1s69owh]::after {
    content: "male";
}

.grid .gender-column.female[b-irb1s69owh]::after {
    content: "female";
}

.grid .gender-column.other[b-irb1s69owh]::after {
    content: "other";
}

/* Membership type */
.grid .memtype-column.new[b-irb1s69owh] {
    background-color: var(--pill-ok-bg); color: var(--pill-ok-fg);
}

.grid .memtype-column.renew[b-irb1s69owh] {
    font-weight: bold;
}

.grid .memtype-column.life[b-irb1s69owh] {
    font-weight: bold;
    background-color: #F87C1D;
}

.grid .memtype-column.new[b-irb1s69owh]::after {
    content: "new";
}

.grid .memtype-column.renew[b-irb1s69owh]::after {
    content: "renew";
}

.grid .memtype-column.life[b-irb1s69owh]::after {
    content: "life";
}

/* =========================
   Misc form bits on this page
   ========================= */
.container[b-irb1s69owh] {
    width: 500px;
    max-width: 100%;
}

.form-group[b-irb1s69owh] {
    margin-bottom: 12px;
}

label[b-irb1s69owh] {
    display: block;
    margin-bottom: 4px;
}

input[b-irb1s69owh] {
    border: 1px solid #ccc;
}

input[b-irb1s69owh], .ql-editor[b-irb1s69owh] {
    padding: 4px;
    font-size: 14px;
}

#editor[b-irb1s69owh] {
    height: 130px;
}
.event-fin-summary[b-irb1s69owh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
}

.fin-group[b-irb1s69owh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.fin-label[b-irb1s69owh] {
    color: #6c757d;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fin-value[b-irb1s69owh] {
    font-size: 0.9rem;
    font-weight: 600;
}

.fin-divider[b-irb1s69owh] {
    width: 1px;
    height: 32px;
    background: var(--bs-border-color, #dee2e6);
}

.fin-paid .fin-value[b-irb1s69owh] {
    color: #198754;
}

.fin-unpaid .fin-value[b-irb1s69owh] {
    color: #dc3545;
}

.fin-refund .fin-value[b-irb1s69owh] {
    color: #fd7e14;
}

.fin-surplus .fin-value[b-irb1s69owh] {
    color: #198754;
}

.fin-deficit .fin-value[b-irb1s69owh] {
    color: #dc3545;
}
/* /Components/Pages/Membership/FY27/TaikaiSummary.razor.rz.scp.css */
/* Membership paid/due pill — matches the grading grid's paidup-column look. */
.paidup-column[b-uqk3egank9] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0,0,0,.02);
}

.paidup-column.paid[b-uqk3egank9] {
    font-weight: bold;
    background-color: #8df1b3;
}

.paidup-column.due[b-uqk3egank9] {
    background-color: #d5a6bd;
}

.paidup-column.paid[b-uqk3egank9]::after {
    content: "PAID";
}

.paidup-column.due[b-uqk3egank9]::after {
    content: "DUE";
}
/* /Components/Pages/Membership/NewMember.razor.rz.scp.css */
body[b-awpvgdvw11] {
}
/* /Components/Pages/Membership/NewMemberStep1.razor.rz.scp.css */
/* Ensure all input fields and labels are on the same row with 5px gap */
/* Container for the input field */
.input-group[b-kdvsil8o9d] {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin-bottom: 20px; /* Space between rows */
}

    /* Label Styling */
    .input-group label[b-kdvsil8o9d] {
        font-size: 1.1rem;
        font-weight: bold;
        margin-right: 10px; /* Slightly increased space between label and input */
        white-space: nowrap; /* Prevent text wrapping */
        color: #333; /* Dark color for better contrast */
    }

/* Input Field Styling */
.input-field[b-kdvsil8o9d] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 1rem;
    width: 100%; /* Ensure input takes the remaining space */
    display: inline-block; /* Keep the input inline with the label */
    margin-left: 5px; /* Space after the label */
    background-color: #fff; /* Default background color */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */
}

    /* Focused Input Field */
    .input-field:focus[b-kdvsil8o9d] {
        border-color: var(--my-yellow-color); /* Custom yellow border color on focus */
        box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); /* Subtle yellow glow effect */
        outline: none; /* Remove default outline */
    }

    /* Placeholder text styling (if needed) */
    .input-field[b-kdvsil8o9d]::placeholder {
        color: #aaa; /* Lighter placeholder text */
    }

    /* Disabled state */
    .input-field:disabled[b-kdvsil8o9d] {
        background-color: #f5f5f5;
        border-color: #e0e0e0;
        cursor: not-allowed;
    }
/* SecurePay UI Container */
#securepay-ui-container[b-kdvsil8o9d] {
    margin: 10px auto;
    padding: 20px;
    border: var(--my-wrapper-border);
    border-radius: 8px;
    background-color: rgba(255, 209, 0, 0.1); /* Clean white for light mode */
    box-shadow: var(--my-wrapper-box-shadow);
    width: 90%;
    max-width: 400px;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    overflow: hidden; /* Prevent overflow on mobile */
}

    #securepay-ui-container iframe[b-kdvsil8o9d] {
        width: 100%;
        height: 350px;
        border: none;
        border-radius: 5px;
    }

    #securepay-ui-container h3[b-kdvsil8o9d] {
        color: var(--my-black-color);
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    #securepay-ui-container p[b-kdvsil8o9d] {
        color: var(--my-grey-color);
        font-size: 0.95rem;
        line-height: 1.5;
    }

/* Adjustments for larger screens */
@media (min-width: 768px) {
    #securepay-ui-container[b-kdvsil8o9d] {
        padding: 30px;
        max-width: 450px;
    }

        #securepay-ui-container iframe[b-kdvsil8o9d] {
            height: 400px;
        }

        #securepay-ui-container h3[b-kdvsil8o9d] {
            font-size: 1.3rem;
        }

        #securepay-ui-container p[b-kdvsil8o9d] {
            font-size: 1rem;
        }
}

/* Adjustments for mobile and small screens */
@media (max-width: 767px) {
    #securepay-ui-container[b-kdvsil8o9d] {
        padding: 15px; /* Reduced padding for smaller screens */
        width: 95%; /* Ensure it fits well on small devices */
        max-width: 100%; /* Remove max width limitation */
    }

        #securepay-ui-container iframe[b-kdvsil8o9d] {
            height: 300px; /* Adjust iframe size for mobile */
        }

        #securepay-ui-container h3[b-kdvsil8o9d] {
            font-size: 1.1rem; /* Smaller font for mobile */
        }

        #securepay-ui-container p[b-kdvsil8o9d] {
            font-size: 0.9rem; /* Slightly smaller font for readability */
        }
}


button[b-kdvsil8o9d] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button:disabled[b-kdvsil8o9d] {
        cursor: not-allowed;
        background-color: #ddd;
    }

    button:hover:enabled[b-kdvsil8o9d] {
        background-color: #007bff;
        color: white;
    }

.reset-button[b-kdvsil8o9d] {
    background-color: #f44336;
    color: white;
}

    .reset-button:hover:enabled[b-kdvsil8o9d] {
        background-color: #d32f2f;
    }

/* Column Title Styling */
[b-kdvsil8o9d] .quickgrid[theme=corporate] .col-title {
    gap: 0.4rem; /* Separate the sort indicator from title text */
    font-weight: bold;
    text-transform: uppercase;
}

[b-kdvsil8o9d] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Column Title Hover and Active States */
[b-kdvsil8o9d] .quickgrid[theme=corporate] button.col-title:hover, [b-kdvsil8o9d] .quickgrid[theme=corporate] .col-options-button:hover {
    background-color: var(--col-title-color);
}

[b-kdvsil8o9d] .quickgrid[theme=corporate] button.col-title:active, [b-kdvsil8o9d] .quickgrid[theme=corporate] .col-options-button:active {
    background-color: var(--col-title-color);
}

/* Subtle Stripe Effect - Alternating Row Colors */
[b-kdvsil8o9d] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.4); /* Even rows have a light background */
}

[b-kdvsil8o9d] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.05); /* Slightly darker background for odd rows */
}

/* Prevent Row Collapse */
[b-kdvsil8o9d] tbody tr {
    height: 1.8rem;
}

/* Checkbox Group Styling */
.checkbox-group[b-kdvsil8o9d] {
    display: flex;
    align-items: center;
    /*flex-wrap: nowrap;*/ /* Prevent wrapping */
    flex-wrap: wrap;
    gap: 20px; /* Adds 20px space between each checkbox */
    overflow: hidden; /* Ensure no overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    margin-bottom: 20px; /* Space between checkboxes and other sections */
}

    .checkbox-group label[b-kdvsil8o9d] {
        font-size: 1rem;
        margin: 0;
        margin-right: 10px; /* Optional: adjust space between checkboxes */
        display: flex;
        align-items: center;
    }

/* Thin Column Separator Line */
[b-kdvsil8o9d] .quickgrid[theme=corporate] th,
[b-kdvsil8o9d] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Light gray line between columns */
    padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* Add padding around the text */
}

    /* Remove right border on last column */
    [b-kdvsil8o9d] .quickgrid[theme=corporate] th:last-child,
    [b-kdvsil8o9d] .quickgrid[theme=corporate] td:last-child {
        border-right: none;
    }

/* Centering the checkbox within the column */
[b-kdvsil8o9d] .checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    align-items: center; /* Centers the checkbox vertically */
}

/* Styling the checkbox to make it stand out more */
.checkbox-container input[type="checkbox"].styled-checkbox[b-kdvsil8o9d] {
    width: 22px; /* Size the checkbox */
    height: 22px; /* Size the checkbox */
    border: 2px solid #000000; /* Add border to the checkbox */
    background-color: #ffffff; /* Set background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    appearance: none; /* Remove default checkbox appearance */
    border-radius: 4px; /* Optional: Add rounded corners to the checkbox */
    position: relative; /* Position relative for the custom checkmark */
}

    /* Make the checkbox more noticeable on hover */
    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-kdvsil8o9d] {
        border-color: #000000; /* Change border color on hover */
        background-color: #f0f0f0; /* Change background on hover */
    }

    /* Checkbox checked state */
    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-kdvsil8o9d] {
        background-color: var(--my-yellow-color); /* Highlight the checkbox when checked */
        border-color: #000000; /* Match border with checked color */
    }

        /* Custom checkmark appearance when checked */
        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-kdvsil8o9d]::after {
            content: ''; /* Empty content for the checkmark */
            position: absolute;
            top: 4px; /* Position the checkmark inside the checkbox */
            left: 4px;
            width: 10px; /* Size of the checkmark */
            height: 10px; /* Size of the checkmark */
            background-color: #ffffff; /* White checkmark color */
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%); /* Creating the checkmark shape */
        }

    /* Adjust the checkbox when unchecked */
    .checkbox-container input[type="checkbox"].styled-checkbox:not(:checked)[b-kdvsil8o9d]::after {
        content: ''; /* Empty content for unchecked state */
    }

th:contains("Kendo (Sort)")[b-kdvsil8o9d],
td:nth-child(1)[b-kdvsil8o9d] { /* Adjust the nth-child if necessary */
    display: none;
}

/* Container for radio buttons */
.radio-group[b-kdvsil8o9d] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 400px;
}

/* Style for radio input and label */
.radio-option[b-kdvsil8o9d] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    /* Hide default radio button */
    .radio-option input[type="radio"][b-kdvsil8o9d] {
        -webkit-appearance: none; /* Chrome/Safari */
        -moz-appearance: none; /* Firefox */
        appearance: none; /* Default appearance reset */
        width: 20px;
        height: 20px;
        border: 2px solid var(--my-btn-border-color); /* Set the black border */
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        background-color: white; /* White background */
    }

        /* Custom checked effect */
        .radio-option input[type="radio"]:checked[b-kdvsil8o9d] {
            background-color: var(--my-yellow-color); /* Yellow background when selected */
            border-color: var(--my-btn-border-color); /* Keep the black border */
        }

    /* Ensure label is styled nicely */
    .radio-option label[b-kdvsil8o9d] {
        cursor: pointer;
        /*color: var(--my-black-color);*/
        font-weight: normal;
    }

/*.grid {
    border: 2px solid #ddd;*/ /* Add border around the grid */
/*border-radius: 8px;*/ /* Optional: Add rounded corners */
/*padding: 15px;*/ /* Optional: Add padding to give space inside the border */
/*background-color: #fff;*/ /* Optional: Add a background color to differentiate the grid */
/*}*/

#dobDate[b-kdvsil8o9d] {
    width: 150px; /* Set a fixed width for the date picker */
}

.styled-checkbox[b-kdvsil8o9d] {
    display: block;
}

@media screen and (max-width: 768px) {
    /* Check if there's any rule hiding elements on smaller screens */
    .checkbox-container[b-kdvsil8o9d] {
        display: block; /* Ensure checkboxes are visible */
    }
}

@media (max-width: 576px) {
    .input-group input[b-kdvsil8o9d], .input-group select[b-kdvsil8o9d], .input-group textarea[b-kdvsil8o9d] {
        width: 100%; /* Full width on small screens */
        margin-left: 0; /* Adjust margin */
    }
}
/* Basic switch style */
.switch[b-kdvsil8o9d] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

    /* Hide the checkbox input */
    .switch input[b-kdvsil8o9d] {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Slider style */
.slider[b-kdvsil8o9d] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 50px;
}

    /* The circle inside the slider */
    .slider[b-kdvsil8o9d]:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.4s;
    }

/* When the checkbox is checked, move the slider */
input:checked + .slider[b-kdvsil8o9d] {
    background-color: var(--my-yellow-color); /* Yellow when checked */
}

    /* When the checkbox is checked, move the circle */
    input:checked + .slider[b-kdvsil8o9d]:before {
        transform: translateX(14px);
    }

/* Add a label style */
.checkbox-container[b-kdvsil8o9d] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.progress[b-kdvsil8o9d] {
    margin-bottom: 20px;
}


/* /Components/Pages/Membership/NewMemberStep2.razor.rz.scp.css */
/* Ensure all input fields and labels are on the same row with 5px gap */
/* Container for the input field */
.input-group[b-rwxzv057i3] {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin-bottom: 20px; /* Space between rows */
}

    /* Label Styling */
    .input-group label[b-rwxzv057i3] {
        font-size: 1.1rem;
        font-weight: bold;
        margin-right: 10px; /* Slightly increased space between label and input */
        white-space: nowrap; /* Prevent text wrapping */
        color: #333; /* Dark color for better contrast */
    }

/* Input Field Styling */
.input-field[b-rwxzv057i3] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 1rem;
    width: 100%; /* Ensure input takes the remaining space */
    display: inline-block; /* Keep the input inline with the label */
    margin-left: 5px; /* Space after the label */
    background-color: #fff; /* Default background color */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */
}

    /* Focused Input Field */
    .input-field:focus[b-rwxzv057i3] {
        border-color: var(--my-yellow-color); /* Custom yellow border color on focus */
        box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); /* Subtle yellow glow effect */
        outline: none; /* Remove default outline */
    }

    /* Placeholder text styling (if needed) */
    .input-field[b-rwxzv057i3]::placeholder {
        color: #aaa; /* Lighter placeholder text */
    }

    /* Disabled state */
    .input-field:disabled[b-rwxzv057i3] {
        background-color: #f5f5f5;
        border-color: #e0e0e0;
        cursor: not-allowed;
    }
/* SecurePay UI Container */
#securepay-ui-container[b-rwxzv057i3] {
    margin: 10px auto;
    padding: 20px;
    border: var(--my-wrapper-border);
    border-radius: 8px;
    background-color: rgba(255, 209, 0, 0.1); /* Clean white for light mode */
    box-shadow: var(--my-wrapper-box-shadow);
    width: 90%;
    max-width: 400px;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    overflow: hidden; /* Prevent overflow on mobile */
}

    #securepay-ui-container iframe[b-rwxzv057i3] {
        width: 100%;
        height: 350px;
        border: none;
        border-radius: 5px;
    }

    #securepay-ui-container h3[b-rwxzv057i3] {
        color: var(--my-black-color);
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    #securepay-ui-container p[b-rwxzv057i3] {
        color: var(--my-grey-color);
        font-size: 0.95rem;
        line-height: 1.5;
    }

/* Adjustments for larger screens */
@media (min-width: 768px) {
    #securepay-ui-container[b-rwxzv057i3] {
        padding: 30px;
        max-width: 450px;
    }

        #securepay-ui-container iframe[b-rwxzv057i3] {
            height: 400px;
        }

        #securepay-ui-container h3[b-rwxzv057i3] {
            font-size: 1.3rem;
        }

        #securepay-ui-container p[b-rwxzv057i3] {
            font-size: 1rem;
        }
}

/* Adjustments for mobile and small screens */
@media (max-width: 767px) {
    #securepay-ui-container[b-rwxzv057i3] {
        padding: 15px; /* Reduced padding for smaller screens */
        width: 95%; /* Ensure it fits well on small devices */
        max-width: 100%; /* Remove max width limitation */
    }

        #securepay-ui-container iframe[b-rwxzv057i3] {
            height: 300px; /* Adjust iframe size for mobile */
        }

        #securepay-ui-container h3[b-rwxzv057i3] {
            font-size: 1.1rem; /* Smaller font for mobile */
        }

        #securepay-ui-container p[b-rwxzv057i3] {
            font-size: 0.9rem; /* Slightly smaller font for readability */
        }
}


button[b-rwxzv057i3] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button:disabled[b-rwxzv057i3] {
        cursor: not-allowed;
        background-color: #ddd;
    }

    button:hover:enabled[b-rwxzv057i3] {
        background-color: #007bff;
        color: white;
    }

.reset-button[b-rwxzv057i3] {
    background-color: #f44336;
    color: white;
}

    .reset-button:hover:enabled[b-rwxzv057i3] {
        background-color: #d32f2f;
    }

/* Column Title Styling */
[b-rwxzv057i3] .quickgrid[theme=corporate] .col-title {
    gap: 0.4rem; /* Separate the sort indicator from title text */
    font-weight: bold;
    text-transform: uppercase;
}

[b-rwxzv057i3] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Column Title Hover and Active States */
[b-rwxzv057i3] .quickgrid[theme=corporate] button.col-title:hover, [b-rwxzv057i3] .quickgrid[theme=corporate] .col-options-button:hover {
    background-color: var(--col-title-color);
}

[b-rwxzv057i3] .quickgrid[theme=corporate] button.col-title:active, [b-rwxzv057i3] .quickgrid[theme=corporate] .col-options-button:active {
    background-color: var(--col-title-color);
}

/* Subtle Stripe Effect - Alternating Row Colors */
[b-rwxzv057i3] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.4); /* Even rows have a light background */
}

[b-rwxzv057i3] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.05); /* Slightly darker background for odd rows */
}

/* Prevent Row Collapse */
[b-rwxzv057i3] tbody tr {
    height: 1.8rem;
}

/* Checkbox Group Styling */
.checkbox-group[b-rwxzv057i3] {
    display: flex;
    align-items: center;
    /*flex-wrap: nowrap;*/ /* Prevent wrapping */
    flex-wrap: wrap;
    gap: 20px; /* Adds 20px space between each checkbox */
    overflow: hidden; /* Ensure no overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    margin-bottom: 20px; /* Space between checkboxes and other sections */
}

    .checkbox-group label[b-rwxzv057i3] {
        font-size: 1rem;
        margin: 0;
        margin-right: 10px; /* Optional: adjust space between checkboxes */
        display: flex;
        align-items: center;
    }

/* Thin Column Separator Line */
[b-rwxzv057i3] .quickgrid[theme=corporate] th,
[b-rwxzv057i3] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Light gray line between columns */
    padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* Add padding around the text */
}

    /* Remove right border on last column */
    [b-rwxzv057i3] .quickgrid[theme=corporate] th:last-child,
    [b-rwxzv057i3] .quickgrid[theme=corporate] td:last-child {
        border-right: none;
    }

/* Centering the checkbox within the column */
[b-rwxzv057i3] .checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    align-items: center; /* Centers the checkbox vertically */
}

/* Styling the checkbox to make it stand out more */
.checkbox-container input[type="checkbox"].styled-checkbox[b-rwxzv057i3] {
    width: 22px; /* Size the checkbox */
    height: 22px; /* Size the checkbox */
    border: 2px solid #000000; /* Add border to the checkbox */
    background-color: #ffffff; /* Set background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    appearance: none; /* Remove default checkbox appearance */
    border-radius: 4px; /* Optional: Add rounded corners to the checkbox */
    position: relative; /* Position relative for the custom checkmark */
}

    /* Make the checkbox more noticeable on hover */
    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-rwxzv057i3] {
        border-color: #000000; /* Change border color on hover */
        background-color: #f0f0f0; /* Change background on hover */
    }

    /* Checkbox checked state */
    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-rwxzv057i3] {
        background-color: var(--my-yellow-color); /* Highlight the checkbox when checked */
        border-color: #000000; /* Match border with checked color */
    }

        /* Custom checkmark appearance when checked */
        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-rwxzv057i3]::after {
            content: ''; /* Empty content for the checkmark */
            position: absolute;
            top: 4px; /* Position the checkmark inside the checkbox */
            left: 4px;
            width: 10px; /* Size of the checkmark */
            height: 10px; /* Size of the checkmark */
            background-color: #ffffff; /* White checkmark color */
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%); /* Creating the checkmark shape */
        }

    /* Adjust the checkbox when unchecked */
    .checkbox-container input[type="checkbox"].styled-checkbox:not(:checked)[b-rwxzv057i3]::after {
        content: ''; /* Empty content for unchecked state */
    }

th:contains("Kendo (Sort)")[b-rwxzv057i3],
td:nth-child(1)[b-rwxzv057i3] { /* Adjust the nth-child if necessary */
    display: none;
}

/* Container for radio buttons */
.radio-group[b-rwxzv057i3] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 400px;
}

/* Style for radio input and label */
.radio-option[b-rwxzv057i3] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    /* Hide default radio button */
    .radio-option input[type="radio"][b-rwxzv057i3] {
        -webkit-appearance: none; /* Chrome/Safari */
        -moz-appearance: none; /* Firefox */
        appearance: none; /* Default appearance reset */
        width: 20px;
        height: 20px;
        border: 2px solid var(--my-btn-border-color); /* Set the black border */
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        background-color: white; /* White background */
    }

        /* Custom checked effect */
        .radio-option input[type="radio"]:checked[b-rwxzv057i3] {
            background-color: var(--my-yellow-color); /* Yellow background when selected */
            border-color: var(--my-btn-border-color); /* Keep the black border */
        }

    /* Ensure label is styled nicely */
    .radio-option label[b-rwxzv057i3] {
        cursor: pointer;
        /*color: var(--my-black-color);*/
        font-weight: normal;
    }

/*.grid {
    border: 2px solid #ddd;*/ /* Add border around the grid */
/*border-radius: 8px;*/ /* Optional: Add rounded corners */
/*padding: 15px;*/ /* Optional: Add padding to give space inside the border */
/*background-color: #fff;*/ /* Optional: Add a background color to differentiate the grid */
/*}*/

#paymentDate[b-rwxzv057i3] {
    width: 150px; /* Set a fixed width for the date picker */
}

.styled-checkbox[b-rwxzv057i3] {
    display: block;
}

@media screen and (max-width: 768px) {
    /* Check if there's any rule hiding elements on smaller screens */
    .checkbox-container[b-rwxzv057i3] {
        display: block; /* Ensure checkboxes are visible */
    }
}

/* Basic switch style */
.switch[b-rwxzv057i3] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

    /* Hide the checkbox input */
    .switch input[b-rwxzv057i3] {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Slider style */
.slider[b-rwxzv057i3] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 50px;
}

    /* The circle inside the slider */
    .slider[b-rwxzv057i3]:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.4s;
    }

/* When the checkbox is checked, move the slider */
input:checked + .slider[b-rwxzv057i3] {
    background-color: var(--my-yellow-color); /* Yellow when checked */
}

    /* When the checkbox is checked, move the circle */
    input:checked + .slider[b-rwxzv057i3]:before {
        transform: translateX(14px);
    }

/* Add a label style */
.checkbox-container[b-rwxzv057i3] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
/* /Components/Pages/Membership/NewMemberStep3.razor.rz.scp.css */
/* Ensure all input fields and labels are on the same row with 5px gap */
/* Container for the input field */
.input-group[b-ejo7rfcdqi] {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin-bottom: 20px; /* Space between rows */
}

    /* Label Styling */
    .input-group label[b-ejo7rfcdqi] {
        font-size: 1.1rem;
        font-weight: bold;
        margin-right: 10px; /* Slightly increased space between label and input */
        white-space: nowrap; /* Prevent text wrapping */
        color: #333; /* Dark color for better contrast */
    }

/* Input Field Styling */
.input-field[b-ejo7rfcdqi] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 1rem;
    width: 100%; /* Ensure input takes the remaining space */
    display: inline-block; /* Keep the input inline with the label */
    margin-left: 5px; /* Space after the label */
    background-color: #fff; /* Default background color */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */
}

    /* Focused Input Field */
    .input-field:focus[b-ejo7rfcdqi] {
        border-color: var(--my-yellow-color); /* Custom yellow border color on focus */
        box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); /* Subtle yellow glow effect */
        outline: none; /* Remove default outline */
    }

    /* Placeholder text styling (if needed) */
    .input-field[b-ejo7rfcdqi]::placeholder {
        color: #aaa; /* Lighter placeholder text */
    }

    /* Disabled state */
    .input-field:disabled[b-ejo7rfcdqi] {
        background-color: #f5f5f5;
        border-color: #e0e0e0;
        cursor: not-allowed;
    }
/* SecurePay UI Container */
#securepay-ui-container[b-ejo7rfcdqi] {
    margin: 10px auto;
    padding: 20px;
    border: var(--my-wrapper-border);
    border-radius: 8px;
    background-color: rgba(255, 209, 0, 0.1); /* Clean white for light mode */
    box-shadow: var(--my-wrapper-box-shadow);
    width: 90%;
    max-width: 400px;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    overflow: hidden; /* Prevent overflow on mobile */
}

    #securepay-ui-container iframe[b-ejo7rfcdqi] {
        width: 100%;
        height: 350px;
        border: none;
        border-radius: 5px;
    }

    #securepay-ui-container h3[b-ejo7rfcdqi] {
        color: var(--my-black-color);
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    #securepay-ui-container p[b-ejo7rfcdqi] {
        color: var(--my-grey-color);
        font-size: 0.95rem;
        line-height: 1.5;
    }

/* Adjustments for larger screens */
@media (min-width: 768px) {
    #securepay-ui-container[b-ejo7rfcdqi] {
        padding: 30px;
        max-width: 450px;
    }

        #securepay-ui-container iframe[b-ejo7rfcdqi] {
            height: 400px;
        }

        #securepay-ui-container h3[b-ejo7rfcdqi] {
            font-size: 1.3rem;
        }

        #securepay-ui-container p[b-ejo7rfcdqi] {
            font-size: 1rem;
        }
}

/* Adjustments for mobile and small screens */
@media (max-width: 767px) {
    #securepay-ui-container[b-ejo7rfcdqi] {
        padding: 15px; /* Reduced padding for smaller screens */
        width: 95%; /* Ensure it fits well on small devices */
        max-width: 100%; /* Remove max width limitation */
    }

        #securepay-ui-container iframe[b-ejo7rfcdqi] {
            height: 300px; /* Adjust iframe size for mobile */
        }

        #securepay-ui-container h3[b-ejo7rfcdqi] {
            font-size: 1.1rem; /* Smaller font for mobile */
        }

        #securepay-ui-container p[b-ejo7rfcdqi] {
            font-size: 0.9rem; /* Slightly smaller font for readability */
        }
}


button[b-ejo7rfcdqi] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button:disabled[b-ejo7rfcdqi] {
        cursor: not-allowed;
        background-color: #ddd;
    }

    button:hover:enabled[b-ejo7rfcdqi] {
        background-color: #007bff;
        color: white;
    }

.reset-button[b-ejo7rfcdqi] {
    background-color: #f44336;
    color: white;
}

    .reset-button:hover:enabled[b-ejo7rfcdqi] {
        background-color: #d32f2f;
    }

/* Column Title Styling */
[b-ejo7rfcdqi] .quickgrid[theme=corporate] .col-title {
    gap: 0.4rem; /* Separate the sort indicator from title text */
    font-weight: bold;
    text-transform: uppercase;
}

[b-ejo7rfcdqi] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Column Title Hover and Active States */
[b-ejo7rfcdqi] .quickgrid[theme=corporate] button.col-title:hover, [b-ejo7rfcdqi] .quickgrid[theme=corporate] .col-options-button:hover {
    background-color: var(--col-title-color);
}

[b-ejo7rfcdqi] .quickgrid[theme=corporate] button.col-title:active, [b-ejo7rfcdqi] .quickgrid[theme=corporate] .col-options-button:active {
    background-color: var(--col-title-color);
}

/* Subtle Stripe Effect - Alternating Row Colors */
[b-ejo7rfcdqi] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.4); /* Even rows have a light background */
}

[b-ejo7rfcdqi] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.05); /* Slightly darker background for odd rows */
}

/* Prevent Row Collapse */
[b-ejo7rfcdqi] tbody tr {
    height: 1.8rem;
}

/* Checkbox Group Styling */
.checkbox-group[b-ejo7rfcdqi] {
    display: flex;
    align-items: center;
    /*flex-wrap: nowrap;*/ /* Prevent wrapping */
    flex-wrap: wrap;
    gap: 20px; /* Adds 20px space between each checkbox */
    overflow: hidden; /* Ensure no overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    margin-bottom: 20px; /* Space between checkboxes and other sections */
}

    .checkbox-group label[b-ejo7rfcdqi] {
        font-size: 1rem;
        margin: 0;
        margin-right: 10px; /* Optional: adjust space between checkboxes */
        display: flex;
        align-items: center;
    }

/* Thin Column Separator Line */
[b-ejo7rfcdqi] .quickgrid[theme=corporate] th,
[b-ejo7rfcdqi] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Light gray line between columns */
    padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* Add padding around the text */
}

    /* Remove right border on last column */
    [b-ejo7rfcdqi] .quickgrid[theme=corporate] th:last-child,
    [b-ejo7rfcdqi] .quickgrid[theme=corporate] td:last-child {
        border-right: none;
    }

/* Centering the checkbox within the column */
[b-ejo7rfcdqi] .checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    align-items: center; /* Centers the checkbox vertically */
}

/* Styling the checkbox to make it stand out more */
.checkbox-container input[type="checkbox"].styled-checkbox[b-ejo7rfcdqi] {
    width: 22px; /* Size the checkbox */
    height: 22px; /* Size the checkbox */
    border: 2px solid #000000; /* Add border to the checkbox */
    background-color: #ffffff; /* Set background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    appearance: none; /* Remove default checkbox appearance */
    border-radius: 4px; /* Optional: Add rounded corners to the checkbox */
    position: relative; /* Position relative for the custom checkmark */
}

    /* Make the checkbox more noticeable on hover */
    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-ejo7rfcdqi] {
        border-color: #000000; /* Change border color on hover */
        background-color: #f0f0f0; /* Change background on hover */
    }

    /* Checkbox checked state */
    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-ejo7rfcdqi] {
        background-color: var(--my-yellow-color); /* Highlight the checkbox when checked */
        border-color: #000000; /* Match border with checked color */
    }

        /* Custom checkmark appearance when checked */
        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-ejo7rfcdqi]::after {
            content: ''; /* Empty content for the checkmark */
            position: absolute;
            top: 4px; /* Position the checkmark inside the checkbox */
            left: 4px;
            width: 10px; /* Size of the checkmark */
            height: 10px; /* Size of the checkmark */
            background-color: #ffffff; /* White checkmark color */
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%); /* Creating the checkmark shape */
        }

    /* Adjust the checkbox when unchecked */
    .checkbox-container input[type="checkbox"].styled-checkbox:not(:checked)[b-ejo7rfcdqi]::after {
        content: ''; /* Empty content for unchecked state */
    }

th:contains("Kendo (Sort)")[b-ejo7rfcdqi],
td:nth-child(1)[b-ejo7rfcdqi] { /* Adjust the nth-child if necessary */
    display: none;
}

/* Container for radio buttons */
.radio-group[b-ejo7rfcdqi] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 400px;
}

/* Style for radio input and label */
.radio-option[b-ejo7rfcdqi] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    /* Hide default radio button */
    .radio-option input[type="radio"][b-ejo7rfcdqi] {
        -webkit-appearance: none; /* Chrome/Safari */
        -moz-appearance: none; /* Firefox */
        appearance: none; /* Default appearance reset */
        width: 20px;
        height: 20px;
        border: 2px solid var(--my-btn-border-color); /* Set the black border */
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        background-color: white; /* White background */
    }

        /* Custom checked effect */
        .radio-option input[type="radio"]:checked[b-ejo7rfcdqi] {
            background-color: var(--my-yellow-color); /* Yellow background when selected */
            border-color: var(--my-btn-border-color); /* Keep the black border */
        }

    /* Ensure label is styled nicely */
    .radio-option label[b-ejo7rfcdqi] {
        cursor: pointer;
        /*color: var(--my-black-color);*/
        font-weight: normal;
    }

/*.grid {
    border: 2px solid #ddd;*/ /* Add border around the grid */
/*border-radius: 8px;*/ /* Optional: Add rounded corners */
/*padding: 15px;*/ /* Optional: Add padding to give space inside the border */
/*background-color: #fff;*/ /* Optional: Add a background color to differentiate the grid */
/*}*/

#paymentDate[b-ejo7rfcdqi] {
    width: 150px; /* Set a fixed width for the date picker */
}

.styled-checkbox[b-ejo7rfcdqi] {
    display: block;
}

@media screen and (max-width: 768px) {
    /* Check if there's any rule hiding elements on smaller screens */
    .checkbox-container[b-ejo7rfcdqi] {
        display: block; /* Ensure checkboxes are visible */
    }
}

/* Basic switch style */
.switch[b-ejo7rfcdqi] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

    /* Hide the checkbox input */
    .switch input[b-ejo7rfcdqi] {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Slider style */
.slider[b-ejo7rfcdqi] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 50px;
}

    /* The circle inside the slider */
    .slider[b-ejo7rfcdqi]:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.4s;
    }

/* When the checkbox is checked, move the slider */
input:checked + .slider[b-ejo7rfcdqi] {
    background-color: var(--my-yellow-color); /* Yellow when checked */
}

    /* When the checkbox is checked, move the circle */
    input:checked + .slider[b-ejo7rfcdqi]:before {
        transform: translateX(14px);
    }

/* Add a label style */
.checkbox-container[b-ejo7rfcdqi] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
/* /Components/Pages/Membership/NewMemberStep4.razor.rz.scp.css */
/* Ensure all input fields and labels are on the same row with 5px gap */
/* Container for the input field */
.input-group[b-3sxwgu2m1b] {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin-bottom: 20px; /* Space between rows */
}

    /* Label Styling */
    .input-group label[b-3sxwgu2m1b] {
        font-size: 1.1rem;
        font-weight: bold;
        margin-right: 10px; /* Slightly increased space between label and input */
        white-space: nowrap; /* Prevent text wrapping */
        color: #333; /* Dark color for better contrast */
    }

/* Input Field Styling */
.input-field[b-3sxwgu2m1b] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 1rem;
    width: 100%; /* Ensure input takes the remaining space */
    display: inline-block; /* Keep the input inline with the label */
    margin-left: 5px; /* Space after the label */
    background-color: #fff; /* Default background color */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */
}

    /* Focused Input Field */
    .input-field:focus[b-3sxwgu2m1b] {
        border-color: var(--my-yellow-color); /* Custom yellow border color on focus */
        box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); /* Subtle yellow glow effect */
        outline: none; /* Remove default outline */
    }

    /* Placeholder text styling (if needed) */
    .input-field[b-3sxwgu2m1b]::placeholder {
        color: #aaa; /* Lighter placeholder text */
    }

    /* Disabled state */
    .input-field:disabled[b-3sxwgu2m1b] {
        background-color: #f5f5f5;
        border-color: #e0e0e0;
        cursor: not-allowed;
    }
/* SecurePay UI Container */
#securepay-ui-container[b-3sxwgu2m1b] {
    margin: 10px auto;
    padding: 20px;
    border: var(--my-wrapper-border);
    border-radius: 8px;
    background-color: rgba(255, 209, 0, 0.1); /* Clean white for light mode */
    box-shadow: var(--my-wrapper-box-shadow);
    width: 90%;
    max-width: 400px;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    overflow: hidden; /* Prevent overflow on mobile */
}

    #securepay-ui-container iframe[b-3sxwgu2m1b] {
        width: 100%;
        height: 350px;
        border: none;
        border-radius: 5px;
    }

    #securepay-ui-container h3[b-3sxwgu2m1b] {
        color: var(--my-black-color);
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    #securepay-ui-container p[b-3sxwgu2m1b] {
        color: var(--my-grey-color);
        font-size: 0.95rem;
        line-height: 1.5;
    }

/* Adjustments for larger screens */
@media (min-width: 768px) {
    #securepay-ui-container[b-3sxwgu2m1b] {
        padding: 30px;
        max-width: 450px;
    }

        #securepay-ui-container iframe[b-3sxwgu2m1b] {
            height: 400px;
        }

        #securepay-ui-container h3[b-3sxwgu2m1b] {
            font-size: 1.3rem;
        }

        #securepay-ui-container p[b-3sxwgu2m1b] {
            font-size: 1rem;
        }
}

/* Adjustments for mobile and small screens */
@media (max-width: 767px) {
    #securepay-ui-container[b-3sxwgu2m1b] {
        padding: 15px; /* Reduced padding for smaller screens */
        width: 95%; /* Ensure it fits well on small devices */
        max-width: 100%; /* Remove max width limitation */
    }

        #securepay-ui-container iframe[b-3sxwgu2m1b] {
            height: 300px; /* Adjust iframe size for mobile */
        }

        #securepay-ui-container h3[b-3sxwgu2m1b] {
            font-size: 1.1rem; /* Smaller font for mobile */
        }

        #securepay-ui-container p[b-3sxwgu2m1b] {
            font-size: 0.9rem; /* Slightly smaller font for readability */
        }
}


button[b-3sxwgu2m1b] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button:disabled[b-3sxwgu2m1b] {
        cursor: not-allowed;
        background-color: #ddd;
    }

    button:hover:enabled[b-3sxwgu2m1b] {
        background-color: #007bff;
        color: white;
    }

.reset-button[b-3sxwgu2m1b] {
    background-color: #f44336;
    color: white;
}

    .reset-button:hover:enabled[b-3sxwgu2m1b] {
        background-color: #d32f2f;
    }

/* Column Title Styling */
[b-3sxwgu2m1b] .quickgrid[theme=corporate] .col-title {
    gap: 0.4rem; /* Separate the sort indicator from title text */
    font-weight: bold;
    text-transform: uppercase;
}

[b-3sxwgu2m1b] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Column Title Hover and Active States */
[b-3sxwgu2m1b] .quickgrid[theme=corporate] button.col-title:hover, [b-3sxwgu2m1b] .quickgrid[theme=corporate] .col-options-button:hover {
    background-color: var(--col-title-color);
}

[b-3sxwgu2m1b] .quickgrid[theme=corporate] button.col-title:active, [b-3sxwgu2m1b] .quickgrid[theme=corporate] .col-options-button:active {
    background-color: var(--col-title-color);
}

/* Subtle Stripe Effect - Alternating Row Colors */
[b-3sxwgu2m1b] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.4); /* Even rows have a light background */
}

[b-3sxwgu2m1b] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.05); /* Slightly darker background for odd rows */
}

/* Prevent Row Collapse */
[b-3sxwgu2m1b] tbody tr {
    height: 1.8rem;
}

/* Checkbox Group Styling */
.checkbox-group[b-3sxwgu2m1b] {
    display: flex;
    align-items: center;
    /*flex-wrap: nowrap;*/ /* Prevent wrapping */
    flex-wrap: wrap;
    gap: 20px; /* Adds 20px space between each checkbox */
    overflow: hidden; /* Ensure no overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    margin-bottom: 20px; /* Space between checkboxes and other sections */
}

    .checkbox-group label[b-3sxwgu2m1b] {
        font-size: 1rem;
        margin: 0;
        margin-right: 10px; /* Optional: adjust space between checkboxes */
        display: flex;
        align-items: center;
    }

/* Thin Column Separator Line */
[b-3sxwgu2m1b] .quickgrid[theme=corporate] th,
[b-3sxwgu2m1b] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Light gray line between columns */
    padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* Add padding around the text */
}

    /* Remove right border on last column */
    [b-3sxwgu2m1b] .quickgrid[theme=corporate] th:last-child,
    [b-3sxwgu2m1b] .quickgrid[theme=corporate] td:last-child {
        border-right: none;
    }

/* Centering the checkbox within the column */
[b-3sxwgu2m1b] .checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    align-items: center; /* Centers the checkbox vertically */
}

/* Styling the checkbox to make it stand out more */
.checkbox-container input[type="checkbox"].styled-checkbox[b-3sxwgu2m1b] {
    width: 22px; /* Size the checkbox */
    height: 22px; /* Size the checkbox */
    border: 2px solid #000000; /* Add border to the checkbox */
    background-color: #ffffff; /* Set background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    appearance: none; /* Remove default checkbox appearance */
    border-radius: 4px; /* Optional: Add rounded corners to the checkbox */
    position: relative; /* Position relative for the custom checkmark */
}

    /* Make the checkbox more noticeable on hover */
    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-3sxwgu2m1b] {
        border-color: #000000; /* Change border color on hover */
        background-color: #f0f0f0; /* Change background on hover */
    }

    /* Checkbox checked state */
    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-3sxwgu2m1b] {
        background-color: var(--my-yellow-color); /* Highlight the checkbox when checked */
        border-color: #000000; /* Match border with checked color */
    }

        /* Custom checkmark appearance when checked */
        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-3sxwgu2m1b]::after {
            content: ''; /* Empty content for the checkmark */
            position: absolute;
            top: 4px; /* Position the checkmark inside the checkbox */
            left: 4px;
            width: 10px; /* Size of the checkmark */
            height: 10px; /* Size of the checkmark */
            background-color: #ffffff; /* White checkmark color */
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%); /* Creating the checkmark shape */
        }

    /* Adjust the checkbox when unchecked */
    .checkbox-container input[type="checkbox"].styled-checkbox:not(:checked)[b-3sxwgu2m1b]::after {
        content: ''; /* Empty content for unchecked state */
    }

th:contains("Kendo (Sort)")[b-3sxwgu2m1b],
td:nth-child(1)[b-3sxwgu2m1b] { /* Adjust the nth-child if necessary */
    display: none;
}

/* Container for radio buttons */
.radio-group[b-3sxwgu2m1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 400px;
}

/* Style for radio input and label */
.radio-option[b-3sxwgu2m1b] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    /* Hide default radio button */
    .radio-option input[type="radio"][b-3sxwgu2m1b] {
        -webkit-appearance: none; /* Chrome/Safari */
        -moz-appearance: none; /* Firefox */
        appearance: none; /* Default appearance reset */
        width: 20px;
        height: 20px;
        border: 2px solid var(--my-btn-border-color); /* Set the black border */
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        background-color: white; /* White background */
    }

        /* Custom checked effect */
        .radio-option input[type="radio"]:checked[b-3sxwgu2m1b] {
            background-color: var(--my-yellow-color); /* Yellow background when selected */
            border-color: var(--my-btn-border-color); /* Keep the black border */
        }

    /* Ensure label is styled nicely */
    .radio-option label[b-3sxwgu2m1b] {
        cursor: pointer;
        /*color: var(--my-black-color);*/
        font-weight: normal;
    }

/*.grid {
    border: 2px solid #ddd;*/ /* Add border around the grid */
/*border-radius: 8px;*/ /* Optional: Add rounded corners */
/*padding: 15px;*/ /* Optional: Add padding to give space inside the border */
/*background-color: #fff;*/ /* Optional: Add a background color to differentiate the grid */
/*}*/

#paymentDate[b-3sxwgu2m1b] {
    width: 150px; /* Set a fixed width for the date picker */
}

.styled-checkbox[b-3sxwgu2m1b] {
    display: block;
}

@media screen and (max-width: 768px) {
    /* Check if there's any rule hiding elements on smaller screens */
    .checkbox-container[b-3sxwgu2m1b] {
        display: block; /* Ensure checkboxes are visible */
    }
}

/* Basic switch style */
.switch[b-3sxwgu2m1b] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

    /* Hide the checkbox input */
    .switch input[b-3sxwgu2m1b] {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Slider style */
.slider[b-3sxwgu2m1b] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 50px;
}

    /* The circle inside the slider */
    .slider[b-3sxwgu2m1b]:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.4s;
    }

/* When the checkbox is checked, move the slider */
input:checked + .slider[b-3sxwgu2m1b] {
    background-color: var(--my-yellow-color); /* Yellow when checked */
}

    /* When the checkbox is checked, move the circle */
    input:checked + .slider[b-3sxwgu2m1b]:before {
        transform: translateX(14px);
    }

/* Add a label style */
.checkbox-container[b-3sxwgu2m1b] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
/* /Components/Pages/Membership/PaymentGW.razor.rz.scp.css */
/* Ensure all input fields and labels are on the same row with 5px gap */
/* Container for the input field */
.input-group[b-15ekmr7lnl] {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin-bottom: 20px; /* Space between rows */
}

    /* Label Styling */
    .input-group label[b-15ekmr7lnl] {
        font-size: 1.1rem;
        font-weight: bold;
        margin-right: 10px; /* Slightly increased space between label and input */
        white-space: nowrap; /* Prevent text wrapping */
        color: #333; /* Dark color for better contrast */
    }

/* Input Field Styling */
.input-field[b-15ekmr7lnl] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 1rem;
    width: 100%; /* Ensure input takes the remaining space */
    display: inline-block; /* Keep the input inline with the label */
    margin-left: 5px; /* Space after the label */
    background-color: #fff; /* Default background color */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */
}

    /* Focused Input Field */
    .input-field:focus[b-15ekmr7lnl] {
        border-color: var(--my-yellow-color); /* Custom yellow border color on focus */
        box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); /* Subtle yellow glow effect */
        outline: none; /* Remove default outline */
    }

    /* Placeholder text styling (if needed) */
    .input-field[b-15ekmr7lnl]::placeholder {
        color: #aaa; /* Lighter placeholder text */
    }

    /* Disabled state */
    .input-field:disabled[b-15ekmr7lnl] {
        background-color: #f5f5f5;
        border-color: #e0e0e0;
        cursor: not-allowed;
    }
/* SecurePay UI Container */
#securepay-ui-container[b-15ekmr7lnl] {
    margin: 10px auto;
    padding: 20px;
    border: var(--my-wrapper-border);
    border-radius: 8px;
    background-color: rgba(255, 209, 0, 0.1); /* Clean white for light mode */
    box-shadow: var(--my-wrapper-box-shadow);
    width: 90%;
    max-width: 400px;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    overflow: hidden; /* Prevent overflow on mobile */
}

    #securepay-ui-container iframe[b-15ekmr7lnl] {
        width: 100%;
        height: 350px;
        border: none;
        border-radius: 5px;
    }

    #securepay-ui-container h3[b-15ekmr7lnl] {
        color: var(--my-black-color);
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    #securepay-ui-container p[b-15ekmr7lnl] {
        color: var(--my-grey-color);
        font-size: 0.95rem;
        line-height: 1.5;
    }

/* Adjustments for larger screens */
@media (min-width: 768px) {
    #securepay-ui-container[b-15ekmr7lnl] {
        padding: 30px;
        max-width: 450px;
    }

        #securepay-ui-container iframe[b-15ekmr7lnl] {
            height: 400px;
        }

        #securepay-ui-container h3[b-15ekmr7lnl] {
            font-size: 1.3rem;
        }

        #securepay-ui-container p[b-15ekmr7lnl] {
            font-size: 1rem;
        }
}

/* Adjustments for mobile and small screens */
@media (max-width: 767px) {
    #securepay-ui-container[b-15ekmr7lnl] {
        padding: 15px; /* Reduced padding for smaller screens */
        width: 95%; /* Ensure it fits well on small devices */
        max-width: 100%; /* Remove max width limitation */
    }

        #securepay-ui-container iframe[b-15ekmr7lnl] {
            height: 300px; /* Adjust iframe size for mobile */
        }

        #securepay-ui-container h3[b-15ekmr7lnl] {
            font-size: 1.1rem; /* Smaller font for mobile */
        }

        #securepay-ui-container p[b-15ekmr7lnl] {
            font-size: 0.9rem; /* Slightly smaller font for readability */
        }
}


button[b-15ekmr7lnl] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button:disabled[b-15ekmr7lnl] {
        cursor: not-allowed;
        background-color: #ddd;
    }

    button:hover:enabled[b-15ekmr7lnl] {
        background-color: #007bff;
        color: white;
    }

.reset-button[b-15ekmr7lnl] {
    background-color: #f44336;
    color: white;
}

    .reset-button:hover:enabled[b-15ekmr7lnl] {
        background-color: #d32f2f;
    }

/* Column Title Styling */
[b-15ekmr7lnl] .quickgrid[theme=corporate] .col-title {
    gap: 0.4rem; /* Separate the sort indicator from title text */
    font-weight: bold;
    text-transform: uppercase;
}

[b-15ekmr7lnl] .quickgrid[theme=corporate] .sort-indicator {
    color: var(--col-title-color);
}

/* Column Title Hover and Active States */
[b-15ekmr7lnl] .quickgrid[theme=corporate] button.col-title:hover, [b-15ekmr7lnl] .quickgrid[theme=corporate] .col-options-button:hover {
    background-color: var(--col-title-color);
}

[b-15ekmr7lnl] .quickgrid[theme=corporate] button.col-title:active, [b-15ekmr7lnl] .quickgrid[theme=corporate] .col-options-button:active {
    background-color: var(--col-title-color);
}

/* Subtle Stripe Effect - Alternating Row Colors */
[b-15ekmr7lnl] .quickgrid[theme=corporate] tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.4); /* Even rows have a light background */
}

[b-15ekmr7lnl] .quickgrid[theme=corporate] tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.05); /* Slightly darker background for odd rows */
}

/* Prevent Row Collapse */
[b-15ekmr7lnl] tbody tr {
    height: 1.8rem;
}

/* Checkbox Group Styling */
.checkbox-group[b-15ekmr7lnl] {
    display: flex;
    align-items: center;
    /*flex-wrap: nowrap;*/ /* Prevent wrapping */
    flex-wrap: wrap;
    gap: 20px; /* Adds 20px space between each checkbox */
    overflow: hidden; /* Ensure no overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    margin-bottom: 20px; /* Space between checkboxes and other sections */
}

    .checkbox-group label[b-15ekmr7lnl] {
        font-size: 1rem;
        margin: 0;
        margin-right: 10px; /* Optional: adjust space between checkboxes */
        display: flex;
        align-items: center;
    }

/* Thin Column Separator Line */
[b-15ekmr7lnl] .quickgrid[theme=corporate] th,
[b-15ekmr7lnl] .quickgrid[theme=corporate] td {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Light gray line between columns */
    padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* Add padding around the text */
}

    /* Remove right border on last column */
    [b-15ekmr7lnl] .quickgrid[theme=corporate] th:last-child,
    [b-15ekmr7lnl] .quickgrid[theme=corporate] td:last-child {
        border-right: none;
    }

/* Centering the checkbox within the column */
[b-15ekmr7lnl] .checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    align-items: center; /* Centers the checkbox vertically */
}

/* Styling the checkbox to make it stand out more */
.checkbox-container input[type="checkbox"].styled-checkbox[b-15ekmr7lnl] {
    width: 22px; /* Size the checkbox */
    height: 22px; /* Size the checkbox */
    border: 2px solid #000000; /* Add border to the checkbox */
    background-color: #ffffff; /* Set background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    appearance: none; /* Remove default checkbox appearance */
    border-radius: 4px; /* Optional: Add rounded corners to the checkbox */
    position: relative; /* Position relative for the custom checkmark */
}

    /* Make the checkbox more noticeable on hover */
    .checkbox-container input[type="checkbox"].styled-checkbox:hover[b-15ekmr7lnl] {
        border-color: #000000; /* Change border color on hover */
        background-color: #f0f0f0; /* Change background on hover */
    }

    /* Checkbox checked state */
    .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-15ekmr7lnl] {
        background-color: var(--my-yellow-color); /* Highlight the checkbox when checked */
        border-color: #000000; /* Match border with checked color */
    }

        /* Custom checkmark appearance when checked */
        .checkbox-container input[type="checkbox"].styled-checkbox:checked[b-15ekmr7lnl]::after {
            content: ''; /* Empty content for the checkmark */
            position: absolute;
            top: 4px; /* Position the checkmark inside the checkbox */
            left: 4px;
            width: 10px; /* Size of the checkmark */
            height: 10px; /* Size of the checkmark */
            background-color: #ffffff; /* White checkmark color */
            clip-path: polygon(0 50%, 40% 100%, 100% 0, 60% 30%, 40% 50%); /* Creating the checkmark shape */
        }

    /* Adjust the checkbox when unchecked */
    .checkbox-container input[type="checkbox"].styled-checkbox:not(:checked)[b-15ekmr7lnl]::after {
        content: ''; /* Empty content for unchecked state */
    }

th:contains("Kendo (Sort)")[b-15ekmr7lnl],
td:nth-child(1)[b-15ekmr7lnl] { /* Adjust the nth-child if necessary */
    display: none;
}

/* Container for radio buttons */
.radio-group[b-15ekmr7lnl] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 400px;
}

/* Style for radio input and label */
.radio-option[b-15ekmr7lnl] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    /* Hide default radio button */
    .radio-option input[type="radio"][b-15ekmr7lnl] {
        -webkit-appearance: none; /* Chrome/Safari */
        -moz-appearance: none; /* Firefox */
        appearance: none; /* Default appearance reset */
        width: 20px;
        height: 20px;
        border: 2px solid var(--my-btn-border-color); /* Set the black border */
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        background-color: white; /* White background */
    }

        /* Custom checked effect */
        .radio-option input[type="radio"]:checked[b-15ekmr7lnl] {
            background-color: var(--my-yellow-color); /* Yellow background when selected */
            border-color: var(--my-btn-border-color); /* Keep the black border */
        }

    /* Ensure label is styled nicely */
    .radio-option label[b-15ekmr7lnl] {
        cursor: pointer;
        /*color: var(--my-black-color);*/
        font-weight: normal;
    }

/*.grid {
    border: 2px solid #ddd;*/ /* Add border around the grid */
    /*border-radius: 8px;*/ /* Optional: Add rounded corners */
    /*padding: 15px;*/ /* Optional: Add padding to give space inside the border */
    /*background-color: #fff;*/ /* Optional: Add a background color to differentiate the grid */
/*}*/

#paymentDate[b-15ekmr7lnl] {
    width: 150px; /* Set a fixed width for the date picker */
}

.styled-checkbox[b-15ekmr7lnl] {
    display: block;
}

@media screen and (max-width: 768px) {
    /* Check if there's any rule hiding elements on smaller screens */
    .checkbox-container[b-15ekmr7lnl] {
        display: block; /* Ensure checkboxes are visible */
    }
}

/* Basic switch style */
.switch[b-15ekmr7lnl] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

    /* Hide the checkbox input */
    .switch input[b-15ekmr7lnl] {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Slider style */
.slider[b-15ekmr7lnl] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 50px;
}

    /* The circle inside the slider */
    .slider[b-15ekmr7lnl]:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.4s;
    }

/* When the checkbox is checked, move the slider */
input:checked + .slider[b-15ekmr7lnl] {
    background-color: var(--my-yellow-color); /* Yellow when checked */
}

    /* When the checkbox is checked, move the circle */
    input:checked + .slider[b-15ekmr7lnl]:before {
        transform: translateX(14px);
    }

/* Add a label style */
.checkbox-container[b-15ekmr7lnl] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
/* /Components/Pages/Membership/QuillEditor.razor.rz.scp.css */
.container[b-sbwjbocvh1] {
    width: 500px;
    max-width: 100%;
}

.form-group[b-sbwjbocvh1] {
    margin-bottom: 12px;
}

label[b-sbwjbocvh1] {
    display: block;
    margin-bottom: 4px;
}

input[b-sbwjbocvh1] {
    border: 1px solid #ccc;
}

input[b-sbwjbocvh1],
.ql-editor[b-sbwjbocvh1] {
    padding: 4px;
    font-size: 14px;
}

#editor[b-sbwjbocvh1] {
    height: 130px;
}
/* /Components/SharedComp/AkrMembershipAgreement.razor.rz.scp.css */
/* Toggle switch styles for the consent control (copied from the new-member
   arts selection; CSS isolation means the shared component needs its own copy). */

.akr-consent[b-biwgg96ww5] {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* keep left-aligned; immune to parent ::deep .checkbox-container centering */
    margin-bottom: 10px;
}

.styled-checkbox[b-biwgg96ww5] {
    display: block;
}

/* Basic switch style */
.switch[b-biwgg96ww5] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

    /* Hide the checkbox input */
    .switch input[b-biwgg96ww5] {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Slider style */
.slider[b-biwgg96ww5] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 50px;
}

    /* The circle inside the slider */
    .slider[b-biwgg96ww5]:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.4s;
    }

/* When the checkbox is checked, colour the slider */
input:checked + .slider[b-biwgg96ww5] {
    background-color: var(--my-yellow-color);
}

    /* When the checkbox is checked, move the circle */
    input:checked + .slider[b-biwgg96ww5]:before {
        transform: translateX(14px);
    }