:root{

    --radius :20px;

    --colorBg: #D3D3D3;
    --colorEnabled:#4e6b4a;
    --colorAPI: #787878;
    --colorChecked: green;

    --veryLow: #43A047;
    --low: #C0CA33;
    --medium: #FFB300;
    --high: #F4511E;
    --veryHigh: #E53935;
}

.round{
    border-radius: var(--radius);
}

.map{
    width: 55%;
    margin: auto;
}

.map path{
    fill: var(--colorBg)
}

.map a .enabled{
    fill: var(--colorEnabled)    
}

.map a .api{
    fill: var(--colorAPI);
}

.map :hover{
    fill: var(--colorChecked) !important;
    transition: all 0.4s;
}

.legend-enabled{
    background-color: var(--colorEnabled);
    color: white;
}
.legend-api{
    background-color:var(--colorAPI);
    color: white;
}
.legend-disabled{
    background-color: var(--colorBg);
}

/* Color codes for air quality indices: */
.veryLow{
    background-color: var(--veryLow);
}
.low{
    background-color: var(--low);
}
.medium{
    background-color: var(--medium);
}
.high{
    background-color: var(--high);
}
.veryHigh{
    background-color: var(--veryHigh);
}

.table-striped tr:hover{
    background-color:  rgba(91, 175, 76, 0.15) !important;
}

/* set data tables fixed height (20% of screen height) */
.data-table tr
{
 display: block; 
}

.data-table th, td{
    width: 300px;
}

.data-table tbody{
    display: block; height: 25vh; overflow: auto;
}

/* Animations */ 
@keyframes example {
    0%   {transform: scale(0.9,0.9);}
    50% { transform: scale(1.2,1.2); background-color: rgb(144, 255, 41); }
    90% { transform: scale(0.95,0.95);}
    100% {transform: scale(1,1);}
  }

.animation-veryLow{
    background-color: var(--veryLow);
    animation-name: example;
    animation-duration: 1.25s;
}

.animation-low{
    background-color: var(--low);
    animation-name: example;
    animation-duration: 1.25s;
}

.animation-medium{
    background-color: var(--medium);
    animation-name: example;
    animation-duration: 1.25s;
}

.animation-high{
    background-color: var(--high);
    animation-name: example;
    animation-duration: 1.25s;
}
.animation-veryHigh{
    background-color: var(--veryHigh);
    animation-name: example;
    animation-duration: 1.25s;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.05); }

@media only screen and (max-device-width: 768px) {

    #svgMap{
        transform: scale(2); 
    }
}

.customLink {
    color: #9A9DA0;
}