/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-7eh85of2yo] {
    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;
}

    /* .dismiss is a real <button> (it needs an accessible name and keyboard operation), so the
       browser's default button chrome has to be stripped back to the bare glyph the span used to be.
       The class name stays: blazor.web.js wires the hide to a click on .dismiss. */
    #blazor-error-ui .dismiss[b-7eh85of2yo] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        appearance: none;
        background: none;
        border: 0;
        /* 0.5rem padding takes the hit box to 32px — as large as the 40px-tall error bar allows
           (the kit's 44px bar would overflow it). */
        padding: 0.5rem;
        color: inherit;
        line-height: 0;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5yuj2t5dl5],
.components-reconnect-repeated-attempt-visible[b-5yuj2t5dl5],
.components-reconnect-failed-visible[b-5yuj2t5dl5],
.components-pause-visible[b-5yuj2t5dl5],
.components-resume-failed-visible[b-5yuj2t5dl5],
.components-rejoining-animation[b-5yuj2t5dl5],
.planit-updated-visible[b-5yuj2t5dl5] {
    display: none;
}

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

/* The "a deploy just landed" state: whatever reconnect state the dialog is in, show ONLY the
   updated message + Reload button (the circuit is gone for good — retrying can't help). */
#components-reconnect-modal.planit-updated .components-reconnect-container > *[b-5yuj2t5dl5] {
    display: none;
}

#components-reconnect-modal.planit-updated .planit-updated-visible[b-5yuj2t5dl5] {
    display: block;
}

.planit-updated-badge[b-5yuj2t5dl5] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background-color: #E6F3FD;
    color: #15659B;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

#components-reconnect-modal.planit-updated .planit-updated-badge[b-5yuj2t5dl5] {
    display: flex;
}

.planit-updated-title[b-5yuj2t5dl5] {
    font-weight: 600;
    font-size: 1.05rem;
    color: #16303F;
}


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-5yuj2t5dl5] {
    border: 0;
    background-color: #15659B;
    color: white;
    padding: 8px 28px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-5yuj2t5dl5] {
        background-color: #124F79;
    }

    #components-reconnect-modal button:active[b-5yuj2t5dl5] {
        background-color: #15659B;
    }

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

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

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

@keyframes components-rejoining-animation-b-5yuj2t5dl5 {
    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;
    }
}