.highcharts_label {
    font-weight: bold;
    font-size: 14px;
    
}

.highcharts_label2 {
    font-weight: bold;
    font-size: 12px;
    
}

.highcharts_label3 {
    font-weight: bold;
    font-size: 11px;
    
}

.highcharts .highcharts-title {
    fill: var(--bg-color);
    
    letter-spacing: 0.1em;
    text-align: center;
}

.highcharts_label,
.highcharts_label2,
.highcharts_label3 {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}
rect.highcharts-button-box {
    color:var(--bg-color);
    fill: var(--bg-color);
}
.highcharts-selection-marker {
    fill: var(--bg-color)!important;
    stroke:orange!important;
    opacity: 0.4!important;
  }
rect.highcharts-background {
    fill: var(--bg-color)!important;
}

.highcharts text {
    font-size: .8rem!important;
    fill: var(--font-color)!important;
}

.highcharts {
    width: 100%;
    height: 220px;
}

.highcharts-root {
    font-family: 'Open Sans', sans-serif!important;
}

.axis_style {
    fill: var(--font-color)!important;
    stroke: none;
}

.highcharts-series rect {
    stroke-width: 0.3;
    stroke: var(--font-color)!important;
}

.chart_table td,
.chart_table th {
    text-align: center;
    padding: 5px 5px!important;
}

.chart_table th {
    font-weight: 100;
    /* text-decoration: underline; */
    font-size: 0.8rem;
    padding: 5px 5px!important;
    
    border-radius: unset!important;
    background-color: var(--bg-color-softer);
}

.chart_table .percent {
    display: block;
    text-align: left;
    font-size: 0.7rem;
    /* float: right; */
    color: gold;
}

.chart_table tbody tr {
    border:1px solid #4d4a4a2b!important;
}

.bucket_color {
    width: 15px;
    height: 15px;
    border: 1px solid grey;
    position: relative;
    /* top: 8px; */
}
table
{
overflow-x: scroll;
display: block;
font-size: .8rem;
}