/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-xc7u4jp38c] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-xc7u4jp38c] {
    flex: 1;
}

.sidebar[b-xc7u4jp38c] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-xc7u4jp38c] {
    /* Bootstrap 5.3 theme variables, not hardcoded hex - so this bar (the app's only chrome that
       isn't the always-dark sidebar) actually follows the light/dark toggle instead of staying a
       fixed light-grey no matter what data-bs-theme is set to. */
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-xc7u4jp38c]  a, .top-row[b-xc7u4jp38c]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-xc7u4jp38c]  a:hover, .top-row[b-xc7u4jp38c]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-xc7u4jp38c]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-xc7u4jp38c] {
        justify-content: space-between;
    }

    .top-row[b-xc7u4jp38c]  a, .top-row[b-xc7u4jp38c]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-xc7u4jp38c] {
        flex-direction: row;
    }

    .sidebar[b-xc7u4jp38c] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        /* Establishes its own stacking context (position + an explicit z-index, not just
           position alone) so the whole sidebar - including its flyout submenus, which
           intentionally render outside the sidebar's own width - always paints above the main
           content area, regardless of what that content contains (alerts, banners, anything else
           that happens to set its own "position: relative" and would otherwise compete for
           stacking at the same level as the sidebar). */
        z-index: 10;
    }

    .top-row[b-xc7u4jp38c] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-xc7u4jp38c]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-xc7u4jp38c], article[b-xc7u4jp38c] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-xc7u4jp38c] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xc7u4jp38c] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-h2odp15d59] {
    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-h2odp15d59] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-h2odp15d59] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
    /* Tighter than the nav items below (which sit at px-3/1rem, plus 1rem padding-top on the
       first item) - the logo should read as sitting right in the corner. */
    padding: 0.35rem 0 0.35rem 0.5rem;
}

.navbar-brand[b-h2odp15d59] {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.navbar-brand-logo[b-h2odp15d59] {
    height: 2.6rem;
    width: auto;
    margin-right: 0.5rem;
}

.bi[b-h2odp15d59] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-h2odp15d59] {
    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-h2odp15d59] {
    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-h2odp15d59] {
    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-people-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-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/svg%3E");
}

.bi-box-arrow-left-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z'/%3E%3Cpath fill-rule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708z'/%3E%3C/svg%3E");
}

.bi-hdd-network-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='4' rx='1'/%3E%3Crect x='1' y='10' width='14' height='4' rx='1'/%3E%3Ccircle cx='4' cy='4' r='0.8'/%3E%3Ccircle cx='4' cy='12' r='0.8'/%3E%3C/svg%3E");
}

.bi-diagram-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='1' y='7' width='14' height='2' rx='1'/%3E%3Ccircle cx='2.5' cy='8' r='2.5'/%3E%3Ccircle cx='13.5' cy='8' r='2.5'/%3E%3C/svg%3E");
}

.bi-globe-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cellipse cx='8' cy='8' rx='2.8' ry='6.5'/%3E%3Cline x1='1.5' y1='8' x2='14.5' y2='8'/%3E%3C/svg%3E");
}

.bi-collection-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='2'/%3E%3Ccircle cx='5.5' cy='8' r='1.3' fill='white' stroke='none'/%3E%3Ccircle cx='10.5' cy='8' r='1.3' fill='white' stroke='none'/%3E%3C/svg%3E");
}

.bi-diagram-tree-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='white' stroke='none'/%3E%3Ccircle cx='3' cy='13' r='1.6' fill='white' stroke='none'/%3E%3Ccircle cx='12' cy='8' r='1.6' fill='white' stroke='none'/%3E%3Cpath d='M3 4.6v6.8M3 8h4.5M7.5 8 10.5 8.9M7.5 8 12 6.6'/%3E%3C/svg%3E");
}

.bi-layers-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpolygon points='8,1.5 15,5.5 8,9.5 1,5.5'/%3E%3Cpolygon points='8,7.5 15,11.5 8,15.5 1,11.5' opacity='0.55'/%3E%3C/svg%3E");
}

