/* next build (after 22 Oct): web1 styles */

/* ---------- Q606 All alerts: ONE top line (All open, Critical N open, Search, period | Observations, Predictions, tabs, Timeline) ---------- */
html body .at21-top.ctl22.one48:not(#z47):not(#z48){gap:8px 10px;margin:0 0 8px;flex-wrap:wrap}
html body .at21-top.one48 .lf22:not(#z47):not(#z48){gap:8px;flex:1 1 auto;flex-wrap:wrap}
html body .at21-top.one48 .rt22:not(#z47):not(#z48){gap:8px;flex-wrap:wrap}
html body .at21-top.one48 .at21-sw:not(#z47):not(#z48){width:auto;flex:0 1 auto;display:inline-flex;align-items:center;gap:6px;min-width:0}
html body .at21-top.one48 .at21-q:not(#z44):not(#z48){width:190px;max-width:100%}
html body .at21-top.one48 .btn.ab22.ab22.ab22:not(#z22):not(#z23):not(#z48){padding:6px 11px!important}
.at21-top.one48 .seg{margin:0}
html body .at21-one .at21-srow:not(#z48){display:none}
.tl48{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.tl48 .ao48{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer}
.tl48 .cr48{display:inline-flex;align-items:center;gap:6px}
/* wide screens: one line, the search box gives way first */
@media (min-width:1100px){html body .at21-top.ctl22.one48:not(#z47):not(#z48){flex-wrap:nowrap}html body .at21-top.one48 .lf22:not(#z47):not(#z48){flex-wrap:nowrap;min-width:0}
  html body .at21-top.one48 .rt22:not(#z47):not(#z48){flex-wrap:nowrap;flex:0 0 auto}html body .at21-top.one48 .at21-sw:not(#z47):not(#z48){flex:0 1 210px;min-width:110px}
  html body .at21-top.one48 .at21-q:not(#z44):not(#z48){width:100%;min-width:0}html body .at21-top.one48 .at21-n:not(#z48){white-space:nowrap}
  html body .at21-top.one48 .lf22>:not(.at21-sw):not(#z48){flex-shrink:0}}
@media (max-width:640px){html body .at21-top.one48 .at21-sw:not(#z47):not(#z48){flex:1 1 100%}html body .at21-top.one48 .at21-q:not(#z44):not(#z48){width:100%}}

/* ---------- Q639 Alerts screens: alert name and group heading blue, building name black ---------- */
html body .at21 .at21-an:not(#z48),html body .at21 .at21-nm:not(#z48),html body .te28 .w28>b:not(.bn28):not(#z48),html body .hrow .hh>b:not(#z48){color:#1E40AF}
html body .at21 .bn28:not(#z48),html body .at21 .at21-bn:not(#z48),html body .te28 .w28 .bn28:not(#z48){color:#0f172a}
html[data-mode="dark"] body .at21 .at21-an:not(#z48),html[data-mode="dark"] body .at21 .at21-nm:not(#z48),html[data-mode="dark"] body .te28 .w28>b:not(.bn28):not(#z48),html[data-mode="dark"] body .hrow .hh>b:not(#z48){color:#93b4ff}
html[data-mode="dark"] body .at21 .bn28:not(#z48),html[data-mode="dark"] body .at21 .at21-bn:not(#z48),html[data-mode="dark"] body .te28 .w28 .bn28:not(#z48){color:#e6ebf7}

/* ---------- Q645 grouped and single alert names start in the same column; the fold triangle sits left of the select box ---------- */
html body .at21-gh:not(#z48){grid-template-columns:18px auto minmax(0,1fr)}
html body .at21-gh .at21-chev:not(#z48){position:absolute;left:-18px;top:20px;transform:translateY(-50%);width:14px;text-align:center}
html body .at21-folded .at21-gh .at21-chev:not(#z48){transform:translateY(-50%) rotate(-90deg)}
@media (max-width:640px){html body .at21-gh .at21-chev:not(#z48){left:-15px}}

/* ---------- Q605 pop-ups open at their final size with the one loader in the body; no zoom-in ---------- */
html body .swal2-popup.swp:not(#z47):not(#z48),html body .swal2-popup.swp.swal2-show:not(#z47):not(#z48){animation:none!important}
html body .swal2-popup.swp.fs48:not(#z47):not(#z48){height:min(86vh,860px)!important;max-height:calc(100vh - 24px)!important;display:flex!important;flex-direction:column;overflow:hidden!important}
html body .swal2-popup.swp.fs48>:not(.swal2-html-container):not(#z48){flex:0 0 auto}
html body .swal2-popup.swp.fs48>.swal2-html-container:not(#z47):not(#z48){flex:1 1 auto;min-height:0;max-height:none!important;overflow:auto!important;position:relative;align-self:stretch}
html body .swal2-popup.swp.fs48 #dlgB>.ldf:only-child:not(#z48),html body .swal2-popup.swp.fs48 #dlgB>.ldf-box:only-child:not(#z48),html body .swal2-popup.swp.fs48 #dlgB>div:only-child>.ldf:only-child:not(#z48),html body .swal2-popup.swp.fs48 #dlgB>div:only-child>.ldf-box:only-child:not(#z48){position:absolute;inset:0;margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ---------- Q603 Timeline: ONE blue bar (Timeline, range, Buildings, Show, Close at the right end) ---------- */
html body main.dy97 .dyh97.one48:not(#z44):not(#z48){flex-wrap:wrap;row-gap:8px}
html body main.dy97 .dyh97.one48 .shw97:not(#z48){margin-left:0}
html body .tlov22 main.page.dy97:not(#z48){padding-top:0}
html body .tlov22 main.dy97 .dyh97:not(#z44):not(#z48){margin-top:0;padding:10px 16px!important;position:sticky;top:0;z-index:20}
html body .tlov22 .dyh97 h2:not(#z48){display:block;margin:0;color:#fff;max-width:min(520px,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body main.dy97 .dyh97 .btn.dyx48:not(#z44):not(#z48),html body .tlov22 .dyh97 .btn.dyx48:not(#z48){background:#fff!important;color:#1E40AF!important;border-color:#fff!important;font-weight:700}
html body .tlov22 main.page>.dyh97:not(#z48){display:flex;align-items:center;gap:12px;padding:10px 16px;background:#1E40AF;color:#fff}

/* ---------- Q631 Timeline Buildings list like the Metrics one ---------- */
.pq48{padding:2px 2px 8px}
.pq48 #dyq{width:100%;margin:0;box-sizing:border-box}
html body main.dy97 .dyh97 .pq48 #dyq:not(#z48){width:100%;max-width:none}
#dyc48{margin-left:auto}
html body .pkm97 .pki97.hd48:not(#z48){display:none}
html body main.dy97 .dyh97 .pkm97:not(#z48){min-width:300px}
html body main.dy97 .dyh97 .pkm97 .pkh97 #dyok48:not(#z48){background:#1E40AF!important;color:#fff!important;border-color:#1E40AF!important}

/* ---------- Q637 Timeline bar colours D (white text in the bars, legend dots the same) ---------- */
html body .dy97:not(#z48),html body .tip97:not(#z48){--stc-call:#f0894a;--stc-aq:#5b9be8;--stc-ins:#52b86e}
html body .fr41.fr22:not(#z22):not(#z48),html body .fr41:not(#z47):not(#z48){background:#e05a5a!important}
html body .lg97 i.lg41s:not(#z47):not(#z48){background:#e05a5a!important}

/* ---------- Q604 option A + Q647 Timeline: a card per building with space between; no coloured name bar, the name strong bold black ---------- */
html body .tl97>.bw42:not(#z42):not(#z48){border:1px solid var(--line,#d5dcec);border-radius:10px;margin:0 0 26px!important;background:var(--surface,#fff)}
html body .tl97 .bw42 .rw97>.nm97:not(#z42):not(#z47):not(#z48),html body .tl97 .bw42 .rw97.sel97>.nm97:not(#z42):not(#z47):not(#z48){background:var(--surface,#fff)!important;color:#0f172a!important;border-bottom:1px solid var(--line,#d5dcec)!important}
html body .tl97 .bw42 .nm97 :is(a,b,small,.op97):not(#z47):not(#z48){color:#0f172a!important}
html body .tl97 .bw42 .nm97 :is(a,b):not(#z47):not(#z48){font-weight:800!important}
html[data-mode="dark"] body .tl97 .bw42 .rw97>.nm97:not(#z42):not(#z47):not(#z48),html[data-mode="dark"] body .tl97 .bw42 .nm97 :is(a,b,small,.op97):not(#z47):not(#z48){color:#e6ebf7!important}