/*
Leaflet 1.0.3, a JS library for interactive maps. http://leafletjs.com
(c) 2010-2016 Vladimir Agafonkin, (c) 2010-2011 CloudMade
This is leaflet.css appended with marker-clusterer CSS.
Version 2.02 - 14-May-2019 - initial nws-alerts.css with Leaflet/OpenStreetMaps replacing Google maps
*/

/* General styles for Leaflet maps and components */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}

.leaflet-container {
    overflow: hidden;
    background: #ddd; /* Default background */
    outline: 0;
}

.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
    max-width: none !important;
}

.leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 20px;
}

.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-popup-content {
    margin: 13px 19px;
    line-height: 1.4;
    font-family: Arial, sans-serif;
}

/* Forecast display customization */
.forecast-display {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: yellow; /* Yellow background */
    padding: 20px; /* Padding around content */
    border-radius: 10px; /* Rounded corners */
    margin: 20px auto; /* Center horizontally and add spacing */
    max-width: 800px; /* Limit width for better readability */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
}

.forecast-text {
    font-size: 1.2em; /* Adjusted font size */
    color: #333; /* Dark text color for readability */
}

/* Tooltip customization */
.leaflet-tooltip {
    position: absolute;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #222;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-size: small;
}

/* Zoom controls customization */
.leaflet-control-zoom {
    background-color: white !important;
    color: black !important;
}

.leaflet-control-zoom a:hover {
    text-decoration: none !important;
}

/* Attribution and scale controls */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.7);
    padding: 0 5px;
    color: #333;
}

/* Custom cluster marker colors */
.marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}