/* ==========================================================================
   AptCare ISTN V13 — Role-Based Prototype
   Stylesheet (sesuai spesifikasi + 2 utilitas tambahan di bagian akhir)
   ========================================================================== */

:root{
  --bg:#f6f8fb;--card:#fff;--ink:#152238;--muted:#68758a;--line:#e3e8ef;
  --brand:#0d705e;--brand2:#0c5676;--soft:#ebf8f4;--blue:#2457c5;--purple:#6d44c6;
  --warn:#a76500;--danger:#b42318;--shadow:0 10px 28px rgba(15,35,55,.08)
}

*{box-sizing:border-box}

body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}

button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

.sidebar{background:#0b2d36;color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}

.brand{display:flex;gap:10px;align-items:center;margin:4px 4px 18px}
.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#2bc7a7,#8ce1cc);display:grid;place-items:center;color:#06382f;font-weight:900}
.brand h1{font-size:18px;margin:0}
.brand small{opacity:.72}

.rolebox{background:#143d47;border-radius:13px;padding:12px;margin-bottom:14px}
.rolebox b{display:block;margin-bottom:4px}
.rolebox button{width:100%;margin-top:8px;border:1px solid #2d5a63;background:transparent;color:#dbe7e9;border-radius:9px;padding:8px}

.nav .group{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7fa2aa;margin:16px 10px 6px}
.nav button{width:100%;text-align:left;border:0;background:transparent;color:#dce8ea;padding:11px 12px;border-radius:10px;margin:2px 0}
.nav button:hover,.nav button.active{background:#17444d;color:#fff}

.main{padding:24px;max-width:1450px;width:100%;margin:auto}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:800}
.green{background:#e9f7f3;color:#08735d}
.blue{background:#edf3ff;color:#2457c5}
.purple{background:#f1edff;color:#6540bd}
.orange{background:#fff4e5;color:#995c00}
.red{background:#ffeded;color:#a71912}

/* ---------- Sections ---------- */
.section{display:none}
.section.active{display:block}

.hero{background:linear-gradient(135deg,#0d705e,#0c5676);color:#fff;border-radius:22px;padding:26px;display:grid;grid-template-columns:1.25fr .75fr;gap:18px;box-shadow:var(--shadow)}
.hero h2{font-size:32px;margin:7px 0 10px;line-height:1.08}
.hero p{color:#dcefea;line-height:1.55}
.hero-side{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px}
.hero-side b{font-size:28px;display:block}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p{color:var(--muted);line-height:1.5}
.module{grid-column:span 4;min-height:150px}
.kpi{grid-column:span 3}
.kpi b{font-size:27px;display:block}
.kpi small{color:var(--muted)}

.primary,.secondary,.ghost{border-radius:10px;padding:9px 12px;font-weight:800}
.primary{border:0;background:var(--brand);color:#fff}
.secondary{border:0;background:#eef2f6;color:#344256}
.ghost{border:1px solid var(--line);background:#fff}

.section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.section-title h2{margin:0;font-size:28px}
.section-title p{margin:4px 0;color:var(--muted)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{background:#f8fafc}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.full{grid-column:1/-1}
.field label{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff}
.field textarea{min-height:90px;resize:vertical}

.callout{border-left:4px solid var(--brand);background:#f0faf7;border-radius:8px;padding:12px 14px;margin:12px 0}
.callout.warn{border-color:#d18b00;background:#fff8eb}
.callout.danger{border-color:#c63930;background:#fff1f0}

/* ---------- Role gate ---------- */
.role-gate{position:fixed;inset:0;z-index:999;background:linear-gradient(135deg,#0a2f38,#0a6170);display:grid;place-items:center;padding:18px}
.gate-card{background:#fff;border-radius:24px;max-width:1050px;width:100%;padding:26px;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.gate-card h1{margin:0 0 6px}
.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:18px}
.role-card{border:1px solid var(--line);border-radius:17px;padding:16px;background:#fff;transition:.2s}
.role-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#9bd9ca}
.role-card .icon{font-size:30px}
.role-card h3{margin:8px 0 6px}
.role-card p{font-size:13px;color:var(--muted);min-height:74px;line-height:1.45}
.role-card button{width:100%}
.role-note{margin-top:13px;font-size:12px;color:var(--muted)}

/* ---------- Lists / flow ---------- */
.list{display:grid;gap:10px}
.list-item{border:1px solid var(--line);border-radius:13px;padding:13px;background:#fff}
.list-item .meta{font-size:12px;color:var(--muted);margin-top:5px}
.flow{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.node{background:#edf8f5;border:1px solid #cdebe2;border-radius:10px;padding:8px 10px;font-weight:800}
.arrow{color:var(--brand);font-weight:900}
.footer{text-align:center;color:var(--muted);font-size:12px;margin:24px 0 4px}

/* ---------- Responsive shell ---------- */
@media(max-width:1050px){
  .app{grid-template-columns:1fr}
  .sidebar{height:auto;position:relative}
  .nav{display:flex;overflow:auto}
  .nav .group{display:none}
  .nav button{width:auto;white-space:nowrap}
  .role-grid{grid-template-columns:repeat(2,1fr)}
  .module{grid-column:span 6}
  .kpi{grid-column:span 6}
  .hero{grid-template-columns:1fr}
}
@media(max-width:650px){
  .main{padding:14px}
  .role-grid{grid-template-columns:1fr}
  .module,.kpi{grid-column:span 12}
  .form-grid{grid-template-columns:1fr}
  .hero h2{font-size:27px}
  .gate-card{padding:18px}
}

/* ---------- Language switch / FAB ---------- */
.lang-switch{display:flex;gap:5px;background:#fff;border:1px solid var(--line);padding:4px;border-radius:12px;box-shadow:var(--shadow)}
.lang-switch button{border:0;background:transparent;padding:7px 10px;border-radius:8px;font-weight:800;color:var(--muted)}
.lang-switch button.active{background:var(--soft);color:var(--brand)}

.fab{position:fixed;right:24px;bottom:24px;z-index:80;border:0;border-radius:999px;background:var(--brand);color:#fff;padding:13px 17px;font-weight:900;box-shadow:0 10px 30px rgba(13,112,94,.28)}

/* ---------- Content studio ---------- */
.studio-grid{display:grid;grid-template-columns:380px 1fr;gap:14px}
.studio-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.item-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.lang-pill{font-size:11px;font-weight:800;padding:4px 7px;border-radius:999px;background:#f0f4f7;color:#4c5a6c}
.empty{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}
@media(max-width:900px){.studio-grid{grid-template-columns:1fr}.fab{right:14px;bottom:14px}}

/* ---------- Drug catalogue & monograph ---------- */
.drug-searchbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.drug-searchbar input,.drug-searchbar select{border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:#fff}
.drug-searchbar input{min-width:280px;flex:1}
.drug-catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.drug-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:15px;box-shadow:var(--shadow)}
.drug-card h3{margin:6px 0}
.drug-card p{color:var(--muted);line-height:1.45}
.drug-card .tags{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}

.monograph{display:none}
.monograph.active{display:block}
.monograph-head{background:linear-gradient(135deg,#0d705e,#0c5676);color:#fff;border-radius:20px;padding:22px;margin-bottom:14px}
.monograph-head h2{margin:4px 0 6px}
.monograph-head p{color:#dcefea}
.mono-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.mono-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-weight:800;color:var(--muted)}
.mono-tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.mono-pane{display:none}
.mono-pane.active{display:block}
.mono-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mono-box{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px}
.mono-box h4{margin:0 0 7px}
.mono-box p{margin:0;color:var(--muted);line-height:1.48}
.safety-box{border:1px solid #efb7b2;background:#fff1f0;border-radius:14px;padding:14px}
.pearl{border-left:4px solid var(--purple);background:#f6f1ff;border-radius:8px;padding:12px 14px}
.refbox{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fbfcfe;margin:8px 0}
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.interaction-result{margin-top:12px;border-radius:13px;padding:13px;border:1px solid var(--line)}
.sev-low{background:#eefaf6;border-color:#cae9df}
.sev-moderate{background:#fff8e8;border-color:#f0d49d}
.sev-high{background:#fff0ef;border-color:#efb6b0}
.calc-box{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.calc-box input,.calc-box select{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px}
.admin-mono-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:1000px){.drug-catalog{grid-template-columns:repeat(2,1fr)}.compare-grid{grid-template-columns:1fr}.calc-box{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.drug-catalog,.mono-grid,.admin-mono-grid{grid-template-columns:1fr}.calc-box{grid-template-columns:1fr}.drug-searchbar input{min-width:100%}}

/* ---------- Dose / pharmacology ---------- */
.rx-header{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.dose-table{width:100%;border-collapse:collapse;min-width:760px}
.dose-table th,.dose-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.dose-table th{background:#f8fafc;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pk-cell{border:1px solid var(--line);border-radius:12px;padding:11px;background:#fbfcfe}
.pk-cell b{display:block;margin-bottom:4px}
.admin-dose-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pharm-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.pharm-step{border:1px solid var(--line);border-radius:12px;padding:11px;background:#fff;min-height:86px}
.pharm-step strong{display:block;margin-bottom:4px}
@media(max-width:1000px){.pk-grid{grid-template-columns:repeat(2,1fr)}.pharm-rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.pk-grid,.admin-dose-grid,.pharm-rail{grid-template-columns:1fr}}

/* ---------- Pharmacist passport ---------- */
.passport-hero{background:linear-gradient(135deg,#0b3f4b,#0f7967);color:#fff;border-radius:20px;padding:22px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.avatar-xl{width:84px;height:84px;border-radius:50%;background:#dff4ee;color:#0b705d;display:grid;place-items:center;font-size:26px;font-weight:900;border:4px solid rgba(255,255,255,.55)}
.passport-hero h2{margin:0 0 4px}
.passport-hero p{margin:4px 0;color:#d9eeea}
.passport-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.passport-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-weight:800;color:var(--muted)}
.passport-tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.passport-pane{display:none}
.passport-pane.active{display:block}
.timeline2{position:relative;margin-left:12px;padding-left:22px;border-left:3px solid #d5e8e3}
.timeline2 .entry{position:relative;margin:0 0 18px}
.timeline2 .entry:before{content:"";position:absolute;left:-31px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 0 0 1px #b9d8d0}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.profile-chip{border:1px solid var(--line);border-radius:13px;background:#fff;padding:12px}
.profile-chip b{display:block;margin-bottom:4px}
.directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.pharmacist-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:var(--shadow)}
.pharmacist-card .top{display:flex;gap:10px;align-items:center}
.pharmacist-card .avatar{width:50px;height:50px;border-radius:50%;background:#e3f5f0;display:grid;place-items:center;color:#0d705e;font-weight:900}
.pharmacist-card h3{margin:0 0 3px}
.pharmacist-card p{color:var(--muted);font-size:13px;line-height:1.45}
.verify-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.public-mask{font-family:monospace;letter-spacing:.08em}
.map-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.map-tile{border:1px solid var(--line);border-radius:13px;padding:13px;background:#fbfcfe}
.map-tile b{font-size:22px;display:block}
.tracer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tracer-grid .tile{border:1px solid var(--line);border-radius:13px;background:#fff;padding:13px}
.profile-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.profile-form-grid .full{grid-column:1/-1}
@media(max-width:1000px){.directory-grid,.profile-grid{grid-template-columns:repeat(2,1fr)}.map-demo,.tracer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.passport-hero{grid-template-columns:1fr;text-align:center}.avatar-xl{margin:auto}.directory-grid,.profile-grid,.verify-panel,.profile-form-grid,.map-demo,.tracer-grid{grid-template-columns:1fr}}

/* ---------- Patient queue ---------- */
.queue-form{margin-bottom:14px}
.queue-actions{display:flex;gap:6px;flex-wrap:wrap}
.queue-status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800}
.q-waiting{background:#fff4e5;color:#995c00}
.q-progress{background:#edf3ff;color:#2457c5}
.q-done{background:#e9f7f3;color:#08735d}
.q-referral{background:#ffeded;color:#a71912}
.queue-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.queue-summary .tile{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px}
.queue-summary b{font-size:22px;display:block}
@media(max-width:700px){.queue-summary{grid-template-columns:repeat(2,1fr)}}

/* ---------- Flagship / public care ---------- */
.flagship-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.flagship-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);min-height:190px;position:relative;overflow:hidden}
.flagship-card .bigicon{font-size:32px}
.flagship-card h3{margin:8px 0 6px}
.flagship-card p{font-size:13px;color:var(--muted);line-height:1.5}
.flagship-card:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:var(--soft);right:-25px;top:-30px;opacity:.7}

.med-passport-card{background:linear-gradient(135deg,#0d705e,#0c5676);color:#fff;border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.med-passport-card p{color:#dcefea}
.med-passport-card .statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.med-passport-card .stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px}
.med-passport-card .stat b{font-size:21px;display:block}
.med-table{width:100%;border-collapse:collapse}
.med-table th,.med-table td{padding:9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.med-table th{background:#f8fafc}

.guard-score{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.guard-ring{width:112px;height:112px;border-radius:50%;background:conic-gradient(#0d705e 0 72%,#e7edf0 72% 100%);display:grid;place-items:center}
.guard-ring-inner{width:82px;height:82px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center}
.guard-ring-inner b{font-size:24px}
.guard-result{border-radius:14px;padding:13px;margin:8px 0;border:1px solid var(--line)}
.guard-info{background:#eef6ff;border-color:#c9dcff}
.guard-warn{background:#fff8e8;border-color:#f0d49d}
.guard-danger{background:#fff0ef;border-color:#efb6b0}

.pharmacist-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pharm-pick-card{border:1px solid var(--line);border-radius:15px;padding:14px;background:#fff}
.pharm-pick-card.selected{border:2px solid var(--brand);background:#f1fbf8}

.journey-shell{display:grid;grid-template-columns:320px 1fr;gap:14px}
.journey-list{display:grid;gap:8px}
.journey-med{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fff;cursor:pointer}
.journey-med.active{border-color:var(--brand);background:#f0faf7}
.journey-line{border-left:3px solid #d5e8e3;margin-left:14px;padding-left:20px}
.journey-event{position:relative;margin-bottom:18px}
.journey-event:before{content:"";position:absolute;left:-28px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 0 0 1px #b9d8d0}

.clinic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.clinic-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:15px;box-shadow:var(--shadow)}
.clinic-card h3{margin:8px 0}
.clinic-card p{font-size:13px;color:var(--muted);line-height:1.5}
.share-card{border:1px dashed #9ebcb5;border-radius:16px;background:#f4fbf9;padding:14px}
.mini-qr{display:grid;grid-template-columns:repeat(9,8px);grid-template-rows:repeat(9,8px);gap:1px;width:max-content;padding:7px;background:#fff;border:1px solid var(--line);border-radius:8px}
.mini-qr span{width:8px;height:8px;background:#dfe6e5}
.mini-qr span.on{background:#0b2d36}
.continuity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:1100px){.flagship-grid{grid-template-columns:repeat(2,1fr)}.clinic-grid{grid-template-columns:repeat(2,1fr)}.pharmacist-pick,.continuity-grid{grid-template-columns:repeat(2,1fr)}.journey-shell{grid-template-columns:1fr}}
@media(max-width:650px){.flagship-grid,.clinic-grid,.pharmacist-pick,.continuity-grid,.med-passport-card .statrow{grid-template-columns:1fr}}

/* ==========================================================================
   Utilitas tambahan (dipakai renderMyPharmacistCurrent di app.js — tidak ada
   di stylesheet spesifikasi)
   ========================================================================== */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* ==========================================================================
   Kelas utilitas pengganti atribut style inline.
   Semua deklarasi memakai !important supaya bobotnya setara dengan atribut
   style inline yang digantikan (tanpa !important, selector seperti
   `.hero-side b` akan menang dan mengubah tampilan).
   PENGECUALIAN: .is-hidden sengaja TANPA !important agar app.js tetap dapat
   menampilkan/menyembunyikan elemen lewat classList.toggle("is-hidden").
   ========================================================================== */
.is-hidden{display:none}
.self-end{align-self:end !important}
.badge-dark{background:#17444d !important;color:#dce8ea !important}
.badge-ghost{background:rgba(255,255,255,.16) !important;color:#fff !important}
.badge-ghost-13{background:rgba(255,255,255,.13) !important;color:#fff !important}
.side-tagline{color:#a9c6cc !important;font-size:12px !important;line-height:1.5 !important;margin:0 4px 12px !important}
.txt-muted{color:var(--muted) !important}
.d-block{display:block !important}
.statrow-2{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;margin-top:12px !important}
.fs-22{font-size:22px !important}
.fs-27{font-size:27px !important}
.fs-30{font-size:30px !important}
.span-6{grid-column:span 6 !important}
.mg-0{margin:0 !important}
.mg-2{margin:2px !important}
.mg-3{margin:3px !important}
.mg-b6{margin:0 0 6px !important}
.mg-b8{margin:0 0 8px !important}
.mg-b10{margin:0 0 10px !important}
.mg-b12{margin:0 0 12px !important}
.mg-t6{margin:6px 0 0 !important}
.mg-t6-b2{margin:6px 0 2px !important}
.mg-t7-b4{margin:7px 0 4px !important}
.mg-t8{margin:8px 0 0 !important}
.mg-t8-b4{margin:8px 0 4px !important}
.mg-t16-b8{margin:16px 0 8px !important}
.mg-t18-b8{margin:18px 0 8px !important}
.mg-t20-b10{margin:20px 0 10px !important}
.mgb-4{margin-bottom:4px !important}
.mgb-8{margin-bottom:8px !important}
.mgb-10{margin-bottom:10px !important}
.mgb-14{margin-bottom:14px !important}
.mgt-6{margin-top:6px !important}
.mgt-10{margin-top:10px !important}
.mgt-12{margin-top:12px !important}
.mgt-14{margin-top:14px !important}
.mgt-16{margin-top:16px !important}
.mgt-24{margin-top:24px !important}
.mgt-26{margin-top:26px !important}
.op-80{opacity:.8 !important}
.op-85{opacity:.85 !important}
.scroll-x{overflow:auto !important}