/* ==========================================================================
   1. BASIS & TYPOGRAFIE (Modern & Clean)
   ========================================================================== */
html {
    /* Overflow wordt geregeld op body niveau */
}

body {
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    line-height: 1.7;
    color: #000000;
    font-weight: 300;
    font-size: 1.0rem;
    background: #fff;
    /* Belangrijk voor jouw fullscreen kaart-applicatie: */
    overflow: hidden; 
    margin: 0;
}

/* Utility classes */
.no-js { visibility: hidden; opacity: 0; }
.js { visibility: visible; opacity: 1; }

a {
    transition: .3s all ease;
    color: #0061b7;
    text-decoration: none;
}
a:hover { color: #004a8c; text-decoration: none; }

h1, h2, h3, h4, h5 { color: #1a2b3c; font-weight: 600; }
h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 20px; }

/* Input Resets & Basis Styling */
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=button],
input[type=search],
select,
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 3px;
  font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 12px;
}

/* Nieuwe Rounded Input stijl (uit je laatste snippet) */
.rounded-input {
    border-radius: 15px;
    padding: 10px 15px;
    border: 1px solid #ced4da;
    font-size: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 15px;
}
.rounded-input:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ==========================================================================
   2. HEADER & NAVIGATIE
   ========================================================================== */

/* Modern Header Container */
.header-top {
    padding: 10px 0;
    background: #fff;    
}

.header-rechts-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
}

