:root{
    font-size:16px;
}

html, body{
	height:100%;
	/*margin-top:51px;*/
	/*line-height:1.6 !important;*/
	/*!*text-align: justify;*!*/
	/*background-color:#343434;*/
}

p.larger_p {
	margin-bottom: 20px;
}

.login-error-class{
	color:#FF0000;
}

.input-group-btn{
	font-size:10px !important;
	background-color:grey;
}


#content_holder{
	margin-bottom:30px;
	padding-top: 1em;
	background-color: #f2f2f2;
	/*background-color: #343434;*/
	/*background: linear-gradient(0deg, rgba(52,52,52,1) 0%, rgb(121 121 121) 100%);*/
}

#page_content{
	margin-left: 14vw;
	margin-right: 14vw;
	position: relative;
	margin-top: 1em;
	border-radius: 10px;
}

#wrap{
	min-height:100%;
	height:auto;
	margin: 0 auto -60px;
}
@keyframes gradient {
	0%{ -webkit-filter:hue-rotate(0deg)}
	100%{-webkit-filter: hue-rotate(360deg)}

}

#caption{
	background-color: #5897cfeb;
	margin-bottom: 5vh;
	margin-top: 5vh;
}

#headline{
	color: #ffffff;
	border-radius: 10px;
	/*margin:auto;*/
	/*background-color:white;*/
	/*margin-bottom: 1em;*/
	/*filter:opacity(0.95);*/
	border:1px solid black;
	background-image: url("#{resource['img/backdrop.png']}");
	background-size: 1425px;
	/*font-family: 'Architects Daughter';*/
}



#headline h1{
	font-size: 4rem;;
	font-weight: bold;
	z-index: 40;
	/*background: #0000009e;*/
	/*backdrop-filter: blur(2px) contrast(0.5);*/
	/*padding: 15px;*/
	border-radius: 25px;
	border: none;
	display: table;
	margin: auto;

}

#headline h2{
	font-size: 35px;
    font-weight: bold;
	z-index: 40;
	/*background: #0000009e;*/
	/*backdrop-filter: blur(2px) contrast(0.5);*/
	padding: 15px;
	border-radius: 25px;
	border: none;
	display: table;
	margin: auto;
	/*margin-top: 30px;*/
	text-align: center;
}


.image{
	width:60vw;
	border:1px solid darkgray;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


@media (max-width: 767px) {

	.vocmap {
		height: 60vh;
	}
	.sewage_disclaimer_normal{
		display: none;
	}

	/*.vocmap{*/
	/*	width:93vw;*/
	/*	height:60vh;*/
	/*	min-height: 300px;*/
	/*}*/
	.leaflet_legend {
		font-size:10px;
	}
	.leaflet_legend_title{
		font-size: 12px;
	}
	.leaflet_legend i {
		width: 13px;
		height: 13px;
	}
	.foerder_logo_footer {
		width: 80vw;
	}
	.amelag_logo_footer{
		width: 40vw;
	}
	.dashboard_footer {
		display: flex;
		flex-direction: column;
	}
	#navbar{
		display: none;
	}
	#navbar_responsive{
		display: inline;
	}
	#headerBanner{
		max-height: 65vh;
		min-height: 100%;
		background-position: center;
		/*min-height: 500px;*/
		/*background-position-x: 0px;*/
	}
	.sewage_header > h1 {
		font-size: 26px;
	}
	#page_content{
		margin-left: 0vw;
		margin-right: 0;
		/*background-position-x: 0px;*/
	}
	#headline h1 {
		font-size: 4rem;
		margin-top: 5vh;

	}
	#headline h2{
		font-size: 20px;
	}
	.image{
		width:90vw;
	}

}
@media (min-width: 768px) and (max-width: 991px) {
	.sewage_disclaimer_normal{
		display: none;
	}
	.vocmap {
		height: 60vh;
	}
	/*.vocChart{*/
	/*	width:47vw;*/
	/*}*/
	/*.vocmap{*/
	/*	!*width:98vw;*!*/
	/*	width:47vw;*/
	/*	height:75vh;*/
	/*	min-height: 400px;*/
	/*}*/
	.leaflet_legend i {
		width: 13px;
		height: 13px;
	}
	.leaflet_legend {
		font-size:11px;
	}
	.leaflet_legend_title{
		font-size: 13px;
	}
	.foerder_logo_footer {
		width: 50vw;
	}
	.amelag_logo_footer{
		width: unset;
	}
	.dashboard_footer {
		display: flex;
		flex-direction: column;
	}
	#headerBanner {
		max-height: 55vh;
		min-height: 100%;
		/*min-height: 500px;*/
		background-position: center;
	}

	#page_content{
		margin-left: 0vw;
		margin-right: 0vw;
	}
	#headline h1 {
		font-size: 4rem;
		margin-top: 5vh;
	}
	#headline h2{
		font-size: 20px;
	}
	.image{
		width:80vw;
	}


}
@media (min-width: 992px) and (max-width: 1199px) {

	.vocmap {
		height: 65vh;
	}

	.sewage_disclaimer_normal{
		display: inherit;
	}
	/*.vocChart{*/
	/*	width:48vw;*/
	/*}*/
	.leaflet_legend i {
		width: 15px;
		height: 15px;
	}
	.leaflet_legend {
		font-size:12px;
	}
	.leaflet_legend_title{
		font-size: 15px;
	}
	.foerder_logo_footer {
		width: unset;
	}
	.amelag_logo_footer{
		width:14vw;
	}
	.dashboard_footer {
		display: flex;
		flex-direction: row;
	}


	#page_content{
		margin-left: 14vw;
		margin-right: 14vw;
	}
	#headline h1 {
		font-size: 4rem;
		margin-top: 5vh;
	}
	#headline h2{
		font-size: 30px;
	}
	.image{
		width:77vw;
	}

}
@media (min-width: 1200px) {

	.vocmap {
		height: 65vh;
	}

	.sewage_disclaimer_normal{
		display: inherit;
	}
	/*.vocChart{*/
	/*	width:48vw;*/
	/*}*/
	/*.vocmap{*/
	/*	width:48vw;*/
	/*	height:80vh;*/
	/*}*/
	.leaflet_legend i {
		width: 20px;
		height: 20px;
	}
	.leaflet_legend {
		font-size:12px;
	}
	.leaflet_legend_title{
		font-size: 16px;
	}
	.foerder_logo_footer {
		width: 30vw;
	}
	.amelag_logo_footer{
		width:13vw;
	}
	.dashboard_footer {
		display: flex;
		flex-direction: row;
	}

}