.bi-tag-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5h6l7 7-6 6-7-7z'/%3E%3Ccircle cx='5' cy='5' r='1' fill='white' stroke='none'/%3E%3C/svg%3E");
}

.bi-megaphone-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 6v3a1 1 0 0 0 1 1h1l6 3V2L3 5H2a1 1 0 0 0-1 1z'/%3E%3Cpath d='M11 4.2v6.6a3.1 3.1 0 0 0 0-6.6z'/%3E%3C/svg%3E");
}

.bi-info-circle-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Ccircle cx='8' cy='4.6' r='1' fill='%23495057'/%3E%3Crect x='7' y='7' width='2' height='5' rx='0.5' fill='%23495057'/%3E%3C/svg%3E");
}

.bi-person-fill-user-frame[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23d7d7d7' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M3 14c0-3 2.5-5 5-5s5 2 5 5v0.5H3z'/%3E%3C/svg%3E");
    margin-right: 0.5rem;
}

.bi-shield-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0z'/%3E%3C/svg%3E");
}

.bi-grid-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
}

/* Application templates: a url tree - one root branching into two leaves. */
.bi-sitemap-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Crect x='6' y='1.5' width='4' height='3.2' rx='0.6' fill='white'/%3E%3Crect x='1.5' y='11.3' width='4' height='3.2' rx='0.6' fill='white'/%3E%3Crect x='10.5' y='11.3' width='4' height='3.2' rx='0.6' fill='white'/%3E%3Cline x1='8' y1='4.7' x2='8' y2='7.6'/%3E%3Cline x1='3.5' y1='7.6' x2='12.5' y2='7.6'/%3E%3Cline x1='3.5' y1='7.6' x2='3.5' y2='11.3'/%3E%3Cline x1='12.5' y1='7.6' x2='12.5' y2='11.3'/%3E%3C/svg%3E");
}

/* Package servers: two stacked rack units, each with its status dot - simple primitives only,
   the same style rule the other icons in this sheet follow. */
.bi-server-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='5' rx='1'/%3E%3Crect x='1' y='9' width='14' height='5' rx='1'/%3E%3Ccircle cx='12.5' cy='4.5' r='0.9' fill='%23512bd4'/%3E%3Ccircle cx='12.5' cy='11.5' r='0.9' fill='%23512bd4'/%3E%3C/svg%3E");
}

.bi-gear-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.6'/%3E%3Ccircle cx='8' cy='8' r='1.1' fill='white' stroke='none'/%3E%3Cline x1='11.6' y1='8' x2='13.4' y2='8'/%3E%3Cline x1='10.55' y1='10.55' x2='11.82' y2='11.82'/%3E%3Cline x1='8' y1='11.6' x2='8' y2='13.4'/%3E%3Cline x1='5.45' y1='10.55' x2='4.18' y2='11.82'/%3E%3Cline x1='4.4' y1='8' x2='2.6' y2='8'/%3E%3Cline x1='5.45' y1='5.45' x2='4.18' y2='4.18'/%3E%3Cline x1='8' y1='4.4' x2='8' y2='2.6'/%3E%3Cline x1='10.55' y1='5.45' x2='11.82' y2='4.18'/%3E%3C/svg%3E");
}

.bi-sliders-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.5' viewBox='0 0 16 16'%3E%3Cline x1='1' y1='4' x2='15' y2='4'/%3E%3Ccircle cx='10' cy='4' r='1.6' fill='white'/%3E%3Cline x1='1' y1='8' x2='15' y2='8'/%3E%3Ccircle cx='5' cy='8' r='1.6' fill='white'/%3E%3Cline x1='1' y1='12' x2='15' y2='12'/%3E%3Ccircle cx='11' cy='12' r='1.6' fill='white'/%3E%3C/svg%3E");
}

/* A band, not a box: edge to edge and flush with the header above (the sidebar's own top inset
   is taken back), so it reads as where you are rather than as a thing to click. */
