#map, html, body {
	width: 100%; height: 100%; padding: 0; margin: 0;
}
@media (prefers-color-scheme: dark) {
    .map-tiles {
        filter:var(--map-tiles-filter, none);
	}
}


#map {
    height: calc(100% - 40px);
    width: 100%;
    padding: 0;
    margin: 0;
}

.custom-popup .leaflet-popup-content-wrapper {
  background: transparent;
  color:#fff;
  font-size:13px;
  box-shadow: 0px;
  padding: 0px;
  line-height:24px;
    font-family: 'Roboto', sans-serif;

    font-size: 12px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  box-shadow: 0px;
  }
  
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

.custom-popup .leaflet-popup-tip {
    width: 15px;
	background:#2D2D2D;
    height: 15px;
	box-shadow: 0 0 5px rgba(66, 66, 66,0.4);
    margin: 0px auto 0;
  background-color: rgb(66, 66, 66);
  border-radius: 50%;
  display: inline-block;
  }
  
.informatie {
  width: 100%;
  padding: 0px;
  background-color: rgb(66, 66, 66);
  border-radius: 7px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.5);
  border: 1px solid rgb(79, 79, 79);
}
.informatie-top {
  width: 100%;
  padding: 5px 7px 5px;
  color: white;
  border-bottom: 1px solid rgb(79, 79, 79);
  font-weight: 600;text-shadow: 1px 1px rgba(0,0,0,0.30), 1px 1px 1px rgba(0,0,0,0.30);
}

.informatie-topx {
  width: 54px;
	font-size:11px;
  padding: 3px 5px 2px 5px;
  background-color: rgb(60, 60, 60);
  border-radius: 10px 10px 0px 0px;
  box-shadow: 0 0 5px rgba(0,0,0,0.4);
  color: #999999;
margin-left: 10px;
  border: 1px solid rgb(66, 66, 66);
    border-bottom: 0px;

}
.informatie-mid {
  width: 100%;
  padding: 2px 7px 2px;
  color: #AAAAAA;
  font-size:11px;
  border-bottom: 1px solid rgb(79, 79, 79);
  }
.informatie-bottom {
  width: 100%;
  padding: 5px 7px 5px;
  color: #AAAAAA;
  font-size:11px;
}

.button {
  width: 100%;
  display: flex;
  font-size:12px;
  align-items: center;
  padding: 4px 7px 3px;
  background-color: rgb(60, 60, 60);
  border-radius: 7px;
  color: #919191;
  border: 1px solid rgb(66, 66, 66);
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  position: relative;
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 10px;
}

a.button:link {color: #919191;} 
a.button:visited {color: #919191;} 
a.button:active {color: #919191;} 
a.button:hover {color: #919191;}

.bell {
  width: 13px;
}

.bell path {
  fill: rgb(0, 206, 62);
}

.arrow {
  position: absolute;
  right: 0;
  width: 30px;
  height: 100%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button:hover {
  color: #919191;
  transition-duration: .2s;
}

.button:hover .arrow {
  animation: slide-right .6s ease-out both;
}
/* arrow animation */
@keyframes slide-right {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.leaflet-popup-close-button {
  display: none;
}

.leaflet-popup-content{
	margin: 2px;
}