.bar-chart-theme-default {
    --hwbc-font-family: 'Segoe UI', sans-serif;
    --hwbc-color-surface-500: transparent;
    --hwbc-color-border-600: blue;
    --hwbc-border-thickness: 0px;
    --hwbc-color-text-400: #ccc;
    --hwbc-color-text-800: #bbb;
    --hwbc-color-text-600: #333;
    --hwbc-color-bar-500: #4682b4;
    --hwbc-color-bar-600: #45a1ec;
    --hwbc-color-bar-650: #1e90ff;
    --hwbc-color-bar-999: #ffffff;
}

svg {
    font-family: var(--hwbc-font-family);
    background-color: var(--hwbc-color-surface-500);
    border: var(--hwbc-border-thickness) solid var(--hwbc-color-border-600);
}

    svg.chart-busy {
        opacity: 0.75;
    }

.bar,
.bar-no-hover {
    fill: var(--hwbc-color-bar-500);
    transition: fill 0.2s ease;
}

.selected {
    fill: var(--hwbc-color-bar-650);
    /* transition: fill 0.2s ease; */
}

.bar {
    cursor: pointer;
}

.bar:hover,
.bar-hover {
    fill: var(--hwbc-color-bar-600);
}


.grid {
    stroke: var(--hwbc-color-text-400);
    stroke-width: 1;
}

.y-label,
.x-label {
    font-size: 12px;
    fill: var(--hwbc-color-text-600);
}

.x-label-masked {
    font-size: 12px;
    fill: var(--hwbc-color-text-800);
}

.x-label-special {
    font-size: 12px;
    /* fill: white; */
    font-weight: bold;
}

.x-label {
    text-anchor: middle;
}

.x-label-box {
    fill: transparent;
}
.x-label-box.selected {
    /* fill: rgba(190, 190, 190, 0.349); */
    fill: transparent;
}

.x-label-line {
    fill: transparent;
}
.x-label-line.selected {
    stroke: var(--hwbc-color-bar-650);
    stroke-width: 3;
}



.x-label-box-special {
    /* fill: rgba(90, 90, 90, 0.349);; */
}

.x-label-box-special.selected {
    /* opacity: 0.5; */
    /* fill:rgba(0, 90, 90, 0.349); */
}

.y-label {
    text-anchor: end;
}