.top-window {
	z-index: 1000;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 10px;
	display: flex;
	justify-content: space-between;
	border: 1px solid black; 
	border-radius: 5px;
	width: 97%;
	flex-direction: column;
	align-items: stretch; /* Ensure full width */
	margin-bottom: 10px;
}
.Top-message {
	font-size: 17px;
	font-weight: bold;
	display: none;
	max-width: 100%;
	text-align: center;
	padding: 5px;
}
/* Add a line (separator) between messages */
.Top-message:not(:first-child) {
    border-top: 2px solid black; /* Adjust color and thickness */
    padding-top: 10px; /* Space after the line */
}

#mapbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#map {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ol-attribution button {
	display: none;
}
.ol-viewport {
	overflow: visible !important;
}
.ol-popup {
	display: none; 
	position: absolute; 
	top:20%;
	z-index: 20; 
	background: white; 
	padding: 5px; 
	border: 1px solid black; 
	border-radius: 5px;
}
.tooltip {
	position: absolute;
	background-color: white;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	padding: 6px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	min-width: 174px;
	min-height: 90px;
}
.tooltip::after {
	content: '';
	position: absolute;
	bottom: -12px; /* Position the arrow below the tooltip */
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: white transparent transparent transparent;
	z-index: 100;
  }
  .tooltip-bottom::after {
	top: -12px; /* Move arrow above the tooltip */
	bottom: auto;
	left: 50%;
	transform: translateX(-50%);
	border-color: transparent transparent white transparent;
  }
  
  .tooltip-left::after {
	left: auto;
	right: -12px; /* Move arrow to the right of the tooltip */
	transform: translateY(-50%);
	border-color: transparent transparent transparent white;
	bottom: 0px;
  }
  .tooltip-right:after {
	left: -12px;
	bottom: 12px;
	transform: translateY(50%);
	border-color: transparent white transparent transparent ;
  }
.tooltip-close {
	background: none;
	border: none;
	color: #2b9ebd;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	position: absolute;
	top: -10px;
	right: -10px;
  }
  .tooltip-close:hover {
	color: #54595f;
  }
/* General button container styling */
.toggle-btn {
	text-align: center;
	font-size: 1rem; /* Ensure text is visible */
	padding: 5px;
	border-radius: 5px;
	cursor: pointer;
	border: 1px solid silver;
	background-color: #f8f8f8;
	font-size: 1rem;
	/*padding: 0.5rem;*/
	outline: none;
	transition-duration: 0.3s;
	color: black;
}

/* Active state styling for the button */
.active-btn {
	background-color: #2b9ebd; /* Distinct active background */
	color: white; /* Text should contrast with the background */
}
/* Hover effect for the button */
.toggle-btn:hover {
	color: white;
	background-color: #54595f;
	outline: none;
}

#mapcontrols {
	display: flex;
	flex-direction: row;
	padding: 2px;
	width: 100%;
	margin-right: 5px;
	margin-top: 20px;
}
.legendBox {
	display: flex;
	flex-direction: row;

}

.legend {
	padding: 5px;
	margin-left: 5px;
	margin-right: 2px;
	font-family: Arial, sans-serif;
	width: 85%;
}
.title {
	text-align: center;
	font-weight: bold;
	font-size: 15px;
	margin-top: 7px;
}

.gradiant-bar-box {
	display: flex;
	flex: 1;
	justify-content: center;
	flex-direction: column;
	flex-basis: 100%;
}

.gradient-bar {
	position: relative;
	height: 20px;
	background: linear-gradient(
		to right,
		rgb(0, 0, 255),
		rgb(56, 162, 255),
		rgb(56, 255, 255),
		rgb(56, 255, 170),
		rgb(56, 255, 140),
		rgb(56, 255, 95),
		rgb(130, 255, 5),
		rgb(255, 255, 5),
		rgb(255, 120, 5),
		rgb(255, 90, 5),
		rgb(255, 60, 5),
		rgb(255, 30, 5),
		rgb(255, 0, 0)
	);
}
.tick-container {
	position: relative;
	height: 30px;
	margin-top: -15px; /* Overlay ticks */
}
.tick {
	position: absolute;
	width: 1px;
	height: 15px;
	background: black;
	top: 0;
}
.label {
	position: absolute;
	font-size: 10px;
	transform: translateX(-50%);
}
.speed-label {
	top: 15px; /* Position wind speed below ticks */
}
.intensity-label {
	top: 20px; /* Position rainfall intensity values below ticks */
}
#rainContainer {
	display: none;
	width: 100%;
}

