/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Ported from the Loadpad SC Portal's auth screen. Tokens live in wwwroot/app.css. */

.auth-page[b-d840fmk669] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
}

.auth-brand[b-d840fmk669] {
    position: relative;
    overflow: hidden;
    padding: 8vh 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--surface-strong);
    color: var(--surface-strong-foreground);
}

/* Concentric rings bleeding off the bottom-right corner — the panel's only ornament. */
.auth-brand[b-d840fmk669]::after {
    content: '';
    position: absolute;
    right: -240px;
    bottom: -280px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 90px rgba(255, 255, 255, 0.04), 0 0 0 190px rgba(255, 255, 255, 0.025);
}

.auth-brand > *[b-d840fmk669] {
    position: relative;
    z-index: 1;
}

.brand-mark[b-d840fmk669] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 12px;
}

.auth-brand h1[b-d840fmk669] {
    margin: 36px 0 20px;
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: inherit;
}

.auth-brand h1 em[b-d840fmk669] {
    font-style: normal;
    color: color-mix(in oklab, var(--primary), white 35%);
}

.auth-brand > p[b-d840fmk669] {
    margin: 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
}

.brand-points[b-d840fmk669] {
    margin: 52px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.brand-points li[b-d840fmk669] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

.brand-points svg[b-d840fmk669] {
    color: color-mix(in oklab, var(--primary), white 35%);
    flex: none;
}

.auth-card[b-d840fmk669] {
    width: min(430px, 82%);
    margin: auto;
    padding: 40px 0;
}

.mobile-brand[b-d840fmk669] {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mobile-brand .brand-mark[b-d840fmk669] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

@media (max-width: 1000px) {
    .auth-page[b-d840fmk669] {
        grid-template-columns: 1fr;
    }

    .auth-brand[b-d840fmk669] {
        display: none;
    }

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

main[b-7lkgw32qy4] {
    flex: 1;
    min-width: 0;
}

/* The portal's "surface strong" — a flat dark slate for app chrome, replacing the default
   template's blue-to-purple gradient. See wwwroot/app.css for the token definitions. */
.sidebar[b-7lkgw32qy4] {
    background: var(--surface-strong);
    color: var(--surface-strong-foreground);
}

/* No .top-row rules here — MainLayout renders no such element (NavMenu owns the only .top-row,
   styled in its own scoped stylesheet), so the template's original block never matched anything. */

.content[b-7lkgw32qy4] {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

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

    .sidebar[b-7lkgw32qy4] {
        /* No fixed width here — NavMenu's own root element (.sidebar-inner) owns the width and
           toggles it between expanded/collapsed, so this container just hugs whatever that is. */
        height: 100vh;
        position: sticky;
        top: 0;
    }

    article[b-7lkgw32qy4] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-7lkgw32qy4] {
    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-7lkgw32qy4] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-u0ss00bszi] {
    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-u0ss00bszi] {
    background-color: rgba(255, 255, 255, 0.5);
}

/* The sidebar header sits flush on the surface-strong panel rather than in its own darker
   band — the portal reserves contrast for the active nav item, not the chrome. */
.top-row[b-u0ss00bszi] {
    min-height: 4.25rem;
    background-color: transparent;
}

.navbar-brand[b-u0ss00bszi] {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--surface-strong-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Same accent tile as the auth screen's brand mark (AuthLayout.razor.css), one size down. */
.brand-mark[b-u0ss00bszi] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--primary);
    color: var(--primary-foreground);
}

/* Desktop sidebar collapse toggle — distinct from .navbar-toggler, which is the mobile hamburger. */
.collapse-toggle[b-u0ss00bszi] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: var(--radius);
    width: 2rem;
    height: 2rem;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    display: none;
}

.collapse-toggle:hover[b-u0ss00bszi] {
    background-color: rgba(255, 255, 255, 0.1);
}

.bi[b-u0ss00bszi] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

