/* Algemene body instellingen */
body {
    background-color: #f4f4f4;
    color: #333;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Stijl voor de hoofdinhoud van pagina's */
.page-content {
    max-width: 700px;
    margin: 30px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Logo styling op alle pagina's */
.page-logo {
    display: block;
    margin: 0 auto 20px auto;
    max-height: 80px;
    object-fit: contain;
}

/* Bericht styling op alle pagina's */
.page-message {
    margin-top: 20px;
    font-size: 1.5rem;
    color: #333;
}

/* Overlay boodschap styling */
.overlay-message {
    margin: 20px 0;
    font-size: 1.125rem;
    color: #555;
}

.btn-custom-large {
    /* Knop-instellingen */
    background-color: #840b55;
    border: 2px solid #840b55;
    color: #ffffff;
    padding: 8px 16px; /* Padding aan de zijkanten */
    border-radius: 4px;
    font-size: 0.875rem !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: flex; /* Flexbox voor centreren */
    align-items: center; /* Verticaal centreren */
    justify-content: center; /* Horizontaal centreren */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Zorg ervoor dat padding en borders meegerekend worden */
    width: 400px !important; /* Stel een vaste breedte in */
    margin: 0 auto; /* Zorg ervoor dat de knop gecentreerd wordt in de container */
}


.btn-custom-large:hover {
    background-color: #f0f0f0;
    color: #333;
}

/* Responsive styling voor mobiele apparaten */
@media (max-width: 576px) {
    .btn-custom-large {
        padding: 12px 24px; /* Vergrote padding voor betere zichtbaarheid op mobiel */
        font-size: 1rem; /* Iets grotere tekstgrootte voor mobiel */
        width: 300px !important; /* Stel een vaste breedte in */
        max-width: none; /* Verwijder maximale breedte om de knop te laten groeien */
    }
}


/* Knop-instellingen */
.btn-custom  {
    background-color: #840b55;
    border: 2px solid #840b55;
    color: #ffffff;
    padding: 8px 16px; /* Padding aan de zijkanten */
    border-radius: 4px;
    font-size: 0.875rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: flex; /* Flexbox voor centreren */
    align-items: center; /* Verticaal centreren */
    justify-content: center; /* Horizontaal centreren */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Zorg ervoor dat padding en borders meegerekend worden */
    width: 110px; /* Stel een vaste breedte in */
    margin: 0 auto; /* Zorg ervoor dat de knop gecentreerd wordt in de container */
}

.btn-event:hover {
    background-color: #830151;
    border-color: #830151;
    color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}


.btn-custom:hover {
    background-color: #830151;
    border-color: #830151;
    color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Knop-instellingen */
.btn-event  {
    background-color: #840b55;
    border: 2px solid #840b55;
    color: #ffffff;
    padding: 8px 16px; /* Padding aan de zijkanten */
    border-radius: 4px;
    font-size: 0.875rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: flex; /* Flexbox voor centreren */
    align-items: center; /* Verticaal centreren */
    justify-content: center; /* Horizontaal centreren */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Zorg ervoor dat padding en borders meegerekend worden */
    margin: 0 auto; /* Zorg ervoor dat de knop gecentreerd wordt in de container */
}

/* Navbar instellingen */
.navbar {
    background-color: #840b55;
    color: #ffffff;
    padding: 12px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.navbar-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraal uitlijnen voor een professionelere uitstraling */
    width: 100%;
    padding: 0 15px;
    position: relative;
}

.nav-link {
    color: #ffffff;
    font-size: 1rem;
    margin: 0 10px; /* Verminder afstand tussen knoppen */
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s; /* Voeg een overgang toe voor hover */
    padding: 8px 12px; /* Zorg voor een goede klikbare ruimte */
    border-radius: 4px; /* Maak de hoeken licht afgerond */
}

.nav-link:hover {
    background-color: #aa1d70; /* Hover-kleur voor desktop */
    color: #f4f4f4; /* Lichtere tekstkleur op hover */
}

.navbar h1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 1.75rem;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}


.event-list {
    margin-top: 20px;
}

.event-item {
    background-color: #f9f9f9; /* Lichtgrijze achtergrond */
    border: 1px solid #ddd; /* Grijze rand */
    border-radius: 5px; /* Ronde hoeken */
    padding: 15px;
    margin-bottom: 15px;
}

.event-item h4 {
    margin: 0 0 10px; /* Onderste marge voor de titel */
}

/* Zorg ervoor dat de afbeelding in de Lightbox goed past */
.lightbox img {
    width: 100%; /* Zorgt ervoor dat de afbeelding de breedte van de viewport gebruikt */
    height: auto; /* Houdt de aspectverhouding van de afbeelding */
    max-height: 100vh; /* Beperk de hoogte tot 100% van de viewport hoogte */
    object-fit: contain; /* Zorgt ervoor dat de afbeelding in de container past zonder vervorming */
}


/* Zorg ervoor dat de Lightbox in fullscreen modus werkt */
.lightbox.fullscreen img {
    width: 100vw; /* 100% van de viewport breedte */
    height: auto; /* Houd de verhouding van de afbeelding */
    object-fit: contain; /* Behoud de aspect ratio */
}

.no-events {
    text-align: center;
    color: #666;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* eventueel hoogte om het wat “ruimte” te geven */
}
.no-events h3 {
    text-align: center;
    width: 100%;
}

.vacation-message {
    max-width: 700px;
    margin: 30px auto;
    padding: 20px 30px;
    background-color: #ffffff;          /* wit, zoals .page-content */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #333333;                     /* standaard tekstkleur */
    font-family: Arial, sans-serif;    /* zoals in jouw body */
}

.vacation-message h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #840b55;                    /* kleur knop of een warme kleur uit jouw palet */
}

.vacation-message p {
    font-size: 1.1rem;
    margin-bottom: 15px;
    line-height: 1.5;
}

.vacation-message p:last-child {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0;
}

/* Zorgt voor onderscheid */
.event-item.vergadering {
    background-color: #f0f8ff;   /* lichtblauwe achtergrond */
    border-left: 5px solid #840b55; /* blauwe accentlijn */
}

.event-item.vergadering h3 {
    color: #333333; /* titel in zelfde blauw */
}



@media (max-width: 600px) {
  .vacation-message {
      max-width: 100%;          /* op mobiel volledige breedte */
      margin: 20px 15px;       /* minder marge */
      padding: 15px 20px;      /* iets minder padding */
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      color: #333333;
      font-family: Arial, sans-serif;
  }

  .vacation-message h2 {
      font-size: 1.5rem;       /* iets kleiner voor mobiel */
      margin-bottom: 12px;
      color: #840b55;
  }

  .vacation-message p {
      font-size: 1rem;
      margin-bottom: 12px;
      line-height: 1.4;
  }

  .vacation-message p:last-child {
      font-weight: bold;
      font-size: 1.1rem;
      margin-bottom: 0;
  }
}


@media (max-width: 600px) {
  .no-events {
      text-align: center;
      color: #666;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px; /* eventueel hoogte om het wat “ruimte” te geven */
  }
  .no-events h3 {
      text-align: center;
      width: 100%;
  }
}


@media (max-width: 576px) {
    .lightbox img {
        max-width: 90%; /* Maak het iets groter op mobiele apparaten */
        height: auto; /* Houd de verhoudingen van de afbeelding */
    }
}




/* Responsive aanpassingen voor mobiele apparaten */
@media (max-width: 768px) {
    .navbar-content {
        justify-content: flex-start;
    }

    .navbar h1 {
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        padding: 0 5px;
    }

    .nav-link {
        font-size: 0.875rem;
        margin-right: 10px;
        transition: background-color 0.3s, color 0.3s; /* Voeg een overgang toe voor hover */
        border-radius: 4px; /* Maak de hoeken licht afgerond */
    }

    /* Hamburger menu stijlen */
    .navbar-toggler {
        border: none;
        padding: 0.25rem;
        background: transparent;
        outline: none;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        width: 30px;
        height: 30px;
    }

    /* Hamburger menu geopende stijlen */
    .navbar-collapse {
        background-color: #840b55;
        padding: 10px 0;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        z-index: 10;
    }

    .navbar-collapse.show {
        display: block;
    }

    .nav-link {
        display: block;
        width: 100%;
        padding: 12px 20px;
        font-size: 1.00rem;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .nav-link:hover {
        background-color: #aa1d70; /* Hover-kleur voor mobiele links */
        color: #f4f4f4; /* Lichtere tekstkleur op hover */
    }
}

.event-item.passed {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    color: #9e9e9e;
    overflow: hidden;
}

.event-item.passed::after {
    content: "Evenement afgelopen";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(245, 245, 245, 0.9); /* Licht grijs overlay met hogere dekking */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0rem; /* Standaard tekstgrootte */
    font-weight: bold;
    color: #333; /* Donkere tekstkleur voor betere leesbaarheid */
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.95; /* Verhoogde dekking voor betere zichtbaarheid */
    border-radius: inherit;
    z-index: 0;
}

@media (max-width: 576px) {
    .event-item.passed::after {
        font-size: 0.8rem; /* Kleinere tekstgrootte */
        padding: 10px; /* Extra padding om het visueel beter te positioneren */
        background: rgba(245, 245, 245, 0.95); /* Iets meer dekking */
        color: #333; /* Donkere tekstkleur op mobiele apparaten */
    }

    .event-item.passed {
        padding: 10px; 
    }
}

#klasOptions label {
    display: block;
    cursor: pointer;
    padding: 5px;
}

#klasOptions input[type="checkbox"] {
    margin-right: 6px;
}

