/* /Components/Layout/AppBar.razor.rz.scp.css */
[b-9tnezin9nb] .style-language-flag {
    width: 1.5em;
    height: 1.5em;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
}

[b-9tnezin9nb] .style-notifications-button-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

[b-9tnezin9nb] .style-notifications-bubble {
    position: absolute;
    top: 4px;
    right: 68px; /* was -2px */
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    font-size: 0.65rem;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
    z-index: 20;
    pointer-events: none;
}

/* The icon of the customer next to the title: 32 px, rounded like the favicon */
.appbar-customer-icon[b-9tnezin9nb] {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-j0rzrjusfo],
.components-reconnect-repeated-attempt-visible[b-j0rzrjusfo],
.components-reconnect-failed-visible[b-j0rzrjusfo],
.components-pause-visible[b-j0rzrjusfo],
.components-resume-failed-visible[b-j0rzrjusfo],
.components-rejoining-animation[b-j0rzrjusfo] {
    display: none;
}

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


#components-reconnect-modal[b-j0rzrjusfo] {
    background-color: var(--mud-palette-surface, white);
    color: var(--mud-palette-text-primary, black);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-j0rzrjusfo 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-j0rzrjusfo]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-j0rzrjusfo 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-j0rzrjusfo] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-j0rzrjusfo] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-j0rzrjusfo] {
        background-color: #6b9ed2;
    }

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

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

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