.active-site-box[b-h2odp15d59] {
    background-color: #495057;
    color: #f1f1f1;
    margin: -0.35rem 0 1rem;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.active-site-box-label[b-h2odp15d59] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: #ced4da;
}

/* Label left, the change action right, both on one row - the box stays two lines however long
   the ISV name is, which is what keeps it reading as a status line rather than a panel. */
.active-site-box-head[b-h2odp15d59] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.1rem;
}

/* Deliberately smaller than btn-sm: it sits inside a headline, so it has to be quieter than the
   name below it. */
.active-site-box-change[b-h2odp15d59] {
    flex: none;
    padding: 0.05rem 0.4rem;
    border: 1px solid #adb5bd;
    border-radius: 0.2rem;
    background: transparent;
    color: #e9ecef;
    font-size: 0.65rem;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
}

.active-site-box-change:hover[b-h2odp15d59],
.active-site-box-change:focus[b-h2odp15d59] {
    background-color: #6c757d;
    border-color: #ced4da;
    color: #fff;
}

.git-project-box[b-h2odp15d59] {
    background-color: #495057;
    color: #f1f1f1;
    margin: 0 0.75rem 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.git-project-box-label[b-h2odp15d59] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: #ced4da;
}

.git-project-box-value[b-h2odp15d59] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.git-project-box-value span:first-child[b-h2odp15d59] {
    overflow-wrap: break-word;
    font-size: 0.78rem;
}

.git-project-info-icon[b-h2odp15d59] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-right: 0;
    margin-left: 0;
    cursor: pointer;
    opacity: 0.85;
}

.git-project-info-icon:hover[b-h2odp15d59] {
    opacity: 1;
}

.nav-requires-republish-badge[b-h2odp15d59] {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    vertical-align: middle;
}

/* The username used to live in its own permanent box above the Settings toggle
   (.active-user-frame, now gone) - it now lives as a non-interactive header row at the top of the
   Settings submenu instead, right above the actual menu items. */
/* The settings block is pinned to the bottom. When the publish item is showing it takes over
   that job, so the two stay together at the foot of the menu instead of one of them floating. */
/* The bottom block - publish, server settings, account - is pinned to the bottom as one, so
   each item keeps its place whichever of the three are shown. */
.menu-bottom[b-h2odp15d59] {
    margin-top: auto;
}

.submenu-username[b-h2odp15d59] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #b8b3c4;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.submenu-username .bi[b-h2odp15d59] {
    margin-right: 0.5rem;
}

.settings-logout-form[b-h2odp15d59] {
    margin: 0;
}

.settings-logout-btn[b-h2odp15d59] {
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nav-item[b-h2odp15d59] {
    font-size: 0.9rem;
    padding-bottom: 0.35rem;
}

    /* min-height, not height: a label long enough to wrap ("B-Op User Permissions") would
       otherwise overflow its 3rem box and lay itself over whatever comes next in the sidebar.
       A one-line entry is unchanged - flex centring keeps it at exactly 3rem. */
    .nav-item[b-h2odp15d59]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        min-height: 3rem;
        display: flex;
        align-items: center;
        line-height: 1.25;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        width: 100%;
    }

