.monthly-cost-chart{margin-top:16px}
.monthly-cost-chart .card-header{display:flex;justify-content:space-between;align-items:center}
.monthly-cost-chart .card-header span{font-size:12px;color:var(--text-secondary)}
.monthly-cost-bars{padding:18px 20px;display:grid;gap:14px}
.monthly-cost-bar{display:grid;grid-template-columns:minmax(110px,170px) minmax(100px,1fr) 120px 55px;align-items:center;gap:12px;font-size:13px}
.monthly-cost-bar b{text-align:right;white-space:nowrap}
.monthly-cost-bar em{text-align:right;font-style:normal;color:var(--text-secondary);font-weight:600}
.monthly-cost-track{height:11px;background:#e8edf5;border-radius:99px;overflow:hidden}
.monthly-cost-track i{display:block;height:100%;border-radius:99px}
.monthly-cost-empty{margin:4px 0;color:var(--text-secondary)}
.monthly-cost-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.monthly-cost-heading h3{margin:0}
.monthly-cost-heading label{display:flex;align-items:center;gap:8px;font-size:13px}
.monthly-cost-heading input{padding:7px;border:1px solid var(--border);border-radius:7px}
#finCostDescription{color:var(--text-secondary);font-size:12px}
.monthly-cost-total{display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:18px;margin:16px 0}
@media(max-width:700px){.monthly-cost-bar{grid-template-columns:1fr 75px;gap:5px 10px}.monthly-cost-track{grid-column:1}.monthly-cost-bar em{grid-column:2;grid-row:2}.monthly-cost-bar b{grid-column:2;grid-row:1}.monthly-cost-heading{align-items:flex-start;flex-direction:column}}