/* =============================================
   Application status system: the badges, the
   status filters, the Facility Status and Info
   Requested panels, and the Status Flow page.
   Colors match the flowchart at
   /installer/admin/status-flow/ and the groups
   declared in installer/models.py. Change one
   and the diagram has to be redrawn to match.
   ============================================= */

.status-badge {
    font-weight: 600;
}

.status-badge--flett {
    background-color: var(--in-flett-wash);
    color: var(--in-flett-text);
    border: 1px solid var(--in-flett);
}

.status-badge--installer {
    background-color: var(--in-amber-wash);
    color: var(--in-amber-text);
    border: 1px solid var(--in-amber);
}

.status-badge--complete {
    background-color: var(--in-complete-wash);
    color: var(--in-complete-text);
    border: 1px solid var(--in-complete);
}

.status-badge--unresponsive {
    background-color: var(--in-idle-wash);
    color: var(--in-idle-text);
    border: 1px solid var(--in-idle);
}

.status-waiting-note {
    color: var(--in-text-faint);
}

/* Status filter chips (Installer Details), one per status, tinted by its
   owner group; unchecked, a chip goes plain */
.status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px 3px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--in-text-2);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.status-filter input {
    margin: 0;
    accent-color: var(--in-accent);
    cursor: pointer;
}

.status-filter--flett {
    border-color: rgba(37, 99, 235, 0.25);
    background-color: rgba(37, 99, 235, 0.1);
}

.status-filter--installer {
    border-color: rgba(217, 138, 11, 0.3);
    background-color: rgba(217, 138, 11, 0.12);
}

.status-filter--complete {
    border-color: rgba(22, 163, 74, 0.25);
    background-color: rgba(22, 163, 74, 0.1);
}

.status-filter--unresponsive {
    border-color: rgba(154, 163, 175, 0.4);
    background-color: rgba(154, 163, 175, 0.18);
}

.status-filter:not(:has(input:checked)) {
    border-color: var(--in-border);
    background-color: transparent;
    color: var(--in-text-faint);
}

