@import '_content/Opera.Viewer/Opera.Viewer.bacqqc2nr7.bundle.scp.css';

/* /Components/Layout/ActivityIndicator.razor.rz.scp.css */
.activity-indicator[b-6wwam020gl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    height: 1.9rem;
    padding: 0 0.7rem 0 0.6rem;
    border-radius: var(--op-radius-pill);
    font-size: var(--op-text-xs);
    color: var(--op-accent-fg);
    background: var(--op-accent-bg);
    box-shadow: inset 0 0 0 1px var(--op-accent-border);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--op-dur) var(--op-ease);
}

    .activity-indicator:hover[b-6wwam020gl] {
        color: var(--op-accent-fg);
        background: color-mix(in srgb, var(--op-accent-bg) 70%, var(--op-accent-border));
    }

.activity-text strong[b-6wwam020gl] {
    font-weight: 600;
}

.activity-stage[b-6wwam020gl] {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.5rem;
    border-left: 1px solid var(--op-accent-border);
    color: var(--op-text-2);
    font-variant-numeric: tabular-nums;
}

/* a dot with a soft ripple while something runs (static when only queued, or with reduced motion) */
.activity-pulse[b-6wwam020gl] {
    position: relative;
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--op-neutral-dot);
}

    .activity-pulse.running[b-6wwam020gl] {
        background: var(--op-accent-dot);
    }

        .activity-pulse.running[b-6wwam020gl]::after {
            content: "";
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 2px solid var(--op-accent-dot);
            opacity: 0;
            animation: activity-ripple-b-6wwam020gl 1.6s var(--op-ease) infinite;
        }

@keyframes activity-ripple-b-6wwam020gl {
    0% { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .activity-pulse.running[b-6wwam020gl]::after {
        animation: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-xdesip7zsj] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--op-bg);
}

main[b-xdesip7zsj] {
    flex: 1;
    min-width: 0;
}

/* same graphite as the viewer chrome: the admin pages and the viewer windows feel like one product */
.sidebar[b-xdesip7zsj] {
    background: linear-gradient(180deg, var(--op-chrome-2) 0%, var(--op-chrome) 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.top-row[b-xdesip7zsj] {
    background-color: var(--op-surface);
    border-bottom: 1px solid var(--op-border);
    gap: 0.75rem;
    height: var(--op-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.top-row-crumbs[b-xdesip7zsj] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

    /* the breadcrumb of the page (SectionContent): one line, the last item truncated */
    .top-row-crumbs[b-xdesip7zsj]  .breadcrumb {
        flex-wrap: nowrap;
        margin: 0;
        font-size: var(--op-text-sm);
        white-space: nowrap;
        min-width: 0;
    }

    .top-row-crumbs[b-xdesip7zsj]  .breadcrumb-item {
        display: flex;
        align-items: center;
        min-width: 0;
    }

        .top-row-crumbs[b-xdesip7zsj]  .breadcrumb-item a {
            color: var(--op-text-2);
            font-weight: 500;
        }

            .top-row-crumbs[b-xdesip7zsj]  .breadcrumb-item a:hover {
                color: var(--op-accent);
            }

        .top-row-crumbs[b-xdesip7zsj]  .breadcrumb-item.active {
            color: var(--op-text);
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

    .top-row-crumbs[b-xdesip7zsj]  .breadcrumb-item + .breadcrumb-item::before {
        content: "";
        width: 0.38rem;
        height: 0.38rem;
        padding: 0;
        margin: 0 0.6rem 0 0.35rem;
        border-right: 1.5px solid var(--op-text-3);
        border-top: 1.5px solid var(--op-text-3);
        transform: rotate(45deg);
        float: none;
        flex: 0 0 auto;
    }

    .top-row-crumbs[b-xdesip7zsj]  .crumb-root {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

/* demo mode: a hatched amber hairline over the whole page and a badge in the top bar */
.page.is-demo[b-xdesip7zsj]::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 1040;
    background: repeating-linear-gradient(135deg, #e0a100 0 10px, #f4c542 10px 20px);
    pointer-events: none;
}

.demo-badge[b-xdesip7zsj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.2rem 0.6rem;
    border-radius: var(--op-radius-pill);
    font-size: var(--op-text-2xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--op-warning-fg);
    background: var(--op-warning-bg);
    box-shadow: inset 0 0 0 1px var(--op-warning-border);
    cursor: help;
}

    .demo-badge[b-xdesip7zsj]::before {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 50%;
        background: var(--op-warning-dot);
    }

.content[b-xdesip7zsj] {
    padding: 1.25rem 1rem 0;
}

/* phones (up to 640 px): the bar of the sidebar (brand and menu button, --op-mobile-bar-h) and the top bar of the page
   (breadcrumb) stay at the top, the page scrolls under them; the menu opens over the page (NavMenu) */
@media (max-width: 640.98px) {
    .sidebar[b-xdesip7zsj] {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    .top-row[b-xdesip7zsj] {
        position: sticky;
        top: var(--op-mobile-bar-h);
        z-index: 1020;
    }
}

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

    .sidebar[b-xdesip7zsj] {
        flex: 0 0 auto;
        width: 232px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-xdesip7zsj] {
        position: sticky;
        top: 0;
        z-index: 1020;
    }

    .top-row[b-xdesip7zsj], .content[b-xdesip7zsj] {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

/* 641–1199 px: the sidebar becomes an icon rail (NavMenu hides its texts), the pages get the width back */
@media (min-width: 641px) and (max-width: 1199.98px) {
    .sidebar[b-xdesip7zsj] {
        width: 4.25rem;
    }

    .top-row[b-xdesip7zsj], .content[b-xdesip7zsj] {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 1600px) {
    .top-row[b-xdesip7zsj], .content[b-xdesip7zsj] {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }
}

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

/* the theme switch (Sistema / Chiaro / Scuro) at the right of the top bar: on desktop only — on a phone or a touch tablet it is in
   «Impostazioni → Aspetto» */
.top-row[b-xdesip7zsj]  .top-row-theme {
    flex: none;
    margin-left: 0.5rem;
}

@media (max-width: 640.98px), (pointer: coarse) {
    .top-row[b-xdesip7zsj]  .top-row-theme {
        display: none;
    }
}
/* /Components/Layout/NavButton.razor.rz.scp.css */
.nav-item[b-rga1jfhd5x] {
    font-size: var(--op-text-md);
    padding-bottom: 0.2rem;
}

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

    /* the links start 2 px further in than the brand (padding-left 0.875rem): brand mark (24 px) and icons (20 px) share
       one vertical axis (NavMenu) */
    .nav-item .nav-link[b-rga1jfhd5x] {
        position: relative;
        color: var(--op-chrome-text);
        background: none;
        border: none;
        border-radius: var(--op-radius);
        height: 2.35rem;
        display: flex;
        align-items: center;
        padding: 0 0.75rem 0 0.875rem;
        width: 100%;
        font-weight: 500;
        transition: background-color var(--op-dur) var(--op-ease), color var(--op-dur) var(--op-ease);
    }

.nav-item .nav-link:hover[b-rga1jfhd5x] {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.nav-item a.active[b-rga1jfhd5x] {
    background-color: rgba(91, 151, 255, 0.16);
    color: #fff;
}

    .nav-item a.active[b-rga1jfhd5x]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.5rem;
        bottom: 0.5rem;
        width: 3px;
        border-radius: 0 2px 2px 0;
        background: #6aa3ff;
    }

.nav-item .nav-link:focus-visible[b-rga1jfhd5x] {
    outline: 2px solid var(--op-focus);
    outline-offset: -2px;
    box-shadow: none;
}

/* icons: 20 px, white, centred on the line of the text; full opacity on hover and on the active entry */
.nav-icon[b-rga1jfhd5x] {
    flex: 0 0 auto;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    color: #fff;
    opacity: 0.75;
}

    .nav-icon[b-rga1jfhd5x]  svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.nav-item .nav-link:hover .nav-icon[b-rga1jfhd5x],
.nav-item a.active .nav-icon[b-rga1jfhd5x] {
    opacity: 1;
}

/* 641–1199 px: icon rail (NavMenu). Texts stay in the DOM for screen readers (visually hidden), links show a tooltip
   (title). */
@media (min-width: 641px) and (max-width: 1199.98px) {
    .nav-text[b-rga1jfhd5x] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .nav-item[b-rga1jfhd5x] {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

        .nav-item .nav-link[b-rga1jfhd5x] {
            justify-content: center;
            padding: 0;
            height: 2.6rem;
        }

    .nav-icon[b-rga1jfhd5x] {
        margin-right: 0;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-6almskmm1v] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.25rem;
    color: white;
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    border: 1px solid var(--op-chrome-border);
    border-radius: var(--op-radius);
    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.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.06);
}

.navbar-toggler:checked[b-6almskmm1v] {
    background-color: rgba(255, 255, 255, 0.18);
}

.navbar-toggler:focus-visible[b-6almskmm1v] {
    outline: 2px solid var(--op-focus);
    outline-offset: 2px;
}

.top-row[b-6almskmm1v] {
    min-height: 3.5rem;
    border-bottom: 1px solid var(--op-chrome-border);
}

    /* the brand mark (24 px) and the navigation icons (20 px, NavButton) share one vertical axis: 1rem (px-3) + 0.75rem +
       12 px from the left edge; the links start 2 px further in (padding-left 0.875rem) */
    .top-row .container-fluid[b-6almskmm1v] {
        padding-left: 0.75rem;
    }

/* Bootstrap's .nav wraps: in a column the line would take the width of its widest item (the heading), wider than the rail */
.nav[b-6almskmm1v] {
    flex-wrap: nowrap;
}

.navbar-brand[b-6almskmm1v] {
    display: inline-flex;
    align-items: center;
    /* 24 px mark + 10 px: "Opera" starts where the texts of the navigation do (2 px + 20 px icon + 12 px) */
    gap: 0.625rem;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: #fff;
}

    .navbar-brand:focus-visible[b-6almskmm1v] {
        outline: 2px solid var(--op-focus);
        outline-offset: 3px;
        border-radius: var(--op-radius-sm);
    }

.brand-sub[b-6almskmm1v] {
    margin-left: -0.15rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--op-radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--op-chrome-text);
    font-size: var(--op-text-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-heading[b-6almskmm1v] {
    padding-top: 1.1rem;
    padding-bottom: 0.4rem;
    font-size: var(--op-text-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8792a4;
}

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

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

/* phones: the bar has a fixed height (the top bar of the page sticks right under it, MainLayout) and the menu opens over
   the page, below the bar, scrolling by itself when taller than the screen */
@media (max-width: 640.98px) {
    .top-row[b-6almskmm1v] {
        height: var(--op-mobile-bar-h);
        min-height: 0;
        flex-wrap: nowrap;
    }

    .nav-scrollable[b-6almskmm1v] {
        position: absolute;
        top: var(--op-mobile-bar-h);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--op-mobile-bar-h));
        overflow-y: auto;
        background: linear-gradient(180deg, var(--op-chrome-2) 0%, var(--op-chrome) 100%);
        border-bottom: 1px solid var(--op-chrome-border);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
    }
}


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

    .nav-scrollable[b-6almskmm1v] {
        /* Never collapse the sidebar for wide screens */
        display: flex;
        flex-direction: column;

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

}

/* 641–1199 px: icon rail. Texts stay in the DOM for screen readers (visually hidden), links show a tooltip (title). */
@media (min-width: 641px) and (max-width: 1199.98px) {
    .top-row[b-6almskmm1v] {
        padding-left: 0 !important;
    }

        .top-row .container-fluid[b-6almskmm1v] {
            justify-content: center;
            padding: 0;
        }

    .navbar-brand[b-6almskmm1v] {
        margin: 0;
    }

    .brand-name[b-6almskmm1v],
    .brand-sub[b-6almskmm1v] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .nav-heading[b-6almskmm1v] {
        visibility: hidden;
        height: 1.1rem;
        padding: 0;
        overflow: hidden;
    }

}

/* «Impostazioni → Aspetto» only where the top bar has no theme switch: the exact complement of its rule in MainLayout.razor.css */
.nav-theme-touch[b-6almskmm1v] {
    display: none;
}

/* alone in its wrapper the entry would count as the last of the menu (NavButton.razor.css): keep the spacing of the others */
.nav-theme-touch[b-6almskmm1v]  .nav-item:last-of-type {
    padding-bottom: 0.2rem;
}

@media (max-width: 640.98px), (pointer: coarse) {
    .nav-theme-touch[b-6almskmm1v] {
        display: contents;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-i6gc7ns2ir],
.components-reconnect-repeated-attempt-visible[b-i6gc7ns2ir],
.components-reconnect-failed-visible[b-i6gc7ns2ir],
.components-pause-visible[b-i6gc7ns2ir],
.components-resume-failed-visible[b-i6gc7ns2ir],
.components-uploads-visible[b-i6gc7ns2ir],
.components-rejoining-animation[b-i6gc7ns2ir] {
    display: none;
}

/* the server restarted while chunked uploads run: they go on, the reload waits for them (ReconnectModal.razor.js) */
#components-reconnect-modal.components-reconnect-uploads .components-uploads-visible[b-i6gc7ns2ir],
#components-reconnect-modal.components-reconnect-uploads .components-rejoining-animation[b-i6gc7ns2ir] {
    display: block;
}

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


#components-reconnect-modal[b-i6gc7ns2ir] {
    background-color: var(--op-surface);
    color: var(--op-text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--op-shadow-lg);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-i6gc7ns2ir 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-i6gc7ns2ir]::backdrop {
    background-color: var(--op-backdrop);
    animation: components-reconnect-modal-fadeInOpacity-b-i6gc7ns2ir 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-i6gc7ns2ir] {
    border: 0;
    background-color: var(--op-accent-fill);
    color: var(--op-on-accent);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-i6gc7ns2ir] {
        background-color: var(--op-accent-hover);
    }

    #components-reconnect-modal button:active[b-i6gc7ns2ir] {
        background-color: var(--op-accent-fill);
    }

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

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

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

@keyframes components-rejoining-animation-b-i6gc7ns2ir {
    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/Layout/ViewerLayout.razor.rz.scp.css */
.viewer-shell[b-k8w5fa7ac9] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--op-bg);
    color: var(--op-text);
    overflow: hidden;
    font-size: var(--op-text-md);
}

#blazor-error-ui[b-k8w5fa7ac9] {
    color-scheme: light only;
    background: lightyellow;
    color: #212529;
    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-k8w5fa7ac9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/AppearanceSettings.razor.rz.scp.css */
.appearance-notes[b-fhfi1kot7c] {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
    color: var(--op-text-2);
    font-size: var(--op-text-sm);
}

.appearance-notes li + li[b-fhfi1kot7c] {
    margin-top: 0.25rem;
}
/* /Components/Pages/DevIcons.razor.rz.scp.css */
.icons-toc[b-ghhuywtpb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
}

.icons-toc-item[b-ghhuywtpb6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--opera-border);
    border-radius: 1rem;
    font-size: 0.8rem;
    color: inherit;
    text-decoration: none;
}

    .icons-toc-item:hover[b-ghhuywtpb6] {
        background: var(--opera-muted-bg);
    }

.icons-swatch[b-ghhuywtpb6] {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: currentColor;
}

.icons-grid[b-ghhuywtpb6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.75rem;
}

.icons-card[b-ghhuywtpb6] {
    border: 1px solid var(--opera-border);
    border-radius: var(--op-radius-lg);
    padding: 0.5rem;
    background: var(--op-surface);
    min-width: 0;
}

.icons-previews[b-ghhuywtpb6] {
    display: grid;
    gap: 2px;
    margin-bottom: 0.4rem;
    border-radius: 0.35rem;
    overflow: hidden;
}

.icons-strip[b-ghhuywtpb6] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 2.75rem;
    padding: 0 0.4rem;
}

    .icons-strip.light[b-ghhuywtpb6] {
        background: var(--op-surface-2);
        --ifc-knockout: var(--op-surface-2);
    }

    .icons-strip.dark[b-ghhuywtpb6] {
        background: var(--op-surface);
        --ifc-knockout: var(--op-surface);
    }

.icons-name[b-ghhuywtpb6] {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
}

.icons-classes[b-ghhuywtpb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    margin-top: 0.25rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.72rem;
    max-height: 12rem;
    overflow-y: auto;
}

    .icons-classes .type[b-ghhuywtpb6] {
        color: var(--bs-secondary-color);
    }

        .icons-classes .type[b-ghhuywtpb6]::before {
            content: "◆ ";
            font-size: 0.6rem;
        }

.icons-tree-demo[b-ghhuywtpb6]  .lazy-tree {
    padding: 0.25rem 0;
}

/* the dark demo takes the dark tree tokens from its data-bs-theme=dark wrapper (wwwroot/app.css) */

/* all glyphs at tree size */
.icons-sheets[b-ghhuywtpb6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.75rem;
}

.icons-sheet[b-ghhuywtpb6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 28px);
    gap: 4px;
    padding: 0.6rem;
    border-radius: var(--op-radius-lg);
    border: 1px solid var(--opera-border);
}

    .icons-sheet[b-ghhuywtpb6]  .ifc-icon {
        margin: 6px;
    }

    .icons-sheet.light[b-ghhuywtpb6] {
        background: var(--op-tree-bg);
        --ifc-knockout: var(--op-tree-bg);
    }

    .icons-sheet.dark[b-ghhuywtpb6] {
        background: var(--op-tree-bg);
        --ifc-knockout: var(--op-tree-bg);
    }

/* type badge on the tree row backgrounds */
.icons-badge-row[b-ghhuywtpb6] {
    gap: 0.6rem;
    padding-left: 0.6rem;
}

    .icons-badge-row.hover[b-ghhuywtpb6] {
        background: var(--op-tree-hover);
        --ifc-knockout: var(--op-tree-hover);
    }

.icons-badge-state[b-ghhuywtpb6] {
    width: 5.5rem;
    color: var(--op-text-2);
    font-size: 0.75rem;
}

.icons-badge-sizes[b-ghhuywtpb6] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

/* similar pairs */
.icons-pairs[b-ghhuywtpb6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
    gap: 0.75rem;
}

.icons-pair[b-ghhuywtpb6] {
    border: 1px solid var(--opera-border);
    border-radius: var(--op-radius-lg);
    padding: 0.5rem;
    background: var(--op-surface);
}

.icons-pair-title[b-ghhuywtpb6] {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.icons-pair-strip[b-ghhuywtpb6] {
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem 0.4rem;
    background: var(--op-tree-bg);
    --ifc-knockout: var(--op-tree-bg);
}

    .icons-pair-strip.light[b-ghhuywtpb6] {
        border-radius: 0.35rem 0.35rem 0 0;
    }

    .icons-pair-strip.dark[b-ghhuywtpb6] {
        border-radius: 0 0 0.35rem 0.35rem;
    }

.icons-pair-item[b-ghhuywtpb6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: 3.1rem;
}

.icons-pair-labels[b-ghhuywtpb6] {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.4rem 0;
    font-size: 0.62rem;
    line-height: 1.15;
    color: var(--op-text-2);
}

    .icons-pair-labels > span[b-ghhuywtpb6] {
        width: 3.1rem;
        overflow-wrap: break-word;
        hyphens: auto;
    }
/* /Components/Pages/FederationViewer.razor.rz.scp.css */
/* state of the stage before the scene opens (loading, not ready, not found, error) */
.viewer-message[b-4hlkbyhp59] {
    margin: auto;
    padding: 1.1rem 1.4rem;
    text-align: center;
    max-width: 32rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg);
    background: var(--op-surface);
    box-shadow: var(--op-shadow);
    color: var(--op-text-2);
}

    .viewer-message.is-alert[b-4hlkbyhp59] {
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
/* /Components/Pages/Viewer.razor.rz.scp.css */
/* state of the stage before the scene opens (loading, not ready, not found, error) */
.viewer-message[b-znjfcf5ek3] {
    margin: auto;
    padding: 1.1rem 1.4rem;
    text-align: center;
    max-width: 32rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg);
    background: var(--op-surface);
    box-shadow: var(--op-shadow);
    color: var(--op-text-2);
}

    .viewer-message.is-alert[b-znjfcf5ek3] {
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
/* /Components/Shared/BrandMark.razor.rz.scp.css */
.brand-mark[b-pl4q368ydg] {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
}

.bm-top[b-pl4q368ydg] {
    fill: var(--op-brand-1);
}

.bm-left[b-pl4q368ydg] {
    fill: var(--op-brand-2);
}

.bm-right[b-pl4q368ydg] {
    fill: var(--op-brand-3);
}

.bm-hole[b-pl4q368ydg] {
    fill: var(--op-brand-3);
}

.bm-edge[b-pl4q368ydg] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 0.5;
    stroke-linejoin: round;
}
/* /Components/Shared/MapLink.razor.rz.scp.css */
a[b-rer4lymbg4] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
/* /Components/Shared/MapPicker.razor.rz.scp.css */
/* The map picker (MapPicker): the map, the point of the pin and the buttons. The map's insides are built by
   wwwroot/js/map-picker.js (no scope attribute: ::deep). Theme tokens only. */
.mp[b-yeigfzzi5z] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--op-text-sm);
}

.mp-map[b-yeigfzzi5z] {
    position: relative;
    height: min(62vh, 30rem);
    overflow: hidden;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg, 10px);
    background: #dfe3e8; /* until the tiles come */
    cursor: grab;
    touch-action: none;
    user-select: none;
    outline: none;
}

    .mp-map:focus-visible[b-yeigfzzi5z] {
        box-shadow: 0 0 0 2px var(--op-accent);
    }

    .mp-map[b-yeigfzzi5z]  .mp-tiles img {
        position: absolute;
        left: 0;
        top: 0;
        width: 256px;
        height: 256px;
        max-width: none;
        pointer-events: none;
    }

    .mp-map.is-dragging[b-yeigfzzi5z],
    .mp-map.is-pin-dragging[b-yeigfzzi5z] {
        cursor: grabbing;
    }

    .mp-map[b-yeigfzzi5z]  .mp-pin {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        z-index: 2;
        cursor: grab;
    }

        .mp-map[b-yeigfzzi5z]  .mp-pin svg {
            position: absolute;
            left: -15px;
            top: -39px;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
        }

    .mp-map[b-yeigfzzi5z]  .mp-zoom {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

        .mp-map[b-yeigfzzi5z]  .mp-zoom button {
            width: 2rem;
            height: 2rem;
            border: 1px solid rgba(0, 0, 0, 0.25);
            border-radius: 0.45rem;
            background: #fff;
            color: #1d2433;
            font-size: 1.1rem;
            line-height: 1;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
        }

            .mp-map[b-yeigfzzi5z]  .mp-zoom button:disabled {
                color: #9aa3b2;
            }

    .mp-map[b-yeigfzzi5z]  .mp-credit {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 3;
        padding: 0.05rem 0.4rem;
        background: rgba(255, 255, 255, 0.85);
        color: #333;
        font-size: 0.7rem;
        border-top-left-radius: 0.3rem;
    }

        .mp-map[b-yeigfzzi5z]  .mp-credit a {
            color: #0b5cad;
        }

    .mp-map[b-yeigfzzi5z]  .mp-message {
        position: absolute;
        inset: auto 1rem 1rem 1rem;
        z-index: 4;
        display: none;
        padding: 0.5rem 0.7rem;
        border-radius: 0.5rem;
        background: rgba(17, 21, 28, 0.9);
        color: #fff;
        font-size: var(--op-text-xs);
    }

        .mp-map[b-yeigfzzi5z]  .mp-message.is-shown {
            display: block;
        }

.mp-foot[b-yeigfzzi5z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mp-point[b-yeigfzzi5z] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
}

    .mp-point svg[b-yeigfzzi5z] {
        flex: none;
        width: 1.1rem;
        height: 1.1rem;
        fill: none;
        stroke: #e0352b;
        stroke-width: 2;
    }

.mp-decimal[b-yeigfzzi5z] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mp-dms[b-yeigfzzi5z],
.mp-empty[b-yeigfzzi5z],
.mp-hint[b-yeigfzzi5z] {
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

.mp-hint[b-yeigfzzi5z] {
    margin: 0;
}
/* /Components/Shared/ThemeSwitch.razor.rz.scp.css */
/* The three buttons of the theme as one segmented control, on the tokens of the theme in use (light pages, the viewer bar). */
.theme-switch[b-elvlcj2wi4] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius);
    background: var(--op-surface-2);
}

