body {
    background: #000000;
    margin: 0;
    
}
#map-container {
    display: flex;
    height: 100vh;
}

#dynamic-map {
    width: 50%;
    height: 100%;
}

#map {
    width: 50%;
    height: 100%;

 }


 .circle {
   width: 24px;
   height: 24px;
   line-height: 24px;
   background: #00BCF0;
   color: #FFF;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
   border-radius: 16px;
   background-clip: padding-box;
   text-align: center;

 }
 .poste {
   width: 18px;
   height: 18px;
   line-height: 18px;
   background: #00BCF0;
   color: #FFF;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   -ms-border-radius: 9px;
   -o-border-radius: 9px;
   border-radius: 9px;
   background-clip: padding-box;
   text-align: center;
 }

.leaflet-control-button:hover{
cursor: pointer;
}

 .basemaps {
   padding: 4px;
 }
 .basemaps.closed .basemap {
   display: none;
 }
 .basemaps.closed .basemap.alt {
   display: inline-block;
 }
 .basemaps.closed .basemap.alt h4 {
   display: none;
 }
 .basemap {
   display: inline-block;
   /* todo: flexbox? */
   cursor: pointer;
 }
 .basemap.active img {
   border-color: orange;
   box-shadow: 2px 2px 4px #000;
 }
 .basemap img {
   width: 64px;
   border: 2px solid #FFF;
   margin: 0 2px;
   border-radius: 40px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65)
 }
 .leaflet-container .leaflet-control-attribution {
   background: rgba(255, 255, 255, 0.5) !important;
 }
 .leaflet-container .leaflet-control-attribution a {
   color: #333333 !important;
 }


.tabs {
	clear: both;
	position: relative;   
   max-width: 650px;
   margin: 0 auto;
   /* you can either manually set a min-height here or do it via JS ---> */
}

.tab {
	float: left;
}

.tab label {
	margin-right: 20px;
	position: relative;
	top: 0;
	cursor: pointer;
	color: #333;
   text-transform: uppercase;
}

.tab [type=radio] {
	display: none;   
}

.tab__content {
   position: relative;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 0;
	transition: opacity .2s cubic-bezier(.42,0,.34,1.01);
	opacity: 0;
}

[type=radio]:checked ~ label {
	border-bottom: 2px solid #1d1d1d;
	color: #1d1d1d;
	z-index: 2;
}

[type=radio]:checked ~ label ~ .tab__content {
	z-index: 1;
	opacity: 1;
}