#klasOptions label:hover {
    background-color: #f0f0f0;
}

/* Container instellingen voor overige pagina's */
.container {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Logo instellingen */
.logo {
    max-height: 80px;
    margin: 0 auto 20px auto;
    display: block;
}

.message {
    text-align: center;
    color: #333;
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Bericht instellingen */
.message2 {
    text-align: center;
    margin-top: 20px;
    font-size: 1rem;
    color: #333;
}

/* Event-list instellingen */
.event-list {
    margin-top: 20px;
}

/* Info sectie styling */
.info-section {
    margin: 0 auto;
    padding: 20px;
    max-width: 800px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Tekst styling */
.section-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Responsiviteit */
@media (max-width: 576px) {
    .message {
        font-size: 1.5rem;
    }

    .section-text {
        font-size: 0.875rem;
    }
}

/* Event-item instellingen */
.event-item {
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Datum en Tijd styling */
.event-item .event-datetime {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 10px;
}

.event-item .event-datetime .date {
    font-weight: bold;
    color: #333;
}

.event-item .event-datetime .time {
    color: #555;
}

/* Event-item kop instellingen */
.event-item h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.event-item p {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5; /* Vergroot de regelhoogte voor betere leesbaarheid */
}


/* Event-items instellingen */
.event-items {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    display: none;
    flex-direction: column;
    align-items: flex-start;
}


/* Datum en Tijd styling */
.event-items .event-datetime {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 10px;
}

.event-items .event-datetime .date {
    font-weight: bold;
    color: #333;
}

.event-items .event-datetime .time {
    color: #555;
}

/* Event-item kop instellingen */
.event-items h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.event-items p {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5; /* Vergroot de regelhoogte voor betere leesbaarheid */
}

/* Button-container instellingen voor inschrijven knop binnen een event-item */
.btn-container {
    position: absolute;
    right: 10px;
    top: 30%;
    transform: translateY(0);
    width: auto;
    box-sizing: border-box;
}

.school-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 10vh; /* Of een andere gewenste hoogte in vh */
    max-height: 200px; /* Maximale hoogte om te voorkomen dat de box te groot wordt */
    min-height: 100px; /* Minimale hoogte om te voorkomen dat de box te klein wordt */
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 1rem;
    color: #555;
    margin: 0; /* Zorg ervoor dat er geen onverwachte marges zijn */
}

.school-info a {
    color: #840b55;
    font-weight: bold;
    text-decoration: none;
}

.school-info a:hover {
    text-decoration: underline;
}

/* Footer instellingen */
.footer {
    margin-top: 20px;
    padding: 10px;
    font-size: 0.875rem;
    color: #999;
    text-align: center;
}

/* Container voor de contact knop */
.button-container {
    text-align: center;
    margin: 20px 0;
}

/* Container voor de aangepaste checkbox */
.custom-checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

/* Stijl van de verborgen checkbox */
.custom-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Vierkant voor de aangepaste checkbox */
.custom-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #ccc;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* Verander de kleur naar rood bij selectie */
.custom-checkbox-container input:checked ~ .custom-checkbox {
    background-color: #840b55;
}

/* Vinkje binnen de checkbox */
.custom-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Toon het vinkje als de checkbox is aangevinkt */
.custom-checkbox-container input:checked ~ .custom-checkbox:after {
    display: block;
}

/* Stijl van het vinkje */
.custom-checkbox-container .custom-checkbox:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.centered-text {
    display: block;
    text-align: center;
    margin-top: 20px;
}

.centered-text p {
    margin: 0; /* Zorg ervoor dat er geen extra marge boven of onder de paragrafen staat */
}

.afhaalmoment-titel {
    margin-bottom: 10px; /* Voegt een lege lijn toe tussen de titel en de momenten */
}

.event-item p {
    margin-bottom: 5px; /* Voeg eventueel meer ruimte toe tussen de afhaalmomenten */
}

strong {
    font-weight: bold; /* Zorgt ervoor dat de tekst vetgedrukt is */
}


.follow-us {
    display: flex;
    align-items: center;  /* Verticaal centreren van de iconen */
    justify-content: center; /* Horizontaal centreren van de iconen */
    gap: 10px;
}

.follow-us p {
    font-size: inherit;  /* Zorg ervoor dat de tekstgrootte overeenkomt met de rest van de pagina */
}

/* Algemene stijl voor sociale iconen */
.social-icons {
    font-size: 25px;
    display: flex;
    align-items: center;  /* Verticaal centreren van iconen */
    justify-content: center; /* Horizontaal centreren van iconen */
    gap: 10px;
}

/* Facebook kleur */
.social-icon.facebook {
    color: #4267B2; /* Officiële Facebook blauw */
}

.social-icon.facebook:hover {
    color: #365899; /* Iets donkerder blauw bij hover */
}

/* Instagram kleur */
.social-icon.instagram {
    color: #E1306C; /* Officiële Instagram roze */
}

.social-icon.instagram:hover {
    color: #C13584; /* Iets donkerder bij hover */
}

/* E-mail kleur */
.social-icon.email {
    color: #007bff; /* Kleur voor het e-mail icoon */
}

.social-icon.email:hover {
    color: #0056b3; /* Donkerder blauw bij hover */
}

/* GDPR Popup Styling */
.gdpr-popup {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    color: #333;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    border-top: 1px solid #ccc;
    font-size: 0.875rem; /* Kleiner lettertype voor een strakke uitstraling */
    text-align: center;
}

.gdpr-popup-content {
    max-width: 90%; /* Zorg ervoor dat het popup-inhoud niet te breed is */
    margin: 0 auto;
    text-align: center;
}

.gdpr-popup h2 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    color: #333;
}

.gdpr-popup p {
    font-size: 0.875rem; /* Kleiner lettertype voor tekst */
    margin: 0 0 10px 0;
}

.gdpr-popup a {
    color: #007bff; /* Kleur voor de links */
    text-decoration: none;
}

.gdpr-popup a:hover {
    text-decoration: underline;
}

.gdpr-popup .btn {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 0.875rem; /* Kleinere knoptekst */
    background-color: #840b55; /* Hoofdkleur */
    border: none;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.gdpr-popup .btn:hover {
    background-color: #6b0040; /* Iets donkerder bij hover */
}


/* Popup styling */
.popup {
    display: none; /* Standaard verborgen */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.popup img {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
    margin-top: 50px;
}

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #000;
    text-decoration: none;
}



/* Media Queries voor responsiviteit */
@media (max-width: 576px) {
    .gdpr-popup {
        padding: 10px;
        font-size: 0.75rem; /* Nog kleiner lettertype voor mobiele apparaten */
    }

    .gdpr-popup h2 {
        font-size: 1rem;
    }

    .gdpr-popup p {
        font-size: 0.75rem;
    }

    .gdpr-popup .btn {
        padding: 8px 16px;
        font-size: 0.75rem;
    }
}

/* Knoppen op mobiele apparaten */
@media (max-width: 768px) {
    .btn-custom {
        width: 100%; /* Zorg ervoor dat knoppen de volledige breedte van hun container gebruiken */
        box-sizing: border-box; /* Zorg ervoor dat padding en borders meegerekend worden */
    }
}

/* Responsieve knopinstellingen voor mobiele apparaten */
@media (max-width: 576px) {
    .btn-custom {
        width: 110px; /* Stel een vaste breedte in */
        padding: 6px 12px; /* Verminder de padding voor kleinere schermen */
        font-size: 0.90rem; /* Verklein de fontgrootte voor kleinere schermen */
        
    }
}

/* Knoppen op mobiele apparaten */
@media (max-width: 768px) {
    .btn-event {
        width: 100%; /* Zorg ervoor dat knoppen de volledige breedte van hun container gebruiken */
        box-sizing: border-box; /* Zorg ervoor dat padding en borders meegerekend worden */
    }
}

/* Responsieve knopinstellingen voor mobiele apparaten */
@media (max-width: 576px) {
    .btn-event {
        width: 110px; /* Stel een vaste breedte in */
        padding: 6px 12px; /* Verminder de padding voor kleinere schermen */
        font-size: 0.90rem; /* Verklein de fontgrootte voor kleinere schermen */
        
    }
}

/* Media Queries voor responsiviteit */
@media (max-width: 576px) {
    .info-btn {
        font-size: 1.0rem; /* Mogelijk iets kleinere tekstgrootte voor kleinere schermen */
        padding: 6px; /* Iets minder padding voor kleinere schermen */
        width: 110px; /* Stel een vaste breedte in */
    }

    .event-item {
        padding: 15px; /* Verminder de padding voor een betere mobiele weergave */
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .event-item .event-datetime {
        font-size: 1rem; /* Vergroot de lettergrootte voor betere leesbaarheid op kleinere schermen */
    }

    .event-item .event-datetime .date {
        font-size: 1.1rem; /* Vergroot de datumtekst voor betere zichtbaarheid */
    }

    .event-item .event-datetime .time {
        font-size: 1rem; /* Vergroot de tijdtekst voor betere zichtbaarheid */
    }

    .afhaalmoment-titel {
        font-size: 1.1rem; /* Vergroot de lettergrootte van de titel op mobiele apparaten */
        margin-bottom: 15px; /* Voeg meer ruimte toe onder de titel */
    }
}

/* Algemene styling voor knoppen */
.btn-container {
    display: flex; /* Zorg ervoor dat knoppen naast elkaar staan */
    align-items: center; /* Verticaal centreren van knoppen */
    gap: 10px; /* Ruimte tussen de knoppen */
}

/* Info Button styling */
.btn-info {
    background-color: #840b55;
    border: 2px solid #840b55;
    color: #ffffff;
    padding: 8px 16px; /* Padding aan de zijkanten */
    border-radius: 4px;
    font-size: 0.875rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: flex; /* Flexbox voor centreren */
    align-items: center; /* Verticaal centreren */
    justify-content: center; /* Horizontaal centreren */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Zorg ervoor dat padding en borders meegerekend worden */
    width: 11px; /* Stel een vaste breedte in */
    margin: 0 auto; /* Zorg ervoor dat de knop gecentreerd wordt in de container */
}

/* Vergroot het icoon binnen de info-knop */
.btn-info i {
    font-size: 1.25rem; /* Pas de grootte van het icoon aan */
}

.btn-info:hover {
    background-color: #830151;
    border-color: #830151;
    color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Info Modal Styling */
.info-modal {
    display: none; /* Verberg de modal standaard */
    position: fixed; /* Blijf op de juiste plaats tijdens scrollen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Donkere achtergrond met transparantie */
    z-index: 1000; /* Zorg dat de modal bovenop andere elementen ligt */
    overflow: auto; /* Voeg scroll toe indien nodig */
}

.info-modal-content {
    background-color: transparent; /* Maak de achtergrond transparant */
    margin: 0; /* Verwijder de standaard marges */
    padding: 0; /* Verwijder de standaard padding */
    border: none; /* Verwijder de rand */
    width: 100%; /* Zorg ervoor dat de inhoud de volledige breedte gebruikt */
    max-width: 100%; /* Zorg ervoor dat de inhoud niet breder is dan de viewport */
    height: 100%; /* Zorg ervoor dat de inhoud de volledige hoogte gebruikt */
    display: flex; /* Gebruik flexbox voor centreren */
    align-items: center; /* Verticaal centreren */
    justify-content: center; /* Horizontaal centreren */
}

#info-image {
    max-width: 90%; /* Zorg ervoor dat de afbeelding niet te groot is */
    max-height: 90%; /* Zorg ervoor dat de afbeelding niet te hoog is */
    height: auto; /* Behoud de aspect ratio van de afbeelding */
}

.info-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    color: #ffffff; /* Of een andere kleur die zichtbaar is tegen de achtergrond */
    cursor: pointer;
    z-index: 1001; /* Zorg dat de sluitknop boven de afbeelding ligt */
}

#over {
    max-width: 800px; /* Zorgt voor een mooie breedte */
    margin: 0 auto; /* Centreert de sectie */
    padding: 20px; /* Voeg wat padding toe */
    background-color: #f9f9f9; /* Achtergrondkleur */
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Schaduw voor diepte */
}

.section-title {
    font-size: 2em; /* Grotere titel */
    color: #333; /* Donkere kleur voor de titel */
    margin-bottom: 15px; /* Ruimte onder de titel */
    text-align: center; /* Centreert de titel */
}

.section-text {
    font-size: 1.0em; /* Iets grotere tekst */
    line-height: 1.6; /* Verbeterde leesbaarheid */
    color: #555; /* Lichtere tekstkleur */
    margin-bottom: 10px; /* Ruimte tussen paragrafen */
}

a {
    color: #007bff; /* Standaard linkkleur */
    text-decoration: none; /* Geen onderlijn */
}

.schooljaar {
    cursor: pointer; /* Cursor verandert naar pointer voor klikbare sectie */
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px; /* Optioneel: afgeronde hoeken */
    /* font-size: 1,2rem; */
    font-size: 1.25rem;
    color: #333;
    transition: background-color 0.3s, color 0.3s; /* Voor een soepele overgang */
}

/* Hover-effect voor de schooljaar items */
.schooljaar:hover {
    background-color: #e9e9e9; /* Achtergrondkleur veranderen bij hover */
    color: #840b55; /* Hover kleur voor schooljaar titel */
}

.custom-radio-container {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    margin-bottom: 14px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    transition: 0.2s;
}

.custom-radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-radio {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    width: 22px;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 50%;
    transition: border 0.2s, background-color 0.2s;
}

.custom-radio-container input:checked ~ .custom-radio {
    background-color: #840b55;
    border-color: #840b55;
}

.custom-radio::after {
    content: "";
    position: absolute;
    display: none;
}

.custom-radio-container input:checked ~ .custom-radio::after {
    display: block;
}

.custom-radio::after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

@media (max-width: 600px) {
    .custom-radio-container {
        font-size: 1rem; /* of 16px */
        padding-left: 40px;
        margin-bottom: 18px;
        min-height: 38px; /* optioneel: gelijke hoogte als select/input */
        display: flex;
        align-items: center;
    }

    .custom-radio {
        height: 26px;
        width: 26px;
    }

    .custom-radio::after {
        top: 7px;
        left: 7px;
        width: 10px;
        height: 10px;
    }
}



/* Responsieve aanpassingen voor mobiel */
@media (max-width: 576px) {
    .schooljaar {
        font-size: 1rem; /* Kleinere tekstgrootte voor mobiel */
    }

    .schooljaar:hover {
        color: #840b55; /* Standaard kleur op hover om verwarring te voorkomen */
    }
}


.page-title {
    text-align: center; /* Centraal uitlijnen */
    font-size: 2em; /* Grotere tekst */
    margin: 20px 0; /* Ruimte boven en onder */
    color: #5D5D5D; /* Kleur naar keuze */
}

@media (max-width: 576px) {
    .page-title {
        font-size: 1.5em; /* Verklein de titel voor mobiele apparaten */
        margin: 10px 0; /* Verminder de marges voor een compactere weergave */
    }
}

@media (max-width: 576px) {
    .event-item {
        margin: 10px 0; /* Voeg ruimte toe tussen evenement items */
        border: 1px solid #ddd; /* Optionele rand voor duidelijkere scheiding */
        border-radius: 5px; /* Maak de hoeken iets ronder */
        background-color: #f9f9f9; /* Achtergrondkleur voor contrast */
    }
}

@media (max-width: 576px) {
    .event-items {
        margin: 10px 0; /* Voeg ruimte toe tussen evenement items */
        border: 1px solid #ddd; /* Optionele rand voor duidelijkere scheiding */
        border-radius: 5px; /* Maak de hoeken iets ronder */
        background-color: #f9f9f9; /* Achtergrondkleur voor contrast */
    }
}



/* Responsieve knopinstellingen voor mobiele apparaten */
@media (max-width: 576px) {
    .btn-info {
        width: auto; /* Zorg ervoor dat de breedte automatisch wordt aangepast */
        padding: 6px 12px; /* Verminder de padding voor kleinere schermen */
        font-size: 0.90rem; /* Verklein de fontgrootte voor kleinere schermen */
    }
}



/* Media Queries voor responsiviteit */
@media (max-width: 576px) {
    .school-info {
        height: auto; /* Verhoog de hoogte indien nodig */
        padding: 20px; /* Vergroot de padding indien nodig */
    }

    .page-content {
        padding: 10px;
    }

    .logo {
        max-height: 60px;
    }

    .navbar h1 {
        font-size: 1.2rem;
    }

    .custom-checkbox-container {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    .school-info {
        height: 8vh; /* Of een andere gewenste hoogte in vh voor grotere schermen */
        max-height: 150px; /* Pas de max-height aan indien nodig */
        padding: 15px; /* Pas de padding aan indien nodig */
    }
}
/* Stijl voor afhaalmomenten op mobiele apparaten */
@media (max-width: 576px) {
    .event-item {
        padding: 15px; /* Verminder de padding voor een betere mobiele weergave */
    }

    .event-item p {
        font-size: 1rem; /* Vergroot de lettergrootte voor betere leesbaarheid op kleinere schermen */
        line-height: 1.6; /* Verhoog de regelhoogte voor betere leesbaarheid */
    }

    .afhaalmoment-titel {
        font-size: 1.1rem; /* Vergroot de lettergrootte van de titel op mobiele apparaten */
        margin-bottom: 15px; /* Voeg meer ruimte toe onder de titel */
    }
}