#warnings-banner, #warnings-box {

	-webkit-transition: visibility 0s linear 1s, opacity 1s linear;
	-moz-transition: visibility 0s linear 1s, opacity 1s linear;
	-o-transition: visibility 0s linear 1s, opacity 1s linear;
	transition: visibility 0s linear 1s, opacity 1s linear;

	visibility: hidden;
	
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-o-opacity: 0;
	opacity: 0;

	cursor:pointer;

	text-align: center;
	
	background-color: #8a0000;
	
	color: white;
	
	position: absolute;
	
	width: 100%;
	
	padding: 0;
	
	padding-top: 0.25em; padding-bottom: 0.25em; margin:0;
}


#warnings-box.show, #warnings-banner.show {
	visibility: visible;
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	transition-delay:0s;
}
 
#warnings-box.show {
	opacity: 1;
}
#warnings-banner.show {
	opacity: 0.75;
}
#warnings-banner.show.active {
	opacity: 1;
}

#warnings-banner {
	top: 0px; left: 0px;
	font-size: 6vmin;
	font-variant: small-caps;
	font-style: italic;
	padding: 0;
	z-index:20;
    height: 8vmin;
}

#warnings-box {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: flex-start;
	top: 8vmin;
	font-size: 7vh;
	z-index: 1001 !important;
	min-height: calc(100vh - 8vmin); /* fix for Safari */
	height: calc(100vh - 8vmin);
	padding: 0;
    margin: 0;
    overflow-y: auto;
}

#warnings-box-text {
	flex: 1 0 50%;
	/*flex: 1 1 10%;*/
	border: none;
	font-variant: normal;
	font-size: 2.5vmin;
	white-space: pre !important;
	text-align: left;
	display: flex;
	flex-direction: column;
	margin-left: 8vw;
}
#warnings-box-text pre {
	/*flex: 1 0 50%;*/
	border: none;
	font-variant: normal;
	font-size: 2.5vmin;
	white-space: pre-wrap !important;
	text-align: left;
	width: auto;
	max-width: 84vw;
}

#weather-warning-details {
	font-size: 2.5vmin !important;
	text-align:left;
}