/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-qji39fi67y] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-qji39fi67y] {
    flex: 1;
    /* Without this, the flex item's default min-width:auto refuses to shrink
       below its content's intrinsic width, so a wide child (the monthly-view
       calendar table) pushes the whole page wider than the viewport instead of
       letting .table-responsive scroll internally. See #198. */
    min-width: 0;
}

.sidebar[b-qji39fi67y] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-qji39fi67y] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-qji39fi67y]  a, .top-row[b-qji39fi67y]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-qji39fi67y]  a:hover, .top-row[b-qji39fi67y]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-qji39fi67y]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-qji39fi67y] {
        justify-content: space-between;
    }

    .top-row[b-qji39fi67y]  a, .top-row[b-qji39fi67y]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-qji39fi67y] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

    .top-row.auth[b-qji39fi67y]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-qji39fi67y], article[b-qji39fi67y] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-qji39fi67y] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-qji39fi67y] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-wjipvt9b80] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-wjipvt9b80] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-wjipvt9b80] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-wjipvt9b80] {
    font-size: 1.1rem;
}

/* Every nav icon renders via the loaded Bootstrap-Icons font (exact
   bi-* glyph names in NavMenu.razor). This box just reserves a fixed
   width so the labels line up and adds right-margin spacing. */
.bi[b-wjipvt9b80] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
}

.nav-item[b-wjipvt9b80] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-wjipvt9b80] {
        padding-top: 1rem;
    }

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

    .nav-item[b-wjipvt9b80]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-wjipvt9b80]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-wjipvt9b80]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

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

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

    .nav-scrollable[b-wjipvt9b80] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-eh1kvyqccs],
