/* /Components/DeveloperTimeline.razor.rz.scp.css */
/* A month of days beside the developers, in one grid: the name column, then a column a day. The grid
   scrolls sideways inside its own box on a narrow screen rather than squeezing the days to nothing. */
.tl-scroll[b-5ka4vnr5b6] {
    overflow-x: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
}

.tl-grid[b-5ka4vnr5b6] {
    display: grid;
    grid-auto-rows: 1.9rem;
    min-width: 62rem;
    font-size: 0.85rem;
}

.tl-corner[b-5ka4vnr5b6],
.tl-month[b-5ka4vnr5b6],
.tl-day-head[b-5ka4vnr5b6] {
    background: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.tl-month[b-5ka4vnr5b6] {
    text-align: center;
    font-weight: 700;
    line-height: 1.9rem;
}

.tl-day-head[b-5ka4vnr5b6] {
    text-align: center;
    line-height: 1.9rem;
    border-left: 1px solid var(--bs-border-color);
}

.tl-cell[b-5ka4vnr5b6] {
    border-left: 1px solid var(--bs-border-color-translucent);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* Weekends shaded, as on any planning sheet - nothing is planned there, a task only runs across. */
.tl-weekend[b-5ka4vnr5b6] {
    background: rgba(128, 128, 128, 0.28);
}

/* Today: its day in the header row, in blue - the one day everybody looks for first. Only the day
   cell, not the column: a tinted column ran through every developer's lines and read as a bar. */
.tl-day-head.tl-today[b-5ka4vnr5b6] {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

/* The developers in turn on two quiet backgrounds, so where one ends and the next begins is plain
   however many lines each one takes. */
.tl-name[b-5ka4vnr5b6] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color);
    color: #212529;
}

.tl-name-0[b-5ka4vnr5b6] {
    background: #c9c9c9;
}

.tl-name-1[b-5ka4vnr5b6] {
    background: #f6c9ad;
}

.tl-summary[b-5ka4vnr5b6] {
    color: #495057;
}

/* A task: a bar across the days it runs through, in the colour of where it is in its life - the
   same colours as the KanBan board's columns. */
.tl-bar[b-5ka4vnr5b6] {
    z-index: 1;
    margin: 0.2rem 0.1rem;
    padding: 0 0.4rem;
    border-radius: 0.3rem;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.tl-bar[draggable="true"][b-5ka4vnr5b6] {
    cursor: grab;
}

.tl-status-inspecification[b-5ka4vnr5b6] { background: #6c757d; }
.tl-status-specified[b-5ka4vnr5b6] { background: #0aa2c0; }
.tl-status-indevelopment[b-5ka4vnr5b6] { background: #0d6efd; }
.tl-status-inqualityassurance[b-5ka4vnr5b6] { background: #6f42c1; }
.tl-status-readyforrollout[b-5ka4vnr5b6] { background: #198754; }

/* A bar that began last month, or goes on into the next, says so with a square end. */
.tl-from-before[b-5ka4vnr5b6] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}

.tl-goes-on[b-5ka4vnr5b6] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
}

/* While something is dragged the bars let the drop through to the day beneath them. */
.tl-dragging .tl-bar[b-5ka4vnr5b6] {
    pointer-events: none;
}

.tl-drop-target[b-5ka4vnr5b6] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: -2px;
}

.tl-pools[b-5ka4vnr5b6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .tl-pools[b-5ka4vnr5b6] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tl-pool[b-5ka4vnr5b6] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    padding: 0.5rem 0.6rem;
    min-height: 4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tl-card[b-5ka4vnr5b6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.3rem;
    background: var(--bs-body-bg);
    user-select: none;
}

.tl-card[draggable="true"][b-5ka4vnr5b6] {
    cursor: grab;
}

.tl-card-unassigned[b-5ka4vnr5b6] {
    border-style: dashed;
}

.tl-card-title[b-5ka4vnr5b6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/KanbanStageBadge.razor.rz.scp.css */
.kanban-stage[b-khonoykn0k] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
}

.kanban-stage-backlog[b-khonoykn0k] { background-color: #6c757d; }
.kanban-stage-planned[b-khonoykn0k] { background-color: #0aa2c0; }
.kanban-stage-inexecution[b-khonoykn0k] { background-color: #0d6efd; }
.kanban-stage-qualityassurance[b-khonoykn0k] { background-color: #6f42c1; }
.kanban-stage-delivered[b-khonoykn0k] { background-color: #198754; }
/* /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%);
}

/* There is no .top-row here any more - the grey bar across the top of every page is gone, and
   with it every rule that positioned, coloured and stacked it. The .top-row in NavMenu is a
   different element with its own scoped stylesheet; do not resurrect these rules for it. */

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

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

/* The title and the build number stack, so the number sits under the title rather than under the
   logo - which is why the text is a column of its own beside the image rather than loose in the
   link. Tight leading, or the two lines push the bar taller than the logo. */
.navbar-brand-text[b-h2odp15d59] {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.navbar-brand-version[b-h2odp15d59] {
    font-size: 0.7rem;
    font-weight: normal;
    opacity: 0.7;
}

.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 key - the access tokens. */
.bi-key-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' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Ccircle cx='5' cy='11' r='3.2'/%3E%3Ccircle cx='5' cy='11' r='0.9' fill='white' stroke='none'/%3E%3Cline x1='7.4' y1='8.6' x2='13.8' y2='2.2'/%3E%3Cline x1='11.6' y1='4.4' x2='13.4' y2='6.2'/%3E%3Cline x1='9.8' y1='6.2' x2='11.3' y2='7.7'/%3E%3C/svg%3E");
}

/* An arrow into a tray - the Builder-Client download. */
.bi-download-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' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cline x1='8' y1='1.8' x2='8' y2='10'/%3E%3Cpolyline points='4.6,6.8 8,10.2 11.4,6.8'/%3E%3Cpolyline points='2.2,10.6 2.2,13.8 13.8,13.8 13.8,10.6'/%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.2rem;
}

    /* One line per item, and no taller than one line needs. The menu is a list of places to go,
       not a set of buttons to aim at - at 3rem each with a gap between them the lower half of it
       needed scrolling on a laptop, and the two status boxes at the bottom were the first thing to
       go. nowrap is what keeps that true: a label too long for 250px is clipped rather than
       wrapped into a second line that would put the height back. Nothing in the menu is close to
       it today ("Application templates" is the longest), and the flyout parents keep their caret
       because it is pushed with margin rather than laid out after the text. Raised a little on
       2026-10-01 (2rem to 2.25rem, with a 0.2rem gap) because the list read as cramped - still well
       short of the 3rem that pushed the status boxes off a laptop screen. */
    .nav-item[b-h2odp15d59]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        min-height: 2.25rem;
        display: flex;
        align-items: center;
        line-height: 1.2;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
    }

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

/* The account flyout carries the longest entries of all ("Download Builder-Client"), so it is the
   one made wider - and its entries stay on one line rather than wrapping under their icon. */
.submenu.account-submenu[b-h2odp15d59] {
    min-width: 320px;
}

.account-submenu[b-h2odp15d59]  .nav-link {
    white-space: nowrap;
}

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

.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' viewBox='0 0 16 16'%3E%3Ccircle cx='5.5' cy='4.5' r='2.3'/%3E%3Ccircle cx='11.5' cy='5.5' r='1.9'/%3E%3Cpath d='M1 13.5c0-2.6 2-4.4 4.5-4.4S10 10.9 10 13.5z'/%3E%3Cpath d='M10.6 13.5c0-1.6-.5-2.9-1.4-3.8.7-.4 1.4-.6 2.3-.6 2.1 0 3.5 1.7 3.5 4.4z'/%3E%3C/svg%3E");
}

.bi-list-ol-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.4' stroke-linecap='round' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5h8M6 8h8M6 12.5h8'/%3E%3Cpath d='M2 2.5h1v2.2M2 7h1.6L2 9h1.6M2 11.5h1.5l-.8 1 .8 1H2' stroke-width='1'/%3E%3C/svg%3E");
}

.bi-person-badge-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='M4 1.5h8a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1zm2.5 1.2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z' fill-rule='evenodd'/%3E%3Ccircle cx='8' cy='7' r='1.8' fill='%23212529'/%3E%3Cpath d='M5.2 12.2c0-1.6 1.2-2.7 2.8-2.7s2.8 1.1 2.8 2.7z' fill='%23212529'/%3E%3C/svg%3E");
}

/* The active team: the same band as the active ISV, lower down - under the partner's own menu,
   since a team works across partners - so it is set off from what is above it rather than flush
   with the header. */
.active-site-box.active-team-box[b-h2odp15d59] {
    margin-top: 1rem;
}

.bi-kanban-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.5' width='4' height='11' rx='0.8'/%3E%3Crect x='6' y='1.5' width='4' height='7' rx='0.8'/%3E%3Crect x='11' y='1.5' width='4' height='13' rx='0.8'/%3E%3C/svg%3E");
}

.bi-hourglass-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='M3 1h10v1.5h-1v1.8c0 1.4-.8 2.6-2 3.2v1c1.2.6 2 1.8 2 3.2v1.8h1V15H3v-1.5h1v-1.8c0-1.4.8-2.6 2-3.2v-1C4.8 6.9 4 5.7 4 4.3V2.5H3zm2.5 1.5v1.8c0 1 .6 1.9 1.5 2.3l.5.2v2.4l-.5.2c-.9.4-1.5 1.3-1.5 2.3v1.8h5v-1.8c0-1-.6-1.9-1.5-2.3l-.5-.2V6.8l.5-.2c.9-.4 1.5-1.3 1.5-2.3V2.5z'/%3E%3Cpath d='M6 12.5h4c0-.9-.9-1.6-2-1.6s-2 .7-2 1.6z'/%3E%3C/svg%3E");
}

.bi-list-task-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.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2' width='3' height='3' rx='0.5'/%3E%3Cpath d='M7 3.5h7.5M7 8h7.5M7 12.5h7.5'/%3E%3Cpath d='M1.8 8.2l1 1 1.8-2M1.8 12.7l1 1 1.8-2'/%3E%3C/svg%3E");
}
/* /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/AccessTokens.razor.rz.scp.css */
/* Expired and revoked are what this application shows in goldenrod: retired, not broken. */
.token-status-retired[b-3tma4uevcm] {
    background-color: goldenrod;
    color: #000;
}

/* The row the create page just came back with - the same blue as a picked row elsewhere. */
.row-just-issued > td[b-3tma4uevcm] {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}
/* /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;
}

/* The DB Modeller line: the same row, set apart from the ten above it, because it is a different
   server and is not counted by the bar. */
.sync-line-aside[b-72pekn9ocx] {
    margin-top: 0.5rem;
    border-top: 1px solid #e9ecef;
}
/* /Components/Pages/BuildClientDownload.razor.rz.scp.css */
/* The two facts side by side - what runs here, what is offered - and stacked on a narrow screen. */
.buildclient-facts[b-y2mr2vegmp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
    max-width: 52rem;
    margin-bottom: 1rem;
}

.buildclient-fact[b-y2mr2vegmp] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.buildclient-fact-label[b-y2mr2vegmp] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.25rem;
}

.buildclient-fact-value[b-y2mr2vegmp] {
    font-size: 1.1rem;
    font-weight: 600;
}

.buildclient-notes[b-y2mr2vegmp] {
    max-width: 52rem;
}

.buildclient-notes li[b-y2mr2vegmp] {
    margin-bottom: 0.35rem;
}

/* The version history: a version per block, its badges beside the number. */
.buildclient-history[b-y2mr2vegmp] {
    max-width: 52rem;
}

.buildclient-change[b-y2mr2vegmp] {
    border-left: 3px solid var(--bs-border-color, #dee2e6);
    padding: 0.1rem 0 0.1rem 0.85rem;
    margin-bottom: 1rem;
}

.buildclient-change-head[b-y2mr2vegmp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.buildclient-change-version[b-y2mr2vegmp] {
    font-weight: 600;
    font-size: 1.05rem;
}

.buildclient-change-items[b-y2mr2vegmp] {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.buildclient-change-items li[b-y2mr2vegmp] {
    margin-bottom: 0.2rem;
}

.buildclient-hash[b-y2mr2vegmp] {
    word-break: break-all;
}

#buildclient-verdict[b-y2mr2vegmp] {
    max-width: 52rem;
}
/* /Components/Pages/FeatureRequestEdit.razor.rz.scp.css */
/* A picture attached beside the text, small enough to tell which one it is. */
.feature-attachment-thumb[b-0gfppscezz] {
    height: 2.5rem;
    width: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* A history entry's text, rendered by FeatureRequestBody - markup this component did not write, so
   reached with ::deep; pictures no wider than the entry. */
.history-body[b-0gfppscezz] {
    overflow-wrap: anywhere;
}

.history-body[b-0gfppscezz]  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.4rem 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* The products a service is part of, offered as the task's context: each a choice showing the
   elements above it, the picked one marked in blue - the colour of something being decided. */
.product-context[b-0gfppscezz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-context-choice[b-0gfppscezz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    min-width: 14rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    text-align: left;
}

.product-context-choice:hover[b-0gfppscezz] {
    border-color: var(--bs-primary);
}

.product-context-chosen[b-0gfppscezz] {
    border: 2px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.product-context-above[b-0gfppscezz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.product-context-name[b-0gfppscezz] {
    font-weight: 600;
}
/* /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/ProductStructureTasks.razor.rz.scp.css */
.task-row[b-isy8to31uu] {
    cursor: pointer;
}

/* The task the task page just saved - green, as on the version list. */
.row-just-saved > td[b-isy8to31uu] {
    background-color: rgba(var(--bs-success-rgb), 0.12);
}
/* /Components/Pages/ServiceBundleEdit.razor.rz.scp.css */
/* The included-services grid carries its detail on the row rather than in four more columns - the
   deployment level, the range and what pulled the service in are context about ONE row, and as
   columns they would be read past on every one. The marker at the end of the row is what says
   there is something to rest on: a tooltip nobody knows about is a tooltip nobody reads. */
.included-services tbody tr[b-6w7oco2vmx] {
    cursor: help;
}

.included-services-more[b-6w7oco2vmx] {
    opacity: 0.35;
}

.included-services tbody tr:hover .included-services-more[b-6w7oco2vmx] {
    opacity: 1;
}
/* /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/Services.razor.rz.scp.css */
/* The filters and the action buttons are the one part of this screen that must always be reachable:
   they act on the picked service, so scrolling to a service and losing the buttons on the way would
   be the worst of both arrangements. They stay above the list, and only the list scrolls. */
.services-toolbar[b-fyv66xj9g6] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 0.75rem;
    background-color: var(--bs-body-bg);
}

/* Sized off the viewport rather than a fixed height: what is left over after the headline, the
   toolbar and the page's own padding is what the list gets, on a laptop as on a large screen. */
.services-list[b-fyv66xj9g6] {
    max-height: calc(100vh - 20rem);
    min-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* The column headings stay on top of the rows scrolling under them. A sticky th needs its own
   background - the table's is painted by the row, which slides past underneath - and the border
   has to come from a shadow, because a collapsed table's borders scroll with the cells. */
.services-list thead th[b-fyv66xj9g6] {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bs-body-bg);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.service-row[b-fyv66xj9g6] {
    cursor: pointer;
}

/* The picked row, in the same blue the rest of the application uses for "this is what you are
   working on" - not green, which means published here, and not red, which is Delete. */
.service-row-selected > td[b-fyv66xj9g6] {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}
/* /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;
}
/* /Components/Pages/TeamBacklog.razor.rz.scp.css */
/* Two columns side by side, each scrolling on its own under a head that does not - so a long list
   of requests on the left never pushes the backlog out of reach of a drag. One column under the
   other on a narrow screen, where dragging is the buttons' job anyway. */
.backlog-board[b-wem10uhpxt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .backlog-board[b-wem10uhpxt] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.backlog-column[b-wem10uhpxt] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 11rem);
    min-height: 16rem;
}

.backlog-column-head[b-wem10uhpxt] {
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.backlog-search[b-wem10uhpxt] {
    flex: 1 1 14rem;
    min-width: 10rem;
}

.backlog-list[b-wem10uhpxt] {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.backlog-item[b-wem10uhpxt] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    background: var(--bs-tertiary-bg);
}

.backlog-item[draggable="true"][b-wem10uhpxt] {
    cursor: grab;
}

.backlog-item[draggable="true"]:active[b-wem10uhpxt] {
    cursor: grabbing;
}

.backlog-item-body[b-wem10uhpxt] {
    flex: 1 1 auto;
    min-width: 0;
}

.backlog-title[b-wem10uhpxt] {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backlog-title:hover[b-wem10uhpxt] {
    text-decoration: underline;
}

.backlog-estimates[b-wem10uhpxt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.backlog-item-actions[b-wem10uhpxt] {
    display: flex;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.backlog-rank[b-wem10uhpxt] {
    flex: 0 0 1.75rem;
    text-align: right;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding-top: 0.1rem;
}

.backlog-end[b-wem10uhpxt] {
    padding: 0.75rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.4rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Where a drop would land. Blue, the colour of work waiting for somebody - never red or green,
   which mean delete and published here. An entry shows the line ABOVE it, because that is where a
   request dropped onto it goes. */
.backlog-entry.backlog-drop-target[b-wem10uhpxt] {
    box-shadow: 0 -3px 0 0 var(--bs-primary);
}

.backlog-end.backlog-drop-target[b-wem10uhpxt],
.backlog-list.backlog-drop-target[b-wem10uhpxt] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: -4px;
}
/* /Components/Pages/TeamKanban.razor.rz.scp.css */
/* Five columns side by side. On a screen too narrow for five the board scrolls sideways inside its
   own box rather than squeezing the cards to nothing - and never the page itself. */
.kanban-scroll[b-moctvavvag] {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.kanban-board[b-moctvavvag] {
    display: grid;
    grid-template-columns: repeat(5, minmax(12rem, 1fr));
    gap: 0.75rem;
    align-items: start;
    min-width: 62rem;
}

.kanban-column[b-moctvavvag] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 20rem);
    min-height: 14rem;
}

/* The column's colour sits in its head only, as a top edge: enough to tell five columns apart at a
   glance, not so much that a card's own priority colour has to compete with it. */
.kanban-column-head[b-moctvavvag] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--bs-border-color);
    border-top: 4px solid transparent;
    border-radius: 0.5rem 0.5rem 0 0;
}

.kanban-head-backlog[b-moctvavvag] { border-top-color: #6c757d; }
.kanban-head-planned[b-moctvavvag] { border-top-color: #0aa2c0; }
.kanban-head-inexecution[b-moctvavvag] { border-top-color: #0d6efd; }
.kanban-head-qualityassurance[b-moctvavvag] { border-top-color: #6f42c1; }
.kanban-head-delivered[b-moctvavvag] { border-top-color: #198754; }

.kanban-count[b-moctvavvag] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.kanban-sum[b-moctvavvag] {
    width: 100%;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.kanban-cards[b-moctvavvag] {
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.kanban-card[b-moctvavvag] {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    /* A double-click opens the card - it must not select a word of it on the way. */
    user-select: none;
}

.kanban-card[draggable="true"][b-moctvavvag] {
    cursor: grab;
}

.kanban-card[draggable="true"]:active[b-moctvavvag] {
    cursor: grabbing;
}

.kanban-card:focus-visible[b-moctvavvag] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.kanban-rank[b-moctvavvag] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.kanban-title[b-moctvavvag] {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.kanban-where[b-moctvavvag] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-estimates[b-moctvavvag] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.kanban-card-actions[b-moctvavvag] {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.kanban-card-actions .btn[b-moctvavvag] {
    padding: 0 0.45rem;
    line-height: 1.4;
}

.kanban-empty[b-moctvavvag] {
    padding: 0.75rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.4rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

/* Above the board and sticky, so it stays in reach however far the page has scrolled. A background
   of its own, or the cards would show through it while they pass underneath. */
.kanban-archive[b-moctvavvag] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 1rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg);
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    user-select: none;
}

.kanban-archive .fw-semibold[b-moctvavvag] {
    color: var(--bs-body-color);
}

/* Where a drop would land - blue, the colour of work waiting for somebody; never red or green,
   which mean delete and published here. A card shows the line ABOVE it, since a card dropped onto
   it goes above it. */
.kanban-column.kanban-drop-target[b-moctvavvag],
.kanban-archive.kanban-drop-target[b-moctvavvag] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: -3px;
}

.kanban-card.kanban-drop-target[b-moctvavvag] {
    box-shadow: 0 -3px 0 0 var(--bs-primary);
}

.kanban-filter[b-moctvavvag] {
    width: 100%;
    margin: 0;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}
/* /Components/Pages/TeamTasks.razor.rz.scp.css */
.tt-search[b-m3tkknk6zt] {
    max-width: 28rem;
}

/* A set filter, above the list: quiet, and with the cross that takes it off right inside it. */
.tt-chip[b-m3tkknk6zt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem 0.15rem 0.65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    font-size: 0.85rem;
}

.tt-chip-remove[b-m3tkknk6zt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.tt-chip-remove:hover[b-m3tkknk6zt] {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* The panel slides in from the right over the list, the page dimmed behind it - a click there closes
   it. Above the sidebar's stacking context (z-index 10) like the other dialogs here. */
.tt-filter-backdrop[b-m3tkknk6zt] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1040;
}

.tt-filter-panel[b-m3tkknk6zt] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(24rem, 100vw);
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-left: 1px solid var(--bs-border-color);
    box-shadow: -0.5rem 0 2rem rgba(0, 0, 0, 0.2);
    z-index: 1045;
    animation: tt-slide-in-b-m3tkknk6zt 160ms ease-out;
}

@keyframes tt-slide-in-b-m3tkknk6zt {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Only the filters scroll, so the title and the buttons stay where the eye left them. */
.tt-filter-body[b-m3tkknk6zt] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.tt-filter-footer[b-m3tkknk6zt] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}
/* /Components/Pages/TeamTasksProductPicker.razor.rz.scp.css */
/* The search and the buttons stay at the top while the trees scroll under them - the pick is made
   far down a large structure, and the button that applies it must not be left behind. */
.tt-picker-bar[b-ypa4q5fa82] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 0.75rem;
    margin-bottom: 0.75rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.tt-picker-search[b-ypa4q5fa82] {
    max-width: 24rem;
}
/* /Components/PriorityBadge.razor.rz.scp.css */
.priority-badge[b-76q5fy0f2n] {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875em;
    line-height: 1.3;
    white-space: nowrap;
}

.priority-p1[b-76q5fy0f2n] {
    background-color: #d63384;
    color: #fff;
}

.priority-p2[b-76q5fy0f2n] {
    background-color: #dc3545;
    color: #fff;
}

.priority-p3[b-76q5fy0f2n] {
    background-color: #ffc107;
    color: #212529;
}

.priority-p4[b-76q5fy0f2n] {
    background-color: #198754;
    color: #fff;
}

.priority-p5[b-76q5fy0f2n] {
    background-color: #0d6efd;
    color: #fff;
}
/* /Components/ProductStructureDeleteDialog.razor.rz.scp.css */
/* Lies over the tree like the base data picker: the backdrop dims the page and cancels when clicked,
   the dialog is fixed and centred so it stays in view however far the page was scrolled. */
.pst-delete-backdrop[b-ayl7rzjubv] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1050;
}

.pst-delete-dialog[b-ayl7rzjubv] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(36rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    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: 1.25rem;
    z-index: 1060;
}

.pst-delete-beneath[b-ayl7rzjubv] {
    max-height: 12rem;
    overflow-y: auto;
    padding-left: 1.25rem;
}
/* /Components/ProductStructureIcon.razor.rz.scp.css */
.product-structure-icon[b-mt2gcsxdd6] {
    flex-shrink: 0;
    vertical-align: -0.2em;
}

/* A tint per type, so the levels tell apart at a glance - none of them a status colour of this
   application (green published, goldenrod retired, red delete). */
.icon-isv[b-mt2gcsxdd6] {
    color: var(--bs-body-color);
}

.icon-group[b-mt2gcsxdd6] {
    color: #6c757d;
}

.icon-product[b-mt2gcsxdd6] {
    color: #0b5ed7;
}

.icon-epic[b-mt2gcsxdd6] {
    color: #6f42c1;
}

.icon-featuregroup[b-mt2gcsxdd6] {
    color: #0aa2c0;
}
/* /Components/ProductStructureTree.razor.rz.scp.css */
.pst-toolbar[b-uq9i9ed9zr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.5rem;
}

.pst-legend[b-uq9i9ed9zr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.pst-legend-item[b-uq9i9ed9zr] {
    cursor: help;
    white-space: nowrap;
}

.pst-expanders[b-uq9i9ed9zr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.product-structure-tree[b-uq9i9ed9zr] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.25rem 0;
}

.pst-row[b-uq9i9ed9zr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.4rem;
    padding: 0 0.5rem;
    border-radius: var(--bs-border-radius-sm);
}

.pst-row:hover[b-uq9i9ed9zr] {
    background-color: var(--bs-tertiary-bg);
}

/* The same blue as a picked row elsewhere - "this is the one you are working on". */
.pst-row-selected[b-uq9i9ed9zr],
.pst-row-selected:hover[b-uq9i9ed9zr] {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

.pst-root-row[b-uq9i9ed9zr] {
    font-size: 1.05rem;
}

/* Each level indented with a quiet guide line down its left, so which element a row belongs to
   stays readable three or four levels in. */
.pst-children[b-uq9i9ed9zr] {
    margin-left: 1.15rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--bs-border-color);
}

.pst-toggle[b-uq9i9ed9zr],
.pst-toggle-space[b-uq9i9ed9zr] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.pst-toggle[b-uq9i9ed9zr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--bs-border-radius-sm);
    background: none;
    color: var(--bs-secondary-color);
}

.pst-toggle:hover[b-uq9i9ed9zr] {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.pst-name[b-uq9i9ed9zr] {
    white-space: nowrap;
}

/* A row a double-click picks: say so with the pointer, and keep the double-click from selecting the
   element's name on the way. */
.pst-row-pickable[b-uq9i9ed9zr] {
    cursor: pointer;
    user-select: none;
}

/* How many tasks an element has, right behind its name: black with a white figure, as asked, and
   round, so it reads as a count rather than as a button. */
.pst-count[b-uq9i9ed9zr] {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    background-color: #000;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    flex-shrink: 0;
    cursor: help;
}

/* The command bar sits on the tree's box like a lid - one frame around both - and stays at the top
   of the page while the page itself scrolls, should it have to (a notice, the type explanations
   opened). */
.pst-commandbar[b-uq9i9ed9zr] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    background-color: var(--bs-tertiary-bg);
}

.pst-has-commandbar[b-uq9i9ed9zr] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Sized off the window rather than a fixed height, like the Services list: what is left after the
   headline, the explanation and the command bar is what the rows get, and only they scroll. */
.pst-scrolls[b-uq9i9ed9zr] {
    max-height: calc(100vh - 19rem);
    min-height: 12rem;
    overflow-y: auto;
}

/* A product no longer taken further - goldenrod, the colour this application gives whatever is
   obsolete or retired, and a pill like the count so the two read as facts about the element. */
.pst-outdated[b-uq9i9ed9zr] {
    display: inline-block;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    background-color: goldenrod;
    color: #000;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    flex-shrink: 0;
    cursor: help;
}
/* /Components/RequestStatusBadge.razor.rz.scp.css */
.request-status[b-djnjlbblly] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
}

/* Still being worked out reads as an outline - not yet a step of the work. */
.request-status-inspecification[b-djnjlbblly] { background-color: transparent; color: #6c757d; box-shadow: inset 0 0 0 1px #6c757d; }
.request-status-specified[b-djnjlbblly] { background-color: #0aa2c0; }
.request-status-indevelopment[b-djnjlbblly] { background-color: #0d6efd; }
.request-status-inqualityassurance[b-djnjlbblly] { background-color: #6f42c1; }
.request-status-readyforrollout[b-djnjlbblly] { background-color: #198754; }
/* /Components/RichTextEditor.razor.rz.scp.css */
/* Room to write a lot: it grows with what is in it up to most of the screen, and scrolls after that
   rather than pushing the fields below it out of reach. */
.rich-text-editor[b-f8tyr6khfa] {
    min-height: 14rem;
    max-height: 60vh;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.rich-text-readonly[b-f8tyr6khfa] {
    background-color: var(--bs-secondary-bg);
}

.rich-text-editor:empty[b-f8tyr6khfa]::before {
    content: attr(data-placeholder);
    color: var(--bs-secondary-color);
}

/* ::deep because the pictures are put in by the browser and carry no scope id - see CLAUDE.md on
   scoped CSS and child content. A screenshot is shown whole, never wider than the box. */
.rich-text-editor[b-f8tyr6khfa]  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5rem 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}