:root {
    /* --btr-color-1: #e5152b; */
    --btr-color-1: #6fb7a9;
    --btr-color-2: #90ab26;
    --btr-color-3: #989c7e;

    --chart-width: 250px;
    --chart-height: 250px;
    --chart-inner-width: 160px;
    --chart-inner-height: 160px;
}

/*
 * ================= PIE ====================
 */
.sx_chartpie {
    width: var(--chart-width);
}
.sx_chartpie .pie-chart {
    position: relative;
    width: var(--chart-width);
    height: var(--chart-height);
    margin: 1rem .5rem .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sx_chartpie .pie-name-bg {
    background-color: white;
    border-radius: 50%;
    width: var(--chart-inner-width);
    height: var(--chart-inner-height);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sx_chartpie .pie-name {
    font-size: 100%;
    padding: 16px;
    line-height: 150%;
}

.sx_chartpie .chart-texts {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}
.chart-texts .chart-text-row {
    display: flex;
    margin: 4px 5px;
}
.chart-text-row div {
    margin: 0 2px;
    font-size: 80%;
    line-height: 14px;
}
.chart-text-row .data-color {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    display: inline-block;
    margin-right: 6px;
}
.chart-text-row .data-text {}
.chart-text-row .data-num {
    white-space: nowrap;
}
.chart-text-row .data-percent {}

/* =========== RESPONSIVE ================= */
@media only screen and (max-width: 768px) {
}