/* style.css - Stijlen voor de menu-structuur en inhoud */

/* WebKit styling voor scrollbars */
#list-container::-webkit-scrollbar {
  width: 5px; /* Breedte van de scrollbar */
}

#list-container::-webkit-scrollbar-track {
  background: transparent; /* Transparante achtergrond */
  border-radius: 10px; /* Afgeronde hoeken */
}

#list-container::-webkit-scrollbar-thumb {
  background: white; /* Witte schuiver */
  border-radius: 10px; /* Afgeronde hoeken */
}

#list-container::-webkit-scrollbar-thumb:hover {
  background: #ddd; /* Lichtgrijs bij hover */
}

/* Verwijder de knoppen (boven en onder) in WebKit-browsers */
#list-container::-webkit-scrollbar-button {
  display: none; /* Knoppen verwijderen */
}

/* Firefox styling */
#list-container {
  scrollbar-color: white transparent; /* Witte thumb en transparante track */
  scrollbar-width: thin; /* Dunne scrollbar */
}


/* Optionele algemene styling */




/* Pas de achtergrondkleur en transparantie aan */


/* Alleen custom popups */
.leaflet-popup.custom-popup .leaflet-popup-content-wrapper {
    background-color: rgba(255, 255, 255, 0.01) !important; /* Nog transparanter */
    color: Black !important; /* Groene tekst */
	text-shadow: 0 0 9px rgba(255, 255, 255, 0.9); /* Witte waas */
    border-radius: 0px !important; /* Geen afgeronde hoeken */
    box-shadow: none !important; /* Geen schaduw */
	border-color: black; 
}

/* Verwijder de pijlpunt alleen voor custom popups */
.leaflet-popup.custom-popup .leaflet-popup-tip-container {
    display: none !important;
}

.leaflet-popup.custom-popup .leaflet-popup-close-button {
    display: none !important; /* Verberg de sluitknop */
}

#map {
    background-color: black; /* Zwarte achtergrond */
}



#Proefallarm {
    background: linear-gradient(180deg, #f2f2f2, #d9d9d9, #b3b3b3); /* Een rijker zilveren verloop */
    border-color: black;  
    border-width: 4px;
}

#Proefallarm h2 {
    color: black; /* Strakke zwarte kleur voor de kop */
}

#Proefallarm p {
    color: black; /* Zwarte kleur voor de tekst */
}

#Proefallarm hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid black; /* Strakke zwarte lijn */
    width: 100%; /* Breedte van de lijn */
}



#MEDIC01\20\20 {
    background: linear-gradient(0deg, #FFD54F, #FFEB3B, #FFC107, #FFEB3B, #FFD54F);
    border-color: Blue;  
    border-width: 2px;
}

#MEDIC01 {
    background: linear-gradient(0deg, #FFD54F, #FFEB3B, #FFC107, #FFEB3B, #FFD54F);
    border-color: Blue;  
    border-width: 4px;
}
#MEDIC01 h2 {
    color: blue;  /* Kleur voor de h2 */
    text-transform: uppercase;
}

#MEDIC01 p {
    color: blue;  /* Kleur voor de p */
}

#MEDIC01 hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid Blue; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}

#Lifeliner1 {
    background: linear-gradient(0deg, #FFD54F, #FFEB3B, #FFC107, #FFEB3B, #FFD54F); 
    border-color: Red;  
    border-width: 3px;

}
#Lifeliner1 h2 {
    color: blue;  /* Kleur voor de h2 */
}

#Lifeliner1 p {
    color: blue;  /* Kleur voor de p */
}

#Lifeliner1 hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid Red; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}

#Lifeliner3 {
    background: linear-gradient(0deg, #FFD54F, #FFEB3B, #FFC107, #FFEB3B, #FFD54F); 
    border-color: Red;  
    border-width: 3px;

}
#Lifeliner3 h2 {
    color: blue;  /* Kleur voor de h2 */
}

#Lifeliner3 p {
    color: blue;  /* Kleur voor de p */
}

#Lifeliner3 hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid Red; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}

#Lifeliner4 {
    background: linear-gradient(0deg, #FFD54F, #FFEB3B, #FFC107, #FFEB3B, #FFD54F); 
    border-color: Red;  
    border-width: 3px;

}
#Lifeliner4 h2 {
    color: blue;  /* Kleur voor de h2 */
}

#Lifeliner4 p {
    color: blue;  /* Kleur voor de p */
}

#Lifeliner4 hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid Red; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}

#Politie {
    background: linear-gradient(0deg, #0044cc, #0055ff, #007bff, #0055ff, #0044cc);
    border-color: darkblue;  
    border-width: 2px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 8.5);  /* Zachte rookachtige schaduw */
}