@keyframes components-rejoining-animation-b-j0rzrjusfo {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Jobs/JobDetail.razor.rz.scp.css */
.job-detail-container[b-wjufvjcacc] {
    --job-thumb-size: 250px;
    display: inline-flex;
    flex: 0 0 auto;
}

.job-badge-wrapper[b-wjufvjcacc] {
    display: inline-block;
    width: auto;
    max-width: max-content;
}

.job-image-frame[b-wjufvjcacc] {
    position: relative;
    width: calc(var(--job-thumb-size) * var(--job-zoom-factor, 1));
    height: calc(var(--job-thumb-size) * var(--job-zoom-factor, 1));
    margin: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    background-color: transparent;
    transition: width 120ms cubic-bezier(0.2, 0, 0, 1), height 120ms cubic-bezier(0.2, 0, 0, 1);
}

[b-wjufvjcacc] .job-card-actions {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* A page with a note: a tint of the theme's warning color, readable in light and dark (no fixed yellow) */
[b-wjufvjcacc] .job-card-actions--note {
    background-color: color-mix(in srgb, var(--mud-palette-warning) var(--app-note-tint, 22%), var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

.job-image-loaded[b-wjufvjcacc] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--mud-palette-divider);
    box-sizing: border-box;
    transition: opacity 90ms linear;
}

.job-image-missing[b-wjufvjcacc] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

@media (max-width: 960px) {
    .job-detail-container[b-wjufvjcacc] {
        --job-thumb-size: 190px;
    }
}

@media (max-width: 600px) {
    .job-detail-container[b-wjufvjcacc] {
        --job-thumb-size: 150px;
    }
}

[b-wjufvjcacc] .job-actions-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
}

[b-wjufvjcacc] .job-actions-center {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

    [b-wjufvjcacc] .job-actions-center p {
        margin: 0;
        padding: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

[b-wjufvjcacc] .job-actions-right {
    justify-self: end;
    text-align: right;
}

.job-version-hint[b-wjufvjcacc] {
    display: inline-flex;
}

.job-detail-container[b-wjufvjcacc]  .mud-badge {
    font-size: 1.2rem !important;
    transform: translate(1rem, 1rem) !important;
}

[b-wjufvjcacc] .job-card {
    user-select: none;
    transition: box-shadow 120ms ease-out, outline 120ms ease-out, max-width 120ms ease-out;
    overflow: hidden !important;
    max-width: calc(var(--job-thumb-size) * var(--job-zoom-factor, 1) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
    .job-image-frame[b-wjufvjcacc],
    .job-image-loaded[b-wjufvjcacc],
    [b-wjufvjcacc] .job-card {
        transition: none !important;
    }
}

.job-detail-container[b-wjufvjcacc]  .job-card-selected {
    position: relative;
    background-color: var(--mud-palette-primary-hover) !important;
}

    .job-detail-container[b-wjufvjcacc]  .job-card-selected::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid var(--mud-palette-primary);
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
    }
/* /Components/Pages/Jobs/JobDetails.razor.rz.scp.css */
.style-box-sizing[b-8it7pdm2y7] {
    box-sizing: border-box;
    overflow: hidden;
}

.style-min-size[b-8it7pdm2y7] {
    min-width: 0;
    min-height: 0;
}

.style-scroll-wrapper[b-8it7pdm2y7] {
    position: relative !important;
}

/* Localized floating constraints for the scroll target button anchor */
[b-8it7pdm2y7] .style-scroll-to-top-button {
    position: absolute !important;
    bottom: 16px;
    right: 16px;
    z-index: 10;
}

/* Optional toolbar background tuning to cleanly anchor the utility buttons below the grid area */
.style-horizontal-toolbar[b-8it7pdm2y7] {
    background-color: var(--mud-palette-background-grey) !important;
    border-radius: 4px;
    padding: 0 12px !important;
}

/* Prevents metadata counters from forcing row item layout breaking */
.style-summary-text[b-8it7pdm2y7] {
    font-size: 0.825rem;
    overflow: hidden;
    text-overflow: ellipsis;
}


.style-min-size[b-8it7pdm2y7] {
    min-width: 0;
    min-height: 0;
}

.style-scroll-wrapper[b-8it7pdm2y7] {
    position: relative !important;
}

/* Localized floating constraints for the scroll target button anchor */
[b-8it7pdm2y7] .style-scroll-to-top-button {
    position: absolute !important;
    bottom: 16px;
    right: 16px;
    z-index: 10;
}

/* BOTTOM BAR: groups ("jd-group") that wrap onto more rows when the panel is narrow. Never scrolls sideways.
   Where the groups need more than one row an arrow (AppBarToggle, rules in app.css) folds the bar away. */
.jd-bar[b-8it7pdm2y7] {
    container: jdbar / inline-size;
    flex: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background-color: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.jd-bar-groups[b-8it7pdm2y7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    min-width: 0;
    padding: 12px 16px;
    box-sizing: border-box;
}

/* Pages | signatures: while the signatures are shown the pages grid and its bar stay in the page (their state and scroll position are kept),
   folded to nothing instead of removed */
.jd-view-off[b-8it7pdm2y7] {
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    visibility: hidden !important;
}

/* The two buttons sit at the start of the title row (they share it with the job name, which gives up some space) and are a little smaller than
   the buttons of the bottom bar, so the row stays low */
.jd-view-switch[b-8it7pdm2y7] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}

.jd-view-switch .app-tool-btn[b-8it7pdm2y7] {
    min-width: 36px;
    min-height: 36px;
    padding: 3px;
}

.jd-group[b-8it7pdm2y7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 600px) {
    .jd-bar-groups[b-8it7pdm2y7] {
        gap: 6px 10px;
        padding: 8px 10px;
    }
}

/* Very small phones: the bar is only about 190-260 px wide, so its edges and gaps shrink to fit four icon buttons per row */
@media (max-width: 400px) {
    .jd-bar-groups[b-8it7pdm2y7] {
        gap: 4px 6px;
        padding: 6px;
    }

    .jd-group[b-8it7pdm2y7] {
        gap: 4px;
    }
}

/* Right Column Sidebar structural width controls */
[b-8it7pdm2y7] .style-summary-sidebar {
    min-width: 160px !important;
    white-space: nowrap;
    align-self: stretch;
    min-height: 0;
}

/* Prevents metadata counters from forcing row item layout breaking */
.style-summary-text[b-8it7pdm2y7] {
    font-size: 0.825rem;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}

.style-summary-row[b-8it7pdm2y7] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.style-summary-left[b-8it7pdm2y7] {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.style-summary-count[b-8it7pdm2y7] {
    flex: 0 0 1rem;
    display: inline-block;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.style-filter-chipset[b-8it7pdm2y7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.style-filter-chip[b-8it7pdm2y7] {
    margin: 0 !important;
    font-weight: 600;
}

.style-filter-indicator[b-8it7pdm2y7] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

[b-8it7pdm2y7] .style-summary-sidebar-expanded {
    flex: 0 0 172px !important;
    width: 172px !important;
    min-width: 172px !important;
    max-width: 172px !important;
    align-self: stretch;
}

[b-8it7pdm2y7] .style-summary-sidebar-collapsed {
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    align-self: stretch;
    overflow: hidden !important;
}

[b-8it7pdm2y7] .style-sidebar-badge .mud-badge {
    font-size: 0.6rem !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 3px !important;
}

[b-8it7pdm2y7] .style-summary-sidebar-shell {
    transition: flex-basis 240ms cubic-bezier(0.22, 1, 0.36, 1), width 240ms cubic-bezier(0.22, 1, 0.36, 1), min-width 240ms cubic-bezier(0.22, 1, 0.36, 1), max-width 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
    will-change: width, flex-basis;
}

[b-8it7pdm2y7] .style-summary-sidebar-body {
    height: 100%;
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    will-change: opacity, transform;
}


[b-8it7pdm2y7] .style-summary-sidebar-toggle.mud-toolbar {
    justify-content: center !important;
}

[b-8it7pdm2y7] .style-summary-sidebar-toggle-button {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

[b-8it7pdm2y7] .style-summary-sidebar-toggle-button-expanded {
    transform: rotate(0deg);
}

[b-8it7pdm2y7] .style-summary-sidebar-toggle-button-collapsed {
    transform: rotate(0deg);
}

[b-8it7pdm2y7] .style-summary-sidebar-body {
    height: 100%;
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    opacity: 1;
    transition: opacity 140ms ease-out;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

[b-8it7pdm2y7] .style-summary-sidebar-body--visible {
    opacity: 1;
}

[b-8it7pdm2y7] .style-summary-sidebar-body--fading-out {
    opacity: 0;
}

[b-8it7pdm2y7] .style-summary-sidebar-body--fading-in {
    opacity: 1;
}

/* TOP BAR: the title shrinks (with an ellipsis), the zoom and sort controls wrap under it when the panel is narrow. Never scrolls sideways. */
.style-sortbar-scroll-host[b-8it7pdm2y7] {
    width: 100%;
    flex: 0 0 auto;
}

.style-sortbar[b-8it7pdm2y7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 12px;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-grey);
    box-sizing: border-box;
}

.jd-sort-title[b-8it7pdm2y7] {
    display: flex;
    flex: 1 1 14rem;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* On narrow panels both the name and the counter give up some space (with an ellipsis) instead of one of them disappearing */
[b-8it7pdm2y7] .jd-sort-title__name,
[b-8it7pdm2y7] .jd-sort-title__count {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Small phones: the counter goes under the name (without the separator) and the sort button keeps only its icons */
@media (max-width: 400px) {
    .jobdetails-sort-activator-label[b-8it7pdm2y7] {
        display: none;
    }
}

@media (max-width: 360px) {
    .jd-sort-title[b-8it7pdm2y7] {
        flex-wrap: wrap;
        row-gap: 0;
    }

    [b-8it7pdm2y7] .jd-sort-title__name {
        max-width: calc(100% - 32px);
    }

    [b-8it7pdm2y7] .jd-sort-title__count {
        flex: 1 0 100%;
    }

    .jd-pipe[b-8it7pdm2y7] {
        display: none;
    }

    /* With the pages | signatures switch the first row is the switch and the job name (the job icon goes), the count stays under them */
    .jd-sort-title:has(.jd-view-switch)[b-8it7pdm2y7]  .jd-sort-title__icon {
        display: none;
    }

    .jd-sort-title:has(.jd-view-switch)[b-8it7pdm2y7]  .jd-sort-title__name {
        max-width: calc(100% - 86px);
    }
}

.style-thumb-zoom-host[b-8it7pdm2y7] {
    width: 140px;
}

.style-thumb-zoom-slider[b-8it7pdm2y7] {
    width: 90px;
}

/* Phones: the two zoom buttons are enough, the slider goes away */
@media (max-width: 600px) {
    .style-thumb-zoom-host[b-8it7pdm2y7] {
        width: auto;
    }

    .style-thumb-zoom-host[b-8it7pdm2y7]  .style-thumb-zoom-slider {
        display: none;
    }
}

.style-selection-indicator[b-8it7pdm2y7] {
    font-size: 1.05rem;
    opacity: 0.28;
    transition: opacity 120ms ease, color 120ms ease, transform 120ms ease;
    vertical-align: middle;
}

.style-selection-indicator--active[b-8it7pdm2y7] {
    opacity: 1;
    transform: scale(1.05);
}

[b-8it7pdm2y7] .jobdetails-sort-item-selected {
    background-color: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

[b-8it7pdm2y7] .jobdetails-sort-icon-selected {
    color: var(--mud-palette-primary);
}

.style-selected-count-anchor[b-8it7pdm2y7] {
    width: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Pages/Jobs/Jobs.razor.rz.scp.css */
/* Hide MudSplitPanel panels own border — panels inside have their own MudPaper */
[b-vbej8ywdz4] .mud-split-panel .child-panel {
    background-color: var(--mud-palette-background-grey) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* /Components/Pages/Jobs/JobSignatures.razor.rz.scp.css */
/* The signatures of a job: cards that look like the page cards (the sheet with a thin border, a strip under it with the status dot, the name and
   the version), with the sheet's real shape (about 1.5 : 1) */
.sig-panel[b-2h14w7s5ol] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
}

.sig-scroll[b-2h14w7s5ol] {
    flex: 1 1 0;
    min-height: 0;
    padding: 12px;
    overflow: auto;
}

/* Columns of 240-360 px: on a wide panel there are more of them, on a narrow one a single card does not grow to the whole width */
.sig-grid[b-2h14w7s5ol] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 360px));
    justify-content: start;
    gap: 12px;
}

.sig-card[b-2h14w7s5ol] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sig-card:focus-visible[b-2h14w7s5ol] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (hover: hover) {
    .sig-card:hover[b-2h14w7s5ol] {
        border-color: var(--mud-palette-primary);
    }
}

/* A selected card, as on the pages: the tint of the theme and a frame in its primary color, and a green check in the corner */
.sig-card--selected[b-2h14w7s5ol] {
    background-color: var(--mud-palette-primary-hover);
}

.sig-card--selected[b-2h14w7s5ol]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 2px solid var(--mud-palette-primary);
    border-radius: inherit;
    pointer-events: none;
}

.sig-check[b-2h14w7s5ol] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Like the image frame of a page card: a margin around, the image with its thin border, no background of its own */
.sig-thumb[b-2h14w7s5ol] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 1rem);
    margin: 0.5rem;
    aspect-ratio: 1000 / 650;
    overflow: hidden;
    box-sizing: border-box;
}

/* While the picture is on its way it is invisible and does not take room (the box keeps its shape, the skeleton fills it). Not
   visibility:hidden: with that the browser loads only the first cards of a long list, the others never start when they come into view */
.sig-thumb img.sig-img--loading[b-2h14w7s5ol] {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 2px;
    opacity: 0;
    pointer-events: none;
}

.sig-thumb img[b-2h14w7s5ol] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--mud-palette-divider);
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
}

/* The strip under the sheet: dot | name (with the size under it) | version, in three columns like the page cards */
.sig-info[b-2h14w7s5ol] {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sig-info__left[b-2h14w7s5ol] {
    display: inline-flex;
    align-items: center;
}

.sig-info__center[b-2h14w7s5ol] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.sig-name[b-2h14w7s5ol] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sig-size[b-2h14w7s5ol] {
    max-width: 100%;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The version is only seen when it is more than 1, as on the page cards */
.sig-info__right[b-2h14w7s5ol] {
    justify-self: end;
    color: transparent;
    text-align: right;
}

.sig-info__right--new[b-2h14w7s5ol] {
    color: var(--mud-palette-error);
}

@media (max-width: 600px) {
    .sig-scroll[b-2h14w7s5ol] {
        padding: 8px;
    }

    .sig-grid[b-2h14w7s5ol] {
        gap: 8px;
    }
}
/* /Components/Pages/Jobs/JobsTree.razor.rz.scp.css */
[b-m83hp4g53b] .style-bottom-toolbar.mud-toolbar {
    background-color: var(--mud-palette-background-grey) !important;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid var(--mud-palette-lines-default) !important;
    padding: 1.5rem 0.5rem 1.5rem 0.5rem
}

[b-m83hp4g53b] .jobs-tree-panel-shell {
    position: relative;
}

[b-m83hp4g53b] .jobs-tree-panel-body {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 140ms ease-out;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

[b-m83hp4g53b] .jobs-tree-panel-body--visible {
    opacity: 1;
}

[b-m83hp4g53b] .jobs-tree-panel-body--fading-out {
    opacity: 0;
}

[b-m83hp4g53b] .jobs-tree-panel-body--fading-in {
    opacity: 1;
}

[b-m83hp4g53b] .jobs-tree-collapsed-footer-stack {
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

    [b-m83hp4g53b] .jobs-tree-collapsed-footer-stack .style-bottom-toolbar.mud-toolbar {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }


[b-m83hp4g53b] .style-scroll-to-top-button {
    bottom: 56px !important;
}
/* /Components/Pages/User/Login.razor.rz.scp.css */
/* The login page: the form, and under it (phones) or beside it on the left (from 960 px) the text the customer wrote.
   The form comes first in the markup, so it is also the first thing for the keyboard and for screen readers. */
.login-layout[b-hpjsuv3w23] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    min-height: calc(var(--app-vh) * 0.92);
    padding: 16px 12px;
    box-sizing: border-box;
}

.login-layout[b-hpjsuv3w23]  .login-form {
    width: 100%;
    max-width: 32rem;
}

.login-customer-text[b-hpjsuv3w23] {
    width: 100%;
    max-width: 32rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (min-width: 960px) {
    .login-layout[b-hpjsuv3w23] {
        flex-direction: row-reverse;
        gap: 56px;
        padding: 16px 24px;
    }

    .login-layout[b-hpjsuv3w23]  .login-form {
        flex: 0 0 32rem;
    }

    .login-customer-text[b-hpjsuv3w23] {
        flex: 1 1 0;
        min-width: 0;
        max-width: 38rem;
    }
}

/* The content is the customer's HTML: it takes the colors of the theme */
.login-customer-text[b-hpjsuv3w23]  h1 {
    margin: 0 0 1rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.login-customer-text[b-hpjsuv3w23]  h2 {
    margin: 0 0 0.9rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
}

.login-customer-text[b-hpjsuv3w23]  h3 {
    margin: 1.4rem 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.login-customer-text[b-hpjsuv3w23]  p {
    margin: 0 0 0.9rem;
}

.login-customer-text[b-hpjsuv3w23]  ul,
.login-customer-text[b-hpjsuv3w23]  ol {
    margin: 0 0 0.9rem;
    padding-left: 1.5rem;
}

.login-customer-text[b-hpjsuv3w23]  li {
    margin-bottom: 0.4rem;
}

.login-customer-text[b-hpjsuv3w23]  a {
    color: var(--mud-palette-primary);
}

.login-customer-text[b-hpjsuv3w23]  img {
    max-width: 100%;
    height: auto;
}

.login-customer-text[b-hpjsuv3w23]  hr {
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1.2rem 0;
}
/* /Components/Pages/User/Profile.razor.rz.scp.css */
.profile-page-root[b-b8o7qsaosq] {
    height: calc(var(--app-vh) - 4rem);
    width: 100%;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.profile-loading[b-b8o7qsaosq] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card[b-b8o7qsaosq] {
    height: 100%;
}

.profile-user-card[b-b8o7qsaosq] {
    min-height: 100%;
}

.profile-avatar[b-b8o7qsaosq] {
    width: 88px;
    height: 88px;
    font-size: 1.75rem;
    font-weight: 700;
}
/* /Components/Pages/User/UserDashboard.razor.rz.scp.css */
/* Dashboard of the profile page. Colors come from the MudBlazor theme variables, so the five themes, light and dark, are followed
   without a line of code. Razor draws the cards (UserDashboardCard / UserDashboardKpi, hence ::deep), the script userDashboard.ts
   draws the charts inside the empty hosts (hence ::deep too). */

.ud-root[b-hdjmb8ptzs] {
    --ud-accent: var(--mud-palette-primary);
    --ud-text: var(--mud-palette-text-primary);
    --ud-text-2: var(--mud-palette-text-secondary);
    --ud-line: var(--mud-palette-lines-default);
    --ud-line-strong: color-mix(in srgb, var(--mud-palette-lines-default) 55%, var(--mud-palette-text-secondary));
    --ud-surface: var(--mud-palette-surface);
    --ud-skeleton: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-surface));
    /* the more versions, the darker: four steps of the accent */
    --ud-ord1: color-mix(in srgb, var(--mud-palette-primary) 58%, var(--mud-palette-surface));
    --ud-ord2: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-surface));
    --ud-ord3: var(--mud-palette-primary);
    --ud-ord4: color-mix(in srgb, var(--mud-palette-primary) 70%, var(--mud-palette-text-primary));
    --ud-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.05);
    width: 100%;
}

/* The layout follows the width of the dashboard itself, not the window (the drawer and the zoom change it) */
.ud-fit[b-hdjmb8ptzs] {
    container: ud / inline-size;
}

/* ------------------------------------------------------------------ header */

.ud-header[b-hdjmb8ptzs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ud-heading[b-hdjmb8ptzs] {
    min-width: 0;
}

.ud-title[b-hdjmb8ptzs] {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ud-text);
}

.ud-subtitle[b-hdjmb8ptzs] {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--ud-text-2);
}

/* ------------------------------------------------------------------ layout */

.ud-top[b-hdjmb8ptzs] {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 16px;
    margin-bottom: 16px;
}

.ud-identity[b-hdjmb8ptzs] {
    display: grid;
    min-width: 0;
}

/* three by two next to the card of the user, six in a row when the dashboard is very wide, two or one on a phone */
.ud-kpis[b-hdjmb8ptzs] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

@container ud (min-width: 1700px) {
    .ud-kpis[b-hdjmb8ptzs] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.ud-grid[b-hdjmb8ptzs] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-months { grid-column: span 5; }
.ud-fit[b-hdjmb8ptzs]  .ud-days { grid-column: span 4; }
.ud-fit[b-hdjmb8ptzs]  .ud-states { grid-column: span 3; }
.ud-fit[b-hdjmb8ptzs]  .ud-when { grid-column: span 4; }
.ud-fit[b-hdjmb8ptzs]  .ud-actions { grid-column: span 3; }
.ud-fit[b-hdjmb8ptzs]  .ud-versions { grid-column: span 3; }
.ud-fit[b-hdjmb8ptzs]  .ud-signatures { grid-column: span 2; }

/* without the signatures card the others take its room */
.ud-no-signatures[b-hdjmb8ptzs]  .ud-when { grid-column: span 5; }
.ud-no-signatures[b-hdjmb8ptzs]  .ud-versions { grid-column: span 4; }

@container ud (max-width: 1099px) {
    .ud-fit[b-hdjmb8ptzs]  .ud-months { grid-column: span 12; }
    .ud-fit[b-hdjmb8ptzs]  .ud-days { grid-column: span 7; }
    .ud-fit[b-hdjmb8ptzs]  .ud-states { grid-column: span 5; }
    .ud-fit[b-hdjmb8ptzs]  .ud-when { grid-column: span 12; }
    .ud-fit[b-hdjmb8ptzs]  .ud-actions { grid-column: span 6; }
    .ud-fit[b-hdjmb8ptzs]  .ud-versions { grid-column: span 6; }
    .ud-fit[b-hdjmb8ptzs]  .ud-signatures { grid-column: span 12; }
    .ud-no-signatures[b-hdjmb8ptzs]  .ud-when { grid-column: span 12; }
    .ud-no-signatures[b-hdjmb8ptzs]  .ud-versions { grid-column: span 6; }
}

@container ud (max-width: 899px) {
    .ud-top[b-hdjmb8ptzs] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container ud (max-width: 699px) {
    .ud-kpis[b-hdjmb8ptzs] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ud-fit[b-hdjmb8ptzs]  .ud-days,
    .ud-fit[b-hdjmb8ptzs]  .ud-states,
    .ud-fit[b-hdjmb8ptzs]  .ud-actions,
    .ud-fit[b-hdjmb8ptzs]  .ud-versions,
    .ud-no-signatures[b-hdjmb8ptzs]  .ud-versions {
        grid-column: span 12;
    }

    .ud-when-grid[b-hdjmb8ptzs] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container ud (max-width: 329px) {
    .ud-kpis[b-hdjmb8ptzs] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------ cards */

.ud-fit[b-hdjmb8ptzs]  .ud-card {
    min-width: 0;
    padding: 16px 18px 14px;
    background: var(--ud-surface);
    border: 1px solid var(--ud-line);
    border-radius: 12px;
    box-shadow: var(--ud-shadow);
    /* the cards come in one after the other (--i is the order) */
    animation: ud-card-in-b-hdjmb8ptzs 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes ud-card-in-b-hdjmb8ptzs {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* the control in the corner goes under the title when the card is too narrow for both */
.ud-fit[b-hdjmb8ptzs]  .ud-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 10px;
    margin-bottom: 10px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-card-titles {
    flex: 1 1 140px;
    min-width: 0;
}

.ud-fit[b-hdjmb8ptzs]  .ud-card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ud-text);
}

.ud-fit[b-hdjmb8ptzs]  .ud-card-caption {
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ud-text-2);
}

/* ------------------------------------------------------------------ indicators */

.ud-fit[b-hdjmb8ptzs]  .ud-kpi {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 12px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-kpi-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ud-text-2);
}

.ud-fit[b-hdjmb8ptzs]  .ud-kpi-icon {
    flex: none;
    color: var(--ud-text-2);
}

.ud-fit[b-hdjmb8ptzs]  .ud-kpi-value {
    margin: 6px 0 2px;
    min-height: 2.1rem;
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ud-text);
}

.ud-fit[b-hdjmb8ptzs]  .ud-kpi-value small {
    margin-left: 2px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ud-text-2);
}

.ud-fit[b-hdjmb8ptzs]  .ud-kpi-note {
    min-height: 2.2rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ud-text-2);
}

.ud-fit[b-hdjmb8ptzs]  .ud-spark {
    height: 30px;
    margin-top: 6px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-bar-track {
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ud-line);
}

.ud-fit[b-hdjmb8ptzs]  .ud-bar-track > i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--ud-accent);
}

/* ------------------------------------------------------------------ loading and ready */

/* While the numbers are loading the cards show grey shapes: they pulse like the ones of the page thumbnails */
.ud-fit[b-hdjmb8ptzs]  .ud-skel {
    display: block;
    border-radius: 4px;
    background: var(--ud-skeleton);
    animation: ud-pulse-b-hdjmb8ptzs 1.5s ease-in-out 0.5s infinite;
}

@keyframes ud-pulse-b-hdjmb8ptzs {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.ud-root:not(.ud-loading)[b-hdjmb8ptzs]  .ud-skeleton {
    display: none;
}

.ud-root.ud-loading[b-hdjmb8ptzs]  .ud-real,
.ud-root.ud-loading[b-hdjmb8ptzs]  .ud-chart:not(.ud-spark),
.ud-root.ud-loading[b-hdjmb8ptzs]  .ud-chart-group {
    display: none;
}

/* the numbers are written final by Razor: they stay hidden until the script has set them to zero and starts counting */
.ud-root:not(.ud-loading):not([data-ud-ready])[b-hdjmb8ptzs]  .ud-real {
    visibility: hidden;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-value {
    width: 62%;
    height: 1.9rem;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-note {
    width: 85%;
    height: 0.8rem;
    margin-top: 4px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-h260 { min-height: 260px; }
.ud-fit[b-hdjmb8ptzs]  .ud-h200 { min-height: 200px; }
.ud-fit[b-hdjmb8ptzs]  .ud-h176 { min-height: 176px; }

/* the grey bars and the grey line take their heights in percent: the box needs a real height, not only a minimum */
.ud-fit[b-hdjmb8ptzs]  .ud-skeleton.ud-h260 { height: 260px; }
.ud-fit[b-hdjmb8ptzs]  .ud-skeleton.ud-h200 { height: 200px; }

.ud-fit[b-hdjmb8ptzs]  .ud-skel-bars {
    display: flex;
    align-items: flex-end;
    gap: 6%;
    padding: 0 0 6px 36px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-bars .ud-skel {
    flex: 1;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-area {
    display: flex;
    align-items: flex-end;
    padding: 0 0 6px 36px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-area-shape {
    width: 100%;
    height: 78%;
    clip-path: polygon(0 100%, 0 75%, 9% 55%, 18% 60%, 27% 28%, 36% 40%, 45% 15%, 54% 50%, 63% 58%, 72% 45%, 81% 65%, 90% 52%, 100% 70%, 100% 100%);
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 176px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-ring {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
    mask: radial-gradient(circle, transparent 54%, #000 55%);
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-lines {
    display: grid;
    flex: 1;
    min-width: 150px;
    gap: 12px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-lines .ud-skel {
    height: 0.85rem;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-rows {
    display: grid;
    gap: 16px;
    padding-top: 6px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-skel-rows .ud-skel {
    height: 1.9rem;
}

/* ------------------------------------------------------------------ switch jobs | pages */

.ud-seg[b-hdjmb8ptzs] {
    display: inline-flex;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--ud-line-strong);
    border-radius: 8px;
}

.ud-seg[b-hdjmb8ptzs]  .mud-tooltip-root {
    display: flex;
}

.ud-seg-button[b-hdjmb8ptzs] {
    padding: 5px 10px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ud-text-2);
    cursor: pointer;
}

.ud-seg-button[aria-pressed="true"][b-hdjmb8ptzs] {
    background: var(--ud-accent);
    color: var(--mud-palette-primary-text);
}

.ud-seg-button:focus-visible[b-hdjmb8ptzs] {
    outline: 2px solid var(--ud-accent);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------ charts (built by the script) */

.ud-fit[b-hdjmb8ptzs]  svg {
    display: block;
    overflow: visible;
}

.ud-fit[b-hdjmb8ptzs]  .ud-grid-line {
    stroke: var(--ud-line);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.ud-fit[b-hdjmb8ptzs]  .ud-base-line {
    stroke: var(--ud-line-strong);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.ud-fit[b-hdjmb8ptzs]  .ud-tick {
    fill: var(--ud-text-2);
    font-family: inherit;
    font-size: 11px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-value-label {
    fill: var(--ud-text);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
}

.ud-fit[b-hdjmb8ptzs]  .ud-bar {
    fill: var(--ud-accent);
    transition: opacity 0.15s;
}

.ud-fit[b-hdjmb8ptzs]  .ud-bar.ud-dim {
    opacity: 0.45;
}

.ud-fit[b-hdjmb8ptzs]  .ud-line {
    fill: none;
    stroke: var(--ud-accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ud-fit[b-hdjmb8ptzs]  .ud-area-top {
    stop-color: var(--ud-accent);
    stop-opacity: 0.3;
}

.ud-fit[b-hdjmb8ptzs]  .ud-area-bottom {
    stop-color: var(--ud-accent);
    stop-opacity: 0;
}

.ud-fit[b-hdjmb8ptzs]  .ud-crosshair {
    stroke: var(--ud-line-strong);
    stroke-width: 1;
}

.ud-fit[b-hdjmb8ptzs]  .ud-ring {
    fill: var(--ud-surface);
    stroke: var(--ud-accent);
    stroke-width: 2;
}

.ud-fit[b-hdjmb8ptzs]  .ud-donut-track {
    stroke: var(--ud-line);
}

.ud-fit[b-hdjmb8ptzs]  .ud-donut-big {
    fill: var(--ud-text);
    font-family: inherit;
    font-size: 24px;
    font-weight: 800;
}

.ud-fit[b-hdjmb8ptzs]  .ud-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    color: var(--ud-text-2);
}

/* hours and days of the week: next to each other, one under the other in a narrow card */
.ud-when-grid[b-hdjmb8ptzs] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
    gap: 14px;
}

/* the ring and its legend */
.ud-fit[b-hdjmb8ptzs]  .ud-donut-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-legend {
    flex: 1;
    min-width: 170px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-legend-item {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    font-size: 0.8125rem;
    transition: opacity 0.15s;
}

.ud-fit[b-hdjmb8ptzs]  .ud-legend-item.ud-dim {
    opacity: 0.45;
}

.ud-fit[b-hdjmb8ptzs]  .ud-legend-item i {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-legend-name {
    min-width: 0;
    color: var(--ud-text-2);
}

.ud-fit[b-hdjmb8ptzs]  .ud-legend-value {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ud-fit[b-hdjmb8ptzs]  .ud-legend-share {
    min-width: 46px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--ud-text-2);
    font-variant-numeric: tabular-nums;
}

/* the rows with a bar */
.ud-fit[b-hdjmb8ptzs]  .ud-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    align-items: baseline;
    padding: 7px 0 6px;
}

.ud-fit[b-hdjmb8ptzs]  .ud-row-name {
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--ud-text-2);
}

.ud-fit[b-hdjmb8ptzs]  .ud-row-value {
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ud-fit[b-hdjmb8ptzs]  .ud-row-value em {
    margin-left: 4px;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 600;
    color: var(--ud-text-2);
}

.ud-fit[b-hdjmb8ptzs]  .ud-row-track {
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ud-line);
}

.ud-fit[b-hdjmb8ptzs]  .ud-row-track > i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 0 4px 4px 0;
}

.ud-fit[b-hdjmb8ptzs]  .ud-row:hover .ud-row-track > i {
    filter: brightness(1.12);
}

/* ------------------------------------------------------------------ tooltip of the values */

.ud-tip[b-hdjmb8ptzs] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    max-width: 260px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--ud-text);
    color: var(--mud-palette-surface);
    font-size: 0.75rem;
    line-height: 1.4;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}

.ud-tip.ud-tip-on[b-hdjmb8ptzs] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ud-fit[b-hdjmb8ptzs]  .ud-card,
    .ud-fit[b-hdjmb8ptzs]  .ud-skel {
        animation: none;
    }
}
/* /Components/Shared/ApprovalPreviewDialog.razor.rz.scp.css */
[b-n1qe6pr39p] .approval-preview-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
}

[b-n1qe6pr39p] .approval-preview-dialog .mud-dialog-actions {
    padding: 0 !important;
    overflow: hidden !important;
}

.approval-preview-root[b-n1qe6pr39p] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* TOP BAR (single separator under top bar) */
.approval-preview-topbar-scroll[b-n1qe6pr39p] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

[b-n1qe6pr39p] .approval-preview-topbar-toolbar.mud-toolbar {
    width: max-content !important;
    min-width: 100% !important;
    box-sizing: border-box;
    padding: 12px 16px !important;
    flex-wrap: nowrap !important;
}

/* PREVIEW AREA */
.approval-preview-stage[b-n1qe6pr39p] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    background-color: #262626;
    overflow: hidden;
    border-top: none;
}

.approval-preview-scroll[b-n1qe6pr39p] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #262626;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.approval-preview-scroll--pan[b-n1qe6pr39p] {
    cursor: grab;
}

    .approval-preview-scroll--pan:active[b-n1qe6pr39p] {
        cursor: grabbing;
    }

.approval-preview-scroll--measure[b-n1qe6pr39p] {
    cursor: crosshair;
    touch-action: none;
}

.approval-preview-skeleton[b-n1qe6pr39p] {
    position: absolute;
    inset: 12px;
    z-index: 3;
    border-radius: 8px;
    overflow: hidden;
    background: #1f1f1f;
    pointer-events: none;
}

/* The blink is the one of MudSkeleton, like on the cards; only its color is darker here */
.approval-preview-skeleton[b-n1qe6pr39p]  .mud-skeleton {
    background-color: #3a3a3a;
}

.approval-preview-center-wrap[b-n1qe6pr39p] {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.approval-preview-canvas[b-n1qe6pr39p] {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

.approval-preview-image[b-n1qe6pr39p] {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

    .approval-preview-selection[b-n1qe6pr39p] {
        position: absolute;
        z-index: 6;
        pointer-events: none;
        box-sizing: border-box;
        border: 2px solid #4FC3F7;
        background-color: rgba(79, 195, 247, 0.20);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    }

.approval-preview-measure-line[b-n1qe6pr39p] {
    position: absolute;
    z-index: 7;
    height: 2px;
    pointer-events: none;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #FFB300 0%, #FF7043 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.approval-preview-measure-point[b-n1qe6pr39p] {
    position: absolute;
    z-index: 8;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    pointer-events: none;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.approval-preview-measure-point--start[b-n1qe6pr39p] {
    background-color: #FFB300;
}

.approval-preview-measure-point--end[b-n1qe6pr39p] {
    background-color: #FF7043;
}

.approval-preview-measure-panel[b-n1qe6pr39p] {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 20;
    width: 320px;
    max-width: calc(100% - 48px);
    padding: 14px 16px;
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
}

.approval-preview-measure-panel__header[b-n1qe6pr39p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.approval-preview-measure-panel__title[b-n1qe6pr39p] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.approval-preview-measure-panel__actions[b-n1qe6pr39p] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.approval-preview-measure-panel__hint[b-n1qe6pr39p] {
    display: block;
    margin-bottom: 12px;
    color: var(--mud-palette-text-secondary);
}

.approval-preview-measure-panel__grid[b-n1qe6pr39p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
}

.approval-preview-measure-panel__label[b-n1qe6pr39p] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.approval-preview-measure-panel__value[b-n1qe6pr39p] {
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

    .approval-preview-missing[b-n1qe6pr39p] {
        width: 100%;
        height: 100%;
        min-height: 280px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        justify-content: center;
    }
    /* BOTTOM BAR: groups ("pills"). Wide: one row. Tablets: two rows. Phones: icons only, zoom in a menu. Never scrolls sideways. */
    .approval-preview-actions-row[b-n1qe6pr39p] {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
        background-color: var(--mud-palette-surface);
    }

    .pv-bar[b-n1qe6pr39p] {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        min-width: 0;
        padding: 10px 16px;
        box-sizing: border-box;
    }

    .pv-group[b-n1qe6pr39p] {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    /* Note and status buttons stay on the left, everything else is pushed to the right */
    .pv-group--actions[b-n1qe6pr39p] {
        margin-right: auto;
    }

    .pv-group--pill[b-n1qe6pr39p] {
        gap: 2px;
        padding: 3px;
        border-radius: 14px;
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, var(--mud-palette-surface));
    }

    .pv-group--zoom-menu[b-n1qe6pr39p],
    .pv-break[b-n1qe6pr39p] {
        display: none;
    }

    /* Buttons inside the pills: light, with a tonal background for the active tool or fit mode */
    .pv-bar[b-n1qe6pr39p]  .pv-btn.mud-icon-button {
        padding: 8px;
        border-radius: 11px;
    }

    .pv-bar[b-n1qe6pr39p]  .pv-btn--active.mud-icon-button {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    }

    .pv-bar[b-n1qe6pr39p]  .pv-status.mud-icon-button {
        padding: 8px;
        border-radius: 12px;
    }

    .pv-slider[b-n1qe6pr39p] {
        width: 180px;
        min-width: 180px;
        padding: 0 8px;
    }

    .pv-bar[b-n1qe6pr39p]  .pv-chip.mud-chip {
        margin: 0 2px;
    }

    .approval-preview-page-index[b-n1qe6pr39p] {
        min-width: max-content;
        text-align: center;
    }

    .approval-preview-page-index--nowrap[b-n1qe6pr39p] {
        white-space: nowrap;
        display: inline-block;
    }

    /* From 1330px up there is room for the slider (also in French, with the page-jump field open and every permission); below that the zoom buttons are enough */
    @media (max-width: 1329px) {
        .pv-slider[b-n1qe6pr39p] {
            display: none;
        }
    }

    /* Smaller screens: groups and bar edges come closer, so the single row holds down to 1100px */
    @media (max-width: 1279px) {
        .pv-bar[b-n1qe6pr39p] {
            gap: 8px;
            padding: 10px 12px;
        }
    }

    /* Tablets and below: two rows. Row 1: note, statuses and Close. Row 2: zoom, tools and page navigation.
       The limit leaves room for the longest case (French, page-jump field open, every permission) in a single row from 1100px up. */
    @media (max-width: 1099px) {
        .pv-bar[b-n1qe6pr39p] {
            justify-content: space-between;
        }

        .pv-group--actions[b-n1qe6pr39p] {
            order: 1;
            margin-right: 0;
        }

        .pv-group--close[b-n1qe6pr39p] {
            order: 2;
            margin-left: auto;
        }

        .pv-break[b-n1qe6pr39p] {
            display: block;
            order: 3;
            flex: 0 0 100%;
            height: 0;
        }

        .pv-group--zoom[b-n1qe6pr39p],
        .pv-group--zoom-menu[b-n1qe6pr39p] {
            order: 4;
        }

        .pv-group--tools[b-n1qe6pr39p] {
            order: 5;
        }

        .pv-group--nav[b-n1qe6pr39p] {
            order: 6;
        }
    }

    /* Phones: note and Close become icons, the zoom commands collapse into one menu */
    @media (max-width: 600px) {
        .pv-bar[b-n1qe6pr39p] {
            gap: 6px 8px;
            padding: 8px 10px;
        }

        .pv-group--zoom[b-n1qe6pr39p] {
            display: none;
        }

        .pv-group--zoom-menu[b-n1qe6pr39p] {
            display: flex;
        }

        .pv-label[b-n1qe6pr39p] {
            display: none;
        }

        .pv-group--close[b-n1qe6pr39p]  .mud-button-root {
            min-width: 0;
            padding: 8px;
        }

        .pv-group--close[b-n1qe6pr39p]  .mud-button-icon-start {
            margin: 0;
        }

        .pv-bar[b-n1qe6pr39p]  .pv-btn.mud-icon-button,
        .pv-bar[b-n1qe6pr39p]  .pv-status.mud-icon-button {
            padding: 7px;
        }
    }

    @media (max-width: 400px) {
        .pv-bar[b-n1qe6pr39p]  .pv-btn.mud-icon-button,
        .pv-bar[b-n1qe6pr39p]  .pv-status.mud-icon-button {
            padding: 5px;
        }
    }

    /* Tablets and phones: the arrow (AppBarToggle, drawn in app.css) has a row of its own above the groups and folds the bar away; its
       strip takes the place of the bar's top padding. Folded, only the arrow and Close are left, on one row. */
    @media (max-width: 1099px) {
        .pv-bar[b-n1qe6pr39p] {
            padding-top: 2px;
        }

        .pv-bar[b-n1qe6pr39p]  .app-bar-handle {
            display: block;
            order: 0;
            flex: 0 0 100%;
        }

        html[data-bar-preview="closed"] .pv-bar > .pv-group:not(.pv-group--close)[b-n1qe6pr39p],
        html[data-bar-preview="closed"] .pv-bar > .pv-break[b-n1qe6pr39p] {
            display: none;
        }

        html[data-bar-preview="closed"] .pv-bar[b-n1qe6pr39p]  .app-bar-handle {
            order: 1;
            flex: 1 1 0;
        }
    }

    /* COLOR BADGES (the component draws them) */
    .approval-preview-color-chip-row[b-n1qe6pr39p] {
        display: inline-flex;
        align-items: center;
    }

.approval-preview-pdf-box-overlay[b-n1qe6pr39p] {
    position: absolute;
    z-index: 7;
    pointer-events: none;
    box-sizing: border-box;
    border: 2px dashed #000000;
    background: transparent;
}

.approval-preview-pdf-box-panel[b-n1qe6pr39p] {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 20;
    width: 320px;
    max-width: calc(100% - 48px);
    padding: 14px 16px;
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
}

.approval-preview-pdf-box-panel__header[b-n1qe6pr39p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.approval-preview-pdf-box-panel__title[b-n1qe6pr39p] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.approval-preview-pdf-box-panel__actions[b-n1qe6pr39p] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.approval-preview-pdf-box-panel__row[b-n1qe6pr39p] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.approval-preview-pdf-box-panel__legend[b-n1qe6pr39p] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    flex: 0 0 auto;
}

.approval-preview-pdf-box-panel__empty[b-n1qe6pr39p] {
    color: var(--mud-palette-text-secondary);
}

.approval-preview-pdf-box-panel__size[b-n1qe6pr39p] {
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

/* ANNOTATIONS: boxes drawn over the page (same colors as the Java client, 20% alpha) */
.approval-preview-annotation-box[b-n1qe6pr39p] {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    box-sizing: border-box;
    border: 1px solid #000000;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.20);
}

.approval-preview-annotation-box--type0[b-n1qe6pr39p] {
    background-color: rgba(0, 0, 255, 0.20);
}

.approval-preview-annotation-box--type1[b-n1qe6pr39p] {
    background-color: rgba(255, 0, 0, 0.20);
}

.approval-preview-annotation-box--type2[b-n1qe6pr39p] {
    background-color: rgba(255, 255, 0, 0.20);
}

.approval-preview-annotation-box--corrected[b-n1qe6pr39p] {
    background-color: rgba(0, 255, 0, 0.20);
}

.approval-preview-annotation-box--selected[b-n1qe6pr39p] {
    border-width: 2px;
}

.approval-preview-annotation-box__number[b-n1qe6pr39p] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.75);
    border-bottom-right-radius: 3px;
}

/* ANNOTATIONS: side panel (right side, same look as the measurement panel) */
.approval-preview-annotation-panel[b-n1qe6pr39p] {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: calc(100% - 48px);
    max-height: calc(100% - 48px);
    padding: 14px 16px;
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.approval-preview-annotation-panel__header[b-n1qe6pr39p] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.approval-preview-annotation-panel__title[b-n1qe6pr39p] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.approval-preview-annotation-panel__actions[b-n1qe6pr39p] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.approval-preview-annotation-panel__hint[b-n1qe6pr39p] {
    display: block;
    flex: 0 0 auto;
    margin-bottom: 8px;
    color: var(--mud-palette-text-secondary);
}

.approval-preview-annotation-panel__list[b-n1qe6pr39p] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

.approval-preview-annotation-panel__empty[b-n1qe6pr39p] {
    color: var(--mud-palette-text-secondary);
}

.approval-preview-annotation-panel__filters[b-n1qe6pr39p] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.approval-preview-annotation-row[b-n1qe6pr39p] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
}

.approval-preview-annotation-row:hover[b-n1qe6pr39p] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.approval-preview-annotation-row--selected[b-n1qe6pr39p] {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.approval-preview-annotation-row__swatch[b-n1qe6pr39p] {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.35);
}

.approval-preview-annotation-row__swatch--type0[b-n1qe6pr39p] {
    background-color: rgba(0, 0, 255, 0.55);
}

.approval-preview-annotation-row__swatch--type1[b-n1qe6pr39p] {
    background-color: rgba(255, 0, 0, 0.55);
}

.approval-preview-annotation-row__swatch--type2[b-n1qe6pr39p] {
    background-color: rgba(255, 255, 0, 0.75);
}

.approval-preview-annotation-row__swatch--corrected[b-n1qe6pr39p] {
    background-color: rgba(0, 200, 0, 0.60);
}

.approval-preview-annotation-row__head[b-n1qe6pr39p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.approval-preview-annotation-row__number[b-n1qe6pr39p] {
    font-weight: 700;
}

.approval-preview-annotation-row__type[b-n1qe6pr39p] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.approval-preview-annotation-row__text[b-n1qe6pr39p] {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.approval-preview-annotation-row__meta[b-n1qe6pr39p] {
    display: block;
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    white-space: pre-line;
}

.approval-preview-annotation-row__actions[b-n1qe6pr39p] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

/* Phones: the annotations, ruler and PDF boxes panels become a sheet at the bottom so the page stays visible (and swipeable) above it */
@media (max-width: 600px) {
    .approval-preview-annotation-panel[b-n1qe6pr39p],
    .approval-preview-measure-panel[b-n1qe6pr39p],
    .approval-preview-pdf-box-panel[b-n1qe6pr39p] {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        max-height: 45%;
    }

    .approval-preview-measure-panel[b-n1qe6pr39p],
    .approval-preview-pdf-box-panel[b-n1qe6pr39p] {
        overflow-y: auto;
    }
}

.pv-group--nav[b-n1qe6pr39p]  .approval-preview-page-jump-input {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

[b-n1qe6pr39p] .style-top-toolbar-divider {
    align-self: center !important;
    height: 28px !important;
    min-height: 28px !important;
    opacity: 0.45;
}
/* /Components/Shared/ApprovalSummaryDialog.razor.rz.scp.css */
@media (max-width: 600px) {
    .mud-data-grid[b-boh75irrkt] {
        font-size: 0.75rem;
    }
}
/* /Components/Shared/ButtonLegendDialog.razor.rz.scp.css */
.legend-title[b-8xubvhzjhq] {
    margin: 24px 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.legend-title:first-child[b-8xubvhzjhq] {
    margin-top: 0;
}

.legend-row[b-8xubvhzjhq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 0;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-primary);
}
/* /Components/Shared/ColorBadges.razor.rz.scp.css */
/* Same badges as the Client (ColorBadge.java): 15 px rounded squares, bold letter, Fogra 39 process colours, spot colours green, blank page white with a frame.
   The colours are those of the inks, so they do not change with the theme. */
.color-badges[b-qgrp4p0bss] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}

.cb[b-qgrp4p0bss] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: none;
    width: var(--color-badge-size, 15px);
    height: var(--color-badge-size, 15px);
    border-radius: calc(var(--color-badge-size, 15px) * 0.27);
    font-size: calc(var(--color-badge-size, 15px) * 0.73);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.cb--small[b-qgrp4p0bss] {
    font-size: calc(var(--color-badge-size, 15px) * 0.53);
}

.cb--c[b-qgrp4p0bss] {
    background-color: #009EE3;
    color: #FFFFFF;
}

.cb--m[b-qgrp4p0bss] {
    background-color: #E6007D;
    color: #FFFFFF;
}

.cb--y[b-qgrp4p0bss] {
    background-color: #FFEE00;
    color: #1A1A18;
}

/* The black badge would disappear into a dark theme: a thin ring in the text colour of the theme */
.cb--k[b-qgrp4p0bss] {
    background-color: #1A1A18;
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-text-primary) 35%, transparent);
}

.cb--spot[b-qgrp4p0bss] {
    background-color: #78DA36;
    color: #1A1A18;
}

.cb--w[b-qgrp4p0bss] {
    background-color: #FFFFFF;
    color: #9AA3B2;
    border: 1px solid #9AA3B2;
}
/* /Components/Shared/DeimpositionBookPreviewDialog.razor.rz.scp.css */
.book-preview-root[b-ottjfwubsx] {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 40%), linear-gradient(180deg, #2b2f36 0%, #181a20 100%);
}

.book-preview-panel[b-ottjfwubsx] {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px;
    box-sizing: border-box;
}

.book-preview-stage[b-ottjfwubsx] {
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}

.book-preview-slider-host[b-ottjfwubsx] {
    width: 120px;
    display: flex;
    align-items: center;
}

.book-preview-stage--pan[b-ottjfwubsx] {
    cursor: grab;
}

    .book-preview-stage--pan:active[b-ottjfwubsx] {
        cursor: grabbing;
    }

.book-preview-stage-fit[b-ottjfwubsx] {
    overflow: hidden;
}

    .book-preview-stage-fit .book-sheet[b-ottjfwubsx] {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        margin: auto;
    }

.book-preview-stage-100[b-ottjfwubsx] {
    overflow: auto;
    display: block;
    text-align: center;
}

    .book-preview-stage-100 .book-sheet[b-ottjfwubsx] {
        display: inline-flex;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        margin: auto;
    }

.book-sheet[b-ottjfwubsx] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

.book-sheet-single .book-img[b-ottjfwubsx] {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.book-sheet-pair .book-img[b-ottjfwubsx] {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
}

.book-img[b-ottjfwubsx] {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    object-fit: contain;
    object-position: center center;
    vertical-align: top;
    touch-action: none;
}

.book-preview-stage-fit .book-sheet-single .book-img[b-ottjfwubsx] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.book-preview-stage-fit .book-sheet-pair .book-img[b-ottjfwubsx] {
    width: 50%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.book-preview-stage-100 .book-img[b-ottjfwubsx] {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}

[b-ottjfwubsx] .book-preview-dialog .mud-dialog-content {
    padding: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

[b-ottjfwubsx] .book-preview-dialog .mud-dialog-actions {
    display: block !important;
    padding: 0 !important;
    justify-content: initial !important;
    align-items: initial !important;
    gap: 0 !important;
}

/* BOTTOM BAR: navigation centered with Close on the right. Narrow screens: the groups wrap, Close keeps only its icon. Never scrolls sideways. */
.book-preview-actions-host[b-ottjfwubsx] {
    width: 100%;
    flex: 0 0 auto;
}

.book-bar[b-ottjfwubsx] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px 16px;
    width: 100%;
    min-width: 0;
    padding: 10px 16px;
    box-sizing: border-box;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.book-bar__nav[b-ottjfwubsx] {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.book-bar__close[b-ottjfwubsx] {
    grid-column: 3;
    justify-self: end;
}

.book-bar[b-ottjfwubsx]  .mud-icon-button {
    border-radius: 999px;
}

.book-bar[b-ottjfwubsx]  .mud-chip {
    font-weight: 600;
}

@media (max-width: 700px) {
    .book-bar[b-ottjfwubsx] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px 8px;
        padding: 8px 10px;
    }

    .book-label[b-ottjfwubsx] {
        display: none;
    }

    .book-bar__close[b-ottjfwubsx]  .mud-button-root {
        min-width: 0;
        padding: 8px;
    }

    .book-bar__close[b-ottjfwubsx]  .mud-button-icon-start {
        margin: 0;
    }
}

@media (max-width: 600px) {
    .book-bar[b-ottjfwubsx]  .style-bottom-toolbar-divider {
        display: none;
    }

    .book-bar[b-ottjfwubsx]  .mud-icon-button {
        padding: 7px;
    }
}

@media (max-width: 400px) {
    .book-bar[b-ottjfwubsx]  .mud-icon-button {
        padding: 5px;
    }
}

.book-img[b-ottjfwubsx] {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    object-fit: contain;
    object-position: center center;
    vertical-align: top;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

[b-ottjfwubsx] .book-preview-page-jump-input {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

[b-ottjfwubsx] .style-bottom-toolbar-divider {
    align-self: center !important;
    height: 28px !important;
    min-height: 28px !important;
    opacity: 0.45;
}
/* /Components/Shared/NotificationsDialog.razor.rz.scp.css */
/* ─── Grid host ─────────────────────────────────────────────────────────── */

[b-h0oclduhr8] .notifications-grid {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

    [b-h0oclduhr8] .notifications-grid .mud-table-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: auto !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    [b-h0oclduhr8] .notifications-grid .mud-table {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

/* ─── Row interaction ───────────────────────────────────────────────────── */

[b-h0oclduhr8] .notifications-grid-row-clickable {
    cursor: pointer;
}

    [b-h0oclduhr8] .notifications-grid-row-clickable td {
        cursor: pointer;
    }

    [b-h0oclduhr8] .notifications-grid-row-clickable:hover {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    }

/* ─── Section header ────────────────────────────────────────────────────── */

[b-h0oclduhr8] .notifications-section-header {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0.75rem 1.1rem 0.75rem 1.25rem !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-background-grey) 92%, white 8%) 0%, var(--mud-palette-background-grey) 100%);
    box-sizing: border-box !important;
}

    [b-h0oclduhr8] .notifications-section-header .mud-typography {
        font-weight: 600 !important;
        letter-spacing: 0.15px;
    }

/* ─── Layout containers ─────────────────────────────────────────────────── */

[b-h0oclduhr8] .notifications-grid-host {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

[b-h0oclduhr8] .notifications-empty-state {
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-h0oclduhr8] .notifications-text-body {
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
    padding: 1.25rem;
    box-sizing: border-box;
}

[b-h0oclduhr8] .notifications-text-content {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Keeps each main section self-contained with its own scroll */
[b-h0oclduhr8] .notifications-section {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
}

/* ─── Expandable row details ────────────────────────────────────────────── */

[b-h0oclduhr8] .notifications-row-details {
    padding: 0.75rem 1rem;
    border-top: 1px dashed var(--mud-palette-lines-default);
    background-color: color-mix(in srgb, var(--mud-palette-background-grey) 90%, white 10%);
}

/* ─── Desktop: hide expand arrow button (keep column structure intact) ──── */

/* ─── Desktop: remove expand arrow entirely ─────────────────────────────── */

@media (min-width: 901px) {
    /* Header cell */
    [b-h0oclduhr8] .notifications-grid .mud-table-head tr th:first-child {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }

    /* All body cells in first column */
    [b-h0oclduhr8] .notifications-grid .mud-table-body tr td:first-child {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }
}

/* ─── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    [b-h0oclduhr8] .notifications-dialog-root {
        width: calc(var(--app-vw) - 12px) !important;
        height: calc(var(--app-vh) - 12px) !important;
        max-height: calc(var(--app-vh) - 12px) !important;
    }

        [b-h0oclduhr8] .notifications-dialog-root .mud-dialog-content {
            min-height: 0 !important;
            overflow: hidden !important;
        }

    [b-h0oclduhr8] .notifications-dialog-layout {
        min-height: 0 !important;
        height: 100% !important;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr) !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    /* Hide secondary columns (utente, data) */
    [b-h0oclduhr8] th.notifications-col-hide-mobile,
    [b-h0oclduhr8] td.notifications-col-hide-mobile {
        display: none !important;
    }

    /* Hide "Commessa" header text on mobile (col kept for sort) */
    [b-h0oclduhr8] th.notifications-job-header .mud-typography,
    [b-h0oclduhr8] th.notifications-job-header span {
        visibility: hidden !important;
    }

    /* Prevent right-side clipping on narrow viewport */
    [b-h0oclduhr8] .notifications-grid .mud-table-container {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    /* Row border on tr, not on individual td (fixes gap with hidden columns) */
    [b-h0oclduhr8] .notifications-grid .mud-table-body tr {
        border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    }

        [b-h0oclduhr8] .notifications-grid .mud-table-body tr td {
            border-bottom: none !important;
        }

    .book-preview-stage[b-h0oclduhr8] {
        overscroll-behavior-x: none;
        overscroll-behavior-y: none;
    }
}

/* Phones: MudBlazor stacks the table cells below 600px. Keep one line per notification (arrow + job name),
   so the table never needs a sideways scroll and the expand arrow is always reachable. */
@media (max-width: 600px) {
    [b-h0oclduhr8] .notifications-grid table,
    [b-h0oclduhr8] .notifications-grid tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-h0oclduhr8] .notifications-grid tbody tr:has(> td:nth-child(2)) {
        display: flex !important;
        align-items: center;
        width: 100%;
    }

    [b-h0oclduhr8] .notifications-grid tbody tr:not(:has(> td:nth-child(2))) {
        display: block !important;
        width: 100%;
    }

    [b-h0oclduhr8] .notifications-grid tbody tr:not(:has(> td:nth-child(2))) > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    [b-h0oclduhr8] .notifications-grid tbody td::before {
        display: none !important;
    }

    [b-h0oclduhr8] .notifications-grid tbody tr > td:first-child:not(:last-child) {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    [b-h0oclduhr8] .notifications-grid tbody tr > td:nth-child(2) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    [b-h0oclduhr8] .notifications-grid tbody td .mud-stack {
        min-width: 0;
        max-width: 100%;
    }

    [b-h0oclduhr8] .notifications-grid tbody td .mud-typography {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    [b-h0oclduhr8] .notifications-grid tbody td .notifications-row-details .mud-typography {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /Components/Shared/OperationProgressDialog.razor.rz.scp.css */
.operation-progress-overlay[b-ydgnb1pzgw] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18); /* your custom transparency */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Shared/SignaturePreviewDialog.razor.rz.scp.css */
[b-379d7q3yw9] .sv-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
}

[b-379d7q3yw9] .sv-dialog .mud-dialog-actions {
    padding: 0 !important;
    overflow: hidden !important;
}

/* TOP BAR: name, size, version and status of the signature */
.sv-topbar[b-379d7q3yw9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.sv-topbar[b-379d7q3yw9]  .sv-chip.mud-chip {
    flex: none;
    margin: 0;
}

.sv-spacer[b-379d7q3yw9] {
    flex: 1 1 0;
}

/* STAGE (dark, like the page preview): the image scrolls inside it */
.sv-root[b-379d7q3yw9] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.sv-stage[b-379d7q3yw9] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
    background-color: #262626;
}

.sv-scroll[b-379d7q3yw9] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    background-color: #262626;
}

.sv-scroll--dragging[b-379d7q3yw9] {
    cursor: grabbing;
    user-select: none;
}

/* While the sheet is moved sideways to change the signature the area does not scroll (the moved sheet would add scrollbars) */
.sv-scroll--swiping[b-379d7q3yw9] {
    overflow: hidden;
}

/* The image sits in the middle when it is smaller than the area and scrolls when it is bigger ("margin: auto" never hides its left side) */
.sv-center[b-379d7q3yw9] {
    position: relative;
    display: flex;
    min-width: 100%;
    min-height: 100%;
    padding: 12px;
    box-sizing: border-box;
}

/* The larger drawing of the same side, laid over the image by the script (position and size) once the zoom needs it and it has loaded */
.sv-detail[b-379d7q3yw9] {
    position: absolute;
    display: none;
    max-width: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.sv-image[b-379d7q3yw9] {
    display: block;
    flex: none;
    max-width: none;
    margin: auto;
    background-color: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-drag: none;
}

.sv-image--loading[b-379d7q3yw9] {
    visibility: hidden;
}

.sv-skeleton[b-379d7q3yw9] {
    position: absolute;
    inset: 12px;
    z-index: 3;
    overflow: hidden;
    border-radius: 8px;
    background: #1f1f1f;
    pointer-events: none;
}

/* The blink is the one of MudSkeleton, like on the cards; only its color is darker here */
.sv-skeleton[b-379d7q3yw9]  .mud-skeleton {
    background-color: #3a3a3a;
}

.sv-missing[b-379d7q3yw9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 280px;
    color: #FFFFFF;
}

/* LIVE INFO: the pages of the signature coloured by approval state. A panel over the stage (colours from the theme, like the PDF boxes
   panel of the page preview) that runs the whole height and scrolls inside; on phones it is a sheet at the bottom. The state colour of a
   row is --live-state, set by the markup; the row is only a pale tint of it, so the text of the theme stays readable in light and dark. */
.sv-live[b-379d7q3yw9] {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100% - 24px));
    padding: 12px 16px 16px;
    box-sizing: border-box;
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.sv-live__header[b-379d7q3yw9] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.sv-live__title[b-379d7q3yw9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sv-live__sig[b-379d7q3yw9] {
    min-width: 0;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sv-live__body[b-379d7q3yw9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sv-live__empty[b-379d7q3yw9] {
    color: var(--mud-palette-text-secondary);
}

.sv-live__legend[b-379d7q3yw9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 10px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.sv-live__legend-item[b-379d7q3yw9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Front and back side by side where there is room; one under the other where there is not (the whole panel scrolls) */
.sv-live__sides[b-379d7q3yw9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
}

.sv-live__side-header[b-379d7q3yw9] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-weight: 700;
}

.sv-live__count[b-379d7q3yw9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The green of "approved" mixed with the text colour of the theme: the pure green is too pale to read as text on the white paper */
.sv-live__count--complete[b-379d7q3yw9] {
    color: color-mix(in srgb, #10B981 45%, var(--mud-palette-text-primary));
}

.sv-live__list[b-379d7q3yw9] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-live__row[b-379d7q3yw9] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 5px 8px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--live-state);
    background: color-mix(in srgb, var(--live-state) 20%, var(--mud-palette-surface));
}

/* A page that is not in the database (not sent yet): no colour, dashed, so a hole in the signature is plain to see */
.sv-live__row--missing[b-379d7q3yw9] {
    border-left: 4px dashed var(--mud-palette-text-disabled);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.sv-live__num[b-379d7q3yw9] {
    flex: 0 0 2.2em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.sv-live__dot[b-379d7q3yw9] {
    flex: none;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--live-state);
}

.sv-live__dot--missing[b-379d7q3yw9],
.sv-live__row--missing .sv-live__dot[b-379d7q3yw9] {
    border: 1px dashed var(--mud-palette-text-disabled);
    background: transparent;
}

.sv-live__name[b-379d7q3yw9] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Tablets in portrait and below: one column, narrower, so the signature stays visible beside it */
@media (max-width: 900px) {
    .sv-live[b-379d7q3yw9] {
        width: min(360px, calc(100% - 24px));
    }
}

/* Phones: a sheet at the bottom (like the panels of the page preview), the signature stays visible above it */
@media (max-width: 600px) {
    .sv-live[b-379d7q3yw9] {
        top: auto;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: 45%;
        padding: 10px 12px 12px;
    }
}

/* BOTTOM BAR: groups ("pills"). Wide: one row. Tablets and phones: the arrow on top folds it away (only the arrow and Close are left). */
.sv-actions-row[b-379d7q3yw9] {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.sv-bar[b-379d7q3yw9] {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
    padding: 10px 16px;
    box-sizing: border-box;
}

.sv-group[b-379d7q3yw9] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.sv-group--pill[b-379d7q3yw9] {
    padding: 3px;
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, var(--mud-palette-surface));
}

/* Download and Close stay on the right */
.sv-group--end[b-379d7q3yw9] {
    gap: 8px;
    margin-left: auto;
}

.sv-bar[b-379d7q3yw9]  .sv-btn.mud-icon-button {
    padding: 8px;
    border-radius: 11px;
}

.sv-side-btn[b-379d7q3yw9] {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 11px;
    background-color: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sv-side-btn--active[b-379d7q3yw9] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    color: var(--mud-palette-primary);
}

.sv-side-btn:focus-visible[b-379d7q3yw9] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

@media (hover: hover) {
    .sv-side-btn:not(.sv-side-btn--active):hover[b-379d7q3yw9] {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    }
}

.sv-counter[b-379d7q3yw9] {
    min-width: 3.2em;
    padding: 0 6px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1279px) {
    .sv-bar[b-379d7q3yw9] {
        gap: 8px;
        padding: 10px 12px;
    }
}

/* Tablets and phones: the arrow (AppBarToggle, drawn in app.css) has a row of its own above the groups; its strip takes the place of the
   bar's top padding. Folded, only the arrow and the Download and Close buttons are left, on one row. */
@media (max-width: 1099px) {
    .sv-bar[b-379d7q3yw9] {
        justify-content: space-between;
        padding-top: 2px;
    }

    .sv-bar[b-379d7q3yw9]  .app-bar-handle {
        display: block;
        order: 0;
        flex: 0 0 100%;
    }

    html[data-bar-signature="closed"] .sv-bar > .sv-group:not(.sv-group--end)[b-379d7q3yw9] {
        display: none;
    }

    html[data-bar-signature="closed"] .sv-bar[b-379d7q3yw9]  .app-bar-handle {
        order: 1;
        flex: 1 1 0;
    }

    html[data-bar-signature="closed"] .sv-bar > .sv-group--end[b-379d7q3yw9] {
        order: 2;
    }
}

/* Phones: Close becomes an icon */
@media (max-width: 600px) {
    .sv-bar[b-379d7q3yw9] {
        gap: 6px 8px;
        padding: 8px 10px 8px;
    }

    .sv-label[b-379d7q3yw9] {
        display: none;
    }

    .sv-group--end[b-379d7q3yw9]  .mud-button-root {
        min-width: 0;
        padding: 8px;
    }

    .sv-group--end[b-379d7q3yw9]  .mud-button-icon-start {
        margin: 0;
    }

    .sv-bar[b-379d7q3yw9]  .sv-btn.mud-icon-button {
        padding: 7px;
    }

    .sv-topbar[b-379d7q3yw9] {
        padding: 6px 10px;
    }
}

@media (max-width: 400px) {
    .sv-bar[b-379d7q3yw9]  .sv-btn.mud-icon-button {
        padding: 5px;
    }

    .sv-side-btn[b-379d7q3yw9] {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
    }
}