.status-filter:has(input:focus-visible) {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

/* Unticks every chip, or ticks them all again: a small button, the chips'
   height and shape */
.status-filters__all {
    min-height: 0;
    border-radius: 999px;
    line-height: 1.4;
}

/* Facility status row (installer/_facility_status.html): the Facility Status
   panel and the Info Requested panel beside it. The phases take the brand
   greens from light to dark in flowchart order; Info Requested and the
   outcomes keep their owner-group colors from above. */
.facility-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

@media (min-width: 992px) {
    .facility-overview {
        grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    }
}

.facility-status {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.facility-status__body {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    padding: 20px 24px;
}

.facility-status__open {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 96px;
    padding-right: 28px;
    border-right: 1px solid var(--in-border-soft);
}

.facility-status__open-value {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    color: var(--in-text);
}

.facility-status__open-label {
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--in-text-faint);
}

.facility-status__pipeline {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* The phase bar, Received > Info Gathering > Review: an arrow each, as tall
   as its count. Closed, an arrow is as wide as its part of the open
   facilities (--share, set by the template in hundredths of a percent) but
   never narrower than its numeral and count, a phase with none takes no
   room, and the labels are hidden. Open, the arrows are bigger, as wide as
   each other and labelled. The same elements do both, so a click slides one
   into the other. The 2px gaps are the card showing through, and the bar's
   rounded ends clip the arrows at either end. */
.facility-status__bar {
    --arrow: 9px;
    display: flex;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.facility-status__bar[aria-expanded="true"] {
    --arrow: 14px;
}

.facility-status__bar.is-empty:not([aria-expanded="true"]) {
    background-color: var(--in-track);
}

.facility-status__phase--new {
    --phase-fill: var(--in-phase-new);
    --phase-text: var(--in-phase-new-text);
}

.facility-status__phase--info_gathering {
    --phase-fill: var(--in-phase-info);
    --phase-text: var(--in-phase-info-text);
}

.facility-status__phase--in_review {
    --phase-fill: var(--in-phase-review);
    --phase-text: var(--in-phase-review-text);
}

/* --notch and --point are how deep the arrow's tail and point are: the
   bar's ends are flat, so the first phase has no notch and the last no
   point. */
.facility-status__phase {
    --notch: var(--arrow);
    --point: var(--arrow);
    position: relative;
    z-index: 0;
    display: flex;
    flex: 0 1 calc(var(--share) * 0.01%);
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 4px 8px 4px calc(var(--notch) + 8px);
    color: var(--phase-text);
}

.facility-status__bar[aria-expanded="true"] .facility-status__phase {
    flex-basis: calc(100% / 3);
    min-height: 58px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.facility-status__phase:first-child {
    --notch: 0px;
}

.facility-status__phase:last-child {
    --point: 0px;
}

.facility-status__phase.is-zero {
    min-width: 0;
}

.facility-status__bar:not([aria-expanded="true"]) .facility-status__phase.is-zero {
    --point: 0px;
    padding-right: 0;
    padding-left: 0;
}

/* Closed, a phase with none takes no room, so the first and last phases
   with any facilities are the bar's ends. */
.facility-status__bar:not([aria-expanded="true"]) .facility-status__phase:not(.is-zero):not(.facility-status__phase:not(.is-zero) ~ *) {
    --notch: 0px;
}

.facility-status__bar:not([aria-expanded="true"]) .facility-status__phase:not(.is-zero):not(:has(~ .facility-status__phase:not(.is-zero))) {
    --point: 0px;
}

/* The arrow: its point reaches into the next phase's notch, 2px short. The
   six corners stay six at the bar's ends, where the notch or point is 0, so
   the shape slides between closed and open. */
.facility-status__phase::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: calc(2px - var(--point));
    z-index: -1;
    background-color: var(--phase-fill);
    clip-path: polygon(0 0, calc(100% - var(--point)) 0, 100% 50%, calc(100% - var(--point)) 100%,
                       0 100%, var(--notch) 50%);
}

.facility-status__phase:last-child::before {
    right: 0;
}

/* Closed, the last phase with any facilities runs to the bar's end */
.facility-status__bar:not([aria-expanded="true"]) .facility-status__phase:not(.is-zero):not(:has(~ .facility-status__phase:not(.is-zero)))::before {
    right: 0;
}

.facility-status__bar:hover .facility-status__phase::before {
    filter: brightness(0.94);
}

.facility-status__count {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
}

.facility-status__bar:not([aria-expanded="true"]) .is-zero .facility-status__count {
    opacity: 0;
}

/* The phase's numeral before its count, closed, in Cinzel (linked by
   installer_base.html) on a pill tinted with the phase's text color; open,
   the label names the phase. */
.facility-status__numeral {
    flex: none;
    align-self: center;
    max-width: 4em;
    margin-right: 0.45em;
    padding: 0.2em 0.55em 0.15em;
    overflow: hidden;
    border-radius: 999px;
    background-color: color-mix(in srgb, currentColor 15%, transparent);
    font-family: "Cinzel", Georgia, serif;
    font-size: 0.6em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.facility-status__bar[aria-expanded="true"] .facility-status__numeral {
    max-width: 0;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    opacity: 0;
}

/* Its width of 0 keeps the label from widening a closed segment, and the
   min-width then gives it the segment's width. */
.facility-status__label {
    display: block;
    width: 0;
    min-width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.facility-status__bar[aria-expanded="true"] .facility-status__label {
    max-height: 4em;
    opacity: 1;
}

/* Open, each phase's statuses sit under its arrow, a badge each with its
   count, in a column as wide as the arrow; closed, they fold away. Their
   rows grow from 0fr, so the fold slides with the bar. */
.facility-status__statuses {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
}

.facility-status__bar[aria-expanded="true"] + .facility-status__statuses {
    grid-template-rows: 1fr;
    visibility: visible;
}

.facility-status__statuses-inner {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.facility-status__phase-statuses {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 12px 4px 2px;
    list-style: none;
}

.facility-status__phase-statuses li {
    max-width: 100%;
}

.facility-status__status {
    display: inline-block;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 4px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
}

.facility-status__status-count {
    margin-right: 5px;
    font-weight: 800;
}

.facility-status__status.is-zero {
    opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
    .facility-status__statuses {
        transition: grid-template-rows 0.3s ease, visibility 0.3s;
    }


    .facility-status__bar {
        transition: background-color 0.3s ease;
    }

    .facility-status__phase {
        transition: flex-basis 0.3s ease, min-height 0.3s ease, padding 0.3s ease;
    }

    .facility-status__phase::before {
        transition: right 0.3s ease, clip-path 0.3s ease, filter 0.15s ease;
    }

    .facility-status__count {
        transition: opacity 0.3s ease;
    }

    .facility-status__numeral {
        transition: max-width 0.3s ease, margin-right 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    }

    .facility-status__label {
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }
}

.facility-status__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    padding: 12px 24px 14px;
    border-top: 1px solid var(--in-border-soft);
    font-size: 0.9rem;
    color: var(--in-text-faint);
}

.facility-status__outcome,
.facility-status__total {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.facility-status__outcome-value {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--in-text);
}

.facility-status__outcome::before {
    content: "";
    align-self: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.facility-status__outcome--complete::before {
    background-color: var(--in-complete);
}

.facility-status__outcome--unresponsive::before {
    background-color: var(--in-idle);
}

.facility-status__total {
    margin-left: auto;
}

/* Info Requested: amber, like its badge and the installer's composer on an
   Info Requested facility, only while something is waiting. */
.info-requested {
    display: flex;
    flex-direction: column;
}

.info-requested.is-due {
    border-color: var(--in-amber-border);
    box-shadow: inset 3px 0 0 var(--fe-primary-gold);
}

.info-requested.is-due .panel__head {
    border-bottom-color: var(--in-amber-border);
    background-color: var(--in-amber-wash);
    box-shadow: inset 3px 0 0 var(--fe-primary-gold);
}

.info-requested.is-due .panel__title {
    color: var(--in-amber-text);
}

.info-requested__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 18px;
}

.info-requested:not(.is-due) .info-requested__body {
    align-items: center;
    justify-content: center;
}

.info-requested__summary {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--in-text);
    text-wrap: balance;
}

.info-requested__count {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--in-amber-text);
}

.info-requested__empty {
    max-width: 240px;
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--in-text-faint);
}

/* Pulled out by the items' side padding, so their text lines up with the
   sentence above while the hover wash runs a little wider. */
.info-requested__list {
    align-self: stretch;
    margin: 14px -6px 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--in-border-soft);
}

.info-requested__list li {
    border-bottom: 1px solid var(--in-border-soft);
}

.info-requested__item {
    display: block;
    padding: 8px 6px;
}

.info-requested__item:hover,
.info-requested__item:focus {
    background-color: var(--in-hover);
    text-decoration: none;
}

.info-requested__line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.info-requested__name,
.info-requested__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-requested__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--in-accent);
}

