/* Copied verbatim from the VGA client portal (sf180_agent/vga_portal/static/portal.css, 2026-10-02) so both portals look the same. Portal-specific additions live in portal.css. */ /* VGA client portal -- lifted from the approved mockup (~/Desktop/vga_portal_mockup.html), client side only. Mobile-first matters here: most clients arrive from a text message link. */ :root{ --navy:#12243b; --slate:#44566c; --line:#e3e8ef; --bg:#f5f7fa; --card:#fff; --accent:#1e6fd9; --accent-soft:#eaf2fd; --green:#0f7b4f; --green-soft:#e6f4ee; --amber:#9a6200; --amber-soft:#fdf3e0; --red:#b3261e; --red-soft:#fdeceb; --text:#17232f; --soft:#fbfcfe; --dash:#dde4ec; --track:#e6ebf1; --on-accent:#fff; } /* Dark mode. Set on before first paint (see base.html) so a client who chose dark never gets a white flash. Contrast is kept deliberately high: a fair number of these clients are older, reading on a phone. */ [data-theme="dark"]{ --navy:#0a0d14; --slate:#93a2bd; --line:#252d3d; --bg:#0f1117; --card:#161b27; --accent:#4f8ef7; --accent-soft:#1a2740; --green:#51cf66; --green-soft:#16301f; --amber:#ffd43b; --amber-soft:#332a10; --red:#ff6b6b; --red-soft:#3a1c1c; --text:#e8eaf0; --soft:#131824; --dash:#33405a; --track:#252d3d; /* White on the dark-mode accent is only 3.21:1 -- below the 4.5:1 that 12px badge text needs (WCAG 1.4.3). Dark text on the same blue is 6.2:1, so the badge flips its foreground instead of its colour. Must stay in THIS block: :root and [data-theme=dark] have equal specificity, so whichever comes last would win. */ --on-accent:#0a0d14; } *{box-sizing:border-box} html,body{margin:0;padding:0} /* ---- Accessibility (WCAG 2.1 AA), added 2026-09-28 ------------------- A law firm's client portal is a place of public accommodation under ADA Title III, and until now there was exactly one :focus-visible rule in the whole stylesheet -- so a keyboard or switch user could not see where they were. These three rules cover 2.4.7 (focus visible) and 2.4.1 (bypass blocks); the per-field labels are in the templates. */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* Only suppress the ring for pointer users, never for keyboard. */ :focus:not(:focus-visible){outline:none} /* Visible to a screen reader, not on screen. Used where an icon or a bare number carries meaning the markup does not spell out. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:100; background:var(--card);color:var(--accent);padding:12px 18px; border:2px solid var(--accent);border-radius:0 0 8px 0;font-weight:600} .skip:focus{left:0} /* Respect a client who has asked their OS to stop animating things. The progress trail and the theme transition both move without this. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;transition-duration:.01ms !important; scroll-behavior:auto !important} } body{ font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased; } .wrap{max-width:1040px;margin:0 auto;padding:0 20px} a{color:var(--accent);text-decoration:none} button{font:inherit;cursor:pointer} header.app{background:var(--navy);color:#fff} header.app .wrap{display:flex;align-items:center;gap:16px;min-height:62px} .brand{font-weight:600;letter-spacing:.2px;font-size:16px} .brand span{opacity:.62;font-weight:400} header.app .spacer{flex:1} .who{font-size:13.5px;opacity:.82} .who b{font-weight:600;opacity:1} .who a{color:#fff;opacity:.72;margin-left:12px;text-decoration:underline} nav.tabs{background:var(--card);border-bottom:1px solid var(--line)} nav.tabs .wrap{display:flex;gap:4px;overflow-x:auto} nav.tabs a{ padding:15px 16px;color:var(--slate);font-size:14.5px; border-bottom:2px solid transparent;white-space:nowrap; } nav.tabs a.on{color:var(--navy);font-weight:600;border-bottom-color:var(--accent)} nav.tabs .badge{ display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px; background:var(--accent);color:var(--on-accent);border-radius:10px;font-size:12px; font-weight:600;margin-left:6px; } main{padding:26px 0 70px} /* Heading sizes raised 2026-09-28 at the firm's request: the section headers ("WHAT WE NEED FROM YOU" and the rest) read as body text at 15px, so clients skimmed straight past them. h2 is the one that mattered; h1 and .sub move with it so the hierarchy still steps down. */ h1{font-size:27px;margin:0 0 6px;line-height:1.25} .sub{color:var(--slate);margin:0 0 22px;font-size:15.5px;line-height:1.5} h2{font-size:20px;margin:30px 0 13px;letter-spacing:.2px;line-height:1.3} .card{background:var(--card);border:1px solid var(--line);border-radius:10px} .pad{padding:18px} .status{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px} .stat{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line); border-radius:10px;padding:14px 16px} .stat .k{font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.6px} .stat .v{font-size:19px;font-weight:600;margin-top:5px} .stat .v small{font-size:13px;font-weight:400;color:var(--slate)} .task{display:flex;gap:14px;align-items:flex-start;padding:16px 18px; border-bottom:1px solid var(--line)} .task:last-child{border-bottom:0} .task .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--dash); flex:0 0 auto;margin-top:1px;display:grid;place-items:center;font-size:12px;color:#fff} .task.done .tick{background:var(--green);border-color:var(--green)} .task .body{flex:1;min-width:0} .task .t{font-weight:600;margin-bottom:3px} .task.done .t{color:var(--slate);text-decoration:line-through;font-weight:500} .task .d{color:var(--slate);font-size:13.5px} .btn{background:var(--accent);color:#fff;border:0;border-radius:7px; padding:8px 14px;font-size:13.5px;font-weight:500;flex:0 0 auto;display:inline-block} .btn.ghost{background:var(--card);color:var(--accent);border:1px solid var(--accent-soft)} .btn.big{padding:12px 22px;font-size:15px} .pill{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.3px; padding:3px 9px;border-radius:20px;text-transform:uppercase} .pill.todo{background:var(--amber-soft);color:var(--amber)} .pill.done{background:var(--green-soft);color:var(--green)} .folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px} .folder{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px} .folder .ic{width:30px;height:24px;border-radius:3px 6px 6px 6px; background:var(--accent-soft);border:1px solid var(--line);position:relative;margin-bottom:11px} .folder .ic:after{content:"";position:absolute;top:-5px;left:0;width:13px;height:5px; background:var(--accent-soft);border:1px solid var(--line);border-bottom:0;border-radius:3px 3px 0 0} .folder .n{font-weight:600;font-size:14.5px;margin-bottom:3px} .folder .c{color:var(--slate);font-size:13px} table.files{width:100%;border-collapse:collapse;font-size:14px} table.files th{text-align:left;font-size:11.5px;text-transform:uppercase; letter-spacing:.6px;color:var(--slate);padding:0 14px 9px;font-weight:600} table.files td{padding:13px 14px;border-top:1px solid var(--line);vertical-align:top} .fname{font-weight:500} .muted{color:var(--slate);font-size:13px} .drop{border:2px dashed var(--dash);border-radius:12px;background:var(--card); padding:40px 20px;text-align:center;color:var(--slate)} .drop .big{font-size:16px;color:var(--text);font-weight:600;margin-bottom:6px} /* Field labels were 13px -- smaller than body text, on the one part of the page a client has to read carefully. */ label.fld{display:block;font-size:14.5px;font-weight:600;margin:20px 0 7px} select,input[type=text],input[type=email],input[type=password],input[type=file],textarea{ width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px; font:inherit;background:var(--card);color:var(--text)} textarea{resize:vertical} /* "Keep the account open" lives in here. It is the single most consequential instruction in the portal -- a deleted account is destroyed evidence -- and at 13.5px it was the smallest text on the page. Raised 2026-09-28. */ .note{background:var(--amber-soft);border:1px solid var(--line);border-radius:9px; padding:16px 18px;font-size:16px;line-height:1.55;color:var(--amber); margin-top:22px} .err{background:var(--red-soft);border:1px solid var(--line);border-radius:9px; padding:12px 15px;font-size:14px;color:var(--red);margin-bottom:18px} .ok{background:var(--green-soft);border:1px solid var(--line);border-radius:9px; padding:12px 15px;font-size:14px;color:var(--green);margin-bottom:18px} /* chat */ .chat{background:var(--card);border:1px solid var(--line);border-radius:10px; display:flex;flex-direction:column;height:560px;max-width:640px} .chat .hd{padding:13px 16px;border-bottom:1px solid var(--line); display:flex;align-items:center;gap:9px} .chat .log{flex:1;overflow-y:auto;padding:16px;background:var(--soft)} .msg{max-width:84%;margin-bottom:14px} .msg .bub{padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.5; white-space:pre-wrap;word-wrap:break-word} .msg .mt{font-size:11.5px;color:var(--slate);margin-top:4px} .msg.them .bub{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px} .msg.us{margin-left:auto} .msg.us .bub{background:var(--accent);color:#fff;border-bottom-right-radius:4px} .msg.us .mt{text-align:right} .chat .cmp{border-top:1px solid var(--line);padding:11px;display:flex;gap:9px;align-items:flex-end} .chat .cmp textarea{flex:1;height:62px} .chat .cmp button{height:40px;padding:10px 15px;background:var(--accent); color:#fff;border:0;border-radius:8px;font-weight:600} .chat .ft{padding:9px 14px;border-top:1px solid var(--line);font-size:12px; color:var(--slate);background:var(--soft);border-radius:0 0 10px 10px} /* login */ .login-bg{min-height:100vh;background:var(--navy);display:grid;place-items:center;padding:24px} .login{width:100%;max-width:392px;background:var(--card);border-radius:12px; padding:34px 32px;box-shadow:0 10px 40px rgba(0,0,0,.28)} .login .lb{font-size:19px;font-weight:600;text-align:center;color:var(--navy)} .login .ls{text-align:center;color:var(--slate);font-size:13.5px;margin:6px 0 24px} .login button.primary{width:100%;margin-top:22px;background:var(--accent); color:#fff;border:0;border-radius:8px;padding:12px;font-size:15px;font-weight:600} .login .alt{text-align:center;margin-top:18px;font-size:13.5px;color:var(--slate)} .hr{display:flex;align-items:center;gap:12px;color:#9aa8b6;font-size:12px;margin:22px 0} .hr:before,.hr:after{content:"";flex:1;height:1px;background:var(--line)} @media (max-width:640px){ .wrap{padding:0 14px} .task{flex-wrap:wrap} .task .btn{width:100%;margin-top:10px;text-align:center} .status .stat{min-width:100%} .folders{grid-template-columns:1fr} .chat{height:70vh} header.app .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px} } /* ====================================================================== LEFT SIDEBAR (dark, vertical) Desktop only. Below 900px it becomes a fixed BOTTOM bar: a 200px-wide sidebar on a 390px phone would eat half the screen, and most clients arrive on a phone from a text message. A bottom bar is also the easier thumb target, which matters for an older user base. ====================================================================== */ :root{ --side:236px; --side-bg:var(--navy); --side-line:#1d2f44; } .shell{ display:flex; min-height:100vh; } aside.side{ width:var(--side); flex:0 0 var(--side); background:var(--side-bg); color:#cfe0f0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } aside.side .logo{ padding:22px 20px 18px; border-bottom:1px solid var(--side-line); } aside.side .logo b{ display:block; color:#fff; font-size:16px; font-weight:600 } aside.side .logo span{ font-size:12.5px; opacity:.55; letter-spacing:.3px } aside.side nav{ padding:14px 12px; flex:1 } aside.side nav a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; color:#b7c9db; font-size:14.5px; margin-bottom:3px; position:relative; } aside.side nav a svg{ width:18px; height:18px; flex:0 0 18px; opacity:.85 } aside.side nav a:hover{ background:rgba(255,255,255,.07); color:#fff } aside.side nav a.on{ background:var(--accent); color:#fff; font-weight:600 } aside.side nav a.on svg{ opacity:1 } aside.side nav a .badge{ margin-left:auto; background:var(--accent); color:var(--on-accent); border-radius:10px; min-width:20px; height:20px; padding:0 6px; font-size:12px; font-weight:600; display:grid; place-items:center; } aside.side nav a.on .badge{ background:#fff; color:var(--accent) } aside.side .foot{ padding:14px 20px 18px; border-top:1px solid var(--side-line); font-size:12.5px; } aside.side .foot .nm{ color:#fff; font-weight:600; margin-bottom:2px } aside.side .foot .em{ opacity:.55; word-break:break-all; margin-bottom:9px } aside.side .foot a{ color:#9fb8d0; text-decoration:underline } /* Sign out is a POST form now (security audit 2026-09-30), styled as the link it was. */ aside.side .foot .signout{ margin:0 } aside.side .foot .linkbtn{ background:none; border:0; padding:0; font:inherit; color:#9fb8d0; text-decoration:underline; cursor:pointer } .content{ flex:1; min-width:0; display:flex; justify-content:center } /* Breathing room at the top: the page title sat hard against the browser chrome, which made a fairly calm page feel cramped. Only inside the signed-in shell -- the login screens centre themselves. */ .content main{ padding-top:46px } @media (max-width:900px){ .content main{ padding-top:26px } } /* Centred in the space the sidebar leaves, not jammed against it. */ .content .wrap{ max-width:940px; width:100%; margin:0 auto } @media (max-width:900px){ .shell{ display:block } aside.side{ position:fixed; bottom:0; left:0; right:0; top:auto; width:auto; height:auto; flex-direction:column; z-index:40; border-top:1px solid var(--side-line); } aside.side .logo{ display:none } /* One toggle only. It used to be duplicated into the nav row on phones, which put it directly under Messages where it read as a fourth destination. The footer becomes a slim strip above the bar instead. */ aside.side .foot{ display:flex; align-items:center; gap:12px; padding:7px 14px; border-top:0; border-bottom:1px solid var(--side-line); } aside.side .foot .nm, aside.side .foot .em{ display:none } aside.side .foot .themebtn{ width:auto; margin:0 0 0 auto; padding:5px 11px } aside.side nav{ display:flex; width:100%; padding:6px 4px } aside.side nav a{ flex:1; flex-direction:column; gap:4px; font-size:11px; padding:8px 4px; text-align:center; margin:0; } aside.side nav a .badge{ margin:0; position:absolute; top:2px; right:50%; transform:translateX(22px); } .content .wrap{ margin:0 auto; max-width:100% } main{ padding-bottom:120px } /* clear the bar and the strip */ } /* ---- progress ---- One segment per task, filled as they are done. No labels under it: they duplicated the task list six inches below and made the block twice as tall as the information in it. */ .progress{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:16px 20px 18px;margin-bottom:22px} .phead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px} .phead b{font-size:15px} .phead span{color:var(--slate);font-size:13.5px} .segbar{display:flex;gap:5px} .segbar i{flex:1;height:8px;border-radius:4px;background:var(--track); transition:background .5s ease} .segbar i.on{background:var(--green)} .pnext{margin-top:13px;font-size:14px;color:var(--slate)} .pnext b{color:var(--text)} /* ---- to do / already done, side by side ---- */ .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .cols h2{margin-top:0} /* A finished task is not struck through: it reads as cancelled rather than completed, and this column is only finished things anyway. */ .cols .task.done .t{text-decoration:none;color:var(--text);font-weight:600} .cols .task.done{opacity:.72} @media (max-width:760px){ .cols{grid-template-columns:1fr;gap:10px} } /* ---- what happens next ---- */ .stages{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:6px 20px 14px} .stg{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)} .stg:last-child{border-bottom:0} .stg .mk{width:26px;height:26px;border-radius:50%;flex:0 0 26px;margin-top:2px; border:2px solid var(--dash);display:grid;place-items:center;font-size:12px; color:var(--slate);background:var(--card)} .stg.done .mk{background:var(--green);border-color:var(--green);color:#fff} .stg.now .mk{border-color:var(--accent);color:var(--accent);font-weight:700; box-shadow:0 0 0 4px var(--accent-soft)} .stg .tx b{display:block;font-size:14.5px;margin-bottom:2px} .stg.later{opacity:.62} .stg.now .tx b{color:var(--accent)} .stg .tx span{color:var(--slate);font-size:13.5px} /* ---- case manager ---- */ .cm{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:18px 20px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .cm .ini{width:44px;height:44px;border-radius:50%;flex:0 0 44px; background:var(--accent-soft);color:var(--accent);display:grid; place-items:center;font-weight:700;font-size:16px;letter-spacing:.5px} .cm .who b{display:block;font-size:15px} .cm .who span{color:var(--slate);font-size:13.5px} .cm .acts{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap} /* ---- questions ---- */ .faq details{background:var(--card);border:1px solid var(--line); border-radius:10px;margin-bottom:9px;overflow:hidden} .faq summary{padding:14px 18px;cursor:pointer;font-weight:600;font-size:14.5px; list-style:none;display:flex;align-items:center;gap:10px} .faq summary::-webkit-details-marker{display:none} .faq summary:before{content:"+";color:var(--accent);font-weight:700; font-size:17px;line-height:1;width:14px;flex:0 0 14px} .faq details[open] summary:before{content:"\2212"} .faq details[open] summary{border-bottom:1px solid var(--line)} .faq .ans{padding:14px 18px 16px 42px;color:var(--slate);font-size:14px} /* ---- gaming accounts ---- */ .acct{display:flex;gap:12px;align-items:center;padding:14px 18px; border-bottom:1px solid var(--line);flex-wrap:wrap} .acct:last-child{border-bottom:0} .acct .pf{font-weight:600;min-width:130px} .acct .tg{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--slate)} .acct form{margin-left:auto} .acct button.rm{background:none;border:1px solid var(--line); color:var(--slate);border-radius:7px;padding:5px 11px;font-size:13px} .howto{font-size:13.5px;color:var(--slate);margin-top:6px} /* ---- theme toggle ---- Sits at the bottom of the sidebar, under the name, email and Sign out: a full-width pill so it reads as a control rather than another link. These rules were lost in an earlier edit and the button rendered as a bare browser default -- test_app checks the stylesheet still defines them. */ .themebtn{ background:rgba(255,255,255,.08); border:1px solid var(--side-line); color:var(--side-text); border-radius:10px; padding:9px 12px; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:12px; cursor:pointer; transition:background .15s ease, color .15s ease; } .themebtn:hover{ background:rgba(255,255,255,.16); color:#fff } .themebtn svg{ width:15px; height:15px; flex:0 0 15px } /* The finished column only shows the three most recent; the rest fold away behind a summary. Without this it grows for the life of the case while the column beside it shrinks, so the page ends up lopsided. */ .cols details.more{ border-top:1px solid var(--line) } .cols details.more summary{ padding:11px 18px; cursor:pointer; font-size:13.5px; color:var(--accent); list-style:none; display:flex; align-items:center; gap:8px; } .cols details.more summary::-webkit-details-marker{ display:none } .cols details.more summary:before{ content:"+"; font-weight:700; font-size:15px; line-height:1; } .cols details.more[open] summary:before{ content:"\2212" } .cols details.more[open] summary{ border-bottom:1px solid var(--line) } .cols details.more .task:last-child{ border-bottom:0 } /* A stat the client is meant to act on is a link, not a label. The arrow only appears on the messages card because that one leaves the page. */ .stat.link{ display:block; color:inherit; text-decoration:none; transition:border-color .12s ease, transform .12s ease } .stat.link:hover{ border-color:var(--accent); transform:translateY(-1px) } .stat.link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } .stat .go{ margin-top:8px; font-size:12.5px; color:var(--accent) } /* ---- firm mark ---- The real wordmark, self-hosted. Solid black or solid white with no background, so which file is used depends on the SURFACE, not the theme: the sidebar is dark in both themes and always takes the white one. */ .firmlogo{ display:block; height:auto; max-width:100% } aside.side .logo{ display:block } aside.side .logo span{ display:block; margin-top:7px; font-size:12.5px; opacity:.55; letter-spacing:.3px } .loginmark{ display:flex; justify-content:center; margin-bottom:20px } /* On a card the surface flips with the theme, so both ship and CSS picks. */ .firmlogo.on-dark{ display:none } [data-theme="dark"] .firmlogo.on-light{ display:none } [data-theme="dark"] .firmlogo.on-dark{ display:block } /* ====================================================================== MESSAGES: the column beside the chat. .chat is capped at 640px inside a 940px content column, which left a third of the page blank on a laptop. This fills it with the things a client actually wants while writing -- who reads it, when they will hear back, and something to say. DESKTOP ONLY, deliberately: on a phone the chat is the whole point and nothing here is needed to send a message. ====================================================================== */ .mgrid{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:20px; align-items:start} .mgrid > .chat{max-width:none} /* the grid owns the width now */ .mside{display:flex;flex-direction:column;gap:14px} .sbcard{background:var(--card);border:1px solid var(--line);border-radius:10px; padding:14px 15px} .sbcard h3{margin:0 0 7px;font-size:12px;letter-spacing:.6px; text-transform:uppercase;color:var(--slate)} .sbcard p{margin:0 0 8px;font-size:13.5px;line-height:1.5} .sbcard p:last-child{margin-bottom:0} .sbcard p.sm{font-size:12.5px} .sbcard .urgent{color:var(--slate);font-size:12.5px;padding-top:8px; border-top:1px solid var(--line);margin-top:10px} /* Who is on the other end. Same idea as .cm on the case page, sized for a narrow column rather than a full-width row. */ .sbcard.who{display:flex;align-items:center;gap:11px} .sbcard.who .ini{width:38px;height:38px;border-radius:50%;flex:0 0 38px; display:grid;place-items:center;background:var(--accent-soft); color:var(--accent);font-weight:700;font-size:13px} .sbcard.who b{display:block;font-size:14px} .sbcard.who span{color:var(--slate);font-size:12.5px;line-height:1.35; display:block;margin-top:2px} .starters{display:flex;flex-direction:column;gap:7px} .starter{text-align:left;font:inherit;font-size:13px;line-height:1.4; background:var(--soft);color:var(--text);border:1px solid var(--line); border-radius:8px;padding:8px 10px;cursor:pointer; transition:border-color .12s,background .12s} .starter:hover{border-color:var(--accent);background:var(--accent-soft); color:var(--accent)} .faq.tight details{margin-bottom:6px} .faq.tight summary{font-size:13px;padding:8px 10px} .faq.tight .ans{font-size:12.5px;padding:0 10px 9px} /* Below this width the sidebar is gone, so the chat keeps the footer line that carries the reply time and the phone number. Above it, the sidebar says both things properly and the footer would just repeat itself. */ @media (min-width:901px){ .mgrid > .chat .ft{display:none} } @media (max-width:900px){ .mgrid{grid-template-columns:1fr} .mside{display:none} } /* ====================================================================== DROP ZONE. A