.nav-item[b-h2odp15d59]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-h2odp15d59]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* "B-Op Platform" and "Settings" fly out their submenu on mouseover - pure CSS, no click/JS
   needed. The submenu is a direct child of .submenu-parent, so hovering anywhere within it
   (including once it's open) keeps :hover - and therefore the open state - active. It is
   positioned absolutely and slides open to the right, laying over the main content instead of
   pushing the rest of the sidebar down. */
.submenu-parent[b-h2odp15d59] {
    position: relative;
}

.submenu-toggle[b-h2odp15d59] {
    cursor: default;
    user-select: none;
}

.submenu-caret[b-h2odp15d59] {
    margin-left: auto;
    font-size: 0.65rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.submenu-parent:hover > .submenu-toggle[b-h2odp15d59] {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.submenu-parent:hover .submenu-caret[b-h2odp15d59] {
    transform: rotate(90deg);
}

.submenu[b-h2odp15d59] {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* Touches the parent's edge with zero gap - any margin here would be dead space the mouse
       has to cross to reach the submenu; since :hover only holds while the pointer is over
       .submenu-parent or one of its descendants, a gap the pointer briefly leaves both boxes
       through closes the menu before the pointer ever arrives. The visual "floating" look comes
       entirely from the box-shadow, not a margin. */
    left: 100%;
    top: 0;
    min-width: 270px;
    padding: 0.35rem;
    background-color: #3a1a5c;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 20;
    /* Hidden via visibility/opacity (not display:none) specifically so hiding can be DELAYED:
       .submenu-parent's own hoverable box is only as tall as the toggle row itself (the submenu
       is absolutely positioned, so it doesn't add to that row's height) - aiming the pointer at a
       LOWER item in the flyout via a diagonal path can dip below the toggle's row before crossing
       into the submenu's own box, passing through genuinely unhoverable space for an instant. A
       short delay before hiding gives that crossing time to complete without a JS hover-intent
       algorithm; showing stays instant (see the :hover rule below, which resets the transition).
       Deliberately NOT using pointer-events for this: unlike visibility, a plain CSS transition on
       pointer-events has no browser-guaranteed timing (measured flipping to "none" almost
       immediately in Chromium, well before the opacity/visibility fade finished - defeating the
       whole point). visibility alone is sufficient AND spec-guaranteed to behave asymmetrically:
       becoming visible applies at the START of its transition, becoming hidden only at the END -
       exactly "show instantly, hide after a grace period" - and hidden also removes the element
       from hit-testing on its own, so no separate pointer-events rule is needed at all. */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.25s, opacity 0.25s;
}

.submenu-parent:hover > .submenu[b-h2odp15d59] {
    visibility: visible;
    opacity: 1;
    transition: none;
}

/* Anchored near the bottom of the sidebar - open upward so the flyout never runs off the
   bottom of the viewport. */
.submenu-parent.flyout-up > .submenu[b-h2odp15d59] {
    top: auto;
    bottom: 0;
}

.submenu-parent:hover > .submenu[b-h2odp15d59] {
    display: flex;
}

.nav-scrollable[b-h2odp15d59] {
    display: none;
    /* One consistent inset at the very top of the sidebar - the gap between nav items
       themselves is handled uniformly by .nav-item's own padding-bottom, regardless of how
       many separate <nav> blocks they are split across. */
    padding-top: 0.35rem;
}

.navbar-toggler:checked ~ .nav-scrollable[b-h2odp15d59] {
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .navbar-toggler[b-h2odp15d59] {
        display: none;
    }

    .nav-scrollable[b-h2odp15d59] {
        /* Never collapse the sidebar for wide screens */
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 3.5rem);

        /* No overflow-y here on purpose: setting it to anything but "visible" forces the browser
           to clip the x-axis too (the used value of overflow-x becomes "auto" whenever overflow-y
           isn't "visible"), which would cut off the flyout submenus that intentionally render
           outside the sidebar's own width. The menu is short enough in practice to never need
           vertical scrolling. */
    }
}

/* The one red item in the menu: work that exists only in this user's copy until they push it.
   Red because it is the state that needs acting on, not a place to navigate to. */
/* Work waiting to be published is not an error - somebody has edits and has not pushed them yet,
   which is the normal state of an afternoon's work. Blue: it asks for attention without claiming
   something went wrong, and it leaves red to Delete. */
/* Shaped exactly like the status boxes below it - same inset, same padding, same font, no 3rem
   minimum. It is one of the boxes at the bottom of the menu, not a menu point that happens to be
   coloured, and three boxes of three different heights read as three unrelated things. */
.publish-pending-nav .nav-item[b-h2odp15d59] {
    padding: 0 0.75rem;
    font-size: 0.85rem;
}

.publish-pending-nav[b-h2odp15d59] {
    margin-bottom: 0.5rem;
}

.nav-item[b-h2odp15d59]  a.push-pending {
    background-color: #0d6efd;
    color: #fff;
    font-weight: 600;
    min-height: 0;
    padding: 0.5rem 0.85rem;
    line-height: 1.5;
}

.nav-item[b-h2odp15d59]  a.push-pending .bi {
    margin-right: 0.5rem;
}

.nav-item[b-h2odp15d59]  a.push-pending:hover,
.nav-item[b-h2odp15d59]  a.push-pending.active {
    background-color: #3d8bfd;
    color: #fff;
}

.bi-arrow-up-circle-fill-nav-menu[b-h2odp15d59] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='M8 4 4.5 7.5h2.2V12h2.6V7.5h2.2z' fill='%230d6efd'/%3E%3C/svg%3E");
}

/* Builder-Client box at the very bottom: green when the developer's build client answers the
   browser's ping, grey while it does not (or has not answered yet). */
.build-client-box[b-h2odp15d59] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #495057;
    color: #ced4da;
    margin: 0 0.75rem 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.build-client-box.build-client-available[b-h2odp15d59] {
    background-color: #198754;
    color: #f1f1f1;
}

.build-client-dot[b-h2odp15d59] {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #adb5bd;
}

.build-client-available .build-client-dot[b-h2odp15d59] {
    background-color: #d1e7dd;
}

/* The base data server, at the very bottom of the menu. Shaped like the Builder-Client box above
   it - the two answer the same kind of question - but this one is a button: the whole tile
   resyncs. Green when the last downsync reached that server, red when it did not; red here is a
   state, not a failure, so the info button next to it says what is still working. */
/* Account sits last of everything now, so it carries the bottom spacing the two status boxes
   used to provide by sitting under it. */
.settings-username-nav[b-h2odp15d59] {
    margin-bottom: 0.75rem;
}

/* What stands in for the menu while the base data is coming down - quiet, because it is a wait,
   not a warning, and the screen beside it is already showing the sync in detail. */
.menu-syncing[b-h2odp15d59] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0.75rem;
    padding: 0.5rem 0.85rem;
    background-color: #495057;
    color: #ced4da;
    border-radius: 4px;
    font-size: 0.85rem;
}

