body {
	margin: 0;
	padding: 0;
	 padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	 }

html, body {
    background-color: #000; /* Example: Black background */
}

	#map { width: 100%; height: 100vh; }
	#windy { width: 100%; height: 100%; position:absolute;}

        #windy #logo {
        transform: scale(1, 1);
        text-align: center;
        text-decoration: none;
        margin-top: 1em;
        /* display: none; */
        opacity: 0.0;
        }
        
        #windy #mobile-ovr-select {
    display: none;
}
    
    #embed-zoom{
    position: absolute;
    top: 50% !important; /* Position at the middle vertically */
    right: 10px; /* Slightly offset from the right edge */
    transform: translateY(-50%) !important; /* Center the buttons exactly */
    z-index: 1000; /* Ensure it stays above other elements */
}


#windy #embed-zoom .zoom-ctrl {
    font-size: 21px;
    line-height: 1.6;
    width: 35px;
    height: 35px;
    border-radius: 0px;
    background-color: rgba(68,65,65,0.84);
    margin-bottom: 4px;
    text-align: center;
    align-self: flex-end;
}

#windy .play-pause {
    display: block;
    font-size: 25px;
    color: #9d0300;
    width: 1.2em;
    height: 1.2em;
    border-radius: 0em;
    box-shadow: 0 0 0 0 black;
    background-color: #e5e5e5;
}

#windy .timecode {
    font-size: 14px;

}


#windy .timecode .box {
    background-color: #e2e2e2 !important;
    color: #000 !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 0 black !important;
}

#windy .timecode .box::before {
    top: 100%;
    left: 2em;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    border-top-color: #e2e2e2 !important;
}


#windy .timecode .box {
    cursor: -webkit-grab;
    cursor: grab;
    position: relative;
    background-color: #d49500;
    color: white;
    height: 1.8em;
    box-sizing: border-box;
    padding: 0 .8em;
    white-space: nowrap;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    border-radius: .5em;
    box-shadow: 0 0 4px 0 black;
}

/* test 
#windy #map-container .leaflet-marker-pane .labels-layer, #windy #map-container .leaflet-tile-pane .basemap-layer {
    display: none;
}

*/

.weatherDescription::first-letter {
text-transform: uppercase !important;
color:red;
}

 @media (max-width: 768px) {
    .time-slider {
        display: block !important;
    }



#windy #bottom #progress-bar {
    display: block;
    background: none;
    margin-bottom: 0px !important;
}

   #embed-zoom{
  display: none;
  }

}