/* ---------------------------------- Map ---------------------------------- */
hr {
	height: 2px;
  	background-color: #003888;
  	border-radius: 1px;
}
.map, #map_canvas {
	margin: 0;
	padding: 0;
	height: 100%;
}
#map_canvas {
	height: 100%;
	position: relative;
	z-index: 0;
}
#map {
	width: 100%;
	overflow: hidden;
	background: transparent url("/layout/karte-bgr.webp") no-repeat center center;
	background-size: cover;
	height: calc(100vh - 100px);
	margin-top: 4em;
	position:relative
}
#map h1 {
	display: none;
}
.invisible{
	display: none;
}
.mapAdressSearch{
	position: fixed;
	z-index: 90;
	top: 88px;
	left: calc(50% - (330px/2));
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}
.map {
	position: relative;
}
.mapInput {
  	width: 250px;
	min-height: 1.5em;
  	border: 2px solid #003888;
  	border-radius: 4px;
  	margin-right: 1em;
	padding: 5px;
	padding: .7em 1.8em;
}
.mapSearchBtn{
	background: transparent url(/layout/search-map-white.svg) no-repeat center center;
    background-size: 25px;
	cursor: pointer;
	width: 40px;
	height: 50px;
	border: none;
}
.mapAdressSearchForm{
	background-color: #003888;
	border-radius: 4px;
	width: 330px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}
#karte {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: calc(100vh - 100px); 
	padding:0px; 
	border:0px;
}
#legendIcon{
	background-color: #fff;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	position: absolute;
	display: flex;
	top: 70px;
	right: 9px;
	z-index: 90;
	justify-content: center;
	align-content: center;
	align-items: center;
}
#Ebene_1{
	height: 30px;
	width: 100%;
}
.st1{
	fill:#003888;
}

.animated {
  transition: all 0.5s ease-in-out;
}
.rotate-clockwise {
  	transform: rotate(45deg) translate(100%, -45%) scaleX(0.5);
}
.rotate-counterclockwise {
	transform: rotate(-45deg) translate(-111%, -35%) scaleX(0.5);
}
.rounded-border {
  	stroke-linejoin: round;
	stroke-linecap:round;
}

#legend {
	background-color: #fff;
	position: absolute;
	top: 70px;
	right: 9px;
	z-index: 89;
	width: 250px;
	/*height: 250px;*/
	border-radius: 4px;
	padding: 1em;
	padding-top: 35px;
}
#legend {
	font-size: 0.75em;
}
.colorBubble{
	border-radius: 50%;
	width: 25px;
	height: 25px;
}
button.colorLegend{
	background: transparent;
  	cursor: pointer;
}
.colorLegend, .markerLegend{
	display: flex;
	flex-direction: row;
	margin: 1em 0;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
}
.colorLegend{
	cursor: pointer;
}
.colorLegend p, .markerLegend p{
	padding-left: 1em;
	line-height: 1.1em;
}
.erdwaerme {
	background-color: #ffd54f;
}
.fernwaerme-sued{
	background-color: #7cb342;
}
.fernwaerme-verdichtung{
	background-color: #056f00;
}
.luftwaerme{
	background-color: #4fc3f7;
}
.pellet{
	background-color: #9e7133;
}
.stadtgrenze{
	background-color: #fff;
	border: 1px solid #000;
}
.stadtgrenze.dark{
	background-color: #C09;
	border: none;
}

.bestand{
	background-color: #E88C29;
}
.fernwaerme-nord {
	background-color: #4fc3f7;
}
.waermeneubau {
	background-color: #3366FF;
}
#toggleKmlButton0, #toggleKmlButton1, #toggleKmlButton2, #toggleKmlButton3, #toggleKmlButton4, #toggleKmlButton5, #toggleKmlButton6, #toggleKmlButton7, #toggleKmlButton8 {
    transition: opacity 0.3s ease;
}
.fullOpacity{
	opacity: 1;
}
.lowOpacity{
	opacity: 0.5;
}
.fernwaermeMarker{
	width: 25px;
	height: 35px;
	background: transparent url("/layout/user-marker.svg") no-repeat center center;
	background-size: contain;
}
#toggleMarkerButton{
	cursor: pointer;
}

#markerCountText {
	/*font-size:0.7em;*/
	font-size: 1em;
}

