html{
	height: 100%
}
body{
	/*margin-top: 100px;*/
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6;
	background-image: linear-gradient(#33cccc, #00ccff);
	background-repeat: no-repeat center center;
	background-attachment: fixed;

}
.container{
	width: 800px;
	margin: 0 auto;
}

ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: center;
}
ul.tabs li{
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}

ul.tabs li:hover{
	background: #0dcaf0b5;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}

ul.tabs li.current{
	background: rgb(0 0 0 / 3%);
	color: #222;
	box-shadow: 1px 1px 5px #6c757d inset;
}

.tab-content{
	display: none;
	background: #ededed;
	padding: 15px;
	word-wrap: break-word;
}

.tab-content.current{
	display: inherit;
	border: 1px solid #000000;
}

#temporaryDiv{
	background-color: #D6C9C9C2;
	box-shadow: 0 0 1px 1px #000000, 0 0 3px 5px #166B43, 0 0 0px 6px #000000;
	height: calc(100vh*.60);
	margin: 20px 10px;
	opacity: 0.6;
}
#temporaryMessage{
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 0);
	color: #FFFFFFF;
	text-align: center;
	text-shadow: 2px 2px 1px #000000;
}

.dropdown{
	position: relative; /* Ensure positioning is set */
	z-index: 1001; /* Higher z-index than the color bar */
}

.startThresh{
	border-left: 2px solid;
}
.endThresh{
	border-right: 2px solid;
}
.startEndThresh{
	border-left: 2px solid;
	border-right: 2px solid;
}
#tornadoTable{
	border-bottom: 2px solid;
}
.td{
	margin: 10px 0;
	border: solid 1px #333;
	padding: 2px 4px;
	font: 15px Verdana;
}

.tableHeader th{
	text-align: center;
	font-weight: bold;
	/*background-image: -webkit-gradient{linear, left top, left bottom, color-stop(0.05, #68C0E2), color-stop(1, #66CCFF) );
	background-image: -moz-linear-gradient( center top, #68C0E2 5%, #66CCFF 100% );
	*/
	color: #FFFFFF;
	text-shadow: 1px 1px 5px #000000;
	border: 2px solid #000000;
}
.tableHeader{
	background: #7EB2FF;
}
.tableRow td{
	text-align: center;
}
.tableRow:nth-child(odd){
	background: #FFFFFF;
}
.tableRow:nth-child(even){
	background: #A9DBEF;
}
.tableRow:Hover{
	background: #CCCCCC;
}

#map { height: 800px; }

.leaflet-bar {
	top: 20px; /* Adjust this value to move the box down */
}

#colorBar {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 0;
	width: 100%;
	height: 30px;
	background-color: white;
	z-index: 1000;
	padding: 5px;
	box-sizing: border-box;
	opacity: 1; /* Translucent by default */
	transition: opacity 0.3s ease; /* Smooth transition */
}

.colorBarSection {
flex: 1;
height: 100%;
color: white;
text-align: center;
line-height: 20px;
font-size: 12px;
font-weight: bold;
}
.info{
	border: 2px solid #000000;
	background: rgba(3, 223, 252, 0.5);
	top: 20px; /* Adjust this value to move the box down */
	right: 10px; /* Ensure it stays aligned to the right */
	z-index: 1000; /* Ensure it stays above other elements */
	padding: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}