.theme-switch-btn[b-elvlcj2wi4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.2rem 0.6rem;
    border: 0;
    border-radius: var(--op-radius-sm);
    background: transparent;
    color: var(--op-text-2);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.theme-switch.is-compact .theme-switch-btn[b-elvlcj2wi4] {
    padding: 0.2rem 0.45rem;
}

.theme-switch-btn:hover[b-elvlcj2wi4] {
    color: var(--op-text);
    background: var(--op-hover);
}

.theme-switch-btn:focus-visible[b-elvlcj2wi4] {
    outline: 2px solid var(--op-accent);
    outline-offset: 1px;
}

.theme-switch-btn.is-active[b-elvlcj2wi4] {
    color: var(--op-accent);
    background: var(--op-accent-soft);
    box-shadow: inset 0 0 0 1px var(--op-accent);
}

.theme-switch-btn[b-elvlcj2wi4]  .op-icon {
    width: 16px;
    height: 16px;
}
/* /Components/Shared/TreeSearchBox.razor.rz.scp.css */
.tree-search-field[b-8qgic96qu9] {
    position: relative;
}

    /* magnifier drawn with a mask (no extra element) */
    .tree-search-field[b-8qgic96qu9]::before {
        content: "";
        position: absolute;
        left: 0.55rem;
        top: 50%;
        width: 0.85rem;
        height: 0.85rem;
        transform: translateY(-50%);
        pointer-events: none;
        background: var(--op-text-3);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.8'/%3E%3Cpath d='M10.6 10.6 14 14'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.8'/%3E%3Cpath d='M10.6 10.6 14 14'/%3E%3C/svg%3E") center / contain no-repeat;
    }

.tree-search-field[b-8qgic96qu9]  input {
    padding-left: 1.85rem;
    padding-right: 1.9rem;
}

/* the component has its own clear button */
.tree-search-field[b-8qgic96qu9]  input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.tree-search-spinner[b-8qgic96qu9],
.tree-search-clear[b-8qgic96qu9] {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
}

.tree-search-spinner[b-8qgic96qu9] {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.7;
}

.tree-search-clear[b-8qgic96qu9] {
    width: 1.2rem;
    height: 1.2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    padding: 0;
    line-height: 1;
    font-size: 0.7rem;
}

.tree-search-clear:hover[b-8qgic96qu9],
.tree-search-clear:focus-visible[b-8qgic96qu9] {
    opacity: 1;
    background: var(--op-surface-3);
}

.tree-search-status:empty[b-8qgic96qu9] {
    display: none;
}

.tree-search-status[b-8qgic96qu9] {
    margin-top: 0.25rem;
    font-size: var(--op-text-xs);
    color: var(--op-text-2);
}
/* /Components/Shared/WktBlock.razor.rz.scp.css */
.wkt-text[b-sucmad3eyo] {
    max-height: 12rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--op-surface-2, transparent);
}
/* /Components/Versions/CadSummary.razor.rz.scp.css */
/* the tables of the drawing (layers, entities, blocks, external references) scroll inside their card past a few dozen rows, so
   the stacked sections of the tab stay short; the header sticks at the top of the scrolling box (.op-table-scroll) */
.cad-scroll[b-81f2of0t6e] {
    max-height: 26rem;
    border-radius: inherit;
}
/* /Components/Versions/ConsolidateButton.razor.rz.scp.css */
/* the progress of the preparation as the background of the button itself */
.cb-button.is-busy[b-dwqg9phaua] {
    background-image: linear-gradient(to right, var(--op-accent-fill, rgba(13, 110, 253, .15)) var(--cb-progress, 100%), transparent var(--cb-progress, 100%));
    opacity: 1;
    cursor: progress;
}
/* /Components/Versions/EditedSourceDownload.razor.rz.scp.css */
/* the progress of the preparation as the background of the button itself (no extra element, docs/07 §14: no layout change) */
.ed-button.is-busy[b-s5mpxvlvfv] {
    background-image: linear-gradient(to right, var(--op-accent-fill, rgba(13, 110, 253, .15)) var(--ed-progress, 0%), transparent var(--ed-progress, 0%));
    opacity: 1;
    cursor: progress;
}
/* /Components/Versions/GeoreferenceForm.razor.rz.scp.css */
/* The georeferencing form (GeoreferenceForm): laid out by its own width (the window of the viewer is resizable): three cards
   side by side, then two with the map conversion under them, then one under the other.
   Theme tokens only, so it fits the dark viewer window and the light version page alike. */
.gf[b-xvrnyvp962] {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: var(--op-text-sm);
}

/* ── summary ── */
.gf-head[b-xvrnyvp962] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg, 10px);
    background: linear-gradient(100deg, color-mix(in srgb, var(--op-accent) 14%, transparent), transparent 70%);
}

.gf-badge[b-xvrnyvp962] {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--op-accent) 18%, transparent);
    color: var(--op-accent);
}

    .gf-badge svg[b-xvrnyvp962] {
        width: 1.45rem;
        height: 1.45rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
    }

.gf-head-text[b-xvrnyvp962] {
    flex: 1;
    min-width: 0;
}

.gf-level[b-xvrnyvp962] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--op-text-md, 0.95rem);
}

.gf-sub[b-xvrnyvp962] {
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gf-info[b-xvrnyvp962] {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    color: var(--op-text-2);
    cursor: help;
}

    .gf-info:hover[b-xvrnyvp962],
    .gf-info:focus-visible[b-xvrnyvp962] {
        background: var(--op-hover);
        color: var(--op-text);
    }

    .gf-info svg[b-xvrnyvp962] {
        width: 1.15rem;
        height: 1.15rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
    }

/* ── cards ── */
.gf-grid[b-xvrnyvp962] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.gf-card[b-xvrnyvp962] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem 0.7rem 0.55rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg, 10px);
    background: var(--op-surface-2);
}

.gf-card-head[b-xvrnyvp962] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.gf-icon[b-xvrnyvp962] {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--op-accent) 16%, transparent);
    color: var(--op-accent);
}

    .gf-icon svg[b-xvrnyvp962] {
        width: 1.15rem;
        height: 1.15rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linejoin: round;
    }

        .gf-icon svg .fill[b-xvrnyvp962] {
            fill: #e0352b;
            stroke: #e0352b;
        }

.gf-title[b-xvrnyvp962] {
    margin: 0;
    font-size: var(--op-text-sm);
    font-weight: 650;
}

.gf-caption[b-xvrnyvp962] {
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
}

.gf-fields[b-xvrnyvp962] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.5rem;
}