@media only screen and (max-width: 768px){
	.mapAdressSearch{
			top: 135px;
	}
	#legend{
		top: 120px;
	}
}
#controls{
	position:absolute;
	left: 1em;
	top: 35%;
	z-index: 80;
	display: flex;
	flex-direction: column;
	background-color: #003888;
	border-radius: 4px;
	padding: 0.25em 0;
}
.markerControls{
	/*width: 25px;
	height: 25px;
	object-fit: contain;
	background-color: transparent;
	margin: 0.5em 0.7em;
	cursor: pointer;*/
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	background-color: transparent;
	margin: 0.5em 0.7em;
	cursor: pointer;
}

@media only screen and (max-width: 460px){
	.mapAdressSearch{
			top: 85px;
	}
	#legendIcon{
		top: 60px;
	}
	#legend{
		top: 60px;
	}
	#map{
		margin-top: 9.5em;
		height: calc(100vh - 200px);
	}
}

#disclaimerText{
	position: absolute;
	bottom: 0;
	left: 50%;
  	z-index: 89;
  	background-color: #003888;
  	color: #fff;
  	width: 90%;
  	border-top-left-radius: 4px;
  	border-top-right-radius: 4px;
	margin-left: -45%;
  	max-height: 0%;
  	transition: max-height 0.5s ease;
}
#disclaimerText.open{
	max-height: 100%;
}
#disclaimerText p, #disclaimerText h2 {
	color: #fff;
	text-align: center;
}
#disclaimerText h2{
	margin: 0.25em 0;
	font-size: 1.25em;
}
@media only screen and (max-width: 460px){
	#disclaimerText h2{
		font-size: 0.9em;
	}
}

.disclaimer{
	position: relative;
	width: 100%;
	height: 100%;
	padding:1em 2em;
}
.disclaimer small{
	display:inline-block;
	font-size: 0.75em;
	line-height: 130%;
}
#disclaimerButton{
	width: 50px;
  	height: 40px; 
	position: absolute;
	top: -2.5em;
	left: calc(50% - 25px);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background-color: #003888;
	cursor: pointer;
	background: #003888 url("/layout/arrow-up-white.svg") no-repeat center;
	background-size: 30px;
	background-position-y: 8px;
}
#disclaimerButton.open{
	background: #003888 url("/layout/arrow-down-white.svg") no-repeat center;
	background-size: 30px;
	background-position-y: 12px;
}
.disclaimerLink{
	text-decoration: underline;
	font-weight: 600;
	font-size: 1.25em;
	color: #fff;
}
.disclaimerLink p {
	margin-bottom: 0.5em;
}
@media only screen and (max-width: 460px){
	.disclaimerLink{
		font-size: 0.9em;
	}
}
.map-noconsent{
	background: transparent url(/images/ft-kv.png) no-repeat center center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 80vh;
}
.map-noconsent p, .map-noconsent h3 {
	text-align: center;
}

.gm-style-iw .btn {
    width: 100%;
    margin: .5em 0 0;
}

.gm-style-iw p {
    color: #3d3d3d;
    font-weight: 500;
    font-size: .875rem;
}

.gm-style-iw h4 {
    font-size: 1rem;
    margin-bottom: .5rem;
}
.legendHeadline{
	width: 100% !important;
}
#mapHelp{
	position: absolute;
	top: calc(35% - 65px);
	left: 1em;
	z-index: 80;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	background-color: #003888;
	cursor: pointer;
  	border-radius: 4px;
}
#mapHelp p {
	width: 25px;
  	height: 25px;
	margin: 0.25em 0.28em;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	color: #fff;
	font-weight: 600;
	font-size: 2.5em;
	padding: 0.25em 0;
}
#controlsHelp{
	position: absolute;
	top: 35%;
	left: 1em;
	z-index: 79;
	background-color: #fff;
	color: #003888;
	border-radius: 8px;
	padding: 0.15em;
	overflow: hidden;
	width: 0;
	opacity: 0;
	-webkit-transition: all .5s ease-in-out;
  	-moz-transition: all .5s ease-in-out;
  	-o-transition: all .5s ease-in-out;
 	transition: all .5s ease-in-out;
}
#controlsHelp div.row{
	flex-direction: row;
}
#controlsHelp p {
	font-size: 0.9em;
	margin: 5px 10px;
	padding-bottom: 5px;
	overflow: hidden;
	border-bottom: solid 0.15px #003888;
}
#controlsHelp p:first-child{
	margin-left: 50px;
}
#controlsHelp p:last-child{
	border-bottom: none;
}
#controlsHelp .flexbox{
	align-content: center;
	align-items: center;
}
#controlsHelp div:nth-child(2) p{
	margin-left: 17px;
}
.controlsInfo{
	width: 25px;
	height: 25px;
	object-fit: contain;
  	margin: 0 0.5em;
}
.extLink{
	display: inherit;
}