.menu-syncing-dot[b-h2odp15d59] {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #9ec5fe;
    animation: menu-syncing-pulse-b-h2odp15d59 1.1s ease-in-out infinite;
}

@keyframes menu-syncing-pulse-b-h2odp15d59 {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* One coloured box, the way the Builder-Client box above it is one box - everything inside it is
   transparent and sits on that colour: the tile is the resync button, and the info and gear are
   parts of the same tile rather than buttons parked next to it. */
.basedata-box[b-h2odp15d59] {
    display: flex;
    align-items: stretch;
    margin: 0 0.75rem 0.5rem;
    border-radius: 4px;
    overflow: hidden;
    color: #f1f1f1;
    font-size: 0.85rem;
    line-height: 1.5;
}

.basedata-online[b-h2odp15d59] {
    background-color: #198754;
}

.basedata-offline[b-h2odp15d59] {
    background-color: #b02a37;
}

/* Nothing has asked yet - the grey of the Builder-Client box before its first ping, because
   "no answer yet" is neither good news nor bad. */
.basedata-unknown[b-h2odp15d59] {
    background-color: #495057;
    color: #ced4da;
}

.basedata-resync[b-h2odp15d59] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    background: none;
    color: inherit;
    padding: 0.5rem 0.85rem;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.basedata-resync:hover:not(:disabled)[b-h2odp15d59],
.basedata-info:hover[b-h2odp15d59],
.basedata-configure:hover[b-h2odp15d59] {
    background-color: rgba(255, 255, 255, 0.18);
}

.basedata-resync:disabled[b-h2odp15d59] {
    cursor: default;
    opacity: 0.75;
}

.basedata-dot[b-h2odp15d59] {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #f1f1f1;
}

.basedata-info[b-h2odp15d59] {
    flex: none;
    width: 2rem;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
}

/* The gear at the right end of the tile itself, divided from the label by a hairline rather than
   by a gap - one box with two things to press, not two boxes. */
.basedata-configure[b-h2odp15d59] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    color: inherit;
}

