/* Cards */
.card {
    background-color: var(--color-bg-pallete-200);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,.08);
}

/*kpi*/
.card .kpi {
    font-size: var(--font-size-xxxxlarge); 
    font-weight:700; 
    line-height:1.1;
}

.card .label {
    font-size: var(--font-size-large); 
    font-weight:400; 
    line-height:1.1;
}

.card .sub-label {
    font-size: var(--font-size-small); 
    color: var(--color-secondary-text);
    font-weight:400; 
    line-height:1.1;
}

/*chart*/
.card .chartbar svg{
    width:100%; 
    height:140px; 
    display:block;
}

.card .chartbar .bar{
    fill:var(--color-bg-primary-100);
}

.card .chartbar .axis { 
    stroke: var(--color-secondary-text);
    stroke-width:0.6; 
}

.card .chartbar .labels { 
    display:flex; 
    justify-content:space-between;
    align-items:center;
    text-align:center;
    gap:0; 
    margin-top:0px;
    color:var(--color-secondary-text); 
    font-size:var(--font-size-small); 
}

.card .chartbar .legend { 
    display:flex; 
    flex-wrap:wrap; 
    gap:6px; 
    margin-top:8px; 
}
.card .chartbar .badge { 
    background-color: var(--color-bg-pallete-300);
    border:1px solid var(--color-bg-pallete-200);
    border-radius:999px; 
    padding:2px 8px; 
    font-size:var(--font-size-small); 
    color:var(--color-primary-text); 
}


/*table*/
.card .table {
    overflow-x:auto; 
}

.card .table table {
     width:100%; 
     border-collapse:collapse; 
     margin-top:12px;
}

.card .table th {
    font-weight:600;
    text-align:left;
    padding:8px;
}

.card .table th:last-child{
    text-align:right;
}

.card .table td{
    padding:8px;
    border-bottom:1px solid var(--color-secondary-text);
    text-align:left;
    font-size:var(--font-size-medium);
}

.card .table td:last-child{
    text-align:right;
}