/* NES Safety App — styles (mobile-first, high-contrast). Brand: red & black. */ :root{ --black:#15171a; --black-2:#26292e; --ink:#1a1c1f; --brand:#C5161D; --brand-bright:#ED1B24; --brand-deep:#9C0A0D; --bg:#f4f5f6; --card:#ffffff; --muted:#6b7178; --line:#e4e6e9; --danger:#cf1f24; --warn:#e8a13a; --ok:#2f9e5e; --shadow:0 2px 10px rgba(0,0,0,.10); --radius:16px; --safe-b:env(safe-area-inset-bottom,0px); } /* ---- Dark mode: system default + explicit toggle (data-theme on ) ---- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#141518; --card:#1f2226; --ink:#eceef0; --muted:#9aa0a7; --line:#2c3036; --black:#0e0f11; --black-2:#1a1c1f; --shadow:0 2px 12px rgba(0,0,0,.45); --ok:#3fbb73; --warn:#eab04f; --danger:#ff5b60; } } :root[data-theme="dark"]{ --bg:#141518; --card:#1f2226; --ink:#eceef0; --muted:#9aa0a7; --line:#2c3036; --black:#0e0f11; --black-2:#1a1c1f; --shadow:0 2px 12px rgba(0,0,0,.45); --ok:#3fbb73; --warn:#eab04f; --danger:#ff5b60; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--ink);line-height:1.5;font-size:16px; padding-bottom:calc(70px + var(--safe-b));-webkit-font-smoothing:antialiased} /* Subtle branded backdrop — faint NES-red glow, fixed behind everything. Degrades to nothing if color-mix is unsupported, so it never harms readability. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(120% 80% at 100% -10%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 55%), radial-gradient(120% 80% at -10% 110%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 55%);} :root[data-theme="dark"] body::before{opacity:.7} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{opacity:.7}} h1,h2,h3,h4{margin:0 0 .4em;line-height:1.25} p{margin:0 0 .8em} button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit;font-size:16px} .muted{color:var(--muted)}.tiny{font-size:12px}.center{text-align:center}.pad{padding:14px} /* Layout */ .content{padding:14px 16px 24px;max-width:680px;margin:0 auto} .topbar{position:sticky;top:0;z-index:20;background:var(--black);color:#fff; display:flex;align-items:center;justify-content:space-between; padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px;box-shadow:var(--shadow); border-bottom:3px solid var(--brand)} .tb-left{display:flex;align-items:center;gap:6px;min-width:0} .tb-title{font-weight:700;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iconbtn{color:#fff;font-size:28px;line-height:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center} .iconbtn:active{background:rgba(255,255,255,.15)} .iconbtn:disabled{opacity:.4} /* Splash / hero */ .splash{display:grid;place-items:center;height:80vh;color:var(--muted);text-align:center} .hero{max-width:460px;margin:0 auto;padding:42px 22px;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center} .hero h1{font-size:28px;color:var(--ink);margin-top:14px} .hero-sub{color:var(--brand);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px} .brand-logo{width:148px;height:auto;margin:0 auto;display:block} .brand-logo.sm{width:96px} .hero-logo{width:84px;height:84px;border-radius:22px;background:var(--black); color:var(--brand-bright);display:grid;place-items:center;font-weight:800;font-size:30px;margin:0 auto;box-shadow:var(--shadow);letter-spacing:1px} .iso-badge{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line); color:var(--muted);font-size:11px;font-weight:700;padding:6px 12px;border-radius:20px;margin-top:14px} .iso-badge b{color:var(--brand)} /* Cards & lists */ .card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px} .card h3,.card h4{color:var(--ink)} .card.accent{border-left:5px solid var(--brand)} .list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .listrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:14px; box-shadow:var(--shadow);text-align:left;width:100%;transition:transform .06s} .listrow:active{transform:scale(.99)} .listrow.static{cursor:default}.listrow.disabled{opacity:.5} .lr-icon{font-size:22px;width:30px;text-align:center;flex:none} .lr-main{display:flex;flex-direction:column;min-width:0;flex:1} .lr-title{font-weight:600}.lr-sub{font-size:13px;color:var(--muted)} .chev{color:var(--muted);font-size:22px;flex:none} /* Pills */ .pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;flex:none} .pill.ok{background:#e3f5ea;color:var(--ok)}.pill.bad{background:#fbe2e3;color:var(--danger)} .pill.todo{background:#fdeaeb;color:var(--brand)}.pill.lock{background:#eee;color:#999} .pill.cat{background:var(--black);color:#fff} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700; padding:15px 18px;border-radius:14px;transition:transform .06s,opacity .2s} .btn:active{transform:scale(.98)} .btn.block{display:flex;width:100%;margin:8px 0} .btn.primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)} .btn.primary:active{background:var(--brand-deep)} .btn.primary:disabled{opacity:.4} .btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow);border:1.5px solid var(--line)} .btn.dark{background:var(--black);color:#fff;box-shadow:var(--shadow)} .btn.link{background:none;color:var(--brand);box-shadow:none} /* Forms */ .fld{display:block;margin-bottom:14px} .fld>span{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px} .fld input,.fld select,.fld textarea,.search{width:100%;padding:13px;border:1.5px solid var(--line); border-radius:12px;background:var(--card);color:var(--ink)} .fld input:focus,.fld select:focus,.fld textarea:focus,.search:focus{outline:none;border-color:var(--brand)} .fld-check{display:flex;align-items:center;gap:10px;margin-bottom:14px} .fld-check input{width:22px;height:22px;accent-color:var(--brand)} .search{margin-bottom:14px} /* Declaration list */ .decl{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px} .decl:last-child{border-bottom:none} .decl input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--brand)} /* Reading content */ .reading{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px} .reading p{margin:0 0 .8em} .blk-h{color:var(--brand);font-size:17px;margin:16px 0 6px} .blk-h:first-child{margin-top:0} .ul{margin:0 0 12px;padding-left:20px}.ul li{margin-bottom:6px} .callout{background:#ffe6c9;border:1px solid #dd9a3a;border-left:5px solid var(--warn);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px;color:var(--ink)} .callout.warn{background:#f9c9cb;border-color:#cf3a3e;border-left-color:var(--danger)} .sop .sop-h{color:var(--ink);font-size:16px;margin:14px 0 4px;font-weight:700} .sop p{font-size:15px} .doc-meta{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap} /* Controlled-document header (ISO) */ .docctrl{background:#fafafa;border:1px solid var(--line);border-left:4px solid var(--brand); border-radius:10px;padding:11px 13px;margin-bottom:14px;font-size:12.5px;color:var(--muted)} .docctrl table{width:100%;border-collapse:collapse} .docctrl td{padding:2px 0;vertical-align:top} .docctrl td:first-child{color:var(--muted);width:42%} .docctrl td:last-child{color:var(--ink);font-weight:600} .docctrl .note{margin-top:7px;font-style:italic} /* Home dashboard */ .scorecard{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,var(--black) 35%,var(--brand-deep)); color:#fff;border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)} .ring{position:relative;width:104px;height:104px;flex:none} .ring svg{transform:rotate(-90deg);width:100%;height:100%} .ring-bg{fill:none;stroke:rgba(255,255,255,.18);stroke-width:9} .ring-fg{fill:none;stroke:var(--brand-bright);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .6s} .ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ring-num{font-size:30px;font-weight:800;line-height:1}.ring-unit{font-size:12px;opacity:.8} .score-meta{flex:1} .score-month{font-size:13px;opacity:.85;text-transform:uppercase;letter-spacing:.5px} .score-tag{display:inline-block;font-weight:800;font-size:18px;margin:4px 0 6px} .score-tag.good{color:#7be0a0}.score-tag.mid{color:#ffd479}.score-tag.low{color:#ff9b9b} .banner{display:flex;align-items:center;gap:12px;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow);font-size:15px} .banner.warn{background:#ffe1a0;border:1px solid #d99a2b;border-left:5px solid var(--warn);color:#4a3408} .banner.alert{background:#f8c2c4;border:1px solid #cf1f24;border-left:5px solid var(--danger);color:#5a1113} .banner.warn strong,.banner.alert strong{color:inherit} .banner div{flex:1}.banner .chev{font-size:24px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px} .tile{background:var(--card);border-radius:var(--radius);padding:18px 12px;box-shadow:var(--shadow); display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600;text-align:center; border-bottom:3px solid transparent} .tile:active{transform:scale(.98);border-bottom-color:var(--brand)} .tile-icon{font-size:28px} .sec-h{color:var(--brand);font-size:15px;text-transform:uppercase;letter-spacing:.5px;margin:6px 2px 10px;font-weight:800} /* Progress */ .progress{height:9px;background:#e6e8ea;border-radius:6px;overflow:hidden;margin:8px 0 4px} .progress-bar{height:100%;background:var(--brand);transition:width .4s} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .statcard{background:var(--card);border-radius:14px;padding:14px 8px;text-align:center;box-shadow:var(--shadow)} .statcard.good{border-bottom:3px solid var(--brand)} .stat-val{font-size:22px;font-weight:800;color:var(--ink)} .stat-label{font-size:12px;color:var(--muted)} .breakdown .bd-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px} .bd-row>span:first-child{flex:1;min-width:90px} .bd-bar{flex:1.4;height:8px;background:#e6e8ea;border-radius:5px;overflow:hidden} .bd-bar>div{height:100%;background:var(--brand)} .bd-num{font-size:13px;color:var(--muted);width:42px;text-align:right} /* Quiz */ .quiz .qtext{font-size:20px;margin:10px 0 18px;color:var(--ink)} .opts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px} .opt{text-align:left;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:15px;font-weight:500;box-shadow:var(--shadow)} .opt.sel{border-color:var(--brand);background:#fdeef0} .opt:active{transform:scale(.99)} .quiz-actions{display:flex;justify-content:space-between;gap:10px;align-items:center} .quiz-actions .btn{flex:1} .result{text-align:center;padding:24px 16px;border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow)} .result.pass{background:#e9f7ef}.result.fail{background:#fdeeee} .result-badge{font-size:46px} .result-score{font-size:24px;font-weight:800;color:var(--ink);margin:6px 0} .review{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .rev{padding:12px 14px;border-radius:12px;font-size:14px} .rev.ok{background:#eef7f1}.rev.bad{background:#fdf0f0} .rev-q{font-weight:600}.rev-a{margin-top:6px;color:var(--muted)} /* Certificate / record */ .cert{background:var(--card);border:2px solid var(--black);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow);margin-bottom:16px;position:relative} .cert:before{content:"";position:absolute;inset:6px;border:1px solid var(--brand);border-radius:10px;pointer-events:none} .cert h2{color:var(--ink);margin:6px 0} .cert .cert-name{font-size:24px;font-weight:800;color:var(--brand);margin:8px 0} .cert .cert-meta{font-size:13px;color:var(--muted)} .cert .brand-logo{width:90px;margin-bottom:6px} /* Checklist pre-start */ .checkitem{padding:12px 0;border-bottom:1px solid var(--line)} .checkitem:last-child{border-bottom:none} .ci-label{font-weight:500;margin-bottom:8px;font-size:15px} .ci-btns{display:flex;gap:8px} .ci-btn{flex:1;padding:11px;border-radius:10px;font-weight:700;border:2px solid var(--line);background:var(--card);color:var(--muted)} .ci-btn.pass.on{background:var(--ok);color:#fff;border-color:var(--ok)} .ci-btn.fail.on{background:var(--danger);color:#fff;border-color:var(--danger)} .ci-btn.na.on{background:#8893a0;color:#fff;border-color:#8893a0} /* Quiz builder (admin) */ .qbuilder{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px} .opt-row{display:flex;align-items:center;gap:8px;margin-bottom:8px} .opt-row input[type=radio]{width:20px;height:20px;flex:none;accent-color:var(--brand)} .opt-row .q-opt{flex:1} /* Bottom nav */ #nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--card);display:flex; border-top:1px solid var(--line);padding-bottom:var(--safe-b);box-shadow:0 -2px 10px rgba(0,0,0,.06)} .navitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0 7px; color:var(--muted);font-size:11px;font-weight:600} .navitem .ni-icon{font-size:21px} .navitem.active{color:var(--brand)} .navitem.active .ni-icon{transform:translateY(-1px)} /* Toast */ #toast{position:fixed;bottom:calc(80px + var(--safe-b));left:50%;transform:translateX(-50%) translateY(20px); background:var(--black);color:#fff;padding:11px 18px;border-radius:24px;font-size:14px;font-weight:600; opacity:0;pointer-events:none;transition:.25s;z-index:50;box-shadow:var(--shadow)} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* SVG icons */ .ic{vertical-align:middle;display:inline-block} .tile-icon svg{color:var(--brand)} .lr-icon{display:inline-flex;align-items:center;justify-content:center} .lr-icon svg{color:var(--brand)} .navitem svg{display:block;margin:0 auto} .banner .bn-ic{display:inline-flex;color:var(--brand)} .banner.warn .bn-ic{color:var(--warn)} .iso-badge svg{color:var(--brand);vertical-align:middle} .sec-h svg{vertical-align:-2px} /* Role picker (welcome) */ .fld-lbl{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:4px 0 8px} .rolepick{display:flex;flex-direction:column;gap:10px} .rolecard{display:flex;align-items:center;gap:14px;text-align:left;background:var(--card);border:2px solid var(--line); border-radius:14px;padding:14px;box-shadow:var(--shadow);transition:transform .06s,border-color .15s} .rolecard:active{transform:scale(.99)} .rolecard:hover{border-color:var(--brand)} .role-ic{display:inline-flex;color:var(--brand);background:#fdeef0;border-radius:12px;padding:8px;flex:none} .role-text{flex:1;display:flex;flex-direction:column} .role-title{font-weight:700;font-size:16px} .role-sub{font-size:13px;color:var(--muted)} /* Contractor home scorecard */ .scorecard.contractor{align-items:center} .scorecard .sc-ic{display:inline-flex;color:var(--lime,#7be0a0);background:rgba(255,255,255,.12);border-radius:14px;padding:12px;flex:none} .scorecard.contractor .sc-ic svg{color:#fff} /* Name picker (employee onboarding) */ .namegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .namebtn{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border:2px solid var(--line); border-radius:14px;padding:18px 10px;box-shadow:var(--shadow);font-weight:700;font-size:16px} .namebtn svg{color:var(--brand)} .namebtn:active{transform:scale(.98);border-color:var(--brand)} /* Team progress (leaders) */ .teamrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)} .team-score{font-weight:800;font-size:20px;width:46px;text-align:center;flex:none} .team-score.good{color:var(--ok)}.team-score.mid{color:var(--warn)}.team-score.low{color:var(--danger)} .team-name{font-weight:700;flex:1;min-width:0} .team-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px} .tbadge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px} .tbadge.ok{background:#e3f5ea;color:var(--ok)}.tbadge.no{background:#fbe2e3;color:var(--danger)}.tbadge.na{background:#eee;color:#888} /* Worker tasks */ .tentpick{display:flex;gap:10px} .tentbtn{flex:1;padding:16px;border-radius:12px;font-weight:700;font-size:16px;border:2px solid var(--line);background:var(--card);color:var(--ink)} .tentbtn.on{background:var(--brand);color:#fff;border-color:var(--brand)} .tentbtn:active{transform:scale(.98)} .ci-note{width:100%;margin-top:8px;padding:11px;border:1.5px solid var(--line);border-radius:10px} .bigtimer{font-size:40px;font-weight:800;color:#fff;letter-spacing:1px;margin-top:8px;font-variant-numeric:tabular-nums} .scorecard .bigtimer{color:#fff} .card.accent .bigtimer{color:var(--brand)} /* Toolbox */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{background:#fdeef0;color:var(--brand);border:1px solid #f3c4c6;border-radius:20px;padding:7px 12px;font-size:13px;font-weight:600;text-align:left} .chip:active{transform:scale(.97)} .addrow{display:flex;gap:8px;margin-top:8px} .addrow input{flex:1;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)} .addrow input:focus{outline:none;border-color:var(--brand)} .addrow .btn{padding:12px 16px;flex:none} @media(min-width:680px){.grid2{grid-template-columns:repeat(3,1fr)}} /* ── First-use app walkthrough (tour) ── */ .tour-ovl{position:fixed;inset:0;background:rgba(21,23,26,.82);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px} .tour-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);max-width:400px;width:100%;padding:26px 22px 18px;text-align:center;animation:tourin .22s ease} @keyframes tourin{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}} .tour-ic{width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 14px} .tour-ic svg{width:30px;height:30px} .tour-card h3{margin:0 0 8px;font-size:20px} .tour-card p{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.55} .tour-dots{display:flex;gap:6px;justify-content:center;margin-bottom:16px} .tour-dots span{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .15s} .tour-dots span.on{background:var(--brand)} .tour-nav{display:flex;gap:10px} .tour-nav .btn{flex:1;margin:0} .tour-skip{background:none;border:0;color:var(--muted);font-size:13px;margin-top:12px;cursor:pointer;text-decoration:underline} /* ── Team messages (chat) ── */ .chat-wrap{max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0} .chat-b{background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px;max-width:82%;align-self:flex-start;font-size:14.5px;box-shadow:var(--shadow)} .chat-b.mine{background:var(--brand);color:#fff;border:0;border-radius:14px 14px 4px 14px;align-self:flex-end} .chat-from{display:block;font-size:11px;font-weight:700;color:var(--brand);margin-bottom:2px} .chat-b.mine .chat-from{display:none} .chat-at{display:block;font-size:10px;opacity:.6;text-align:right;margin-top:2px} /* ── Chat photos + task composer + system messages ── */ .chat-img{max-width:200px;max-height:200px;border-radius:10px;margin:2px 0;display:block;cursor:pointer;object-fit:cover} .chat-b.mine .chat-img{margin-left:auto} .chat-sys{align-self:center;background:var(--bg);border:1px dashed var(--line);color:var(--muted);font-size:12.5px;padding:6px 12px;border-radius:12px;max-width:90%;text-align:center;margin:2px auto} .chat-input{display:flex;gap:8px;align-items:center;margin-top:10px} .chat-input #msg-in{flex:1} .chat-icon-btn{background:var(--bg);border:1px solid var(--line);border-radius:10px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--brand);cursor:pointer;flex:none} .chat-icon-btn:active{background:var(--line)} /* ── Notification tag on the Home nav item ── */ .navitem{position:relative} .nav-badge{position:absolute;top:4px;left:calc(50% + 4px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--card)} /* ── Docket counting pad ── */ .count-toggle{background:none;border:0;color:var(--brand);font-size:13px;font-weight:600;padding:6px 0;cursor:pointer;display:flex;align-items:center;gap:4px} .count-toggle .ic{vertical-align:middle} .count-pad{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;margin:2px 0 4px} .count-tape{font-size:15px;font-weight:600;min-height:20px;word-break:break-word} .count-pad input{padding:10px} /* ── Auto-update bar ── */ .update-bar{position:fixed;top:0;left:0;right:0;z-index:500;background:var(--brand);color:#fff;text-align:center;padding:10px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)} /* ── Print → PDF (Reports export): show only the content, drop app chrome ── */ @media print { #nav, .topbar, .update-bar, .btn { display: none !important; } body, #app, .screen { background: #fff !important; color: #000 !important; } .card, .card.accent { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; } main, #app { padding: 0 !important; margin: 0 !important; } table { font-size: 11px !important; } @page { margin: 14mm; } }