/* The shared .bi rule spaces an icon from the label it precedes; here it is the whole button. */
.basedata-configure .bi[b-h2odp15d59] {
    margin-right: 0;
}

.basedata-note[b-h2odp15d59] {
    background-color: #5c1a20;
    color: #f1f1f1;
    margin: -0.25rem 0.75rem 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* A working-copy warning above the publish item: goldenrod, like everything that is not an error
   of the moment but a state somebody has to see to. */
.workspace-warning[b-h2odp15d59] {
    background-color: #5c4a10;
    color: #f1f1f1;
    margin: 0 0.75rem 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.workspace-warning-label[b-h2odp15d59] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: #e6d9a8;
}

/* A line inside a flyout that is not a menu point - "nothing to list", or why the list could not
   be fetched. Quieter than an item, and deliberately not clickable. */
.submenu-note[b-h2odp15d59] {
    padding: 0.4rem 1.5rem 0.5rem;
    color: #adb5bd;
    font-size: 0.8rem;
    line-height: 1.4;
    max-width: 18rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0hya1mdhlo],
.components-reconnect-repeated-attempt-visible[b-0hya1mdhlo],
.components-reconnect-failed-visible[b-0hya1mdhlo],
.components-pause-visible[b-0hya1mdhlo],
.components-resume-failed-visible[b-0hya1mdhlo],
.components-rejoining-animation[b-0hya1mdhlo] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-0hya1mdhlo],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-0hya1mdhlo],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-0hya1mdhlo],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-0hya1mdhlo],
#components-reconnect-modal.components-reconnect-retrying[b-0hya1mdhlo],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-0hya1mdhlo],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-0hya1mdhlo],
#components-reconnect-modal.components-reconnect-failed[b-0hya1mdhlo],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-0hya1mdhlo] {
    display: block;
}


#components-reconnect-modal[b-0hya1mdhlo] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-0hya1mdhlo 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-0hya1mdhlo 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-0hya1mdhlo 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-0hya1mdhlo]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-0hya1mdhlo 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-0hya1mdhlo {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-0hya1mdhlo {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-0hya1mdhlo {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-0hya1mdhlo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-0hya1mdhlo] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-0hya1mdhlo] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-0hya1mdhlo] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-0hya1mdhlo] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-0hya1mdhlo] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-0hya1mdhlo] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-0hya1mdhlo 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-0hya1mdhlo] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-0hya1mdhlo {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ApplicationUrlNodeRow.razor.rz.scp.css */
/* A near-white hover is right on the light theme and unreadable on the dark one - there the row
   text is light, so the highlight has to be a lift of the surface rather than a flood of white. */
.tree-row:hover[b-09mgvruva3] {
    background-color: #f0f0f0;
}

html[data-bs-theme="dark"] .tree-row:hover[b-09mgvruva3] {
    background-color: rgba(255, 255, 255, 0.09);
}
/* /Components/Pages/BaseDataPickerDialog.razor.rz.scp.css */
/* Lies over the editor: the backdrop dims the page and closes the dialog when clicked, the dialog
   itself is fixed and centred so it stays in view however far the editor was scrolled. */
.picker-backdrop[b-z7leh1491x] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1050;
}

.picker-dialog[b-z7leh1491x] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(56rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    padding: 1rem 1.25rem;
    z-index: 1060;
}

/* Only the body scrolls, so the title and the buttons stay where the eye left them. */
.picker-body[b-z7leh1491x] {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 6rem;
}

.picker-footer[b-z7leh1491x] {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

html[data-bs-theme="dark"] .picker-dialog[b-z7leh1491x] {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.7);
}
/* /Components/Pages/BaseDataSync.razor.rz.scp.css */
/* The screen a login passes through. Narrow and centred like the login box above it, because it
   is the same moment of the same errand - not a page of the application yet. */
.sync-box[b-72pekn9ocx] {
    max-width: 34rem;
    margin: 3rem auto;
}