.gf-field[b-xvrnyvp962] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    min-width: 0;
}

    .gf-field > span[b-xvrnyvp962] {
        color: var(--op-text-2);
        font-size: var(--op-text-2xs, 0.7rem);
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .gf-field > small[b-xvrnyvp962] {
        color: var(--op-text-2);
        font-size: var(--op-text-2xs, 0.7rem);
        min-height: 1em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.gf-wide[b-xvrnyvp962] {
    grid-column: 1 / -1;
}

.gf-note[b-xvrnyvp962] {
    margin-top: 0.25rem;
}

.gf-action[b-xvrnyvp962] {
    justify-content: flex-end;
    padding-bottom: 1.1rem;
}

    .gf-action.is-flush[b-xvrnyvp962] {
        padding-bottom: 0;
    }

.gf-hint[b-xvrnyvp962] {
    margin: auto 0 0;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    line-height: 1.35;
}

/* ── north ── */
.gf-north[b-xvrnyvp962] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.gf-compass[b-xvrnyvp962] {
    flex: none;
    width: 116px;
    height: 116px;
    cursor: crosshair;
    border-radius: 50%;
}

    .gf-compass svg[b-xvrnyvp962] {
        width: 100%;
        height: 100%;
        pointer-events: none; /* the click is the div's: its offsets are from the compass */
    }

    .gf-compass .dial[b-xvrnyvp962] {
        fill: var(--op-surface);
        stroke: var(--op-border-strong);
        stroke-width: 1.5;
    }

    .gf-compass:hover .dial[b-xvrnyvp962] {
        stroke: var(--op-accent);
    }

    .gf-compass .tick[b-xvrnyvp962] {
        stroke: var(--op-text-3, #8a93a3);
        stroke-width: 1;
    }

        .gf-compass .tick.major[b-xvrnyvp962] {
            stroke: var(--op-text-2);
            stroke-width: 1.8;
        }

    .gf-compass .axis[b-xvrnyvp962] {
        fill: var(--op-text-3, #8a93a3);
        font-size: 8.5px;
        font-weight: 600;
        text-anchor: middle;
    }

    .gf-compass .needle-n[b-xvrnyvp962] {
        fill: #e0352b;
        stroke: #fff;
        stroke-width: 1.2;
        stroke-linejoin: round;
    }

    .gf-compass .needle-s[b-xvrnyvp962] {
        fill: var(--op-text-2);
        stroke: #fff;
        stroke-width: 1.2;
        stroke-linejoin: round;
        opacity: 0.75;
    }

    .gf-compass .hub[b-xvrnyvp962] {
        fill: var(--op-text);
        stroke: var(--op-surface);
        stroke-width: 1.5;
    }

    .gf-compass .n-label[b-xvrnyvp962] {
        fill: #e0352b;
        font-size: 13px;
        font-weight: 800;
        text-anchor: middle;
        paint-order: stroke;
        stroke: var(--op-surface);
        stroke-width: 3px;
    }

    .gf-compass.is-default .needle-n[b-xvrnyvp962],
    .gf-compass.is-default .n-label[b-xvrnyvp962] {
        opacity: 0.45;
    }

.gf-north-controls[b-xvrnyvp962] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gf-nudge[b-xvrnyvp962] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.2rem;
}

    .gf-nudge .btn[b-xvrnyvp962] {
        padding: 0.1rem 0;
        font-size: var(--op-text-2xs, 0.7rem);
        white-space: nowrap;
    }

/* ── footer ── */
.gf-foot[b-xvrnyvp962] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gf-foot-text[b-xvrnyvp962] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

    .gf-foot-text svg[b-xvrnyvp962] {
        flex: none;
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: var(--op-success-dot, #3ecf82);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* less room: the site and the north side by side, the map conversion under them across */
@container (max-width: 52rem) {
    .gf-grid[b-xvrnyvp962] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .gf-grid > .gf-card:nth-child(3)[b-xvrnyvp962] {
            grid-column: 1 / -1;
        }
}

/* narrow (a small window, the tab on a phone): one card under the other */
@container (max-width: 34rem) {
    .gf-grid[b-xvrnyvp962] {
        grid-template-columns: minmax(0, 1fr);
    }

    .gf-foot[b-xvrnyvp962] {
        flex-wrap: wrap;
    }
}
/* /Components/Versions/PdfSummary.razor.rz.scp.css */
/* the tables of the PDF (pages, layers, entities, blocks) scroll inside their card past a few dozen rows, so the stacked
   sections of the tab stay short; the header sticks at the top of the scrolling box (.op-table-scroll) */
.pdf-scroll[b-q8c1mk1k1m] {
    max-height: 26rem;
    border-radius: inherit;
}
/* /Components/Versions/RevitSummary.razor.rz.scp.css */
/* "File Revit" tab of the version page (docs/07 §6 quater): stacked cards instead of nested tabs; the long raw tables
   (BasicFileInfo, container, family types) fold, with a header that reads like the card titles. */

.rvt-title[b-py0y38l6zz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

    .rvt-title .op-count[b-py0y38l6zz] {
        letter-spacing: normal;
        text-transform: none;
    }

.rvt-disclosure > summary[b-py0y38l6zz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-size: var(--op-text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--op-text-2);
    border-radius: var(--op-radius-lg);
}

    .rvt-disclosure > summary[b-py0y38l6zz]::-webkit-details-marker {
        display: none;
    }

    /* chevron, as the folding sections of the element panel: rotates when open */
    .rvt-disclosure > summary[b-py0y38l6zz]::before {
        content: "";
        flex: 0 0 auto;
        width: 0.4rem;
        height: 0.4rem;
        margin: 0 0.25rem 0 0.1rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        color: var(--op-text-3);
        transform: rotate(-45deg);
        transition: transform var(--op-dur) var(--op-ease);
    }

    .rvt-disclosure > summary:hover[b-py0y38l6zz]::before {
        color: var(--op-text);
    }

    .rvt-disclosure > summary .op-count[b-py0y38l6zz] {
        letter-spacing: normal;
        text-transform: none;
    }

.rvt-disclosure[open] > summary[b-py0y38l6zz]::before {
    transform: translateY(-0.12rem) rotate(45deg);
}

.rvt-hint[b-py0y38l6zz] {
    flex: 1 1 12rem;
    min-width: 0;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--op-text-3);
    text-align: right;
}

.rvt-disclosure-body[b-py0y38l6zz] {
    padding: 0 1rem 1rem;
}

@media (max-width: 575.98px) {
    .rvt-hint[b-py0y38l6zz] {
        flex-basis: 100%;
        text-align: left;
    }
}
/* /Components/Versions/SceneSummary.razor.rz.scp.css */
/* The objects and materials of a 3D model (SceneSummary, docs/07 §6 octies): long lists scroll inside their card, with the
   header sticky at its top (.op-table-scroll), so the cards below stay in reach. */
.scene-scroll[b-vtlhhyy419] {
    max-height: 26rem;
}

.scene-note[b-vtlhhyy419] {
    margin: 0;
    padding: 0.55rem 0.9rem;
    border-top: 1px solid var(--op-border);
    font-size: var(--op-text-xs);
    color: var(--op-text-3);
}

/* tables filling a card (no .table-card frame of their own): the same side padding as the card head */
.panel-card .op-table > thead > tr > th:first-child[b-vtlhhyy419],
.panel-card .op-table > tbody > tr > td:first-child[b-vtlhhyy419] {
    padding-left: 0.9rem;
}

.panel-card .op-table > thead > tr > th:last-child[b-vtlhhyy419],
.panel-card .op-table > tbody > tr > td:last-child[b-vtlhhyy419] {
    padding-right: 0.9rem;
}
/* /Components/Viewer/ClassBreakdown.razor.rz.scp.css */
.breakdown[b-yr0ajgi9b9] {
    font-size: var(--op-text-xs);
    margin-top: 0.35rem;
}

    /* each class row carries a faint bar with its share of the selection (--share, set inline) */
    .breakdown li[b-yr0ajgi9b9] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: space-between;
        min-width: 0;
        margin-bottom: 2px;
        padding: 0.12rem 0.4rem;
        border-radius: var(--op-radius-sm);
        background: linear-gradient(to right, color-mix(in srgb, var(--op-accent) 13%, transparent) var(--share, 0%), transparent var(--share, 0%));
    }

.breakdown-class[b-yr0ajgi9b9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.breakdown .count[b-yr0ajgi9b9] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--op-text-2);
    flex: 0 0 auto;
}

/* rows as buttons (the panel narrows the common properties to one class) */
.breakdown-row[b-yr0ajgi9b9] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .breakdown-row:focus-visible[b-yr0ajgi9b9] {
        outline: 2px solid var(--op-focus);
        outline-offset: 2px;
        border-radius: var(--op-radius-sm);
    }

.breakdown li:has(.breakdown-row):hover[b-yr0ajgi9b9] {
    background-color: color-mix(in srgb, var(--op-accent) 10%, transparent);
}

.breakdown li.is-selected[b-yr0ajgi9b9] {
    box-shadow: inset 0 0 0 1px var(--op-accent);
    background-color: color-mix(in srgb, var(--op-accent) 16%, transparent);
}

    .breakdown li.is-selected .breakdown-class[b-yr0ajgi9b9] {
        color: var(--op-text-strong);
        font-weight: 600;
    }

.breakdown li.is-dimmed[b-yr0ajgi9b9] {
    opacity: 0.55;
}

.breakdown-more[b-yr0ajgi9b9] {
    font-size: var(--op-text-xs);
    text-decoration: none;
}
/* /Components/Viewer/Collaboration/CollabChatTab.razor.rz.scp.css */
/* «Chat» (docs/38 §3.2): the list of the conversations; a conversation fills the height of the panel — its head, the messages scrolling, the
   composer at the bottom. Mine on the right in the accent tint, a message mentioning me with an accent edge, links and mentions marked, the
   attachments as chips; the proposals of «@» (filled by wwwroot/js/collab.js, hence ::deep) under the field. Tokens of Opera only. */
.collab-channels[b-jvoaw2w6gl] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.collab-channel[b-jvoaw2w6gl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: var(--op-radius-md, 0.5rem);
    background: transparent;
    color: var(--op-text);
    font-size: var(--op-text-sm);
    text-align: left;
    cursor: pointer;
}

    .collab-channel:hover[b-jvoaw2w6gl] {
        background: var(--op-hover);
    }

    .collab-channel:focus-visible[b-jvoaw2w6gl] {
        outline: 2px solid var(--op-focus);
        outline-offset: -2px;
    }

    .collab-channel.has-unread .collab-channel-name[b-jvoaw2w6gl] {
        font-weight: 700;
    }

.collab-channel-name[b-jvoaw2w6gl] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collab-channel-time[b-jvoaw2w6gl] {
    flex: none;
    color: var(--op-text-3);
    font-size: var(--op-text-2xs, 0.7rem);
}

.collab-hash[b-jvoaw2w6gl] {
    display: inline-flex;
    flex: none;
    justify-content: center;
    width: 0.75rem;
    color: var(--op-accent-fg, var(--op-accent));
    font-weight: 700;
}

.collab-at[b-jvoaw2w6gl] {
    flex: none;
    color: var(--op-accent-fg, var(--op-accent));
    font-weight: 700;
}

.collab-dot[b-jvoaw2w6gl] {
    display: inline-block;
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--collab-color, var(--op-text-3));
}

    .collab-dot.is-small[b-jvoaw2w6gl] {
        width: 0.6rem;
        height: 0.6rem;
    }

.collab-note[b-jvoaw2w6gl] {
    margin: 0.4rem 0 0;
    color: var(--op-text-3);
    font-size: var(--op-text-xs);
}

/* a conversation */
.collab-conversation[b-jvoaw2w6gl] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    gap: 0.4rem;
}

.collab-conversation-head[b-jvoaw2w6gl] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.collab-back[b-jvoaw2w6gl] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.35rem;
    border: 0;
    border-radius: var(--op-radius-sm, 0.3rem);
    background: transparent;
    color: var(--op-accent-fg, var(--op-accent));
    font-size: var(--op-text-xs);
    cursor: pointer;
}

    .collab-back:hover[b-jvoaw2w6gl] {
        background: var(--op-hover);
    }

.collab-conversation-title[b-jvoaw2w6gl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
    font-size: var(--op-text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collab-messages[b-jvoaw2w6gl] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 8rem;
    overflow-y: auto;
    padding: 0.2rem 0.1rem;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.collab-older[b-jvoaw2w6gl] {
    align-self: center;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--op-border);
    border-radius: 999px;
    background: var(--op-surface);
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    cursor: pointer;
}

.collab-new-line[b-jvoaw2w6gl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--op-accent-fg, var(--op-accent));
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
}

    .collab-new-line[b-jvoaw2w6gl]::before,
    .collab-new-line[b-jvoaw2w6gl]::after {
        flex: 1;
        height: 1px;
        background: var(--op-accent-border, var(--op-accent));
        content: "";
    }

.collab-msg[b-jvoaw2w6gl] {
    max-width: 92%;
    padding: 0.35rem 0.55rem 0.4rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg, 0.6rem);
    background: var(--op-surface);
}

    .collab-msg.is-mine[b-jvoaw2w6gl] {
        align-self: flex-end;
        border-color: var(--op-accent-border);
        background: var(--op-accent-soft);
    }

    .collab-msg.mentions-me[b-jvoaw2w6gl] {
        border-left: 3px solid var(--op-accent);
    }

    .collab-msg.is-deleted[b-jvoaw2w6gl] {
        background: transparent;
        border-style: dashed;
    }

.collab-msg-head[b-jvoaw2w6gl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--op-text-xs);
}

.collab-msg-author[b-jvoaw2w6gl] {
    color: var(--op-text);
    font-weight: 600;
}

.collab-msg-time[b-jvoaw2w6gl],
.collab-msg-edited[b-jvoaw2w6gl] {
    color: var(--op-text-3);
    font-size: var(--op-text-2xs, 0.7rem);
}

.collab-msg-actions[b-jvoaw2w6gl] {
    display: inline-flex;
    gap: 0.15rem;
    margin-left: auto;
}

.collab-msg-action[b-jvoaw2w6gl] {
    padding: 0 0.3rem;
    border: 0;
    border-radius: var(--op-radius-sm, 0.3rem);
    background: transparent;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    cursor: pointer;
}

    .collab-msg-action:hover:not(:disabled)[b-jvoaw2w6gl] {
        background: var(--op-hover);
        color: var(--op-text);
    }

    .collab-msg-action.is-danger:hover:not(:disabled)[b-jvoaw2w6gl] {
        color: var(--op-danger-fg);
    }

.collab-msg-text[b-jvoaw2w6gl] {
    margin: 0.2rem 0 0;
    color: var(--op-text);
    font-size: var(--op-text-sm);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

    .collab-msg-text.is-deleted[b-jvoaw2w6gl] {
        color: var(--op-text-3);
        font-style: italic;
    }

    .collab-msg-text a[b-jvoaw2w6gl] {
        color: var(--op-accent-fg, var(--op-accent));
        text-decoration: underline;
    }

.collab-mention[b-jvoaw2w6gl] {
    padding: 0 0.15rem;
    border-radius: var(--op-radius-sm, 0.3rem);
    background: var(--op-accent-soft);
    color: var(--op-accent-fg, var(--op-accent));
    font-weight: 600;
}

    .collab-mention.is-me[b-jvoaw2w6gl] {
        background: var(--op-accent-fill, var(--op-accent));
        color: var(--op-on-accent, #fff);
    }

.collab-attachments[b-jvoaw2w6gl] {
    margin-top: 0.3rem;
}

.collab-attachment[b-jvoaw2w6gl] {
    background: var(--op-surface-2);
    color: var(--op-text);
    cursor: pointer;
}

    .collab-attachment:hover[b-jvoaw2w6gl] {
        border-color: var(--op-accent-border);
        background: var(--op-accent-soft);
    }

.collab-attachment-icon[b-jvoaw2w6gl] {
    flex: none;
    color: var(--op-accent-fg, var(--op-accent));
}

.collab-msg-edit[b-jvoaw2w6gl] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.collab-msg-edit-actions[b-jvoaw2w6gl] {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

/* the composer */
.collab-composer[b-jvoaw2w6gl] {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--op-border);
}

.collab-composer-tools[b-jvoaw2w6gl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.collab-composer-row[b-jvoaw2w6gl] {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
}

.collab-composer-field[b-jvoaw2w6gl] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.collab-input[b-jvoaw2w6gl] {
    min-height: 2.6rem;
    max-height: 9rem;
    resize: vertical;
    field-sizing: content;
}

.collab-send[b-jvoaw2w6gl] {
    flex: none;
}

/* the proposals of «@», above the field (the composer is at the bottom of the panel) */
.collab-mentions[b-jvoaw2w6gl] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.25rem);
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.2rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-surface);
    box-shadow: var(--op-shadow-lg);
}

    .collab-mentions[hidden][b-jvoaw2w6gl] {
        display: none;
    }

    .collab-mentions[b-jvoaw2w6gl]  .collab-mention-item {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.3rem 0.45rem;
        border: 0;
        border-radius: var(--op-radius-sm, 0.3rem);
        background: transparent;
        color: var(--op-text);
        font-size: var(--op-text-sm);
        text-align: left;
        cursor: pointer;
    }

        .collab-mentions[b-jvoaw2w6gl]  .collab-mention-item.is-active,
        .collab-mentions[b-jvoaw2w6gl]  .collab-mention-item:hover {
            background: var(--op-active-bg, var(--op-hover));
        }

    .collab-mentions[b-jvoaw2w6gl]  .collab-mention-dot {
        flex: none;
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
    }
/* /Components/Viewer/Collaboration/CollaborationPanel.razor.rz.scp.css */
/* The panel «Collaborazione» (docs/38 §3): the whole height of the side, its tabs on top, the chat scrolling inside (CollabChatTab). Tokens of
   Opera only (--op-*): both themes. */
