:root{ --bg:#0b0f0d; --panel:#11161300; --card:#121814; --card2:#161d18; --line:#1f2a23; --line2:#26342b; --txt:#e8f0ea; --muted:#b3c3b8; --faint:#8aa093; --acc:#2ee687; --acc-d:#1fbf6e; --acc-ghost:rgba(46,230,135,.12); --warn:#e6c12e; --bad:#e6553e; --info:#4ea8e6; --r:14px; --r2:10px; --shadow:0 8px 30px rgba(0,0,0,.45); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-pa: "Noto Sans Gurmukhi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} html{font-size:19px} /* BIG & BOLD base — non-technical, dyslexic/older drivers */ body{ background:var(--bg); color:var(--txt); font-family:var(--font); -webkit-font-smoothing:antialiased; line-height:1.55; font-size:1rem; /* ~19px */ min-height:100vh; } /* Punjabi: swap to Gurmukhi-capable font when lang=pa (set by i18n.js on ) */ html.lang-pa, html.lang-pa body{font-family:var(--font-pa)} html.lang-pa{font-size:20px} /* Gurmukhi reads a touch larger */ a{color:var(--acc); text-decoration:none} a:hover{text-decoration:underline} /* layout — generous bottom padding clears the FAB and the fixed language pill */ .wrap{max-width:520px;margin:0 auto;padding:20px 18px calc(132px + env(safe-area-inset-bottom))} .wrap-wide{max-width:1400px;margin:0 auto;padding:0} .hidden{display:none !important} /* Native hidden attr must win even over display:grid/flex layout containers. */ [hidden]{display:none !important} .row{display:flex;gap:10px;align-items:center} .row.wrap{flex-wrap:wrap} .spread{justify-content:space-between} .grow{flex:1} .center{text-align:center} .muted{color:var(--muted)} .faint{color:var(--faint)} /* No important info in tiny text: bumped up + readable weight/contrast. */ .small{font-size:1rem;line-height:1.5} .tiny{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600} /* brand / header */ .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em} .brand .mark{width:30px;height:30px;border-radius:8px;display:block} .brand b{color:var(--acc)} header.bar{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid var(--line); position:sticky;top:0;background:rgba(11,15,13,.92);backdrop-filter:blur(8px);z-index:20; } /* cards */ .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:20px;margin:16px 0; } .card.tap{cursor:pointer;transition:border-color .15s, transform .05s} .card.tap:active{transform:scale(.995)} .card.tap:hover{border-color:var(--line2)} /* typography — headings noticeably bigger and bolder */ h1{font-size:2.05rem;line-height:1.2;font-weight:800;margin:0 0 8px} h2{font-size:1.5rem;line-height:1.25;font-weight:800;margin:0 0 12px} h3{font-size:1.1rem;margin:0 0 10px;color:var(--muted);font-weight:700;letter-spacing:.01em} .lede{color:var(--muted);font-size:1.1rem;line-height:1.5;margin:0 0 20px} /* form — field names are important, so labels are clearly readable */ label{display:block;font-size:1rem;font-weight:600;color:var(--txt);margin:18px 0 8px;letter-spacing:.01em} input,textarea,select{ width:100%;background:var(--card2);border:1px solid var(--line2);color:var(--txt); border-radius:var(--r2);padding:16px 14px;font-size:1.1rem;min-height:58px;font-family:inherit;outline:none; } input:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ghost)} textarea{min-height:74px;resize:vertical} /* buttons — tall, bold, high-contrast; the primary action should POP */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--acc);color:#04150c;border:2px solid var(--acc);border-radius:12px; padding:16px 22px;min-height:60px;font-size:1.2rem;font-weight:800;letter-spacing:.01em; cursor:pointer;font-family:inherit; transition:filter .12s, transform .05s;width:100%; } .btn:active{transform:scale(.985)} .btn:hover{filter:brightness(1.06)} .btn:disabled{opacity:.5;cursor:not-allowed} /* Ghost = clearly secondary: bolder border so it reads as a real button, not text. */ .btn.ghost{background:transparent;color:var(--txt);border:2px solid var(--line2);font-weight:700} .btn.ghost:hover{border-color:var(--acc);color:var(--acc);filter:none} /* "small" header buttons are still tap-friendly, not tiny. */ .btn.sm{padding:11px 16px;min-height:48px;font-size:1rem;width:auto;font-weight:700} .btn.danger{background:var(--bad);border-color:var(--bad);color:#1a0805} .btn-rowfit{width:auto;flex:1} /* badges */ .badge{ display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:800; letter-spacing:.04em;text-transform:uppercase;padding:7px 13px;border-radius:999px; border:1px solid var(--line2);color:var(--muted);background:var(--card2);white-space:nowrap; } .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)} .badge.active{color:var(--acc);border-color:rgba(46,230,135,.4);background:var(--acc-ghost)} .badge.active .dot{background:var(--acc);box-shadow:0 0 0 0 rgba(46,230,135,.6);animation:pulse 1.8s infinite} .badge.delivered{color:var(--info);border-color:rgba(78,168,230,.35)} .badge.delivered .dot{background:var(--info)} .badge.pending .dot{background:var(--warn)} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,230,135,.5)}70%{box-shadow:0 0 0 7px rgba(46,230,135,0)}100%{box-shadow:0 0 0 0 rgba(46,230,135,0)}} /* load card */ .load-ref{font-weight:800;font-size:1.3rem} .route{display:flex;align-items:center;gap:8px;color:var(--txt);margin-top:8px;font-size:1.1rem} .route .arrow{color:var(--acc);flex:0 0 auto} .route .leg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* live banner */ .live-banner{ position:sticky;top:0;z-index:30;display:none;align-items:center;gap:10px; background:linear-gradient(90deg,var(--acc-d),var(--acc));color:#04150c; font-weight:800;padding:13px 16px;font-size:1.05rem; } /* Banner intentionally hidden: GPS tracking keeps running (dispatcher map still tracks the driver), but the driver no longer sees a live-tracking banner. */ .live-banner.show{display:none} .live-banner .rad{width:10px;height:10px;border-radius:50%;background:#04150c;animation:pulse2 1.4s infinite} @keyframes pulse2{0%,100%{opacity:.4}50%{opacity:1}} /* toast / notes */ #toast{position:fixed;left:50%;bottom:calc(148px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .toast{ background:var(--card2);border:1px solid var(--line2);color:var(--txt); padding:14px 20px;border-radius:16px;font-size:1.05rem;font-weight:600;box-shadow:var(--shadow); animation:tin .2s ease;max-width:90vw;text-align:center; } .toast.ok{border-color:rgba(46,230,135,.4);color:var(--acc)} .toast.warn{border-color:rgba(230,193,46,.4);color:var(--warn)} .toast.err{border-color:rgba(230,85,62,.4);color:var(--bad)} @keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* queue chip */ .qchip{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--warn); border:1px solid rgba(230,193,46,.3);background:rgba(230,193,46,.08);padding:6px 12px;border-radius:999px} .qchip.empty{color:var(--faint);border-color:var(--line);background:transparent} /* thumbnails */ .thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .thumb{width:72px;height:72px;border-radius:10px;object-fit:cover;border:1px solid var(--line2);background:var(--card2)} .thumb-wrap{position:relative} .thumb-wrap .tg{position:absolute;left:4px;bottom:4px;font-size:.7rem;font-weight:700;background:rgba(0,0,0,.78);color:#fff;padding:2px 6px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em} /* signature canvas */ .sigbox{border:1px dashed var(--line2);border-radius:var(--r2);background:#0f1411;touch-action:none} canvas#sig{display:block;width:100%;height:180px;border-radius:var(--r2)} /* Landscape phones have little vertical room — shorten the signature pad. */ @media(orientation:landscape) and (max-height:480px){ canvas#sig{height:120px} } /* new-load entry options (speak / scan / type) */ .optgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:6px} .optbtn{display:flex;align-items:center;gap:16px;text-align:left;width:100%;min-height:84px; background:var(--card2);border:2px solid var(--line2);border-radius:var(--r);color:var(--txt); padding:20px 18px;font-family:inherit;cursor:pointer;transition:border-color .15s, transform .05s} .optbtn:hover{border-color:var(--acc)} .optbtn:active{transform:scale(.99)} .optbtn .opt-ico{font-size:38px;line-height:1;flex:0 0 auto} .optbtn .opt-title{display:block;font-size:1.35rem;font-weight:800} .optbtn .opt-sub{display:block;font-size:1rem;color:var(--muted);margin-top:3px} /* scan confirm banner + highlighted fields (OCR review) */ .confirm-banner{ background:rgba(230,193,46,.12);border:1px solid rgba(230,193,46,.5);color:var(--warn); border-radius:var(--r2);padding:16px 16px;margin:6px 0 10px;font-size:1.1rem;font-weight:700;line-height:1.45; } input.scan-check{border-color:var(--warn);box-shadow:0 0 0 3px rgba(230,193,46,.18);background:rgba(230,193,46,.06)} input.scan-check:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ghost);background:var(--card2)} /* reference field is the weakest OCR read — flag it red as low-confidence */ input.scan-low{border-color:var(--bad);box-shadow:0 0 0 3px rgba(230,85,62,.18);background:rgba(230,85,62,.06)} input.scan-low:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ghost);background:var(--card2)} .scan-hint{color:var(--bad);font-size:1rem;font-weight:700;line-height:1.4;margin:8px 0 2px} /* capture buttons — big stacked rows (icon + title + subtitle), mirrors .optbtn */ /* BOL / POD / Signature required-doc checklist on the open load */ .checklist{display:flex;flex-wrap:wrap;gap:8px} .checklist .ck{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:800;padding:6px 12px;border-radius:999px;border:2px solid transparent;line-height:1} .checklist .ck.ok{background:rgba(46,230,135,.16);color:#5bf3a7;border-color:rgba(46,230,135,.5)} .checklist .ck.miss{background:rgba(230,193,46,.14);color:#f0c462;border-color:rgba(230,193,46,.45)} .capgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:6px} .capbtn{display:flex;align-items:center;gap:16px;text-align:left;width:100%;min-height:80px; background:var(--card2);border:2px solid var(--line2);border-radius:var(--r);color:var(--txt); padding:18px 18px;font-family:inherit;font-weight:600;cursor:pointer;transition:border-color .15s, transform .05s} .capbtn:hover{border-color:var(--acc)} .capbtn:active{transform:scale(.99)} .capbtn svg{width:36px;height:36px;color:var(--acc);flex:0 0 auto} .capbtn .cap-title{display:block;font-size:1.25rem;font-weight:800} .capbtn .cap-sub{display:block;font-size:1rem;color:var(--muted);margin-top:3px} .capbtn input[type=file]{display:none} /* proof-of-delivery card — clearly the big delivery step; accent border so it stands out */ .pod-card{border-color:rgba(46,230,135,.45);background:linear-gradient(180deg,rgba(46,230,135,.06),var(--card))} .pod-card h3{color:var(--acc)} .pod-btn{position:relative;overflow:hidden} .pod-btn.done{background:transparent;color:var(--acc);border-color:var(--acc)} .pod-btn input[type=file]{display:none} /* floating action — sits above the bottom language pill */ .fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(72px + env(safe-area-inset-bottom));z-index:25;width:auto} .fab .btn{box-shadow:var(--shadow);font-size:1.3rem;font-weight:800;padding:20px 52px;min-height:64px;border-radius:14px} /* status pills row */ .statusrow{display:flex;gap:12px;margin-top:12px} /* connecting state */ .conn{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:1.05rem;font-weight:600;padding:22px 0;justify-content:center} .spin{width:16px;height:16px;border:2px solid var(--line2);border-top-color:var(--acc);border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* empty state */ .empty{text-align:center;color:var(--faint);padding:40px 20px} .empty svg{width:42px;height:42px;color:var(--line2);margin-bottom:10px} .empty>div{font-size:1.1rem} /* action button under an empty/error state (Scan first invoice / Try again) */ .empty-action{margin-top:18px;max-width:340px;margin-left:auto;margin-right:auto} /* loading skeletons — shimmer placeholders that match the .card shape, shown while the loads list is fetching so the real cards don't pop in on slow connections. */ .card.skel{cursor:default;pointer-events:none} .skel-line{ display:block;height:16px;border-radius:7px; background:linear-gradient(100deg,var(--card2) 30%,var(--line2) 50%,var(--card2) 70%); background-size:200% 100%;animation:shimmer 1.3s ease-in-out infinite; } .skel-ref{width:42%;height:20px} .skel-badge{width:74px;height:24px;border-radius:999px} .skel-route{width:80%;margin-top:16px} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @media (prefers-reduced-motion: reduce){ .skel-line{animation:none} } /* ====== LANGUAGE PILL (fixed bottom row, out of the main workflow) ====== */ .langpill{ position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:55; display:flex;gap:4px;padding:5px; background:rgba(18,24,20,.92);border:1px solid var(--line2);border-radius:999px; box-shadow:var(--shadow);backdrop-filter:blur(8px); max-width:calc(100vw - 24px); } .langpill .lang-opt{ appearance:none;border:none;cursor:pointer;font-family:inherit; background:transparent;color:var(--muted); font-size:.95rem;font-weight:700;letter-spacing:.02em; padding:9px 13px;min-height:40px;border-radius:999px;line-height:1; transition:background .12s, color .12s; } .langpill .lang-opt[lang="pa"]{font-family:var(--font-pa);font-size:1rem;padding:9px 12px} .langpill .lang-opt:hover{color:var(--txt)} .langpill .lang-opt.on{background:var(--acc);color:#04150c;font-weight:800} /* On the dispatch view (desktop), keep the pill from overlapping the map controls. */ @media(min-width:861px){ .langpill{left:auto;right:16px;transform:none} } /* ====== DISPATCH ====== */ .dispatch-grid{display:grid;grid-template-columns:1fr clamp(420px, 32vw, 560px);height:calc(100vh - 58px)} #map{width:100%;height:100%;background:#0f1411} .sidepanel{border-left:1px solid var(--line);overflow-y:auto;background:var(--bg)} .sidepanel .ph{padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5} .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{text-align:left;color:var(--faint);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--line);position:sticky;top:51px;background:var(--bg)} .tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} /* Route is the 3rd column — clamp long "city → city" to one line with an ellipsis. */ .tbl td:nth-child(3){max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tbl tr:hover td{background:var(--card)} .refresh-ind{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)} .refresh-ind .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)} .refresh-ind.live .dot{background:var(--acc);animation:pulse 1.8s infinite} .refresh-ind.err .dot{background:var(--bad)} .driver-pin{background:var(--acc);width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #04150c;box-shadow:0 0 0 4px rgba(46,230,135,.25)} .leaflet-popup-content-wrapper{background:var(--card2);color:var(--txt);border-radius:10px;border:1px solid var(--line2)} .leaflet-popup-tip{background:var(--card2)} .leaflet-popup-content{margin:10px 12px;font-family:var(--font);font-size:13px} .leaflet-container{background:#0f1411;font-family:var(--font)} .pop-name{font-weight:700;color:var(--acc)} .medialink{color:var(--info)} /* clickable load rows open the document drawer */ .tbl tr.load-row{cursor:pointer} .tbl tr.load-row:hover td{background:var(--card)} /* ====== DOCUMENT DRAWER ====== */ .drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;animation:tin .15s ease} .doc-drawer{ position:fixed;top:0;right:0;height:100vh;width:min(560px,100vw);z-index:91; background:var(--bg);border-left:1px solid var(--line2);box-shadow:var(--shadow); display:flex;flex-direction:column;animation:slidein .18s ease; } @keyframes slidein{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}} .dd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2} .dd-title h2{font-size:1.4rem} .dd-actions{padding:14px 16px;border-bottom:1px solid var(--line)} .dd-actions .btn{width:auto} .dd-body{padding:16px;overflow-y:auto;flex:1} /* doc type groups */ .dd-group{margin-bottom:22px} .dd-group:last-child{margin-bottom:4px} .dd-group h3{display:flex;align-items:center;gap:8px;color:var(--acc);font-size:1.05rem;font-weight:800; text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px} .dd-group h3 .cnt{color:var(--faint);font-weight:700;font-size:.9rem;letter-spacing:0;text-transform:none} .dd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .dd-doc{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;cursor:pointer; transition:border-color .15s, transform .05s} .dd-doc:hover{border-color:var(--acc)} .dd-doc:active{transform:scale(.99)} .dd-doc img{display:block;width:100%;height:130px;object-fit:cover;background:#0f1411} .dd-doc .cap{padding:8px 10px;font-size:.85rem;color:var(--muted);line-height:1.4} /* empty / error inside the drawer */ .dd-empty{text-align:center;color:var(--faint);padding:48px 20px;font-size:1.05rem} /* ====== FULL-SIZE IMAGE OVERLAY ====== */ .img-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92); display:flex;align-items:center;justify-content:center;padding:32px;animation:tin .15s ease} .img-overlay img{max-width:100%;max-height:100%;border-radius:var(--r2);box-shadow:var(--shadow)} .io-close{position:absolute;top:16px;right:20px;width:48px;height:48px;border-radius:50%; background:var(--card2);color:var(--txt);border:1px solid var(--line2);font-size:28px;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit} .io-close:hover{border-color:var(--acc);color:var(--acc)} /* ====== VIEW SWITCHER (Loads vs Activity) ====== */ .viewtabs{display:inline-flex;gap:4px;padding:4px;background:var(--card2); border:1px solid var(--line2);border-radius:999px} .viewtabs .vtab{appearance:none;border:none;cursor:pointer;font-family:inherit; background:transparent;color:var(--muted);font-size:.95rem;font-weight:700; letter-spacing:.02em;padding:9px 18px;min-height:40px;border-radius:999px;line-height:1; transition:background .12s, color .12s} .viewtabs .vtab:hover{color:var(--txt)} .viewtabs .vtab.on{background:var(--acc);color:#04150c;font-weight:800} /* ====== ACTIVITY VIEW ====== */ .activity-view{max-width:1100px;margin:0 auto;padding:20px 18px 60px} .activity-head{padding:6px 2px 18px} .activity-head h2{font-size:1.6rem} .activity-feed{display:flex;flex-direction:column;gap:12px} /* big, comfortable feed rows — pill + headline + relative time */ .act-row{display:flex;align-items:center;gap:18px; background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:18px 20px;min-height:76px;transition:border-color .15s} .act-row:hover{border-color:var(--line2)} .act-main{flex:1;min-width:0} .act-head{font-size:1.3rem;font-weight:800;color:var(--txt); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .act-sub{font-size:1rem;color:var(--muted);font-weight:600;margin-top:3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .act-time{flex:0 0 auto;color:var(--faint);font-size:.95rem;font-weight:700; white-space:nowrap;text-align:right} /* color-coded TAG PILLS — bold, high-contrast, triple-coded (color + word) */ .act-pill{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; font-size:.95rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; padding:9px 16px;border-radius:999px;border:2px solid transparent; min-width:128px;text-align:center;white-space:nowrap;line-height:1} .act-pill.t-new{background:rgba(179,195,184,.16);color:#cdd8d1;border-color:rgba(179,195,184,.45)} .act-pill.t-delivered{background:rgba(46,230,135,.18);color:#5bf3a7;border-color:rgba(46,230,135,.55)} .act-pill.t-missing{background:rgba(230,85,62,.20);color:#ff8a73;border-color:rgba(230,85,62,.65)} .act-pill.t-pod{background:rgba(46,230,135,.18);color:#5bf3a7;border-color:rgba(46,230,135,.55)} .act-pill.t-invoice{background:rgba(230,193,46,.18);color:#f4d863;border-color:rgba(230,193,46,.6)} .act-pill.t-signed{background:rgba(45,212,191,.18);color:#5fe7d4;border-color:rgba(45,212,191,.6)} .act-pill.t-photo{background:rgba(148,163,184,.18);color:#c2cdda;border-color:rgba(148,163,184,.5)} .act-pill.t-received{background:rgba(78,168,230,.18);color:#7cc2f2;border-color:rgba(78,168,230,.6)} .act-pill.t-driver{background:rgba(167,108,233,.20);color:#c79bf2;border-color:rgba(167,108,233,.6)} .activity-empty{text-align:center;color:var(--faint);padding:64px 20px;font-size:1.2rem;font-weight:600} @media(max-width:860px){ .dispatch-grid{grid-template-columns:1fr;height:auto} #map{height:55vh} .sidepanel{border-left:none;border-top:1px solid var(--line);max-height:none} .tbl th{position:static} .doc-drawer{width:100vw} /* Activity collapses cleanly on phones: pill on its own line, then headline + time. */ .activity-view{padding:16px 14px 48px} .act-row{flex-wrap:wrap;gap:10px 14px;padding:16px} .act-pill{min-width:0;order:1} .act-time{order:2;margin-left:auto} .act-main{order:3;flex-basis:100%} .act-head{white-space:normal} }