.bi-breakdown-alert-nav-menu[b-u0ss00bszi] {
    /* Octagon (stop-sign) with an exclamation-mark cutout — deliberately distinct from Faults'
       triangle, since Breakdowns is the most important section and sits at the top of the nav. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpolygon points='5,1 11,1 15,5 15,11 11,15 5,15 1,11 1,5'/%3E%3Crect x='7' y='4' width='2' height='5.5' rx='1' fill='rgba(0,0,0,0.45)'/%3E%3Crect x='7' y='10.5' width='2' height='2' rx='1' fill='rgba(0,0,0,0.45)'/%3E%3C/svg%3E");
}

.bi-person-badge-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z'/%3E%3Cpath d='M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h.6c.517-1.712 2.078-3 3.9-3s3.383 1.288 3.9 3h.6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2Z'/%3E%3C/svg%3E");
}

.bi-building-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 0a1 1 0 0 0-1 1v14H1a.5.5 0 0 0 0 1h14a.5.5 0 0 0 0-1h-1V1a1 1 0 0 0-1-1H3Zm1 2h2v2H4V2Zm3 0h2v2H7V2Zm3 0h2v2h-2V2ZM4 5h2v2H4V5Zm3 0h2v2H7V5Zm3 0h2v2h-2V5ZM4 8h2v2H4V8Zm3 0h2v2H7V8Zm3 0h2v2h-2V8ZM4 11h2v2H4v-2Zm3 0h2v2H7v-2Zm3 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

.bi-truck-front-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-truck-front-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v9.5A1.5 1.5 0 0 0 1.5 13H2a2 2 0 1 0 4 0h4a2 2 0 1 0 4 0h.5a.5.5 0 0 0 .5-.5V10a1 1 0 0 0-.14-.508l-1.855-3.09A.5.5 0 0 0 12.573 6H12V4.5a.5.5 0 0 0-.5-.5H2V2a.5.5 0 0 1 .5-.5H10a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 1.5V2H2Zm9.5 4.5V6h.573l1.5 2.5H11.5V4.5Z'/%3E%3C/svg%3E");
}

.bi-geo-alt-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-geo-alt-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
}

.bi-fuel-pump-fill-nav-menu[b-u0ss00bszi] {
    /* Simple filled fuel-pump silhouette (tank body + display + meter head + hose) built from
       plain rects rather than a hand-copied icon-font path, so it's guaranteed to render
       correctly. Chunkier proportions than a first pass, since thin shapes disappear at the
       ~20px size these nav icons render at. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='2' y='3' width='7' height='12' rx='1'/%3E%3Crect x='3.3' y='4.6' width='4.4' height='3.2' rx='0.4' fill='rgba(0,0,0,0.35)'/%3E%3Crect x='9.6' y='2' width='3' height='2.4' rx='0.5'/%3E%3Crect x='10.7' y='4.2' width='1.3' height='6.8' rx='0.65'/%3E%3Crect x='7.6' y='10' width='3.6' height='1.3' rx='0.65'/%3E%3C/svg%3E");
}

.bi-exclamation-triangle-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-exclamation-triangle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.89 0 1.438-.99.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

.bi-box-arrow-right-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z'/%3E%3C/svg%3E");
}

.nav-item[b-u0ss00bszi] {
    font-size: 0.875rem;
    padding-bottom: 0.125rem;
}

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

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

    .nav-item[b-u0ss00bszi]  .nav-link {
        color: rgba(255, 255, 255, 0.72);
        background: none;
        border: none;
        border-radius: var(--radius);
        height: 2.5rem;
        display: flex;
        align-items: center;
        line-height: 1;
        width: 100%;
        font-weight: 500;
        transition: background-color 0.15s, color 0.15s;
    }

/* Active is the accent colour rather than a white wash — the portal's one high-contrast
   element in the sidebar, so the current section is unmistakable. */
.nav-item[b-u0ss00bszi]  a.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
}

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

.nav-item[b-u0ss00bszi]  a.active:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.nav-text[b-u0ss00bszi] {
    white-space: nowrap;
    overflow: hidden;
}

.current-user[b-u0ss00bszi] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

.current-user .user-name[b-u0ss00bszi] {
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-user .logged-in-label[b-u0ss00bszi] {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* Icon + "Log out" text side by side; when collapsed, .nav-text hides and .bi's margin
   zeroes out (both existing rules below), leaving a centered icon-only button that fits
   the narrow collapsed sidebar instead of the full label overflowing past its edge. */
.logout-btn[b-u0ss00bszi] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-btn .bi[b-u0ss00bszi] {
    top: 0;
}

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

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

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

    .collapse-toggle[b-u0ss00bszi] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

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

        /* Shares the sidebar's height with .current-user (flex sibling below) instead of
           claiming 100% of it — otherwise .current-user gets pushed below the viewport fold
           and is only reachable by scrolling the whole page. Only scrolls internally if the
           nav links themselves are taller than the space left after .current-user. */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* This component's own root controls the sidebar's width — MainLayout's .sidebar has no
       fixed width of its own, so it just hugs whatever width this element currently has.
       Flex column + full height so .current-user (logged-in user + log out button) always
       renders pinned at the bottom of the sidebar, matching .sidebar's sticky 100vh in
       MainLayout.razor.css, rather than being pushed off past the fold. */
    .sidebar-inner[b-u0ss00bszi] {
        width: 250px;
        height: 100vh;
        display: flex;
        flex-direction: column;
        transition: width 0.15s ease-in-out;
        overflow-x: hidden;
    }

        /* Keep the top row and the logged-in-user footer at their natural size — only
           .nav-scrollable (flex: 1 1 auto above) should ever give up space. */
        .sidebar-inner .top-row[b-u0ss00bszi],
        .sidebar-inner .current-user[b-u0ss00bszi] {
            flex-shrink: 0;
        }

        .sidebar-inner.collapsed[b-u0ss00bszi] {
            width: 4.5rem;
        }

            .sidebar-inner.collapsed .nav-text[b-u0ss00bszi] {
                display: none;
            }

            .sidebar-inner.collapsed .nav-item[b-u0ss00bszi] {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            /* .current-user is also a .nav-item, so the rule above would otherwise leave its
               logout button flush against the sidebar's edges with no breathing room. Same
               specificity + !important, declared after, so this wins for this element only. */
            .sidebar-inner.collapsed .current-user[b-u0ss00bszi] {
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }

            .sidebar-inner.collapsed .nav-item[b-u0ss00bszi]  .nav-link {
                justify-content: center;
            }

            .sidebar-inner.collapsed .bi[b-u0ss00bszi] {
                margin-right: 0;
            }

            .sidebar-inner.collapsed .top-row .container-fluid[b-u0ss00bszi] {
                justify-content: center;
            }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-fixsiei6ok],
.components-reconnect-repeated-attempt-visible[b-fixsiei6ok],
.components-reconnect-failed-visible[b-fixsiei6ok],
.components-pause-visible[b-fixsiei6ok],
.components-resume-failed-visible[b-fixsiei6ok],
.components-rejoining-animation[b-fixsiei6ok] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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