/* LoanFlow - credit card real outstanding (card's own balance + loans that sit on the card). Separate file; only used by the Banks page. */
.cl-wrap{margin:0 0 22px}
.cl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px}
.cl-head h2{font-size:18px}
.cl-head small{color:#7c8798;font-size:12.5px}
.cl-card{background:#fff;border:1px solid #e8ebf0;border-radius:16px;padding:16px 18px;box-shadow:0 4px 18px rgba(20,32,58,.06);margin-bottom:12px}
.cl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cl-name{font-weight:800;font-size:15px}
.cl-name small{display:block;font-weight:500;color:#7c8798;font-size:12px;margin-top:2px}
.cl-total{text-align:right}
.cl-total span{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#7c8798}
.cl-total strong{font-size:24px;letter-spacing:-.4px;color:#d9453d}
.cl-bar{height:9px;border-radius:6px;background:#eef1f5;overflow:hidden;margin:12px 0 6px}
.cl-bar i{display:block;height:100%;background:#248fe3;border-radius:6px}
.cl-bar.warn i{background:#e0a21a}
.cl-bar.hot i{background:#d9453d}
.cl-use{display:flex;justify-content:space-between;gap:10px;font-size:13px;flex-wrap:wrap}
.cl-use b.ok{color:#2f9e44}.cl-use b.hot{color:#d9453d}.cl-use b.warn{color:#b7791f}
.cl-rows{margin-top:12px;border:1px solid #eef1f5;border-radius:12px;overflow:hidden}
.cl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid #eef1f5;font-size:13.5px}
.cl-row:first-child{border-top:0}
.cl-row span small{display:block;color:#7c8798;font-size:11.5px}
.cl-row b{white-space:nowrap}
.cl-x{border:0;background:transparent;color:#8a95a6;font-size:18px;line-height:1;padding:2px 8px;border-radius:8px}
.cl-x:hover{background:#fdecea;color:#d9453d}
.cl-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.cl-add select{flex:1;min-width:180px;border:1px solid #dfe5ed;border-radius:10px;padding:9px 10px;min-height:40px;background:#fff}
.cl-note{font-size:12px;color:#7c8798;margin-top:8px;line-height:1.45}
.cl-err{background:#fdecea;border:1px solid #f3c3be;color:#8a241e;border-radius:10px;padding:8px 10px;margin-top:8px;font-size:13px}
.cl-due{margin-top:12px;border-top:1px dashed #e1e6ee;padding-top:12px}
.cl-duel{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px}
.cl-duel b.hot{color:#d9453d}.cl-duel b.ok{color:#2f9e44}
.cl-duel small{color:#7c8798}
.cl-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cl-form{display:grid;gap:10px;margin-top:12px;background:#f6f9fd;border:1px solid #e3ebf5;border-radius:12px;padding:12px}
.cl-form label{display:grid;gap:4px;font-size:12px;font-weight:700;color:#3c4a5f}
.cl-form input,.cl-form select{border:1px solid #d6dde8;border-radius:10px;padding:9px 10px;min-height:42px;background:#fff;font-weight:400;font-size:15px}
@media(max-width:700px){.cl-total{text-align:left}.cl-total strong{font-size:21px}}