/* HeroX HQ 5.1 — Operating cost module (opcost.js, opcost-res.js). The customer document has its own styles (opcost-doc.js). */
.oc-tabs a{white-space:nowrap}
.oc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;margin-top:16px;align-items:start}
.oc-main{min-width:0}
.oc-side{position:sticky;top:70px}
.oc-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.oc-bh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.oc-bh b{font-size:14px}
.oc-bh span{font-size:12px;color:var(--ink3)}
.oc-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px}
.oc-g .w2{grid-column:1/-1}
.oc-f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink2);min-width:0}
.oc-f.w2{grid-column:span 2}
.oc-f>span{font-weight:500}
.oc-f small{font-size:11px;color:var(--ink3);line-height:1.35}
.oc-i{display:flex;align-items:center;gap:6px}
.oc-i .in{flex:1}
.oc-i em{font-style:normal;color:var(--ink3);font-size:11.5px;white-space:nowrap}
.oc-c{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);grid-column:span 2}
.oc-months{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12.5px;grid-column:1/-1}
.oc-months label{display:flex;gap:4px;align-items:center}
.oc-start{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.oc-start .in{width:auto;max-width:300px}
.oc-src{font-size:11.5px;color:var(--ink2);margin-top:2px}
.oc-sum{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.oc-big{font-size:30px;font-weight:700;color:#D7282F;font-variant-numeric:tabular-nums;margin:2px 0}
.oc-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:12px 0 8px;background:var(--surface2)}
.oc-bar i{display:block;height:100%}
.oc-li{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0}
.oc-li i{width:9px;height:9px;border-radius:2px;background:var(--border);flex:none}
.oc-li b{margin-left:auto;font-variant-numeric:tabular-nums}
.oc-kp{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.oc-kp span{display:block;font-size:11px;color:var(--ink3)}
.oc-kp b{font-size:14px;font-variant-numeric:tabular-nums}
.oc-wn{margin-top:10px;font-size:12px;color:var(--bad);font-weight:600}
.oc-w{font-size:12.5px;padding:7px 10px;border-radius:7px;margin:4px 0;border-left:3px solid var(--border);background:var(--surface2)}
.oc-w.red{border-left-color:var(--bad);background:var(--bad-soft)}
.oc-w.amber{border-left-color:var(--warn);background:var(--warn-soft)}
.oc-w.info{border-left-color:var(--info);background:var(--info-soft)}
.oc-mt td,.oc-mt th{font-size:12px;padding:5px 8px;text-align:right;white-space:nowrap}
.oc-mt td:first-child,.oc-mt th:first-child{text-align:left;white-space:normal}
.oc-kv td{font-size:12.5px;padding:5px 8px;vertical-align:top}
.oc-kv td:first-child{color:var(--ink2);width:34%}
.oc-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.oc-good{color:var(--ok)}
.oc-bad{color:var(--bad)}
.oc-pl td{font-size:12px}
@media (max-width:1000px){.oc-wrap{grid-template-columns:1fr}.oc-side{position:static;order:-1}.oc-2{grid-template-columns:1fr}.oc-f.w2,.oc-c{grid-column:1/-1}}