@import '_content/Elioplus.DesignSystem/Elioplus.DesignSystem.kkrjzfx7zf.bundle.scp.css';

/* /Layout/AuthLayout.razor.rz.scp.css */
/* The verification and access-denied screens: the card centred on a soft gradient of the
   theme's background, so it follows light and dark mode. */
.auth-layout[b-eytm5yf5ns] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--mud-palette-background) 0%, var(--mud-palette-gray-lighter) 100%);
}
/* /Layout/NavBar.razor.rz.scp.css */
/* The API health pill in the app bar: a status dot (green and slowly pulsing when the API
   answers, red when it does not) beside its label. Colours come from the theme classes in
   the markup, so the dot follows light and dark mode. */
.health-indicator[b-07bag13grp] {
    padding: 4px 10px;
    border-radius: var(--ds-radius-pill);
}

.health-indicator__dot[b-07bag13grp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.health-indicator__dot--pulse[b-07bag13grp] {
    animation: health-pulse-b-07bag13grp 3s ease-in-out infinite;
}

@keyframes health-pulse-b-07bag13grp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .health-indicator__dot--pulse[b-07bag13grp] {
        animation: none;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* NavMenu styles - handled by MudBlazor NavMenu component. */
/* /Pages/Dashboard.razor.rz.scp.css */
/* Column widths of the monthly usage table. */
.usage-col--wide[b-x88w5kmx8f] {
    width: 30%;
}

.usage-col--narrow[b-x88w5kmx8f] {
    width: 20%;
}

.usage-col[b-x88w5kmx8f] {
    width: 25%;
}
/* /Shared/UsagePercentBar.razor.rz.scp.css */
/* The percentage sits in a fixed-width, right-aligned column so the bars line up. MudText
   carries no scope attribute of its own, hence ::deep from the plain wrapper. */
.usage-bar[b-8ogsz71poe]  .usage-bar__value {
    min-width: 40px;
    text-align: right;
}