/* ==========================================================================
   Defaulters tracker — one stylesheet for every page.
   Design tokens first: colour, radius and shadow live here and nowhere else,
   so the dashboard, the classification desk and the action register look like
   one application. Light and dark are the same tokens with different values.
   ========================================================================== */
:root{
  --bg:#eef2f7; --bg2:#e6ecf4; --panel:#fff; --panel2:#f7fafd; --panel3:#eff4fa;
  --ink:#0d1b2a; --ink2:#3d5068; --mut:#7488a0;
  --line:#e3eaf2; --line2:#cddae8;
  --brand:#0b5ea8; --brand2:#0891b2; --brandDk:#083f72; --brandBg:#e9f1fb;

  /* the recovery palette — used by every card, chart and badge */
  --coll:#0f7b4f;  --collBg:#e6f5ee;      /* collectable      */
  --unco:#b45309;  --uncoBg:#fdf3e3;      /* uncollectable    */
  --uncl:#64748b;  --unclBg:#eef2f6;      /* unclassified     */
  --cur:#2563eb;   --curBg:#e8effd;       /* current dues     */
  --arr:#b91c1c;   --arrBg:#fdecec;       /* arrear dues      */
  --paid:#0f7b4f;  --paidBg:#e6f5ee;      /* dues came down   */
  --rais:#b91c1c;  --raisBg:#fdecec;      /* dues went up     */
  --newd:#7c3aed;  --newdBg:#f1eafe;      /* new defaulter    */
  --same:#94a3b8;  --sameBg:#f1f5f9;

  --ok:#0f7b4f; --okBg:#e6f5ee; --warn:#b45309; --warnBg:#fdf3e3;
  --bad:#b91c1c; --badBg:#fdecec; --info:#0b5ea8; --infoBg:#e9f1fb;

  --r:14px; --r2:10px; --r3:8px;
  --sh:0 1px 2px rgba(13,27,42,.05), 0 10px 30px -18px rgba(13,27,42,.35);
  --shUp:0 2px 8px rgba(13,27,42,.08), 0 20px 44px -20px rgba(13,27,42,.42);
  --mono:"Cascadia Mono","Consolas",ui-monospace,monospace;
}
[data-theme="dark"]{
  --bg:#0b1220; --bg2:#0e1727; --panel:#131d2f; --panel2:#182437; --panel3:#1d2b41;
  --ink:#e8eefb; --ink2:#b3c2d8; --mut:#8296b1;
  --line:#22314a; --line2:#2c3d5a;
  --brand:#4b9cf0; --brand2:#22c3dd; --brandDk:#0b5ea8; --brandBg:#15263c;
  --coll:#43c58c; --collBg:#12312a; --unco:#e0a952; --uncoBg:#332714;
  --uncl:#94a3b8; --unclBg:#1c2740;
  --cur:#6fa4fb; --curBg:#16233d; --arr:#f2777a; --arrBg:#331a1e;
  --paid:#43c58c; --paidBg:#12312a; --rais:#f2777a; --raisBg:#331a1e;
  --newd:#b18cf6; --newdBg:#241c3d; --same:#7d8ea6; --sameBg:#1b2536;
  --ok:#43c58c; --okBg:#12312a; --warn:#e0a952; --warnBg:#332714;
  --bad:#f2777a; --badBg:#331a1e; --info:#6fa4fb; --infoBg:#16233d;
  --sh:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.8);
  --shUp:0 2px 10px rgba(0,0,0,.45), 0 26px 50px -22px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-size:14px;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700}
