/* desk-frame.css: BUILT by A.D.I. tools/vad-web-sync.js from ui/styleguide/tokens.css and ui/style.css. Do not edit here; change A.D.I. and run the script. */ /* ========================================================================== STYLE GUIDE — WHITE, colour tokens Source of truth: the COLORS page in Figma "APPS" (2122:6388), read from the file through the Figma connector rather than transcribed from a screenshot. Twenty-four cards there, twenty-four tokens here - checked by script, name and value, not by eye. THIS IS THE LIGHT SCHEME. Several names may exist in a dark sibling with different values; load one, not both, or whichever comes last wins silently in whatever the app draws next. Four families, and the prefix says which: UI surfaces the interface is built from BX boxes: fields, buttons, their strokes, and the marks drawn on them HL highlight: the blues TX text Names are the token on each card, lower-cased and hyphenated: the card that reads "-- ui main dark" is --ui-main-dark. Mechanical on purpose - anybody can go from a card to a CSS token without a lookup table. Note that the CARD is what names it, not the Figma variable behind it: the variable for --ui-super-light is called main-super-light, and the card is not. WHAT CHANGED ON 2026-09-28, when the page was tidied up: - The blues LOST their HL prefix. --hl-blue is --blue, and so on down. The family is still called HL on the page; the tokens are not. - ARROW and ICONS MOVED from HL into BX LIGHT: --bx-arrow, --bx-icon. - --bx-stroke-light changed value, #444444 -> #eeeeee. It was a dark value sitting in a light scheme; now it is what its name says. - Added: --ui-main-darker, --bx-stroke-dark, --blue-super. - Dropped: --ui-bg, --ui-black (the two dark surfaces) and --bx-hover. Nothing in this app referenced any of the three. ========================================================================== */ :root { /* ---- UI - INTERFACE ---------------------------------------------------- */ --ui-main: #f8f8f8; /* Interface Color: the default surface */ --ui-main-light: #fafafa; /* Light Interface Color: a raised plate */ --ui-super-light: #fbfbfb; /* Super Light: a table row under white */ --ui-main-dark: #f4f4f4; /* Dark Interface Color: a recessed plate */ --ui-main-darker: #f6f6f6; /* Darker Interface: the fill inside a box */ --ui-white: #ffffff; /* White */ /* ---- BX LIGHT - OPTIONS BOX -------------------------------------------- */ --bx-stroke: #e5e5e5; /* Main Stroke: the 1px edge round a control */ --bx-stroke-light: #eeeeee; /* Stroke for Main Light */ --bx-stroke-dark: #d2d2d2; /* Stroke Dark */ --bx-icon: #909090; /* Icons Color */ --bx-arrow: #696969; /* Arrows Color: chevrons and carets */ --bx-disabled: #252525; /* Disabled Stroke & Fill */ --bx-enabled: #151515; /* Enabled Stroke & Fill */ /* ---- HL - MAIN HIGHLIGHT COLOR ---------------------------------------- The tokens carry no hl: the page names them --blue, --blue light and so on, and that is what they are called here. */ --blue-super: #e3f0ff; /* Fill: the palest, behind blue type */ --blue-medium: #b5d9ff; /* Stroke */ --blue-light: #64aefe; /* Inner Stroke, on a blue fill */ --blue: #3790f0; /* Main Blue: selection, focus, active */ --blue-hover: #2882e3; /* Hover Blue */ --blue-dark: #285f9c; /* Dark Fill, and the edge round blue */ /* ---- TX - TEXT --------------------------------------------------------- */ --tx-light: #eeeeee; /* Light Text, ON a dark fill */ --tx-medium: #e0e0e0; /* Medium Text: a row number, a sort mark */ --tx-standard: #999999; /* Standard Text Color */ --tx-dark: #777777; /* Darker Text */ --tx-black: #121212; /* Black Text for UI */ /* ---- type -------------------------------------------------------------- */ /* UI - TAB is the file's own: Chakra Petch SemiBold 10/10. UI - MENU is not defined for the light scheme, so it is carried over from the dark one - the only value on this page that did not come out of the connector. */ --ui-tab: 600 10px/10px 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; --ui-menu: 400 12px/1 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; /* ---- geometry and effects ---------------------------------------------- A THEME IS NOT ONLY A PALETTE. Light and dark differ by colour alone, so swapping the values above would be enough for those two - but XP draws a bevel out of two edge colours, wood has a texture and JARVIS has a glow. None of that is expressible as a colour, so the shapes live here as tokens too and components must reference them rather than hard-coding a radius or a shadow. A theme that needs more than these can add its own sheet beside components.css; it must not fork it. Every value below is measured from the Figma frame, not chosen. */ --r-panel: 6px; /* a panel or a surrounding box */ --r-control: 4px; /* a card, a button, anything you can press */ --r-swatch: 0; /* a colour chip is square, deliberately */ --stroke: 1px; --stroke-heavy: 1px; /* the same here; XP spends 2 on its bevel */ /* the only drop in the light scheme, and it is barely there on purpose */ --shadow-raised: 2px 2px 4px 0 rgba(0, 0, 0, .05); --shadow-none: none; /* 5 / 10 / 20 is the whole rhythm of the design - a row of key and value is 5 apart, a label from its rule 10, everything structural 20 */ --gap-tight: 5px; --gap: 10px; --gap-wide: 20px; --pad-panel: 20px; --pad-control: 8px 14px; } :root { --bg: #f5f6f8; --panel: #ffffff; --line: #e3e6ea; --text: #1d2126; --muted: #6b7481; --accent: #2f6feb; --good: #2f9e44; --warn: #d9480f; } :root { --chat-w: 360px; } :root { --adi-right: 380px; --adi-fav: 260px; } main#viewVad:not(.hidden) { padding: 0 !important; gap: 0 !important; display: flex !important; flex-direction: column; overflow: hidden; } #viewVad .st { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 44px 1fr 44px; background: var(--ui-main); font: 400 12px/1.4 'Chakra Petch', 'Segoe UI', sans-serif; color: var(--tx-black); } #viewVad .st-head { grid-column: 1 / 3; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; background: var(--ui-white); border-bottom: 1px solid var(--bx-stroke); } #viewVad .st-head b { color: var(--tx-black); font: var(--ui-tab); letter-spacing: 1px; } #viewVad .st-find { margin-left: auto; width: 260px; height: 26px; padding: 0 10px; box-sizing: border-box; border-radius: 0; background: var(--ui-white); border: 1px solid var(--bx-stroke-dark); color: var(--tx-black); font: 400 12px 'Chakra Petch', sans-serif; outline: none; } #viewVad .st-find::placeholder { color: var(--tx-standard); } #viewVad .st-find:hover { border-color: var(--blue-medium); } #viewVad .st-find:focus { border-color: var(--blue); } #viewVad .st-nav { background: var(--ui-main-dark); border-right: 1px solid var(--bx-stroke); padding: 10px 0; overflow: auto; min-height: 0; } #viewVad .st-grp { padding: 12px 16px 6px; color: var(--tx-standard); font: var(--ui-tab); letter-spacing: 1px; } #viewVad .st-grp:first-child { padding-top: 2px; } #viewVad .st-item { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 16px; cursor: pointer; color: var(--tx-dark); border-left: 2px solid transparent; user-select: none; } #viewVad .st-item:hover { background: var(--ui-main-light); color: var(--tx-black); } #viewVad .st-item.on { background: var(--ui-white); color: var(--tx-black); border-left-color: var(--blue); } #viewVad .st-item .n { margin-left: auto; color: var(--tx-standard); font: var(--ui-tab); } #viewVad .st-item.hit .n { color: var(--blue); } #viewVad .st-item.miss { opacity: .4; } #viewVad .st-body { overflow-y: auto; padding: 20px 24px 28px; min-height: 0; } #viewVad .st-sec { max-width: 900px; } #viewVad .st-sec[hidden] { display: none; } #viewVad .st-title { color: var(--tx-black); font: 600 16px/1 'Chakra Petch', sans-serif; margin: 0 0 6px; } #viewVad .st-lead { color: var(--tx-dark); margin: 0 0 18px; max-width: 640px; } #viewVad .st-empty { color: var(--tx-dark); padding: 40px 0; text-align: center; } #viewVad .card { background: var(--ui-white); border: 1px solid var(--bx-stroke); margin-bottom: 14px; } #viewVad .card[hidden] { display: none; } #viewVad .card-h { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; background: var(--ui-main-light); border-bottom: 1px solid var(--bx-stroke-light); color: var(--tx-black); font: var(--ui-tab); letter-spacing: 1px; } #viewVad .card-h .tag { margin-left: auto; color: var(--tx-standard); font: 400 11px 'Chakra Petch', sans-serif; letter-spacing: 0; text-transform: none; } #viewVad .row { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--bx-stroke-light); } #viewVad .card-h + .row { border-top: 0; } #viewVad .row.gone { display: none; } #viewVad .row.hit { background: var(--blue-super); box-shadow: inset 2px 0 var(--blue); } #viewVad .row.full { grid-template-columns: 1fr; } #viewVad .lbl { color: var(--tx-black); } #viewVad .cap { color: var(--tx-dark); font-size: 11px; margin-top: 2px; } #viewVad .cap:empty { display: none; } #viewVad .ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } #viewVad .unit { color: var(--tx-dark); font-size: 11px; } #viewVad .st-body input[type=text], #viewVad .st-body input[type=password], #viewVad .st-body input[type=number], #viewVad .st-body select { height: 26px; box-sizing: border-box; border-radius: 0; background: var(--ui-white); border: 1px solid var(--bx-stroke-dark); color: var(--tx-black); font: 400 12px 'Chakra Petch', sans-serif; padding: 0 8px; outline: none; max-width: 100%; } #viewVad .st-body input::placeholder { color: var(--tx-standard); } #viewVad .st-body input:hover, #viewVad .st-body select:hover { border-color: var(--blue-medium); } #viewVad .st-body input:focus, #viewVad .st-body select:focus { border-color: var(--blue); } #viewVad .st-body input.num { width: 76px; text-align: right; } #viewVad .st-body .wide { width: 100%; max-width: 340px; } #viewVad .st-body select { padding-right: 24px; appearance: none; cursor: pointer; min-width: 120px; background-image: linear-gradient(45deg, transparent 50%, var(--bx-arrow) 50%), linear-gradient(-45deg, transparent 50%, var(--bx-arrow) 50%); background-position: right 12px center, right 8px center; background-size: 4px 4px; background-repeat: no-repeat; } #viewVad .st-body select:hover { background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(-45deg, transparent 50%, var(--blue) 50%); } #viewVad .st-body button { height: 26px; padding: 0 12px; border-radius: 0; background: var(--ui-white); border: 1px solid var(--bx-stroke-dark); color: var(--tx-black); font: 600 10px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; filter: none; } #viewVad .st-body button:hover { border-color: var(--blue); color: var(--blue); background: var(--ui-white); } #viewVad .st-body button.primary { background: var(--blue); border-color: var(--blue-dark); color: var(--ui-white); } #viewVad .st-body button.primary:hover { background: var(--blue-hover); color: var(--ui-white); } #viewVad .st-body button.danger:hover { border-color: #d64545; color: #d64545; } #viewVad .st-body input[type=checkbox] { appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative; width: 34px; height: 18px; border: 1px solid var(--bx-stroke-dark); background: var(--ui-main-dark); } #viewVad .st-body input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--bx-icon); transition: left 120ms, background 120ms; } #viewVad .st-body input[type=checkbox]:checked { background: var(--blue); border-color: var(--blue-dark); } #viewVad .st-body input[type=checkbox]:checked::after { left: 18px; background: var(--ui-white); } #viewVad .seg { display: inline-flex; border: 1px solid var(--bx-stroke-dark); background: var(--ui-white); } #viewVad .seg label { display: flex; margin: 0; cursor: pointer; } #viewVad .seg label + label { border-left: 1px solid var(--bx-stroke-dark); } #viewVad .seg input { position: absolute; opacity: 0; pointer-events: none; } #viewVad .seg span { height: 24px; padding: 0 12px; display: grid; place-items: center; color: var(--tx-dark); font: 600 10px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; } #viewVad .seg label:hover span { color: var(--blue); } #viewVad .seg input:checked + span { background: var(--blue); color: var(--ui-white); } #viewVad .rng { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; } #viewVad .rng input { flex: 1; margin: 0; accent-color: var(--blue); } #viewVad .rng b { min-width: 48px; text-align: right; color: var(--tx-black); font-weight: 400; } #viewVad .ctl.key input { flex: 1; max-width: 300px; } #viewVad .dot { width: 6px; height: 6px; background: #3ab36b; flex: none; } #viewVad .dot.no { background: var(--bx-stroke-dark); } #viewVad .i { width: 16px; height: 16px; display: inline-grid; place-items: center; margin-left: 6px; border: 1px solid var(--bx-stroke-dark); color: var(--tx-dark); font: 600 9px/1 'Chakra Petch', sans-serif; cursor: pointer; vertical-align: 1px; user-select: none; } #viewVad .i:hover, #viewVad .row.open .i { color: var(--blue); border-color: var(--blue); } #viewVad .help { grid-column: 1 / 3; display: none; color: var(--tx-dark); font-size: 11px; line-height: 1.5; background: var(--ui-main); border-left: 2px solid var(--blue); padding: 8px 10px; margin-top: 2px; max-width: 760px; } #viewVad .row.open .help { display: block; } #viewVad .ctl > #cl-hidden, #viewVad .ctl > #wordSets, #viewVad .ctl > #appSounds, #viewVad .ctl > .store-list { width: 100%; max-width: 520px; } #viewVad .corr-canvas { width: 100%; } #viewVad .st-nav-foot { display: flex; align-items: center; padding: 0 16px; background: var(--ui-main-dark); border-right: 1px solid var(--bx-stroke); border-top: 1px solid var(--bx-stroke); color: var(--tx-standard); font: var(--ui-tab); letter-spacing: 1px; } #viewVad .st-foot { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--ui-white); border-top: 1px solid var(--bx-stroke); } #viewVad .st-foot .msg { margin-right: auto; color: var(--tx-dark); font-size: 11px; } #viewVad .st-foot .msg::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #3ab36b; margin-right: 8px; vertical-align: 1px; } #viewVad { --ui-tab: 600 12px/12px 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; } #viewVad .st { font-size: 14px; } #viewVad .st-find, #viewVad .st-body input[type=text], #viewVad .st-body input[type=number], #viewVad .st-body select { font-size: 14px; } #viewVad .st-title { font-size: 18px; } #viewVad .cap, #viewVad .unit, #viewVad .help, #viewVad .st-foot .msg { font-size: 13px; } #viewVad .st-body button { font-size: 12px; } #viewVad .i { font-size: 11px; } #viewVad .st-sec.wide { max-width: 1180px; } #viewVad .st-head .us-sum { color: var(--tx-dark); font-size: 13px; display: flex; gap: 14px; } #viewVad .st-head .us-sum b { font: 600 13px 'Chakra Petch', sans-serif; letter-spacing: 0; color: var(--tx-black); } #viewVad .st-item .n.warn { color: var(--ui-white); background: #e8a33d; padding: 0 6px; height: 16px; display: grid; place-items: center; } #viewVad .row.full .ctl { width: 100%; } #viewVad .us-seg { display: inline-flex; border: 1px solid var(--bx-stroke-dark); background: var(--ui-white); } #viewVad .us-seg span { height: 24px; padding: 0 12px; display: grid; place-items: center; cursor: pointer; color: var(--tx-dark); font: 600 12px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; user-select: none; } #viewVad .us-seg span + span { border-left: 1px solid var(--bx-stroke-dark); } #viewVad .us-seg span:hover { color: var(--blue); } #viewVad .us-seg span.on { background: var(--blue); color: var(--ui-white); } #viewVad .us-ppl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; } #viewVad .us-ppl.open { grid-template-columns: minmax(0, 1fr) 340px; } #viewVad .us-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--bx-stroke-light); } #viewVad .us-bar select { min-width: 170px; } #viewVad .us-bar .unit { margin-left: auto; } #viewVad .us-pr { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px 96px 110px; gap: 12px; align-items: center; height: 46px; padding: 0 12px; border-top: 1px solid var(--bx-stroke-light); cursor: pointer; } #viewVad .us-bar + .us-pr, #viewVad .card > .us-pr:first-child { border-top: 0; } #viewVad .us-ppl.open .us-pr { grid-template-columns: 28px minmax(0, 1fr) 96px 90px; } #viewVad .us-ppl.open .us-pr .us-org { display: none; } #viewVad .us-pr:hover { background: var(--ui-main-light); } #viewVad .us-pr.on { background: var(--blue-super); box-shadow: inset 2px 0 var(--blue); } #viewVad .us-pr.blocked { opacity: .55; } #viewVad .us-pr.wait { grid-template-columns: 28px minmax(0, 1fr) auto; cursor: default; height: 52px; } #viewVad .us-pr.wait .ctl { justify-content: flex-end; flex-wrap: nowrap; } #viewVad .us-av { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; font: 600 12px/1 'Chakra Petch', sans-serif; letter-spacing: .5px; flex: none; object-fit: cover; } #viewVad .us-av.big { width: 40px; height: 40px; font-size: 15px; } #viewVad .us-who { min-width: 0; } #viewVad .us-who b, #viewVad .us-who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #viewVad .us-who b { font-weight: 600; color: var(--tx-black); } #viewVad .us-who span { color: var(--tx-dark); font-size: 13px; } #viewVad .us-org { color: var(--tx-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #viewVad .us-org i { font-style: normal; color: var(--tx-standard); } #viewVad .us-rk { justify-self: start; height: 20px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--bx-stroke); background: var(--ui-main); color: var(--tx-dark); font: 600 11px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; } #viewVad .us-rk.owner { border-color: var(--blue-medium); color: var(--blue); } #viewVad .us-rk.admin { background: var(--blue); border-color: var(--blue-dark); color: var(--ui-white); } #viewVad .us-rk.blocked { border-color: #d9534f; color: #d9534f; background: transparent; } #viewVad .us-rk.free { border-color: #3ab36b; color: #2e8f55; background: transparent; } #viewVad .lbl .us-rk { display: inline-grid; height: 18px; margin-left: 8px; padding: 0 6px; font-size: 10px; vertical-align: 1px; } #viewVad .us-allow-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } #viewVad .us-allow-ctl .us-tks { flex-wrap: nowrap; } #viewVad .us-allow-ctl .us-tk { height: 24px; padding: 0 8px; font-size: 11px; } #viewVad .us-seen { color: var(--tx-dark); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #viewVad .us-seen::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--bx-stroke-dark); vertical-align: 1px; } #viewVad .us-seen.on { color: var(--tx-black); } #viewVad .us-seen.on::before { background: #3ab36b; } #viewVad .us-pd { position: sticky; top: 0; background: var(--ui-white); border: 1px solid var(--bx-stroke); } #viewVad .us-pd-h { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--bx-stroke-light); } #viewVad .us-pd-h .us-who { flex: 1; } #viewVad .st-body .us-pd-h .x { width: 26px; height: 26px; padding: 0; font: 400 16px/1 'Chakra Petch', sans-serif; letter-spacing: 0; } #viewVad .us-pd-tabs { display: flex; border-bottom: 1px solid var(--bx-stroke); background: var(--ui-main-light); } #viewVad .us-pd-tabs span { flex: 1; height: 30px; display: grid; place-items: center; cursor: pointer; color: var(--tx-dark); font: var(--ui-tab); letter-spacing: 1px; border-bottom: 2px solid transparent; user-select: none; } #viewVad .us-pd-tabs span:hover { color: var(--tx-black); } #viewVad .us-pd-tabs span.on { color: var(--tx-black); border-bottom-color: var(--blue); background: var(--ui-white); } #viewVad .us-pd .row { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; } #viewVad .us-pd .row:first-child { border-top: 0; } #viewVad .us-pd select { min-width: 0; width: 100%; } #viewVad .us-pd .us-seg span { padding: 0 8px; } #viewVad .us-note { padding: 10px 12px; color: var(--tx-dark); font-size: 13px; background: var(--ui-main); border-bottom: 1px solid var(--bx-stroke-light); } #viewVad .us-prof { display: flex; flex-direction: column; gap: 6px; width: 100%; } #viewVad .us-prof .prof-tabs { display: flex; flex-wrap: wrap; gap: 4px 10px; } #viewVad .us-prof .prof-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; } #viewVad .us-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bx-stroke-light); } #viewVad .us-kpi div { background: var(--ui-white); padding: 10px 12px; } #viewVad .us-kpi b { display: block; font: 600 16px/1.25 'Chakra Petch', sans-serif; color: var(--tx-black); } #viewVad .us-kpi span { color: var(--tx-dark); font-size: 13px; } #viewVad .us-gr { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 4px 2px 10px; border-top: 1px solid var(--bx-stroke-light); } #viewVad .us-gr:first-child { border-top: 0; } #viewVad .us-gr span { flex: 1; } #viewVad .us-gr i { font-style: normal; color: var(--tx-dark); font-size: 13px; } #viewVad .st-body .us-gr button { height: 22px; } #viewVad .us-gr-add { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--bx-stroke-light); background: var(--ui-main-light); } #viewVad .us-gr-add select, #viewVad .us-gr-add input { width: 100%; min-width: 0; } #viewVad .us-gr-add button { justify-self: end; } #viewVad .us-tks, #viewVad .utab-list { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; } #viewVad .us-tk, #viewVad .utab-list label.utab { height: 26px; padding: 0 10px; display: inline-grid; place-items: center; cursor: pointer; border: 1px solid var(--bx-stroke-dark); background: var(--ui-white); color: var(--tx-dark); font: 600 12px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; text-transform: uppercase; user-select: none; position: relative; } #viewVad .us-tk:hover, #viewVad .utab-list label.utab:hover { border-color: var(--blue); color: var(--blue); } #viewVad .us-tk.on, #viewVad .utab-list label.utab:has(input:checked) { background: var(--blue); border-color: var(--blue-dark); color: var(--ui-white); } #viewVad .utab-list label.utab.utab-off { opacity: .4; cursor: default; } #viewVad .st-body .utab-list label.utab input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } #viewVad .us-tbl { width: 100%; border-collapse: collapse; } #viewVad .us-tbl th { text-align: left; height: 28px; padding: 0 12px; color: var(--tx-standard); font: var(--ui-tab); letter-spacing: 1px; border-bottom: 1px solid var(--bx-stroke-light); } #viewVad .us-tbl td { height: 34px; padding: 0 12px; border-top: 1px solid var(--bx-stroke-light); color: var(--tx-black); } #viewVad .us-tbl .r { text-align: right; } #viewVad .us-tbl tr.sum td { background: var(--ui-main-light); font-weight: 600; } #viewVad .ustat-table.us-wide { padding: 0; overflow-x: auto; } #viewVad .us-prices { width: 100%; }