.error-msg {
    position:         absolute;
    width:            100%;
    height:           100%;
    background-color: #ffffff;
}

/* Leaflet Map */
/***************/
#map-container {
    position:       relative;
    width:          100%;
    padding-bottom: 50%;
    margin:         1em auto;
}

@media (max-width: 991px) {
    #map-container {
        aspect-ratio: 1;
    }
}

#map-canvas {
    position: absolute;
    width:    100%;
    height:   100%;
}

#mapTitle {
    font-size: 20px;
    margin-right: 85px;
}

#mapDate {
    font-size:   18px;
    padding:     0;
    line-height: 1em;
}
/***************/
/* Leaflet Map */

/* Legend */
/**********/
/*
.leaflet-bottom.leaflet-right {
    width:     20%;
    min-width: 135px;
}
*/
.legend.leaflet-control {
    width: 100%;
}

#legend:not(.rank-legend) {
    margin-bottom: -10px;
}

#legend-colorbar {
    margin: 0 auto;
    height: 16px;
    border: solid 1px #000;
}

#legend-colorbar.pcp.anomaly {
    background-image: linear-gradient(90deg, #9e763b, #fff, rgb(21, 115, 108));
}
#legend-colorbar.pcp.mean,
#legend-colorbar.pcp.value {
    background-image: linear-gradient(90deg, #fff, rgb(21, 115, 108));
}

#legend-colorbar.tavg.anomaly {
    background-image: linear-gradient(90deg, #00f, #fff, #f00);
}

#legend-labels {
    margin:          0 auto;
    display:         flex;
    justify-content: space-between;
}

@media (min-width: 1200px) {
    #legend-colorbar {
        width:  calc(222px - 1em);
    }
    #legend-labels {
        width: 222px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #legend-colorbar {
        width:  calc(186px - 1em);
    }
    #legend-labels {
        width: 186px;
    }
}

@media (max-width: 991px) {
    #legend-colorbar {
        width:  calc(222px - 1em);
    }
    #legend-labels {
        width: 222px;
    }
}

@media (max-width: 575px) {
    #download strong { display: none; }

    #reset-zoom { display: none; }

    .legend { margin-right: 5px !important; }
}
/**********/
/* Legend */

/* Logo */
/********/
.leaflet-bottom.leaflet-left {
    width:        7%;
    aspect-ratio: 1;
    max-width:    77px;
    max-height:   77px;
    min-width:    55px;
    min-height:   55px;
}

#logo > * {
    vertical-align: bottom;
}

#logo img {
    width:        100%;
    height:       100%;
    aspect-ratio: 1;
    max-width:    67px;
    max-height:   67px;
    min-width:    45px;
    min-height:   45px;
}
/********/
/* Logo */

/* Popups */
/**********/
.leaflet-tooltip.mapTooltip {
    border-radius: 8px;
    font-size:     16px;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
}

.leaflet-tooltip-right.mapTooltip {
    margin-left: 15px;
}

.leaflet-tooltip-left.mapTooltip {
    margin-left: -13px;
}
/**********/
/* Popups */