.foerder_logo{
	max-height: 100px;
	max-width: 90vw;
	margin: 8px;
}

.leaflet-popup-content{
	font-size:13px !important;
}

.amelag_logo_footer{
	max-height: 79px;
	max-width: 210px;
	margin: 8px;
}

.foerder_logo_footer{
	margin:6px;
}

div#detailform\:sewageDetail_content {
	color: white;
	background: #292929;
}

.sewage-plot-title{
	font-size: 20px;
	font-weight: bold;
	padding: 5px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
}

.sewage-plot-title > button{
	margin-left: 20px;
	min-width: 35px;
	height: 35px;
	background-color: #295f88 !important;
	color:white !important;
}

.sewage-plot-title > button:focus{
	margin-left: 20px;
	min-width: 35px;
	height: 35px;
	/*background-color: #295f88;*/
}



.sewage-plot-title .sewage-info-card{
	width: 35rem;
	background: #17364e;
	border: 5px solid #295f88;
	color: #ffffff;
	font-size: 15px !important;
	font-weight: normal;
}

.sewage-info-card .title{
	display: block;
	font-size: 20px;
	margin-bottom: 15px;
	font-weight: bold;
}

.sewage_info_button_main > .ui-button-icon-left{
	/*color: #55c0de;*/
	font-size: 1.5rem;
	margin-top: -0.7rem !important;
}

.leaflet_legend {
	/*line-height: 20px;*/
	color: white;
	background-color: #303030eb;
	padding: 5px;
	border-radius: 5px;
	border: 2px solid white;
}
.leaflet_legend_title{
	font-weight:bold;
	margin-bottom: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	flex-direction: row;
}

.leaflet_tooltip_lineage{
	font-weight: bold;
}
.leaflet_legend_entry{
	margin-bottom:1px;
	display: flex;
	flex-direction: row;
}

.leaflet_legend i {
	float: left;
	margin-right: 8px;
}



.sewage_information{
	margin-bottom: 10px;
}

.sewage_information .ui-accordion-header {
	border-radius: 4px !important;
	background-color: #17364e !important;
	color: white !important;
}

.sewage_information ui-accordion-content {
	border: none !important;
	padding: 0.2rem !important;
	background: none !important;
	color:white !important;
	line-height: inherit !important;
}

.sewage_citation{
	font-size: 10px;
	position: relative;
	text-align: right;
	background: #424242;
	bottom: 15px;
	padding-right: 5px;
}
.dashboard_item{
	flex-direction: column;
	margin-top:10px;
}

.dashboard_footer{
	justify-content: space-around;
	align-items: center;
	background-color: #0c0c0c;
	padding-top:10px;
	padding-bottom: 15px;
}

.sewage_header{
	padding: 10px;
	background: #2e2e2e;
	margin: 0px 0px 10px 0px;
	border-radius: 4px;
	text-align: center;
}

#overviewChart{
	background-color: #4e4e4e;
	border: 2px solid darkgray;
	border-radius: 5px;
	padding: 5px;
}

#mapContainer{
	background-color: #4e4e4e;
	border: 2px solid darkgray;
	border-radius: 5px;

}

.vocmap{
	width:80vw;
	margin:auto;
	/*min-height:60vh;*/
}

.vocChart{
	border:1px solid darkgray;
	border-radius: 5px;
	min-height:25vh;
	padding:5px;
	width:90vw;
}

#sewageDetail_content{
	background-color: #5a5a5a;
	color:white;
}

.leaflet_legend {
	margin-bottom: 20px !important;
}

.ui-widget-overlay {
	opacity: 1 !important;
}

.carouselItem{
	width:95vw;
	/*border: 1px solid #ababab;*/
	/*border-radius: 4px;*/
	padding: 7px;
	margin-bottom: 5px;
}

.ui-carousel-item{
	width:80vw !important;
}

.trendItem {
	display: flex;
	/*flex-direction: row;*/
	align-items: flex-end;
}

.trend_entry{
	padding:3px;
}

/*.leaflet-control-attribution{*/
/*	font-size:9px;*/
/*}*/

.map-tooltip{
	font-size:12px !important;
	color:white !important;
	background-color: #205f86 !important;
}

 .fa-stack .cornered-lr {
	 position: absolute;
	 bottom: 0px !important;
	 text-align: right;
	 line-height: 1em;
	 text-shadow: 1px 1px 1px #000;
 }
.yellow {
	color: yellow !important;
}