*{
	box-sizing:border-box;
}
body{
	font-family:Verdana,sans-serif;
	font-size:15px;
}
.wrapper{
	width:100%;
	max-width:912px;
	min-width:478px;
	margin:auto;
	position:relative;
}
.input-wrapper{
	border: 1px solid black;
	border-radius:5px;
	padding:10px;
	margin-bottom:15px;
}
.input-wrapper label{
	display: inline-block;
	margin: 0 5px 5px 0;
}
.x-column-wrapper{
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:stretch;
}
.two-columns{
	flex: 0 1 49%;
}
.three-columns{
	flex: 0 1 33%;
}

.img-wrapper{
	width:100%;
	border: 1px solid black;
	border-radius:5px;
	padding:5px;
	padding-bottom:10px;
	background-color:white;
}
img{
	width:100%;
	height:auto;
}
.choosetype{
	width:100%;
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	margin: 0 -5px;
	margin-bottom:20px;
}
.choosetype a{
	display:block;
	margin: 0 5px;
	text-decoration:none;
	width:100%;
}
.choosetype button{
	display:block;
	width:100%;
	height:40px;
	border-radius: 10px;
}
.not-selected{
	background-color:#d9f6ff;
	border:2px solid #1b5c85;
	cursor:pointer;
	color:#1b5c85;
}
.not-selected:hover{
	box-shadow: 0 0 20px #1b5c85 inset;
}
.selected{
	background-color:#1b5c85;
	color: #d9f6ff;
	border: 2px solid #d9f6ff;
}
.multiple-select{
	display:block;
	width:100%;
	margin-top:5px;
	margin-bottom:15px;
	height:30px;
}
.select-wrapper-centered{
	width:100%;
	margin:auto;
	text-align:center;
}
.select-wrapper-centered select{
	margin: 0 10px;
}
.footnote{
	text-align:center;
	margin-top:5px;
	font-size:10px;
	display:flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.footnote .desc{
	margin-bottom:5px;
}
.red{
	background-color:#ffa280;
	margin-right:5px;
}
.orange{
	background-color:#f6b540;
}
.yellow{
	background-color:#f6e480;
	margin-left:5px;
}
.legend{
	width:40px;
	height:20px;
}
.zoom-map{
	width:100px;
	position:relative;
	margin:auto;
	overflow:visible;
	transition: width .5s ;
	-webkit-transition: width .5s;
	-o-transition: width .5s;
}
.svg-container{
	position:absolute;
	border-radius:5px;
	overflow:hidden;
}
.svg-small{
	width:30px;
	margin: 0 0 0 90px;
	transition: width .5s, margin .5s;
	-webkit-transition: width .5s, margin .5s;
	-o-transition: width .5s, margin .5s;
	height:5px;
}
.svg-small .fa{
	font-size:15px;
}
.zoom-map:hover, .zoom-map:active, .zoom-map:focus{
	width:100%;
}
.zoom-map:hover .svg-container, .zoom-map:active .svg-container, .zoom-map:focus .svg-container{
	box-shadow: 0 0 5px;
}
.svg-container:hover .overlay, .svg-container:active .overlay,  .svg-container:focus .overlay{
	display:none;
}
.svg-small:hover{
	margin:0;
}
.svg-content{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
}
.svg-content path{
	fill:black;
	stroke:black;
}
.svg-group{
	cursor: pointer;
}
.svg-rect{
	fill:#d9f6ff;
	stroke-width:1px;
	stroke:#1b5c85;
	transition: .5s ease;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
}
.svg-framing{
	fill:#d9f6ff;
	stroke-width:1px;
	stroke:#1b5c85;
	transition: .5s ease;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
}
.svg-text{
	font-size:5px;
	transition: .2s ease;
	-webkit-transition: .2s ease;
	-o-transition: .2s ease;
	fill:#1b5c85;
}
.svg-group:hover .svg-text, .plac-active .svg-text{
	font-size:6px;
	fill:#d9f6ff;
}
.svg-group:hover .svg-rect, .plac-active .svg-rect{
	fill:#1b5c85;
	stroke-width:1px;
}
.svg-group:hover .svg-framing, .plac-active .svg-framing{
	fill:#1b5c85;
	stroke-width:2px;
}
.plac-active{
	cursor: default;
}
#clname{
	margin-top:85px;
	margin-bottom:15px;
}
.overlay{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: black;
	opacity: 0.7;
	padding: 20px;
	text-align: center;
	color: white;
	font-size: 25px;	
}
.svg-small .overlay{
	padding:3px;
	opacity:1;
}

/*
==============================================================
LWF Foliar
Blaue Farben werden mit Grün überschrieben
==============================================================
*/

.lwf-foliar .not-selected{
	background-color:#a2cd5a;
	border:2px solid #556b2f;
	color:#556b2f;
}
.lwf-foliar .not-selected:hover{
	box-shadow: 0 0 20px #556b2f inset;
}
.lwf-foliar .selected{
	background-color:#556b2f;
	color: white;
	border: 2px solid #a2cd5a;
}
.lwf-foliar .svg-rect{
	fill:#a2cd5a;
	stroke:#556b2f;
}
.lwf-foliar .svg-framing{
	fill:#a2cd5a;
	stroke:#556b2f;
}
.lwf-foliar .svg-text{
	fill:#556b2f;
}
.lwf-foliar .svg-group:hover .svg-text, .lwf-foliar .plac-active .svg-text{
	fill:white;
}
.lwf-foliar .svg-group:hover .svg-rect, .lwf-foliar .plac-active .svg-rect{
	fill:#556b2f;
}
.lwf-foliar .svg-group:hover .svg-framing, .lwf-foliar .plac-active .svg-framing{
	fill:#556b2f;
}