#Politie h2 {
    color: white;  /* Kleur voor de h2 */
}

#Politie p {
    color: white;  /* Kleur voor de p */
}

#Politie hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid White; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}

#Ambulance {
    background: linear-gradient(0deg, #FFD54F, #FFEB3B, #FFC107, #FFEB3B, #FFD54F); 
    border-color: gold;  
    border-width: 2px;
}

#Ambulance h2 {
    color: blue;  /* Kleur voor de h2 */
}

#Ambulance p {
    color: blue;  /* Kleur voor de p */
}

#Ambulance hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid Blue; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}

#MMT {
    background: linear-gradient(0deg, #FFD54F, #FFEB3B, #FFC107, #FFEB3B, #FFD54F); 
    border-color: gold;  
    border-width: 2px;
}

#MMT h2 {
    color: blue;  /* Kleur voor de h2 */
}

#MMT p {
    color: blue;  /* Kleur voor de p */
}

#MMT hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid Blue; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}

#Brandweer {
    background: linear-gradient(0deg, #7A1A1A, #B71C1C, #C62828, #B71C1C, #7A1A1A);
    border-color: darkred;  
    border-width: 2px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 8.5);  /* Zachte rookachtige schaduw */
}

#Brandweer h2 {
    color: Gold;  /* Kleur voor de h2 */
}

#Brandweer p {
    color: Gold;  /* Kleur voor de p */
}

#Brandweer hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid gold; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}

#OMS {
    background: black;
    border-color: darkred;  
    border-width: 4px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 8.5);  /* Zachte rookachtige schaduw */
    
}

#OMS h2 {
    color: Gold;  /* Kleur voor de h2 */
}

#OMS p {
    color: Gold;  /* Kleur voor de p */
}

#OMS hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid darkred; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}


#KNRM {

    background: White;
    border-color: Orange;  
    border-width: 8px;
    text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.7);  /* Zachte witte schaduw */
}

#KNRM h2 {
    color: Black;  /* Kleur voor de h2 */
}

#KNRM p {
    color: Black;  /* Kleur voor de p */
}

#KNRM hr {
    color: Orange;  /* Kleur voor de p */
    border: none; /* Verwijdert de standaard rand */
    border-top: 4px solid Orange; /* Bovenste rand om de lijn te maken */
    width: 100%; /* Breedte van de lijn */
}


 body {

            font-family: Arial, sans-serif;
            margin: 0;
            margin-top: 80px;
            padding: 15px;
            background-color: #f4f4f4;
        }
        .tile-container {
            display: flex;
            flex-direction: column;
            padding: 20px;
            gap: 1px; /* Vergroot de ruimte tussen de tiles */
            margin: 20px; /* Voeg ruimte rondom de container toe */


    
        }
        .tile {
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f4f4f4;
            padding: 1px;
            display: Flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 1.1);
            margin: 15px 0; /* Voeg ruimte tussen de tiles toe */
            width: calc(100%); /* Zorg ervoor dat de tiles niet tegen de randen van de container zitten */
            box-sizing: border-box; /* Zorg ervoor dat padding en border worden meegerekend in de breedte */
        }
        .tile img {
            width: 75px;
            height: 80px;
            /* border-radius: 10%; */
            margin-left: 40px;
            margin-right: 10px;


        }
        .tile .content {
			position: relative; /* Voor absolute positionering van elementen erin */
			flex: 1; /* Neemt beschikbare ruimte in */
			
			overflow: hidden; /* Voorkomt dat content buiten de tile komt */
            display: flex;
            background-color: transparent;
            flex-direction: column;
            margin: 1px 0; /* Voeg ruimte tussen de tiles toe */

        }
        .tile h2 {
            margin: 3px;
            font-size: 14px;
        }
        .tile p {
            margin: 4px 0 0;
	    font-size: 12px;
            color: #666;
            text-align: left;
        }


.tile[data-prioriteit="GRIP"] {
      background-color: black;
    border: 4px solid red;
    color: gold;
    animation: knipperen 1s infinite;
}
.tile[data-prioriteit="GRIP"] hr {
    border: none; /* Verwijdert de standaard rand */
    border-top: 2px solid #FF4500; /* Begin met vuurrood */
    width: 100%; /* Breedte van de lijn */
    animation: knipperende-hr 1s infinite; /* Toepassen van de knipperende animatie */
}

/* Knipperende cirkel achter emergency vliegtuigen */
.emergency-7700::before,
.emergency-7600::before,
.emergency-7500::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: emergencyPulse 1.2s infinite;
    z-index: -1;
    pointer-events: none;
}