.sync-headline[b-72pekn9ocx] {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.sync-subline[b-72pekn9ocx] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.sync-progress[b-72pekn9ocx] {
    height: 0.5rem;
    margin-bottom: 1.25rem;
}

/* The bar moves by a tenth per collection, so it is worth animating - without this it jumps. */
.sync-progress .progress-bar[b-72pekn9ocx] {
    transition: width 0.25s ease-out;
}

.sync-lines[b-72pekn9ocx] {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.sync-line[b-72pekn9ocx] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.9rem;
}

.sync-line-mark[b-72pekn9ocx] {
    flex: none;
    width: 1rem;
    text-align: center;
    font-weight: 700;
}

.sync-line-label[b-72pekn9ocx] {
    flex: 1 1 auto;
}

.sync-line-state[b-72pekn9ocx] {
    flex: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Waiting is quiet, arrived is plain, changed is the one worth looking at, refused is the one
   worth reading. Green means "came through", goldenrod "something moved" - the app's own code. */
.sync-line-waiting[b-72pekn9ocx] {
    color: #adb5bd;
}

.sync-line-served .sync-line-mark[b-72pekn9ocx] {
    color: #198754;
}

.sync-line-changed .sync-line-mark[b-72pekn9ocx],
.sync-line-changed .sync-line-state[b-72pekn9ocx] {
    color: #8a6d0b;
    font-weight: 600;
}

.sync-line-refused .sync-line-mark[b-72pekn9ocx],
.sync-line-refused .sync-line-state[b-72pekn9ocx] {
    color: #b02a37;
}

.sync-actions[b-72pekn9ocx] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Pages/PermissionPickerNodeRow.razor.rz.scp.css */
/* A near-white hover is right on the light theme and unreadable on the dark one - there the row
   text is light, so the highlight has to be a lift of the surface rather than a flood of white. */
.tree-row:hover[b-mjyars1y1x] {
    background-color: #f0f0f0;
}

html[data-bs-theme="dark"] .tree-row:hover[b-mjyars1y1x] {
    background-color: rgba(255, 255, 255, 0.09);
}

/* A picked node - especially a picked branch, which speaks for everything beneath it. */
.tree-row-picked[b-mjyars1y1x] {
    background-color: rgba(13, 110, 253, 0.08);
}

html[data-bs-theme="dark"] .tree-row-picked[b-mjyars1y1x] {
    background-color: rgba(110, 168, 254, 0.14);
}
/* /Components/Pages/ServiceManage.razor.rz.scp.css */
/* The revision the publish page just produced - green is what published means here. */
.row-just-saved > td[b-znmbgmuakc] {
    background-color: rgba(var(--bs-success-rgb), 0.12);
}
/* /Components/Pages/ServicePublish.razor.rz.scp.css */
/* The steps of an automatic build, so a build that takes minutes is seen to be doing something.
   The marker column says where each step is; the colours follow the usual meaning - green done,
   red failed, primary running, muted still to come. */
.build-steps[b-tbq78xji7p] {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.build-step[b-tbq78xji7p] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.15rem 0;
}

.build-step-marker[b-tbq78xji7p] {
    display: inline-block;
    width: 1.4rem;
    text-align: center;
    font-weight: 600;
    flex: none;
}

.build-step-pending[b-tbq78xji7p] {
    color: var(--bs-secondary-color);
}

.build-step-running[b-tbq78xji7p] {
    color: var(--bs-primary);
}

.build-step-done[b-tbq78xji7p] {
    color: var(--bs-success);
}

.build-step-failed[b-tbq78xji7p] {
    color: var(--bs-danger);
}
/* /Components/Pages/ServiceVersionDetails.razor.rz.scp.css */
/* A history row opens its entry, so it has to look like it does. */
.qa-history-row[b-ix1ws84cmv] {
    cursor: pointer;
}

/* The facts of a build read as a form nobody can type into - label left, value right. */
.version-facts dt[b-ix1ws84cmv] {
    font-weight: 600;
}
