.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap:         wrap;
}

.flex-row {
    -webkit-flex-direction: row; /* Safari */
    flex-direction: row;
}

.flex-col {
    -webkit-flex-direction: column; /* Safari */
    flex-direction: column;
}

rect {
    fill: lightslategray ;
    fill-opacity: 0.8;
}

#sub-pollution-country-chart rect {
    fill: steelblue;
}

rect:hover {
    fill-opacity: 1;
}

rect.selected, #sub-pollution-country-chart rect.selected {
    fill: red;
}

.axis {
    font-size: smaller;
}

#main-chart p {
    margin: 5px 10px;
}

.overlay {
    fill: none;
    pointer-events: all;
    margin-left: 120px;
    cursor: pointer;
}

rect, text.mousepointer{
    cursor: pointer;
}

.focus circle {
    fill: none;
    stroke: steelblue;
}

.legendText{
    font-size: 14px;
}

text{
    font-size: 12px;
    fill: black;
}

text.axis-label,text.title-label {
    font-weight: bold;
    font-style: italic;
}

text.axis-label.main {
    font-size: 18px;
}

text.title-label.sub-chart {
    font-size: 16px;
}