.emergency-7700::before { background: rgba(255, 0, 0, 0.7); }
.emergency-7600::before { background: rgba(255, 165, 0, 0.7); }
.emergency-7500::before { background: rgba(255, 255, 0, 0.7); }

@keyframes emergencyPulse {
    0% { 
        transform: translate(-50%, -50%) scale(0.7); 
        opacity: 0.8; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.4); 
        opacity: 0.3; 
    }
    100% { 
        transform: translate(-50%, -50%) scale(0.7); 
        opacity: 0.8; 
    }
}

@media (max-width: 768px) {

 body {
            font-family: Arial, sans-serif;
            margin: 0;
            margin-top: 80px;
            padding: 10px;
            background-color: #f4f4f4;
            font-size: 10px;
        }
        .tile-container {
            display: flex;
            flex-direction: column;
            padding: 10px;
            gap: 1px; /* Vergroot de ruimte tussen de tiles */
            margin: 1px; /* Voeg ruimte rondom de container toe */


    
        }
        .tile {
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f4f4f4;
            padding: 1px;
            display: Flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 1.1);
            margin: 8px 0; /* Voeg ruimte tussen de tiles toe */
            width: calc(100%); /* Zorg ervoor dat de tiles niet tegen de randen van de container zitten */
            box-sizing: border-box; /* Zorg ervoor dat padding en border worden meegerekend in de breedte */
        }
        .tile img {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            margin-left: 20px;
            margin-right: 5px;
        }
        .tile .content {
            display: flex;
            background-color: transparent;
            flex-direction: column;
            margin: -5px 0; /* Voeg ruimte tussen de tiles toe */
            width: 100%;
        }
        .tile h2 {

            margin: 2px;
            font-size: 10px;
        }
        .tile p {
            margin: 5px 0 0;
            color: #666;
            font-size: 8px;
            text-align: left;
        }

}





nav {
   background-color: #333;
    color: white;
    padding: 15px;
    width: 100%;
    position: fixed; /* Zorg ervoor dat het menu vast blijft staan */
    top: 0;
    left: 0;
    z-index: 500; /* Zorg ervoor dat het menu boven andere elementen blijft */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    display: block;
    padding: 10px 20px;
    color: white;
    text-align: center;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #575757;
}

.content {
    padding: 20px;
    background-color: white;
    margin: 20px;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    text-align: center;
    Margin: 1px;
}

@keyframes knipperen {
       0% {
        border-color: #FF4500; /* Vuurrood */
        border-width: 4px; /* Dikte blijft 4px */
    }
    20% {
        border-color: #FFA500; /* Helder oranje */
        border-width: 4px; /* Dikte blijft 4px */
    }
    40% {
        border-color: #FFD700; /* Goud */
        border-width: 4px; /* Dikte blijft 4px */
    }
    60% {
        border-color: #FFEA00; /* Helder geel */
        border-width: 4px; /* Dikte blijft 4px */
    }
    80% {
        border-color: #FF8C00; /* Donker oranje */
        border-width: 4px; /* Dikte blijft 4px */
    }
    100% {
        border-color: #FF4500; /* Terug naar vuurrood */
        border-width: 4px; /* Dikte blijft 4px */
    }
}

@keyframes knipperende-hr {
    0% {
        border-color: #FF4500; /* Vuurrood */
    }
    20% {
        border-color: #FFA500; /* Helder oranje */
    }
    40% {
        border-color: #FFD700; /* Goud */
    }
    60% {
        border-color: #FFEA00; /* Helder geel */
    }
    80% {
        border-color: #FF8C00; /* Donker oranje */
    }
    100% {
        border-color: #FF4500; /* Terug naar vuurrood */
    }
}


/* RESIZE HANDLE CSS - Voeg toe aan einde van swipeable-content.css */

.resize-handle {
    position: absolute;
    z-index: 100;
    background: transparent;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resize-handle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.resize-dots {
    display: flex;
    gap: 3px;
    padding: 4px;
    border-radius: 4px;
}

.resize-dot {
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.resize-handle:hover .resize-dot {
    background-color: white;
    transform: scale(1.3);
}

/* Desktop - verticaal handvat links */
@media (min-width: 769px) {
    .resize-handle {
        left: 0;
        top: 0;
        bottom: 0;
        width: 12px;
        cursor: ew-resize;
    }
    
    .resize-dots {
        flex-direction: column;
    }
    
    #list-container {
        padding-left: 12px;
    }
}

/* Mobile - horizontaal handvat boven */
@media (max-width: 768px) {
    .resize-handle {
        left: 0;
        right: 0;
        top: 0;
        height: 12px;
        cursor: ns-resize;
    }
    
    .resize-dots {
        flex-direction: row;
    }
    
    #list-container {
        padding-top: 12px;
        padding-left: 0;
    }
}