/* /Components/Layout/MainLayout.razor.rz.scp.css */

/*Microsoft Default Purple Sidebar*/
/*.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/

/* This covers the HTML tag AND the flex layout */
/*main, .main {
    background-color: #faf9f8 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;*/
    /* THE FIX: Put the line on the LEFT of the content area */
    /* This ensures it sits perfectly against the white sidebar */
    /*border-left: 1px solid #d1d1d1 !important;
}*/

/* ============================================================================ */
/* 🏎️ WRENCHLOGIX PRODUCTION STAGE ENGINE                                        */
/* 🚀 THE APPLE CORE FIX: Forces WebKit to open up adaptive overflow scroll tracks */
/* ============================================================================ */
main[b-lry4xz2y7x], .main[b-lry4xz2y7x] {
    background-color: #faf9f8 !important;
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-left: 1px solid #d1d1d1 !important;
    /* 🚀 THE CRITICAL UPGRADE: Opens up fluid scrolling across all Apple viewports */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

.sidebar[b-lry4xz2y7x] {
    width: 200px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important; /* Remove all sidebar borders */
    z-index: 10;
}


/* 2. THE PAGE BACKGROUND (Fluent Grey) */
.page[b-lry4xz2y7x] {
    display: flex;
    flex-direction: row;
    background-color: #faf9f8 !important; /* Neutral Lighter background */
}

/* Ensure the content doesn't hit the edges */
article[b-lry4xz2y7x] {
    padding: 2rem !important; /* The "Million-Dollar" breathing room */
    max-width: 1600px; /* Optional: keeps it from getting TOO wide on giant monitors */
    margin: 0 auto; /* Centers the content if you use max-width */
    width: 100%;
}

/* 3. THE TOP ROW (Clean Audit) */
.top-row[b-lry4xz2y7x] {
    background-color: #ffffff !important;
    border-bottom: 1px solid #edebe9 !important;
    /* This ensures the top row doesn't have a double-line on the left */
    margin-left: -1px;
}

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

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

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

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

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

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

    .sidebar[b-lry4xz2y7x] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        /* ADD THESE THREE LINES TO FIX THE DESKTOP MODE */
        background: #ffffff !important;
        border-right: 1px solid #edebe9 !important;
        box-shadow: none !important;
    }

    .top-row[b-lry4xz2y7x] {
        position: sticky;
        top: 0;
        z-index: 100; /* Increased to stay on top */
        background: #ffffff !important;
        border-bottom: 1px solid #edebe9 !important;
    }

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

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

#blazor-error-ui[b-lry4xz2y7x] {
    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-lry4xz2y7x] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* 1. When the tech-mode class is active, we kill the sidebar's ghost space */
.page.tech-mode main[b-lry4xz2y7x] {
    margin-left: 0 !important;
}

