/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
/* Sign-in shell: the identity pages shown to visitors. No sidebar; the
brand and the theme toggle on top, one centered card, the version below.
Works at phone width (the card fills the viewport minus 1rem gutters). */
.signin-shell[b-fibjwkx6ei] {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
background:
radial-gradient(circle at 15% 10%, rgba(var(--ea-blue-rgb), .10), transparent 30rem),
radial-gradient(circle at 85% 90%, rgba(var(--ea-blue-rgb), .06), transparent 28rem);
}
.signin-header[b-fibjwkx6ei] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem clamp(1rem, 4vw, 3rem);
}
.signin-brand[b-fibjwkx6ei] {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--bs-emphasis-color);
text-decoration: none;
min-width: 0;
}
.signin-logo[b-fibjwkx6ei] {
display: block;
height: 2.4rem;
width: auto;
max-width: 100%;
}
.signin-main[b-fibjwkx6ei] {
display: grid;
place-items: start center;
padding: clamp(1rem, 7vh, 4.5rem) 1rem 3rem;
}
.signin-icon[b-fibjwkx6ei] {
display: block;
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
border-radius: 16px;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
}
.signin-card[b-fibjwkx6ei] {
width: 100%;
max-width: 26rem;
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
border-radius: 0.9rem;
padding: clamp(1.25rem, 4vw, 2rem);
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}
.signin-footer[b-fibjwkx6ei] {
padding: 1rem;
text-align: center;
font-size: 0.8rem;
color: var(--bs-secondary-color);
font-variant-numeric: tabular-nums;
}
/* The identity pages were written for the console grid (.row > .col-md-4).
Inside the card every column spans the full width. */
.signin-card[b-fibjwkx6ei] .row {
margin: 0;
}
.signin-card[b-fibjwkx6ei] .row > [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
.signin-card[b-fibjwkx6ei] h1 {
font-size: 1.6rem;
margin-bottom: 1.25rem;
}
/* Every card reads the same way: the title, then (optionally) one short
lead that says what the page asks for, then the form. No Identity
template sub-heading or
. */
.signin-card[b-fibjwkx6ei] .signin-lead {
margin: -0.5rem 0 1.25rem;
font-size: 0.9rem;
line-height: 1.45;
color: var(--bs-secondary-color);
}
/* "or" between "Sign in with Microsoft" and the password form (Login). */
.signin-card[b-fibjwkx6ei] .signin-or {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1rem 0;
font-size: 0.8rem;
color: var(--bs-secondary-color);
}
.signin-card[b-fibjwkx6ei] .signin-or::before,
.signin-card[b-fibjwkx6ei] .signin-or::after {
content: "";
flex: 1;
border-top: 1px solid var(--bs-border-color);
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* Account > Manage (style guide, rollout item 22). The page head and the
panels come from the shared blocks in css/tokens.css; this file only lays
out the nav beside the page and the spacing inside the pages' forms.
The pages are statically rendered form posts: no script is involved. */
.manage[b-o37nvi7nz8] {
max-width: 64rem;
}
.manage-layout[b-o37nvi7nz8] {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
}
@media (min-width: 900px) {
.manage-layout[b-o37nvi7nz8] {
grid-template-columns: 14rem minmax(0, 1fr);
}
}
.manage-nav[b-o37nvi7nz8] {
padding: 0.5rem;
gap: 0.5rem;
}
.manage-body[b-o37nvi7nz8] {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
/* A form that is a panel's body keeps the panel's vertical rhythm. */
.manage-body[b-o37nvi7nz8] .manage-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
/* Banners sit in the flex gaps; Bootstrap's own margins would double them. */
.manage-body[b-o37nvi7nz8] .alert {
margin-bottom: 0;
}
.manage-body[b-o37nvi7nz8] .alert > :last-child {
margin-bottom: 0;
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* Account section nav, inside a panel (ManageLayout). A column beside the
page from 900px up; below that the links wrap into rows above the page,
so nothing scrolls sideways on a phone. */
.manage-nav-list[b-jeihud3nvl] {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0;
padding: 0;
list-style: none;
}
.manage-nav-list[b-jeihud3nvl] .manage-nav-link {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.7rem;
border-radius: var(--bs-border-radius);
font-size: 0.9rem;
color: var(--bs-secondary-color);
text-decoration: none;
}
.manage-nav-list[b-jeihud3nvl] .manage-nav-link:hover {
color: var(--bs-emphasis-color);
background-color: var(--bs-tertiary-bg);
}
.manage-nav-list[b-jeihud3nvl] .manage-nav-link.active {
color: var(--bs-emphasis-color);
background-color: var(--bs-tertiary-bg);
font-weight: 600;
}
.manage-nav-list[b-jeihud3nvl] .manage-nav-link:focus-visible {
outline: 2px solid var(--ea-blue);
outline-offset: 1px;
}
.manage-nav-list i[b-jeihud3nvl] {
width: 1.1rem;
flex-shrink: 0;
text-align: center;
color: var(--bs-tertiary-color);
}
.manage-nav-list[b-jeihud3nvl] .manage-nav-link.active i {
color: var(--ea-blue);
}
.manage-nav-note[b-jeihud3nvl] {
margin: 0;
padding: 0.25rem 0.7rem 0.35rem;
font-size: 0.78rem;
line-height: 1.4;
color: var(--bs-secondary-color);
}
@media (max-width: 899.98px) {
.manage-nav-list[b-jeihud3nvl] {
flex-direction: row;
flex-wrap: wrap;
gap: 0.25rem;
}
.manage-nav-list[b-jeihud3nvl] .manage-nav-link {
padding: 0.4rem 0.65rem;
}
}
/* /Components/Account/Shared/ShowRecoveryCodes.razor.rz.scp.css */
/* The new recovery codes, in columns so they are easy to copy or write down. */
.recovery-codes[b-4thje7q2pn] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
gap: 0.35rem 1.25rem;
}
.recovery-code[b-4thje7q2pn] {
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
/* /Components/AlertsFrame.razor.rz.scp.css */
#alertsButton[b-wmpntl335p] {
position: absolute;
top: 75px;
right: 5px;
z-index: 4;
transition: .5s ease left;
user-select: none;
}
/* Below the sticky top bar (MainLayout.razor.css, 3.5rem high): under it,
the panel's Clear All and close buttons could not be reached. */
#alertsFrame[b-wmpntl335p] {
position: fixed;
top: 3.5rem;
right: 0;
bottom: 0;
opacity: 0;
transform: translateX(100%);
width: 350px;
overflow-x: hidden;
overflow-y: auto;
text-align: center;
opacity: 0;
z-index: 4;
transition: .25s ease all;
}
#alertsFrame.open[b-wmpntl335p] {
opacity: 1;
transition: .25s ease all;
pointer-events: unset;
transform: translateX(0);
}
@media (max-width: 640.98px) {
#alertsButton[b-wmpntl335p] {
position: fixed;
top: auto;
bottom: 4.5rem;
right: 0.75rem;
z-index: 5;
}
/* Phones: below the brand bar and the 3rem top bar. */
#alertsFrame[b-wmpntl335p] {
top: calc(var(--zd-mobile-bar-height, 3.5rem) + 3rem);
width: 100%;
}
}
@media (min-width: 641px) {
#alertsButton[b-wmpntl335p] {
top: 5px;
}
}
/* /Components/Charts/LiveChart.razor.rz.scp.css */
.lc[b-ui6n47r8xn] {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
padding: 0.9rem 1rem 0.7rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
min-width: 0;
}
.lc-head[b-ui6n47r8xn] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.lc-title[b-ui6n47r8xn] {
font-size: 0.8rem;
color: var(--bs-secondary-color);
}
.lc-current[b-ui6n47r8xn] {
font-size: 1.15rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-body-color);
}
.lc-plot[b-ui6n47r8xn] {
position: relative;
height: 90px;
}
.lc-plot svg[b-ui6n47r8xn] {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.lc-y[b-ui6n47r8xn] {
position: absolute;
left: 0;
font-size: 0.65rem;
line-height: 1;
color: var(--bs-secondary-color);
background-color: var(--zd-surface);
padding-right: 0.25rem;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.lc-y-top[b-ui6n47r8xn] { top: 0; transform: translateY(-50%); }
.lc-y-mid[b-ui6n47r8xn] { top: 50%; transform: translateY(-50%); }
.lc-grid[b-ui6n47r8xn],
.lc-axis[b-ui6n47r8xn] {
stroke: var(--bs-border-color);
stroke-width: 1px;
vector-effect: non-scaling-stroke;
}
.lc-grid[b-ui6n47r8xn] { opacity: 0.6; }
.lc-line[b-ui6n47r8xn] {
fill: none;
stroke: var(--ea-blue);
stroke-width: 2px;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.lc-area[b-ui6n47r8xn] {
fill: var(--ea-blue);
opacity: 0.1;
stroke: none;
}
.lc-hit[b-ui6n47r8xn] {
fill: transparent;
}
.lc-hit:hover[b-ui6n47r8xn] {
fill: var(--bs-body-color);
opacity: 0.06;
}
.lc-x[b-ui6n47r8xn] {
display: flex;
justify-content: space-between;
font-size: 0.65rem;
color: var(--bs-secondary-color);
}
/* History extras: min/max wash and the previous-period line. */
.lc-band[b-ui6n47r8xn] {
fill: var(--ea-blue);
opacity: 0.12;
stroke: none;
}
.lc-previous[b-ui6n47r8xn] {
fill: none;
stroke: var(--bs-secondary-color);
stroke-width: 1.5px;
stroke-dasharray: 4 3;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
opacity: 0.9;
}
.lc-legend[b-ui6n47r8xn] {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
font-size: 0.7rem;
color: var(--bs-secondary-color);
font-variant-numeric: tabular-nums;
}
.lc-key[b-ui6n47r8xn] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.lc-swatch[b-ui6n47r8xn] {
display: inline-block;
width: 14px;
height: 0;
border-top: 2px solid var(--ea-blue);
}
.lc-swatch-prev[b-ui6n47r8xn] {
border-top: 2px dashed var(--bs-secondary-color);
}
/* /Components/ColorPicker.razor.rz.scp.css */
.color-sample[b-ebj57ptbqm] {
width: 50px;
height: 50px;
border-radius: 100%;
}
/* /Components/Dashboard/Dashboard.razor.rz.scp.css */
.dash[b-p7z7ctys5g] {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.dash-head[b-p7z7ctys5g] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.dash-title[b-p7z7ctys5g] {
margin: 0;
font-size: 1.5rem;
}
.dash-sub[b-p7z7ctys5g] {
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
/* ---- KPI cards ---------------------------------------------------------- */
.dash-kpis[b-p7z7ctys5g] {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 1rem;
}
.kpi[b-p7z7ctys5g] {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
color: var(--bs-body-color);
text-decoration: none;
min-width: 0;
transition: border-color 120ms ease, transform 120ms ease;
}
.kpi:hover[b-p7z7ctys5g] {
border-color: var(--bs-tertiary-color);
color: var(--bs-body-color);
transform: translateY(-1px);
}
.kpi-skeleton[b-p7z7ctys5g] {
height: 6.25rem;
background: linear-gradient(90deg, var(--zd-surface) 25%, var(--bs-tertiary-bg) 50%, var(--zd-surface) 75%);
background-size: 200% 100%;
animation: shimmer-b-p7z7ctys5g 1.2s linear infinite;
}
@keyframes shimmer-b-p7z7ctys5g {
to { background-position: -200% 0; }
}
.kpi-warning[b-p7z7ctys5g] { border-color: var(--bs-warning-border-subtle); }
.kpi-warning .kpi-value[b-p7z7ctys5g] { color: var(--bs-warning-text-emphasis); }
.kpi-danger[b-p7z7ctys5g] { border-color: var(--bs-danger-border-subtle); }
.kpi-danger .kpi-value[b-p7z7ctys5g] { color: var(--bs-danger-text-emphasis); }
.kpi-label[b-p7z7ctys5g] {
font-size: 0.8rem;
color: var(--bs-secondary-color);
}
.kpi-value[b-p7z7ctys5g] {
font-size: 1.85rem;
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.kpi-of[b-p7z7ctys5g] {
font-size: 1rem;
font-weight: 500;
color: var(--bs-secondary-color);
}
.kpi-note[b-p7z7ctys5g] {
font-size: 0.75rem;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---- Panels ------------------------------------------------------------- */
.dash-row[b-p7z7ctys5g] {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 1rem;
}
.dash-row-3[b-p7z7ctys5g] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.panel[b-p7z7ctys5g] {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.1rem 1.25rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
min-width: 0;
}
.panel-head[b-p7z7ctys5g] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.panel-head a[b-p7z7ctys5g] {
font-size: 0.85rem;
text-decoration: none;
color: var(--bs-secondary-color);
}
.panel-head a:hover[b-p7z7ctys5g] { color: var(--bs-body-color); }
.panel-title[b-p7z7ctys5g] {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.empty[b-p7z7ctys5g] {
padding: 1rem 0;
color: var(--bs-secondary-color);
font-size: 0.9rem;
}
.mono[b-p7z7ctys5g] {
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.ip[b-p7z7ctys5g] {
font-family: var(--bs-font-monospace);
font-size: 0.82rem;
}
.muted[b-p7z7ctys5g] { color: var(--bs-secondary-color); }
.truncate[b-p7z7ctys5g] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- Bars --------------------------------------------------------------- */
.track[b-p7z7ctys5g] {
height: 6px;
border-radius: 3px;
background-color: var(--bs-tertiary-bg);
overflow: hidden;
flex-grow: 1;
}
.fill[b-p7z7ctys5g] {
height: 100%;
border-radius: 3px;
/* Neutral by default: color is reserved for something that needs attention. */
background-color: var(--bs-tertiary-color);
opacity: 0.55;
}
.fill-warning[b-p7z7ctys5g] { background-color: var(--bs-warning); opacity: 1; }
.fill-danger[b-p7z7ctys5g] { background-color: var(--bs-danger); opacity: 1; }
/* ---- Sign-in chart ------------------------------------------------------ */
.legend[b-p7z7ctys5g] {
display: flex;
gap: 0.9rem;
font-size: 0.78rem;
color: var(--bs-secondary-color);
}
.legend span[b-p7z7ctys5g] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.sw[b-p7z7ctys5g] {
width: 10px;
height: 10px;
border-radius: 2px;
display: inline-block;
}
.sw-ok[b-p7z7ctys5g] { background-color: var(--bs-tertiary-color); opacity: 0.55; }
.sw-fail[b-p7z7ctys5g] { background-color: var(--bs-warning); }
.chart[b-p7z7ctys5g] {
display: flex;
align-items: flex-end;
gap: 4px;
height: 170px;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--bs-border-color);
position: relative;
}
.chart-col[b-p7z7ctys5g] {
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 2px;
height: 100%;
position: relative;
min-width: 0;
}
.bar[b-p7z7ctys5g] {
width: 100%;
border-radius: 2px;
}
.bar-ok[b-p7z7ctys5g] { background-color: var(--bs-tertiary-color); opacity: 0.55; }
.bar-fail[b-p7z7ctys5g] { background-color: var(--bs-warning); }
.chart-day[b-p7z7ctys5g] {
position: absolute;
bottom: -1.1rem;
left: 0;
font-size: 0.72rem;
color: var(--bs-tertiary-color);
}
.callout[b-p7z7ctys5g] {
padding: 0.6rem 0.8rem;
border-radius: var(--bs-border-radius);
font-size: 0.85rem;
}
.callout-warning[b-p7z7ctys5g] {
background-color: var(--bs-warning-bg-subtle);
color: var(--bs-warning-text-emphasis);
border: 1px solid var(--bs-warning-border-subtle);
}
.callout-ok[b-p7z7ctys5g] {
padding: 0;
color: var(--bs-secondary-color);
}
/* ---- IP list ------------------------------------------------------------ */
.iplist[b-p7z7ctys5g] { display: flex; flex-direction: column; gap: 0.6rem; }
.iprow[b-p7z7ctys5g] {
display: grid;
grid-template-columns: 9.5rem minmax(0, 1fr) 2.5rem auto;
gap: 0.75rem;
align-items: center;
}
/* ---- Fleet health ------------------------------------------------------- */
.health[b-p7z7ctys5g] { display: flex; flex-direction: column; }
.health-row[b-p7z7ctys5g] {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 5.5rem;
gap: 0.75rem;
align-items: center;
padding: 0.5rem 0;
border-top: 1px solid var(--bs-border-color-translucent);
}
.health-header[b-p7z7ctys5g] {
border-top: none;
padding-top: 0;
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.health-name[b-p7z7ctys5g] {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
font-weight: 500;
}
.meter[b-p7z7ctys5g] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.meter .mono[b-p7z7ctys5g] {
width: 2.6rem;
text-align: right;
color: var(--bs-secondary-color);
}
/* ---- Technicians in the console ----------------------------------------- */
.ops[b-p7z7ctys5g] { display: flex; flex-direction: column; }
.ops-row[b-p7z7ctys5g] {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1.3fr) 3rem minmax(0, 0.8fr);
gap: 0.75rem;
align-items: center;
padding: 0.5rem 0;
border-top: 1px solid var(--bs-border-color-translucent);
font-size: 0.875rem;
}
.ops-header[b-p7z7ctys5g] {
border-top: none;
padding-top: 0;
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.ops-who[b-p7z7ctys5g] {
display: flex;
flex-direction: column;
min-width: 0;
}
.ops-name[b-p7z7ctys5g] { font-weight: 500; }
.ops-user[b-p7z7ctys5g] {
font-size: 0.8rem;
color: var(--bs-secondary-color);
}
.ops-status[b-p7z7ctys5g] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ops-ips[b-p7z7ctys5g] {
display: flex;
flex-direction: column;
min-width: 0;
overflow-wrap: anywhere;
}
/* ---- Activity ----------------------------------------------------------- */
.activity[b-p7z7ctys5g] { display: flex; flex-direction: column; }
.act[b-p7z7ctys5g] {
display: grid;
grid-template-columns: 4.5rem 0.5rem minmax(0, 1fr);
gap: 0.6rem;
align-items: start;
padding: 0.45rem 0;
border-top: 1px solid var(--bs-border-color-translucent);
font-size: 0.85rem;
}
.act:first-child[b-p7z7ctys5g] { border-top: none; }
.act .zd-dot[b-p7z7ctys5g] { margin-top: 0.4rem; }
.act-time[b-p7z7ctys5g] {
font-family: inherit;
font-size: 0.8rem;
}
.act-text[b-p7z7ctys5g] {
line-height: 1.4;
overflow-wrap: anywhere;
}
/* ---- Distributions ------------------------------------------------------ */
.dist[b-p7z7ctys5g] { display: flex; flex-direction: column; gap: 0.55rem; }
.dist-row[b-p7z7ctys5g] {
display: grid;
grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2.2rem;
gap: 0.75rem;
align-items: center;
font-size: 0.85rem;
}
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1400px) {
.dash-kpis[b-p7z7ctys5g] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.dash-row[b-p7z7ctys5g], .dash-row-3[b-p7z7ctys5g] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.dash-kpis[b-p7z7ctys5g] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.health-row[b-p7z7ctys5g] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.health-row > :nth-child(4)[b-p7z7ctys5g], .health-row > :nth-child(5)[b-p7z7ctys5g] { display: none; }
.iprow[b-p7z7ctys5g] { grid-template-columns: minmax(0, 1fr) 2.5rem auto; }
.ops-row[b-p7z7ctys5g] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.2fr); }
.ops-row > :nth-child(4)[b-p7z7ctys5g], .ops-row > :nth-child(5)[b-p7z7ctys5g] { display: none; }
.iprow .track[b-p7z7ctys5g] { display: none; }
}
/* Live figures: one that changes while the dashboard is open lights up
briefly (as on the Devices page). */
.kpi-figure[b-p7z7ctys5g] {
display: inline-block;
transform-origin: left center;
}
.kpi-bump[b-p7z7ctys5g] {
animation: kpi-bump-b-p7z7ctys5g 1.6s ease-out;
}
@keyframes kpi-bump-b-p7z7ctys5g {
0% {
color: var(--ea-blue);
transform: scale(1.12);
text-shadow: 0 0 0.6rem rgba(var(--ea-blue-rgb), 0.55);
}
35% {
transform: scale(1);
}
100% {
text-shadow: none;
}
}
.dash-live[b-p7z7ctys5g] {
white-space: nowrap;
}
.dash-live-dot[b-p7z7ctys5g] {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
margin-right: 0.35rem;
border-radius: 50%;
background-color: var(--ea-blue);
vertical-align: 0.05rem;
animation: dash-live-b-p7z7ctys5g 2.4s ease-in-out infinite;
}
@keyframes dash-live-b-p7z7ctys5g {
50% {
opacity: 0.35;
}
}
@media (prefers-reduced-motion: reduce) {
.kpi-bump[b-p7z7ctys5g] {
animation: kpi-bump-color-b-p7z7ctys5g 1.6s ease-out;
}
.dash-live-dot[b-p7z7ctys5g] {
animation: none;
}
@keyframes kpi-bump-color-b-p7z7ctys5g {
0% {
color: var(--ea-blue);
}
}
}
/* /Components/Devices/AgentUpdateStatus.razor.rz.scp.css */
/* The line after "Update agent now" (device card, Device Details). */
.aus[b-ds64l3z3f2] {
display: flex;
align-items: baseline;
gap: 0.45rem;
min-width: 0;
font-size: 0.75rem;
line-height: 1.35;
color: var(--bs-secondary-color);
}
.aus i[b-ds64l3z3f2] {
flex-shrink: 0;
width: 1rem;
text-align: center;
}
.aus-requested[b-ds64l3z3f2] {
color: var(--bs-info-text-emphasis);
}
.aus-updated[b-ds64l3z3f2] {
color: var(--bs-success-text-emphasis);
}
.aus-nochange[b-ds64l3z3f2] {
color: var(--bs-warning-text-emphasis);
}
/* /Components/Devices/ChatCard.razor.rz.scp.css */
.chat-card[b-bvi6fonci1] {
display: grid;
grid-template-rows: auto auto auto;
}
.chat-header[b-bvi6fonci1] {
display: grid;
grid-template-columns: 1fr auto;
user-select: none;
cursor: pointer;
padding: 5px 10px;
}
.chat-messages-window[b-bvi6fonci1] {
overflow-y: auto;
height: 0;
opacity: 0;
padding: 0;
transition: .25s ease all;
}
.chat-card.expanded .chat-messages-window[b-bvi6fonci1] {
height: 20em;
opacity: 1;
padding: 5px 10px;
transition: .25s ease all;
}
/* Multi-line (Shift+Enter): two lines shown, then it scrolls. */
.chat-input[b-bvi6fonci1] {
display: block;
width: 100%;
height: 0;
opacity: 0;
padding: 0 .5em;
resize: none;
border: 1px solid gray;
}
.chat-card.expanded .chat-input[b-bvi6fonci1] {
height: 3.5em;
opacity: 1;
padding: .25em .5em;
transition: .25s ease all;
}
.chat-bubble[b-bvi6fonci1] {
position: relative;
width: 80%;
padding: .5em 1em .5em 1em;
border-radius: 5px;
}
/* The user's and technician's text as written: its lines, and long words wrapped. */
.chat-text[b-bvi6fonci1] {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* /Components/Devices/ChatFrame.razor.rz.scp.css */
.chat-frame[b-yc1vo2f9rd] {
position: fixed;
bottom: 0;
right: 0;
width: 25em;
max-width: 90%;
max-height: 100vh;
overflow-y: auto;
z-index: 3;
}
/* /Components/Devices/DeviceCard.razor.rz.scp.css */
/* Device card: compact by default (connect from here), expands in place. */
.device-card[b-nmpx2i1h91] {
display: inline-flex;
flex-direction: column;
vertical-align: top;
width: 17.5rem;
max-width: 100%;
margin: 0 1rem 1rem 0;
cursor: pointer;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.device-card:hover[b-nmpx2i1h91] {
border-color: var(--bs-tertiary-color);
transform: translateY(-1px);
}
.device-card.dark:hover[b-nmpx2i1h91] { box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); }
.device-card.light:hover[b-nmpx2i1h91] { box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); }
.device-card.is-offline[b-nmpx2i1h91] { opacity: 0.8; }
.device-card.expanded[b-nmpx2i1h91] {
display: flex;
width: 36rem;
cursor: default;
transform: none;
opacity: 1;
}
/* ---- Header ------------------------------------------------------------- */
.dc-head[b-nmpx2i1h91] {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 0.9rem 0.5rem;
user-select: none;
}
.device-card.expanded .dc-head[b-nmpx2i1h91] { cursor: pointer; }
.dc-name[b-nmpx2i1h91] { min-width: 0; }
.dc-title[b-nmpx2i1h91] {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dc-sub[b-nmpx2i1h91] {
display: flex;
gap: 0.3rem;
font-size: 0.75rem;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dc-sub .sep[b-nmpx2i1h91] { opacity: 0.6; }
.dc-head-tools[b-nmpx2i1h91] {
display: flex;
align-items: center;
gap: 0.25rem;
}
.dc-icon[b-nmpx2i1h91] {
color: var(--bs-secondary-color);
padding: 0 0.25rem;
}
/* ---- Body --------------------------------------------------------------- */
.dc-body[b-nmpx2i1h91] {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0 0.9rem 0.8rem;
font-size: 0.85rem;
}
.device-card.expanded .dc-body[b-nmpx2i1h91] {
max-height: 34rem;
overflow-y: auto;
}
.dc-facts[b-nmpx2i1h91] {
display: flex;
flex-direction: column;
gap: 0.2rem;
color: var(--bs-secondary-color);
}
.dc-fact[b-nmpx2i1h91] {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.dc-fact i[b-nmpx2i1h91] {
width: 1rem;
text-align: center;
opacity: 0.8;
}
.dc-fact span[b-nmpx2i1h91] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dc-meters[b-nmpx2i1h91] {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.dc-meter[b-nmpx2i1h91] {
display: grid;
grid-template-columns: 2.4rem minmax(0, 1fr) 2.6rem;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
}
.dc-meter .lbl[b-nmpx2i1h91] { color: var(--bs-secondary-color); }
.dc-meter .val[b-nmpx2i1h91] {
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--bs-secondary-color);
}
.track[b-nmpx2i1h91] {
height: 6px;
border-radius: 3px;
background-color: var(--bs-tertiary-bg);
overflow: hidden;
}
.fill[b-nmpx2i1h91] {
height: 100%;
border-radius: 3px;
background-color: var(--bs-tertiary-color);
opacity: 0.55;
}
.fill-warning[b-nmpx2i1h91] { background-color: var(--bs-warning); opacity: 1; }
.fill-danger[b-nmpx2i1h91] { background-color: var(--bs-danger); opacity: 1; }
.dc-actions[b-nmpx2i1h91] {
display: flex;
align-items: center;
gap: 0.35rem;
padding-top: 0.15rem;
cursor: default;
}
.dc-connect[b-nmpx2i1h91] { flex-grow: 1; }
.device-card.expanded .dc-connect[b-nmpx2i1h91] { flex-grow: 0; }
/* ---- Expanded sections -------------------------------------------------- */
.dc-section[b-nmpx2i1h91] {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--bs-border-color);
}
.dc-section-title[b-nmpx2i1h91] {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
}
.dc-dl[b-nmpx2i1h91] {
display: grid;
grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
gap: 0.35rem 1rem;
margin: 0;
}
.dc-dl dt[b-nmpx2i1h91] {
font-weight: 400;
color: var(--bs-secondary-color);
}
.dc-dl dd[b-nmpx2i1h91] {
margin: 0;
overflow-wrap: anywhere;
}
.mono[b-nmpx2i1h91] {
font-family: var(--bs-font-monospace);
font-size: 0.8rem;
}
@media (max-width: 641px) {
.device-card[b-nmpx2i1h91],
.device-card.expanded[b-nmpx2i1h91] {
width: 100%;
margin-right: 0;
}
}
/* /Components/Devices/DevicesFrame.razor.rz.scp.css */
#deviceControlsWrapper[b-unathrbj2p] {
display: grid;
/* The summary cards (DevicesSummary) sit between the two columns. */
grid-template-columns: auto minmax(0, 1fr) auto;
grid-column-gap: 20px;
grid-row-gap: 10px;
margin-bottom: 5px;
margin-right: 5px;
padding-top: 3px;
}
#deviceControlsWrapper > :last-child[b-unathrbj2p] {
text-align: right;
}
#deviceListDiv[b-unathrbj2p]{
overflow-y: auto;
overflow-x: hidden;
}
/* ---- Selection bar ("Move to group") ------------------------------------
Shown while devices are selected. It comes after the list, so showing or
hiding it never moves the cards, and it stays in view at the bottom of the
screen, just above the Terminal and Quick Scripts tabs. */
.bulk-bar[b-unathrbj2p] {
position: sticky;
bottom: 2.75rem;
z-index: 3;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin: -2rem 0.5rem 3rem;
padding: 0.6rem 0.9rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-primary-border-subtle);
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.18);
font-size: 0.875rem;
}
.bulk-count[b-unathrbj2p] {
white-space: nowrap;
}
.bulk-unshown[b-unathrbj2p] {
color: var(--bs-secondary-color);
}
.bulk-sep[b-unathrbj2p] {
color: var(--bs-tertiary-color);
}
.bulk-label[b-unathrbj2p] {
margin: 0;
color: var(--bs-secondary-color);
white-space: nowrap;
}
.bulk-target[b-unathrbj2p] {
width: auto;
min-width: 11rem;
max-width: 18rem;
}
.bulk-name[b-unathrbj2p] {
width: 14rem;
max-width: 100%;
}
.bulk-clear[b-unathrbj2p] {
padding-left: 0;
padding-right: 0;
}
.bulk-note[b-unathrbj2p] {
flex-basis: 100%;
font-size: 0.8rem;
color: var(--bs-warning-text-emphasis);
}
/* Too narrow for the cards in between: they take a row of their own. */
@media (max-width: 1099.98px) {
#deviceControlsWrapper[b-unathrbj2p] {
grid-template-columns: 1fr 1fr;
}
}
/* Too narrow for two columns beside the menu (641-767 px, where they made
the page scroll sideways) and on phones: one column. */
@media (max-width: 767.98px) {
#deviceControlsWrapper[b-unathrbj2p] {
grid-template-columns: 1fr;
}
#deviceControlsWrapper > :last-child[b-unathrbj2p] {
text-align: left;
}
}
@media (max-width: 640.98px) {
#deviceControlsWrapper[b-unathrbj2p] {
margin-right: 0;
}
/* Phone: the count and "Clear selection" on the first row, then
"Move to group", the list and Apply; a new group name gets a row of
its own, with Apply beside it. */
.bulk-bar[b-unathrbj2p] {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
margin-left: 0;
margin-right: 0;
/* Above the alerts bell, which sits over the Quick Scripts tab on
phones (AlertsFrame.razor.css). */
bottom: 7.5rem;
}
.bulk-sep[b-unathrbj2p] {
display: none;
}
/* Both span the row, so neither widens the columns of the row below. */
.bulk-count[b-unathrbj2p] {
grid-column: 1 / -1;
grid-row: 1;
justify-self: start;
align-self: center;
max-width: calc(100% - 7.5rem);
white-space: normal;
}
.bulk-clear[b-unathrbj2p] {
grid-column: 1 / -1;
grid-row: 1;
justify-self: end;
}
.bulk-label[b-unathrbj2p] {
grid-column: 1;
grid-row: 2;
align-self: center;
}
.bulk-target[b-unathrbj2p] {
grid-column: 2;
grid-row: 2;
}
.bulk-apply[b-unathrbj2p] {
grid-column: 3;
grid-row: 2;
}
.bulk-bar:has(.bulk-name) .bulk-target[b-unathrbj2p] {
grid-column: 2 / -1;
}
.bulk-name[b-unathrbj2p] {
grid-column: 1 / 3;
grid-row: 3;
}
.bulk-bar:has(.bulk-name) .bulk-apply[b-unathrbj2p] {
grid-row: 3;
}
.bulk-note[b-unathrbj2p] {
grid-column: 1 / -1;
}
.bulk-target[b-unathrbj2p],
.bulk-name[b-unathrbj2p] {
width: 100%;
max-width: none;
min-width: 0;
}
}
/* /Components/Devices/DevicesSummary.razor.rz.scp.css */
/* Stat cards in the Devices top bar (DevicesFrame): the console's KPI cards
(tokens.css .zd-kpi), smaller. Four in a row when there is room, two by
two otherwise. */
.devices-summary[b-mxhzd063qw] {
container-type: inline-size;
align-self: start;
min-width: 0;
}
.ds-grid[b-mxhzd063qw] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
@container (min-width: 36rem) {
.ds-grid[b-mxhzd063qw] {
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
}
}
.ds-card[b-mxhzd063qw] {
gap: 0.15rem;
padding: 0.55rem 0.75rem;
border-radius: var(--bs-border-radius);
text-align: left;
}
.ds-label[b-mxhzd063qw],
.ds-note[b-mxhzd063qw] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-label[b-mxhzd063qw] {
font-size: 0.75rem;
}
.ds-label .zd-dot[b-mxhzd063qw] {
margin-top: -0.1rem;
}
.ds-value[b-mxhzd063qw] {
font-size: 1.35rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-danger[b-mxhzd063qw] {
border-color: var(--bs-danger-border-subtle);
}
.ds-danger .ds-value[b-mxhzd063qw] {
color: var(--bs-danger-text-emphasis);
}
/* Longest without restart: finds the device in the list. The magnifier and
the link-coloured name say so without hover (phones have none); with a
mouse the card also lights up like a button. */
.ds-action[b-mxhzd063qw] {
width: 100%;
color: inherit;
font: inherit;
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease;
}
.ds-action:hover[b-mxhzd063qw] {
border-color: rgba(var(--ea-blue-rgb), 0.6);
background-color: var(--bs-tertiary-bg);
}
.ds-action-label[b-mxhzd063qw] {
display: flex;
align-items: center;
gap: 0.35rem;
}
.ds-action-text[b-mxhzd063qw] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-action-icon[b-mxhzd063qw] {
flex-shrink: 0;
margin-left: auto;
font-size: 0.7rem;
color: var(--bs-link-color);
}
.ds-link[b-mxhzd063qw] {
color: var(--bs-link-color);
}
.ds-action:hover .ds-link[b-mxhzd063qw] {
color: var(--bs-link-hover-color);
text-decoration: underline;
}
.ds-action:hover .ds-action-icon[b-mxhzd063qw] {
color: var(--bs-link-hover-color);
}
.ds-action:focus-visible[b-mxhzd063qw] {
outline: none;
border-color: var(--ea-blue);
box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
/* Narrower screens: a row of their own under the controls (DevicesFrame
switches to two columns at the same width). */
@media (max-width: 1099.98px) {
.devices-summary[b-mxhzd063qw] {
grid-column: 1 / -1;
order: 1;
}
}
@media (max-width: 640.98px) {
.ds-grid[b-mxhzd063qw] {
gap: 0.5rem;
}
.ds-card[b-mxhzd063qw] {
padding: 0.4rem 0.6rem;
gap: 0.05rem;
}
.ds-value[b-mxhzd063qw] {
font-size: 1.15rem;
}
}
/* ---- Five cards: "30+ days without restart" -----------------------------
Narrow: two by two, then "Longest without restart" on a row of its own.
Medium: Online, Offline and Avg connection, then the two restart cards
side by side (wide enough for their labels). Wide: all five in a row. */
.ds-grid-5 > .ds-restart + *[b-mxhzd063qw] {
grid-column: 1 / -1;
}
@container (min-width: 30rem) {
.ds-grid.ds-grid-5[b-mxhzd063qw] {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.ds-grid-5 > *[b-mxhzd063qw] {
grid-column: span 2;
}
.ds-grid-5 > .ds-restart[b-mxhzd063qw],
.ds-grid-5 > .ds-restart + *[b-mxhzd063qw] {
grid-column: span 3;
}
}
@container (min-width: 60rem) {
.ds-grid.ds-grid-5[b-mxhzd063qw] {
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr) minmax(0, 1.6fr);
}
.ds-grid-5 > *[b-mxhzd063qw],
.ds-grid-5 > .ds-restart[b-mxhzd063qw],
.ds-grid-5 > .ds-restart + *[b-mxhzd063qw] {
grid-column: auto;
}
}
/* Live figures: one that changes while the page is open lights up briefly,
so a device coming online (or a new round trip) is seen as it happens. */
.ds-figure[b-mxhzd063qw] {
display: inline-block;
transform-origin: left center;
}
.ds-bump[b-mxhzd063qw] {
animation: ds-bump-b-mxhzd063qw 1.6s ease-out;
}
@keyframes ds-bump-b-mxhzd063qw {
0% {
color: var(--ea-blue);
transform: scale(1.12);
text-shadow: 0 0 0.6rem rgba(var(--ea-blue-rgb), 0.55);
}
35% {
transform: scale(1);
}
100% {
text-shadow: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ds-bump[b-mxhzd063qw] {
animation: ds-bump-color-b-mxhzd063qw 1.6s ease-out;
}
@keyframes ds-bump-color-b-mxhzd063qw {
0% {
color: var(--ea-blue);
}
}
}
/* /Components/Devices/DrivesTable.razor.rz.scp.css */
.dt-table th[b-xjkwlmddg7] {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
white-space: nowrap;
}
.dt-name[b-xjkwlmddg7] {
font-weight: 600;
}
.dt-sub[b-xjkwlmddg7] {
font-size: 0.78rem;
color: var(--bs-secondary-color);
font-family: var(--bs-font-monospace);
}
.dt-num[b-xjkwlmddg7] {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dt-usage-col[b-xjkwlmddg7] {
width: 11rem;
}
.dt-usage[b-xjkwlmddg7] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.dt-track[b-xjkwlmddg7] {
flex: 1;
height: 6px;
border-radius: 999px;
background-color: var(--bs-tertiary-bg);
overflow: hidden;
}
.dt-fill[b-xjkwlmddg7] {
height: 100%;
border-radius: 999px;
background-color: var(--ea-blue);
}
.dt-fill.warning[b-xjkwlmddg7] {
background-color: var(--bs-warning);
}
.dt-fill.danger[b-xjkwlmddg7] {
background-color: var(--bs-danger);
}
.dt-empty[b-xjkwlmddg7] {
color: var(--bs-secondary-color);
padding: 0.5rem 0;
}
/* /Components/Devices/MoveDevicesSummary.razor.rz.scp.css */
.mds-question[b-1oyycczcrf] {
margin-bottom: 0.5rem;
overflow-wrap: anywhere;
}
.mds-names[b-1oyycczcrf] {
margin: 0 0 0.25rem;
padding-left: 1.25rem;
font-size: 0.875rem;
}
.mds-names li[b-1oyycczcrf] {
overflow-wrap: anywhere;
}
.mds-more[b-1oyycczcrf] {
margin: 0 0 0.5rem;
font-size: 0.875rem;
color: var(--bs-secondary-color);
}
.mds-warning[b-1oyycczcrf] {
margin-top: 0.75rem;
}
.mds-note[b-1oyycczcrf] {
margin: 0.5rem 0 0;
font-size: 0.875rem;
color: var(--bs-secondary-color);
overflow-wrap: anywhere;
}
/* /Components/Devices/ScriptOutputView.razor.rz.scp.css */
.so[b-9sx4d6557f] {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.so-meta[b-9sx4d6557f] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
.so-sep[b-9sx4d6557f] {
opacity: 0.6;
}
.so-head[b-9sx4d6557f] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.3rem;
}
.so-title[b-9sx4d6557f] {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
}
.so-copy[b-9sx4d6557f] {
padding: 0.1rem 0.45rem;
}
.so-pre[b-9sx4d6557f] {
margin: 0;
padding: 0.6rem 0.75rem;
max-height: 14rem;
overflow: auto;
border-radius: var(--bs-border-radius);
background-color: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
font-size: 0.82rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.so-error .so-pre[b-9sx4d6557f] {
border-color: var(--bs-danger-border-subtle);
}
.so-empty[b-9sx4d6557f] {
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
/* /Components/Devices/Terminal.razor.rz.scp.css */
.terminal-frame[b-xzibiznfo1] {
position: fixed;
bottom: 0;
left: 260px;
right: 10px;
z-index: 2;
pointer-events: none;
}
.terminal-frame.open[b-xzibiznfo1]{
z-index: 4;
}
.terminal-header[b-xzibiznfo1] {
pointer-events: none;
display: grid;
grid-template-columns: 1fr 1fr;
}
.terminal-header .terminal-button[b-xzibiznfo1] {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
pointer-events: all;
}
.terminal-body[b-xzibiznfo1] {
display: grid;
grid-template-rows: 1fr auto;
height: 0;
overflow: hidden;
opacity: 0;
border-radius: 5px;
transition: .25s ease all;
pointer-events: all;
}
.terminal-frame.open .terminal-body[b-xzibiznfo1] {
height: 25rem;
max-height: 80vh;
overflow: auto;
opacity: 1;
transition: .25s ease all;
}
.terminal-window[b-xzibiznfo1] {
font-family: Consolas, 'Lucida Console', Courier New, Courier, monospace;
overflow-wrap: break-word;
overflow-y: auto;
white-space: pre;
}
.terminal-line[b-xzibiznfo1] {
min-height: 1.3em;
}
.terminal-input-area[b-xzibiznfo1]{
display: grid;
grid-template-columns: auto auto 1fr;
grid-column-gap: .5em;
}
/* Multi-line: a pasted script keeps its lines (up to 8 shown, then it scrolls). */
.terminal-input[b-xzibiznfo1] {
font-family: Consolas, 'Lucida Console', Courier New, Courier, monospace;
resize: none;
white-space: pre;
overflow-x: auto;
}
@media (max-width: 641px) {
.terminal-frame[b-xzibiznfo1] {
left: 10px;
}
}
/* /Components/FriendlyError.razor.rz.scp.css */
.error-card[b-crybtuhcva] { width: min(100%, 42rem); position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 4rem); border: 1px solid var(--bs-border-color); border-radius: 1.25rem; background: var(--bs-body-bg); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .16); }
.error-code[b-crybtuhcva] { position: absolute; top: -.65rem; right: 1rem; color: var(--bs-secondary-bg); font-size: clamp(6rem, 22vw, 11rem); font-weight: 800; line-height: 1; user-select: none; }
.error-icon[b-crybtuhcva] { width: 3rem; height: 3rem; position: relative; margin-bottom: 1.5rem; color: var(--bs-primary); }
.error-icon svg[b-crybtuhcva] { width: 100%; height: 100%; fill: currentColor; }
.error-kicker[b-crybtuhcva] { position: relative; margin: 0 0 .5rem; color: var(--bs-primary); font-size: .78rem; font-weight: 750; letter-spacing: .13em; }
h1[b-crybtuhcva] { position: relative; margin-bottom: 1rem; font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 700; letter-spacing: -.035em; }
.error-description[b-crybtuhcva] { position: relative; max-width: 34rem; margin-bottom: 2rem; color: var(--bs-secondary-color); font-size: 1.05rem; line-height: 1.65; }
.error-actions[b-crybtuhcva] { display: flex; position: relative; flex-wrap: wrap; gap: .75rem; }
details[b-crybtuhcva] { position: relative; margin-top: 2rem; color: var(--bs-secondary-color); font-size: .8rem; }
summary[b-crybtuhcva] { margin-bottom: .5rem; }
details div[b-crybtuhcva] { margin-top: .25rem; overflow-wrap: anywhere; }
/* /Components/Layout/ErrorLayout.razor.rz.scp.css */
.error-layout[b-comv1wak89] {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
background: radial-gradient(circle at 20% 15%, rgba(var(--ea-blue-rgb), .14), transparent 32rem), radial-gradient(circle at 85% 80%, rgba(var(--ea-blue-rgb), .07), transparent 28rem);
}
.error-header[b-comv1wak89] { padding: 1.5rem clamp(1.25rem, 4vw, 4rem); }
.error-brand[b-comv1wak89] { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.error-logo[b-comv1wak89] { display: block; height: 2.2rem; width: auto; max-width: 100%; }
main[b-comv1wak89] { display: grid; place-items: center; padding: 2rem 1.25rem 5rem; }
footer[b-comv1wak89] { padding: 1rem; color: var(--bs-secondary-color); font-size: .8rem; text-align: center; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-t34zn3ju9d] {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main[b-t34zn3ju9d] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.sidebar[b-t34zn3ju9d] {
background-color: var(--zd-sidebar-bg);
color: var(--zd-sidebar-text);
border-right: 1px solid var(--zd-sidebar-border);
display: flex;
flex-direction: column;
}
.topbar[b-t34zn3ju9d] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 3.5rem;
padding: 0 1.5rem;
border-bottom: 1px solid var(--bs-border-color);
background-color: var(--bs-body-bg);
position: sticky;
top: 0;
z-index: 5;
}
.topbar-title[b-t34zn3ju9d] {
font-weight: 600;
font-size: 1rem;
color: var(--bs-heading-color);
}
.topbar-actions[b-t34zn3ju9d] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.topbar-user[b-t34zn3ju9d] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--bs-body-color);
text-decoration: none;
font-size: 0.9rem;
padding: 0.35rem 0.6rem;
border-radius: 0.45rem;
max-width: 16rem;
}
.topbar-user span[b-t34zn3ju9d] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-user:hover[b-t34zn3ju9d] {
background-color: var(--bs-tertiary-bg);
color: var(--bs-emphasis-color);
}
.topbar-user i[b-t34zn3ju9d] {
font-size: 1.25rem;
color: var(--bs-secondary-color);
}
.content[b-t34zn3ju9d] {
position: relative;
padding: 1.25rem 1.5rem 2.5rem 1.5rem;
}
@media (max-width: 640.98px) {
/* The sidebar collapses to a brand bar that stays on top; the nav list
is a drawer below it (NavMenu.razor.css). */
.sidebar[b-t34zn3ju9d] {
position: sticky;
top: 0;
z-index: 1041;
border-right: none;
border-bottom: 1px solid var(--zd-sidebar-border);
min-height: var(--zd-mobile-bar-height, 3.5rem);
justify-content: center;
}
.topbar[b-t34zn3ju9d] {
padding: 0 1rem;
height: 3rem;
top: var(--zd-mobile-bar-height, 3.5rem);
}
.topbar-title[b-t34zn3ju9d] {
font-size: 0.95rem;
}
.topbar-user span[b-t34zn3ju9d] {
display: none;
}
.content[b-t34zn3ju9d] {
padding: 1rem 1rem 2.5rem 1rem;
}
}
@media (min-width: 641px) {
.page[b-t34zn3ju9d] {
flex-direction: row;
}
.sidebar[b-t34zn3ju9d] {
width: 232px;
min-width: 232px;
height: 100vh;
position: sticky;
overflow-y: auto;
top: 0;
}
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar: charcoal in both color modes (brand surface). Colors come from
the --zd-sidebar-* tokens in tokens.css. */
.nav-brand-row[b-wv3ofupuxg], .nav-org[b-wv3ofupuxg], .nav-scroll[b-wv3ofupuxg] {
/* The sidebar is a full-height flex column; never squeeze these when the
menu is taller than the screen (it scrolls instead). */
flex-shrink: 0;
}
.nav-brand-row[b-wv3ofupuxg] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1rem 0.5rem 1.1rem;
}
.nav-brand[b-wv3ofupuxg] {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--zd-sidebar-text);
text-decoration: none;
min-width: 0;
}
.nav-logo[b-wv3ofupuxg] {
display: block;
height: 2.2rem;
width: auto;
max-width: 100%;
}
.nav-org[b-wv3ofupuxg] {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0 1.1rem 0.75rem 1.1rem;
font-size: 0.8rem;
color: var(--zd-sidebar-muted);
}
.nav-org-name[b-wv3ofupuxg] {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-version[b-wv3ofupuxg] {
flex: none;
margin-left: auto;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: inherit;
text-decoration: none;
}
.nav-version:hover[b-wv3ofupuxg],
.nav-version:focus-visible[b-wv3ofupuxg],
.nav-version-drawer:hover[b-wv3ofupuxg],
.nav-version-drawer:focus-visible[b-wv3ofupuxg] {
text-decoration: underline;
}
.nav-version-drawer[b-wv3ofupuxg] {
display: none;
color: inherit;
text-decoration: none;
}
/* Visually hidden, still reachable with Tab and toggled with Space. */
.nav-toggle-input[b-wv3ofupuxg] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.nav-toggle-input:focus-visible ~ .nav-brand-row .navbar-toggler[b-wv3ofupuxg] {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.navbar-toggler[b-wv3ofupuxg] {
margin: 0;
cursor: pointer;
border: 1px solid var(--zd-sidebar-border);
border-radius: 0.4rem;
color: var(--zd-sidebar-text);
background: transparent;
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-scroll[b-wv3ofupuxg] {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0.25rem 0.6rem 1rem 0.6rem;
}
.nav-group-label[b-wv3ofupuxg] {
padding: 0.9rem 0.6rem 0.35rem 0.6rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--zd-sidebar-muted);
}
.nav-spacer[b-wv3ofupuxg] {
flex-grow: 1;
min-height: 0.5rem;
}
.nav-scroll[b-wv3ofupuxg] .nav-item,
.nav-item[b-wv3ofupuxg] {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.5rem 0.6rem;
border-radius: 0.45rem;
color: var(--zd-sidebar-link);
text-decoration: none;
font-size: 0.9rem;
line-height: 1.3;
width: 100%;
border: none;
background: transparent;
text-align: left;
}
.nav-scroll[b-wv3ofupuxg] .nav-item i,
.nav-item i[b-wv3ofupuxg] {
width: 1.1rem;
text-align: center;
font-size: 0.95rem;
opacity: 0.9;
}
.nav-scroll[b-wv3ofupuxg] .nav-item .nav-ext,
.nav-item .nav-ext[b-wv3ofupuxg] {
margin-left: auto;
font-size: 0.7rem;
opacity: 0.6;
}
.nav-scroll[b-wv3ofupuxg] .nav-item:hover,
.nav-item:hover[b-wv3ofupuxg] {
background-color: var(--zd-sidebar-hover);
color: var(--zd-sidebar-text);
}
.nav-scroll[b-wv3ofupuxg] .nav-item.active,
.nav-item.active[b-wv3ofupuxg] {
background-color: var(--zd-sidebar-active);
color: var(--zd-sidebar-text);
font-weight: 600;
}
.nav-scroll[b-wv3ofupuxg] .nav-item.active i,
.nav-item.active i[b-wv3ofupuxg] {
color: var(--ea-blue);
opacity: 1;
}
.nav-logout[b-wv3ofupuxg] {
margin: 0;
}
.nav-item-button[b-wv3ofupuxg] {
font-family: inherit;
cursor: pointer;
}
@media (max-width: 640.98px) {
/* Phones: the brand row stays as a bar and the list opens as a drawer
over the page, scrolling on its own, closed by any choice. */
.nav-brand-row[b-wv3ofupuxg] {
padding: 0.6rem 0.75rem 0.6rem 1rem;
}
.nav-brandmark[b-wv3ofupuxg] {
width: 24px;
height: 24px;
}
.nav-org[b-wv3ofupuxg] {
display: none;
}
.nav-version-drawer[b-wv3ofupuxg] {
display: block;
padding: 0.5rem 0.75rem 0;
font-size: 0.75rem;
color: var(--zd-sidebar-muted);
font-variant-numeric: tabular-nums;
}
.nav-scroll[b-wv3ofupuxg] {
display: none;
position: fixed;
top: var(--zd-mobile-bar-height, 3.5rem);
left: 0;
right: 0;
bottom: 0;
z-index: 1040;
overflow-y: auto;
background-color: var(--zd-sidebar-bg);
border-top: 1px solid var(--zd-sidebar-border);
padding: 0.25rem 0.75rem 1.5rem 0.75rem;
-webkit-overflow-scrolling: touch;
}
.nav-toggle-input:checked ~ .nav-scroll[b-wv3ofupuxg] {
display: flex;
}
.nav-scroll[b-wv3ofupuxg] .nav-item,
.nav-item[b-wv3ofupuxg] {
padding: 0.65rem 0.75rem;
font-size: 1rem;
}
.nav-spacer[b-wv3ofupuxg] {
min-height: 1rem;
}
}
@media (min-width: 641px) {
.navbar-toggler[b-wv3ofupuxg],
.nav-toggle-input[b-wv3ofupuxg] {
display: none;
}
}
/* /Components/Layout/WhatsNew.razor.rz.scp.css */
.whats-new[b-y9acfdjoak] {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1060;
width: min(30rem, calc(100vw - 2rem));
max-height: min(70vh, 40rem);
display: flex;
flex-direction: column;
background: var(--bs-body-bg);
color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
border-top: 3px solid var(--ea-blue, #1273ff);
border-radius: 0.6rem;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.whats-new-head[b-y9acfdjoak] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem 0.5rem;
}
.whats-new-title[b-y9acfdjoak] {
flex: 1 1 auto;
margin: 0;
font-size: 1.05rem;
font-weight: 800;
}
.whats-new-title i[b-y9acfdjoak] {
color: var(--ea-blue, #1273ff);
margin-right: 0.35rem;
}
.whats-new-close[b-y9acfdjoak] {
border: 0;
background: none;
color: var(--bs-secondary-color);
font-size: 1.5rem;
line-height: 1;
padding: 0 0.25rem;
}
.whats-new-close:hover[b-y9acfdjoak],
.whats-new-close:focus-visible[b-y9acfdjoak] {
color: var(--bs-body-color);
}
.whats-new-body[b-y9acfdjoak] {
overflow-y: auto;
padding: 0 1rem;
font-size: 0.9rem;
}
.whats-new-version[b-y9acfdjoak] {
font-size: 0.9rem;
font-weight: 800;
margin: 0.75rem 0 0.25rem;
}
.whats-new-notes[b-y9acfdjoak] ul {
padding-left: 1.1rem;
margin-bottom: 0.5rem;
}
.whats-new-notes[b-y9acfdjoak] li {
margin-bottom: 0.4rem;
}
.whats-new-notes[b-y9acfdjoak] p {
margin-bottom: 0.5rem;
color: var(--bs-secondary-color);
}
.whats-new-foot[b-y9acfdjoak] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1rem 0.8rem;
border-top: 1px solid var(--bs-border-color);
}
/* /Components/LoadingSignal.razor.rz.scp.css */
.signal-background[b-3f88qoj6mr] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}
.signal-wrapper[b-3f88qoj6mr] {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.signal[b-3f88qoj6mr] {
display: inline-block;
border-width: 8px;
border-style: solid;
margin-top: 10px;
border-radius: 100%;
height: 50px;
width: 50px;
opacity: 0;
transform-origin: center;
animation: pulsate-b-3f88qoj6mr .85s ease-out;
animation-iteration-count: infinite;
}
.signal[b-3f88qoj6mr] {
/* Follows the active color mode instead of a server-side guess. */
border-color: var(--bs-body-color);
}
@keyframes pulsate-b-3f88qoj6mr {
0% {
transform: scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* /Components/ModalContents/EditDeviceGroup.razor.rz.scp.css */
/* "Access for " modal (style guide A.14): three groups under
.zd-subhead headings, fields from the shared blocks in css/tokens.css. */
.eda[b-hi2au7ijvg] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.eda-group[b-hi2au7ijvg] {
display: flex;
flex-direction: column;
gap: 0.6rem;
min-width: 0;
}
.eda-head[b-hi2au7ijvg] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
}
.eda-head > .zd-subhead[b-hi2au7ijvg] {
margin: 0;
}
.eda-group > .zd-subhead[b-hi2au7ijvg] {
margin: 0;
}
.eda-checks[b-hi2au7ijvg] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: 0.35rem 1.25rem;
}
.eda-cats[b-hi2au7ijvg] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 1rem 1.5rem;
}
.eda-cat[b-hi2au7ijvg] {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.eda-cat-title[b-hi2au7ijvg] {
float: none;
width: auto;
margin: 0 0 0.35rem;
padding: 0;
font-size: 0.85rem;
font-weight: 600;
}
.eda-cat .form-check[b-hi2au7ijvg] {
margin-bottom: 0.2rem;
}
.eda-cat .zd-tag[b-hi2au7ijvg] {
margin-left: 0.25rem;
}
/* Bootstrap fades the whole label of a disabled box to 0.5 opacity. That
took the "always available", "server admins only" and "administrators
only" tags and the API key note, which say why the box is locked, below
4.5:1. The label keeps full opacity; the page name turns grey instead. */
.eda-cat .form-check-input:disabled ~ .form-check-label[b-hi2au7ijvg] {
opacity: 1;
color: var(--bs-secondary-color);
}
.eda-note[b-hi2au7ijvg] {
display: block;
font-size: 0.75rem;
color: var(--bs-secondary-color);
}
.eda-actions[b-hi2au7ijvg] {
display: flex;
justify-content: flex-end;
}
@media (max-width: 640px) {
.eda-actions > .btn[b-hi2au7ijvg] {
width: 100%;
}
}
/* /Components/PageLoadingIndicator.razor.rz.scp.css */
.page-loading[b-st16ypeq3i] {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: min(30vh, 14rem);
background-color: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
animation: page-loading-in-b-st16ypeq3i 120ms ease-out;
}
.page-loading-box[b-st16ypeq3i] {
position: sticky;
top: 30vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 1.25rem 1.75rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
}
.page-loading-wheel[b-st16ypeq3i] {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 3px solid var(--bs-tertiary-bg);
border-top-color: var(--ea-blue);
animation: page-loading-spin-b-st16ypeq3i 0.8s linear infinite;
}
.page-loading-text[b-st16ypeq3i] {
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
@keyframes page-loading-spin-b-st16ypeq3i {
to { transform: rotate(360deg); }
}
@keyframes page-loading-in-b-st16ypeq3i {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.page-loading-wheel[b-st16ypeq3i] { animation-duration: 2.4s; }
}
/* /Components/Pages/Branding.razor.rz.scp.css */
.branding-icon[b-l3xyccfb1h] {
max-width: 8rem;
height: auto;
}
/* /Components/Pages/Credits.razor.rz.scp.css */
li[b-hs9f665pat] {
word-wrap: break-word;
}
/* /Components/Pages/DeviceDetails.razor.rz.scp.css */
/* Device details: same card language as the dashboard (Dashboard.razor.css). */
.dd-head[b-oui5vzxmdt] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin: 0.75rem 0 1rem;
}
.dd-title[b-oui5vzxmdt] {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0;
font-size: 1.5rem;
overflow-wrap: anywhere;
}
.dd-sub[b-oui5vzxmdt] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.25rem;
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
.dd-sub .sep[b-oui5vzxmdt] { opacity: 0.6; }
.dd[b-oui5vzxmdt] {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1rem;
}
/* ---- KPI cards ---------------------------------------------------------- */
.dd-kpis[b-oui5vzxmdt] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.kpi[b-oui5vzxmdt] {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
min-width: 0;
}
.kpi-warning[b-oui5vzxmdt] { border-color: var(--bs-warning-border-subtle); }
.kpi-warning .kpi-value[b-oui5vzxmdt] { color: var(--bs-warning-text-emphasis); }
.kpi-danger[b-oui5vzxmdt] { border-color: var(--bs-danger-border-subtle); }
.kpi-danger .kpi-value[b-oui5vzxmdt] { color: var(--bs-danger-text-emphasis); }
.kpi-label[b-oui5vzxmdt] {
font-size: 0.8rem;
color: var(--bs-secondary-color);
}
.kpi-value[b-oui5vzxmdt] {
font-size: 1.85rem;
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.kpi-note[b-oui5vzxmdt] {
font-size: 0.75rem;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---- Bars --------------------------------------------------------------- */
.meter[b-oui5vzxmdt] { display: flex; align-items: center; }
.track[b-oui5vzxmdt] {
height: 6px;
border-radius: 3px;
background-color: var(--bs-tertiary-bg);
overflow: hidden;
flex-grow: 1;
}
.fill[b-oui5vzxmdt] {
height: 100%;
border-radius: 3px;
background-color: var(--bs-tertiary-color);
opacity: 0.55;
}
.fill-warning[b-oui5vzxmdt] { background-color: var(--bs-warning); opacity: 1; }
.fill-danger[b-oui5vzxmdt] { background-color: var(--bs-danger); opacity: 1; }
/* ---- Panels ------------------------------------------------------------- */
.dd-grid[b-oui5vzxmdt] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.panel[b-oui5vzxmdt] {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.1rem 1.25rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
min-width: 0;
}
.panel.p-0[b-oui5vzxmdt] { overflow: hidden; }
.panel-head[b-oui5vzxmdt] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.panel-title[b-oui5vzxmdt] {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
/* Label / value pairs inside a panel. */
.facts[b-oui5vzxmdt] {
display: grid;
grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
gap: 0.45rem 1rem;
margin: 0;
}
.facts dt[b-oui5vzxmdt] {
font-weight: 400;
font-size: 0.8rem;
color: var(--bs-secondary-color);
padding-top: 0.1rem;
}
.facts dd[b-oui5vzxmdt] {
margin: 0;
overflow-wrap: anywhere;
}
.mono[b-oui5vzxmdt] {
font-family: var(--bs-font-monospace);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.muted[b-oui5vzxmdt] { color: var(--bs-secondary-color); }
.empty[b-oui5vzxmdt] {
padding: 2rem 0;
text-align: center;
color: var(--bs-secondary-color);
}
.callout-warning[b-oui5vzxmdt] {
padding: 0.75rem 1rem;
border-radius: var(--bs-border-radius);
background-color: var(--bs-warning-bg-subtle);
color: var(--bs-warning-text-emphasis);
border: 1px solid var(--bs-warning-border-subtle);
}
.table th[b-oui5vzxmdt] {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
}
@media (max-width: 1100px) {
.dd-grid[b-oui5vzxmdt] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.dd-kpis[b-oui5vzxmdt],
.dd-grid[b-oui5vzxmdt] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Geofence.razor.rz.scp.css */
.gf-actions[b-svmx4xk8v5] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.gf-layout[b-svmx4xk8v5] {
display: grid;
grid-template-columns: minmax(0, 1fr) 21rem;
gap: 1rem;
align-items: start;
}
.gf-map-panel[b-svmx4xk8v5] {
overflow: hidden;
gap: 0;
}
.gf-map[b-svmx4xk8v5] {
height: max(26rem, 64vh);
width: 100%;
background: var(--bs-tertiary-bg);
}
.gf-map.gf-drawing[b-svmx4xk8v5],
.gf-map[b-svmx4xk8v5] .gf-drawing {
cursor: crosshair;
}
.gf-legend[b-svmx4xk8v5] {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0.6rem 1rem;
font-size: 0.8rem;
color: var(--bs-secondary-color);
border-top: 1px solid var(--bs-border-color);
}
.gf-legend > span[b-svmx4xk8v5] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.gf-dot[b-svmx4xk8v5] {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
flex-shrink: 0;
border: 2px solid var(--bs-body-bg);
box-shadow: 0 0 0 1px var(--bs-border-color);
}
/* One color per alert type: the same as KindColor() in Geofence.razor.cs. */
.gf-kind-hours[b-svmx4xk8v5] { background: #7c4dcc; }
.gf-kind-failures[b-svmx4xk8v5] { background: #f08c00; }
.gf-kind-country[b-svmx4xk8v5] { background: #1c7ed6; }
.gf-kind-zone[b-svmx4xk8v5] { background: #dc3545; }
.gf-kind-new[b-svmx4xk8v5] { background: #0ca678; }
.gf-kind-other[b-svmx4xk8v5] { background: #8b91a4; }
.gf-period[b-svmx4xk8v5] {
width: auto;
}
.gf-swatch[b-svmx4xk8v5] {
display: inline-block;
width: 1rem;
height: 0.7rem;
border: 2px solid #dc3545;
background: rgba(220, 53, 69, 0.18);
border-radius: 2px;
}
.gf-side[b-svmx4xk8v5] {
display: grid;
gap: 1rem;
min-width: 0;
}
.gf-draft[b-svmx4xk8v5] {
border-color: #dc3545;
}
.gf-draft-foot[b-svmx4xk8v5] {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.gf-zone[b-svmx4xk8v5] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0;
border-top: 1px solid var(--bs-border-color);
}
.gf-zone-main[b-svmx4xk8v5] {
display: grid;
flex: 1 1 auto;
min-width: 0;
padding: 0;
border: 0;
background: none;
text-align: start;
color: var(--bs-body-color);
}
.gf-zone-name[b-svmx4xk8v5],
.gf-device-name[b-svmx4xk8v5] {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gf-small[b-svmx4xk8v5] {
font-size: 0.78rem;
}
.gf-icon[b-svmx4xk8v5] {
color: var(--bs-secondary-color);
}
.gf-icon-danger:hover[b-svmx4xk8v5],
.gf-icon-danger:focus-visible[b-svmx4xk8v5] {
color: var(--bs-danger-text-emphasis);
}
.gf-devices[b-svmx4xk8v5] {
display: grid;
max-height: 22rem;
overflow-y: auto;
}
.gf-device-row[b-svmx4xk8v5] {
display: flex;
align-items: center;
gap: 0.4rem;
border-top: 1px solid var(--bs-border-color);
}
.gf-device[b-svmx4xk8v5] {
display: flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.25rem;
border: 0;
background: none;
text-align: start;
color: var(--bs-body-color);
}
.gf-device:hover:not(:disabled)[b-svmx4xk8v5] {
background: var(--bs-tertiary-bg);
}
.gf-device:disabled[b-svmx4xk8v5] {
cursor: default;
opacity: 0.7;
}
.gf-device-body[b-svmx4xk8v5] {
display: grid;
flex: 1 1 auto;
min-width: 0;
}
/* Leaflet builds these elements itself, inside the map. */
.gf-map[b-svmx4xk8v5] .gf-cluster {
background: none;
border: 0;
}
.gf-map[b-svmx4xk8v5] .gf-cluster-count {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #ffffff;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
font-weight: 800;
font-size: 0.8rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.gf-map[b-svmx4xk8v5] .gf-popup {
display: grid;
gap: 0.5rem;
max-height: 16rem;
overflow-y: auto;
font-family: var(--bs-body-font-family);
}
.gf-map[b-svmx4xk8v5] .gf-popup-row {
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.gf-map[b-svmx4xk8v5] .gf-popup .gf-dot {
margin-top: 0.3rem;
border-color: #ffffff;
}
.gf-map[b-svmx4xk8v5] .gf-popup-place,
.gf-map[b-svmx4xk8v5] .gf-popup-meta {
font-size: 0.78rem;
color: #5b6172;
}
.gf-map[b-svmx4xk8v5] .gf-popup-alert {
color: #b02a37;
font-weight: 700;
}
.gf-map[b-svmx4xk8v5] .gf-popup-alerts {
display: grid;
gap: 0.35rem;
margin-top: 0.35rem;
}
.gf-map[b-svmx4xk8v5] .gf-popup-kind {
display: inline-block;
padding: 0 0.4rem;
border-radius: 0.6rem;
color: #ffffff;
font-size: 0.72rem;
font-weight: 700;
margin-right: 0.35rem;
}
.gf-map[b-svmx4xk8v5] .gf-popup-summary {
font-size: 0.8rem;
color: #2b3040;
}
.gf-map[b-svmx4xk8v5] .gf-popup-link {
font-size: 0.78rem;
}
@media (max-width: 991.98px) {
.gf-layout[b-svmx4xk8v5] {
grid-template-columns: 1fr;
}
.gf-map[b-svmx4xk8v5] {
height: 60vh;
}
}
/* /Components/Pages/ManageOrganization.razor.rz.scp.css */
/* Users & Groups: a single-column page (style guide A.3) whose controls all
apply immediately (A.6, model 3). Panels, setting rows, facts, tables and
callouts come from the shared blocks in css/tokens.css; only the page's own
layout lives here. */
.org[b-g4ao4op8z7] {
max-width: 64rem;
}
/* ---- Organization -------------------------------------------------------- */
.org-name[b-g4ao4op8z7] {
width: 20rem;
max-width: 100%;
}
.org[b-g4ao4op8z7] .org-id {
max-width: 30rem;
}
/* ---- Tables -------------------------------------------------------------- */
.org-cell-text[b-g4ao4op8z7] {
min-width: 8rem;
overflow-wrap: anywhere;
}
.org-user[b-g4ao4op8z7] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem 0.4rem;
}
.org-user-name[b-g4ao4op8z7] {
font-weight: 500;
min-width: 0;
overflow-wrap: anywhere;
}
.org-user-sub[b-g4ao4op8z7] {
margin-top: 0.1rem;
font-size: 0.78rem;
color: var(--bs-secondary-color);
}
.org-admin-check[b-g4ao4op8z7] {
float: none;
margin: 0;
cursor: pointer;
}
/* An unticked box keeps a visible edge. The theme's border colour is close
to the panel in dark mode, so "not an administrator" looked like an empty
cell, above all for a delegate, who sees every box disabled. */
.org-admin-check:not(:checked)[b-g4ao4op8z7] {
border-color: var(--bs-tertiary-color);
}
/* Bootstrap's 0.5 opacity hides the tick of a checked, disabled box on the
light theme; the row's own flag must stay readable. */
.org-admin-check:disabled[b-g4ao4op8z7] {
cursor: default;
opacity: 0.75;
}
/* The join link under the address on a phone (the Link column is hidden). */
.org-invite-link[b-g4ao4op8z7] {
display: inline-block;
margin-top: 0.15rem;
}
.org-notice[b-g4ao4op8z7] {
width: auto;
min-width: 11rem;
}
.org-actions[b-g4ao4op8z7] {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
white-space: nowrap;
}
/* ---- Microsoft 365 note ------------------------------------------------- */
.org-ms[b-g4ao4op8z7] {
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.org-ms > i[b-g4ao4op8z7] {
font-size: 1.05rem;
margin-top: 0.1rem;
}
/* ---- Add boxes in the panel feet ----------------------------------------- */
.org-add[b-g4ao4op8z7] {
width: 100%;
max-width: 28rem;
}
.org-invite[b-g4ao4op8z7] {
display: flex;
flex-direction: column;
gap: 0.3rem;
width: 100%;
}
.org-invite-row[b-g4ao4op8z7] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
}
.org-invite-row > input[b-g4ao4op8z7] {
flex: 1 1 16rem;
min-width: 0;
}
/* "Belongs to tenant": only shown once another tenant is approved. */
.org-invite-row > .org-invite-tenant[b-g4ao4op8z7] {
flex: 0 1 14rem;
min-width: 0;
}
/* ---- Narrow content ------------------------------------------------------ */
/* Up to here the menu sits beside the page and leaves the tables too little
width for "Access", "Reset password" and "Delete" in words (at 768px the
Users table scrolled sideways), and from 641px to 700px the content is as
narrow as on a phone. Row buttons keep their icon; the name is in
aria-label and title. The narrower gaps and minimums leave the address
more room. */
@media (max-width: 900px) {
.org-btn-text[b-g4ao4op8z7] {
display: none;
}
.org-actions[b-g4ao4op8z7] {
gap: 0.25rem;
}
.org-cell-text[b-g4ao4op8z7] {
min-width: 6rem;
}
.org-notice[b-g4ao4op8z7] {
min-width: 9rem;
}
}
/* ---- Phones -------------------------------------------------------------- */
@media (max-width: 640px) {
.org-name[b-g4ao4op8z7] {
width: 100%;
}
/* The ID goes under its label instead of wrapping in a narrow column. */
.org .zd-facts[b-g4ao4op8z7] {
grid-template-columns: minmax(0, 1fr);
gap: 0.2rem;
}
.org-add[b-g4ao4op8z7] {
max-width: none;
}
.org-invite-button[b-g4ao4op8z7] {
width: 100%;
}
}
/* /Components/Pages/SecurityAlerts.razor.rz.scp.css */
.sa-new[b-96u5nhk4l5] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.sa-templates[b-96u5nhk4l5] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 0.75rem;
}
.sa-template[b-96u5nhk4l5] {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.15rem 0.75rem;
padding: 1rem;
text-align: start;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-lg);
background: var(--bs-tertiary-bg);
color: var(--bs-body-color);
}
.sa-template:hover[b-96u5nhk4l5],
.sa-template:focus-visible[b-96u5nhk4l5] {
border-color: var(--ea-blue);
}
.sa-template i[b-96u5nhk4l5] {
grid-row: span 2;
font-size: 1.3rem;
color: var(--ea-blue);
padding-top: 0.15rem;
}
.sa-template-title[b-96u5nhk4l5] {
font-weight: 700;
}
.sa-template-text[b-96u5nhk4l5] {
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
.sa-rule-name[b-96u5nhk4l5] {
font-weight: 700;
text-decoration: none;
color: var(--bs-emphasis-color);
}
.sa-rule-sub[b-96u5nhk4l5] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
}
.sa-editor[b-96u5nhk4l5] {
display: grid;
gap: 1rem;
max-width: 56rem;
}
.sa-switch-field[b-96u5nhk4l5] {
align-self: end;
padding-bottom: 0.45rem;
}
.sa-inline[b-96u5nhk4l5] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.sa-inline .form-select[b-96u5nhk4l5],
.sa-inline .form-control[b-96u5nhk4l5] {
width: auto;
min-width: 12rem;
flex: 0 1 18rem;
}
.sa-days[b-96u5nhk4l5] {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.sa-days .btn[b-96u5nhk4l5] {
min-width: 3.2rem;
}
.sa-targets[b-96u5nhk4l5] {
display: grid;
grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr);
gap: 1.25rem;
}
.sa-device-list[b-96u5nhk4l5] {
max-height: 18rem;
overflow-y: auto;
}
.sa-online[b-96u5nhk4l5] {
background-color: var(--bs-success);
}
.sa-offline[b-96u5nhk4l5] {
background-color: var(--bs-secondary-color);
}
.sa-number[b-96u5nhk4l5] {
width: 6.5rem;
}
.sa-history-row[b-96u5nhk4l5] {
cursor: pointer;
}
.sa-expanded td[b-96u5nhk4l5],
.sa-details td[b-96u5nhk4l5] {
background-color: var(--bs-tertiary-bg);
}
.sa-summary[b-96u5nhk4l5] {
min-width: 18rem;
}
@media (max-width: 640.98px) {
.sa-targets[b-96u5nhk4l5] {
grid-template-columns: 1fr;
}
.sa-inline .form-select[b-96u5nhk4l5],
.sa-inline .form-control[b-96u5nhk4l5] {
flex: 1 1 100%;
}
}
/* /Components/Pages/ServerConfig.razor.rz.scp.css */
/* Layout comes from the shared page blocks in css/tokens.css. */
/* /Components/Pages/ServerLogs.razor.rz.scp.css */
.buttons-row[b-gzlf2la9k2] {
display: grid;
grid-template-columns: auto auto 1fr;
grid-column-gap: 2em;
}
.filters-row[b-gzlf2la9k2] {
display: grid;
grid-template-columns: auto auto auto 1fr;
grid-column-gap: 1em;
}
.logs-content[b-gzlf2la9k2] {
width: 100%;
white-space: pre;
height: 500px;
}
@media (max-width: 641px) {
.buttons-row[b-gzlf2la9k2] {
grid-template-columns: 1fr;
text-align: center;
grid-row-gap: 1em;
}
.filters-row[b-gzlf2la9k2] {
grid-template-columns: 1fr 1fr;
align-items: center;
grid-row-gap: 0.5em;
}
}
/* /Components/Pages/ServerPerformance.razor.rz.scp.css */
/* Real-Time Performance: same card language as the dashboard. */
.rt[b-h37kh0ywb2] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.rt-head[b-h37kh0ywb2] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.rt-title[b-h37kh0ywb2] {
margin: 0;
font-size: 1.5rem;
}
.rt-sub[b-h37kh0ywb2] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
.rt-kpis[b-h37kh0ywb2] {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 1rem;
}
.kpi[b-h37kh0ywb2] {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
min-width: 0;
}
.kpi-warning[b-h37kh0ywb2] { border-color: var(--bs-warning-border-subtle); }
.kpi-warning .kpi-value[b-h37kh0ywb2] { color: var(--bs-warning-text-emphasis); }
.kpi-danger[b-h37kh0ywb2] { border-color: var(--bs-danger-border-subtle); }
.kpi-danger .kpi-value[b-h37kh0ywb2] { color: var(--bs-danger-text-emphasis); }
.kpi-label[b-h37kh0ywb2] {
font-size: 0.8rem;
color: var(--bs-secondary-color);
}
.kpi-value[b-h37kh0ywb2] {
font-size: 1.85rem;
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.kpi-note[b-h37kh0ywb2] {
font-size: 0.75rem;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rt-charts[b-h37kh0ywb2] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.rt-row[b-h37kh0ywb2] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.panel[b-h37kh0ywb2] {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.1rem 1.25rem;
border-radius: var(--bs-border-radius-lg);
background-color: var(--zd-surface);
border: 1px solid var(--bs-border-color);
min-width: 0;
}
.panel-head[b-h37kh0ywb2] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.panel-title[b-h37kh0ywb2] {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.facts[b-h37kh0ywb2] {
display: grid;
grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
gap: 0.45rem 1rem;
margin: 0;
font-size: 0.9rem;
}
.facts dt[b-h37kh0ywb2] {
font-weight: 400;
font-size: 0.8rem;
color: var(--bs-secondary-color);
padding-top: 0.1rem;
}
.facts dd[b-h37kh0ywb2] {
margin: 0;
overflow-wrap: anywhere;
}
.rt-search[b-h37kh0ywb2] { width: 14rem; }
.rt-sort[b-h37kh0ywb2] { width: auto; }
.rt-link[b-h37kh0ywb2] {
color: var(--bs-body-color);
text-decoration: none;
font-weight: 600;
}
.rt-link:hover[b-h37kh0ywb2] { text-decoration: underline; }
.table th[b-h37kh0ywb2] {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
}
.mono[b-h37kh0ywb2] {
font-family: var(--bs-font-monospace);
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
}
.muted[b-h37kh0ywb2] { color: var(--bs-secondary-color); }
.empty[b-h37kh0ywb2] {
padding: 2rem 0;
text-align: center;
color: var(--bs-secondary-color);
}
@media (max-width: 1400px) {
.rt-kpis[b-h37kh0ywb2] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.rt-charts[b-h37kh0ywb2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rt-row[b-h37kh0ywb2] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.rt-kpis[b-h37kh0ywb2],
.rt-charts[b-h37kh0ywb2] { grid-template-columns: minmax(0, 1fr); }
.rt-search[b-h37kh0ywb2] { width: 100%; }
}
/* Range selector and compare toggle, one row above the charts. */
.rt-ranges[b-h37kh0ywb2] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
}
.rt-range-group[b-h37kh0ywb2] {
display: inline-flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.rt-range[b-h37kh0ywb2] {
padding: 0.25rem 0.65rem;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--zd-surface);
color: var(--bs-body-color);
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.rt-range:hover[b-h37kh0ywb2] {
border-color: var(--bs-secondary-color);
}
.rt-range.active[b-h37kh0ywb2] {
background: var(--ea-blue-action);
border-color: var(--ea-blue-action);
color: var(--ea-on-blue);
font-weight: 600;
}
.rt-compare[b-h37kh0ywb2] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--bs-secondary-color);
cursor: pointer;
}
.rt-device-pick[b-h37kh0ywb2] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.rt-device-pick select[b-h37kh0ywb2] {
width: auto;
max-width: 100%;
}
.rt-device-charts[b-h37kh0ywb2] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
@media (max-width: 1100px) {
.rt-device-charts[b-h37kh0ywb2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.rt-device-charts[b-h37kh0ywb2] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/UserOptions.razor.rz.scp.css */
/* Preferences: a single-column settings page (style guide A.3) with the
floating Save (A.6, model 1). Panels, setting rows and fields come from
the shared blocks in css/tokens.css. */
.prefs[b-rpdklo84cz] {
max-width: 64rem;
/* Room for the floating Save, so the last field stays reachable. */
padding-bottom: 6rem;
}
/* EditForm renders the