a{color:var(--brand);text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
.wrap{max-width:1780px;margin:0 auto;padding:0 18px 40px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

/* ---------------- app bar ---------------- */
.appbar{position:sticky;top:0;z-index:40;color:#fff;
  background:linear-gradient(115deg,#083f72 0%,#0b5ea8 46%,#0891b2 100%);
  box-shadow:0 2px 20px rgba(8,40,80,.3)}
.appbar .in{max-width:1780px;margin:0 auto;padding:9px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand .logo{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:17px}
.brand small{display:block;font-weight:500;font-size:11px;opacity:.82;letter-spacing:.3px}
.tabs{display:flex;gap:2px;margin-left:6px;flex-wrap:wrap}
.tabs a{color:#e8f2fb;padding:7px 13px;border-radius:9px;font-weight:600;font-size:13px;
  border:1px solid transparent;white-space:nowrap}
.tabs a:hover{background:rgba(255,255,255,.12)}
.tabs a.on{background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.28);color:#fff}
.abright{margin-left:auto;display:flex;gap:8px;align-items:center}
.abright select{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;
  border-radius:9px;padding:6px 9px;font-size:13px;font-weight:600;max-width:260px}
.abright select option{color:#0d1b2a;background:#fff}
.iconbtn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;
  border-radius:9px;padding:6px 10px;cursor:pointer;font-size:13px;font-weight:600}
.iconbtn:hover{background:rgba(255,255,255,.25)}

/* ---------------- page head ---------------- */
.phead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:20px 0 14px}
.phead h1{font-size:21px;letter-spacing:-.2px}
.phead .sub{color:var(--mut);font-size:13px;margin-top:3px}
.phead .right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------------- section heading + jump strip ----------------
   The dashboard and the report are read as numbered sections (classification,
   collection, action, range-wise, top defaulters), so a heading carries a rule
   under it and the strip of pills jumps between them. */
.shead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:26px 0 12px;padding-bottom:7px;border-bottom:2px solid var(--line2);scroll-margin-top:70px}
.shead h2{font-size:16.5px;letter-spacing:-.2px}
.shead .s{color:var(--mut);font-size:12.5px}
.shead .right{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.jump{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0 4px}
.jump a{padding:5px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);
  font-size:12.5px;font-weight:600;color:var(--ink2)}
.jump a:hover{border-color:var(--brand);color:var(--brand)}

/* ---------------- generic surfaces ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card .hd{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card .hd h3{font-size:14px}
.card .hd .s{color:var(--mut);font-size:12px;font-weight:500}
.card .hd .right{margin-left:auto;display:flex;gap:6px;align-items:center}
.card .bd{padding:14px 16px}
.grid{display:grid;gap:14px}
.sect{margin-top:16px}

/* ---------------- KPI cards ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  box-shadow:var(--sh);position:relative;overflow:hidden;cursor:pointer;transition:.15s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shUp)}
.kpi.static{cursor:default}.kpi.static:hover{transform:none;box-shadow:var(--sh)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--k,var(--brand))}
.kpi.on{border-color:var(--k,var(--brand));box-shadow:0 0 0 2px color-mix(in srgb,var(--k,var(--brand)) 22%,transparent),var(--sh)}
.kpi .lab{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut)}
.kpi .val{font-size:24px;font-weight:800;letter-spacing:-.6px;margin-top:4px;line-height:1.1}
.kpi .val small{font-size:13px;font-weight:700;color:var(--mut);letter-spacing:0}
.kpi .sub{font-size:12px;color:var(--ink2);margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi .bar{height:5px;border-radius:3px;background:var(--line);margin-top:9px;overflow:hidden}
.kpi .bar i{display:block;height:100%;background:var(--k,var(--brand));border-radius:3px}

/* ---------------- badges, pills, chips ---------------- */
.b{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.b.coll{background:var(--collBg);color:var(--coll)} .b.unco{background:var(--uncoBg);color:var(--unco)}
.b.uncl{background:var(--unclBg);color:var(--uncl)} .b.cur{background:var(--curBg);color:var(--cur)}
.b.arr{background:var(--arrBg);color:var(--arr)}   .b.paid{background:var(--paidBg);color:var(--paid)}
.b.rais{background:var(--raisBg);color:var(--rais)} .b.newd{background:var(--newdBg);color:var(--newd)}
.b.same{background:var(--sameBg);color:var(--same)} .b.info{background:var(--infoBg);color:var(--info)}
.b.warn{background:var(--warnBg);color:var(--warn)} .b.ok{background:var(--okBg);color:var(--ok)}
.b.bad{background:var(--badBg);color:var(--bad)}
.dot{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}

/* ---------------- controls ---------------- */
.btn{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:var(--r3);
  padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center;
  transition:.12s;white-space:nowrap}
.btn:hover{background:var(--panel3);border-color:var(--brand)}
.btn.p{background:linear-gradient(120deg,var(--brandDk),var(--brand2));border-color:transparent;color:#fff}
.btn.p:hover{filter:brightness(1.08)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.dgr{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.fld{display:flex;flex-direction:column;gap:4px}
.fld label{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mut)}
input[type=text],input[type=search],input[type=date],input[type=number],select,textarea{
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r3);padding:7px 10px;font-size:13px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:12px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.filters .grow{flex:1 1 220px;min-width:180px}
.filters input,.filters select{width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 11px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);
  font-size:12.5px;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.seg{display:inline-flex;background:var(--panel3);border:1px solid var(--line);border-radius:var(--r3);padding:2px}
.seg button{background:transparent;border:0;padding:5px 11px;border-radius:6px;font-size:12.5px;
  font-weight:600;cursor:pointer;color:var(--ink2)}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}

/* ---------------- tables ---------------- */
.tblwrap{overflow:auto;max-height:74vh;border-radius:0 0 var(--r) var(--r)}
table.list{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.list th{position:sticky;top:0;z-index:2;background:var(--panel2);text-align:left;
  padding:9px 10px;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink2);
  border-bottom:1px solid var(--line2);white-space:nowrap;cursor:pointer;user-select:none}
table.list th.n,table.list td.n{text-align:right}
table.list th:hover{color:var(--brand)}
table.list th.sorted::after{content:" ▾";color:var(--brand)}
table.list th.sorted.asc::after{content:" ▴"}
table.list td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tbody tr:hover{background:var(--panel3)}
table.list tbody tr.sel{background:var(--brandBg)}
table.list td.wrapcell{white-space:normal;min-width:180px;max-width:340px}
table.list .nm{font-weight:600}
table.list .sm{color:var(--mut);font-size:11.5px}
.empty{padding:36px;text-align:center;color:var(--mut)}
.tfoot{padding:9px 14px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;
  color:var(--mut);font-size:12.5px;flex-wrap:wrap}
.tfoot .right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ---------------- charts ---------------- */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:inherit}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ink2)}
.legend span{display:inline-flex;gap:6px;align-items:center}
.barrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:5px 0;cursor:pointer}
.barrow:hover .bl{color:var(--brand)}
.barrow .bl{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow .bv{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.barrow .track{grid-column:1/-1;height:7px;border-radius:4px;background:var(--panel3);overflow:hidden;margin-top:-2px}
.barrow .track i{display:block;height:100%;border-radius:4px;background:var(--brand)}

/* ---------------- modal / drawer ---------------- */
.modal{position:fixed;inset:0;background:rgba(6,17,32,.55);backdrop-filter:blur(2px);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;overflow:auto}
.modal .box{background:var(--panel);border-radius:var(--r);box-shadow:var(--shUp);width:100%;max-width:1080px;
  border:1px solid var(--line);overflow:hidden}
.modal .box.sm{max-width:560px}
.modal .hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start}
.modal .hd h3{font-size:16px}
.modal .hd .s{color:var(--mut);font-size:12.5px;margin-top:2px}
.modal .hd .x{margin-left:auto;background:transparent;border:0;font-size:22px;color:var(--mut);cursor:pointer;line-height:1}
.modal .bd{padding:16px 18px;max-height:70vh;overflow:auto}
.modal .ft{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;
  background:var(--panel2);flex-wrap:wrap}
.modal .ft .left{margin-right:auto}

/* ---------------- toast / busy ---------------- */
#toasts{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;gap:9px;max-width:400px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r2);box-shadow:var(--shUp);padding:11px 13px;animation:tin .2s ease}
.toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)} .toast.warn{border-left-color:var(--warn)}
.toast b{display:block;font-size:13px} .toast p{margin:3px 0 0;font-size:12.5px;color:var(--ink2)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
#busy{position:fixed;inset:0;background:rgba(6,17,32,.35);z-index:90;display:none;place-items:center}
#busy.on{display:grid}
#busy .b{background:var(--panel);border-radius:var(--r);padding:18px 24px;box-shadow:var(--shUp);
  display:flex;gap:12px;align-items:center;font-weight:600}