.info-requested__item:hover .info-requested__name {
    text-decoration: underline;
}

.info-requested__date {
    flex: none;
    font-size: 0.8rem;
    color: var(--in-text-faint);
}

.info-requested__meta {
    display: block;
    font-size: 0.8rem;
    color: var(--in-text-faint);
}

.info-requested__more {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--in-text-faint);
}

/* A dot on a status badge, for staff: the registration is on Pending
   Applicant Signature and its Schedule A looks to have come back
   (installer/up_next.py), so it wants looking at. Gold, as the sidebar's
   unread dot is, ringed in the surface under it. --inline sits after a
   label instead of on a badge's corner. */
.status-badge--dot {
    position: relative;
}

.status-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--fe-primary-gold);
    box-shadow: 0 0 0 2px var(--in-surface);
    pointer-events: none;
}

.status-dot--inline {
    position: static;
    display: inline-block;
    margin-left: 7px;
    vertical-align: 1px;
    pointer-events: auto;
}

/* Up Next (admin/_up_next.html): the Admin Dashboard's window beside
   Facility Status, where the installers' pages have Info Requested, and
   gold as that panel is: its edge, and its head in the amber wash. A tile
   for each kind of registration that waits on us, its count over its name,
   linking to the Up Next page: four across, or two where the window is
   narrow. Under them the Received registrations that are new. */