@media screen and ( max-height: 800px ) {
	#map {
		min-height: 600px;
	}
}
#markerButtons{
	position: absolute;
  	z-index: 99;
  	left: 1em;
  	top: calc(35% + 65px);
  	padding: 0.5em;
  	border-radius: 4px;
  	background-color: #fff;
	max-width: 115px;
	overflow: hidden;
}
#markerButtonsText{
	width: 100%;
	cursor: pointer;
}
#markerButtons h2{
	width: 78%;
	font-size: 0.8rem;
}
#markerButtons p{
	margin-bottom: 0.5em;
	display: inline-block;
	font-size: 0.9em;
	line-height: 110%;
	width: 50px;
	height: auto;
	cursor: pointer;
}
#markerButtonsClose{
	width: 28%;
	height: auto;
}
#markerButtons.closed{
	width: 50px;
	height: 50px;
	padding-left: 0.25em;
}
/*#markerButtons p.closed{
	margin-left: 0.5em;
	width: 50px;
	height: 65px;
	background: transparent url("/layout/user-marker-red.svg") no-repeat;
  	background-size: 25px 35px;
  	padding-left: 4em;
}*/
#markerButtons #markerButtonsText.closed{
	margin-left: 0.5em;
	width: 50px;
	height: 65px;
	background: transparent url("/layout/user-marker-red.svg") no-repeat;
  	background-size: 25px 35px;
  	padding-left: 4em;
}
#markerButtonsText.closed h2{
	display: none;
}
#markerButtons.opened{
	width: 100%;
}
#markerButtons p.opened{
	width: 100%;
	color: #003888;
}
#myMarker{
	padding: 0 0.5em;
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.75em;
}
.markerButton{
	height: 45px;
	width: auto;
	padding-left: 2.5em;
	background: transparent url("/layout/user-marker-red.svg") no-repeat left center;
  	background-size: contain;
	cursor: pointer;
	margin-right: 1em;
	margin-bottom: 0.65em;
}
.markerButton span {
	display: none;
}
.markerButton small{
	display: inline-block;
  	text-align: left;
	font-size: 0.75em;
	font-weight: 400;
}
.gm-style-iw textarea {
    width: 100%;
    height: 7.5rem;
    border: 1px solid #003888;
    border-radius: 4px;
    padding: 0.25em;
    margin: .5em 0;
}
.gm-style-iw label {
    display: flex;
    font-size: .8rem;
    font-weight: bold;
    color: #003888;
    align-items: center;
    margin-top: .75rem;
}
.gm-style-iw label > input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
}
.gm-style-iw-d a {
	color: #003888 !important;
}

#searchMarker{
	width: 285px;
	position: absolute;
	top: calc(35% - 130px);
	left: 1em;
	z-index: 80;
	display: flex;
	justify-content: flex-start;
  	align-content: flex-start;
  	align-items: center;
	flex-direction: row;
	background-color: #003888;
	border-radius: 4px;
	overflow: hidden;
	-webkit-transition: width .25s ease-in-out;
  	-moz-transition: width .25s ease-in-out;
  	-o-transition: width .25s ease-in-out;
  	transition: width .25s ease-in-out;
}
#markerIdInput{
	height: 35px;
	border-radius: 4px;
	padding: 0.25em;
	margin-left: 0.5em;
}
#searchMarkerIcon{
	width: 45px;
	min-width: 45px;
	height: 45px;
	display: flex;
  	justify-content: center;
  	align-content: center;
  	align-items: center;
  	cursor: pointer;
	background: transparent url(/layout/search-map-white.svg) no-repeat center center;
  	background-size: 25px;
}
#searchMarkerBtn {
	width: 45px;
	height: 45px;
	display: flex;
  	justify-content: center;
  	align-content: center;
  	align-items: center;
  	cursor: pointer;
	background: transparent url("/layout/search-white.svg") no-repeat center center;
  	background-size: 25px;
}
#searchMarkerBtn span {
	display: none;
}