:root {
--bal-border: var(--grey-400);
--bal-icon-color: var(--blue-600);
}
.bal { width:100%; border-top: 1px solid var(--bal-border); }
.bal__row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 5px 0 !important; }
.bal--dividers .bal__row { border-bottom: 1px solid var(--bal-border); }
.bal--dividers .bal__row:last-child { border-bottom: 0; }
.bal__left { padding-left:10px; padding-right:10px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; font-weight: var(--bold-weight); }
.bal__right { padding-right:10px; font-weight: var(--bold-weight); text-align: right; }
.bal__value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bal__title {  }
.bal__icon {
display:inline-grid;
place-items:center;
width:20px;
height:20px;
font-size:20px;
line-height:1;
color: currentColor;
background-color: transparent;
border-radius: 0;
}
.bal__icon i {
display:inline-block;
font-size:1em;
line-height:1;
}
.bal__icon .bal__svg { width:100%; height:100%; display:block; }
.bal__icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.bal__icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; } .bal__icon-img { display:block; width:100%; height:100%; object-fit:contain; }
@media (max-width: 640px) { .bal__row { padding: 10px 0; } } .bal__total { margin-top: 28px; }
.bal__total--divider { padding-top: 10px; }