html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}



.mapcontainer {    width: 100%; margin-top:20px;
  padding-bottom: 100%; position:relative; }


.map {position:absolute; z-index:1;
  height: 100%; 
  width: 100%;
  background-color: #D5D918;
  overflow:visible; overflow:hidden;
  /* padding-bottom:100%;*/
}



.mapoverlay { position:absolute;z-index:10;

  height: 100%;  
  width: 100%;

	background-color:rgba(0,0,0,0.3);
 
  /* padding-bottom:100%;*/
}

.mapoverlay p {position:absolute; 
 

/*
left:50%; top:100px;margin-left: -150px; */
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

 
color: #fff;
font-size: 20px;line-height:32px;
 
font-weight: 400;
display: block;
padding: 0px 0px 0px 0px;
text-align: center; max-width:180px;
 


}

.ol-viewport {  overflow:visible !important;}

 
  
.mapmarker {
/*	background-color: #D5D918; width: 20px; height: 20px; border-radius: 10px;*/
	 
 width:32px; height: 50px;
 	background-color: transparent;
 	
	 background-image:url('../images/icons/calendar-place.svg');
background-repeat:no-repeat;
background-size:25px auto;
background-position:center center;
 position:relative;
	}
	
	
.opentip {
    position: absolute;
    display: block;
  /*  text-indent: -1000px;*/
    text-decoration: none;
    
 width:32px; 
 
 height: 50px;
 
    left:0px; 
    top:0px;
    z-index:10;
    cursor:pointer;
}

 

.haendlerinfo {
		position: relative;
		z-index:1;
		display: none;
		
		width: 440px;
		height: 260px;
		
		background-color: transparent;
		background-image:url('../img/icons/kartepopup-gesamt.svg');
		background-repeat:no-repeat;
		background-size:100% auto;
		background-position:center top;
		color: #000;
		display: none;
		top: -260px;
		left: -430px;
     
}

 
.haendlerinfo p {
 
 margin:0; 
 padding:0;
    color: #000;font-size:14px;line-height:18px;
}
.haendlerinfo div { float:left; height:130px;  height:150px;  padding:10px;}

.haendlerinfo_left {width:42%;}
.haendlerinfo_right {width:58%;}

 
.haendlerinfo div  {position:relative }

.haendlerinfo div p.haendleradresse {/*position:absolute; bottom:10px;*/ }
.haendlerinfo div p.haendlername{font-weight:bold; }


 
.haendlerinfo.visible {display:block;}


.haendlerinfo a {color:#000 !important;}
.haendlerinfo a:hover {color:#fff !important;;}




.half-map {
  float: left;
  height: 500px;
  width: 50%;
  background-color: #D5D918;
}

.full-map {
  width: 100%;
  height: 100%;
  background-color: #D5D918;
}

.marker {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

#popup {
  background: #fff;
}

#myposition > .ol-mouse-position {
  position: relative;
  margin-left:20px;
  font-size: 30px;
}

.export-geojson {
  position: absolute;
  top: 65px;
  left: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 4px;
  padding: 2px;
}

.ol-touch .export-geojson {
  top: 80px;
}

.export-geojson a {
  display: block;
  color: white;
  font-size: 16px;
  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
  font-weight: bold;
  margin: 1px;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
  height: 22px;
  width: 22px;
  background: rgba(0,60,136,0.5);
}

.ol-touch .export-geojson a {
  font-size: 20px;
  height: 30px;
  width: 30px;
  line-height: 26px;
}

.export-geojson a:hover {
  background: rgba(0,60,136,0.7);
}

.list-group-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popover {
  z-index: auto;
  width: 240px;
}

.popover-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popover-content {
  height: 260px;
  overflow-y: auto;
}

.popover-content img {
  max-width: 208px;
}