/* /Components/Account/Shared/BankIdLogin.razor.rz.scp.css */
/* MudBlazor's .mud-button styling uppercases button text (Material default).
   BankID texts come from the manifest translations and must render exactly as
   authored, so undo the transform for everything inside the BankID panel. */
bankid-login[b-1fwa8y3dof],
bankid-login button[b-1fwa8y3dof] {
    text-transform: none;
}
/* /Components/Account/Shared/PswVisibilityToggleButton.razor.rz.scp.css */
/*
    The toggle is absolutely positioned inside the wrapper that also holds the text field, and
    that wrapper grows downwards when a validation message appears under the input. Centring on
    the wrapper therefore dragged the icon down the moment the field reported an error.

    Anchor it to the input row instead. Measured in the running app: the input control starts 8px
    below the wrapper's top edge, and an outlined MudTextField row is 56px (18.5px padding + ~19px
    line + 18.5px padding). The centre of the row is those two added together, and nothing
    rendered beneath the row can move it.

    This is also where the original `top: 55%` put the icon — 55% of the 64px the wrapper measures
    with no message showing is 35.2px, within a pixel of the row's centre. The drift was the bug;
    the resting position was already right.
*/
.password-visibility-toggle[b-cnc3yy2nlq] {
    right: 8px;
    top: calc(var(--optima-input-control-offset, 8px) + var(--optima-input-row-height, 56px) / 2);
    transform: translateY(-50%);
}
/* /Components/Layout/BackgroundSurface.razor.rz.scp.css */
.auth-background[b-thvgd17ts3] {
    min-height: 100vh;
    background-color: var(--mud-palette-primary-darken, transparent);
    background-image: var(--auth-background-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-t63zcoj0rc] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-t63zcoj0rc] {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-t63zcoj0rc] {
    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-t63zcoj0rc] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-gogt2rhyoe],
.components-reconnect-repeated-attempt-visible[b-gogt2rhyoe],
.components-reconnect-failed-visible[b-gogt2rhyoe],
.components-pause-visible[b-gogt2rhyoe],
.components-resume-failed-visible[b-gogt2rhyoe],
.components-rejoining-animation[b-gogt2rhyoe] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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