.components-reconnect-repeated-attempt-visible[b-eh1kvyqccs],
.components-reconnect-failed-visible[b-eh1kvyqccs],
.components-pause-visible[b-eh1kvyqccs],
.components-resume-failed-visible[b-eh1kvyqccs],
.components-rejoining-animation[b-eh1kvyqccs] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-eh1kvyqccs {
    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/MonthlyView.razor.rz.scp.css */
/* #309: the calendar stays mounted during month/patient reloads; the loading
   state is an overlay on top of it (rather than swapping the table for a bare
   spinner, which detached the table from the DOM and raced the E2E assertion). */
.monthly-view-content[b-e9h6tquu7o] {
    position: relative;
}

/* Dim the stale calendar while the next range loads, so the overlay reads as
   "refreshing" rather than "frozen". */
/* Transition on the base rule so opacity animates both into AND out of the
   loading state — if it lived only in the .is-loading rule it would vanish the
   moment the class is removed and some browsers wouldn't animate back to 1. */
.monthly-view-content > .card[b-e9h6tquu7o] {
    transition: opacity 0.1s ease-in-out;
}

.monthly-view-content.is-loading > .card[b-e9h6tquu7o] {
    opacity: 0.5;
}

.monthly-view-loading-overlay[b-e9h6tquu7o] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4rem;
    /* Let clicks fall through to nothing meaningful; the pickers sit above this
       region, so the overlay only covers the calendar content. */
    pointer-events: none;
}
/* /Components/Shared/CrisisResources.razor.rz.scp.css */
.crisis-resources[b-zwu4rjllh2] {
    border: 1px solid #f0d0d0;
    background-color: #fff6f6;
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

.crisis-resources-compact[b-zwu4rjllh2] {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.crisis-resources-heading[b-zwu4rjllh2] {
    font-weight: 600;
    color: #a02020;
    margin-bottom: 0.5rem;
}

.crisis-resources-list[b-zwu4rjllh2] {
    margin: 0;
    padding-left: 1.1rem;
}

.crisis-resources-list li[b-zwu4rjllh2] {
    margin-bottom: 0.35rem;
}

.crisis-resources-list li:last-child[b-zwu4rjllh2] {
    margin-bottom: 0;
}
/* /Components/Shared/ImportStepper.razor.rz.scp.css */
/* Horizontal step indicator for the import wizard (#361). Styled with Bootstrap
   CSS custom properties so it tracks the app's theme (light/dark) automatically.
   The connecting line between two steps is drawn as two halves — each step's
   ::after (right half) and the next step's ::before (left half) — and a segment
   fills primary only once the step it leaves is complete. */

.import-stepper[b-vncyakzrgo] {
    margin-bottom: 1.5rem;
}

.import-stepper ol[b-vncyakzrgo] {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.import-stepper .step[b-vncyakzrgo] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Connector halves — centered vertically on the 2rem marker. */
.import-stepper .step[b-vncyakzrgo]::before,
.import-stepper .step[b-vncyakzrgo]::after {
    content: "";
    position: absolute;
    top: 1rem;
    height: 2px;
    width: 50%;
    background: var(--bs-border-color);
}

.import-stepper .step[b-vncyakzrgo]::before { left: 0; }
.import-stepper .step[b-vncyakzrgo]::after { right: 0; }
.import-stepper .step:first-child[b-vncyakzrgo]::before { display: none; }
.import-stepper .step:last-child[b-vncyakzrgo]::after { display: none; }

/* Fill the path up to (and into) the current step. */
.import-stepper .step.complete[b-vncyakzrgo]::after,
.import-stepper .step.complete[b-vncyakzrgo]::before,
.import-stepper .step.active[b-vncyakzrgo]::before {
    background: var(--bs-primary);
}

.import-stepper .marker[b-vncyakzrgo] {
    position: relative;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

.import-stepper .step.active .marker[b-vncyakzrgo] {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.import-stepper .step.complete .marker[b-vncyakzrgo] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.import-stepper .label[b-vncyakzrgo] {
    margin-top: .375rem;
    font-size: .8125rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
}

.import-stepper .step.active .label[b-vncyakzrgo] {
    color: var(--bs-primary);
    font-weight: 600;
}

.import-stepper .step.complete .label[b-vncyakzrgo] {
    color: var(--bs-body-color);
}
/* /Components/Shared/SegmentedChoice.razor.rz.scp.css */
/* Segmented button group: ONE contiguous control, never a set of loose buttons
   and never a wrapped grid (#450).

   An ordinal scale reads as a progression — None → Mild → Moderate → Severe.
   Splitting it into a 2x2 grid destroys that reading, and gaps + per-button
   radii make four segments look like four independent buttons. So the group
   stays on one row at every width, segments butt against each other, and only
   the outer ends are rounded — matching the medication adherence group, which
   already reads as one control.

   Laid out as a grid rather than a flex row so it can never force its container
   (and the whole page) wider than the viewport — the #198 bug. minmax(0, 1fr)
   is what lets a column shrink below its content's intrinsic width instead of
   pushing the row out.

   HOW THE NARROW CASE IS SOLVED, and why it changed. #198 and #249 fixed
   overflow and orphaned segments by REFLOWING (4-up -> 2x2 -> 1-up). Those bugs
   must stay fixed, but reflow is exactly what #450 removes, so the lever moves
   from column count to segment size: the same container-query breakpoints now
   step type and padding down instead of rewrapping. Four columns at every
   width, progressively tighter.

   container-type is anchored on a dedicated .segmented-choice class (not the
   Bootstrap .mb-3 spacing utility) so the container query can't silently stop
   applying if the wrapper's spacing class is ever changed. */
.segmented-choice[b-xdmyx6xwk4] {
    container-type: inline-size;
}

.btn-group.w-100[b-xdmyx6xwk4] {
    display: grid;
    grid-template-columns: repeat(var(--seg-count, 4), minmax(0, 1fr));
    /* No gap: shared edges are what make this read as one control. */
    gap: 0;
}

    /* Square the inner edges and collapse the shared borders, so N segments
       render as one bar with N-1 dividing lines rather than N outlined boxes.
       Logical properties (inline-start/end) rather than left/right so the bar
       stays correct if the app is ever rendered RTL. */
    .btn-group.w-100 > .btn[b-xdmyx6xwk4] {
        margin-left: 0;
        border-radius: 0;
        /* Collapse the shared border: every segment but the first drops its
           leading border so neighbours don't stack a 2px double rule. */
        margin-inline-start: calc(var(--bs-border-width, 1px) * -1);
    }

    .btn-group.w-100 > .btn:first-child[b-xdmyx6xwk4] {
        margin-inline-start: 0;
        border-start-start-radius: var(--bs-btn-border-radius, 0.375rem);
        border-end-start-radius: var(--bs-btn-border-radius, 0.375rem);
    }

    .btn-group.w-100 > .btn:last-child[b-xdmyx6xwk4] {
        border-start-end-radius: var(--bs-btn-border-radius, 0.375rem);
        border-end-end-radius: var(--bs-btn-border-radius, 0.375rem);
    }

    /* The selected segment renders solid while its neighbours are outlines, so
       it has to sit above them or its own border is overdrawn by the next
       segment's negative margin. Focus likewise, or the focus ring is clipped
       by the neighbour — which would make the keyboard navigation #381 adds
       hard to follow. */
    .btn-group.w-100 > .btn:not([class*="btn-outline-"])[b-xdmyx6xwk4] {
        position: relative;
        z-index: 1;
    }

    /* Strictly above the selected segment, not merely above the outlines
       (#608 review). At equal z-index the later sibling wins, and every segment
       overlaps its predecessor by the collapsed border — so focusing the segment
       immediately BEFORE the selected one put its focus ring under that overlap.
       That is the arrow-key path #381 adds, so the ring has to outrank
       everything in the group rather than tie with it. */
    .btn-group.w-100 > .btn:focus-visible[b-xdmyx6xwk4] {
        position: relative;
        z-index: 2;
    }

/* #350: an *unselected* option (`.btn-outline-*`) must always read as empty —
   an unfilled, coloured outline — so re-clicking the active option to clear it
   produces an obviously blank group. Bootstrap's default is the opposite: on
   hover/focus/active an outline button fills solid with its colour. Because the
   pointer sits on the button at the moment you click-to-clear, that hover-fill
   makes the just-cleared "untracked" state look identical to a *selected* one —
   worst for the grey "None"/secondary option, where cleared (#6c757d) and
   selected-hovered (#5c636a) are near-indistinguishable greys (#350).

   Keep the coloured border + text (so each option still signals what it would
   become), but hold the background transparent through hover/focus/active. This
   is driven off Bootstrap's own per-button custom properties, so it stays
   correct for every colour. Scoped to `.btn-outline-*` only: the *selected*
   option renders as a solid `.btn-<colour>` and keeps its fill on hover. */
    .btn-group.w-100 > .btn[class*="btn-outline-"]:hover[b-xdmyx6xwk4],
    .btn-group.w-100 > .btn[class*="btn-outline-"]:focus[b-xdmyx6xwk4],
    .btn-group.w-100 > .btn[class*="btn-outline-"]:active[b-xdmyx6xwk4] {
        background-color: transparent;
        color: var(--bs-btn-color);
        border-color: var(--bs-btn-border-color);
    }

/* Long labels must not blow their column open — that is what forced the page
   wide in #198. Each segment's text shrinks to its share and, if it truly
   cannot fit, ellipsises rather than overflowing. The container queries below
   exist so this ellipsis is a last resort that real labels don't reach:
   SegmentedScaleNarrowWidthE2ETests pins that "Moderate" and "Not tracked"
   still render in full at 320px. */
    .btn-group.w-100 > .btn[b-xdmyx6xwk4] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Narrow: keep every column, shrink the type and padding instead. Same 22rem
   breakpoint #249 used to reflow — the width at which four columns can no
   longer hold "Moderate"/"Not tracked" at full size — but the response is now
   to make the text fit rather than to break the scale apart. */
@container (max-width: 22rem) {
    .btn-group.w-100 > .btn[b-xdmyx6xwk4] {
        --bs-btn-padding-x: 0.25rem;
        --bs-btn-font-size: 0.8125rem;
    }
}

/* The 4-up severity scale at a 320px viewport is the tightest real case in the
   app, and 0.8125rem was measured too large for it: "Moderate" clipped, while
   the 3-up menstrual scale's wider "Not tracked" column was fine. So this step
   exists for the four-column case specifically rather than for a narrower
   container.

   Sized by measurement, not by eye — SeverityScale_AtNarrowWidth_StaysOnOneRow_WithNoLabelClipped
   reports the overflow in px when it fails. Abbreviating to "Mod" was the
   alternative and is deliberately not taken: a shortened word on a clinical
   severity scale costs the user more than a smaller one. */
@container (max-width: 18rem) {
    .btn-group.w-100 > .btn[b-xdmyx6xwk4] {
        --bs-btn-padding-x: 0.125rem;
        --bs-btn-font-size: 0.75rem;
    }
}

/* Very narrow (small phones, and the mood log's own md columns at their
   tightest). Still one row — a single-column stack would read as four separate
   controls, which is precisely the bug. */
@container (max-width: 11rem) {
    .btn-group.w-100 > .btn[b-xdmyx6xwk4] {
        --bs-btn-padding-x: 0.125rem;
        --bs-btn-font-size: 0.6875rem;
    }
}
/* /Components/Shared/SeverityTrack.razor.rz.scp.css */
/* #427: the predicted band, drawn on the 0–3 severity track.

   The track is the full scale (None at 0%, Severe at 100%) so two dimensions'
   bands can be compared against each other — the defect Dr. V read as "the
   scales are all over the place" was partly that each row's mark meant
   something different. */

.band-track[b-03yrt7ysyb] {
    position: relative;
    height: 25px;
    border-radius: 0.25rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    overflow: hidden;
}

/* Level gridlines at 1 and 2 — the ends are labelled beneath the track, and
   these are what let a reader tell Mild from Moderate without counting. */
.band-track[b-03yrt7ysyb]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right,
        transparent calc(33.333% - 1px), var(--bs-border-color, #dee2e6) calc(33.333% - 1px),
        var(--bs-border-color, #dee2e6) 33.333%, transparent 33.333%,
        transparent calc(66.667% - 1px), var(--bs-border-color, #dee2e6) calc(66.667% - 1px),
        var(--bs-border-color, #dee2e6) 66.667%, transparent 66.667%);
    pointer-events: none;
}

/* The plausible range. Lightened so the expected marker reads on top of it,
   and floored at a visible width so a low == high prediction still shows the
   level it landed on rather than disappearing.

   The floor is wider than the 4px marker on purpose. The span is centred on its
   level (#504), so a floor of exactly the marker's width would sit under it and
   show nothing at all — the disappearance this rule exists to prevent. At 12px
   it reads as an even 4px either side of the marker: present, and pointing
   nowhere. At the two ends of the scale the span is held inside the clipped
   track instead, so that one is one-sided — as is the marker beneath it, and
   for the same reason: there is no scale left to draw on. */
.band-span[b-03yrt7ysyb] {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 12px;
    opacity: 0.4;
}

/* The most likely level. Solid and full-height: this is the one value the
   reader takes away, and the band around it is the caveat. The horizontal
   shift is set inline — at 0% and 100% the marker sits flush inside the track
   instead of being centred and half-clipped by the container. */
.band-expected[b-03yrt7ysyb] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--bs-body-color, #212529);
}