.header-knoppen-groep {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Dropdown: Oude Stijl (Legacy) */
.custom-dropdown { position: relative; }
.custom-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 9999999;
    border-radius: 4px;
}
.custom-dropdown:hover .custom-dropdown-content { display: block; }
.custom-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 16px;
}
.custom-dropdown-content a:hover { background-color: #f4f4f4; }

.caret {
    display: inline-block;
    width: 0; height: 0;
    vertical-align: middle;
    border-top: 4px solid #000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    margin-left: 5px;
}

/* Dropdown: Nieuwe Stijl (VP) */
.dropdown_vp {
    position: relative;
    display: inline-block;
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    z-index: 1000;
}
.dropdown_vp-btn {
    background-color: transparent;
    color: #333;
    padding: 4px 18px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.dropdown_vp-arrow {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-top: 4px solid #000000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.dropdown_vp-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    font-size: 14px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    border-radius: 4px;
}
.dropdown_vp-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown_vp-content a:hover { background-color: #f1f1f1; }
.dropdown_vp:hover .dropdown_vp-content { display: block; }

/* Legacy Header Classes (voor compatibiliteit) */
.menukop { text-decoration: none; font-size: 15px; color: #000; }
.menukoptekst {
    position: absolute; padding: 9px 0 0 10px;
    text-decoration: none; font-size: 16px; font-weight: bold; color: #fff;
}
.subkoptekst {
    position: absolute; padding: 5px 0 0 10px;
    text-decoration: none; font-size: 15px; font-weight: bold; color: #fff;
}

/* ==========================================================================
   3. SIDENAV
   ========================================================================== */
.sidenav {
    height: 100%;
    width: 0; /* Javascript opent dit later naar 320px */
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(1,1,1,0.7);
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 15px;
    color: #e2e2e2;
    display: block;
    transition: 0.3s;
}
.sidenav a:hover { color: #f1f1f1; }

.sidenav .closebtn {
    position: absolute; top: -14px; right: 5px;
    font-size: 28px; margin-right: 0px; color: #f1f1f1;
}

.sidenav .bodemBlok {    
    text-decoration: none; font-size: 15px;
    background-color: rgba(1,1,1,0.6);
    position: absolute; height: 200px; width: 100%;
    bottom: 0px; margin-bottom: 20px; color: #FFF;
}
.sidenav .bodemBalk {    
    text-decoration: none; font-size: 15px;
    background-color: #0583ca;
    position: absolute; height: 30px; width: 100%;
    bottom: 200px; margin-bottom: 20px;
}
.sidenav .topBalk {    
    text-decoration: none; font-size: 18px;
    background-color: #0583ca;
    height: 40px; width: 100%; 
    font-weight: bold; position: absolute; top: 0;    
}
.sidenav .keuzeBalkje { margin-left: 10px; margin-right: 10px; width: 250px; }

/* Sidenav Rows */
.sidenav .planRij, .sidenav .planRij_twee, .sidenav .planRij_drie, 
.sidenav .planRij_vier, .sidenav .planRij_vijf, .sidenav .planRij_zes,
.sidenav .planRij_zeven, .sidenav .planRij_acht, .sidenav .planRij_negen, .sidenav .planRij_tien {    
    text-decoration: none; position: relative;
    height: 30px; width: 100%; margin-left: 10px;
    margin-top: 10px;
}
/* De eerste heeft geen margin-top nodig */
.sidenav .planRij { margin-top: 0; }

.sidenav .laden_button_links, 
.sidenav .laden_button_rechts,
.sidenav .laden_button_m_en_r {    
    background-color: #0583ca; color: white;
    padding: 7px 10px; border: none; border-radius: 3px; cursor: pointer;
}
.sidenav .laden_button_links { width: 70px; }
.sidenav .laden_button_rechts { width: 50px; margin-right: 30px; }
.sidenav .laden_button_m_en_r { width: 70px; margin-left: 10px; }

.sidenav .laden_button_links:hover, 
.sidenav .laden_button_rechts:hover,
.sidenav .laden_button_m_en_r:hover { background-color: #00a6ea; }

.sidenav .selectieScroller {
    font-size: 13px; position: relative;
    height: 300px; width: 100%; margin-left: 15px;    
}
.sidenav .selectie-item {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;
}

/* ==========================================================================
   4. TABELLEN
   ========================================================================== */
table { 
    margin-top: 10px; margin-left: 0; border-collapse: collapse;
    color: #000; font-size: 12px; font-weight: 400; text-align: left;
    width: 100%;
}
table tr:nth-child(odd) td { background:#ffffff; color: #212529; padding: 8px; }
table tr:nth-child(even) td { background:#f8f9fa; color: #212529; padding: 8px; }

th { border: solid 0 #fff; text-align: left; font-size: 12px; font-weight: 400; color: #000; }
tr { font-size: 12px; font-weight: lighter; color: #000; text-align: left; }

/* Speciale tabel (navtabel) behoudt donkere styling */
table#navtabel {
    margin-top: 10px; 
    margin-left: 10px; 
    border-collapse: collapse;
    color: #fff; 
    font-size: 14px; 
    font-weight: 400;
    background-color: transparent;
}

/* Zorg dat de cellen in DEZE tabel transparant zijn en witte tekst hebben */
table#navtabel tr td,
table#navtabel tr th {
    padding: 10px; 
    font-size: 13px; 
    font-weight: normal; 
    color: #ffffff !important;
    background-color: transparent !important; /* Forceer transparant over de zebra-styling heen */
    border: none !important;
}

/* Specifiek voor de rijen, forceer regelhoogte */
table#navtabel tr {
    line-height: 15px;
    background-color: transparent !important;
}
table[id=reddingstation-page] { margin-left: 10px; font-size: 12px; color: #000; }

.fixed_one { max-width: 75px; min-width: 75px; color: #fff; }
.fixed_two { max-width: 85px; min-width: 85px; color: #fff; }
.fixed_three { max-width: 80px; min-width: 80px; color: #fff; }
.UTM0 { font-weight: bold; color: #ffffff; }

/* ==========================================================================
   5. KAART & CONTROLS
   ========================================================================== */
.map-wrapper {
    position: relative !important; /* CRUCIAAL: Dit houdt de knoppen binnen dit blok */
    z-index: 1;
    overflow: hidden; /* Zorgt dat ronde hoeken werken */
    border-radius: 4px;
    width: 100%;
    /* Hoogte wordt vaak inline geregeld (style="height:500px"), 
       maar je kunt hier een fallback zetten: */
    min-height: 400px; 
}
.map-canvas { 
    color: #f1f1f1; 
    z-index: 1; 

    /* BREEDTE: 100% min de marges links (15px) en rechts (15px) = 30px totaal */
    width: calc(100% - 30px) !important;
    
    /* HOOGTE: 100% min de marge onder (15px). Boven is 0. */
    height: calc(100% - 15px) !important;
    
    /* De marges instellen: Boven Rechts Onder Links */
    /* Hier zorgen we dat links/rechts gelijk zijn aan onder (15px) */
    margin: 0 15px 15px 15px !important;
    
    /* Styling */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    
    /* Zeker weten dat hij getoond wordt */
    display: block !important;
}

/* Control Panel (Nieuw) */
.control-panel {
    position: absolute; top: 220px; right: 0px;
    z-index: 1000;
    background-color: #0583ca;
    padding: 10px; border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    display: none; color: white; width: 200px; height: 140px;
    box-sizing: border-box;
    pointer-events: auto !important;
}
.control-panel label { display: block; margin-bottom: 5px; }
.control-panel select { width: 90%; padding: 5px; margin-bottom: 5px; box-sizing: border-box; pointer-events: auto !important;}
.status { margin-top: 5px; font-style: italic; font-size: 0.9em; color: white; }

/* Algemene submit & input styling */
input[type=submit], .btn-primary {
    width: 125px; background-color: #0583ca; color: white;
    padding: 7px 10px; margin: 8px 0 8px 10px;
    border: none; border-radius: 3px; cursor: pointer;
}
input[type=submit]:hover, .btn-primary:hover { background-color: #00a6ea; }

input[type=geotext] {
    width: 225px; padding: 7px 10px; margin: 8px 0 8px 10px;
    display: inline-block; border: 1px solid #ccc;
    border-radius: 3px; box-sizing: border-box;
}

/* GPX Buttons */
input[id=gpx_sla_op], input[id=gpx_download], input[id=gpx_upload] {
    background-color: #0583ca; color: white; width: 67px;
    border: none; border-radius: 3px; cursor: pointer;
}
input[id=gpx_sla_op] { padding: 6px 10px; margin-left: 10px; }
input[id=gpx_download] { padding: 6px 8px; margin-left: 8px; }
input[id=gpx_upload] { padding: 10px 14px; margin-left: 8px; }
.uploadgpx { 
    margin-top: -42px; width: 67px; height: 26px;
    align-items: center; position: absolute; right: 14px;        
}

/* Overlay Knoppen (Blauwe blokjes rechtsboven) */
input[id=legenda_dialog], input[id=download_kaart_dialog],
input[id=hetweer_dialog], input[id=marifoon_dialog],
input[id=info_dialog], input[id=account_pgn], 
input[id=vaarroute_dialog] {
    background-color: #0583ca; color: white;
    padding: 3px 4px; margin-left: 8px;
    border: none; border-radius: 3px;
    position: absolute; float: right; cursor: pointer;
    -webkit-appearance: none;
    top: 7px; /* Zorgt voor afstand tot de bovenrand */
    z-index: 1002; /* Zeker weten dat ze boven alles liggen */
}
input[id=legenda_dialog]:hover, input[id=download_kaart_dialog]:hover,
input[id=hetweer_dialog]:hover, input[id=marifoon_dialog]:hover,
input[id=info_dialog]:hover, input[id=account_pgn]:hover { background-color: #00a6ea; }

/* Specifieke posities */
input[id=legenda_dialog] { width: 67px; margin-right: 10px; right: 1240px; }
input[id=download_kaart_dialog] { width: 97px; margin-right: 10px; right: 160px; }
input[id=hetweer_dialog] { width: 67px; margin-right: 10px; right: 240px; }
input[id=marifoon_dialog] { width: 67px; margin-right: 10px; right: 320px; }
input[id=info_dialog] { width: 67px; margin-right: 9px; right: 235px; } /* Updated pos */
input[id=account_pgn] { width: 67px; margin-right: 9px; right: 160px; }

/* Oranje knop */
input[id=vaarroute_dialog], .gids_dialog { 
    width: 120px; background-color: #ff7300; 
    margin-right: 10px; right: 400px; 
}
input[id=vaarroute_dialog]:hover { background-color: #f89442; }

/* Specifieke styling voor de Gids Dialoog knop */
input[id=gids_dialog] {
    width: 140px;
    background-color: #ff7300;
    color: white;
    padding: 3px 4px;
    margin-left: 8px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    position: static;     
    margin-right: 10px; 
    right: 710px;
    float: right;
    -webkit-appearance: none;  
    top: 7px; /* Afstand tot bovenrand */ 
    z-index: 1002; 
}

input[id=gids_dialog]:hover {
    background-color: #f89442;
}


/* Specifieke styling voor de abo knop voorpagina */
input[id=gids_dialog_front] {
    width: 140px;
    background-color: #ff7300;
    color: white;
    padding: 3px 4px;
    margin-left: 8px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;     
    margin-right: 10px; 
    right: 710px;
    float: right;
    -webkit-appearance: none;  
    top: 7px; /* Afstand tot bovenrand */ 
    z-index: 1002; 
}

input[id=gids_dialog_front]:hover {
    background-color: #f89442;
}



/* Afbeelding Knoppen (Google Play / App Store) */
img[id=play_button], img[id=appstore_button] {
    width: 67px; padding: 0; margin-left: 8px; border: none;
    position: absolute; float: right; cursor: pointer;
    top: 5px; /* Iets hoger dan de knoppen omdat plaatjes vaak hoger zijn */
    z-index: 1002;
}
img[id=play_button] { margin-right: 9px; right: 0; }
img[id=appstore_button] { margin-right: 9px; right: 80px; }

/* Route Controls */
input[id=route_button_start], input[id=route_button_stop], input[id=route_button_bewaren] {
    background-color: #0583ca; color: white;
    padding: 3px 4px; margin-left: 8px;
    border: none; border-radius: 3px; position: absolute; float: right;
    cursor: pointer; -webkit-appearance: none;
    top: 7px; /* Afstand tot bovenrand */
    z-index: 1002;
}
input[id=route_button_start] { width: 140px; margin-right: 10px; right: 560px; }
input[id=route_button_stop] { width: 90px; margin-right: 10px; right: 460px; }
input[id=route_button_bewaren] { width: 140px; margin-right: 10px; right: 310px; }

/* GPS Walking */
input[id=gpswalking_openen], input[id=gpswalking_route_tonen] {
    width: 150px; height: 40px; background-color: #0583ca; color: white;
    padding: 6px 8px; border: none; border-radius: 3px; cursor: pointer;
    font-size: 12px; margin-bottom: 20px; -webkit-appearance: none;
}
input[id=gpswalking_openen] { position: relative; }
input[id=gpswalking_route_tonen] { position: absolute; margin-left: 10px; }

/* Map Icons & Overlays */
.over-map-rp { position: absolute; bottom: 10px; top: 345px; right: 57px; height: 50px; z-index: 1000; float: right; }
.over-map { position: absolute; bottom: 10px; margin-right: 10px; right: 0px; height: 100%; z-index: 99; float: right; }


/* De container van de knoppen zelf (aanpassing van je bestaande code) */
.over-map-gids { 
   
    position: absolute !important;
    right: 15px !important;      /* 15px afstand van de rechterkant */
    bottom: 15px !important;     /* 15px afstand van de onderkant */
    width: 40px !important;      /* Breed genoeg voor de knoppen */
    height: auto !important;     /* Hoogte past zich aan aan de knoppen */
    margin: 0 !important;        /* Reset eventuele marges */
    z-index: 1000 !important;    /* Bovenop de kaart */
    background: transparent !important;

}

/* Maar de knoppen zelf moeten wel klikbaar zijn */
.over-map-gids button,
.over-map-gids input {
    pointer-events: auto;
}


.over-map-zoomin { position: absolute; bottom: 10px; top: 15px; right: 60px; height: 50px; z-index: 9999; float: right; }

.huidigeRouteKnop {
    background: url(../images/routepijl.png) no-repeat center #0583ca;
    background-size: 80%; cursor: pointer;
    width: 45px; height: 45px; border: none; border-radius: 3px;
    position: absolute; top: 20px; bottom: 75px; left: 2px; margin: 10px auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
.printKnop {
    background: url(../images/printicoon.png) no-repeat center #0583ca;
    background-size: 80%; cursor: pointer;
    width: 45px; height: 45px; border: none; border-radius: 3px;    
}
.hp33Knop, .harmonieKnop, .GPX_upload_Knop {
    background-color: #0583ca; background-size: 80%; cursor: pointer;
    width: 45px; height: 45px; border: none; border-radius: 3px;
    color: white; font-weight: bold;
    display: flex; justify-content: center; align-items: center;
}

.over-map-gids button {
    width: 45px;
    height: 45px;
    background-color: #0583ca;
    border: none;
    border-radius: 3px;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

.centreerKnop {
    background: url(../images/centreren.png) no-repeat center #0583ca;
    background-size: 80%; cursor: pointer;
    width: 30px; height: 30px; border: none; border-radius: 3px;
    position: absolute; bottom: 75px; margin: 10px auto;
}
.zoomInButton, .zoomOutButton {
    background-color: #0583ca; background-position: center; background-repeat: no-repeat;
    background-size: 80%; cursor: pointer;
    width: 30px; height: 30px; border: none; border-radius: 3px; right: 0 !important; /* Binnen de container (.over-map-gids) rechts uitlijnen */
    position: relative !important; /* Relatief aan de container, niet absoluut aan de kaart */
    float: right;
    clear: both; /* Zorg dat ze onder elkaar komen */
    margin-bottom: 5px; /* Ruimte tussen plus en min */    
    /* Reset eventuele oude absolute posities */
    bottom: auto !important; 
    top: auto !important;
}


.zoomInButton { background-image: url(../images/plus.png); bottom: 45px; }
.zoomOutButton { background-image: url(../images/min.png); bottom: 15px; }
.fullscreenButton {
    background: url(../images/fullscreen.png) no-repeat center #0583ca;
    background-size: 80%; cursor: pointer;
    width: 30px; height: 30px; border: none; border-radius: 3px; margin-top: 20px;
}

/* Navigatie Vlak (Rijbuttons) */
.navigatievlak { 
    width: 170px; height: 100px; background-color: #ca0561;
    color: white; padding: 3px 4px; border: none; border-radius: 3px;
    cursor: pointer; position: absolute; right: 50px; bottom: 70px; float: right;
    -webkit-appearance: none;
}

/* Geoptimaliseerde Rijbuttons */
input[id^=rijbutton] {
    height: 25px; background-color: #0583ca; color: white;
    padding: 3px 4px; border: none; border-radius: 3px;
    cursor: pointer; position: absolute; bottom: 25px; float: right;
    -webkit-appearance: none;
}
input[id^=rijbutton]:hover { background-color: #ea5200; }

input[id=rijbuttonnul] { width: 100px; right: 50px; }
input[id=rijbuttoneen] { width: 90px; right: 160px; }
input[id=rijbuttontwee] { width: 110px; right: 260px; }
input[id=rijbuttonnulstroom] { width: 130px; right: 380px; }
input[id=rijbuttonnulzwem] { width: 110px; right: 520px; }
input[id=rijbuttondrie] { width: 110px; right: 640px; }
input[id=rijbuttonvier] { width: 80px; right: 760px; }
input[id=rijbuttonvijf] { width: 100px; right: 850px; }
input[id=rijbuttonzeven] { width: 130px; right: 960px; }
input[id=rijbuttonacht] { width: 100px; right: 1100px; }
input[id=rijbuttonzes] { width: 200px; right: 1210px; }

/* Boei Naam Labels */
/* Boei Naam Labels */
.boei-naam-label {
    background: transparent !important;
    border: none !important; 
    box-shadow: none !important;
    
    /* Font styling */
    font-family: 'Helvetica', "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 500 !important; 
    font-size: 10px !important;
    color: #000 !important; 
    white-space: nowrap !important;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    
    /* HIER ZIT DE TRUC: Verberg ze, maar houd ze in de DOM */
    visibility: hidden !important; 
    opacity: 0 !important;
    
    /* Zorg dat Leaflet ze niet aanklikbaar maakt */
    pointer-events: none !important;
    
    /* Vloeiende overgang */
    transition: opacity 0.2s ease-in-out, visibility 0.2s;
}

/* Als de kaart de class 'toon-namen' heeft: */
.toon-namen .boei-naam-label { 
    visibility: visible !important; 
    opacity: 1 !important;
}
/* Verberg het witte driehoekje bij de boeinamen */
.boei-naam-label::before {
    display: none !important;
    border: none !important;
}
.dieptelabel {
    width: 80px; height: 15px; text-align: left; line-height: 15px;
    font-weight: normal; font-size: 12px; color: #000000;
}
.schelpdieren-div-icon .info_icon { font-size: 0.6em; }
.opletten_icon { font-size: 0.9em; width: 250px; }
.info_icon { position: absolute; width: max-content; max-width: 100px; }
.limit-alert { width: 100px !important; }

/* ==========================================================================
   6. CONTEXT MENU & PLUGINS
   ========================================================================== */
#context-menu {
    position: fixed; z-index: 10000; width: 320px;
    background: #1b1a1a; border-radius: 5px; transform: scale(0);
    color: #eee; padding: 15px; font-size: 14px; transform-origin: top left;
}
#context-menu.visible { transform: scale(1); transition: transform 200ms ease-in-out; }
#context-menu .item { padding: 10px; font-size: 15px; color: #eee; cursor: pointer; border-radius: inherit; }
#context-menu .item:hover { background: #343434; }

/* JConfirm Plugin */
.jconfirm-box { max-height: 90vh !important; }
.jconfirm-content { max-height: 70vh !important; overflow-y: auto !important; }

/* UI Autocomplete */
.ui-autocomplete {
    z-index: 2147483647 !important; background-color: white !important;
    border: 1px solid #aaa !important; border-radius: 4px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    max-height: 250px; overflow-y: auto; width: 200px;
    padding-left: 0 !important; list-style-type: none !important;
}
.ui-menu-item { border-bottom: 1px solid #eee; list-style: none; }
.ui-menu-item .ui-menu-item-wrapper {
    padding: 10px !important; text-transform: capitalize;
    display: block; color: #333; font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 14px; cursor: pointer;
}
.ui-state-active, .ui-menu-item:hover,
.ui-menu-item .ui-menu-item-wrapper.ui-state-active,
.ui-menu-item .ui-menu-item-wrapper:hover {
    background-color: #0483c9 !important; color: white !important;
    border: none !important; margin: 0 !important;
}

/* Animaties */
@keyframes pulseBackground {
    0% { background-color: #0583ca; }
    50% { background-color: #65c602; }
    100% { background-color: #0583ca; }
}
.pulsing-background { animation: pulseBackground 3s infinite; }

/* ==========================================================================
   7. LOADERS, EXTRAS & UPLOADS (Hersteld)
   ========================================================================== */
.spinner {
  width: 30px; height: 30px; background-color: #0583ca;
  margin: 10px auto; border-radius: 3px; bottom: 75px; position: absolute;
}
.double-bounce1, .double-bounce2 {
  width: 100%; height: 100%; border-radius: 50%;
  background-color: #ffffff; opacity: 0.6;
  position: absolute; top: 0; left: 0;
  animation: sk-bounce 2.0s ease-in-out infinite;
}
.double-bounce2 { animation-delay: -1.0s; }
@keyframes sk-bounce {
  0%, 100% { transform: scale(0.0); }
  50% { transform: scale(1.0); }
}

#progress-wrp {
    border: 1px solid #0099CC; padding: 1px; position: relative; height: 30px;
    border-radius: 3px; margin: 10px; text-align: left; background: #fff;
    box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar {
    height: 100%; border-radius: 3px; background-color: #f39ac7; width: 0;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status { top: 3px; left: 50%; position: absolute; display: inline-block; color: #000000; }

/* Openings Dialoog Containers */
#container, #container_download_dialog { position: relative; width: 100%; overflow: auto; display: table; clear: both; }
#container { height: 350px; }
#container_download_dialog { height: 250px; }
#opening_lead, #opening_horizontale_container, #opening_bodem, 
#opening_bodem_info, #opening_bodem_download_dialog { position: relative; left: 0; width: 100%; }
#opening_horizontale_container { margin-top: 20px; }
#opening_links { position: absolute; left: 0; width: 40%; }
#opening_rechts { position: absolute; right: 0; width: 55%; }
#opening_bodem { margin-top: 180px; }

/* Radiocharm */
label.label-radiocharm {
    background: #efefef; color: #888; cursor: pointer; display: inline-block;
    font-size: 12px; padding: 8px 12px; margin: 0 -3px 0 0; transition: all 0.33s;
}
label.label-radiocharm:hover { background: #ddd; }
label.label-radiocharm.active { background: #00dee1; color: #fff; }
label.label-radiocharm input { display: none !important; }
label.label-radiocharm:first-of-type { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
label.label-radiocharm:last-of-type { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

/* File Upload */
.ajax-file-upload-statusbar {
    border: 1px solid #0ba1b5; margin: 5px; width: 420px;
    border-radius: 4px; padding: 5px 5px 5px 15px;
}
.ajax-file-upload-bar { background-color: #0ba1b5; width: 0; height: 20px; border-radius: 3px; color: #FFFFFF; }
.ajax-file-upload-red, .ajax-file-upload-green {
    border-radius: 4px; display: inline-block; color: #fff;
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; font-size: 13px;
    padding: 4px 15px; cursor: pointer; margin: 5px 10px 5px 0px;
}
.ajax-file-upload-red { background-color: #e4685d; }
.ajax-file-upload-green { background-color: #77b55a; }
.ajax-file-upload {
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; width: 67px; height: 26px;
    background-color: #0583ca; color: white; margin: auto; border: none; font-size: 11px;
    border-radius: 3px; cursor: pointer; display: table-cell; vertical-align: middle; text-align: center;
}
.ajax-file-upload:hover { background-color: #00a6ea; }
.ajax-upload-dragdrop {
    border: 2px dotted #A5A5C7; width: 420px; color: #DADCE3;
    text-align: left; vertical-align: middle; padding: 10px 10px 0px 10px;
}
.ajax-file-upload-container { margin: 20px 0px 20px 0px; }

/* Weer Containers */
.vandaag-subcontainer { float: left; width: 100%; position: relative; overflow: hidden; }
.temp-subcontainer { float: right; width: 70%; }
.plaatje-subcontainer { float: left; width: 20%; }
.credit-subcontainer, .plaatje-atmosfeer-subcontainer { float: left; width: 100%; }

/* ==========================================================================
   8. MEDIA QUERIES
   ========================================================================== */
@media screen and (max-height: 450px) {
  .sidenav { padding-top: 15px; }
  .sidenav a { font-size: 18px; }
}
@media (max-width: 991px) {
    .header-top .container { padding-top: 15px; padding-bottom: 15px; }
    .site-navbar { position: fixed; width: 100%; }
}
@media (max-width: 768px) {
    .header-rechts-container { gap: 10px; }
    input[id="vaarroute_dialog"], .gids_dialog { width: 120px; font-size: 11px; }
}

/* ==========================================================================
   FIXES: Blauwe rand & Scroller overlap
   ========================================================================== */

/* 1. Verwijder de blauwe focus-rand rondom de kaart en elementen */
.map-wrapper, 
#map-canvas, 
.leaflet-container, 
div:focus {
    outline: none !important;
}

/* ==========================================================================
   FIX: Scroller hoogte & overlap (Versie 2)
   ========================================================================== */

#div_scroller {
    /* 1. Negeer Javascript hoogte berekening */
    height: auto !important; 
    max-height: none !important;
    
    /* 2. Pin de scroller vast */
    position: absolute;
    
    /* AANGEPAST: Dit was 50px. Nu verhoogd naar 220px om ruimte 
       te maken voor de zoekbalk en knoppen bovenaan. 
       Als hij nog steeds overlapt, maak dit getal dan hoger (bijv. 240px). */
    top: 220px;      
    
    bottom: 240px;  /* Blijft hetzelfde: stopt boven de footer */
    
    /* 3. Breedte en scrollgedrag */
    left: 0;
    width: 100%;
    overflow-y: auto;   
    overflow-x: hidden; 
    
    /* 4. Styling */
    padding-bottom: 20px; 
    z-index: 0; 
}

/* ==========================================================================
   FIX: Knoppen rechts & Dropdown styling
   ========================================================================== */

/* 1. Forceer witte tekst in de vierkante knoppen rechts (GPX, Stroom, Wind) */
/* We moeten specifiek de h4 tag aanspreken, anders wint de algemene body-regel */
#hp33Knop h4, 
#harmonieKnop h4, 
#GPX_upload_Knop h4 {
    color: #ffffff !important;
    margin: 0 !important;      /* Verwijder standaard witruimte */
    font-weight: 700 !important;
    font-size: 12px !important; /* Past vaak beter in de vierkantjes */
}

/* 2. Styling voor het dropdown menu (Selecteer tijd) */
.control-panel select {
    width: 100%;               /* Gebruik de volledige breedte van het paneel */
    padding: 6px 10px;         /* Ruimte binnenin */
    margin-top: 5px;
    margin-bottom: 10px;
    
    border: 1px solid #ccc;    /* Subtiel randje */
    border-radius: 4px;        /* Rondere hoeken */
    
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 13px;
    background-color: #ffffff;
    color: #333333;
    
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); /* Klein schaduwtje binnenin */
    outline: none;
}

/* Zorg dat het label erboven ook netjes staat */
.control-panel label {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    display: block;
}

/* ==========================================================================
   FIX: Dialoogvensters (Routeplanner e.d.)
   ========================================================================== */

/* 1. Algemene tekst in de dialoog strakker zetten */
.jconfirm-box .jconfirm-content {
    line-height: 1.45 !important; /* Was 1.7, dit zet de regels dichter op elkaar */
    font-size: 15px !important;   /* Ietsjes groter/duidelijker indien nodig */
    color: #000 !important;
}

/* 2. Dikgedrukte tekst (<b> of <strong>) écht dik en zwart maken */
.jconfirm-box .jconfirm-content strong,
.jconfirm-box .jconfirm-content b {
    font-weight: 700 !important; /* Forceer 'Bold' (700) ipv 'Semi-bold' */    
}

/* 3. De titel ("Plan je vaarroute") ook dikker maken */
.jconfirm-title-c .jconfirm-title {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #1a2b3c !important;
}

/* 4. De input velden (60, 125, 300) wat netter uitlijnen */
.jconfirm-box input[type="text"], 
.jconfirm-box input[type="number"] {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding: 8px !important;
    font-weight: 600 !important; /* De ingevoerde getallen ook wat dikker */
}

/* 5. Alinea's in de dialoog minder witruimte geven */
.jconfirm-box .jconfirm-content p {
    margin-bottom: 10px !important; /* Minder afstand tussen alinea's */
}

/* ==========================================================================
   GLOBAL FIX: Vetgedrukte tekst overal sterker aanzetten
   ========================================================================== */

/* 1. Zorg dat <b> en <strong> tags altijd goed dik en zwart zijn */
b, strong {
    font-weight: 600 !important; /* Forceer 'Bold' (700) */    
}

/* 2. Koppen (h1 t/m h6) ook forceren naar bold */
/* We behouden hier de kleur die ze al hebben (donkerblauw), alleen de dikte passen we aan */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
}

/* 3. Tabelkoppen (th) waren in je oude CSS op 'normal' gezet.
      Hier zetten we ze weer op vetgedrukt. */
th {
    font-weight: 600 !important; /* Iets minder dik dan kopteksten, maar wel duidelijk */
    color: #000 !important;
}

/* ==========================================================================
   PAGE SPECIFIC STYLES (Verplaatst uit HTML header)
   ========================================================================== */

/* Utility classes */
.no-js { visibility: hidden; opacity: 0; }
.js { visibility: visible; opacity: 1; }

/* Dropdown Menu Styling */
.custom-dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.navbar a:hover,
.custom-dropdown:hover .dropbtn {
  background-color: #f9f9f9;
}
.custom-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 9999999;
}
.custom-dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.custom-dropdown-content a:hover { background-color: #f4f4f4; }
.custom-dropdown:hover .custom-dropdown-content { display: block; }

/* Z-index fixes voor menu en header */
.site-menu, .navbar, header {
  position: relative;
  z-index: 10001 !important;
}
.custom-dropdown { position: relative; }

/* Caret (pijltje) */
.caret {
  display: inline-block;
  width: 0; height: 0;
  line-height: 100px;
  padding: 0;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* Navigatie padding correcties */
.site-menu .nav-link {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.custom-dropdown .dropbtnn,
.custom-dropdown .dropbtn {
  padding-left: 10px;
  padding-right: 10px;
}

/* FIX: Map Wrapper (zodat knoppen niet naar de footer zakken) */
.map-wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden; 
  border-radius: 4px;
}

/* FIX: Scrollen toestaan op content pagina's */
/* (Omdat waterkaart.css standaard overflow:hidden heeft voor de fullscreen app) */
body {
    overflow: auto !important;
}


/* ==========================================================================
   MIGRATIE UIT STYLE.CSS (Menu, Header & Layout)
   ========================================================================== */

/* 1. Basis Layout Wrappers */
.site-wrap {
    position: relative; 
}

/* Zorgt voor de achtergrond op mobiel als het menu open klapt */
.site-wrap:before {
    display: none;
    transition: .3s all ease-in-out;
    background: rgba(0, 0, 0, 0.6);
    content: "";
    position: absolute;
    z-index: 2000;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0; visibility: hidden; 
}
.offcanvas-menu .site-wrap {
    height: 100%; width: 100%; z-index: 2; 
}
.offcanvas-menu .site-wrap:before {
    opacity: 1; visibility: visible; 
}

/* 2. Header & Logo Styling */
.header-top {
    /* Zorg dat de header boven alles ligt, maar onder de mobiele menu overlay */
    position: relative;
    z-index: 1001; 
}
.header-top > .container {
    padding-top: 30px;
    padding-bottom: 30px; 
}
.site-logo {
    font-size: 2rem;
    color: #000; 
    display: block; /* Belangrijk voor images */
}
.site-logo img {
    max-width: 100%; height: auto;
}

/* 3. Hoofd Navigatiebalk (Desktop) */
.site-navbar {
    margin-bottom: 0px;
    z-index: 1999;
    width: 100%;
    background: #fff;
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
}

.site-navbar .site-navigation .site-menu {
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0; 
    list-style: none; /* Verwijder de blauwe bullets */
}

/* Items naast elkaar zetten */
.site-navbar .site-navigation .site-menu > li {
    display: inline-block; 
}

/* Link Styling in menu */
.site-navbar .site-navigation .site-menu > li > a {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .04rem;
    font-weight: 400;
    display: inline-block;
    text-decoration: none !important;
    color: #000; 
    padding: 10px 15px; /* Ruimte rondom links */
}
.site-navbar .site-navigation .site-menu > li > a:hover {
    color: #0061b7; 
}

/* Dropdowns (Submenu's) */
.site-navbar .site-navigation .site-menu .has-children {
    position: relative; 
}
.site-navbar .site-navigation .site-menu .has-children > a {
    position: relative;
    padding-right: 20px; 
}
/* Pijltje naar beneden */
.site-navbar .site-navigation .site-menu .has-children > a:before {
    position: absolute;
    content: "\25BC"; /* Unicode down arrow ipv icomoon */
    font-size: 10px;
    top: 50%; right: 0;
    transform: translateY(-50%);
}

/* De Dropdown Box */
.site-navbar .site-navigation .site-menu .has-children .dropdown {
    visibility: hidden; opacity: 0;
    top: 100%; position: absolute;
    text-align: left;
    border-top: 2px solid #000;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    border-left: 1px solid #edf0f5;
    border-right: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
    padding: 0; margin-top: 20px; margin-left: 0px;
    background: #fff;
    transition: 0.2s 0s; 
    z-index: 9999;
    min-width: 200px;
}

/* Dropdown items */
.site-navbar .site-navigation .site-menu .has-children .dropdown > li {
    list-style: none;
    padding: 0; margin: 0;
    min-width: 200px; 
}
.site-navbar .site-navigation .site-menu .has-children .dropdown > li > a {
    padding: 6px 20px !important;  /* Was 9px, nu 6px voor minder witruimte */
    display: block; 
    text-transform: none;
    font-size: 13px !important;    /* Iets kleiner oogt vaak netter in lijsten */
    line-height: 1.3 !important;   /* Forceer regels dichter op elkaar (overschrijft de 1.7 van body) */
    color: #333;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown > li > a:hover {
    background: #f4f5f9;
    color: #0061b7; 
}

/* Hover effect om dropdown te tonen */
.site-navbar .site-navigation .site-menu .has-children:hover > .dropdown, 
.site-navbar .site-navigation .site-menu .has-children:focus > .dropdown, 
.site-navbar .site-navigation .site-menu .has-children:active > .dropdown {
    transition-delay: 0s;
    margin-top: 0px;
    visibility: visible;
    opacity: 1; 
}

/* 4. Mobiel Menu (Hamburger menu lade) */
.site-mobile-menu {
    width: 300px;
    position: fixed;
    right: 0;
    z-index: 2000;
    padding-top: 20px;
    background: #fff;
    height: calc(100vh);
    transform: translateX(110%);
    box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
    transition: .3s all ease-in-out; 
}
.offcanvas-menu .site-mobile-menu {
    transform: translateX(0%); 
}
.site-mobile-menu .site-mobile-menu-header {
    width: 100%; float: left;
    padding-left: 20px; padding-right: 20px; 
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
    float: right; margin-top: 8px; 
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
    font-size: 30px;
    display: inline-block;
    padding-left: 10px; padding-right: 0px;
    line-height: 1; cursor: pointer;
    transition: .3s all ease; 
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover {
    color: #25262a; 
}
.site-mobile-menu .site-mobile-menu-body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: 0 20px 20px 20px;
    height: calc(100vh - 52px);
    padding-bottom: 150px; 
}
.site-mobile-menu .site-nav-wrap {
    padding: 0; margin: 0;
    list-style: none;
    position: relative; 
}
.site-mobile-menu .site-nav-wrap a {
    padding: 10px 20px;
    display: block;
    position: relative;
    color: #212529; 
    text-decoration: none;
}
.site-mobile-menu .site-nav-wrap a:hover {
    color: #006eac; 
}
.site-mobile-menu .site-nav-wrap li {
    position: relative;
    display: block; 
}

/* 5. Footer & Secties */
.footer {
    font-size: .85rem;
    text-align: center;
    padding: 2rem 0; 
}
.site-section {
    padding: 2.5em 0; 
}
@media (min-width: 768px) {
    .site-section { padding: 7em 0 3em 0; } 
}
.section-title h2 {
    text-decoration: none !important;
    color: #1a2b3c;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    font-size: 20px; 
}

/* 6. Utility voor afbeeldingen */
.img-fluid {
    max-width: 100%;
    height: auto; 
}

/* 7. Aanpassing specifieke knoppen in de header */
/* Zorg dat de loginlink en het icoon netjes naast de knop staan */
.header-right-items a {
  margin-left: 15px;
  color: #333;
  font-weight: 500;
  text-decoration: none;
}
/* ==========================================================================
   FIX: DEFINITIEVE POSITIE KNOPPEN (Gids Pagina) - VERSIE 2
   ========================================================================== */

/* 1. De onzichtbare container: een hoge kolom rechts */
.over-map-gids {
    position: absolute !important;
    top: 163px !important;       /* Begin ruim onder de routeknop */
    bottom: 0px !important;      /* Strek uit tot helemaal onderaan */
    
    /* AANPASSING: Iets meer afstand van de rand om afsnijden te voorkomen */
    right: 10px !important;      
    
    width: auto !important;      /* Laat de breedte zich aanpassen aan de breedste knop */
    min-width: 50px !important;  /* Minimaal zo breed als de zoomknoppen */
    
    height: auto !important;
    z-index: 1000 !important;
    
    pointer-events: none !important; 
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* Zorg dat alles wat hierin zit RECHTS uitlijnt */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; 
}

/* 2. Algemene stijl voor ALLE knoppen in deze container */
.over-map-gids button,
.over-map-gids .printKnop,
.over-map-gids .GPX_upload_Knop,
.over-map-gids .hp33Knop,
.over-map-gids .harmonieKnop,
.over-map-gids .zoomInButton,
.over-map-gids .zoomOutButton {
    pointer-events: auto !important;
    display: block !important;
    
    /* Reset float, we gebruiken nu flex-align */
    float: none !important; 
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
    
    /* Zeker weten dat ze niet verschuiven */
    right: auto !important; 
    left: auto !important;
    transform: none !important;
}

/* 3. GROEP BOVEN: Print, GPX, Stroom, Wind */
.over-map-gids .printKnop,
.over-map-gids .GPX_upload_Knop,
.over-map-gids .hp33Knop,
.over-map-gids .harmonieKnop {
    position: relative !important;
    margin-bottom: 8px !important; 
    width: 45px !important;        
    height: 45px !important;       
    
    /* Zorg dat tekstlabels niet buiten de knop vallen */
    overflow: hidden !important; 
}

/* 4. GROEP ONDER: De Zoomknoppen */
/* We pinnen deze vast aan de bodem met absolute positie */

/* Zoom Uit (-) helemaal onderaan */
.over-map-gids .zoomOutButton {
    position: absolute !important;
    bottom: 25px !important;
    right: 0 !important;           /* Blijft strak rechts in de container */
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
}

/* Zoom In (+) daar bovenop */
.over-map-gids .zoomInButton {
    position: absolute !important;
    bottom: 60px !important;
    right: 0 !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
}

/* ==========================================================================
   FIX: Witruimte bovenin verkleinen (Content pagina's)
   ========================================================================== */

.site-section {
    /* Op desktop was dit 7em (ruim 110px!). We brengen dit terug naar normaal. */
    padding-top: 70px !important; 
    padding-bottom: 70px !important; /* Ook de onderkant iets strakker */
}

/* Optioneel: De ruimte onder de kop ("De Zwemplekken...") ook iets verkleinen */
.section-title {
    margin-bottom: 15px !important; /* Was 30px */
}

/* ==========================================================================
   FIX: Tabelkleuren (Blauw/Donkerblauw)
   ========================================================================== */

/* Oneven regels (Lichter blauw) */
table tr:nth-child(odd) td {
    background-color: rgba(0, 111, 173, 1.0) !important;
    color: #ffffff !important;
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    padding: 10px !important;
}

/* Even regels (Donkerder blauw) */
table tr:nth-child(even) td {
    background-color: rgba(3, 75, 112, 1.0) !important;
    color: #ffffff !important;
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    padding: 10px !important;
}

/* Zorg dat links in de tabel ook wit/leesbaar blijven */
table td a {
    color: #ffffff !important;
    text-decoration: none;
}

/* ==========================================================================
   FIX: Nieuwsberichten & Thumbnails
   ========================================================================== */

.post-entry-2 {
    display: flex;       /* Zorg dat plaatje en tekst naast elkaar staan */
    margin-bottom: 30px;
    font-size: 1.0rem;
    align-items: flex-start; /* Uitlijnen aan de bovenkant */
}

.post-entry-2 .thumbnail {
    /* CRUCIAAL: Geef de div afmetingen, anders zie je de achtergrond niet */
    flex: 0 0 30%;       /* Vaste breedte van 30% */
    width: 30%;
    min-height: 150px;   /* Minimale hoogte garanderen */
    
    margin-right: 20px;  /* Ruimte tussen plaatje en tekst */
    
    background-size: cover;    /* Vul het hele vlak */
    background-position: center;
    background-repeat: no-repeat;
    
    border-radius: 4px;  /* Mooie ronde hoekjes */
}

/* Op mobiel het plaatje verbergen of kleiner maken als je wilt */
@media (max-width: 768px) {
    .post-entry-2 .thumbnail {
        min-height: 100px;
        width: 100px; /* Iets kleiner op mobiel */
        flex: 0 0 100px;
    }
}

.post-entry-2 .contents {
    flex: 1;             /* De tekst pakt de rest van de ruimte */
    padding-left: 0;
    font-size: 0.9rem;
}

.post-entry-2 h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3 !important;
}

.post-entry-2 h2 a {
    color: #1a2b3c;      /* Nautisch donkerblauw */
    text-decoration: none;
}

.post-entry-2 h2 a:hover {
    color: #0061b7;
    font-weight: bold;
    
}

.post-entry-2 .post-meta {
    font-size: 0.8rem;
    color: #999;
    margin-top: 10px;
    
}

/* ==========================================================================
   FIX: Styling Footer / Subscribe Blok
   ========================================================================== */

/* 1. De achtergrond en ruimte */
.subscribe {
    background-color: #f8f9fa !important; /* De lichte grijze kleur */
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    border-top: 1px solid #eee; /* Subtiel lijntje aan de bovenkant */
}

/* 2. De koptekst ("Over de Waterkaart Live...") */
.subscribe h2 {
    font-size: 1.2rem !important;  /* Iets kleiner en netter */
    color: #000000 !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    text-transform: none !important; /* Geen hoofdletters forceren */
}

/* 3. De broodtekst */
.subscribe p {
    font-size: 0.9rem !important;  /* Iets kleiner dan de hoofdtekst */
    line-height: 1.6 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
}

/* 4. Linkjes in dit blok */
.subscribe a {
    color: #0061b7 !important;
    text-decoration: none !important;
}
.subscribe a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   FIX: Abonnement Knop (Vreemde opmaak herstellen)
   ========================================================================== */

.abonnementKnop {
    /* 1. Voorkom dat de tekst afbreekt (fix voor 'abonnemen-t') */
    white-space: nowrap !important; 
    
    /* 2. Maak de knop breed genoeg (zodat hij de ruimte vult) */
    width: 100% !important; 
    display: block !important;
    min-width: 200px !important; /* Minimaal breed genoeg voor de tekst */
    
    /* 3. Ruimte en afmetingen (Herstel btn-lg effect) */
    padding: 12px 20px !important; 
    height: auto !important;       /* Laat hoogte meegroeien */
    font-size: 16px !important;
    line-height: 1.5 !important;
    
    /* 4. Kleur en Stijl */
    background-color: #337ab7 !important; /* Standaard blauw */
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    
    /* 5. Tekst netjes centreren */
    text-align: center !important;
    margin-top: 10px !important;
    cursor: pointer !important;
}

/* Hover effect (muis eroverheen) */
.abonnementKnop:hover {
    background-color: #4fba32 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   FIX: Invoervelden & Selectielijsten (Dropdowns)
   ========================================================================== */

/* 1. Algemene opmaak voor alle invulvelden en dropdowns */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
.form-control {
    height: 45px !important;        /* Prettige hoogte voor vingers en muis */
    padding: 10px 15px !important;  /* Ruimte binnenin */
    background-color: #ffffff !important;
    border: 1px solid #ccc !important; /* Subtiele grijze rand */
    border-radius: 4px !important;  /* Netjes afgerond */
    
    font-size: 14px !important;
    font-family: 'Helvetica', "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif !important;
    color: #333 !important;
    
    width: 100%;                    /* Vul de beschikbare breedte */
    max-width: 100%;
    box-shadow: none !important;
    
    /* Zachte overgang als je erop klikt */
    transition: border-color 0.3s ease !important;
}

/* 2. Actieve status (als je erin klikt) */
/* AANGEPAST: We noemen hier specifiek alleen de tekstvelden. 
   De algemene 'input:focus' is weggehaald zodat je knoppen (type="button") 
   hun eigen kleur (groen/blauw) behouden die Javascript ze geeft. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #0061b7 !important; /* Waterkaart blauw */
    outline: none !important;
    background-color: #ffffff !important;
}

/* Zorg dat de knoppen ook geen lelijke blauwe rand of witte kleur krijgen */
input[type="button"]:focus, 
button:focus,
input[type="submit"]:focus {
    outline: none !important;
    /* Geen background-color hier instellen! 
       Dan pakt hij automatisch weer de kleur die je via Javascript (groen/blauw) instelt. */
}

/* 3. Specifieke styling voor Dropdowns (<select>) */
/* We verbergen de lelijke standaard browser-pijl en zetten er een eigen pijl in */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    padding-right: 35px !important; /* Ruimte maken voor het pijltje rechts */
    
    /* Een klein blauw pijltje (SVG) als achtergrond */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230061b7%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px auto !important;
}

/* Fix voor Internet Explorer (verberg standaard pijl) */
select::-ms-expand {
    display: none;
}

/* ==========================================================================
   FIX: Tabel Tekstkleuren (Forceer alles WIT)
   ========================================================================== */

/* 1. De cel zelf wit maken (voor losse tekst) */
table tr td {
    color: #ffffff !important;
}

/* 2. DE OPLOSSING: De 'botte bijl' selector (*)
   Dit zegt: "Elk element (b, span, div, font, i, strong, etc.) 
   dat IN een tabelcel zit, MOET wit zijn." */
table tr td * {
    color: #ffffff !important;
}

/* 3. Zorg dat links wit blijven (en onderstreept voor duidelijkheid) */
table tr td a {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* =========================================================
   FIX: Navigatie GPS-tabel compact & technisch
   ========================================================= */

table#navtabel {
    font-size: 14px !important;
    font-family: monospace !important; /* cijfers lezen beter */
}

table#navtabel td,
table#navtabel th {
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 4px 0px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

table#navtabel b {
    font-size: 14px;
    font-weight: 600 !important; /* labels wel iets vet */
}

table#navtabel .kolom1,
table#navtabel .kolom2 {
    font-family: monospace !important;
    letter-spacing: 0 !important;
}

/* ==========================================================================
   FIX: Uitzondering voor Transparante Tabellen (Doorvaarthoogte etc.)
   ========================================================================== */

/* We zoeken specifiek naar cellen die 'transparent' zijn ingesteld */
table tr td[style*="transparent"],
table tr td[style*="transparent"] * {
    color: #333333 !important;      /* Forceer donkergrijs/zwart */
    text-shadow: none !important;   /* Geen schaduw */
}

/* Specifiek voor de dikgedrukte waardes (zoals 1.5 meter) */
table tr td[style*="transparent"] b,
table tr td[style*="transparent"] strong {
    color: #000000 !important;      /* Echt zwart voor de cijfers */
    font-weight: bold !important;
}

/* Dit pakt alle <a> tags (links) binnen cellen die transparant zijn */
table tr td[style*="transparent"] a {
    color: #ff7300 !important;       /* De bekende oranje kleur */
    font-weight: bold !important;    /* Vetgedrukt */
    text-decoration: none !important; /* Geen onderlijning */
}

/* Optioneel: als je er met de muis overheen gaat, mag er wel een streepje komen */
table tr td[style*="transparent"] a:hover {
    text-decoration: underline !important;
    color: #e66700 !important;       /* Iets donkerder oranje bij hover */
}

/* ==========================================================================
   FIX: 'Lees dit nieuwsbericht' link dikgedrukt
   ========================================================================== */

.post-entry-2 .post-meta a {
    font-weight: bold !important; /* Maakt de tekst dikgedrukt (700) */
    text-decoration: none !important; /* Haalt eventueel de streep weg (optioneel) */
}

/* Optioneel: Zorg dat hij ook een kleurtje krijgt bij mouse-over */
.post-entry-2 .post-meta a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   FIX: Nieuwspagina Layout (Artikelen & Lijsten)
   ========================================================================== */

/* 1. Artikelen (Waterkaart Live Nieuws) - Foto links, tekst rechts */
article {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

article .imageholder {
    width: 35%;          /* Foto pakt 35% van de breedte */
    padding-right: 20px;
    margin: 0;
}

article .imageholder img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* De tekst container (titel + p + link) */
article h5, 
article p, 
article span.d-block {
    width: 65%;          /* Tekst pakt de rest */
    margin-left: auto;   /* Schuif naar rechts */
    padding-left: 0;
}

/* Omdat H5, P en SPAN losse elementen zijn in je HTML, 
   moeten we ze even 'vangen' in de flex layout: */
article h5 { margin-top: 0; margin-bottom: 10px; font-weight: bold; }
article p { margin-bottom: 10px; }

/* Mobiele weergave: alles onder elkaar */
@media (max-width: 768px) {
    article .imageholder, 
    article h5, article p, article span.d-block {
        width: 100%;
    }
    article .imageholder { margin-bottom: 15px; }
}

/* 2. Nieuwslijsten (Algemeen & Kustwacht) - De 'trend-entry' items */
.trend-entry {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f4f4f4;
}

.trend-entry .number {
    font-size: 20px;
    font-weight: 700;
    color: #e6e6e6; /* Lichtgrijs nummer */
    margin-right: 20px;
    min-width: 30px;
}

.trend-contents h2 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px;
}

.trend-contents h2 a {
    color: #333;
    text-decoration: none;
}

.trend-contents h2 a:hover {
    color: #0061b7;
}

.trend-contents .post-meta {
    font-size: 12px;
    color: #888;
}

/* ==========================================================================
   FIX: Externe Nieuwsfeed (Plaatje Rechts)
   ========================================================================== */

/* 1. Reset de rommelige container van de externe feed */
.external-news-container .row {
    margin: 0 !important;
    display: block !important;  /* Reset Foundation row gedrag */
}

.external-news-container .columns {
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* 2. Het Artikel Blok - Grid Layout */
.external-news-container article {
    display: grid;
    /* Kolom 1: Tekst (flexibel), Kolom 2: Plaatje (vast 180px) */
    grid-template-columns: 1fr 180px; 
    gap: 0 25px; /* Ruimte tussen tekst en plaatje */
    
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    align-items: start; /* Zorg dat alles bovenin uitlijnt */
}

/* 3. Het Plaatje (Zet deze geforceerd in de RECHTER kolom) */
.external-news-container article .imageholder {
    grid-column: 2;      /* Kolom 2 = Rechts */
    grid-row: 1 / 99;    /* Span over alle regels (zodat tekst er niet onder duikt) */
    margin: 0 !important;
    width: 100% !important;
}

.external-news-container article .imageholder img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* 4. De Teksten (Zet deze in de LINKER kolom) */
/* We selecteren alle losse elementen die in het artikel zitten */
.external-news-container article h5,
.external-news-container article p,
.external-news-container article span.d-block {
    grid-column: 1;      /* Kolom 1 = Links */
    width: auto !important;
    margin: 0 0 10px 0 !important; /* Reset marges */
}

/* Styling van de kop */
.external-news-container article h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0 !important;
}

.external-news-container article h5 a {
    color: #333;
    text-decoration: none;
}
.external-news-container article h5 a:hover {
    color: #0061b7;
}

/* 5. Mobiele weergave (Plaatje boven, tekst onder) */
@media (max-width: 576px) {
    .external-news-container article {
        grid-template-columns: 1fr; /* Alles onder elkaar */
    }
    .external-news-container article .imageholder {
        grid-column: 1; 
        grid-row: 1; /* Plaatje eerst */
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    .external-news-container article h5,
    .external-news-container article p,
    .external-news-container article span.d-block {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ==========================================================================
   FIX: Ruimte tussen invoervelden (Formulieren)
   ========================================================================== */

.form-group {
    margin-bottom: 20px !important; /* Zorgt voor lucht onder elk veld */
}

/* Zorg dat labels/tekst boven de velden ook netjes staan */
#verbergdiv b {
    display: inline-block;
    margin-bottom: 10px;
    margin-top: 5px;
}

/* Checkbox container wat extra ruimte geven */
.checkbox-group {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* ==========================================================================
   FIX: Knopbreedte aanpassen aan inhoud (i.p.v. 100% breedte)
   ========================================================================== */

/* Specifiek voor de registreer/submit knoppen */
input[type="submit"].btn-block {
    width: auto !important;       /* Breedte afhankelijk van tekst */
    display: inline-block !important;
    min-width: 150px !important;  /* Optioneel: zodat hij niet té smal wordt */
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ==========================================================================
   FIX: Witte tekst in Routeberekening Tabel (Popup)
   ========================================================================== */

.white-bold {
    color: white;
    font-weight: bold;
}
/* ==========================================================================
   FIX: Nieuws Detailpagina (Afbeelding Rechts & Uitlijning)
   ========================================================================== */

/* 1. HOOFDARTIKEL: Afbeelding naar RECHTS dwingen */
/* We selecteren de div die nu 'float-md-left' heeft binnen het artikel */
.main-article .float-md-left {
    float: right !important;       /* Forceer naar rechts */
    margin-right: 0 !important;    /* Haal de oude marge rechts weg */
    margin-left: 25px !important;  /* Voeg marge links toe (voor de tekst) */
    margin-bottom: 15px !important;
    
    /* Zorg dat de foto niet te groot wordt, maar wel duidelijk is */
    max-width: 45% !important;     
    width: auto !important;
    clear: right;
}

/* Mobiel: Afbeelding gewoon bovenaan over de volle breedte */
@media (max-width: 768px) {
    .main-article .float-md-left {
        float: none !important;
        display: block !important;
        margin-left: 0 !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* De afbeelding zelf ook vullend maken */
    .main-article .float-md-left img {
        width: 100% !important;
    }
}

/* 2. ZIJBALK (Meer artikelen) */
/* De lijstjes rechts iets netter uitlijnen */

/* De titel van de zijbalk-items */
.col-lg-4 article h5 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
}

.col-lg-4 article h5 a {
    color: #333 !important;
    text-decoration: none !important;
}
.col-lg-4 article h5 a:hover {
    color: #0061b7 !important;
}

/* De 'Lees meer' linkjes in de zijbalk */
.col-lg-4 article a.small.font-weight-bold {
    color: #0061b7 !important;
    font-size: 12px !important;
    text-transform: uppercase;
}

/* De scheidingslijnen in de zijbalk */
.col-lg-4 hr {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* ==========================================================================
   FIX: Detailpagina Layout Herstel (Kop, Foto, Tekst)
   ========================================================================== */

/* 1. Reset de flexbox op het hoofdartikel */
/* Dit is CRUCIAAL: hiermee werkt 'float-right' weer en loopt de tekst om de foto */
.main-article {
    display: block !important;      /* Terug naar normaal blok-gedrag */
    width: 100% !important;         /* Gebruik de volle breedte van de kolom */
    border-bottom: none !important; /* Geen lijntje onder het hele artikel */
    padding-bottom: 0 !important;
}

/* 2. Zorg dat de titel altijd bovenaan over de volle breedte staat */
.main-article .section-title {
    display: block !important;
    width: 100% !important;
    clear: both !important;
}

/* 3. De foto rechts dwingen (Specifiek voor de detailpagina) */
/* We pakken de div met 'float-md-right' binnen het artikel */
.main-article .float-md-right {
    float: right !important;        /* Forceer rechts */
    margin-left: 30px !important;   /* Ruimte links voor de tekst */
    margin-bottom: 20px !important; /* Ruimte onder */
    margin-right: 0 !important;     /* Geen ruimte rechts */
    max-width: 50% !important;      /* Max helft van de pagina */
    display: block !important;
}

/* 4. Fix voor de zijbalk (Rechterkolom) */
/* Zorg dat de items daar wel netjes naast elkaar blijven (flex) maar compacter */
.col-lg-4 article {
    display: flex !important;       /* Plaatje naast tekst */
    flex-wrap: nowrap !important;   /* Niet onder elkaar zakken */
    align-items: flex-start !important;
    margin-bottom: 15px !important; /* Minder witruimte dan op de hoofdpagina */
    padding-bottom: 15px !important;
}

/* Mobiele weergave: Foto in artikel weer bovenaan */
@media (max-width: 768px) {
    .main-article .float-md-right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* 2. ZIJBALK (Meer artikelen) */
/* De structuur in je HTML is op zich goed (flexbox), maar we finetunen de afstanden */

.col-lg-4 article {
    /* Zorg dat tekst en plaatje netjes bovenin uitlijnen */
    align-items: flex-start !important; 
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* De thumbnail rechts in de zijbalk */
.sidebar-image-wrapper {
    /* Zorg voor wat afstand tussen de tekst en het plaatje */
    margin-left: 15px !important; 
}

/* De titels in de zijbalk iets compacter maken */
.col-lg-4 h5.h6 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
}

.col-lg-4 h5 a {
    color: #333 !important;
}
.col-lg-4 h5 a:hover {
    color: #0061b7 !important;
}

/* Verberg de extra <hr> lijnen als we borders gebruiken (optioneel, oogt rustiger) */
.col-lg-4 hr.my-3 {
    display: none !important;
}
/* ==========================================================================
   FIX: Nieuws Detailpagina (Definitieve Layout)
   ========================================================================== */

/* 1. CONTAINER: Gebruik de volledige breedte */
.main-article {
    display: block !important;      /* Zeker weten geen flexbox */
    width: 100% !important;
    padding: 0 !important;          /* Verwijder alle interne ruimte links/rechts */
    margin: 0 !important;
}

/* 2. DE KOP (H2) - Groot en duidelijk */
.main-article .section-title h2 {
    font-family: 'Helvetica', "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 34px !important;     /* Krantenkop formaat */
    line-height: 1.15 !important;   /* Strakke regelafstand */
    font-weight: 700 !important;    /* Dikgedrukt */
    color: #1a2b3c !important;      /* Donkerblauw */
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    clear: both !important;         /* Altijd op een eigen regel */
}

/* 3. DE AFBEELDING - Rechts uitgelijnd */
.main-article .float-md-right {
    float: right !important;        /* Rechts plakken */
    margin-left: 30px !important;   /* Ruimte tussen tekst en foto */
    margin-bottom: 15px !important; /* Ruimte onder de foto */
    margin-right: 0 !important;     /* Strak tegen de rechterkant */
    margin-top: 5px !important;     /* Iets zakken t.o.v. de bovenkant */
    
    max-width: 45% !important;      /* Niet breder dan 45% van de tekstkolom */
    width: auto !important;
    height: auto !important;
}

/* 4. DE LEAD (Intro) - Compact en leesbaar */
.main-article .lead {
    font-size: 17px !important;     /* Kleiner dan voorheen, goed leesbaar */
    line-height: 1.6 !important;
    font-weight: 600 !important;    /* Half-vet */
    color: #333 !important;
    margin-bottom: 15px !important;
    
    /* Zorg dat de tekst om de foto vloeit */
    display: block !important;
    width: auto !important;
}

/* Zorg dat paragrafen binnen de lead geen extra marges maken */
.main-article .lead p {
    margin: 0 !important;
    display: inline; /* Helpt bij tekstomloop */
}

/* 5. DE BROODTEKST (Content) */
.main-article .content-body {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #000 !important;
    
    /* Ook deze moet om de foto vloeien */
    display: block !important;
    width: auto !important;
}

/* 6. MOBIELE WEERGAVE */
@media (max-width: 768px) {
    /* Op mobiel foto bovenaan en breed */
    .main-article .float-md-right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Iets kleinere kop op mobiel */
    .main-article .section-title h2 {
        font-size: 26px !important;
    }
}

/* ==========================================================================
   FIX: Detailpagina Tekst Breedte (Resetten van lijst-stijl)
   ========================================================================== */

/* Dit herstelt de <p> tags in het hoofdartikel naar normaal gedrag */
.main-article p,
.main-article .content-body p {
    width: auto !important;        /* Niet 65%, maar gewoon vullend */
    margin-left: 0 !important;     /* Niet naar rechts duwen */
    padding-left: 0 !important;    /* Geen extra ruimte links */
    float: none !important;        /* Zeker weten niet zweven */
    display: block !important;
}

/* Zorg dat de container zelf ook echt de ruimte pakt */
.main-article .content-body {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Extra zekerheid: Koppen in de tekst ook resetten */
.main-article h3, 
.main-article h4, 
.main-article h5 {
    width: 100% !important;
    margin-left: 0 !important;
    clear: both; /* Koppen altijd op een nieuwe regel onder de foto */
}

/* ==========================================================================
   FIX: Zijbalk Uitlijning & Linkjes (Definitief)
   ========================================================================== */

/* 1. RESET DE INSPRINGING
   De tekst sprong naar rechts door een oude regel. We dwingen hem terug naar links. */
.col-lg-4 article h5,
.col-lg-4 article p,
.col-lg-4 article .pr-3 {
    width: 100% !important;     /* Gebruik de volle breedte */
    margin-left: 0 !important;  /* Niet naar rechts duwen */
    padding-left: 0 !important; /* Geen extra ruimte links */
    text-align: left !important;
}

/* 2. LINKJES: GEEN HOOFDLETTERS */
.col-lg-4 article a.small.font-weight-bold {
    text-transform: none !important; /* Gewoon normale letters */
    font-weight: 700 !important;     /* Wel lekker dikgedrukt */
    color: #0061b7 !important;
    font-size: 13px !important;      /* Ietsjes groter voor leesbaarheid */
    display: inline-block !important;
    margin-top: 5px !important;
}

/* 3. ALGEMENE STYLING ZIJBALK ITEMS */
.col-lg-4 article {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
}

/* Titel styling in de zijbalk */
.col-lg-4 h5.h6 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
}

/* De thumbnail rechts */
.sidebar-image-wrapper {
    margin-left: 15px !important; /* Nette afstand tussen tekst en plaatje */
    flex-shrink: 0 !important;    /* Voorkom dat plaatje wordt samengedrukt */
}

/* ==========================================================================
   FIX: Witruimte Nieuwsberichten (.contents container)
   ========================================================================== */

/* 1. De container zelf strak trekken */
.contents {
    padding-left: 0 !important;  /* Forceer padding naar 0 */
    margin-left: 0 !important;   /* Forceer marge naar 0 */
}

/* 2. De inhoud (kop, tekst, meta) ook resetten */
/* Soms hebben h2 of p tags van zichzelf marges die we hier niet willen */
.contents h2,
.contents p,
.contents .post-meta {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* 3. Zorg dat de link 'Lees dit nieuwsbericht' ook netjes links lijnt */
.contents .d-block {
    margin-left: 0 !important;
}

/* ==========================================================================
   FIX: Dubbele lijnen verwijderen
   ========================================================================== */

/* Verberg de <hr> lijnen in de hoofdkolom, want de artikelen hebben al een rand */
.col-lg-7 hr,
.external-news-container hr {
    display: none !important;
}

/* ==========================================================================
   FIX: Textarea Hoogte (Bericht veld)
   ========================================================================== */

textarea.form-control {
    height: auto !important;  /* Laat de 'rows' attribute de hoogte bepalen */
    min-height: 250px;        /* Zorg voor een redelijke basishoogte */
}

/* ==========================================================================
   FIX: Factuur Button (Variabele breedte & Groene Hover)
   ========================================================================== */

.btn-primary {
    width: auto !important;         /* Hef de vaste 125px op, pas aan aan tekst */
    min-width: 125px !important;    /* Zorg dat hij niet te smal wordt bij korte tekst */
    display: inline-block !important;
    padding: 10px 25px !important;  /* Ruimte links en rechts van de tekst */
    white-space: nowrap !important; /* Dwing tekst altijd op één regel */
}

/* Groene kleur bij eroverheen muizen */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #28a745 !important; /* Fris groen */
    border-color: #28a745 !important;     /* Rand ook groen */
    color: #ffffff !important;            /* Tekst wit houden */
}

/* ==========================================================================
   FIX: Page Loader (Draaiend Cirkeltje)
   ========================================================================== */

/* 1. Het witte scherm over de hele pagina */
#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 999999; /* Zorg dat hij écht boven alles ligt */
    display: none;   /* Standaard verbergen */
}

/* De Javascript voegt de class 'show' toe tijdens het laden */
#loader.show {
    display: block;
}

/* 2. De draaiende cirkel positioneren */
#loader .circular {
    animation: loader-rotate 2s linear infinite;
    height: 48px;
    width: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -24px; /* Helft van de breedte voor perfect centreren */
    margin-top: -24px;
}

/* 3. De animatie van de oranje lijn */
#loader .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: loader-dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
}

/* 4. De animaties zelf (Keyframes) */
@keyframes loader-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loader-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

/* ==========================================================================
   FIX: Z-index Menu vs. Content Headers
   ========================================================================== */

/* De algemene 'header' regel zette alles op 10001. 
   We resetten dit hier specifiek voor de titels in de tekst, 
   zodat het uitklapmenu er weer overheen kan vallen. */
header.section-title {
    z-index: 1 !important; 
    position: relative !important;
}


    /* --- Specifiek voor Waterstanden (via JS class 'waterstand-popup') --- */
.waterstand-popup .leaflet-popup-content {
    width: 340px !important;
    min-height: 450px !important;
    margin: 13px !important; 
    padding-right: 10px !important; 
}

.waterstand-popup .leaflet-popup-content svg {
    width: 100% !important;
    display: block;
}

/* --- GLOBAAL: Voor ALLE popups --- */
.leaflet-popup-content {
    /* Verberg de horizontale scrollbalk overal */
    overflow-x: hidden !important; 
    
    /* Zorg dat de verticale scrollbalk wel verschijnt als het nodig is */
    overflow-y: auto !important;   
}

/* ==========================================================================
   Actuele Waterdata (Metingen, Clusters & Grafieken)
   ========================================================================== */
.grafiek-container {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    border-top: 0px dashed #eee;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.grafiek-container.show {
    max-height: 200px; 
    opacity: 1;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 2px dashed #eee;
}

/* Custom Marker Cluster Styling */
.custom-cluster-icon {
    background-color: #00529f; 
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
}

/* Verberg de standaard Leaflet cluster kleuren */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: transparent !important; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: transparent !important; }

/* Custom Marker Styling */
.station-marker { border: 2px solid white; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); transition: transform 0.2s, background-color 0.2s; }
.station-marker:hover { transform: scale(1.3); z-index: 1000 !important; }
.marker-waterstand { background-color: #06b4ba; }
.marker-super { background-color: #1e3a8a; }
.marker-lucht { background-color: #0ea5e9; }
.marker-water-overig { background-color: #00529f; }

/* Popup Styling */
.rws-meetstation-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.rws-meetstation-popup .leaflet-popup-content { margin: 0; min-width: 350px; width: auto !important; }
.rws-meetstation-popup .leaflet-popup-tip-container { display: none; }
.popup-header { background: #00529f; color: #fff; padding: 12px 15px; }
.popup-header-sub { font-size: 11px; opacity: 0.8; margin-bottom: 2px; }
.popup-header-title { font-size: 15px; font-weight: bold; }
.popup-body { padding: 5px 15px 15px 15px; background: #fff; max-height: 400px; overflow-y: auto; }
.category-header { font-size: 11px; font-weight: bold; color: #64748b; text-transform: uppercase; margin-top: 12px; margin-bottom: 4px; border-bottom: 2px solid #e2e8f0; padding-bottom: 2px; }
.measurement { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #f0f0f0; padding: 8px 0; font-size: 13px; }
.measurement:last-child { border-bottom: none; }
.m-desc { color: #555; font-size: 12px; padding-right: 15px; line-height: 1.4; flex: 1; white-space: normal; }
.m-waarde { font-weight: bold; color: #00529f; white-space: nowrap; text-align: right; flex-shrink: 0; }
.toggle-btn { display: block; width: 100%; text-align: center; font-size: 11px; color: #00529f; background: #f0f4f8; padding: 8px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background 0.2s; margin-top: 10px; }
.toggle-btn:hover { background: #e2e8f0; }

/* Vloeiende label weergave bij inzoomen (via .toon-rws-labels class op map) */
.rws-station-label { background: rgba(255, 255, 255, 0.8); border: 1px solid #00529f; border-radius: 4px; padding: 2px 5px; font-size: 11px; font-weight: bold; color: #00529f; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity 0.2s; }
.toon-rws-labels .rws-station-label { visibility: visible !important; opacity: 1 !important; }