/* ############################################################################## */

/* Leaflet Map Styles Here */

/* Tertiary CSS, specific to this application
/* To have any effect, they must be loaded *AFTER* the Leaflet.css *AND* Map.css */

/* Map */

.climate-averages-map {
    background-color: #9fc7e0;
}

/* DivIcon Labels */

.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
    -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.mapIconCluster {
    background-color: rgba(4, 78, 101, 0.7);
    background-clip: padding-box;
    border-radius: 20px;
}

.mapIconCluster div {
    background-color: #044E65;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    font-size: 14px;
}

.mapIconCluster span {
    line-height: 18px;
}

.mapIconCluster img {
    width: 17px;
}

/* Zoom Control Styling */

.leaflet-bar,
.leaflet-touch .leaflet-bar {
    top: 8px;
    right: 8px;
    border: none;
    box-shadow: none;
}

.leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:first-child {
    background-color: #2a2a2a;
    padding: 5px;
    color: #fff;
}

.leaflet-bar a:last-child,
.leaflet-touch .leaflet-bar a:last-child {
    background-color: #2a2a2a;
    padding: 5px;
    color: #fff;
    margin-top: 16px;
}

.leaflet-bar a:first-child:hover,
.leaflet-bar a:last-child:hover,
.leaflet-touch .leaflet-bar a:first-child:hover,
.leaflet-touch .leaflet-bar a:last-child:hover {
    background-color: #676869 !important;
    border-color: #676869 !important;
    color: #fff !important;
}

.leaflet-bar a:first-child:active,
.leaflet-bar a:last-child:active,
.leaflet-touch .leaflet-bar a:first-child:active,
.leaflet-touch .leaflet-bar a:last-child:active {
    background-color: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #b9dc0c !important;
}

.leaflet-bar a:first-child.leaflet-disabled,
.leaflet-bar a:last-child.leaflet-disabled,
.leaflet-touch .leaflet-bar a:first-child.leaflet-disabled,
.leaflet-touch .leaflet-bar a:last-child.leaflet-disabled {
    background-color: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #969696 !important;
}

/* Watermark Control Styling */

.leaflet-control-watermark {
    top: 8px;
    left: 8px;
}

/* ********************************** */
/* Media queries */

/* Tablet/Laptop and larger */
@media only screen and (min-width: 720px) {

    .leaflet-bar,
    .leaflet-touch .leaflet-bar {
        top: 16px;
        right: 16px;
    }

    .leaflet-control-watermark {
        top: 16px;
        left: 16px;
    }

}