/* 2. Responsive fix: Make sure it stretches on desktops too */
@media (min-width: 641px) {
    .page.tech-mode main[b-lry4xz2y7x] {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* ============================================================================
   📱 WRENCHLOGIX GLOBAL RESPONSIVE MEDIA BREAKPOINTS
   ============================================================================ */

/* --- 💻 1. DESKTOP MODE (Automatically triggers on screens 768px and wider) --- */
@media (min-width: 768px) {
    .sidebar[b-lry4xz2y7x] {
        width: 250px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block !important;
    }

    .main-content[b-lry4xz2y7x] {
        margin-left: 250px;
    }

    .mobile-header[b-lry4xz2y7x] {
        display: none !important;
    }
}


/* --- 📱 MOBILE MODE BREAKPOINT (Screens under 768px wide) --- */
@media (max-width: 767.98px) {
    .mobile-header[b-lry4xz2y7x] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: #1e1e2d;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 100005 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }

    .menu-btn[b-lry4xz2y7x] {
        border-color: rgba(255,255,255,0.2) !important;
        cursor: pointer;
    }

    /* 🚀 Primary Mobile Sidebar Layout Frame Placement */
    .sidebar[b-lry4xz2y7x] {
        position: fixed !important;
        top: 60px !important;
        bottom: 0 !important;
        left: -100% !important; /* Concealed off the left side of the touch glass border */
        width: 100% !important;
        z-index: 100004 !important;
        background-color: #1e1e2d !important;
        transition: left 0.25s ease-in-out !important;
        display: block !important;
    }

    /* ============================================================================
       🏎️ THE PURE STYLING MIRACLE FOR .NET 10 STATIC HOOKS
       When the user taps the label button, the hidden checkbox ticks, and this rule 
       instantly slides your navigation links panel directly onto the mobile glass!
       ============================================================================ */
    #menu-toggle:checked ~ .sidebar[b-lry4xz2y7x] {
        left: 0 !important;
    }

   /* .main-content {
        margin-left: 0 !important;
        padding-top: 65px !important;
    }*/

    .content-wrapper[b-lry4xz2y7x] {
        padding: 12px !important;
    }
}



/* /Components/Layout/NavMenu.razor.rz.scp.css */

/* 1. THE MAIN SIDEBAR CONTAINER (The Flat Look) */
.nav-scrollable[b-5993fb39ju] {
    background-color: #ffffff !important;
    box-shadow: none !important;
    /* DELETE THE BORDER-RIGHT LINE HERE */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start;
}


/* 2. THE NAV LINKS (The "Pill" Style) */
.nav-item[b-5993fb39ju]  a {
    color: #323130 !important;
    font-size: 0.9rem;
    font-weight: 400;
    transition: all 0.15s ease;
    border-radius: 6px;
    margin: 4px 12px;
    padding: 10px 16px;
    /* THE FIX: Force horizontal alignment */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

    /* 3. HOVER (Subtle Grey) */
    .nav-item[b-5993fb39ju]  a:hover {
        background-color: #f3f2f1 !important; /* Fluent light grey hover */
        color: #0078d4 !important; /* Fluent Blue */
        text-decoration: none;
    }

    /* 4. ACTIVE (The "365" Look) */
    .nav-item[b-5993fb39ju]  a.active {
        background-color: #eff6fc !important; /* Soft Blue Tint */
        color: #0078d4 !important; /* Fluent Blue */
        font-weight: 600;
        box-shadow: none; /* Remove the old glow */
        position: relative;
    }

        /* The 365 "Active Indicator" Bar */
        .nav-item[b-5993fb39ju]  a.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 3px;
            background-color: #0078d4;
            border-radius: 0 4px 4px 0;
        }

/* 5. ICONS (Fluent Style) */
.nav-item[b-5993fb39ju]  i {
    font-size: 1.2rem;
    margin-right: 12px; /* Space between icon and text */
    width: 24px; /* Fixes icon width so text stays perfectly aligned */
    display: flex;
    justify-content: center;
    color: #605e5c;
}

.nav-item[b-5993fb39ju]  a.active i,
.nav-item[b-5993fb39ju]  a:hover i {
    color: #0078d4;
}

/* 2. THE TOP ROW (Logo Area) */
.top-row.navbar[b-5993fb39ju] {
    background-color: #ffffff !important;
    /* Match the divider color for a seamless look */
    border-bottom: 1px solid #edebe9;
    box-shadow: none !important;
    padding: 1.25rem 1rem;
}

.navbar-brand[b-5993fb39ju] {
    /* THE FIX: Use Microsoft's primary blue or a rich dark grey */
    color: #0078d4 !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.25rem;
    /* Ensure it doesn't have any leftover shadows from the old dark theme */
    text-shadow: none !important;
}

    /* If your logo is an actual IMAGE instead of text, add this: */
    .navbar-brand img[b-5993fb39ju] {
        filter: none !important; /* Removes any "invert" filters we had for dark mode */
        max-height: 40px;
    }


.hover-bg:hover[b-5993fb39ju] {
    background-color: #f3f2f1; /* Light grey hover to match 365 style */
    transition: background 0.2s ease;
}

.cursor-pointer[b-5993fb39ju] {
    cursor: pointer;
}

.x-small[b-5993fb39ju] {
    font-size: 0.7rem;
}



/*This block of code was our dark theme side bar*/
/*.nav-item ::deep a {
    color: #a2a3b7 !important;
    transition: all 0.2s ease;
    border-radius: 12px;
    margin: 0 8px;
    text-align: center;
}

    .nav-item ::deep a:hover {
        background-color: rgba(255,255,255,0.05);
        color: #fff !important;
    }

    .nav-item ::deep a.active {
        background-color: #009ef7 !important;*/ /* The "Electric Blue" */
        /*color: #fff !important;
        box-shadow: 0 0 15px rgba(0, 158, 247, 0.4);
    }

.nav-item ::deep i {
    transition: transform 0.2s ease;
}

.nav-item ::deep a:active i {
    transform: scale(0.9);*/ /* Sensation of pressing a real button */
/*}


.navbar-brand {
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff !important;
}*/

/* This targets the branding area specifically */
/*.top-row.navbar {
    background-color: rgba(0,0,0,0.3) !important;*/ /* Makes it a dark "cap" for the sidebar */
    /*border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}*/


/*EVERYTHING BELOW WAS MICROSOFT VERSIONS*/

/*.navbar-toggler {
    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 {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu {
    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' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu {
    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' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu {
    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-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}*/
/* Add this to NavMenu.razor.css */
/*.bi-people-nav-menu {
    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");
}


.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item ::deep .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

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

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

        /* Allow sidebar to scroll for tall menus */
        /*height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}*/
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ejphh2qk3v],
.components-reconnect-repeated-attempt-visible[b-ejphh2qk3v],
.components-reconnect-failed-visible[b-ejphh2qk3v],
.components-pause-visible[b-ejphh2qk3v],
.components-resume-failed-visible[b-ejphh2qk3v],
.components-rejoining-animation[b-ejphh2qk3v] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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