.up-next {
    display: flex;
    flex-direction: column;
    border-color: var(--in-amber-border);
    box-shadow: inset 3px 0 0 var(--fe-primary-gold);
    container-type: inline-size;
}

.up-next .panel__head {
    border-bottom-color: var(--in-amber-border);
    background-color: var(--in-amber-wash);
    box-shadow: inset 3px 0 0 var(--fe-primary-gold);
}

.up-next .panel__title,
.up-next__all,
.up-next__all:hover,
.up-next__all:focus {
    color: var(--in-amber-text);
}

.up-next .panel__count {
    background-color: var(--in-surface);
    color: var(--in-amber-text);
}

.up-next__all {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.up-next__all .fa {
    margin-left: 2px;
    font-size: 0.7rem;
}

/* 3px more on the left, for the gold edge */
.up-next__body {
    flex: 1 1 auto;
    padding: 14px 16px 16px 19px;
}

.up-next__tiles,
.up-next__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.up-next__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@container (min-width: 420px) {
    .up-next__tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.up-next__tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    padding: 10px 12px 11px;
    border: 1px solid var(--in-border-soft);
    border-radius: 8px;
    background-color: var(--in-sheet);
    color: var(--in-text);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.up-next__tile:hover,
.up-next__tile:focus {
    border-color: var(--in-amber-border);
    background-color: var(--in-amber-wash);
    color: var(--in-text);
    text-decoration: none;
}

/* The count, with what marks it beside it: how many are new, or the dot */
.up-next__figure {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
}

.up-next__figure .status-dot--inline {
    margin-left: 0;
}

.up-next__count {
    color: var(--in-text);
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.up-next__label {
    color: var(--in-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.up-next__tile.is-zero .up-next__count {
    color: var(--in-text-faint);
    font-weight: 400;
}

.up-next__tile.is-zero .up-next__label {
    color: var(--in-text-faint);
}

.up-next__new {
    padding: 1px 7px;
    border: 1px solid var(--in-amber-border);
    border-radius: 999px;
    background-color: var(--in-amber-wash);
    color: var(--in-amber-text);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.up-next__heading {
    margin: 16px 0 0;
    color: var(--in-text-faint);
    font-family: inherit;
    font-size: 0.68rem !important;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Pulled out by the items' side padding, so their text lines up with the
   tiles while the hover wash runs a little wider */
.up-next__list {
    margin: 6px -6px 0;
    border-top: 1px solid var(--in-border-soft);
}

.up-next__list li {
    border-bottom: 1px solid var(--in-border-soft);
}

.up-next__item {
    display: block;
    padding: 7px 6px;
}

.up-next__item:hover,
.up-next__item:focus {
    background-color: var(--in-hover);
    text-decoration: none;
}

.up-next__line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.up-next__name,
.up-next__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-next__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--in-accent);
}

.up-next__item:hover .up-next__name {
    text-decoration: underline;
}

.up-next__date {
    flex: none;
    font-size: 0.8rem;
    color: var(--in-text-faint);
}

.up-next__meta {
    display: block;
    font-size: 0.8rem;
    color: var(--in-text-faint);
}

.up-next__more {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.8rem;
}

/* The Up Next page (admin/up_next.html): its toggle, a count in each view,
   which wraps on a phone; and under a Signature Returned row's badge, the
   file the check found */
.up-next-views {
    flex-wrap: wrap;
    max-width: 100%;
}

.up-next-views__count {
    margin-left: 7px;
    color: var(--in-text-faint);
    font-size: 0.85em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.up-next-file {
    margin-top: 5px;
    overflow-wrap: anywhere;
}

/* Filtering counts (admin dashboard, Installer Details): a quiet wash on
   hover, the Flett tint on the count the page's table is filtered by; a
   status badge takes a ring in its own color instead. A count of none has
   nothing to filter. */
button.facility-status__outcome {
    margin: -4px -6px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
}

/* This count sits inside a sentence, so its wash hugs the number. */
button.info-requested__count {
    margin: 0 -3px;
    padding: 0 3px;
    border-radius: 4px;
    cursor: pointer;
}

button.facility-status__status {
    cursor: pointer;
}

button.facility-status__outcome:disabled,
button.facility-status__status:disabled {
    cursor: default;
}

button.facility-status__outcome:not(:disabled):hover,
button.info-requested__count:hover {
    background-color: var(--in-hover);
}

button.facility-status__status:not(:disabled):hover {
    filter: brightness(0.95);
}

button.facility-status__outcome.is-active,
button.info-requested__count.is-active {
    background-color: var(--in-flett-wash);
    box-shadow: inset 0 0 0 1px var(--in-flett);
}

button.facility-status__status.is-active {
    box-shadow: 0 0 0 2px var(--in-surface), 0 0 0 4px currentColor;
}

.facility-overview button:focus {
    outline: none;
}

.facility-overview button:focus-visible {
    outline: 2px solid var(--in-flett);
    outline-offset: 2px;
}

/* Narrow cards stack: the open count sits on one line above the bar. */
@container (max-width: 540px) {
    .facility-status__body {
        flex-direction: column;
        gap: 18px;
        padding: 16px;
    }

    .facility-status__open {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 10px;
        padding-right: 0;
        border-right: 0;
    }

    .facility-status__open-value {
        font-size: 2.4rem;
    }

    .facility-status__open-label {
        margin-top: 0;
    }

    .facility-status__pipeline {
        flex: 0 0 auto;
    }

    .facility-status__bar[aria-expanded="true"] {
        --arrow: 10px;
    }

    .facility-status__label {
        letter-spacing: 0.03em;
    }

    .facility-status__phase-statuses {
        gap: 5px;
        padding-right: 2px;
        padding-left: 2px;
    }

    .facility-status__status {
        padding: 3px 6px;
        font-size: 0.7rem;
    }

    .facility-status__footer {
        gap: 8px 22px;
        padding: 12px 16px 14px;
    }
}

/* ----- The Status Flow page (admin/admin_status_flow.html): the flowchart,
   which opens full screen ----- */
.status-flow-figure {
    overflow-x: auto;
    padding-bottom: 8px;
}

.status-flow-diagram {
    display: block;
    width: 100%;
    min-width: 1800px;
    height: auto;
}

.status-flow-diagram {
    cursor: zoom-in;
}

.status-flow-updated {
    margin: 12px 0 0;
    color: var(--in-text-faint);
    font-size: 0.85rem;
}

/* Full-screen view of the diagram */
.status-flow-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1080;
    background: rgba(15, 23, 42, 0.92);
    overflow: auto;
}

.status-flow-lightbox[hidden] {
    display: none;
}

.status-flow-lightbox-open {
    overflow: hidden;
}

.status-flow-lightbox__stage {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px 24px;
}

.status-flow-lightbox__img {
    width: 2180px;
    max-width: none;
    height: auto;
    background: #fff;
    border-radius: 8px;
}

.status-flow-lightbox__close {
    position: fixed;
    top: 16px;
    right: 24px;
    z-index: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    line-height: 1;
    font-size: 30px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    cursor: pointer;
}

.status-flow-lightbox__close:hover,
.status-flow-lightbox__close:focus {
    background: rgba(255, 255, 255, 0.25);
}