.collab-panel[b-iisvwysnx7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0.35rem;
}

.collab-tabs[b-iisvwysnx7] {
    flex: none;
    margin-bottom: 0.15rem;
}

.collab-body[b-iisvwysnx7] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    gap: 0.5rem;
}

.collab-unavailable[b-iisvwysnx7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.collab-unavailable-note[b-iisvwysnx7] {
    margin: 0;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

/* an error or a notice of the panel, with its × */
.collab-message[b-iisvwysnx7] {
    display: flex;
    flex: none;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--op-info-border, var(--op-border));
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-info-bg, var(--op-surface-2));
    color: var(--op-info-fg, var(--op-text));
    font-size: var(--op-text-xs);
}

    .collab-message > span[b-iisvwysnx7] {
        flex: 1;
        min-width: 0;
    }

    .collab-message.is-error[b-iisvwysnx7] {
        border-color: var(--op-danger-border);
        background: var(--op-danger-bg);
        color: var(--op-danger-fg);
    }
/* /Components/Viewer/Collaboration/CollabPeopleTab.razor.rz.scp.css */
/* «Persone» (docs/38 §3.1): me on top in a box, then the people of the room, one row each with its dot, name, state and what is open, and its
   commands under it. The dot is the colour of the person (the dome of his drone); idle dims it, away hollows it. */
.collab-me[b-v2ka188d6z] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg, 0.6rem);
    background: var(--op-surface-2);
}

.collab-me-main[b-v2ka188d6z] {
    flex: 1;
    min-width: 0;
}

.collab-you[b-v2ka188d6z] {
    color: var(--op-text-3);
    font-weight: 400;
}

.collab-dot[b-v2ka188d6z] {
    display: inline-block;
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--collab-color, var(--op-text-3));
    box-shadow: 0 0 0 2px var(--op-surface), 0 0 0 3px color-mix(in srgb, var(--collab-color, var(--op-text-3)) 45%, transparent);
}

    .collab-dot.is-large[b-v2ka188d6z] {
        width: 1rem;
        height: 1rem;
    }

.collab-name[b-v2ka188d6z] {
    overflow: hidden;
    color: var(--op-text);
    font-size: var(--op-text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collab-sub[b-v2ka188d6z] {
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

.collab-note[b-v2ka188d6z] {
    margin: 0;
    color: var(--op-text-3);
    font-size: var(--op-text-xs);
}

.collab-people[b-v2ka188d6z] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.collab-person[b-v2ka188d6z] {
    padding: 0.35rem 0.4rem 0.45rem;
    border: 1px solid transparent;
    border-radius: var(--op-radius-md, 0.5rem);
}

    .collab-person:hover[b-v2ka188d6z] {
        background: var(--op-hover);
    }

    .collab-person.is-focused[b-v2ka188d6z] {
        border-color: var(--op-accent-border);
        background: var(--op-accent-soft);
    }

    .collab-person.is-idle .collab-dot[b-v2ka188d6z] {
        opacity: 0.55;
    }

    .collab-person.is-away .collab-dot[b-v2ka188d6z] {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--collab-color, var(--op-text-3));
    }

.collab-person-main[b-v2ka188d6z] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.1rem 0.15rem;
    border: 0;
    border-radius: var(--op-radius-sm, 0.3rem);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .collab-person-main:focus-visible[b-v2ka188d6z] {
        outline: 2px solid var(--op-focus);
        outline-offset: 1px;
    }

.collab-person-text[b-v2ka188d6z] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.collab-state[b-v2ka188d6z] {
    color: var(--op-text);
}

.collab-person.is-idle .collab-state[b-v2ka188d6z],
.collab-person.is-away .collab-state[b-v2ka188d6z] {
    color: var(--op-text-3);
}

.collab-person-actions[b-v2ka188d6z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.3rem 0 0 1.45rem;
}

.collab-later[b-v2ka188d6z] {
    display: inline-flex;
    gap: 0.25rem;
}
/* /Components/Viewer/Collaboration/CollabProfileDialog.razor.rz.scp.css */
/* The profile dialog (docs/38 §2): the name, the colours of the palette as round swatches (the chosen one ringed), any other colour, the link
   to «Sono io». */
.collab-profile[b-lg0u0c4rjq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.collab-field-label[b-lg0u0c4rjq],
.collab-colors-label[b-lg0u0c4rjq] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    font-weight: 600;
}

.collab-swatches[b-lg0u0c4rjq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.collab-swatch[b-lg0u0c4rjq] {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 2px solid var(--op-surface);
    border-radius: 50%;
    background: var(--collab-color);
    box-shadow: 0 0 0 1px var(--op-border-strong);
    cursor: pointer;
}

    .collab-swatch.is-chosen[b-lg0u0c4rjq] {
        box-shadow: 0 0 0 2px var(--op-text);
    }

    .collab-swatch:focus-visible[b-lg0u0c4rjq] {
        outline: 2px solid var(--op-focus);
        outline-offset: 2px;
    }

.collab-link[b-lg0u0c4rjq] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--op-text-sm);
    cursor: pointer;
}

.collab-profile-note[b-lg0u0c4rjq] {
    margin: 0;
    color: var(--op-text-3);
    font-size: var(--op-text-xs);
}
/* /Components/Viewer/Collaboration/CollabToasts.razor.rz.scp.css */
/* The toasts of the collaboration over the stage (docs/38 §3.2): bottom right, above the canvas, the colour of the author as an edge and a dot. */
.collab-toasts[b-4p9me7cqwf] {
    position: absolute;
    right: 0.75rem;
    bottom: 3.5rem;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: min(20rem, calc(100% - 1.5rem));
    pointer-events: none;
}

.collab-toast[b-4p9me7cqwf] {
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    border: 1px solid var(--op-border);
    border-left: 4px solid var(--collab-color, var(--op-accent));
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-surface);
    box-shadow: var(--op-shadow-float, var(--op-shadow-lg));
    pointer-events: auto;
    animation: collab-toast-in-b-4p9me7cqwf var(--op-dur, 160ms) var(--op-ease, ease-out);
}

.collab-toast-main[b-4p9me7cqwf] {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border: 0;
    background: transparent;
    color: var(--op-text);
    text-align: left;
    cursor: pointer;
}

    .collab-toast-main:hover[b-4p9me7cqwf] {
        background: var(--op-hover);
    }

    .collab-toast-main:focus-visible[b-4p9me7cqwf] {
        outline: 2px solid var(--op-focus);
        outline-offset: -2px;
    }

.collab-toast-dot[b-4p9me7cqwf] {
    flex: none;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.25rem;
    border-radius: 50%;
    background: var(--collab-color, var(--op-accent));
}

