/*
Een paar basiskleuren
 */
:root{
  --leaflet-control-slight-transparent: rgba(255, 255, 255, 1);
  --rijksoverheid-blue: #01689b;
}

/* extra: for visible focus, needs to be overwritten in LED CSS.
 Or provide styling for LED itself, using these selectors */
.leaflet-marker-icon:focus, a.leaflet-popup-close-button:focus {
  border: 2px dotted var(--rijksoverheid-blue);
}

/*
De kaartgrootte.
 */
.archives-map {
    height: 880px;
    width: 100%;
}



.leaflet-marker-icon {
    text-align: center;
}

/* Thijs: het kan voor andere styling van de cluster iconen nodig zijn deze styles aan te passen. Let dan op dat de grootte van de iconen in de javascript code wordt bepaald. Dus check ook js/initiatieven-kaart-public.js
 */
.clusterIcon {
  background-color: var(--rijksoverheid-blue);
  color: #fff;
  border-radius: 25%;
}
.clusterIcon span {
  background-color: var(--rijksoverheid-blue);
  color: #fff;
  display: inline-block;
  padding-left: .1rem;
  padding-right: .1rem;
}

.clusterIcon-md {
  /* half the increaseSize from the JS code js/initiatieven-kaart-public.js */
  padding-top: 3px;
}

.clusterIcon-lg {
  /* the increaseSize from the JS code in js/initiatieven-kaart-public.js */
  padding-top: 6px;
}


/* -----------------------------------------------------------
 geen lelleke list-items als de kaart getoond wordt
 */
#map-items {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
#map-items li {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

/* ---------------------
De custom controls beetje opmaken en in lijn brengen met standaard Leaflet controls
 */
.map-item-control-types {
  background-color: var(--leaflet-control-slight-transparent);
  padding: .5rem;
}
.map-item-control-types ul {
  margin: 0;
  padding: 0;
}
.map-item-control-types legend,
.map-item-control-types h2,
.map-item-control-types h3 {
  font-weight: bold;
  font-size: .75rem;
  margin: .25rem 0;
  padding: 0;
}

.typeFilterControlTxt {
  line-height: 2em;
  padding: 0.2em;
}

.typeFilterControlTxt img {
  height: 2em;
  vertical-align: bottom;
  margin: 0 0.3em 0 0.5em;
}



/* -----------------------------------------------------------
misschien moet dit naar leaflet.css, maar ik denk dat 1 css-bestand
beter is, dus eigenlijk hoort alles in dit bestand...
 */
.leaflet-popup-content p,
.leaflet-popup-content h2 {
    margin-top: 0;
    margin-bottom: .25rem;
}
.leaflet-control ul li {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}
.leaflet-control label {
    margin-left: .5rem;
}

.show-overlay {
  display: inline-block;
  width: 200px;
  right: 200px;
  position: absolute;
  background-color: #ffffff;
  line-height: initial;
}


.leaflet-top .leaflet-control-zoom-in,
.leaflet-top .leaflet-control-zoom-out,
.leaflet-top .leaflet-control-zoomall {
  text-indent: -999rem;
}
.leaflet-top .leaflet-control-zoom-in:before,
.leaflet-top .leaflet-control-zoom-out:before,
.leaflet-top .leaflet-control-zoomall:before {
  content: '-';
  display: block;
  width: 100%;
  font-size: 1rem;
  float: left;
  text-indent: 0;
}
.leaflet-top .leaflet-control-zoom-in:before {
  content: '+'
}
.leaflet-top .leaflet-control-zoom-out:before {
  content: '-'
}
.leaflet-top .leaflet-control-zoomall:before {
  content: '↔'
}