/* 40 Oct build: the Timeline Story list (Sam 1 Nov 09:07-09:11; anagha-design/samples-01nov timeline-story-list.html and
   timeline-screen-story-list.html). Used by the Timeline screen, every Timeline pop-up (tlov22.sl40p, 90% high and 70% wide) and the Live
   pop-up's Timeline tab (Q968, .sl40t). White, as every screen. Only open Critical alerts (.flk40) and the boiler-on strip flicker (Q963). */
html body .sl40m,html body .sl40t{--sl-fg:#1b242d;--sl-mut:#65707a;--sl-line:#dde3ec;--sl-line2:#eef1f6;--sl-blue:#1E40AF;--sl-fire:#ff1f1f;--sl-off:#dfe3e8;--sl-crbg:#fdd9d5;
  --sl-crit:#d92d20;--sl-byp:#9a7d0a;--sl-call:#f0894a;--sl-aq:#4a90e2;--sl-ins:#52b86e;--sl-sum:#e2c044;--sl-offc:#9aa3ad;--sl-al:#c0392b;--sl-warn:#c47f17;--sl-info:#6b7280}
.sl40-crit{background:var(--sl-crit)}.sl40-byp{background:var(--sl-byp)}.sl40-call{background:var(--sl-call)}.sl40-aq{background:var(--sl-aq)}
.sl40-ins,.sl40-out{background:var(--sl-ins)}.sl40-sum{background:var(--sl-sum)}.sl40-off{background:var(--sl-offc)}
/* the header row: the screen keeps its full-screen frame, the header is white like the sample */
html body main.page.sl40m.sl40ov > .dyh97.sl40h:not(#z956a):not(#z956b):not(#z40){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:#fff!important;color:var(--sl-fg)!important;border-bottom:1px solid var(--sl-line);padding:10px 16px!important}
html body .sl40ov .sl40h h2:not(#z40){display:block!important;margin:0;font-size:18px;color:var(--sl-fg)!important;max-width:min(560px,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body :is(.sl40ov,.sl40t) .sl40h .sl40w:not(#z40),html body :is(.sl40ov,.sl40t) .sl40h .sub:not(#z40){color:var(--sl-mut)!important}
html body .sl40h select.sl40s:not(#z40){font-weight:600;max-width:100%;min-width:220px;border:1.5px solid var(--sl-line);border-radius:8px;padding:6px 10px;background:#fff;color:var(--sl-fg)}
html body .sl40t .sl40h:not(#z40){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 0 10px;border-bottom:1px solid var(--sl-line)}
html body :is(.sl40ov,.sl40t) .sl40h .btn:not(#z956a):not(#z956b):not(#z40){background:#fff!important;color:var(--sl-blue)!important;border:1.5px solid var(--sl-blue)!important;border-radius:999px;font-weight:700}
html body :is(.sl40ov,.sl40t) .sl40h .btn[aria-pressed="true"]:not(#z956a):not(#z956b):not(#z40){background:var(--sl-blue)!important;color:#fff!important}
.sl40lg{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 16px;border-bottom:1px solid var(--sl-line2);font-weight:600;font-size:13px;color:var(--sl-fg);background:#fff}
.sl40t .sl40lg{padding:10px 0}
.sl40lg span{display:inline-flex;align-items:center;gap:6px}
.sl40dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.sl40dia{width:9px;height:9px;transform:rotate(45deg);display:inline-block;background:var(--sl-al)}
.sl40bar{width:6px;height:16px;border-radius:3px;display:inline-block;background:var(--sl-off)}.sl40bar.on{background:var(--sl-fire)}
/* the list */
html body .sl40sc:not(#z40){overflow-y:auto;background:#fff}
html body main.page.sl40m:not(#z40){display:flex;flex-direction:column;height:100%;padding:0}
html body main.page.sl40m > .sl40sc:not(#z886a):not(#z886b):not(#z886c):not(#z886d):not(#z40){flex:1 1 auto;min-height:0;max-height:none!important;padding:16px 18px 8px}
html body .sl40m:not(.sl40ov) .sl40{max-width:1100px}
.sl40t .sl40sc{max-height:calc(100dvh / var(--z886,1) - 230px);padding:14px 2px 6px}
.sl40{color:var(--sl-fg);font-size:14px;line-height:1.45}
.sl40b{display:grid;grid-template-columns:84px 14px 10px minmax(0,1fr);gap:0 6px}
.sl40tm{font-weight:700;text-align:right;padding-top:2px;font-variant-numeric:tabular-nums}
.sl40tm .d{color:var(--sl-mut);font-weight:400;font-size:12px}
.sl40sp{border-radius:7px;margin-block:2px}
.sl40fs{position:relative;margin-block:2px;background:var(--sl-off);border-radius:4px}
.sl40fs i{position:absolute;left:0;right:0;background:var(--sl-fire);border-radius:3px;min-height:4px;animation:sl40fl 2.5s ease-in-out infinite}
.sl40ct{margin-left:6px;padding-block:0 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.sl40st{font-weight:700;font-size:15px}
.sl40mt{color:var(--sl-mut);font-size:13px;font-weight:400}
/* Q981 (42 Oct): "No change in the last 24 hours." under a lone stretch; the list ends with the start of the 24 hours */
/* Q984 (43 Oct): a Not connecting stretch is only its grey segment */
.sl40b.sl40b0 .sl40ct{min-height:26px;padding-bottom:8px}
.sl40nc{margin-top:6px;color:var(--sl-mut);font-size:14px;font-style:italic}
.sl40end{display:grid;grid-template-columns:84px 30px minmax(0,1fr);gap:0 6px;align-items:center;margin-top:2px;padding-bottom:12px}
.sl40end .sl40tm{color:var(--sl-mut);padding-top:0}
.sl40cap{height:0;border-top:3px solid var(--sl-mut);border-radius:2px}
.sl40lb{font-weight:700;color:#3b4658;font-size:14px}
.sl40e{border:1px solid var(--sl-line);border-left:4px solid var(--sl-al);border-radius:6px;padding:7px 10px;background:#fff}
.sl40e.warn{border-left-color:var(--sl-warn)}.sl40e.info{border-left-color:var(--sl-info)}
.sl40e .t{font-weight:700}.sl40e .s{color:var(--sl-mut);font-size:13px}
.sl40e.at40{outline:2px solid var(--sl-blue);outline-offset:1px}
.sl40e.flk40{animation:sl40cr 2.5s ease-in-out infinite}
.sl40c{display:inline-block;color:#fff;border-radius:5px;padding:1px 8px;font-weight:600;font-size:12px;background:#2563eb}
.sl40c.r{background:#d92d20}.sl40c.a{background:#f5a524;color:#1d2433}
/* Q978 (41 Oct): Low is light blue, as the Buildings and Real-Time blue (.v966.c-b) */
.sl40c.b{background:#e3f0fd;color:#1565c0}
.sl40o{display:inline-block;border:1px solid var(--sl-line);border-radius:5px;padding:1px 8px;font-size:12px;font-weight:600;color:var(--sl-mut)}
.sl40no{padding:16px 0}
@keyframes sl40cr{0%,100%{background:#fff}50%{background:var(--sl-crbg)}}
@keyframes sl40fl{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sl40fs i,.sl40e.flk40{animation:none}}
.hide40a .sl40-al{display:none}.hide40v .sl40-vl{display:none}.hide40b .sl40fs{visibility:hidden}
@media (max-width:520px){.sl40b{grid-template-columns:64px 10px 7px minmax(0,1fr);gap:0 5px}.sl40end{grid-template-columns:64px 27px minmax(0,1fr);gap:0 5px}}
/* the pop-up: 95% of the window high (Q975, 41 Oct; was 90%), 70% wide, centred on a dimmed screen (the page zoom of app.css Q31 is taken back out) */
html body .tlov22.sl40p:not(#z40){background:rgba(20,30,50,.45);justify-content:center;align-items:center}
html body .tlov22.sl40p .tlb22:not(#z939a):not(#z939b):not(#z939c):not(#z939d):not(#z40){flex:none;width:calc(70vw / var(--z886,1));height:calc(95dvh / var(--z886,1));max-height:none;border-radius:12px;box-shadow:0 18px 60px rgba(10,20,50,.35);overflow:hidden;background:#fff;display:flex;flex-direction:column}
html body .tlov22.sl40p .tlb22 > #app:not(#z939a):not(#z939b):not(#z939c):not(#z939d):not(#z40){height:100%;flex:1 1 auto;min-height:0}
html body .tlov22.sl40p main.page.dy97:not(#z939a):not(#z939b):not(#z939c):not(#z939d):not(#z40){height:100%}
@media (max-width:760px){html body .tlov22.sl40p .tlb22:not(#z939a):not(#z939b):not(#z939c):not(#z939d):not(#z40){width:100%}}
.sl40tt{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Q982 (Sam 1 Nov 12:48-12:50, 43 Oct; sample "Timeline pop-up with building Select", checked 1920 / 1600 / 1366): every Timeline pop-up's
   header is ONE row that never wraps: Timeline, Last 24 hours, the building Select, Show and its 3 buttons, CLOSE. Gaps, type and buttons
   shrink with the width; the Select shrinks with an ellipsis. */
html body main.page.sl40m.sl40ov > .dyh97.sl40h:not(#z956a):not(#z956b):not(#z40):not(#z982){flex-wrap:nowrap;white-space:nowrap;gap:clamp(5px,.6vw,10px);padding:10px clamp(10px,1.1vw,18px)!important;min-width:0}
html body .sl40ov .sl40h h2:not(#z40):not(#z982){flex:none;font-size:clamp(15px,1.2vw,20px)}
html body .sl40ov .sl40h > .sl40w:not(#z40):not(#z982){flex:none;font-size:clamp(12px,.9vw,15px)}
html body .sl40ov .sl40h select.sl40ps:not(#z40):not(#z982){flex:0 1 auto;width:clamp(150px,14vw,260px);min-width:110px;text-overflow:ellipsis;border-color:var(--sl-blue);padding:6px 10px}
html body .sl40ov .sl40h .sp:not(#z982){flex:1 1 0;min-width:0}
html body .sl40ov .sl40h .shw97:not(#z982){flex:none;display:inline-flex;align-items:center;gap:clamp(3px,.35vw,6px);flex-wrap:nowrap}
html body :is(.sl40ov) .sl40h .btn:not(#z956a):not(#z956b):not(#z40):not(#z982){flex:none;font-size:clamp(10px,.72vw,12px);padding:6px clamp(7px,.65vw,13px);white-space:nowrap}
/* the screen: the list scrolls inside the window (the header stays); room on the right for the full-screen ? and Close × */
html body main.page.sl40m:not(.sl40ov):not(#z40){height:calc(100dvh / var(--z886,1));overflow:hidden}
/* the screen keeps its blue bar (Q956): Timeline, Building, the range, Show; room on the right for the full-screen ? and Close × */
html body main.page.sl40m:not(.sl40ov) > .dyh97.sl40h:not(#z44):not(#z48):not(#z40){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:6px 172px 6px 16px!important;margin-top:0!important;min-height:46px;box-sizing:border-box}
/* Q973 (41 Oct): one row inside the blue bar at 1920, with the full-screen ? and Close (fixed, 8 px from the top, about 30 px high) on the
   same line: no pull-up margin of the older full-screen header, a 46 px bar with everything centred, the Show buttons kept left of the ? */
html body main.page.sl40m:not(.sl40ov) .sl40h :is(select,.btn):not(#z40){margin-block:0}
html body main.page.sl40m:not(.sl40ov) .sl40h :is(h2,.sl40w,.sub,label):not(#z40){display:block;margin:0;color:#fff!important}
html body main.page.sl40m:not(.sl40ov) .sl40h h2:not(#z40){font-size:18px}

/* Q966 (Sam 1 Nov 08:30, web and desktop): Buildings values in the Real-Time colours (n29weba.css .v812) and the Real-Time flicker
   (Q810 option B, 2.5 s); the CFH pill as the Real-Time Rows pill (Q837 modeOf colours), Critical flickers. nofl966 = the person's
   Real-Time flicker is off. */
.bl-t .v966{display:inline-block;padding:1px 6px;border-radius:5px;font-weight:700}
.bl-t .v966.c-r{background:#fdecec;color:var(--crit)}
.bl-t .v966.c-a{background:#fff4e0;color:var(--warn)}
.bl-t .v966.c-b{background:#e3f0fd;color:#1565c0}
html[data-mode="dark"] .bl-t .v966{background:transparent}
html body table.bl-t td .rt-pill.cf966:not(#z966){display:inline-block;min-width:0;padding:2px 8px;border-radius:999px;font:700 12px/1.3 var(--sans);letter-spacing:.01em;text-transform:none;white-space:nowrap}
html body table.bl-t .v966:not(#z966),html body table.bl-t .rt-pill.cf966.crit:not(#z966){animation:flick802 2.5s step-end infinite}
html body table.bl-t.nofl966 :is(.v966,.rt-pill.cf966):not(#z966){animation:none}
@media (prefers-reduced-motion:reduce){html body table.bl-t :is(.v966,.rt-pill.cf966):not(#z966){animation:none}}

/* Q967 (Sam 1 Nov 08:38, web and desktop): "Find a building", the count, Select all and the action buttons on one top row; only on a
   window too narrow for them all do the buttons go on to a second line. */
html body main .bl-top:not(#z967){flex-wrap:wrap;gap:8px 10px}
html body main .bl-top #bl19s:not(#z967){flex:0 1 180px;min-width:130px}
html body main .bl-top #cf:not(#z967){flex:0 1 auto;max-width:200px}
html body main .bl-top .bt19-bar.bt48:not(#z967){flex:1 1 0;min-width:min(100%,640px);flex-wrap:wrap;justify-content:flex-end;gap:5px}
html body main .bl-top .bt19-all:not(#z967){max-width:170px;font-size:12.5px;line-height:1.2;gap:6px;margin-right:4px}
html body main .bl-top .bt19-bar .ac33:not(#z967){padding:4px 8px;white-space:nowrap}
html body main .bl-top #bt19n:not(#z967){white-space:nowrap}

/* Q962 (Sam 31 Oct): the one Predictions pop-up, Observations under the Predictions */
.swal2-popup.pd42p h3.ob962{margin:22px 0 8px;padding-top:14px;border-top:1px solid var(--line,#dde3ec);font-size:16px;text-align:left}

/* Q970 (Sam 1 Nov): the Connectivity button (in the old Observations place and colour) with the not-connected icon, and its pop-up */
html body .btn.ab22.cn970.cn970:not(#z22):not(#z23){background:#14532d!important;border-color:#14532d!important;color:#fff!important;display:inline-flex;align-items:center;gap:6px}
html body .btn.ab22.cn970.cn970:not(#z22):not(#z23):hover{background:#166534!important}
html body .btn.ab22.cn970 svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.swal2-popup.cn970p #cn970{text-align:left}
.swal2-popup.cn970p h3.h970{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:16px}
.swal2-popup.cn970p h3.h970:first-of-type{margin-top:6px}
.tw970{overflow-x:auto;border:1px solid var(--line,#dde3ec);border-radius:8px}
table.t970{width:100%;border-collapse:collapse;font-size:13.5px}
table.t970 th{text-align:left;white-space:nowrap;padding:8px 10px;background:#f7f9fc;color:var(--muted,#65707a);font-weight:600;border-bottom:1px solid var(--line,#dde3ec)}
table.t970 td{padding:7px 10px;border-bottom:1px solid var(--line2,#eef1f6);vertical-align:top}
table.t970 tr:last-child td{border-bottom:0}
table.t970 :is(th,td).n{text-align:right;font-variant-numeric:tabular-nums}
table.t970 td.nw970{white-space:nowrap;font-variant-numeric:tabular-nums}
table.t970 td.lg970{color:var(--crit,#c62828);font-weight:700}
.ch970{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.pl970{display:inline-block;border-radius:999px;padding:2px 9px;font:700 12px/1.4 var(--sans,system-ui);white-space:nowrap}
.ch970 .pl970{padding:4px 11px}
.pl970.nc{background:#fdecea;color:#d92d20} .pl970.po{background:#fff4e0;color:#b26a00} .pl970.go,.pl970.pf{background:#e7f6ec;color:#1f8a4c} .pl970.nw{background:#eef1f4;color:#6b7480}
html[data-mode="dark"] table.t970 th{background:transparent}

/* Q983 (Sam 1 Nov 12:56, 43 Oct; sample "Predictions by building"): the Predictions pop-up. The title row holds Predictions, the building
   Select and Search building (one row); both sections grouped by building; rows coloured by how they show (Critical / Warning / Info). */
.swal2-popup.pd42p .swal2-title.pf983t:not(#z983){display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;padding-right:56px}
.swal2-popup.pd42p .pf983t .pf983s,.swal2-popup.pd42p .pf983t .pf983q{border:1.5px solid #1E40AF;border-radius:8px;padding:6px 10px;font-size:14px;font-weight:600;color:#1b242d;background:#fff;min-width:0}
.swal2-popup.pd42p .pf983t .pf983s{width:clamp(150px,15vw,250px);text-overflow:ellipsis}
.swal2-popup.pd42p .pf983t .pf983q{width:clamp(140px,14vw,240px);font-weight:400}
.swal2-popup.pd42p h3.ob962.pf983h{margin-top:0;padding-top:0;border-top:0}
.bg983{border:1px solid #dde3ec;border-radius:10px;margin:0 0 12px;overflow:hidden;text-align:left}
.bh983{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#f6f8fb;border-bottom:1px solid #dde3ec}
.bh983 b{font-size:15px}
.bh983 .lv983{margin-left:auto}
.sv983{display:inline-block;padding:1px 8px;border-radius:5px;font-size:12px;font-weight:800}
.sv983.CRITICAL{background:#c62828;color:#fff}.sv983.WARNING{background:#f5a623;color:#3a2600}.sv983.INFO{background:#e8f0fe;color:#1d4ed8}
.it983{padding:8px 14px;border-left:5px solid #1d4ed8;border-bottom:1px solid #dde3ec;background:#fff}
.it983:last-child{border-bottom:0}
.it983.CRITICAL{border-left-color:#c62828;background:#fdecea}
.it983.WARNING{border-left-color:#e6a100;background:#fff4e0}
.it983 .t{font-weight:700}
.it983 .d{color:#5d6778;font-size:14px}
.it983 .pill{margin-right:6px}
.it983 .k22{margin-right:6px}
@media (max-width:760px){.swal2-popup.pd42p .swal2-title.pf983t:not(#z983){flex-wrap:wrap}}
/* Q985 (43 Oct): Buildings column headers sort on a click; the sorted one has a small arrow */
html body .bl-t thead th.sh985{cursor:pointer;user-select:none}
html body .bl-t thead th.sh985:hover{text-decoration:underline}
html body .bl-t thead th .ar985{font-size:.8em}
/* Q983: the building heading's Live button shows in this pop-up (Q297 / Q309 hide Live on alert rows in pop-ups, not here) */
html body .swal2-popup a.btn.lv983[href^="#b-"][href$="-live"]:not(#z43):not(#z983){display:inline-flex!important;align-items:center}
/* Q988 (Sam 1 Nov 14:30, 44 Oct): the Live pop-up's Timeline tab has one scroll bar, the list's. The pop-up does not scroll on this tab: under
   its header the tab fills the rest of the height (a column), the Show / legend rows keep their size and the list takes what is left. */
html body .lvp:has(> #lvpb[data-ptab="timeline"]):not(#z988){display:flex;flex-direction:column;overflow:hidden}
html body .lvp:has(> #lvpb[data-ptab="timeline"]) > .lvp-h:not(#z988){flex:none}
html body #lvpb[data-ptab="timeline"]:not(#z988){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html body #lvpb[data-ptab="timeline"] > main.page:not(#z988){flex:1 1 auto;min-height:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:12px}
html body #lvpb[data-ptab="timeline"] > main.page > :is(.sl40h,.sl40lg):not(#z988){flex:none}
html body #lvpb[data-ptab="timeline"] .sl40t .sl40sc:not(#z988){flex:1 1 auto;min-height:0;max-height:none}
/* Q1002 (Sam 2 Nov): the Connectivity pop-up only as wide as its widest table (was ad50 min(1480px,92vw)) */
html body .swal2-popup.swp.ad50.cn970p:not(#z47):not(#z48):not(#z692):not(#z1002){width:fit-content!important;min-width:min(640px,96vw);max-width:92vw!important}
/* Q1003 (Sam 2 Nov, sample 6): Predictions / Connectivity / Timeline as one white button group; Building wall button light blue */
html body .bt22.nav46:not(#z46){display:inline-flex;gap:0;border:1px solid #CBD5E1;border-radius:8px;overflow:hidden;background:#fff}
html body .bt22.nav46 .btn.ab22:not(#z22):not(#z23):not(#z46):not(#z1003){background:#fff!important;border:0!important;border-right:1px solid #CBD5E1!important;border-radius:0!important;box-shadow:none!important;font-weight:600}
html body .bt22.nav46 .btn.ab22:last-child:not(#z22):not(#z23):not(#z46):not(#z1003){border-right:0!important}
html body .bt22.nav46 .btn.ab22:hover:not(#z22):not(#z23):not(#z46):not(#z1003){background:#F3F6FA!important}
html body .bt22.nav46 .btn.ab22.pd22.pd22:not(#z22):not(#z23):not(#z46):not(#z1003){color:#d22a3b!important}
html body .bt22.nav46 .btn.ab22.cn970:not(#z22):not(#z23):not(#z46):not(#z1003),html body .bt22.nav46 .btn.ab22.cn970 *:not(#z1003){color:#17803f!important;stroke:currentColor}
html body .bt22.nav46 .btn.ab22.tl22:not(#z22):not(#z23):not(#z46):not(#z1003){color:#111827!important}
html body .q98t button.wb46:not(#z46):not(#z1003){background:#dcebfb!important;color:#111827!important;border-color:#7FA2CF!important}
html body .q98t button.wb46.on:not(#z46):not(#z1003){background:#b9d4f5!important}
/* Q1006 (Sam 2 Nov 11:17): the 24px navy details button after an alert's state; here (not in al46.js) so it shows before al46.js loads */
html body button.op46:not(#z46):not(#z1006){width:24px;height:24px;min-width:0;min-height:0;border-radius:50%;border:1.5px solid #1E40AF;background:#fff;color:#1E40AF;display:inline-grid;place-items:center;padding:0;margin:0 0 0 4px;cursor:pointer;vertical-align:middle;box-shadow:none}
html body button.op46:not(#z46):not(#z1006) svg{width:13px;height:13px;fill:none;stroke:currentColor}
html body button.op46:hover:not(#z46):not(#z1006),html body .at21-r.sel46 button.op46:not(#z46):not(#z1006){background:#1E40AF;color:#fff}

/* Q1017 (1 Nov): Building wall in the Alerts navigation group, light blue with black text */
html body .bt22.nav46 .btn.ab22.wb46:not(#z22):not(#z23):not(#z46):not(#z1003):not(#z1017){background:#dcebfb!important;color:#111827!important}
html body .bt22.nav46 .btn.ab22.wb46.on:not(#z22):not(#z23):not(#z46):not(#z1003):not(#z1017){background:#b9d4f5!important}
/* Q1011 (Sam OK 2 Nov 13:04): Predictions pop-up 900 px */
html body .swal2-popup.swp.ad50.pd42p:not(#z47):not(#z48):not(#z692):not(#z1011){width:min(900px,96vw)!important}
/* Q1018 (Sam 2 Nov 12:19-12:21, 1 Nov): no grey shadow on the Buildings table card, the Real-time cards and the Real-time rows; white stays */
html body .card.la-wrap:not(#z1018),html body .card.la19:not(#z1018),html body .rt-tile:not(.jump812):not(#z1018),html body #rw812 .card:not(#z1018),html body #rw812 .rw812:not(.jump):not(#z1018),html body .rw812:not(.jump):not(#z1018){box-shadow:none!important}
/* Q1022 (Sam FINAL 2 Nov 13:03, 1 Nov): Buildings action buttons strong and bold, one size: 12.5 px, weight 800, darker text, 2 px full-colour border */
html body .bt19-bar .ac33:not(#z42):not(#z967):not(#z1022),html body .acb27 .ac33:not(#z42):not(#z1022){font-size:12.5px!important;font-weight:800!important;letter-spacing:.04em;background:color-mix(in srgb,var(--ac) 12%,#fff)!important;color:color-mix(in srgb,var(--ac) 70%,#000)!important;border:2px solid var(--ac)!important;box-shadow:none!important}
/* Dark mode fix (Sam 2 Nov 16:43, 1 Nov build): the small round Details button beside the tag was white in dark mode */
html[data-theme="dark"] body button.op46:not(#z46):not(#z1006){background:var(--surface);border-color:var(--info);color:var(--info)}
html[data-theme="dark"] body button.op46:hover:not(#z46):not(#z1006),html[data-theme="dark"] body .at21-r.sel46 button.op46:not(#z46):not(#z1006){background:var(--info);color:var(--surface)}
/* Sam 2 Nov 16:56 (next build): the panel button left of Live; filled while its alert's panel is open */
html body .at21-r.sel46 .at21-acts .btn.op46b:not(#z860a):not(#z860b){background:#1E40AF;color:#fff;border-color:#1E40AF}
html[data-theme="dark"] body .at21-r.sel46 .at21-acts .btn.op46b:not(#z860a):not(#z860b){background:var(--info);color:var(--surface);border-color:var(--info)}

/* Q1055 (Sam 3 Nov 07:54-08:01 UTC, FINAL, web + desktop): Buildings action buttons = one joined group like the Alerts navigation (nav46):
   white, thin dividers, 8 px rounded outer border; each text keeps its current colour; font exactly as Predictions / Connectivity
   (weba22.css ab22): 12.5 px, weight 700, letter-spacing .04em, line-height 1.3, no capitals, padding 6px 11px. Overrides Q1022. */
html body .bt19-bar .grp1055:not(#z1055){display:inline-flex;flex-wrap:wrap;border:1px solid #CBD5E1;border-radius:8px;overflow:hidden;background:#fff}
html body .bt19-bar .grp1055 .ac33:not(#z42):not(#z967):not(#z1022):not(#z1055){background:#fff!important;border:0!important;border-right:1px solid #CBD5E1!important;border-radius:0!important;box-shadow:none!important;font-family:var(--sans);font-size:12.5px!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1.3!important;text-transform:none!important;color:color-mix(in srgb,var(--ac) 70%,#000)!important;padding:6px 11px!important;margin:0!important;min-height:0!important;height:auto!important}
html body .bt19-bar .grp1055 .ac33:last-child:not(#z42):not(#z967):not(#z1022):not(#z1055){border-right:0!important}
html body .bt19-bar .grp1055 .ac33:hover:not(#z42):not(#z967):not(#z1022):not(#z1055){background:#F3F6FA!important}
/* Q1058 + Q1060 (Sam FINAL 3 Nov 09:03 UTC, web + desktop): on the Alerts dashboard (q98m: 24 hours / 3 days / 7 days / 15 days, All alerts /
   Open alerts) and on Metrics (main.mt: Temps, Metrics, Reports, Today / Last 24 hours / 7 days / 30 days, View Table / Graph) every group button is
   white when not selected and light blue #dcebfb when selected, black text #111827 in both (was navy + white text). Nothing else changes. */
html body main.q98m .seg button:not(#z42):not(#z1058),html body main.mt .seg button:not(#z42):not(#z1058){background:#fff!important;color:#111827!important;font-weight:600}
html body main.q98m .seg button:hover:not(#z42):not(#z1058),html body main.mt .seg button:hover:not(#z42):not(#z1058){background:#F3F6FA!important}
html body main.q98m .seg button.on:not(#z42):not(#z1058),html body main.q98m .seg > .on:not(#z42):not(#z1058),html body main.mt .seg button.on:not(#z42):not(#z1058),html body main.mt .seg > .on:not(#z42):not(#z1058){background:#dcebfb!important;color:#111827!important;font-weight:800}
/* Q1058: Building wall white when not selected, light blue #dcebfb when selected (was light blue always, #b9d4f5 selected); black text */
html body .bt22.nav46 .btn.ab22.wb46:not(#z22):not(#z23):not(#z46):not(#z1003):not(#z1017):not(#z1058),html body .q98t button.wb46:not(#z46):not(#z1003):not(#z1017):not(#z1058):not(#z1059):not(#z1060){background:#fff!important;color:#111827!important}
html body .bt22.nav46 .btn.ab22.wb46:hover:not(#z22):not(#z23):not(#z46):not(#z1003):not(#z1017):not(#z1058),html body .q98t button.wb46:hover:not(#z46):not(#z1003):not(#z1017):not(#z1058):not(#z1059):not(#z1060){background:#F3F6FA!important}
html body .bt22.nav46 .btn.ab22.wb46.on:not(#z22):not(#z23):not(#z46):not(#z1003):not(#z1017):not(#z1058),html body .q98t button.wb46.on:not(#z46):not(#z1003):not(#z1017):not(#z1058):not(#z1059):not(#z1060){background:#dcebfb!important;color:#111827!important}
/* Q1059 (Sam FINAL 3 Nov 09:03 UTC, web + desktop): Buildings table header light blue #dcebfb with black text (was navy + white) */
html body main table.t.bl-t thead th:not(#z517):not(#z518):not(#z1059){background:#dcebfb!important;color:#111827!important;border-color:#7FA2CF!important}
html body main table.t.bl-t thead th *:not(#z517):not(#z518):not(#z1059){color:#111827!important}
/* Q1062 (Sam FINAL 3 Nov 09:10 UTC, option C, web + desktop): row icons in their own colour with a light tint inside: Quick view blue, Live green,
   Timeline purple, Details orange (Alerts dashboard rows); Buildings rows have no Quick view: Live green, Timeline purple, Apts orange. Only colours. */
html body .at21 .at21-acts.ic860 .btn:not(#z42):not(#z860a):not(#z860b):not(#z1062),html body .bl-t .bl-act.ic861 .btn:not(#z42):not(#z876a):not(#z876b):not(#z1062){color:var(--c62,#1E40AF)!important;border:1.5px solid var(--c62,#1E40AF)!important;background:color-mix(in srgb,var(--c62,#1E40AF) 12%,#fff)!important}
html body .at21 .at21-acts.ic860 .btn:hover:not(#z42):not(#z860a):not(#z860b):not(#z1062),html body .bl-t .bl-act.ic861 .btn:hover:not(#z42):not(#z876a):not(#z876b):not(#z1062){background:color-mix(in srgb,var(--c62,#1E40AF) 22%,#fff)!important}
html body .at21 .at21-acts.ic860 .btn.op46b:not(#z1062){--c62:#1E40AF}
html body .at21 .at21-acts.ic860 a.btn:not(#z1062),html body .bl-t .bl-act.ic861 a.bl-live:not(#z1062){--c62:#17803f}
html body .at21 .at21-acts.ic860 .btn[data-tl939]:not(#z1062),html body .bl-t .bl-act.ic861 .btn[data-tl939]:not(#z1062){--c62:#7b4fd6}
html body .at21 .at21-acts.ic860 .btn[data-ep]:not(#z1062),html body .bl-t .bl-act.ic861 .btn[data-blapt]:not(#z1062){--c62:#c2410c}
/* the open row's Quick view (panel) button stays solid navy as today (Q1006) */
html body .at21-r.sel46 .at21-acts.ic860 .btn.op46b:not(#z42):not(#z860a):not(#z860b):not(#z1062):not(#z1063){background:#1E40AF!important;color:#fff!important;border-color:#1E40AF!important}
/* Q1063 (Sam 3 Nov 09:13 UTC, web + desktop): on Buildings the C column time (e.g. 2:44 AM) has no background; plain text, its colour kept */
html body table.t.bl-t td.bl-c .pill:not(#z42):not(#z1063){background:transparent!important;border-color:transparent!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
/* Q1041 (Sam 3 Nov 05:18-05:20 UTC): the Timeline's Show buttons (Alerts, Values out of limits, Boiler on / off), every place the Timeline opens:
   selected (all three by default) = light blue #dcebfb, black text; deselected = white, black text (no faded or struck-through text) */
html body .shw97 .btn.dyc97:not(#z97):not(#z1041){background:#dcebfb!important;color:#111827!important;border:1px solid #7FA2CF!important;opacity:1!important;text-decoration:none!important;font-weight:700}
html body .shw97 .btn.dyc97[aria-pressed="false"]:not(#z97):not(#z1041){background:#fff!important;font-weight:600}
/* Dark mode for the 3 Nov light-blue / white buttons and headers (Q1041, Q1058, Q1059, Q1060): theme colours, as the 2 Nov dark mode fix */
html[data-theme="dark"] body .shw97 .btn.dyc97:not(#z97):not(#z1041),html[data-theme="dark"] body main.q98m .seg button.on:not(#z42):not(#z1058),html[data-theme="dark"] body main.q98m .seg > .on:not(#z42):not(#z1058),html[data-theme="dark"] body main.mt .seg button.on:not(#z42):not(#z1058),html[data-theme="dark"] body main.mt .seg > .on:not(#z42):not(#z1058),html[data-theme="dark"] body .bt22.nav46 .btn.ab22.wb46.on:not(#z22):not(#z23):not(#z46):not(#z1003):not(#z1017):not(#z1058),html[data-theme="dark"] body main table.t.bl-t thead th:not(#z517):not(#z518):not(#z1059){background:var(--info-soft)!important;color:var(--fg)!important;border-color:var(--line)!important}
html[data-theme="dark"] body .shw97 .btn.dyc97[aria-pressed="false"]:not(#z97):not(#z1041),html[data-theme="dark"] body main.q98m .seg button:not(.on):not(#z42):not(#z1058),html[data-theme="dark"] body main.mt .seg button:not(.on):not(#z42):not(#z1058),html[data-theme="dark"] body .bt22.nav46 .btn.ab22.wb46:not(.on):not(#z22):not(#z23):not(#z46):not(#z1003):not(#z1017):not(#z1058){background:var(--surface)!important;color:var(--fg)!important}
html[data-theme="dark"] body main table.t.bl-t thead th *:not(#z517):not(#z518):not(#z1059){color:var(--fg)!important}

/* Q1064 (Sam 3 Nov 10:34-10:37 UTC, FINAL, web + desktop): building name under the Timeline legend, outside the scroll area, strong dark grey */
html body .sl40bn:not(#z1064){flex:none;padding:4px 16px 12px;font-size:19px;font-weight:800;color:#374151;letter-spacing:.01em;line-height:1.25;border-bottom:1px solid var(--sl-line2);background:#fff}
html body .sl40t .sl40bn:not(#z1064){padding:4px 0 10px}
html body .sl40lg:has(+ .sl40bn:not([hidden])):not(#z1064){border-bottom:0}
html[data-theme="dark"] body .sl40bn:not(#z1064){background:var(--surface);color:#d1d5db}

html body table.t.bl-t td.bl-c .pill:not(#z42):not(#z1063){background:transparent!important;border-color:transparent!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
/* Q1065 (Sam 3 Nov 11:08-11:11 UTC, web + desktop): Alerts row icons (Quick view, Live, Timeline, Details) with NO border line and 25% smaller
   (button 5px 12px / min 44px -> 4px 9px / min 33px; icon 18px -> 13.5px). Q1062 colours and light fill kept; Buildings icons unchanged. */
html body .at21 .at21-acts.ic860 .btn:not(#z42):not(#z860a):not(#z860b):not(#z1062):not(#z1065){border-color:transparent!important;padding:4px 9px!important;min-width:33px!important;min-height:0!important;height:auto!important}
html body .at21 .at21-acts.ic860 .btn svg:not(#z860a):not(#z1065){width:13.5px!important;height:13.5px!important}
html body .at21-r.sel46 .at21-acts.ic860 .btn.op46b:not(#z42):not(#z860a):not(#z860b):not(#z1062):not(#z1063):not(#z1065){border-color:#1E40AF!important}
/* Q1066 (4 Nov build): the back arrow before "Back" */
.bk66{flex:none;vertical-align:-2px;margin-right:5px}
#x42 .bk66{margin-right:0}

/* Q1067 Corrective actions (4 Nov): the bright gold star that flickers, the Taken / Not done box, the Details one-line header, the set-up page */
@keyframes ca67f{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.88)}}
.ca67{display:inline-block;color:#f5b301;font-size:1.05em;line-height:1;text-shadow:0 0 1px #b07d00;animation:ca67f 1.2s ease-in-out infinite;cursor:default}
.ca67i{animation:none}
@media (prefers-reduced-motion:reduce){.ca67{animation:none}}
.ca67s{color:#f5b301}
.ca67b{border:1px solid #f5b301;background:#fffbea;border-radius:10px;padding:8px 12px;margin:8px 0;font-size:13px}
.ca67b.nd67{border-color:#d97706;background:#fff}
.h67b{font-weight:700;margin-bottom:4px}
.nd67 .h67b,.nd67t{color:#b45309}
.r67{display:flex;gap:8px;line-height:1.5}.r67 span{color:#64748b;min-width:90px}.r67 b{font-weight:600}
h2.h67{font-size:16px;margin:0 0 4px;line-height:1.35;white-space:normal}
h2.h67 .bd46{font-weight:500;color:#475569}
.ca67by{font-size:12px;font-weight:600;color:#92400e;margin-left:6px}
.ca67t td,.ca67t th{vertical-align:top}
.ca67p .ca67g{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:14px;align-items:start}
.ca67b1{background:#fff;box-shadow:none}.ca67a1{background:#fff;box-shadow:none;min-width:0}
.ca67bh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.ca67b1 #ca67q{width:100%;margin-bottom:8px}
.ca67bs{max-height:calc(100vh - 300px);overflow:auto}
.ca67bl{display:flex;gap:8px;align-items:center;padding:5px 2px;border-bottom:1px solid #eef2f7;cursor:pointer}
.ca67bl span:nth-of-type(1){flex:1}
.ca67l{font-size:12.5px;color:#334155;margin-top:4px;line-height:1.5}.ca67l span{color:#64748b;font-weight:600}
.ca67w{background:#fffbea;border:1px solid #f5b301;border-radius:8px;padding:6px 10px}
.ca67at td{vertical-align:top}.ca67at td:first-child{width:28px}.ca67at td:last-child{width:84px}
@media (max-width:760px){.ca67p .ca67g{grid-template-columns:1fr}.ca67bs{max-height:260px}}
[data-theme="dark"] .ca67b,[data-theme="dark"] .ca67w{background:#2a2410}[data-theme="dark"] .ca67b.nd67,[data-theme="dark"] .ca67b1,[data-theme="dark"] .ca67a1{background:transparent}
[data-theme="dark"] .ca67l,[data-theme="dark"] h2.h67 .bd46{color:#cbd5e1}

/* Q1074 (Sam 3 Nov 17:09): Edit Box pop-up tidy, only as tall as its content */
html body .swal2-popup.fs50.h74:not(#z650):not(#z74){height:auto;max-height:94vh}
html body .swal2-popup.fs50.h74 #dlgB > .dl50:not(#z650):not(#z74){position:static}
.bx74 .h74{margin:0 0 10px;font-size:17px}
.bx74 .g74{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;align-items:end}
.bx74 .ck74{grid-column:span 2}
.bx74 .t74{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:6px}
.bx74 .tl74{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #e3e7f0}
@media (max-width:720px){.bx74 .g74{grid-template-columns:1fr 1fr}.bx74 .t74{grid-column:1/-1}}

/* Q1075 (Sam 3 Nov 17:11): Set DITs pop-up wider and taller; hour cells never wrap; fixed HOUR / CURR / NEW widths */
html body .swal2-popup.fs50.w75:not(#z650):not(#z75){width:min(1860px,97vw)!important;max-width:none!important;height:auto;max-height:94vh}
html body .swal2-popup.fs50.w75 #dlgB > .dl50:not(#z650):not(#z75){position:static}
.w75 .v32t th,.w75 .v32t td{white-space:nowrap}
.w75 .v32t th:nth-child(1),.w75 .v32t td:nth-child(1){width:64px}
.w75 .v32t th:nth-child(2),.w75 .v32t td:nth-child(2){width:48px}
.w75 .v32t th:nth-child(3),.w75 .v32t td:nth-child(3){width:70px}
.w75 .v32t td .in{width:62px;min-width:0}

/* Q1076 (Sam 3 Nov 17:23): Get apt. sensors table sorts on a header click; same font size as the other pop-up tables */
html body .swal2-popup table.ap19-t td:not(#z76){font-size:13px}
th.s76{cursor:pointer;user-select:none}
th.s76::after{content:" \2195";opacity:.45;font-size:.9em}
th.s76[data-s76="asc"]::after{content:" \25B2";opacity:1}
th.s76[data-s76="desc"]::after{content:" \25BC";opacity:1}

/* Q1082 (Sam 3 Nov 17:42): Export > Downloaded files: light blue title bar (Metrics look), 25 per page + Search in the title row with Refresh,
   Metrics datatable style, one sort arrow per column */
html body .exp-dl .ex48h:not(#z19):not(#z1082){background:#dcebfb;color:#111827;border:1px solid #7FA2CF;flex-wrap:wrap;gap:10px}
html body .exp-dl .ex48h h2:not(#z19):not(#z1082),html body .exp-dl .ex48h .ex48n:not(#z19):not(#z1082){color:#111827}
html body .exp-dl .ex48h .sub:not(#z19):not(#z1082){color:#374151}
.ex82c{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ex82c .dt-length,.ex82c .dt-search{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;color:#111827}
.ex82c .dt-search label{display:none}
.ex82c select,.ex82c input{border:1px solid #7FA2CF;border-radius:8px;padding:5px 8px;background:#fff;font-size:13px}
.ex82c .dt-search input{width:min(220px,50vw)}
html body table.dl48 thead th:not(#z517):not(#z518):not(#z1082){background:#dcebfb!important;color:#111827!important;border-color:#7FA2CF!important}
html body table.dl48 thead th:not(#z517):not(#z518):not(#z1082) *{color:#111827!important}
table.dl48 th.dt-orderable-asc.dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order:after{content:""}
table.dl48 th.dt-orderable-asc.dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order:before{top:3px}

/* Q1083 (Sam 3 Nov, web and desktop): the Timeline pop-up title bar is blue like the Live pop-up (replaces the Q956 white header):
   white title and text, outline buttons white, a ticked Show button white with blue text */
html body .tlov22 main.page.dy97 > .dyh97:not(#z956a):not(#z956b):not(#z1083){background:#1E40AF!important;color:#fff!important;border-bottom:0}
html body .tlov22 main.dy97 .dyh97 h2:not(#z956a):not(#z956b):not(#z1083){color:#fff!important}
html body .tlov22 main.dy97 .dyh97 :is(.sub, .shw97, .shw97 .small, .small, label):not(#z956a):not(#z956b):not(#z1083){color:#fff!important}
html body .tlov22 main.dy97 .dyh97 .btn:not(#z956a):not(#z956b):not(#z1083){background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.85)!important;font-weight:700}
html body .tlov22 main.dy97 .dyh97 .btn:is(.on,[aria-pressed="true"]):not(#z956a):not(#z956b):not(#z1083){background:#fff!important;color:#1E40AF!important;border-color:#fff!important}
html body .tlov22 main.dy97 .dyh97 .btn:hover:not(.on):not([aria-pressed="true"]):not(#z956a):not(#z956b):not(#z1083){background:rgba(255,255,255,.15)!important}

/* Q1085 (Sam 3 Nov 17:50, web and desktop): Watch > Live looks exactly like the Buildings > Live pop-up: the pop-up colours, its blue header
   with the building name and the read status, its table headers. Only Watch changes. */
html body .lvw85:not(#z1085){background:var(--bg);color:var(--fg)}
html body .lvw85 .lvh85:not(#z1085){position:static;z-index:auto}
html body .lvw85 table:not(#z1085){color:var(--fg)}
html body .lvw85 .ltabs:not(#z1085){position:static}
html body .lvw85 table thead th.nit:not(#z517):not(#z518):not(#z1085){background:#EEE8FD!important;color:#5B21B6!important}
html body .lvw85 table thead th.day:not(#z517):not(#z518):not(#z1085){background:#FDF0E1!important;color:#A2400B!important}
html body .lvw85 table thead th:not(#z517):not(#z518):not(#z1085){background:#fff!important;color:#1E40AF!important;font-weight:700;border-color:#c7d2fe!important}
html body .lvw85 table thead th:not(#z517):not(#z518):not(#z1085) *{color:#1E40AF!important}
html body .lvw85 table thead th.m-dl:not(#z517):not(#z518):not(#z1085){border-left:2px solid #1E40AF!important}
html body .lvw85 table thead th.nit:not(#z517):not(#z518):not(#z1085){background:#EEE8FD!important;color:#5B21B6!important}
html body .lvw85 table thead th.day:not(#z517):not(#z518):not(#z1085){background:#FDF0E1!important;color:#A2400B!important}
html[data-theme="dark"] body .lvw85 table thead th:not(#z517):not(#z518):not(#z1085){background:#131D31!important;color:#93b4ff!important;border-color:#2a3a5c!important}
html[data-theme="dark"] body .lvw85 table thead th:not(#z517):not(#z518):not(#z1085) *{color:#93b4ff!important}
html[data-theme="dark"] body .lvw85 table thead th.nit:not(#z517):not(#z518):not(#z1085){background:#2e2350!important;color:#c4b5fd!important}
html[data-theme="dark"] body .lvw85 table thead th.day:not(#z517):not(#z518):not(#z1085){background:#3a2a12!important;color:#fbbf77!important}
html body .lvw85 [data-alive]:not(#z1085){display:none!important}

/* Q1081 (Sam 3 Nov): Con Edison net metering: From grid / Sent back / Net in one cell; the Net metered label */
.ut-nm{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.ut-nm .small{font-size:11.5px;white-space:nowrap}
.badge.ut-nmb{background:#dcebfb;color:#1E40AF;border:1px solid #7FA2CF;font-size:11px;margin-left:6px}

/* ===================== 6 Nov build ===================== */
/* Q1083 fix (Sam 4 Nov 11:49): the Timeline pop-up bar is blue; line 9's white background (4 ids) lost no more */
html body .tlov22 main.page.sl40m.sl40ov > .dyh97.sl40h:not(#z956a):not(#z956b):not(#z40):not(#z1083b),
html body .tlov22 main.page.dy97 > .dyh97:not(#z956a):not(#z956b):not(#z40):not(#z1083b){background:#1E40AF!important;color:#fff!important;border-bottom:0}
html body .tlov22 main.page.sl40m.sl40ov > .dyh97.sl40h :is(h2, .sub, .small, label, .shw97):not(#z956a):not(#z956b):not(#z40):not(#z1083b){color:#fff!important}
/* Q1111 (c): the empty Selected alerts bar: hidden means hidden */
html body .ab31[hidden]:not(#z1111){display:none!important}

/* Q1107 / Q1111 (b): All open sits on the day line just left of Select / Done, only while Select is on */
html body .at21 .ao107:not(#z1107){display:inline-flex;align-items:center;gap:4px;margin:-4px 8px -4px auto;white-space:nowrap;visibility:visible!important;flex:none}
html body .at21 .ao107 + .sel860:not(#z860a):not(#z860b){margin-left:0}
html body .at21 .ao107 .ck28:not(#z1107){visibility:visible!important}
/* Q1111 (a): the Live pop-up rows' icon buttons the same size as the dashboard's */
html body .at21-pop .at21-acts.ic860 .btn:not(#zg1):not(#zg2):not(#zg3):not(#zg4):not(#zg5):not(#zg6):not(#zg7):not(#zg8){width:36px!important;min-width:36px!important;height:26px!important;min-height:0!important;padding:0!important;display:inline-grid!important;place-items:center}
html body .at21-pop .at21-acts.ic860 .btn svg:not(#zg1):not(#zg2):not(#zg3):not(#zg4):not(#zg5):not(#zg6):not(#zg7):not(#zg8){width:16px!important;height:16px!important}

/* Q1097: the pop-up waiting under a Live pop-up */
html body .swal2-container.lv97h:not(#z1097){display:none!important}
/* Q1086 (Sam 3-4 Nov): the CFH pill at the top of the Live pop-up always fits: never shrunk, squashed or cut (Live, Watch and the pop-up from Alerts) */
html body .lvv26.ctl48:not(#z48):not(#z658):not(#z1086){overflow:visible;height:auto;min-height:0;align-items:center}
html body .lvv26.ctl48 > .cfh48:not(#z1086){flex:0 0 auto;max-width:100%;overflow:visible;height:auto;min-height:0}
html body .lvv26.ctl48 .cfh48 .badge:not(#z48):not(#z658):not(#z1086){flex:0 0 auto;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;white-space:nowrap;line-height:1.3!important;box-sizing:border-box;max-width:none;width:auto;transform:none}
html body .lvv26.ctl48 .cfh48 .badge > span:not(#z1086){display:inline;line-height:inherit;white-space:nowrap}
/* Q1057 (Sam 3 Nov, sample 12LQ1hdo): the OUT card the same as AVG / DIT (stacked, one card wide); the six top cards the same width */
html body .lv48 .six48.r50:not(#z693):not(#z1057){grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
html body .lv48 .six48 > .s48.o50:not(#z693):not(#z1057){grid-column:auto;flex-direction:column;align-items:stretch;gap:1px;flex-wrap:nowrap}
html body .lv48 .s48.o50 > *:not(#z693):not(#z1057){white-space:normal}
html body .lv48 .s48.o50 .k48:not(#z693):not(#z1057){white-space:nowrap}
html body .lv48 .s48.o50 .v48:not(#z693):not(#z1057){font-size:26px}

/* Q1098: Timeline key box "What the colours mean" (closed by default) */
html body .sl40lg:not(#z1098){display:block;padding:8px 16px;font-weight:400}
html body .sl40t .sl40lg:not(#z1098){padding:8px 0}
html body .sl40lg .key98{border:1px solid #dbe3f1;border-radius:10px;background:#f6f9ff;padding:6px 12px}
html body .sl40lg .key98:not(.shut){padding-bottom:10px}
html body .sl40lg .kh98{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#1E40AF}
html body .sl40lg .key98:not(.shut) .kh98{margin-bottom:6px}
html body .sl40lg .kb98{margin-left:auto;border:1px solid rgba(30,64,175,.55);background:#fff;color:#1E40AF;border-radius:99px;font:700 11px var(--sans);padding:3px 10px;cursor:pointer;letter-spacing:.04em}
html body .sl40lg .kg98{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:start}
html body .sl40lg .key98.shut .kg98{display:none}
html body .sl40lg .kg98 > b{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#5b6476;padding-top:2px;white-space:nowrap;font-weight:700}
html body .sl40lg .kg98 > b small{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:11.5px}
html body .sl40lg .ki98{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;font-weight:600;color:var(--sl-fg)}
html body .sl40lg .ki98 span{display:inline-flex;align-items:center;gap:6px}
html body .sl40lg .ki98 .muted98{color:#5b6476;font-weight:400}
@media (max-width:640px){html body .sl40lg .kg98{grid-template-columns:1fr}}
/* Q1093 (Sam 4 Nov 11:14): Live pop-up > Report tables (Activity, Current status, Daily): the whole header one even light blue block (both rows,
   the group names too), CFH wide enough and left aligned, the last column never cut at the right edge, every group line the same */
html body #lvp #lvrep table.rpt thead th:not(#z1093a):not(#z1093b):not(#z1093c){background:#E6EFFC!important;color:#111827!important;border-color:#7FA2CF!important;border-top:0!important;box-shadow:none!important}
html body #lvp #lvrep table.rpt thead tr:first-child:not(:last-child) th[colspan]:not(#z1093a):not(#z1093b):not(#z1093c){background:#E6EFFC!important;border-bottom:1px solid #7FA2CF!important}
html body #lvp #lvrep table.rpt thead tr:last-child th:not(#z1093a):not(#z1093b):not(#z1093c),
html body #lvp #lvrep table.rpt thead th[rowspan]:not(#z1093a):not(#z1093b):not(#z1093c){border-bottom:2px solid #7FA2CF!important}
html body #lvp #lvrep table.rpt :is(th, td).cfh93:not(#z1093a):not(#z1093b):not(#z1093c){text-align:left!important;min-width:180px;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none}
html body #lvp #lvrep table.rpt :is(th, td).g29:not(#z1093a):not(#z1093b):not(#z1093c){border-left:2px solid #7FA2CF!important}
html body #lvp #lvrep table.rpt tbody td:not(#z1093a):not(#z1093b):not(#z1093c){overflow:visible;text-overflow:clip;max-width:none}
html body #lvp #lvrep table.rpt tr > :last-child:not(#z1093a):not(#z1093b):not(#z1093c){padding-right:14px!important}
html body #lvp #lvrep .brp-t:not(#z1093a):not(#z1093b){overflow-x:auto;max-width:100%;box-sizing:border-box;padding-right:2px}
html body #lvp #lvrep table.rpt:not(#z1093a):not(#z1093b){width:max-content;min-width:100%}
/* Q1087: the gold star at 18 px (flickers on the dashboard row, still in the panel's Action taken box) */
html body .ca67.ca87:not(#z1087){display:inline-flex;vertical-align:-3px;text-shadow:none;font-size:inherit}
html body .ca67.ca87 svg.st87:not(#z1087){width:18px;height:18px;display:block}

/* Q1088: corrective actions pop-up sections */
html body .sec88:not(#z1088){display:flex;align-items:center;gap:10px;margin:16px 0 8px;font-size:16px;font-weight:800}
html body .sec88 .n88:not(#z1088){font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;background:#e5f5eb;color:#1d8a4b}
html body .sec88.nd .n88:not(#z1088){background:#fdf0e6;color:#b4501b}
html body table.ca88t thead th:not(#z1088a):not(#z1088b):not(#z1088c){background:#dcebfb!important;color:#000!important;font-weight:800;white-space:nowrap;text-align:left}
html body table.ca88t td.nw32:not(#z1088){white-space:nowrap}
html body table.ca88t td.nd88:not(#z1088){color:#b4501b;font-weight:800}
html body table.ca88t td.cv88:not(#z1088){color:#5d6a85;font-size:12.5px}
/* Q1091: sortable headers keep their own text on one line with the arrow */
html body table.t thead th.s76:not(#z1091){cursor:pointer;user-select:none}

/* Q1090 config line star (green) + Q1101 save message + Q1102 summary */
html body .ca90g:not(#z1090){color:#16a34a;display:inline-flex;vertical-align:-3px}
html body .ca90g svg:not(#z1090){width:16px;height:16px}
html body .sv101 p:not(#z1101){margin:0 0 10px;text-align:left;line-height:1.5}
html body .sv101 .sk101:not(#z1101){color:#b4501b}
html body .ca102:not(#z1102){margin-top:16px}
html body .ca102 .alrow:not(#z1102){display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
html body table.ca102t thead th:not(#z1102a):not(#z1102b):not(#z1102c){background:#dcebfb!important;color:#000!important;white-space:nowrap}
html body :is(.ca90g, .bn90 .st90g) svg path:not(#z1090){stroke:#15803d}

/* Q1090 rows, panel, details; Q1092 top box */
html body .ca90r:not(#z1090){display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-left:6px;vertical-align:middle}
html body .pr90:not(#z1090){display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:13px;font-weight:800;border:1.5px dotted currentColor;border-radius:8px;padding:1px 7px}
html body .pr90.g90:not(#z1090){color:#8a5a00}
html body .pr90.c90:not(#z1090){color:#127a3f}
html body .pr90 .ca67:not(#z1090){color:#f5b301}
html body .st90g:not(#z1090){color:#18b45b!important}
html body .nd90:not(#z1090){font:800 11.5px var(--sans);color:#a3192a;background:#fdecee;border-radius:5px;padding:2px 8px;white-space:nowrap}
html body .ndr90:not(#z1090){font-size:12px;color:var(--muted)}
html body .ca90w:not(#z1090){margin:0 0 24px}
html body .ca90w .ca67b + .ca67b:not(#z1090){margin-top:8px}
html body .ca67b.bn90:not(#z1090){border-color:#86c99d;background:#effaf2}
html body .ca67b.nd67 .h67b:not(#z1090){color:#a3192a}
html body .bx92 .bl92:not(#z1092){display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #eef2f7;font-size:14px;white-space:nowrap}
html body .bx92 .bl92 .al92:not(#z1092){color:var(--muted)}
html body .bx92 .bl92 .v22:not(#z1092){color:#9d174d;font-weight:600}
html body .bx92 .bl92 .by92:not(#z1092){font-size:12.5px;color:var(--muted)}
html body .bx92 .bl92 .byp22:not(#z1092){display:flex;align-items:center;gap:12px;flex:1;margin:0;background:none;padding:0}
html body .bx92 .bl92 .trk22:not(#z1092){flex:1;min-width:60px;display:block}
@media (max-width:760px){html body .bx92 .bl92:not(#z1092){flex-wrap:wrap;white-space:normal}html body .bx92 .bl92 .byp22:not(#z1092){flex-wrap:wrap}}
/* Q1114 (Sam 4 Nov 14:55, web + desktop): Bypass time left rows get the title's inner margin on both sides (the building name and the time left
   no longer touch the box edges), and the time bar is short and fixed (240 px) with Started / Ends / time left beside it */
html body .bx92 .bl92:not(#z1092):not(#z1114){padding:8px 18px}
html body .bx92 .bxh22:not(#z1092):not(#z1114){padding:9px 18px}
html body .bx92 .bl92 .byp22:not(#z1092):not(#z1114){flex:0 1 auto;margin-left:auto}
html body .bx92 .bl92 .trk22:not(#z1092):not(#z1114){flex:0 0 240px;width:240px;min-width:0}
html body .bx92 .bl92 .lft22:not(#z1092):not(#z1114){min-width:104px;text-align:right}
@media (max-width:760px){html body .bx92 .bl92 .byp22:not(#z1092):not(#z1114){margin-left:0}html body .bx92 .bl92 .trk22:not(#z1092):not(#z1114){flex:1 1 160px;width:auto}}