.rain-gradient-bar {
	position: relative;
	height: 20px;
	background: linear-gradient(to right, 
		rgb(255, 255, 255), /* Low Intensity (White) */
		rgb(128, 128, 255), /* Medium Intensity (Blue) */
		rgb(255, 0, 0)      /* High Intensity (Red) */
	);
}
#Buttons {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-flow: row wrap;
	width: 120px;
}
#attribution-container {
	text-align: center;
	position: relative;
	margin-top: -35px; /* Overlay ticks */
	margin-right: 5px;
	font-size: 10px;
	align-self: flex-end; /* Aligns this item to the right */
	text-align: right; /* Ensures text inside aligns to the right */
}
#timeline-container,
#radar-timeline-container {
	max-width: 100%; /* Ensure it doesn’t exceed #mapbox's width */
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none; /* Prevents text selection */
	-webkit-user-select: none; /* For Safari */
	-moz-user-select: none; /* For Firefox */
	-ms-user-select: none; /* For IE */
	margin-top: 10px;
}

#timeline-wrapper,
#radar-timeline-wrapper {
	display: flex;
	align-items: center;
	overflow-x: hidden;
	gap: 5px;
}

#timeline-row,
#radar-timeline-row {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	width: 480px; /* Adjust to fit your design */
	overflow: hidden;
	/*position: relative;*/
}
#timeline-row.dragging,
#radar-timeline-row.dragging {
	cursor: grabbing;
	cursor: -webkit-grabbing;
  }

.day-group {
	display: flex;
	flex-direction: column;
	align-items: center;

  }

  .day-label {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
	color: #555;
	border-radius: 2px;
	padding: 2px 5px;
	position: relative;
	top: 0px; /* Adjust to position above the hour row */
	transition: left 0.1s ease-out; /* Smooth transition when updating the position */
	visibility: visible; /* Initially hide day label */
  }

.hour-row {
	display: flex;
	gap: 1px;
}

.timeline-block {
	width: 30px;
	height: 30px;
	text-align: center;
	font-size: 12px;
	line-height: 30px;
	cursor: pointer;
	background-color: #f8f8f8;
	border: 1px solid silver;
	border-radius: 0.3em;
}

.timeline-block:hover {
	background-color: #54595f;
	color: white;
}

.radar-hour{
	width: 36px;
}
.nav-button {
	padding: 5px 5px;
	background-color: #2b9ebd;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 12px;
	border-radius: 10px;
	margin-top: 25px;
}

.nav-button:hover {
	background-color: #54595f;
	color: white;
}

.nav-button2 {
	padding: 5px 5px;
	background-color: #2b9ebd;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 12px;
	border-radius: 10px;
}

.nav-button2:hover {
	background-color: #54595f;
	color: white;
}

/* Highlight active day */
.active-day .day-label {
	color: #2b9ebd;
	padding: 2px 5px;
	border-radius: 5px;
}

.active-hour {
	background-color: #2b9ebd;
	color: white;
	font-weight: bold;
}


#arrow{
	align-items: center;
	display: flex;
	max-width: 100%;
	margin-top: -15px;
}
.custom-control-container {
	position: relative;
	top: -46%;
	left: -95%;
	z-index: 1000; /* Ensure it appears above the map */
  }

  
.zoom-button {
	padding: 5px 5px;
	background-color: #2b9ebd;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 15px;
	border-radius: 10px;
	margin-top: 5px;
	margin-left: 5px;
}
.zoom-button:hover {
	background-color: #54595f;
	color: white;
  }
  .wind-direction {
margin-top: -15px;
  }