.bar {
    fill: #aaa;
    /*height: 20.08em;*/
    transition: fill .3s ease;
    cursor: pointer;
    font-family: Helvetica, sans-serif;

    text {
        fill: #555;
    }
}

.chart:hover,
.chart:focus {
    .bar {
        fill: #aaa;
    }
}

.bar:hover,
.bar:focus {
    /*fill: #aaa !important;*/

    text {
        fill: #aaa;
    }
}

figcaption {
    font-weight: bold;
    color: #000;
    margin-bottom: 0.08em;
}
.x-labels text{
    transform: rotate(-60deg);
    text-anchor: end;
}

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

.grid {
    stroke: #ccc;
    stroke-dasharray: 0;
    stroke-width: 0.01em;
}

.labels {
    font-size: 0.08em;
}

.label-title {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.08em;
    fill: black;
}

.data {
    fill: red;
    stroke-width: 0.01em; 
}
.circle {
    /*fill: #ddd;
    stroke: -my-primaryColor;*/
    transition: stroke-dasharray .3s ease;
}
g *:hover,g *:focus {
    fill: #aaa !important;

    text {
        fill: #aaa;
    }
}
.line{
    stroke:#0074d9;
    stroke-width:0.02em;
    stroke-dasharray: 0;
}
.line:hover,
.line:focus {
    fill: #aaa !important;

    text {
        fill: #aaa;
    }
}