@import '_content/MyKhata360.Shared.UI/MyKhata360.Shared.UI.v9kr18p1m3.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Design Tokens ──────────────────────────────────────────────────── */
:root[b-bu3nlo49j2] {
    --sidebar-w: 260px;
    --topbar-h:  56px;
    --bottomnav-h: 64px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.16s;
    --t-med:  0.26s;
    --color-brand:   #f97316;
    --color-surface: #ffffff;
    --color-bg:      #f8fafc;
    --color-border:  #e2e8f0;
    --color-muted:   #64748b;
    --shadow-topbar:  0 1px 3px rgba(0,0,0,.08);
    --shadow-sidebar: 6px 0 28px rgba(0,0,0,.18);
}

/* ── Shell ──────────────────────────────────────────────────────────── */
.page[b-bu3nlo49j2] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--color-bg);
}

/* ── Sidebar — mobile/tablet: fixed overlay drawer ───────────────────── */
.sidebar[b-bu3nlo49j2] {
    width: min(var(--sidebar-w), calc(100vw - 56px));
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    background: linear-gradient(180deg, #1a2234, #151b29);
    transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.open[b-bu3nlo49j2] {
    transform: translateX(0);
    box-shadow: var(--shadow-sidebar);
}

/* ── Sidebar backdrop ───────────────────────────────────────────────── */
.sidebar-backdrop[b-bu3nlo49j2] {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(15, 23, 42, 0.48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease);
}

.sidebar-backdrop.open[b-bu3nlo49j2] {
    opacity: 1;
    pointer-events: all;
}

/* ── Main area ──────────────────────────────────────────────────────── */
main[b-bu3nlo49j2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--bottomnav-h);
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.top-row[b-bu3nlo49j2] {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px;
}

/* ── Hamburger ──────────────────────────────────────────────────────── */
.hamburger[b-bu3nlo49j2] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 9px;
    transition: background var(--t-fast) var(--ease);
}

.hamburger:hover[b-bu3nlo49j2] { background: #f1f5f9; }

.hamburger span[b-bu3nlo49j2] {
    display: block;
    width: 17px;
    height: 2px;
    background: #475569;
    border-radius: 2px;
    transition: transform var(--t-fast) var(--ease),
                opacity   var(--t-fast) var(--ease);
}

/* ── Article ────────────────────────────────────────────────────────── */
article.content[b-bu3nlo49j2] {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Bottom navigation (mobile only) ───────────────────────────────── */
.bottom-nav[b-bu3nlo49j2] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    height: var(--bottomnav-h);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: stretch;
    box-shadow: 0 -2px 16px rgba(0,0,0,.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav[b-bu3nlo49j2]  .bottom-nav-item,
.bottom-nav .bottom-nav-item[b-bu3nlo49j2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: color var(--t-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav[b-bu3nlo49j2]  .bottom-nav-item:hover,
.bottom-nav .bottom-nav-item:hover[b-bu3nlo49j2] {
    color: #64748b;
}

.bottom-nav[b-bu3nlo49j2]  .bottom-nav-item.active,
.bottom-nav .bottom-nav-item.active[b-bu3nlo49j2] {
    color: var(--color-brand);
}

.bottom-nav[b-bu3nlo49j2]  .bottom-nav-item.active::before,
.bottom-nav .bottom-nav-item.active[b-bu3nlo49j2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--color-brand);
    border-radius: 0 0 4px 4px;
}

.bn-icon[b-bu3nlo49j2] {
    font-size: 20px;
    line-height: 1;
}

/* ── Notification bell ──────────────────────────────────────────────── */
.notif-bell[b-bu3nlo49j2] { position: relative; display: inline-flex; align-items: center; }
.notif-badge[b-bu3nlo49j2] {
    position: absolute; top: -4px; right: -6px;
    background: #ef4444; color: white; border-radius: 10px;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; pointer-events: none; line-height: 1;
}
.notif-bell-btn[b-bu3nlo49j2] {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    color: #64748b; font-size: 20px; line-height: 1;
    border-radius: 8px; transition: background .15s;
}
.notif-bell-btn:hover[b-bu3nlo49j2] { background: #f1f5f9; }

/* ── Avatar button & dropdown ───────────────────────────────────────── */
.avatar-btn[b-bu3nlo49j2] {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    font-size: 13px; font-weight: 800; color: white; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f97316, #c2410c);
    transition: opacity .15s;
}
.avatar-btn:hover[b-bu3nlo49j2] { opacity: .85; }
/* Replaces the package theme toggle; sized to sit alongside the avatar button. */
.topbar-theme-btn[b-bu3nlo49j2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #475569;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.topbar-theme-btn:hover[b-bu3nlo49j2] {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.avatar-menu[b-bu3nlo49j2] {
    /* position/top/right are set inline (fixed, root-level) — see MainLayout.razor
       comment for why: top-row's z-index:100 stacking context would otherwise trap
       an absolutely-positioned menu nested inside it below the close-on-outside-click
       backdrop, regardless of this class's own z-index. */
    background: white; border-radius: 14px; min-width: 190px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14); border: 1px solid #e2e8f0;
    z-index: 500; overflow: hidden;
}
.avatar-menu a[b-bu3nlo49j2], .avatar-menu button[b-bu3nlo49j2] {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 16px; background: none; border: none;
    font-size: 13px; font-weight: 600; color: #374151; text-decoration: none;
    cursor: pointer; text-align: left; transition: background .1s;
}
.avatar-menu a:hover[b-bu3nlo49j2], .avatar-menu button:hover[b-bu3nlo49j2] { background: #f8fafc; }
.avatar-menu .menu-divider[b-bu3nlo49j2] { height: 1px; background: #f1f5f9; margin: 4px 0; }
.avatar-menu .menu-signout[b-bu3nlo49j2] { color: #dc2626; }

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

#blazor-error-ui .dismiss[b-bu3nlo49j2] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Tablet (640 px +): no bottom nav, overlay drawer still ─────────── */
@media (min-width: 640px) {
    .bottom-nav[b-bu3nlo49j2] { display: none; }
    main[b-bu3nlo49j2] { padding-bottom: 0; }
    .top-row[b-bu3nlo49j2] { padding: 0 20px; }
}

/* ── Desktop sidebar toggle button (hidden on mobile) ─────────────── */
.desktop-sidebar-toggle[b-bu3nlo49j2] {
    display: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 11px;
    color: #475569;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    flex-shrink: 0;
}
.desktop-sidebar-toggle:hover[b-bu3nlo49j2] { background: #f1f5f9; color: #1e293b; }

/* ── Desktop (1024 px +): persistent sidebar, true full-screen ──────── */
@media (min-width: 1024px) {
    .page[b-bu3nlo49j2] {
        flex-direction: row;
        height: 100dvh;
        overflow: hidden;
    }

    /* Floating rounded rail (reference design): inset from the viewport edges with a
       soft shadow, rather than a flush full-bleed column. */
    .sidebar[b-bu3nlo49j2] {
        position: sticky;
        top: 10px;
        height: calc(100dvh - 20px);
        margin: 10px 0 10px 10px;
        border-radius: 18px;
        flex-shrink: 0;
        transform: translateX(0);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
        transition: width var(--t-med) var(--ease),
                    transform var(--t-med) var(--ease),
                    box-shadow var(--t-med) var(--ease);
        overflow: hidden;
    }

    .sidebar.desktop-collapsed[b-bu3nlo49j2] { width: 56px; }

    /* Collapsed rail relies on each link's native title= tooltip — a CSS ::after pill
       can't escape .nav-scrollable, which must keep overflow-y:auto (the browser then
       forces overflow-x to auto too, clipping any tooltip). */

    /* Icon-only collapsed mode */
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nl          { display: none; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nl-group    { display: none; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  hr.nl-group  { display: none; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-link    { justify-content: center; padding: 0.5rem 0; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .ni          { margin-right: 0; font-size: 20px; width: auto; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .ni-badge    { display: flex; position: absolute; top: 2px; right: 4px; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-link    { position: relative; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer  { padding: 10px 0; align-items: center; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer-id { justify-content: center; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer-avatar { width: 30px; height: 30px; font-size: 11px; }

    /* Labels are hidden at this width, so stack the three account actions vertically —
       side by side they overflow the 56px rail and sign-out gets clipped. */
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer-actions { flex-direction: column; gap: 5px; width: 100%; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer-action  { width: 34px; margin: 0 auto; padding: 7px 0; flex: none; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .top-row     { padding-left: 0; justify-content: center; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .navbar-brand { justify-content: center; }

    .sidebar-backdrop[b-bu3nlo49j2] { display: none; }

    .hamburger[b-bu3nlo49j2] { display: none; }

    .desktop-sidebar-toggle[b-bu3nlo49j2] { display: flex; }

    main[b-bu3nlo49j2] {
        height: 100dvh;
        overflow: hidden;
        padding-left: 0;
    }

    .top-row[b-bu3nlo49j2] {
        padding-left: 1.25rem;
        padding-right: 1.5rem;
        flex-shrink: 0;
    }

    article.content[b-bu3nlo49j2] {
        flex: 1;
        height: 0; /* let flex calc the remaining height */
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
    }
}

/* ── Responsive top-bar ─────────────────────────────────────────────── */
.hdr-filter[b-bu3nlo49j2] { display: flex; }

.hdr-welcome[b-bu3nlo49j2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    min-width: 0;
    overflow: hidden;
}

.hdr-welcome-text[b-bu3nlo49j2] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-welcome-date[b-bu3nlo49j2] {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

.hdr-search-wrap[b-bu3nlo49j2] {
    width: 240px;
}

@media (max-width: 1199px) {
    .hdr-search-wrap[b-bu3nlo49j2] { width: 180px; }
}

@media (max-width: 1023px) {
    .hdr-filter[b-bu3nlo49j2] { display: none; }
    .hdr-search-wrap[b-bu3nlo49j2] { width: 160px; }
    .hdr-welcome-date[b-bu3nlo49j2] { display: none; }
}

@media (max-width: 767px) {
    .hdr-search-wrap[b-bu3nlo49j2] { width: 130px; }
    .hdr-welcome[b-bu3nlo49j2] { display: none; }
}

@media (max-width: 639px) {
    .hdr-search-wrap[b-bu3nlo49j2] { display: none; }
    .hdr-add-label[b-bu3nlo49j2]   { display: none; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-ysxirfw8d2] {
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.25);
}

.navbar-brand[b-ysxirfw8d2] {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0;
    color: white !important;
    text-decoration: none;
}

/* ── Icon element ─────────────────────────────────────── */
.ni[b-ysxirfw8d2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    width: 22px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.95);
    margin-right: 0.65rem;
    transition: color 0.15s;
    -webkit-text-stroke: 0.4px currentColor;
}

/* ── Label element ────────────────────────────────────── */
.nl[b-ysxirfw8d2] {
    transition: opacity 0.15s;
}

/* ── Notification badge (icon-mode version) ──────────── */
.ni-badge[b-ysxirfw8d2] {
    display: none;
    margin-left: auto;
    background: #ef4444;
    color: white;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
}

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

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

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

    .nav-item[b-ysxirfw8d2]  .nav-link {
        color: rgba(255, 255, 255, 0.82);
        background: none;
        border: none;
        border-radius: 11px;
        min-height: 2.4rem;
        height: auto;
        display: flex;
        align-items: center;
        line-height: 1.4;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.45rem 0.7rem;
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

/* Active row reads as a solid brand pill (see the reference sidebar design) rather
   than the old translucent tint + inset left bar. */
.nav-item[b-ysxirfw8d2]  a.active {
    background: linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.30);
    color: #ffffff;
    font-weight: 650;
}

.nav-item[b-ysxirfw8d2]  a.active .ni {
    color: white;
}

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

/* Hover must not repaint the active pill. */
.nav-item[b-ysxirfw8d2]  a.active:hover {
    background: linear-gradient(135deg, #ea6c0d, #f97316);
    color: #ffffff;
}

.nav-item[b-ysxirfw8d2]  .nav-link:hover .ni {
    color: white;
}

/* ── Always scrollable ───────────────────────────────── */
.nav-scrollable[b-ysxirfw8d2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

    .nav-scrollable[b-ysxirfw8d2]::-webkit-scrollbar {
        width: 4px;
    }

    .nav-scrollable[b-ysxirfw8d2]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-ysxirfw8d2]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }

.nav-notif-badge[b-ysxirfw8d2] {
    margin-left: auto;
    background: #ef4444;
    color: white;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 12px;
    min-width: 18px;
    text-align: center;
    line-height: 1.5;
    flex-shrink: 0;
}

.nav-section-label[b-ysxirfw8d2] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-section-label[b-ysxirfw8d2]::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f97316;
    flex-shrink: 0;
}

.nav-section-toggle[b-ysxirfw8d2] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 6px;
}

.nav-section-toggle:hover[b-ysxirfw8d2] {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

/* ── User footer ─────────────────────────────────────── */
.nav-footer[b-ysxirfw8d2] {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

/* Avatar + name/role sit on their own row; account actions go underneath. */
.nav-footer-id[b-ysxirfw8d2] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.nav-footer-actions[b-ysxirfw8d2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icon-only: the three labelled buttons needed ~237px side by side against a 236px
   rail, so they overflowed and the longest label wrapped. Icons alone fit easily and
   match the reference design's bottom action row; title= supplies the tooltip. */
.nav-footer-action[b-ysxirfw8d2] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.nav-footer-action i[b-ysxirfw8d2] {
    font-size: 15px;
    line-height: 1;
}

/* Labels are dropped in favour of the icon + native title tooltip. */
.nav-footer-action .nl[b-ysxirfw8d2] {
    display: none;
}

.nav-footer-action:hover[b-ysxirfw8d2] {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

.nav-footer-action-danger:hover[b-ysxirfw8d2] {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}


.nav-footer-avatar[b-ysxirfw8d2] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #fb923c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.nav-footer-info[b-ysxirfw8d2] {
    flex: 1;
    min-width: 0;
}

.nav-footer-name[b-ysxirfw8d2] {
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-footer-role[b-ysxirfw8d2] {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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