.spin{width:20px;height:20px;border:3px solid var(--line2);border-top-color:var(--brand);border-radius:50%;
  animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------- popover menu ---------------- */
#popHost .popback{position:fixed;inset:0;z-index:70}
#popHost .pop{position:fixed;z-index:71;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--r2);box-shadow:var(--shUp);overflow:hidden;max-height:70vh;display:flex;flex-direction:column}
#popHost .pophd{padding:9px 12px;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--mut);border-bottom:1px solid var(--line);background:var(--panel2)}
#popHost .popbd{overflow:auto;padding:4px}
#popHost hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.popitem{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;
  background:transparent;border:0;text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px}
.popitem:hover{background:var(--brandBg);color:var(--brand)}
.popitem.danger:hover{background:var(--badBg);color:var(--bad)}
.popitem i{display:block;font-style:normal;font-size:11.5px;color:var(--mut);margin-top:1px}
.popitem kbd{font-family:var(--mono);font-size:10.5px;background:var(--panel3);border:1px solid var(--line2);
  border-radius:5px;padding:1px 5px;color:var(--mut)}

/* ---------------- command palette ---------------- */
.palList{max-height:52vh;overflow:auto;padding:6px}
.palrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;
  border-radius:8px;cursor:pointer}
.palrow.on,.palrow:hover{background:var(--brandBg)}
.palrow i{display:block;font-style:normal;font-size:11.5px;color:var(--mut);margin-top:1px}

