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

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

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

/* ⛔ min-height, never a fixed height. The header carries the status dots, the connect buttons and
   the exchange rate, and on a narrow window that is more than one line. With height: 3.5rem the
   second line was simply cut off, which hides exactly the thing a header is for (seen in a
   screenshot on 24 August 2026, when the rate badge was added). */
.top-row[b-mp96572g63] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    min-height: 3.5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

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

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

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

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

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

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

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

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

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

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

/*
   The notification dock, right of the content. It takes no width of its own: the panel inside it
   decides that (a quarter of the window normally, a narrow strip when it is collapsed), so
   collapsing needs no communication between the two. See .mvt-activity in app.css.
*/
.activity-dock[b-mp96572g63] {
    flex: 0 0 auto;
}

@media (min-width: 641px) {
    .activity-dock[b-mp96572g63] {
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

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

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

.navbar-brand[b-1epzueghcd] {
    font-size: 1.1rem;
}

/* Every menu icon is a Telerik SVG icon, so it takes the colour of the line it sits on (the theme
   paints .k-svg-icon > svg with fill: currentColor) and turns white on hover and on the active item.
   The fixed width keeps every label starting on the same pixel, whatever the shape of the icon. */
.nav-icon[b-1epzueghcd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    margin-right: 0.75rem;
}

.nav-item[b-1epzueghcd] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-1epzueghcd]  .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[b-1epzueghcd]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

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

/* ⛔ A group folds open and shut with nothing but CSS, the same hidden-checkbox trick as the
   hamburger above, and deliberately not with a Blazor @onclick: this menu also renders on the
   statically rendered Identity screens (/Account/**), where there is no circuit to handle a click
   and the header would simply be dead. */
.nav-group[b-1epzueghcd] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-group__toggle[b-1epzueghcd] {
    display: none;
}

.nav-group__header[b-1epzueghcd] {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    padding: 0 1rem;
    cursor: pointer;
}

.nav-group__header:hover[b-1epzueghcd] {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* The chevron is drawn in CSS instead of with an icon, so that no icon in this menu is used twice.
   Pointing down while the group is shut, up while it is open. */
.nav-group__header[b-1epzueghcd]::after {
    content: "";
    margin-left: auto;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid rgba(255, 255, 255, 0.55);
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    transform: rotate(45deg);
    transition: transform 0.15s ease-in-out;
}

.nav-group__toggle:checked + .nav-group__header[b-1epzueghcd]::after {
    transform: rotate(225deg);
}

.nav-group__items[b-1epzueghcd] {
    display: none;
}

.nav-group__toggle:checked ~ .nav-group__items[b-1epzueghcd] {
    display: block;
}

/* Inside a group the items carry no padding of their own, and their labels are indented so a
   sub-item reads as part of the group above it. */
.nav-group__items .nav-item:first-of-type[b-1epzueghcd] {
    padding-top: 0;
}

.nav-group__items .nav-item:last-of-type[b-1epzueghcd] {
    padding-bottom: 0;
}

.nav-group__items .nav-item[b-1epzueghcd]  .nav-link {
    padding-left: 1.75rem;
}

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

/* The version line sits at the bottom left of the sidebar, not under the last menu item.
   ⛔ Both rules are needed. margin-top: auto puts it at the bottom while the menu is short, and
   position: sticky keeps it in sight once the menu is longer than the window: an administrator sees
   eleven items, which already overflows a 720-pixel window, and with margin alone the line then
   scrolls out of the bottom of the screen (measured 25 August 2026). The colour is the end of the
   sidebar gradient, so the menu items scroll underneath it instead of through it. */
.nav-version[b-1epzueghcd] {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background-color: #3a0647;
    padding: 0.75rem 1rem 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
}

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

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

    /* Also matches the :checked variant above, which is more specific: a window widened after the
       menu was toggled open would otherwise fall back to display: block and lose the bottom line. */
    .nav-scrollable[b-1epzueghcd],
    .navbar-toggler:checked ~ .nav-scrollable[b-1epzueghcd] {
        /* Never collapse the sidebar for wide screens, and lay it out as a column so the version
           line can be pushed to the bottom. */
        display: flex;
        flex-direction: column;

        /* 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-03ueb8u19o],
.components-reconnect-repeated-attempt-visible[b-03ueb8u19o],
.components-reconnect-failed-visible[b-03ueb8u19o],
.components-pause-visible[b-03ueb8u19o],
.components-resume-failed-visible[b-03ueb8u19o],
.components-rejoining-animation[b-03ueb8u19o] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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