/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-3w5v2i2gdp],
.components-reconnect-repeated-attempt-visible[b-3w5v2i2gdp],
.components-reconnect-failed-visible[b-3w5v2i2gdp],
.components-pause-visible[b-3w5v2i2gdp],
.components-resume-failed-visible[b-3w5v2i2gdp],
.components-rejoining-animation[b-3w5v2i2gdp] {
    display: none;
}

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


#components-reconnect-modal[b-3w5v2i2gdp] {
    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-3w5v2i2gdp 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-3w5v2i2gdp {
    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/Shared/Popover.razor.rz.scp.css */
.wf-popover[b-x0krw2m42d] {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/*
 * Fixed, not absolute. An absolutely-positioned panel is clipped by any ancestor
 * with overflow:hidden — a panel card, a board column, a scrolling list — and
 * this app has around twenty of those. Anchoring to the viewport is the only
 * arrangement that works in all of them.
 *
 * And in the top layer, through the popover attribute, because a fixed panel
 * is still positioned against any ancestor that carries a transform. The task
 * drawer slides in with one; while a window is minimised the browser freezes
 * that animation on its first frame, the panel is placed against the drawer,
 * and when the window comes back and the animation finishes the panel jumps
 * to the far side of the page. The top layer answers to nobody's transform.
 *
 * The browser's own popover styling (inset: 0, margin: auto, a border, a
 * padding, a background) is undone here; the panel's contents bring their own.
 *
 * Hidden until workflow.positionPopover has measured it, otherwise it would
 * flash in the top-left corner on the first frame.
 */
.wf-popover-panel[b-x0krw2m42d] {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: inherit;
    z-index: 400;
    visibility: hidden;
}

/* A browser that knows the attribute keeps the panel display:none until it is
   shown; workflow.positionPopover shows it first. One that does not simply
   ignores the attribute and gets the fixed panel as before. */
.wf-popover-panel:popover-open[b-x0krw2m42d] {
    display: block;
}

/*
 * Where the browser can anchor the panel itself, it does, and the script only
 * shows it. The trigger carries an anchor name and the panel points at it;
 * the browser then places the panel against the trigger on every frame, in
 * the top layer, flipping above or sideways when there is no room — with no
 * measuring on our side. Measuring is what kept going wrong: a window that
 * was minimised, or a tab that was not on screen, reported a viewport of
 * nothing, and a panel placed by those numbers sat in the top-left corner.
 * The browser's own placement has no such moment.
 *
 * "left" means left edges aligned, below the trigger; "right" means right
 * edges aligned; "up" opens above. The same words workflow.positionPopover
 * understands, for the browsers that still need it.
 */
@supports (anchor-name: --wf) and (position-area: bottom span-right) {
    .wf-popover-panel[b-x0krw2m42d] {
        inset: auto;
        margin: 4px 0;
        position-area: bottom span-right;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        visibility: visible;
    }

    .wf-popover-panel[data-placement="right"][b-x0krw2m42d] {
        position-area: bottom span-left;
    }

    .wf-popover-panel[data-placement="up"][b-x0krw2m42d] {
        position-area: top span-right;
    }
}