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

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

main[b-137228am7a] {
    flex: 1;
}

.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;
    }

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

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

    .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;
    }
/* _content/WAKRMshipAdmin/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-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;*/
}

.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;
    }
}
/* _content/WAKRMshipAdmin/Components/Pages/Home.razor.rz.scp.css */
/* Common */
body[b-t11cjeq2c2] {
    /* DXCOMMENT: Duplicate a font family and font size from the web.config (devexpress->themes->font settings) for the web-site's HTML content */
    font: 16px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

/* Article Layout */
.text-content[b-t11cjeq2c2] {
    min-height: 100%;
    max-width: 816px;
    margin: 0px auto;
    padding: 0px 14px 0px 14px;
    word-wrap: break-word;
}

@media (min-width: 816px) {
    .text-content[b-t11cjeq2c2] {
        padding: 0px 48px;
    }
}

/* Base Styles */
.text-content[b-t11cjeq2c2] {
    color: #666;
    line-height: 1.5;
}

    .text-content p[b-t11cjeq2c2] {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    /* Headers */
    .text-content h1[b-t11cjeq2c2], .text-content h2[b-t11cjeq2c2], .text-content h3[b-t11cjeq2c2], .text-content h4[b-t11cjeq2c2], .text-content h5[b-t11cjeq2c2], .text-content h6[b-t11cjeq2c2] {
        color: #444;
        font-weight: normal;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    .text-content h3[b-t11cjeq2c2], .text-content h4[b-t11cjeq2c2], .text-content h5[b-t11cjeq2c2], .text-content h6[b-t11cjeq2c2] {
        font-weight: 600;
    }

    .text-content h1[b-t11cjeq2c2] {
        font-size: 2em;
    }

    .text-content h2[b-t11cjeq2c2] {
        font-size: 1.75em;
    }

    .text-content h3[b-t11cjeq2c2] {
        font-size: 1.375em;
    }

    .text-content h4[b-t11cjeq2c2] {
        font-size: 1.25em;
    }

    .text-content h5[b-t11cjeq2c2] {
        font-size: 1.125em;
    }

    .text-content h6[b-t11cjeq2c2] {
        font-size: 1em;
    }

    .text-content > h1:not(:first-child)[b-t11cjeq2c2] {
        margin-top: 1.75rem;
    }

    .text-content > h2:not(:first-child)[b-t11cjeq2c2] {
        margin-top: 1.5rem;
    }

    .text-content > h3:not(:first-child)[b-t11cjeq2c2] {
        margin-top: 1.25rem;
    }

    .text-content > h4:not(:first-child)[b-t11cjeq2c2] {
        margin-top: 1.125rem;
    }

    .text-content > h5:not(:first-child)[b-t11cjeq2c2] {
        margin-top: 1rem;
    }

    .text-content > h6:not(:first-child)[b-t11cjeq2c2] {
        margin-top: .9rem;
    }

    /* Title + Lead */
    .text-content .title[b-t11cjeq2c2] {
        margin-top: 1.2rem;
        margin-bottom: .8rem;
    }

@media (min-width: 576px) {
    .text-content .title[b-t11cjeq2c2] {
        color: #222;
        font-size: 2em;
        font-weight: 600;
    }
}

.text-content .lead[b-t11cjeq2c2] {
    font-size: 1.125rem;
    font-weight: 300;
}

@media (min-width: 576px) {
    .text-content .lead[b-t11cjeq2c2] {
        max-width: 80%;
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
}

.text-content > h2.category[b-t11cjeq2c2] {
    color: #222;
    font-weight: 600;
}

    .text-content > h2.category:not(:first-child)[b-t11cjeq2c2] {
        margin-top: 3rem;
    }


/* #href bookmark jump */
.text-content > h1[id][b-t11cjeq2c2]::before,
.text-content > h2[id][b-t11cjeq2c2]::before,
.text-content > h3[id][b-t11cjeq2c2]::before,
.text-content > h4[id][b-t11cjeq2c2]::before {
    display: block;
    height: calc(3.13rem + 1.2rem); /* Main Menu Height (3.13rem) + .title margin-top = 1.2rem */
    margin-top: calc(-3.13rem - 1.2rem);
    visibility: hidden;
    content: "";
}


/* Link */
.text-content a[b-t11cjeq2c2] {
    /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
    color: #F87C1D;
}

    .text-content a:visited[b-t11cjeq2c2] {
        /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
        color: #BA5D15; /* 25% black overlay */
    }

    .text-content a:hover[b-t11cjeq2c2] {
        /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
        color: #FAA96C; /* 35% white overlay */
    }

.text-content b[b-t11cjeq2c2], .text-content strong[b-t11cjeq2c2] {
    color: #444;
}

mark[b-t11cjeq2c2] {
    /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
    background-color: #F87C1D;
    color: #fff;
}

small[b-t11cjeq2c2] {
    color: #999999;
    font-size: 0.75em;
}

code[b-t11cjeq2c2], pre[b-t11cjeq2c2] {
    font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
}

hr[b-t11cjeq2c2] {
    height: 1px;
    opacity: 0.1;
    background-color: #000000;
    border: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

blockquote[b-t11cjeq2c2] {
    background-color: #f2f2f2;
    color: #444;
    margin: 0;
    margin-bottom: 1rem;
    font-size: 1.125em;
    padding: 29px 26px;
    border: 0;
    border-left: 6px solid #d8d8d8;
}

    blockquote p[b-t11cjeq2c2] {
        margin-top: 0;
    }

    blockquote footer[b-t11cjeq2c2] {
        display: block;
        font-size: 0.875em;
        font-style: italic;
        color: #999;
    }

        blockquote footer[b-t11cjeq2c2]::before {
            content: "\2014 \00A0";
        }

/* Contents (Left Panel) */
.section-caption.contents-caption[b-t11cjeq2c2] {
    padding-left: 31px;
    border-top: none !important;
}


/* Lists */
.text-content ul[b-t11cjeq2c2],
.text-content ol[b-t11cjeq2c2] {
    margin-top: 1em;
    margin-bottom: 1em;
}

@media (min-width: 992px) {
    .bd-content > ul[b-t11cjeq2c2], .bd-content > ol[b-t11cjeq2c2], .bd-content > p[b-t11cjeq2c2] {
        max-width: 80%;
    }
}

/* Text Alignment */
.text-center[b-t11cjeq2c2] {
    text-align: center !important;
}

.text-right[b-t11cjeq2c2] {
    text-align: right !important;
}

.indent-p[b-t11cjeq2c2] {
    padding-left: 40px;
    padding-right: 20px;
}

.bordered-block[b-t11cjeq2c2] {
    background-color: #f2f2f2;
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: .2rem;
}

@media (min-width: 576px) {
    .bordered-block[b-t11cjeq2c2] {
        padding: 1.5rem;
        margin-right: 0;
        margin-left: 0;
        border-width: .2rem;
    }
}

/* Tables */
.table[b-t11cjeq2c2] {
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
}

    .table td[b-t11cjeq2c2],
    .table th[b-t11cjeq2c2] {
        padding: .75em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
        text-align: left;
    }

    .table thead th[b-t11cjeq2c2] {
        border-bottom: 1px solid #d8d8d8;
        background-color: #f2f2f2;
        color: #222;
    }

    .table thead tr[b-t11cjeq2c2] {
        box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.23);
    }

    .table tbody + tbody[b-t11cjeq2c2] {
        border-top: 1px solid #dee2e6;
    }

.table-bordered[b-t11cjeq2c2] {
    border: 1px solid #dee2e6;
}

    .table-bordered td[b-t11cjeq2c2],
    .table-bordered th[b-t11cjeq2c2] {
        border: 1px solid #dee2e6
    }

    .table-bordered thead td[b-t11cjeq2c2],
    .table-bordered thead th[b-t11cjeq2c2] {
        border-bottom-width: 1px
    }

.table-responsive[b-t11cjeq2c2] {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Code, Control Area Block */
.control-area-block[b-t11cjeq2c2] {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    background-color: #f8f9fa;
}

/* Images */
.img-responsive[b-t11cjeq2c2] {
    max-width: 100%;
    height: auto;
}

.img-float-left[b-t11cjeq2c2] {
    float: left;
    padding-right: 40px;
    padding-bottom: 40px;
}

@media (max-width: 576px) {
    .img-float-left[b-t11cjeq2c2] {
        padding-right: 16px;
        padding-bottom: 16px;
    }
}


/* Printing Styles */
@media print {
    .menu-container[b-t11cjeq2c2], .left-block[b-t11cjeq2c2], .right-block[b-t11cjeq2c2],
    .footer-wrapper[b-t11cjeq2c2] {
        display: none !important;
    }

    .left-panel[b-t11cjeq2c2] {
        display: none !important;
    }

    .text-content[b-t11cjeq2c2] {
        max-width: 100%;
    }

    html[b-t11cjeq2c2] {
        padding: 0 !important;
    }

    .page-toolbar-wrapper[b-t11cjeq2c2] {
        display: none !important;
    }
}

/*slide show*/
*[b-t11cjeq2c2] {
    box-sizing: border-box
}

/* Slideshow container */
.slideshow-container[b-t11cjeq2c2] {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides[b-t11cjeq2c2] {
    display: none;
}

/* Next & previous buttons */
.prev[b-t11cjeq2c2], .next[b-t11cjeq2c2] {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next[b-t11cjeq2c2] {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover[b-t11cjeq2c2], .next:hover[b-t11cjeq2c2] {
        background-color: rgba(0,0,0,0.8);
    }

/* Caption text */
.sstext[b-t11cjeq2c2] {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.ssnumbertext[b-t11cjeq2c2] {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.ssdot[b-t11cjeq2c2] {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .active[b-t11cjeq2c2], .ssdot:hover[b-t11cjeq2c2] {
        background-color: #717171;
    }

/* Fading animation */
.fade[b-t11cjeq2c2] {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade-b-t11cjeq2c2;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade-b-t11cjeq2c2 {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

.slideshow-container[b-t11cjeq2c2] {
    max-width: 1000px;
    height: 400px; /* Set a fixed height */
    position: relative;
    margin: auto;
    overflow: hidden; /* Optional: ensures no overflow when images scale */
}

.mySlides[b-t11cjeq2c2] {
    display: none;
    width: 100%;
    height: 100%;
}

    .mySlides img[b-t11cjeq2c2] {
        width: 100%;
        height: 100%;
        /*object-fit: cover;  Keeps aspect ratio and fills container */
        object-fit: contain;
    }

/* _content/WAKRMshipAdmin/Components/Pages/Membership/FY25/MemberEmailFY25.razor.rz.scp.css */
/* 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";
}


/* _content/WAKRMshipAdmin/Components/Pages/Membership/FY25/MemberEmailGradingFY25.razor.rz.scp.css */
/* 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;
}
/* _content/WAKRMshipAdmin/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;
}
/* _content/WAKRMshipAdmin/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;
    }

    .input-icon > .form-control[b-5z0gry9x4j],
    .input-icon > .form-select[b-5z0gry9x4j] {
        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;
}

/* _content/WAKRMshipAdmin/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 clamp / truncation */
.title[b-mqj14pun52] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75%;
}

/* 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: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
}

@media (max-width: 575.98px) {
    .stat-chips[b-mqj14pun52] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 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;
}

/* Actions vs stretched-link layering */
.event-card .card-actions[b-mqj14pun52] {
    z-index: 3;
}

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

.event-card .stretched-link[b-mqj14pun52]::after {
    z-index: 1;
}
/* _content/WAKRMshipAdmin/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;
}

/* =========================
   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";
}
/* _content/WAKRMshipAdmin/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;
}

/* =========================
   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;
}
/* _content/WAKRMshipAdmin/Components/Pages/Membership/NewMember.razor.rz.scp.css */
body[b-awpvgdvw11] {
}
/* _content/WAKRMshipAdmin/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;
}


/* _content/WAKRMshipAdmin/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;
}
/* _content/WAKRMshipAdmin/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;
}
/* _content/WAKRMshipAdmin/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;
}
/* _content/WAKRMshipAdmin/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;
}
/* _content/WAKRMshipAdmin/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;
}