html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

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

section.staton-map {
    height: 800px;
    padding-block: 0 !important;
    
    @media (max-width:768px) {
        height: 500px;
    }
}
.popup-plaats {
  font-size: 11px; 
  font-weight: bold;
  color: white;
  margin-top: 5px;
}

.leaflet-popup {
    .leaflet-popup-content-wrapper {
      background-color: #1E201F;
      color: white;
      border-radius: 5px;
      padding: 12px 15px 12px 15px;
      box-sizing: border-box;
      width: auto;
      max-width: 200px;
    }
    
    .leaflet-popup-tip {
      background: #333;
    }
    
    .leaflet-popup-content {
      padding: 6px; 
      margin: 0;
      box-sizing: border-box;
    }
    
    .popup-inner {
      text-align: center;
      width: 100%; 
      max-width: 180px; 
      margin: 0 auto;
      box-sizing: border-box;
    }
    
    .popup-logo img {
      max-width: 90%; 
      margin-bottom: 6px;
    }
    
    .popup-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }
    
    .popup-table td {
      padding: 6px;
      border: 1px solid #666;
      background-color: #444;
      color: white;
      font-size: 14px;
    }
}