/* Open Sans toevoegen */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Open Sans", sans-serif;
}

/****************************/
/* HEADER - TITEL EN LOGO'S */
/****************************/
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  margin: 0;
  padding: 0;
  padding-left: 40px;
}

.logos {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*******************/
/* KAART-CONTAINER */
/*******************/
#map {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
}

/********************/
/* INFORMATIEPANEEL */
/********************/
/* Basisstijl voor het sidepanel */
.infopanel {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 100px; /* Onder de header */
  width: 400px;
  height: calc(100vh - 100px);
  background: white;
  border-right: 1px solid #ccc;
  z-index: 1000;
  transform: translateX(-100%); /* Standaard verborgen */
  transition: transform 0.3s ease;
}

.infopanel.open ~ #map {
  pointer-events: none;
}

/* Tabs */
.infopanel-tabs {
  display: flex;
  flex-direction: column; /* Verticale richting */
  width: 40px; /* Vaste breedte voor de tabs */
  background: #f5f5f5;
  border-right: 1px solid #ccc; /* Lijn tussen tabs en content */
  height: 100%; /* Volledige hoogte van het zijpaneel */
  padding: 5px 0;
}

.infopanel-tab {
  padding: 8px;
  text-align: center;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: 1; /* Zorg dat de tabs gelijkmatig worden verdeeld */
  min-height: 40px; /* Minimale hoogte voor elke tab */
  display: flex;
  align-items: center;
  justify-content: center;
}

.infopanel-tab:hover {
  background: #e0e0e0;
}

/* Content */
.infopanel-content {
  flex: 1; /* Neem de resterende ruimte in */
  height: 100%; /* Volledige hoogte van het zijpaneel */
  overflow-y: auto; /* Scrollbaar maken */
  overflow-x: hidden; /* Horizontaal scrollen uitschakelen */
  margin-left: 10px; /* Marge tussen de tabs en tekst */
  padding: 5px;
  box-sizing: border-box; /* Zorg dat padding niet extra ruimte inneemt */
  pointer-events: auto; /* Zorg dat klikken worden opgevangen */
}

.infopanel-tab-content {
  display: none;
}
.infopanel-tab-content.active {
  display: block;
}

/* Toggle-knop */
.infopanel-toggle {
  position: absolute;
  right: -25px;
  top: 50%;
  width: 25px;
  height: 50px;
  background: white;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

/* Toon het paneel als de klasse 'open' is toegevoegd */
.infopanel.open {
  transform: translateX(0);
}

.infopanel-explanation {
  font-size: 12px;
  color: #555;
  margin-top: -5px;
  margin-bottom: 10px;
}

label {
  /* Uitlijnen van checkbox-teksten */
  display: inline-block;
  max-width: calc(100% - 30px); /* Ruimte voor de checkbox */
  font-size: small;
}

/*****************/
/* MARKER-LABELS */
/*****************/
.subtle-marker-label {
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 11px;
  color: #070000;
  text-shadow: 1px 1px 1px white;
}

.subtle-marker-label:before {
  border: none !important;
}