rows
.w-tr is a grid row when it is a (the prices and download lists), but
on an actual
that grid collapses every cell onto its own line. Table
elements keep table layout and take their padding on the cells instead. */
table.w-table { border-collapse: collapse; }
tr.w-tr { display: table-row; padding: 0; border-bottom: 0; }
tr.w-tr > td { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: top; }
tr.w-tr:hover > td { background: rgba(199, 244, 112, .045); }
thead.w-thead > tr > th,
tr.w-thead > th { padding: 11px 16px; text-align: left; font-weight: 400; }
/* The auth brand mark only exists for the width where the art column - and the
brand with it - is gone. */
.w-auth-brand { display: none; align-items: center; gap: 11px; margin-bottom: 26px; }
@media (max-width: 1100px) {
.w-auth-brand { display: flex; }
.w-auth-form { align-items: flex-start; padding: 40px 24px; }
}
/* ------------------------------------------------------------- checkboxes */
.w-auth input[type="checkbox"],
.w-body input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 17px;
height: 17px;
flex-shrink: 0;
border-radius: 5px;
border: 1px solid var(--w-line);
background: var(--w-fill);
cursor: pointer;
position: relative;
margin: 0;
}
.w-auth input[type="checkbox"]:checked,
.w-body input[type="checkbox"]:checked { background: var(--w-accent); border-color: var(--w-accent); }
.w-auth input[type="checkbox"]:checked::after,
.w-body input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 5px; top: 1px;
width: 4px; height: 9px;
border: solid var(--w-bg);
border-width: 0 2px 2px 0;
transform: rotate(42deg);
}
/* ------------------------------------------------------------------- phones
The screens lay themselves out with inline `grid-template-columns`, which a
stylesheet cannot normally override. Below 720px every one of those grids
becomes a single column - inline styles win on specificity, so this is the
one place the theme has to insist. */
@media (max-width: 720px) {
.w-body [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
.w-body [style*="max-width"] { max-width: 100% !important; }
.w-main { overflow-x: hidden; }
.w-body { padding: 18px 14px 48px; }
.w-card-p { padding: 18px 16px; }
.w-topbar { height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
/* A licence row is a name, an address and a date; stacked, it reads as a
list rather than three columns fighting for 30px each. */
.w-tr { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
.w-docgrid { grid-template-columns: minmax(0, 1fr) !important; }
.w-idx { position: static; }
}
/* An operator's own logo is shown as artwork, not cropped into a tile: it keeps
its aspect ratio and is capped so a wide wordmark cannot push the sidebar. */
.w-logo { display: block; width: auto; max-width: 100%; object-fit: contain; }
.w-brand .w-logo { max-width: 176px; }
.w-auth-art .w-logo { max-width: 240px; }
.w-auth-brand .w-logo { max-width: 200px; }
/* The sidebar carries the whole customer panel now, not just the licence
screens, so on a laptop the nav runs past the fold and the last item is
clipped with nothing to say it scrolls. The usage card is the only decorative
thing down there, so it is what gives way. */
@media (max-height: 940px) {
.w-side .w-tier { display: none; }
}
.w-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.w-nav::-webkit-scrollbar { width: 6px; }
.w-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }
.w-nav::-webkit-scrollbar-track { background: transparent; }