.collab-toast-text[b-4p9me7cqwf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.collab-toast-title[b-4p9me7cqwf] {
    font-size: var(--op-text-xs);
    font-weight: 600;
}

.collab-toast-body[b-4p9me7cqwf] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.collab-toast-close[b-4p9me7cqwf] {
    flex: none;
    padding: 0.35rem 0.5rem;
    border: 0;
    background: transparent;
    color: var(--op-text-2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

    .collab-toast-close:hover[b-4p9me7cqwf] {
        color: var(--op-text-strong);
    }

@keyframes collab-toast-in-b-4p9me7cqwf {
    from {
        opacity: 0;
        transform: translateY(0.4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .collab-toast[b-4p9me7cqwf] {
        animation: none;
    }
}
/* /Components/Viewer/CommonPropertyRow.razor.rz.scp.css */
.varies[b-xeo4gelhv4] {
    cursor: help;
}

.distinct[b-xeo4gelhv4] {
    padding: 0.1rem 0.4rem;
    font-size: var(--op-text-2xs);
    font-weight: 500;
    color: var(--op-text-2);
    background: transparent;
    border: 1px solid var(--op-border-strong);
    cursor: help;
}
/* /Components/Viewer/ExpandAllButtons.razor.rz.scp.css */
/* Same size as the icon buttons of the tree (TreeViewPicker), a little smaller next to a panel title or the filter. */
.expand-all-buttons[b-96c2ilbb2u] {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 0.25rem;
}

.icon-button[b-96c2ilbb2u] {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .icon-button .op-icon[b-96c2ilbb2u] {
        width: 1rem;
        height: 1rem;
    }
/* /Components/Viewer/FederationSchemaChangeBanner.razor.rz.scp.css */
/* «Cambia schema» of the members of a federation over the scene: top centre, as the banner of a single version (SchemaChangeBanner),
   one compact notice per member, stacked */
.fed-schema-banners[b-n5awcltbz1] {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: min(34rem, calc(100% - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: calc(100% - 1.2rem);
    overflow-y: auto;
}

.fed-schema-banner[b-n5awcltbz1] {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--op-border, rgba(255, 255, 255, 0.18));
    border-radius: var(--op-radius-lg, 0.75rem);
    background: var(--op-float-bg);
    color: var(--op-float-fg);
    font-size: 0.85rem;
    box-shadow: var(--op-shadow-float);
}

.fed-schema-banner.is-running[b-n5awcltbz1] {
    border-color: var(--op-accent, #4c8dff);
}

.fed-schema-banner.is-failed[b-n5awcltbz1] {
    border-color: var(--op-danger-dot);
}

.fed-schema-banner.is-frozen[b-n5awcltbz1],
.fed-schema-banner.is-replaced[b-n5awcltbz1] {
    border-color: var(--op-warning-dot);
}

.fed-schema-banner.is-replaced[b-n5awcltbz1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .fed-schema-banner.is-replaced > span[b-n5awcltbz1] {
        flex: 1 1 auto;
    }

.fed-schema-head[b-n5awcltbz1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .fed-schema-head > :first-child[b-n5awcltbz1] {
        flex: 1 1 auto;
    }

.fed-schema-percent[b-n5awcltbz1] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fed-schema-phases[b-n5awcltbz1] {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    font-size: 0.8rem;
}

    .fed-schema-phases li[b-n5awcltbz1] {
        display: flex;
        gap: 0.3rem;
        align-items: baseline;
        opacity: 0.6;
    }

    .fed-schema-phases li.phase-running[b-n5awcltbz1],
    .fed-schema-phases li.phase-done[b-n5awcltbz1] {
        opacity: 1;
    }

.phase-mark[b-n5awcltbz1] {
    width: 1rem;
    text-align: center;
}

.phase-percent[b-n5awcltbz1] {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.fed-schema-note[b-n5awcltbz1] {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    opacity: 0.75;
}

.fed-schema-actions[b-n5awcltbz1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.fed-schema-notices[b-n5awcltbz1] {
    margin-top: 0.35rem;
    font-size: 0.78rem;
}

    .fed-schema-notices summary[b-n5awcltbz1] {
        cursor: pointer;
    }

    .fed-schema-notices ul[b-n5awcltbz1] {
        max-height: 10rem;
        overflow-y: auto;
        margin: 0.25rem 0 0;
        padding-left: 1.1rem;
    }

.fed-schema-close[b-n5awcltbz1] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}

    .fed-schema-close:hover[b-n5awcltbz1],
    .fed-schema-close:focus-visible[b-n5awcltbz1] {
        background: var(--op-bar-hover);
    }

@media (max-width: 720px) {
    .fed-schema-banners[b-n5awcltbz1] {
        top: 0.4rem;
    }

    .fed-schema-banner[b-n5awcltbz1] {
        font-size: 0.8rem;
    }
}
/* /Components/Viewer/GeometryProgress.razor.rz.scp.css */
.geometry-progress[b-xkle71cgup] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: var(--op-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--op-text-2);
}

.geometry-progress-bar[b-xkle71cgup] {
    display: inline-block;
    width: 7rem;
    height: 4px;
    border-radius: var(--op-radius-pill);
    background: var(--op-surface-3);
    overflow: hidden;
}

    .geometry-progress-bar > span[b-xkle71cgup] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--op-accent);
        transition: width 0.2s ease-out;
    }

@media (prefers-reduced-motion: reduce) {
    .geometry-progress-bar > span[b-xkle71cgup] {
        transition: none;
    }
}
/* /Components/Viewer/ModelInfoModal.razor.rz.scp.css */
.model-info[b-xcdffe58mt] {
    font-size: var(--op-text-sm);
}

    /* section titles: small labels with a hairline, like the card titles of the admin pages */
    .model-info h3[b-xcdffe58mt] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--op-border);
        font-size: var(--op-text-2xs);
        font-weight: 650;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--op-text-2);
    }

    .model-info[b-xcdffe58mt]  .kv-table {
        font-size: var(--op-text-xs);
        --bs-table-bg: transparent;
    }

        .model-info[b-xcdffe58mt]  .kv-table th,
        .model-info[b-xcdffe58mt]  .kv-table td {
            padding: 0.3rem 0.4rem 0.3rem 0;
        }

.member-list[b-xcdffe58mt] {
    border-top: 1px solid var(--op-border);
}

.member-row[b-xcdffe58mt] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--op-border);
}

.member-swatch[b-xcdffe58mt] {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
    margin-right: 0.3rem;
    vertical-align: -0.05rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.info-warnings[b-xcdffe58mt] {
    color: var(--op-warn);
    padding-left: 1.1rem;
}

/* compact counters (shared StatsCards) inside the dialog */
.model-info[b-xcdffe58mt]  .stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.5rem;
}

.model-info[b-xcdffe58mt]  .stat-card {
    background: var(--op-surface-2);
    box-shadow: none;
}

.model-info[b-xcdffe58mt]  .stat-value {
    font-size: 0.9375rem;
}
/* /Components/Viewer/ModelSwatch.razor.rz.scp.css */
.model-swatch[b-hfn5z2law5] {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 3px;
    margin-right: 0.25rem;
    vertical-align: -0.05rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* /Components/Viewer/Plugins/HookMarks.razor.rz.scp.css */
.hook-marks[b-sldk7ou59h] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.hook-mark-dot[b-sldk7ou59h] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.hook-mark-icon[b-sldk7ou59h] {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    .hook-mark-icon[b-sldk7ou59h]  .fill {
        fill: currentColor;
    }

.tone-neutral[b-sldk7ou59h] { color: var(--op-text-3); }
.tone-info[b-sldk7ou59h] { color: var(--op-accent, #5b97ff); }
.tone-success[b-sldk7ou59h] { color: var(--bs-success, #3fb950); }
.tone-warning[b-sldk7ou59h] { color: var(--bs-warning, #d29922); }
.tone-error[b-sldk7ou59h] { color: var(--bs-danger, #f85149); }
/* /Components/Viewer/Plugins/HookMenu.razor.rz.scp.css */
/* a menu of commands over everything (the look of the drop-downs of the ribbon), placed by plugin-hooks.js */
.hook-menu-backdrop[b-m3c3bpvkct] {
    position: fixed;
    inset: 0;
    z-index: 1089;
    background: transparent;
}

.hook-menu[b-m3c3bpvkct] {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1090;
    visibility: hidden;
    min-width: 12rem;
    max-width: min(22rem, calc(100vw - 8px));
    max-height: calc(100vh - 8px);
    overflow-y: auto;
    padding: 0.3rem 0;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius, 0.4rem);
    background: var(--op-surface);
    color: var(--op-text);
    box-shadow: var(--op-shadow-float);
    font-size: var(--op-text-sm, 0.85rem);
}

    .hook-menu:focus[b-m3c3bpvkct] {
        outline: none;
    }

.hook-menu-title[b-m3c3bpvkct],
.hook-menu-heading[b-m3c3bpvkct] {
    padding: 0.2rem 0.75rem 0.25rem;
    color: var(--op-text-3);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hook-menu-title[b-m3c3bpvkct] {
    border-bottom: 1px solid var(--op-border);
    margin-bottom: 0.2rem;
}

.hook-menu-group + .hook-menu-group[b-m3c3bpvkct],
.hook-menu-item + .hook-menu-group[b-m3c3bpvkct],
.hook-menu-group + .hook-menu-item[b-m3c3bpvkct] {
    border-top: 1px solid var(--op-border);
    margin-top: 0.2rem;
    padding-top: 0.2rem;
}

.hook-menu-item[b-m3c3bpvkct] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.35rem 0.75rem 0.35rem 0.4rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .hook-menu-item:hover[b-m3c3bpvkct],
    .hook-menu-item:focus-visible[b-m3c3bpvkct],
    .hook-menu-item:focus[b-m3c3bpvkct] {
        background: var(--op-hover);
        outline: none;
    }

    .hook-menu-item.is-active[b-m3c3bpvkct] {
        color: var(--op-accent);
    }

    .hook-menu-item[aria-disabled="true"][b-m3c3bpvkct] {
        color: var(--op-text-3);
        cursor: default;
    }

.hook-menu-check[b-m3c3bpvkct] {
    flex: 0 0 0.8rem;
    color: var(--op-accent);
    text-align: center;
}

.hook-menu-icon[b-m3c3bpvkct] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    .hook-menu-icon[b-m3c3bpvkct]  .fill {
        fill: currentColor;
        fill-opacity: 0.55;
    }

.hook-menu-label[b-m3c3bpvkct] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hook-menu-hint[b-m3c3bpvkct],
.hook-menu-empty[b-m3c3bpvkct] {
    padding: 0.2rem 0.75rem 0.3rem 2.65rem;
    color: var(--op-text-3);
    font-size: var(--op-text-xs, 0.75rem);
}

.hook-menu-empty[b-m3c3bpvkct] {
    padding-left: 0.75rem;
}

/* touch screens: commands big enough for a finger */
@media (pointer: coarse) {
    .hook-menu-item[b-m3c3bpvkct] {
        min-height: 2.6rem;
    }
}
/* /Components/Viewer/Plugins/PluginInputHost.razor.rz.scp.css */
/* the error of a command of a plugin (scene menu, shortcut), over the scene for a few seconds */
.plugin-input-toast[b-p0x1bpgf4p] {
    position: absolute;
    left: 50%;
    bottom: 1.2rem;
    z-index: 30;
    max-width: min(32rem, calc(100% - 2rem));
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--op-danger-border, #8b2c2c);
    border-radius: var(--op-radius, 0.4rem);
    background: var(--op-surface);
    color: var(--op-danger-fg, #ff9b9b);
    font-size: var(--op-text-sm, 0.85rem);
    box-shadow: var(--op-shadow-float);
    transform: translateX(-50%);
    pointer-events: none;
}
/* /Components/Viewer/Plugins/PluginPropertyRow.razor.rz.scp.css */
/* a row with the hooks of the plugins: the value to click for its editor, the ⋯ of its menu on hover and focus */
.hooked-row:focus[b-5ggx4osb5a] {
    outline: none;
}

.hooked-row:focus-visible > *[b-5ggx4osb5a] {
    box-shadow: inset 0 0 0 9999px var(--op-hover);
}

.hooked-row:focus-visible > th[b-5ggx4osb5a] {
    box-shadow: inset 2px 0 0 var(--op-focus), inset 0 0 0 9999px var(--op-hover);
}

.hooked-value[b-5ggx4osb5a] {
    cursor: text;
    border-radius: var(--op-radius-sm, 0.25rem);
}

    .hooked-value:hover[b-5ggx4osb5a] {
        background: var(--op-hover);
        box-shadow: 0 0 0 2px var(--op-hover);
    }

.hooked-row.is-editing > td[b-5ggx4osb5a] {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

.hooked-editor[b-5ggx4osb5a] {
    min-width: 0;
}

.hooked-more[b-5ggx4osb5a] {
    float: right;
    margin: -0.1rem 0 -0.1rem 0.25rem;
    padding: 0 0.3rem;
    border: 0;
    border-radius: var(--op-radius-sm, 0.25rem);
    background: transparent;
    color: var(--op-text-3);
    line-height: 1.2;
    opacity: 0;
    cursor: pointer;
}

    .hooked-row:hover .hooked-more[b-5ggx4osb5a],
    .hooked-row:focus-within .hooked-more[b-5ggx4osb5a],
    .hooked-more:focus-visible[b-5ggx4osb5a] {
        opacity: 1;
    }

    .hooked-more:hover[b-5ggx4osb5a] {
        background: var(--op-hover);
        color: var(--op-text);
    }

/* touch screens have no hover: the ⋯ is always there */
@media (hover: none) {
    .hooked-more[b-5ggx4osb5a] {
        opacity: 1;
    }
}
/* /Components/Viewer/Plugins/ShortcutsDialog.razor.rz.scp.css */
.shortcuts-group[b-bm4u3lqucy] {
    margin: 0.8rem 0 0.3rem;
    color: var(--op-text-2);
    font-size: var(--op-text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .shortcuts-group:first-child[b-bm4u3lqucy] {
        margin-top: 0;
    }

.shortcuts-list[b-bm4u3lqucy] {
    margin: 0;
}

.shortcuts-row[b-bm4u3lqucy] {
    display: grid;
    grid-template-columns: minmax(8rem, 13rem) 1fr;
    gap: 0.6rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--op-border);
    font-size: var(--op-text-sm, 0.85rem);
}

    .shortcuts-row dt[b-bm4u3lqucy] {
        font-weight: 400;
    }

    .shortcuts-row dd[b-bm4u3lqucy] {
        margin: 0;
        color: var(--op-text);
    }

    .shortcuts-row.is-off[b-bm4u3lqucy] {
        opacity: 0.65;
    }

    .shortcuts-row kbd[b-bm4u3lqucy] {
        padding: 0.05rem 0.35rem;
        border: 1px solid var(--op-border-strong);
        border-radius: var(--op-radius-sm, 0.25rem);
        background: var(--op-surface-2);
        color: var(--op-text);
        font-size: 0.78em;
    }

.shortcuts-where[b-bm4u3lqucy] {
    color: var(--op-text-3);
}

.shortcuts-note[b-bm4u3lqucy] {
    margin: 0.8rem 0 0;
    color: var(--op-text-3);
    font-size: var(--op-text-xs, 0.75rem);
}

@media (max-width: 520px) {
    .shortcuts-row[b-bm4u3lqucy] {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}
/* /Components/Viewer/Plugins/SideTabs.razor.rz.scp.css */
/* the vertical tabs of a side: a column on the outer edge of the window (left of the Struttura panel, right of the
   Proprietà panel), always there, the tabs from the top */
.side-tabs[b-q44moi7kyv] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 1.75rem;
    padding: 0.35rem 0;
    overflow: hidden;
    background: var(--op-bar-2);
}

.side-tabs-left[b-q44moi7kyv] {
    border-right: 1px solid var(--op-border);
}

.side-tabs-right[b-q44moi7kyv] {
    border-left: 1px solid var(--op-border);
}

.side-tab[b-q44moi7kyv] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.55rem 0 0.65rem;
    border: 0;
    background: transparent;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--op-dur) var(--op-ease), color var(--op-dur) var(--op-ease);
}

    .side-tab:hover[b-q44moi7kyv],
    .side-tab:focus-visible[b-q44moi7kyv] {
        background: var(--op-bar-hover);
        color: var(--op-text);
    }

    .side-tab:focus-visible[b-q44moi7kyv] {
        outline: 2px solid var(--op-focus);
        outline-offset: -2px;
    }

    /* the panel shown: accent on the side of the panel */
    .side-tab.is-active[b-q44moi7kyv] {
        background: var(--op-surface);
        color: var(--op-text-strong);
    }

.side-tabs-left .side-tab.is-active[b-q44moi7kyv] {
    box-shadow: inset -2px 0 0 var(--op-accent, #5b97ff);
}

.side-tabs-right .side-tab.is-active[b-q44moi7kyv] {
    box-shadow: inset 2px 0 0 var(--op-accent, #5b97ff);
}

.side-tab-icon[b-q44moi7kyv] {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    .side-tab-icon[b-q44moi7kyv]  .fill {
        fill: currentColor;
        fill-opacity: 0.55;
    }

/* the title read bottom to top on the left, top to bottom on the right */
.side-tab-label[b-q44moi7kyv] {
    writing-mode: vertical-rl;
    white-space: nowrap;
    text-transform: uppercase;
}

.side-tabs-left .side-tab-label[b-q44moi7kyv] {
    transform: rotate(180deg);
}

.side-tab-badge[b-q44moi7kyv] {
    min-width: 1.05rem;
    padding: 0.1rem 0.2rem;
    border-radius: 999px;
    background: var(--op-accent-fill, #2f6fdb);
    color: var(--op-on-accent);
    font-size: 0.62rem;
    font-weight: 600;
    text-align: center;
}

/* the narrow layout (panels stacked): the left tabs a row at the top, the right ones a row at the bottom (compact from
   four tabs, scrolled sideways if still too wide); a side with one panel only has no row (the toggle of the top bar
   shows it) */
@media (max-width: 720px) {
    .side-tabs.is-single[b-q44moi7kyv] {
        display: none;
    }

    .side-tabs[b-q44moi7kyv] {
        flex-direction: row;
        width: auto;
        padding: 0 0.35rem;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }

    .side-tabs-left[b-q44moi7kyv] {
        border-right: 0;
        border-bottom: 1px solid var(--op-border);
    }

    .side-tabs-right[b-q44moi7kyv] {
        border-left: 0;
        border-top: 1px solid var(--op-border);
    }

    .side-tab[b-q44moi7kyv] {
        flex: 0 0 auto;
        flex-direction: row;
        width: auto;
        min-height: 2.5rem;
        padding: 0 0.85rem;
        font-size: var(--op-text-xs, 0.75rem);
    }

    .side-tab-label[b-q44moi7kyv],
    .side-tabs-left .side-tab-label[b-q44moi7kyv] {
        writing-mode: horizontal-tb;
        transform: none;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* four tabs or more do not fit a phone with their titles: the others show icon and badge (the title in the
       tooltip), the one shown keeps its title and takes the rest of the row */
    .side-tabs:has(> .side-tab:nth-child(4)) .side-tab:not(.is-active)[b-q44moi7kyv] {
        min-width: 2.75rem;
        padding: 0 0.6rem;
        justify-content: center;
    }

        .side-tabs:has(> .side-tab:nth-child(4)) .side-tab:not(.is-active) .side-tab-label[b-q44moi7kyv] {
            display: none;
        }

    .side-tabs:has(> .side-tab:nth-child(4)) .side-tab.is-active[b-q44moi7kyv] {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    /* the accent on the side of the panel: under the top row, over the bottom row */
    .side-tabs-left .side-tab.is-active[b-q44moi7kyv] {
        box-shadow: inset 0 -2px 0 var(--op-accent, #5b97ff);
    }

    .side-tabs-right .side-tab.is-active[b-q44moi7kyv] {
        box-shadow: inset 0 2px 0 var(--op-accent, #5b97ff);
    }
}
/* /Components/Viewer/Plugins/TreeNodeHooks.razor.rz.scp.css */
/* in the row of the tree: [label ………][marks][×n][count][⌖][⋯] */
.tree-hook-marks[b-5omzezn4g8] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.tree-hook-more[b-5omzezn4g8] {
    order: 4;
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    margin-left: 0.1rem;
    padding: 0;
    border: 0;
    border-radius: var(--op-radius-sm);
    background: transparent;
    color: var(--op-text-3);
    line-height: 1;
    opacity: 0;
    cursor: pointer;
}

    .tree-row:hover .tree-hook-more[b-5omzezn4g8],
    .tree-row.active .tree-hook-more[b-5omzezn4g8],
    .tree-row.selected .tree-hook-more[b-5omzezn4g8],
    .tree-hook-more:focus-visible[b-5omzezn4g8] {
        opacity: 1;
    }

    .tree-hook-more:hover[b-5omzezn4g8] {
        background: var(--op-hover);
        color: var(--op-text);
    }

@media (hover: none) {
    .tree-hook-more[b-5omzezn4g8] {
        opacity: 1;
    }
}
/* /Components/Viewer/RelatedEntityItem.razor.rz.scp.css */
.rel-link[b-f4s3kf511d] {
    font-size: inherit;
    line-height: 1.4;
    vertical-align: baseline;
    color: var(--op-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
    border-radius: var(--op-radius-sm);
}

    .rel-link:hover[b-f4s3kf511d],
    .rel-link:focus-visible[b-f4s3kf511d] {
        color: var(--op-accent-hover);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.rel-tag[b-f4s3kf511d] {
    font-size: var(--op-text-2xs);
    color: var(--op-text-2);
    margin-left: 0.3rem;
    padding: 0 0.3rem;
    border-radius: var(--op-radius-sm);
    background: var(--op-surface-3);
}

.rel-text[b-f4s3kf511d] {
    overflow-wrap: anywhere;
}

.rel-class[b-f4s3kf511d] {
    font-size: var(--op-text-2xs);
    color: var(--op-text-3);
    margin-left: 0.3rem;
}

.rel-detail[b-f4s3kf511d] {
    font-size: var(--op-text-xs);
    color: var(--op-text-2);
}

[b-f4s3kf511d] .rel-icon {
    margin-right: 0.35rem;
    vertical-align: -0.2em;
    flex: none;
}
/* /Components/Viewer/RelationGroupsView.razor.rz.scp.css */
.rel-group + .rel-group[b-u199usmyvr] {
    margin-top: 0.5rem;
}

.rel-group-label[b-u199usmyvr] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
    font-size: var(--op-text-xs);
    color: var(--op-text-2);
    min-width: 0;
}

    .rel-group-label .rel-label[b-u199usmyvr] {
        flex: 0 0 auto;
        white-space: nowrap;
        font-weight: 500;
    }

    .rel-group-label .rel-rel-class[b-u199usmyvr] {
        font-size: var(--op-text-2xs);
        color: var(--op-text-3);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .rel-group-label .count[b-u199usmyvr] {
        margin-left: auto;
        font-size: var(--op-text-2xs);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        flex: 0 0 auto;
    }

.rel-list[b-u199usmyvr] {
    font-size: var(--op-text-sm);
}

    .rel-list > li[b-u199usmyvr] {
        padding: 0.12rem 0 0.12rem 0.6rem;
        border-left: 2px solid var(--op-border-strong);
    }

        .rel-list > li:hover[b-u199usmyvr] {
            border-left-color: var(--op-accent);
        }

.rel-more[b-u199usmyvr] {
    margin-top: 0.15rem;
    font-size: var(--op-text-xs);
    text-decoration: none;
}

    .rel-more:hover[b-u199usmyvr] {
        text-decoration: underline;
    }
/* /Components/Viewer/SchemaChangeBanner.razor.rz.scp.css */
/* «Cambia schema» over the scene: top centre, above the canvas, under the floating panels of the plugins' error */
.schema-banner[b-krg5xgj5p4] {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: min(34rem, calc(100% - 2rem));
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--op-border, rgba(255, 255, 255, 0.18));
    border-radius: var(--op-radius-lg, 0.75rem);
    background: var(--op-float-bg);
    color: var(--op-float-fg);
    font-size: 0.85rem;
    box-shadow: var(--op-shadow-float);
}

.schema-banner.is-running[b-krg5xgj5p4] {
    border-color: var(--op-accent, #4c8dff);
}

.schema-banner.is-failed[b-krg5xgj5p4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-color: var(--op-danger-dot);
}

.schema-banner.is-frozen[b-krg5xgj5p4],
.schema-banner.is-done[b-krg5xgj5p4] {
    border-color: var(--op-warning-dot);
}

.schema-banner-head[b-krg5xgj5p4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .schema-banner-head > :first-child[b-krg5xgj5p4] {
        flex: 1 1 auto;
    }

.schema-banner-percent[b-krg5xgj5p4] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.schema-banner-phases[b-krg5xgj5p4] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

    .schema-banner-phases li[b-krg5xgj5p4] {
        display: flex;
        gap: 0.3rem;
        align-items: baseline;
        opacity: 0.6;
    }

    .schema-banner-phases li.phase-running[b-krg5xgj5p4],
    .schema-banner-phases li.phase-done[b-krg5xgj5p4] {
        opacity: 1;
    }

.phase-mark[b-krg5xgj5p4] {
    width: 1rem;
    text-align: center;
}

.phase-percent[b-krg5xgj5p4] {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.schema-banner-note[b-krg5xgj5p4] {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    opacity: 0.75;
}

.schema-banner-notices[b-krg5xgj5p4] {
    margin-top: 0.35rem;
    font-size: 0.78rem;
}

    .schema-banner-notices summary[b-krg5xgj5p4] {
        cursor: pointer;
    }

    .schema-banner-notices ul[b-krg5xgj5p4] {
        max-height: 12rem;
        overflow-y: auto;
        margin: 0.25rem 0 0;
        padding-left: 1.1rem;
    }

.schema-banner-close[b-krg5xgj5p4] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}

    .schema-banner-close:hover[b-krg5xgj5p4],
    .schema-banner-close:focus-visible[b-krg5xgj5p4] {
        background: var(--op-bar-hover);
    }

@media (max-width: 720px) {
    .schema-banner[b-krg5xgj5p4] {
        top: 0.4rem;
        font-size: 0.8rem;
    }
}
/* /Components/Viewer/SelectedElementPanel.razor.rz.scp.css */
/* narrow panel: the value type column gives its room to the values (widen the panel to see it) */
.selected-element[b-msrhmcyetx] {
    container-type: inline-size;
}

/* ── no selection ── */
.panel-empty[b-msrhmcyetx] {
    margin: 2.5rem auto 0;
    max-width: 16rem;
    text-align: center;
}

.panel-empty-icon[b-msrhmcyetx] {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.6rem;
    fill: none;
    stroke: var(--op-text-3);
    stroke-width: 1.3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

    .panel-empty-icon .pe-block[b-msrhmcyetx] {
        fill: var(--op-surface-2);
    }

    .panel-empty-icon .pe-cursor[b-msrhmcyetx] {
        fill: var(--op-accent);
        stroke: var(--op-surface);
        stroke-width: 1.2;
    }

.panel-empty-title[b-msrhmcyetx] {
    margin: 0 0 0.2rem;
    font-weight: 600;
    color: var(--op-text);
}

.panel-empty-text[b-msrhmcyetx] {
    margin: 0;
    font-size: var(--op-text-sm);
    color: var(--op-text-2);
}

/* ── header: class, id, name, GlobalId, model ── */
.back-link[b-msrhmcyetx] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-bottom: 0.4rem !important;
    padding: 0.1rem 0.5rem !important;
    border-radius: var(--op-radius-pill);
    background: var(--op-surface-2);
    font-size: var(--op-text-xs);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .back-link:hover[b-msrhmcyetx] {
        background: var(--op-hover);
        text-decoration: none;
    }

.sel-header[b-msrhmcyetx] {
    padding-bottom: 0.1rem;
}

.sel-meta[b-msrhmcyetx] {
    font-size: var(--op-text-xs);
    min-width: 0;
}

.ifc-class[b-msrhmcyetx] {
    color: var(--op-text-2);
    overflow-wrap: anywhere;
}

.sel-id[b-msrhmcyetx],
.sel-tag[b-msrhmcyetx] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: var(--op-radius-sm);
    font-size: var(--op-text-2xs);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.sel-id[b-msrhmcyetx] {
    background: var(--op-surface-3);
    color: var(--op-text-2);
    cursor: help;
}

.sel-tag[b-msrhmcyetx] {
    background: var(--op-accent-soft);
    color: var(--op-accent);
}

.sel-name[b-msrhmcyetx] {
    margin: 0.25rem 0 0.15rem;
    font-size: var(--op-text-lg);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.sel-count[b-msrhmcyetx] {
    color: var(--op-accent);
    font-variant-numeric: tabular-nums;
}

.sel-gid[b-msrhmcyetx] {
    font-size: var(--op-text-xs);
    color: var(--op-text-3);
    min-width: 0;
}

.global-id[b-msrhmcyetx] {
    user-select: all;
}

.gid-copy[b-msrhmcyetx] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 0;
    border-radius: var(--op-radius-sm);
    background: transparent;
    color: var(--op-text-3);
    cursor: pointer;
}

    .gid-copy:hover[b-msrhmcyetx] {
        background: var(--op-hover);
        color: var(--op-text);
    }

    .gid-copy .op-icon[b-msrhmcyetx] {
        width: 0.9rem;
        height: 0.9rem;
    }

.sel-model[b-msrhmcyetx] {
    font-size: var(--op-text-xs);
    color: var(--op-text-2);
}

.no-geometry[b-msrhmcyetx] {
    padding: 0.3rem 0.55rem;
    border-radius: var(--op-radius);
    background: var(--op-surface-2);
    font-size: var(--op-text-xs);
}

/* the model breakdown list is rendered by this component, the class breakdown by ClassBreakdown */
.breakdown[b-msrhmcyetx] {
    font-size: var(--op-text-xs);
}

    .breakdown li[b-msrhmcyetx] {
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
        min-width: 0;
        padding: 0.1rem 0;
    }

    .breakdown .count[b-msrhmcyetx] {
        font-variant-numeric: tabular-nums;
        color: var(--op-text-2);
        flex: 0 0 auto;
    }

/* ── skeleton while the first data arrives (appears only if the wait is noticeable) ── */
.panel-skeleton[b-msrhmcyetx] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.5rem 0;
    animation: panel-skeleton-in-b-msrhmcyetx 1ms linear 180ms both;
}

    .panel-skeleton .placeholder[b-msrhmcyetx] {
        display: block;
        min-height: 0.8rem;
    }

@keyframes panel-skeleton-in-b-msrhmcyetx {
    from { visibility: hidden; }
    to { visibility: visible; }
}

/* ── sections ── */
.panel-section[b-msrhmcyetx] {
    margin: 0;
    border-top: 1px solid var(--op-border);
    padding: 0.4rem 0 0.45rem;
}

    .panel-section > summary[b-msrhmcyetx] {
        font-size: var(--op-text-sm);
        padding: 0.25rem 0;
        color: var(--op-text);
    }

    .panel-section[open] > summary[b-msrhmcyetx] {
        margin-bottom: 0.3rem;
    }

    .panel-section > summary:hover .sec-icon[b-msrhmcyetx] {
        color: var(--op-text-2);
    }

.sec-title[b-msrhmcyetx] {
    min-width: 0;
}

.sec-count[b-msrhmcyetx],
.pset-count[b-msrhmcyetx] {
    margin-left: auto;
    font-size: var(--op-text-2xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--op-text-2);
}

.sec-count[b-msrhmcyetx] {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: var(--op-radius-pill);
    background: var(--op-surface-3);
    text-align: center;
    line-height: 1.15rem;
}

.pset[b-msrhmcyetx] {
    background: var(--op-surface-2);
}

    .pset > summary[b-msrhmcyetx] {
        font-size: var(--op-text-sm);
    }

.pset-name[b-msrhmcyetx] {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pset-count[b-msrhmcyetx] {
    color: var(--op-text-3);
}

.rel-breadcrumb[b-msrhmcyetx] {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-item-padding-x: 0.35rem;
    font-size: var(--op-text-sm);
    row-gap: 0.15rem;
}

/* ── property tables: label / value / type, hairline separators ── */
.selected-element[b-msrhmcyetx]  .varies {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: var(--op-radius-sm);
    background: color-mix(in srgb, var(--op-accent) 18%, transparent);
    color: var(--op-accent);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
}

.selected-element[b-msrhmcyetx]  table {
    font-size: var(--op-text-sm);
    --bs-table-bg: transparent;
    margin-bottom: 0.15rem !important;
}

    .selected-element[b-msrhmcyetx]  table > tbody > tr > * {
        padding: 0.28rem 0.4rem 0.28rem 0;
        border-bottom: 1px solid var(--op-border);
        vertical-align: baseline;
    }

    .selected-element[b-msrhmcyetx]  table > tbody > tr:last-child > * {
        border-bottom-width: 0;
    }

    .selected-element[b-msrhmcyetx]  table th {
        font-weight: 400;
        color: var(--op-text-2);
        width: 42%;
        overflow-wrap: anywhere;
    }

    .selected-element[b-msrhmcyetx]  table td:nth-child(3) {
        width: 1%;
        white-space: nowrap;
        padding-right: 0;
        font-family: var(--op-font-mono);
        font-size: var(--op-text-2xs);
        color: var(--op-text-3);
    }

.selected-element[b-msrhmcyetx]  .complex-property {
    background: color-mix(in srgb, var(--op-text) 4%, transparent);
}

@container (max-width: 24rem) {
    .selected-element[b-msrhmcyetx]  table td:nth-child(3),
    .selected-element[b-msrhmcyetx]  table th:nth-child(3) {
        display: none;
    }
}

/* ── hooks of the plugins (docs/20 §5.1): the bar of their commands, the ⋯ of a set ── */
.plugin-panel-actions[b-msrhmcyetx] {
    padding-bottom: 0.1rem;
}

.set-more[b-msrhmcyetx] {
    margin-left: 0.3rem;
    padding: 0 0.3rem;
    border: 0;
    border-radius: var(--op-radius-sm);
    background: transparent;
    color: var(--op-text-3);
    line-height: 1.2;
    opacity: 0;
    cursor: pointer;
}

    .pset > summary:hover .set-more[b-msrhmcyetx],
    .pset > summary:focus-within .set-more[b-msrhmcyetx],
    .set-more:focus-visible[b-msrhmcyetx] {
        opacity: 1;
    }

    .set-more:hover[b-msrhmcyetx] {
        background: var(--op-hover);
        color: var(--op-text);
    }

@media (hover: none) {
    .set-more[b-msrhmcyetx] {
        opacity: 1;
    }
}
/* /Components/Viewer/TreeViewPicker.razor.rz.scp.css */
.tree-view-picker[b-8of2b03npd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

    /* the drop-down takes the room left by the buttons; below ~8rem the buttons wrap to a second line */
    .tree-view-picker .form-select[b-8of2b03npd] {
        flex: 1 1 8rem;
        min-width: 0;
        height: 1.9rem;
        font-weight: 500;
    }

.tree-view-actions[b-8of2b03npd] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    margin-left: auto; /* wrapped under the drop-down: on the right */
}

.icon-button[b-8of2b03npd] {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .icon-button .op-icon[b-8of2b03npd] {
        width: 1.05rem;
        height: 1.05rem;
    }

    .icon-button .spinner-border-sm[b-8of2b03npd] {
        width: 0.85rem;
        height: 0.85rem;
        border-width: 0.15em;
    }
/* /Components/Viewer/ViewerActionBar.razor.rz.scp.css */
/* Full-stage layer (click-through) that is also the size container of the bar: the bar adapts to the size of the
   stage, which changes with the side panels, not only with the window. */
.viewer-actions-layer[b-bfh4duh91g] {
    position: absolute;
    inset: 0;
    z-index: 4; /* below the panel edge tabs (5) and the resizers (6) */
    pointer-events: none;
    container-type: size;
    container-name: viewer-stage;
}

.viewer-actions[b-bfh4duh91g] {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    max-width: calc(100% - 3rem); /* keeps clear of the edge tabs on both sides */
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-pill);
    /* opaque enough to read over any model; no backdrop-filter: it would re-blur the WebGL canvas on every frame */
    background: var(--op-float-bg);
    box-shadow: var(--op-shadow-float);
    pointer-events: auto;
    white-space: nowrap;
}

.viewer-action[b-bfh4duh91g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.1rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--op-float-fg);
    font-size: var(--op-text-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--op-dur) var(--op-ease), color var(--op-dur) var(--op-ease);
}

    .viewer-action:hover:not(:disabled)[b-bfh4duh91g] {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

    .viewer-action:active:not(:disabled)[b-bfh4duh91g] {
        background: var(--op-active-bg);
    }

    .viewer-action:focus-visible[b-bfh4duh91g] {
        outline: 2px solid var(--op-focus);
        outline-offset: 1px;
    }

    .viewer-action:disabled[b-bfh4duh91g] {
        color: color-mix(in srgb, var(--op-float-fg) 34%, transparent);
        cursor: default;
    }

.viewer-action-icon[b-bfh4duh91g] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    .viewer-action-icon[b-bfh4duh91g]  .fill {
        fill: currentColor;
        fill-opacity: 0.55;
    }

.viewer-action-badge[b-bfh4duh91g] {
    min-width: 1.15rem;
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
    background: var(--op-accent-fill);
    color: var(--op-on-accent);
    font-size: var(--op-text-2xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.viewer-actions-sep[b-bfh4duh91g] {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 0.35rem 0.2rem;
    background: var(--op-border-strong);
}

/* narrow stage: icons only (full names stay in the tooltips and in the accessible names). The labels take about 760 px (the
   seven actions measured), plus the 3rem kept clear of the edge tabs: below 880 px the bar would spill out of its rounded
   background (the last button, «Deseleziona», outside it) */
@container viewer-stage (max-width: 880px) {
    .viewer-action[b-bfh4duh91g] {
        width: 2.3rem;
        padding: 0;
        justify-content: center;
        position: relative;
    }

    .viewer-action-label[b-bfh4duh91g] {
        display: none;
    }

    .viewer-action-badge[b-bfh4duh91g] {
        position: absolute;
        top: -0.2rem;
        right: -0.2rem;
        min-width: 1rem;
        padding: 0.1rem 0.25rem;
        font-size: 0.625rem;
    }
}

@container viewer-stage (max-width: 360px) {
    .viewer-actions[b-bfh4duh91g] {
        bottom: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .viewer-action[b-bfh4duh91g] {
        width: 2rem;
        height: 2rem;
    }

    .viewer-actions-sep[b-bfh4duh91g] {
        margin: 0.35rem 0.05rem;
    }
}

/* a tool waiting for the user (the zoom window): lit as the tools of the menu */
.viewer-action.is-active[b-bfh4duh91g] {
    background: var(--op-active-bg);
    color: var(--op-active-fg);
}

/* a very short stage (phones with panels above and below): 0.5rem from the edge, as the menu of the tools on top, so the two
   bars do not touch */
@container viewer-stage (max-height: 160px) {
    .viewer-actions[b-bfh4duh91g] {
        bottom: 0.5rem;
    }
}
/* /Components/Viewer/ViewerFrame.razor.rz.scp.css */
.viewer-bar[b-4ey0tqwq44] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0.6rem 0.3rem 0.75rem;
    background: var(--op-bar);
    border-bottom: 1px solid var(--op-border);
    min-height: 2.75rem;
    flex: 0 0 auto;
    font-size: var(--op-text-md);
}

.viewer-brand[b-4ey0tqwq44] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    margin: -0.3rem -0.4rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--op-radius);
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--op-text-strong);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

    .viewer-brand:hover[b-4ey0tqwq44],
    .viewer-brand:focus-visible[b-4ey0tqwq44] {
        color: var(--op-text-strong);
        background: var(--op-bar-hover);
    }

/* the back chevron shows on touch / narrow screens, where the brand is the way back */
.viewer-back-glyph[b-4ey0tqwq44] {
    display: none;
    margin-right: -0.2rem;
    font-size: 1.35rem;
    line-height: 1;
}

@media (max-width: 720px), (pointer: coarse), (display-mode: standalone) {
    .viewer-back-glyph[b-4ey0tqwq44] {
        display: inline;
    }
}

.viewer-bar-sep[b-4ey0tqwq44] {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 0.35rem 0;
    background: var(--op-border-strong);
}

.viewer-title[b-4ey0tqwq44] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--op-text);
}

/* geometry progress / scene size: gives way (clipped) before the tools when the bar is too narrow */
.viewer-status[b-4ey0tqwq44] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: var(--op-text-2);
}

.viewer-status:empty[b-4ey0tqwq44] {
    display: none;
}

.viewer-tools[b-4ey0tqwq44] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
}

    .viewer-tools[b-4ey0tqwq44]  .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

/* separator between groups of toolbar buttons (rendered by the pages) */
.viewer-tools[b-4ey0tqwq44]  .toolbar-sep {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 0.2rem 0.2rem;
    background: var(--op-border-strong);
}

.viewer-body[b-4ey0tqwq44] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.viewer-stage[b-4ey0tqwq44] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: var(--op-stage-bg);
}

/* the stage with, while the side-by-side view is open (docs/30 §15.1), the left view and the divider before it; the share of the left view is
   --side-left (set by the divider, js side-by-side.js of Opera.Viewer) */
.viewer-split[b-4ey0tqwq44] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    --side-left: 50%;
}

.side-divider[b-4ey0tqwq44] {
    position: relative;
    z-index: 6;
    flex: 0 0 6px;
    cursor: col-resize;
    background: var(--op-border-strong);
    touch-action: none;
}

    .side-divider:hover[b-4ey0tqwq44],
    .side-divider:focus-visible[b-4ey0tqwq44],
    .side-divider.is-dragging[b-4ey0tqwq44] {
        background: var(--op-accent, #4c8dff);
        outline: none;
    }

/* drawing statistics of the viewer in the top-left corner: the bottom of the stage hosts the action bar */
.viewer-stage[b-4ey0tqwq44]  .opera-viewer-stats {
    top: 0.6rem;
    bottom: auto;
    left: 0.75rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius);
    font-family: var(--op-font-mono);
}

.viewer-panel[b-4ey0tqwq44] {
    flex: 0 0 var(--panel-right-width, 22rem);
    max-width: 60vw;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0; /* the width comes from the flex basis, never from the content (long tree rows) */
    overflow: hidden;
    background: var(--op-surface);
    border-left: 1px solid var(--op-border);
    font-size: var(--op-text-md);
}

/* compact header of a side panel: title and the button that collapses it (next to the stage) */
.panel-header[b-4ey0tqwq44] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.1rem;
    padding: 0.2rem 0.35rem 0.2rem 0.8rem;
    background: var(--op-bar-2);
    border-bottom: 1px solid var(--op-border);
}

.panel-title[b-4ey0tqwq44] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--op-text-2xs);
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--op-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-collapse[b-4ey0tqwq44] {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: var(--op-radius-sm);
    background: transparent;
    color: var(--op-text-2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--op-dur) var(--op-ease), color var(--op-dur) var(--op-ease);
}

.panel-collapse:hover[b-4ey0tqwq44],
.panel-collapse:focus-visible[b-4ey0tqwq44] {
    background: var(--op-bar-hover);
    color: var(--op-text);
}

.panel-collapse:focus-visible[b-4ey0tqwq44] {
    outline: 2px solid var(--op-focus);
    outline-offset: -2px;
}

.glyph-narrow[b-4ey0tqwq44] {
    display: none;
}

/* right panel: the collapse button on the stage side (left) */
.viewer-panel-right .panel-header[b-4ey0tqwq44] {
    padding: 0.2rem 0.8rem 0.2rem 0.35rem;
}

.viewer-panel-right .panel-collapse[b-4ey0tqwq44] {
    order: -1;
}

.panel-body[b-4ey0tqwq44] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.7rem 0.9rem 0.9rem;
    scrollbar-width: thin;
}

/* the left panel body is filled by the tree panel (picker and search on top, the tree scrolls by itself) */
.viewer-panel-left .panel-body[b-4ey0tqwq44] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.55rem 0.6rem 0.5rem;
}

/* a panel of a plugin on the left: its own scrolling list (pk-rows) takes the rest of the height; content taller than
   the panel scrolls the whole body */
.viewer-panel-left .panel-body.plugin-panel[b-4ey0tqwq44] {
    overflow-y: auto;
    scrollbar-width: thin;
}

/* toggles of the side panels in the top bar: only in the narrow layout */
.narrow-toggles[b-4ey0tqwq44] {
    display: none;
    align-items: center;
    gap: 0.375rem;
}

.narrow-toggles .btn[b-4ey0tqwq44] {
    width: 2rem;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}

@media (max-width: 720px) {
    .viewer-body[b-4ey0tqwq44] {
        flex-direction: column;
    }

    /* without it the canvas size keeps the stage tall and pushes the right panel (and the action bar) off screen */
    .viewer-stage[b-4ey0tqwq44],
    .viewer-split[b-4ey0tqwq44] {
        min-height: 0;
    }

    .viewer-panel[b-4ey0tqwq44] {
        flex: 0 0 40%;
        max-width: none;
        border-left: 0;
        border-top: 1px solid var(--op-border);
    }

    /* a short stage: the statistics under the row of the tool menu and above the action bar, scrolled with a finger
       when they do not fit */
    .viewer-stage[b-4ey0tqwq44]  .opera-viewer-stats {
        top: 3.4rem;
        left: 0.5rem;
        max-height: calc(100% - 7.6rem);
        overflow: auto;
        pointer-events: auto;
        overscroll-behavior: contain;
    }

    /* the toolbar content is rendered by the pages: ::deep reaches it */
    .viewer-tools[b-4ey0tqwq44]  .btn-label {
        display: none;
    }

    .viewer-bar-sep[b-4ey0tqwq44],
    .viewer-brand-name[b-4ey0tqwq44] {
        display: none;
    }
}

.viewer-panel-left[b-4ey0tqwq44] {
    flex: 0 0 var(--panel-left-width, 20rem);
    border-left: 0;
    border-right: 1px solid var(--op-border);
}

/* drag handles between the panels and the stage (they overlap the panel border, taking no layout space) */
.panel-resizer[b-4ey0tqwq44] {
    position: relative;
    z-index: 6; /* above the edge tabs, which it overlaps by 3px */
    flex: 0 0 6px;
    margin: 0 -3px;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
    transition: background-color var(--op-dur) var(--op-ease);
}

.panel-resizer:hover[b-4ey0tqwq44],
.panel-resizer:focus-visible[b-4ey0tqwq44],
.panel-resizing .panel-resizer[b-4ey0tqwq44] {
    background: color-mix(in srgb, var(--op-accent) 60%, transparent);
    outline: none;
}

.panel-resizing[b-4ey0tqwq44] {
    cursor: col-resize;
    user-select: none;
}

/* a side shows one panel at a time: the core one stays alive (hidden) while a plugin panel is shown */
.panel-body.is-hidden[b-4ey0tqwq44] {
    display: none;
}

/* the floating panels of the plugins over the stage: top left, one under the other */
.plugin-floats[b-4ey0tqwq44] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3; /* under the tool layer (4): a menu of the tools opens over them */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: min(26rem, calc(100% - 6rem));
    max-height: calc(100% - 6rem);
    overflow: auto;
    pointer-events: none;
}

/* «Prima / Dopo» on a phone (docs/30 §15.1) showing «Prima»: the left view covers the stage (z-index 5); the floating panels of the plugins (the
   navigator of a comparison), the context chip and the error of a plugin stay over it */
.viewer-split.shows-left .plugin-floats[b-4ey0tqwq44],
.viewer-split.shows-left .viewer-context-chip[b-4ey0tqwq44],
.viewer-split.shows-left .plugin-error[b-4ey0tqwq44] {
    z-index: 6;
}

/* the error of a plugin answering the viewer: top centre of the stage, under the hint of a tool */
.plugin-error[b-4ey0tqwq44] {
    position: absolute;
    top: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(36rem, calc(100% - 2rem));
    padding: 0.35rem 0.4rem 0.35rem 0.8rem;
    border: 1px solid var(--op-danger-dot);
    border-radius: var(--op-radius-lg, 0.75rem);
    background: var(--op-float-bg);
    color: var(--op-float-fg);
    box-shadow: var(--op-shadow-float);
    font-size: var(--op-text-xs, 0.8125rem);
    line-height: 1.35;
}

.plugin-error-close[b-4ey0tqwq44] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}

    .plugin-error-close:hover[b-4ey0tqwq44],
    .plugin-error-close:focus-visible[b-4ey0tqwq44] {
        background: var(--op-bar-hover);
    }

/* the context of a federation (docs/24 §6): a chip at the top of the stage while the other members are loaded around the model */
.viewer-context-chip[b-4ey0tqwq44] {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: min(40rem, calc(100% - 2rem));
    padding: 0.25rem 0.3rem 0.25rem 0.75rem;
    border: 1px solid var(--op-accent, #4c8dff);
    border-radius: 999px;
    background: var(--op-float-bg);
    color: var(--op-float-fg);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.viewer-context-label[b-4ey0tqwq44] {
    font-weight: 600;
}

.viewer-context-note[b-4ey0tqwq44] {
    opacity: 0.8;
}

.viewer-context-close[b-4ey0tqwq44] {
    flex: 0 0 auto;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .viewer-context-close:hover[b-4ey0tqwq44],
    .viewer-context-close:focus-visible[b-4ey0tqwq44] {
        background: var(--op-bar-hover);
    }


    .viewer-context-close:disabled[b-4ey0tqwq44] {
        opacity: 0.6;
        cursor: default;
    }

@media (max-width: 720px) {
    .viewer-panel-left[b-4ey0tqwq44] {
        flex: 0 0 35%;
        border-right: 0;
        border-bottom: 1px solid var(--op-border);
    }

    .panel-resizer[b-4ey0tqwq44] {
        display: none;
    }

    .narrow-toggles[b-4ey0tqwq44] {
        display: flex;
    }

    .plugin-floats[b-4ey0tqwq44] {
        left: 0.5rem;
        width: calc(100% - 4.5rem);
    }

    /* stacked layout: the tree panel collapses upwards, the properties panel downwards */
    .glyph-wide[b-4ey0tqwq44] {
        display: none;
    }

    .glyph-narrow[b-4ey0tqwq44] {
        display: inline;
    }
}

/* the window components of a plugin: an element only to name the plugin (the scope «window» of its shortcuts) */
.plugin-window-host[b-4ey0tqwq44] {
    display: contents;
}

/* the theme switch (Sistema / Chiaro / Scuro) at the right end of the bar: on desktop only, as the wide layout (a phone or a touch
   tablet chooses it in «Impostazioni → Aspetto» of Opera) */
.viewer-bar[b-4ey0tqwq44]  .viewer-bar-theme {
    flex: none;
    margin-left: 0.5rem;
}

@media (max-width: 720px), (pointer: coarse), (display-mode: standalone) {
    .viewer-bar[b-4ey0tqwq44]  .viewer-bar-theme {
        display: none;
    }
}

/* the panel «Collaborazione» on a phone (docs/38 §3): a full page over the viewer, closed by the button of its header */
@media (max-width: 720px) {
    .viewer-panel-right.is-collab[b-4ey0tqwq44] {
        position: fixed;
        inset: 0;
        z-index: 1030;
        flex: none;
        width: 100%;
        max-width: none;
        height: 100%;
        border-top: 0;
        background: var(--op-surface);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
/* /Components/Viewer/ViewerSettingsPanel.razor.rz.scp.css */
/* settings of the viewer in the right panel (nothing selected): groups like the property sections */
.viewer-settings[b-0ds4v2qv5p] {
    container-type: inline-size;
}

.vs-header[b-0ds4v2qv5p] {
    margin-bottom: 0.35rem;
}

.vs-title[b-0ds4v2qv5p] {
    margin: 0;
    font-size: var(--op-text-md, 1rem);
    font-weight: 600;
    color: var(--op-text);
}

.vs-hint[b-0ds4v2qv5p] {
    margin: 0.15rem 0 0;
    font-size: var(--op-text-xs);
    color: var(--op-text-2);
}

/* the row «Tema»: hidden on desktop, where the bar of the viewer has the switch (the complement of its rule in ViewerFrame.razor.css) */
.vs-theme[b-0ds4v2qv5p] {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 720px), (pointer: coarse), (display-mode: standalone) {
    .vs-theme[b-0ds4v2qv5p] {
        display: flex;
    }
}

.vs-reset-all[b-0ds4v2qv5p],
.vs-reset-group[b-0ds4v2qv5p] {
    font-size: var(--op-text-xs);
    text-decoration: none;
}

.vs-reset-group[b-0ds4v2qv5p] {
    margin-top: 0.15rem;
}

.panel-section[b-0ds4v2qv5p] {
    margin: 0;
    border-top: 1px solid var(--op-border);
    padding: 0.4rem 0 0.45rem;
}

    .panel-section > summary[b-0ds4v2qv5p] {
        font-size: var(--op-text-sm);
        padding: 0.25rem 0;
        color: var(--op-text);
    }

    .panel-section[open] > summary[b-0ds4v2qv5p] {
        margin-bottom: 0.3rem;
    }

    .panel-section > summary:hover .sec-icon[b-0ds4v2qv5p] {
        color: var(--op-text-2);
    }

.sec-title[b-0ds4v2qv5p] {
    min-width: 0;
}

.sec-count[b-0ds4v2qv5p] {
    margin-left: auto;
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: var(--op-radius-pill);
    font-size: var(--op-text-2xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15rem;
    text-align: center;
}

.vs-changed-count[b-0ds4v2qv5p] {
    color: var(--op-accent-fg, var(--op-accent));
    background: var(--op-accent-bg, var(--op-surface-3));
}

.vs-rows[b-0ds4v2qv5p] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-left: 0.2rem;
}

.vs-row[b-0ds4v2qv5p] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-left: 0.45rem;
    border-left: 2px solid transparent;
}

    .vs-row.is-changed[b-0ds4v2qv5p] {
        border-left-color: var(--op-accent);
    }

.vs-label-line[b-0ds4v2qv5p] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.vs-label[b-0ds4v2qv5p] {
    min-width: 0;
    font-size: var(--op-text-sm);
    color: var(--op-text);
}

.vs-value[b-0ds4v2qv5p] {
    margin-left: auto;
    font-size: var(--op-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--op-text-2);
    white-space: nowrap;
}

.vs-reset[b-0ds4v2qv5p] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 0;
    border-radius: var(--op-radius-sm, 4px);
    background: transparent;
    color: var(--op-text-3);
}

    .vs-reset:hover[b-0ds4v2qv5p],
    .vs-reset:focus-visible[b-0ds4v2qv5p] {
        color: var(--op-accent);
        background: var(--op-surface-2);
    }

    .vs-reset svg[b-0ds4v2qv5p] {
        width: 0.85rem;
        height: 0.85rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.vs-switch[b-0ds4v2qv5p] {
    padding-left: 2.25em;
    min-height: 0;
}

.vs-color[b-0ds4v2qv5p] {
    width: 2.4rem;
    height: 1.6rem;
    padding: 0.15rem;
}

.vs-range[b-0ds4v2qv5p] {
    height: 1.1rem;
}

.vs-select[b-0ds4v2qv5p] {
    max-width: 14rem;
}

.vs-datetime[b-0ds4v2qv5p] {
    width: auto;
    max-width: 10rem;
}

.vs-sun[b-0ds4v2qv5p] {
    margin: 0;
    padding: 0.3rem 0.45rem;
    border-radius: var(--op-radius-sm, 4px);
    background: var(--op-surface-2);
    font-size: var(--op-text-xs);
    color: var(--op-text-2);
}

.vs-setting-hint[b-0ds4v2qv5p] {
    margin: 0;
    font-size: var(--op-text-2xs, 0.7rem);
    line-height: 1.3;
    color: var(--op-text-3);
}

/* a setting without effect on the scene as it is now: dimmed, disabled, the reason in place of the hint */
.vs-row.is-inactive .vs-label[b-0ds4v2qv5p],
.vs-row.is-inactive .vs-value[b-0ds4v2qv5p],
.vs-row.is-inactive input[b-0ds4v2qv5p],
.vs-row.is-inactive select[b-0ds4v2qv5p] {
    opacity: 0.5;
}

.vs-inactive-note[b-0ds4v2qv5p] {
    font-style: italic;
}

.panel-skeleton[b-0ds4v2qv5p] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
/* /Components/Viewer/ViewerSideBySide.razor.rz.scp.css */
/* The left view of the side-by-side view (docs/30 §15.1): next to the stage, its share the variable --side-left of the frame (the divider);
   on a phone (Toggle) over the stage, hidden while the switch shows «Dopo» (kept alive: the same camera when it comes back). */
.side-pane[b-44d06sngml] {
    position: relative;
    flex: 0 0 var(--side-left, 50%);
    min-width: 0;
    display: flex;
    align-items: stretch;
    background: var(--op-stage-bg);
}

    .side-pane.is-toggle[b-44d06sngml] {
        position: absolute;
        inset: 0;
        z-index: 5;
    }

    .side-pane.is-behind[b-44d06sngml] {
        visibility: hidden;
        pointer-events: none;
    }

.side-label[b-44d06sngml] {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.2rem 0.65rem 0.2rem 0.3rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    background: var(--op-float-bg);
    color: var(--op-float-fg);
    font-size: 0.8125rem;
    line-height: 1.3;
    pointer-events: auto;
}

.side-label-tag[b-44d06sngml] {
    flex: 0 0 auto;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #8a5cf6;
    color: #fff;
    font-weight: 600;
}

.side-label-text[b-44d06sngml] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.side-label-warn[b-44d06sngml] {
    color: var(--op-warning-fg);
}

.side-close[b-44d06sngml] {
    position: absolute;
    top: 0.6rem;
    left: 0.75rem;
    z-index: 4;
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    background: var(--op-float-bg);
    color: var(--op-float-fg);
    font-size: 0.8125rem;
    cursor: pointer;
}

    .side-close:hover[b-44d06sngml],
    .side-close:focus-visible[b-44d06sngml] {
        background: var(--op-bar-hover);
    }
/* /Components/Viewer/ViewerSideBySideBar.razor.rz.scp.css */
/* The bar of the side-by-side view (docs/30 §15.1): the switch «Prima / Dopo» at the top of the stage on a phone, the label of the right view
   otherwise. */
.side-bar[b-la4okusqqk] {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.25rem 0.3rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    background: var(--op-float-bg);
    color: var(--op-float-fg);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.side-switch[b-la4okusqqk] {
    display: inline-flex;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    overflow: hidden;
}

.side-switch-btn[b-la4okusqqk] {
    padding: 0.15rem 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .side-switch-btn.is-active[b-la4okusqqk] {
        background: var(--op-accent, #4c8dff);
        color: var(--op-on-accent);
        font-weight: 600;
    }

.side-bar-label[b-la4okusqqk] {
    max-width: 14rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.side-bar-close[b-la4okusqqk] {
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .side-bar-close:hover[b-la4okusqqk],
    .side-bar-close:focus-visible[b-la4okusqqk],
    .side-switch-btn:not(.is-active):hover[b-la4okusqqk] {
        background: var(--op-bar-hover);
    }

.side-right-label[b-la4okusqqk] {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 40%;
    padding: 0.2rem 0.65rem 0.2rem 0.3rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    background: var(--op-float-bg);
    color: var(--op-float-fg);
    font-size: 0.8125rem;
    line-height: 1.3;
    pointer-events: none;
}

.side-right-tag[b-la4okusqqk] {
    flex: 0 0 auto;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--op-accent, #4c8dff);
    color: var(--op-on-accent);
    font-weight: 600;
}

.side-right-text[b-la4okusqqk] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* /Components/Viewer/ViewerToolBar.razor.rz.scp.css */
/* Full-stage layer (click-through) holding the vertical tool menu (right edge, centred vertically) and the colour legend
   (bottom left). Same look as the action bar at the bottom. */
.viewer-tools-layer[b-u2zxror81x] {
    position: absolute;
    inset: 0;
    z-index: 4; /* below the panel edge tabs (5) and the resizers (6) */
    pointer-events: none;
    /* the size of the stage: a short stage (stacked panels of a narrow window) gets a horizontal menu */
    container-type: size;
    container-name: tools-stage;
}

.viewer-toolmenu[b-u2zxror81x] {
    position: absolute;
    /* on the right edge of the stage, clear of the right edge tab, centred in the band between the orientation cube and the
       action bar (--tool-menu-mid, measured by plugin-hooks.js; the middle of the stage before); a stage too short puts it in
       a row at the top (container query below) */
    top: var(--tool-menu-mid, 50%);
    right: 1.5rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 1.4rem;
    /* opaque enough to read over any model; no backdrop-filter: it would re-blur the WebGL canvas on every frame */
    background: var(--op-float-bg);
    box-shadow: var(--op-shadow-float);
    pointer-events: auto;
}

.viewer-tool[b-u2zxror81x] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--op-text);
    cursor: pointer;
    transition: background-color var(--op-dur) var(--op-ease), color var(--op-dur) var(--op-ease);
}

    .viewer-tool:hover[b-u2zxror81x] {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

    .viewer-tool:focus-visible[b-u2zxror81x] {
        outline: 2px solid var(--op-focus);
        outline-offset: 1px;
    }

    .viewer-tool.is-open[b-u2zxror81x] {
        background: var(--op-surface-3);
    }

    /* a tool that is on: accent fill, a dot on the left edge */
    .viewer-tool.is-active[b-u2zxror81x] {
        background: var(--op-active-bg);
        color: var(--op-active-fg);
    }

        .viewer-tool.is-active[b-u2zxror81x]::after {
            content: "";
            position: absolute;
            left: -0.2rem;
            top: 50%;
            width: 0.3rem;
            height: 0.3rem;
            margin-top: -0.15rem;
            border-radius: 50%;
            background: var(--op-accent, #5b97ff);
        }

.viewer-tool-icon[b-u2zxror81x] {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    .viewer-tool-icon[b-u2zxror81x]  .fill {
        fill: currentColor;
        fill-opacity: 0.55;
    }

    .viewer-tool-icon[b-u2zxror81x]  .cut {
        stroke: var(--op-accent, #5b97ff);
        stroke-width: 1.5;
    }

/* options of a tool: on the left of the menu, centred on it (so within the stage) */
.viewer-flyout[b-u2zxror81x] {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.5rem);
    transform: translateY(-50%);
    width: 17.5rem;
    max-height: calc(100cqh - 2rem);
    overflow: auto;
    padding: 0.6rem 0.75rem 0.75rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-lg, 0.75rem);
    background: var(--op-float-bg);
    box-shadow: var(--op-shadow-float);
    color: var(--op-text);
    font-size: var(--op-text-sm);
    pointer-events: auto;
}

/* the options as a sheet at the bottom of the screen (a short stage: the menu in a row at the top), over the page */
.viewer-sheet .viewer-flyout[b-u2zxror81x] {
    position: fixed;
    top: auto;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    transform: none;
    width: auto;
    max-height: min(70vh, 34rem);
    z-index: 1085;
}

.viewer-flyout-header[b-u2zxror81x],
.viewer-legend-header[b-u2zxror81x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.viewer-flyout-title[b-u2zxror81x],
.viewer-legend-title[b-u2zxror81x] {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--op-text-sm);
    font-weight: 600;
    color: var(--op-text-strong);
}

.viewer-flyout-close[b-u2zxror81x] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--op-text-2);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

    .viewer-flyout-close:hover[b-u2zxror81x] {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

.flyout-group-label[b-u2zxror81x] {
    display: block;
    margin: 0.55rem 0 0.3rem;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.flyout-buttons[b-u2zxror81x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.flyout-btn[b-u2zxror81x] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--op-text);
    font-size: var(--op-text-xs);
    cursor: pointer;
}

    .flyout-btn:hover:not(:disabled)[b-u2zxror81x] {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

    .flyout-btn:disabled[b-u2zxror81x] {
        opacity: 0.45;
        cursor: default;
    }

    .flyout-btn.is-primary[b-u2zxror81x] {
        border-color: transparent;
        background: var(--op-accent-fill, #2f6fdb);
        color: var(--op-on-accent);
    }

    .flyout-btn.is-active[b-u2zxror81x] {
        border-color: var(--op-accent, #5b97ff);
        color: var(--op-active-fg);
    }

    .flyout-btn.is-danger[b-u2zxror81x] {
        border-color: var(--op-danger-float-border);
        color: var(--op-danger-fg);
    }

/* options with an icon, one per line (method and options of the selection) */
.flyout-list[b-u2zxror81x] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.flyout-option[b-u2zxror81x] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
    background: transparent;
    color: var(--op-text);
    font-size: var(--op-text-xs);
    text-align: left;
    cursor: pointer;
}

    .flyout-option:hover[b-u2zxror81x] {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

    .flyout-option.is-active[b-u2zxror81x] {
        border-color: var(--op-accent, #5b97ff);
        background: var(--op-active-bg);
        color: var(--op-active-fg);
    }

    .flyout-option:focus-visible[b-u2zxror81x] {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
    }

.flyout-hint[b-u2zxror81x] {
    margin: 0.5rem 0 0;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    line-height: 1.35;
}

    .flyout-hint.is-attention[b-u2zxror81x] {
        color: var(--op-warning-fg);
    }

.flyout-switches[b-u2zxror81x] {
    margin-top: 0.6rem;
}

    .flyout-switches[b-u2zxror81x]  .tool-switch {
        margin-bottom: 0.2rem;
        font-size: var(--op-text-xs);
    }

.flyout-range-label[b-u2zxror81x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.flyout-range-value[b-u2zxror81x] {
    color: var(--op-text);
    font-variant-numeric: tabular-nums;
}

.flyout-row[b-u2zxror81x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

    .flyout-row label[b-u2zxror81x] {
        flex: 0 0 5rem;
        color: var(--op-text-2);
        font-size: var(--op-text-xs);
    }

/* walk mode: the panel of the commands (top left, collapsible) and the toast of a surface that is not walkable */
.walk-panel[b-u2zxror81x] {
    position: absolute;
    top: 0.75rem;
    left: 1.5rem;
    width: min(54rem, calc(100% - 3rem));
    max-height: calc(100cqh - 6rem);
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0.55rem 0.55rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-lg, 0.75rem);
    background: var(--op-float-bg);
    box-shadow: var(--op-shadow-float);
    color: var(--op-text);
    pointer-events: auto;
}

    .walk-panel.is-collapsed[b-u2zxror81x] {
        width: auto;
    }

.walk-panel-bar[b-u2zxror81x] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.walk-panel-title[b-u2zxror81x] {
    flex: 1 1 auto;
    margin: 0.3rem 0 0 0.15rem;
    font-size: var(--op-text-sm, 0.85rem);
    font-weight: 600;
}

.walk-lock[b-u2zxror81x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.walk-btn[b-u2zxror81x] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 2rem;
    height: 2rem;
    justify-content: center;
    padding: 0 0.45rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
    background: transparent;
    color: var(--op-text);
    font-size: var(--op-text-xs);
    cursor: pointer;
}

    .walk-btn:hover[b-u2zxror81x] {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

    .walk-btn.is-active[b-u2zxror81x] {
        border-color: var(--op-accent, #5b97ff);
        background: var(--op-active-bg);
        color: var(--op-active-fg);
    }

.walk-esc[b-u2zxror81x] {
    color: var(--op-accent, #5b97ff);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    white-space: nowrap;
}

    .walk-esc.is-denied[b-u2zxror81x] {
        color: var(--op-danger-fg);
        cursor: help;
    }

.walk-keys[b-u2zxror81x] {
    /* three columns of commands: wide and short, for desktop screens with little height */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.15rem 0.9rem;
    margin: 0.5rem 0 0;
    overflow: auto;
    font-size: var(--op-text-xs);
}

.walk-key[b-u2zxror81x] {
    display: grid;
    grid-template-columns: minmax(4.6rem, max-content) minmax(0, 1fr);
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.2rem 0;
    border-top: 1px solid var(--op-border);
}

    .walk-key dt[b-u2zxror81x] {
        margin: 0;
        font-weight: 400;
        white-space: nowrap;
    }

    .walk-key dd[b-u2zxror81x] {
        margin: 0;
        color: var(--op-text-2);
        line-height: 1.3;
    }

    .walk-keys kbd[b-u2zxror81x] {
        display: inline-block;
        margin: 0 0.2rem 0.15rem 0;
        padding: 0.05rem 0.35rem;
        border: 1px solid var(--op-border-strong);
        border-radius: 0.3rem;
        background: var(--op-surface-3);
        color: var(--op-text-strong);
        font-family: inherit;
        font-size: var(--op-text-2xs, 0.7rem);
    }

.viewer-toast[b-u2zxror81x] {
    position: absolute;
    top: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--op-danger-float-border);
    border-radius: var(--op-radius-pill, 999px);
    background: var(--op-danger-float-bg);
    color: var(--op-danger-float-fg);
    font-size: var(--op-text-xs);
    pointer-events: none;
    animation: viewer-toast-in-b-u2zxror81x 0.15s ease-out;
}

@keyframes viewer-toast-in-b-u2zxror81x {
    from { opacity: 0; transform: translate(-50%, -0.3rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.viewer-tool-hint.is-attention[b-u2zxror81x] {
    border-color: var(--op-accent, #5b97ff);
    color: var(--op-text-strong);
}

/* hint of a mode that changes the mouse (selection by window): top centre of the stage */
.viewer-tool-hint[b-u2zxror81x] {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(46rem, calc(100% - 20rem));
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-pill, 999px);
    background: var(--op-float-bg);
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
}

    .viewer-tool-hint strong[b-u2zxror81x] {
        color: var(--op-text-strong);
        font-weight: 600;
    }

@container tools-stage (max-width: 720px) {
    .viewer-tool-hint[b-u2zxror81x] {
        top: auto;
        bottom: 4rem;
        max-width: calc(100% - 2rem);
    }
}

/* legend of the colour-by tool: bottom left, above the action bar's height */
.viewer-legend[b-u2zxror81x] {
    position: absolute;
    left: 1.5rem;
    bottom: 4.25rem;
    width: 16rem;
    max-width: calc(100% - 3rem);
    max-height: 45%;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.6rem 0.4rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-lg, 0.75rem);
    background: var(--op-float-bg);
    box-shadow: var(--op-shadow-float);
    color: var(--op-text);
    pointer-events: auto;
}

.viewer-legend-list[b-u2zxror81x] {
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
    font-size: var(--op-text-xs);
}

    .viewer-legend-list li[b-u2zxror81x] {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.15rem 0;
    }

.viewer-legend-swatch[b-u2zxror81x] {
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--op-text) 20%, transparent);
}

.viewer-legend-label[b-u2zxror81x] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-legend-count[b-u2zxror81x] {
    flex: 0 0 auto;
    color: var(--op-text-2);
    font-variant-numeric: tabular-nums;
}

/* the menu of phones as far from the edges as the action bar at the bottom (1rem; 0.5rem on a very narrow stage): the user,
   14 October 2026 — the bar on top was closer to the edges than the one below */
@media (max-width: 720px) {
    .viewer-toolmenu[b-u2zxror81x] {
        right: 1rem;
    }

    .viewer-flyout[b-u2zxror81x] {
        width: min(17.5rem, calc(100vw - 5rem));
    }

    .viewer-legend[b-u2zxror81x] {
        left: 0.5rem;
        bottom: 3.75rem;
    }
}

/* short stage (the centred menu would reach the orientation cube or the action bar: eight tools need about 19.5rem, the
   cube and the bar about 8rem and 4rem): the menu in a row at the top left, as long as the room before the orientation cube
   (the buttons that do not fit under «⋯»), the options under it */
@container tools-stage (max-height: 600px) {
    .viewer-toolmenu[b-u2zxror81x] {
        top: 1rem;
        left: 1rem;
        right: auto;
        transform: none;
        flex-direction: row;
    }

    .viewer-tool-hint[b-u2zxror81x] {
        top: auto;
        bottom: 4rem;
    }

    .viewer-tool.is-active[b-u2zxror81x]::after {
        left: 50%;
        top: auto;
        bottom: -0.2rem;
        margin: 0 0 0 -0.15rem;
    }

    .viewer-flyout[b-u2zxror81x] {
        top: calc(100% + 0.4rem);
        left: 0;
        right: auto;
        transform: none;
        max-height: calc(100cqh - 3.75rem);
    }

    .viewer-legend[b-u2zxror81x] {
        bottom: 3.75rem;
        max-height: calc(100cqh - 8rem);
    }
}

/* a desktop window shows the tools in the ribbon under the title bar (ViewerFrame): the vertical menu is for the narrow
   layout only */
@media (min-width: 721px) {
    .viewer-toolmenu[b-u2zxror81x] {
        display: none;
    }
}

/* a very narrow stage: 0.5rem from the edges, as the action bar */
@container tools-stage (max-width: 360px) {
    .viewer-toolmenu[b-u2zxror81x] {
        right: 0.5rem;
    }
}

@container tools-stage (max-width: 360px) and (max-height: 600px) {
    .viewer-toolmenu[b-u2zxror81x] {
        top: 0.5rem;
        left: 0.5rem;
    }
}

@container tools-stage (max-height: 160px) {
    .viewer-toolmenu[b-u2zxror81x] {
        top: 0.5rem;
        left: 0.5rem;
    }
}
/* /Development/DevPointCloud.razor.rz.scp.css */
.pc-page[b-3xxh6xqzp2] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #1b1f26;
    color: #e6e9ef;
}

.pc-toolbar[b-3xxh6xqzp2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8125rem;
}

.pc-field[b-3xxh6xqzp2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

    .pc-field input[b-3xxh6xqzp2] {
        width: 7.5rem;
    }

.pc-status[b-3xxh6xqzp2] {
    margin-left: auto;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pc-stage[b-3xxh6xqzp2] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.pc-picked[b-3xxh6xqzp2] {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    background: rgba(12, 15, 21, 0.82);
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    pointer-events: none;
}

.pc-swatch[b-3xxh6xqzp2] {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    vertical-align: -0.1em;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
    .pc-status[b-3xxh6xqzp2] {
        margin-left: 0;
        flex-basis: 100%;
    }
}