/* ---------------- sticky selection bar ---------------- */
.selbar{position:sticky;bottom:0;z-index:30;margin-top:10px;background:var(--panel);
  border:1px solid var(--brand);border-radius:var(--r);box-shadow:var(--shUp);
  padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.selbar .n{font-weight:800;color:var(--brand)}
.selbar .right{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}

/* ---------------- quick set (inline row control) ---------------- */
.qs{display:inline-flex;gap:3px}
.qs button{border:1px solid var(--line2);background:var(--panel);border-radius:7px;padding:3px 8px;
  font-size:12px;font-weight:700;cursor:pointer;line-height:1.5}
.qs button.c:hover{background:var(--collBg);color:var(--coll);border-color:var(--coll)}
.qs button.u:hover{background:var(--uncoBg);color:var(--unco);border-color:var(--unco)}
.qs button.a:hover{background:var(--newdBg);color:var(--newd);border-color:var(--newd)}
.qs button.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------------- focus (triage) mode ---------------- */
.focus{max-width:840px}
.focus .big{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.15}
.focus .meta{color:var(--mut);font-size:13px;margin-top:4px}
.focus .duesbox{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);
  padding:14px 16px;margin:12px 0}
.focus .keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px;margin-top:6px}
.focus .keyrow{display:flex;gap:8px;align-items:center;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;font-size:13px;background:var(--panel)}
.focus .keyrow:hover{border-color:var(--brand);background:var(--brandBg)}
.focus .keyrow kbd{font-family:var(--mono);font-size:11px;background:var(--panel3);border:1px solid var(--line2);
  border-radius:5px;padding:2px 7px;font-weight:700;flex:none}
.focus .prog{height:6px;border-radius:3px;background:var(--panel3);overflow:hidden;margin-top:10px}
.focus .prog i{display:block;height:100%;background:var(--brand)}

/* a card that folds away — used for panels that are reference, not entry */
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::after{content:"▾";margin-left:6px;color:var(--mut);transition:.15s}
details.card[open] > summary::after{transform:rotate(180deg);display:inline-block}
details.card > summary{border-bottom:1px solid transparent}
details.card[open] > summary{border-bottom-color:var(--line)}

/* ---------------- matrix / heatmap ---------------- */
table.matrix{width:100%;border-collapse:collapse;font-size:12.5px}
table.matrix th{padding:7px 9px;text-align:right;font-size:11px;letter-spacing:.3px;text-transform:uppercase;
  color:var(--mut);font-weight:700;white-space:nowrap}
table.matrix th.l{text-align:left}
table.matrix td{padding:0;border:1px solid var(--panel)}
table.matrix td .cell{padding:8px 9px;text-align:right;font-variant-numeric:tabular-nums;cursor:pointer;
  border-radius:6px;transition:.12s}
table.matrix td .cell:hover{outline:2px solid var(--brand);outline-offset:-2px}
table.matrix td .cell small{display:block;font-size:10.5px;opacity:.75;font-weight:600}
table.matrix tr th.l{text-align:left;font-weight:700;color:var(--ink2)}

/* ---------------- misc ---------------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px}
.kv dt{color:var(--mut);font-size:12px} .kv dd{margin:0;font-weight:600}
.note{background:var(--infoBg);border:1px solid color-mix(in srgb,var(--info) 25%,transparent);
  color:var(--ink2);border-radius:var(--r2);padding:10px 13px;font-size:12.5px}
.drop{border:2px dashed var(--line2);border-radius:var(--r);padding:26px;text-align:center;
  background:var(--panel2);transition:.15s;cursor:pointer}
.drop.hot{border-color:var(--brand);background:var(--brandBg)}
.drop .big{font-size:30px}
.timeline{position:relative;padding-left:20px}
.timeline::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:var(--line2)}
.tl{position:relative;padding:0 0 14px 4px}
.tl::before{content:"";position:absolute;left:-19px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--panel);border:2px solid var(--brand)}
.tl.up::before{border-color:var(--rais)} .tl.dn::before{border-color:var(--paid)}
.tl .t{font-size:12px;color:var(--mut)}
@media print{
  .appbar,.filters,.no-print,#toasts,.jump{display:none!important}
  .shead{break-inside:avoid;page-break-inside:avoid}
  body{background:#fff} .card{box-shadow:none;border-color:#ccc}
  .tblwrap{max-height:none;overflow:visible}
}
@media(max-width:760px){
  .kpi .val{font-size:20px}
  .phead h1{font-size:18px}
}
