body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f9f9f9;
}

h2 {
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
	table-layout: fixed; /* Zorgt ervoor dat kolombreedtes consistent zijn */
    overflow-x: auto; /* Voeg horizontale scroll toe als nodig */
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
	white-space: nowrap; /* Voorkom dat tekst over meerdere regels wordt verdeeld */
    overflow: hidden; /* Verberg overtollige tekst */
    text-overflow: ellipsis; /* Voeg '...' toe aan afgebroken tekst */
}

table th {
    background-color: #f2f2f2;
}

a {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    text-decoration: none;
    background-color: #007BFF;
    color: #fff;
    border-radius: 5px;
}

a:hover {
    background-color: #0056b3;
}

/* Centraal positioneren van het formulier */
form {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 50px auto; /* Centraal plaatsen */
    font-size: 16px;
}

/* Inputvelden stijl */
form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box; /* Zorgt dat padding de breedte niet vergroot */
}

/* Knop stijl */
form button {
    width: 100%;
    padding: 10px;
    background-color: #5DADE2; /* De huidige hoverkleur als standaard */
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease; /* Gladde overgang voor hover */
}

form button:hover {
    background-color: #3498DB; /* Nog donkerder blauw bij hover */
}


/* Foutmeldingen */
form p {
    color: red;
    font-size: 14px;
    margin: 0;
    text-align: center;
}

/* Optionele titel stijl */
form h2 {
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}


/* Algemene container-stijl voor gecentreerde inhoud */
.container {
    background-color: #ffffff;
    padding: 20px 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 50px auto; /* Horizontaal en verticaal gecentreerd */
    text-align: center; /* Zorgt ervoor dat tekst en links gecentreerd worden */
}

/* Stijl voor de hoofdtekst */
.container h1 {
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
}

.container p {
    margin-bottom: 20px;
    font-size: 16px;
    color: #555;
}

/* Links in de container */
.container a {
    display: inline-block;
    margin: 10px 5px;
    padding: 10px 15px;
    text-decoration: none;
    background-color: #5DADE2; /* De huidige hoverkleur als standaard */
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease; /* Gladde overgang voor hover */
}

.container a:hover {
    background-color: #3498DB; /* Nog donkerder blauw bij hover */
}


/* Specifieke stijlen voor fout- en succesmeldingen */
.error {
    color: red;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

.success {
    color: green;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* Container-stijl */
.container {
    background-color: #ffffff;
    padding: 20px 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 1200px;  /* Maximale breedte van de container */
    margin: 50px auto;  /* Centraal plaatsen */
    text-align: center;
    width: 100%;  /* Laat de container de volledige breedte gebruiken */
    box-sizing: border-box;  /* Zorg ervoor dat padding niet de breedte vergroot */
}


/* Formulierstijl */
form .form-group {
    margin-bottom: 20px;
}

form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

form textarea, form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Stijl voor de knoppen onder het formulier */
.buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Ruimte tussen de knoppen */
    margin-top: 20px;
}

.buttons a {
    padding: 10px 15px;
    text-decoration: none;
    background-color: #5DADE2; /* De huidige hoverkleur als standaard */
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease; /* Gladde overgang voor hover */
}

.buttons a:hover {
    background-color: #3498DB; /* Nog donkerder blauw bij hover */
}


/* Titel stijl */
h1 {
    text-align: center;
    font-size: 28px;
    color: #333;
    margin-bottom: 30px;
}

.datetime-picker {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Foutmelding styling */
.error {
    color: red;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* Succesmelding styling */
.success {
    color: green;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* Foutmelding styling */
.error {
    color: red;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* Succesmelding styling */
.success {
    color: green;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

small {
    font-size: 12px;
    color: #555;
    margin-top: 5px;
    display: block;
}

button[type="submit"] {
    margin-top: 10px; /* Ruimte tussen het wachtwoordveld en de knop */
}

/* Ruimte tussen de invoervelden en de knop */
form input, form button {
    margin-bottom: 15px; /* Verhoogt de ruimte tussen velden en knop */
}

/* Verhoog de ruimte boven de succesmelding */
.success {
    margin-top: 20px;
}

/* Kleine tekst voor wachtwoordvereisten */
small {
    font-size: 12px;
    color: #555;
    margin-top: 5px;
    display: block;
}

/* De registratie-link om het duidelijker te maken */
a {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    text-decoration: none;
    background-color: #5DADE2; /* De huidige hoverkleur als standaard */
    color: #fff;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Gladde overgang voor hover */
}

a:hover {
    background-color: #3498DB; /* Nog donkerder blauw bij hover */
}



a:hover {
    background-color: #0056b3;
}

textarea {
    padding: 10px;
}

button {
    margin-right: 10px;
}

/* Algemene container-stijl voor overzichtpagina */
.overview-container {
    background-color: #ffffff !important;
    padding: 20px 40px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    max-width: 800px !important;
    margin: 50px auto !important;
    text-align: center !important;
}

}

/* Tabelstijl voor het overzicht */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
	table-layout: fixed; /* Zorgt ervoor dat kolombreedtes consistent zijn */
    overflow-x: auto; /* Voeg horizontale scroll toe als nodig */
}

table th, table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    font-size: 16px;
	white-space: nowrap; /* Voorkom dat tekst over meerdere regels wordt verdeeld */
    overflow: hidden; /* Verberg overtollige tekst */
    text-overflow: ellipsis; /* Voeg '...' toe aan afgebroken tekst */
}

table th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
}

table td {
    color: #555;
}

/* Stijl voor de knoppen onderaan */
.buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Ruimte tussen de knoppen */
    margin-top: 20px;
}



/* Verhoog de ruimte tussen de tabel en de knoppen */
.buttons a {
    margin-top: 20px;
}

.overview-summary {
    margin-top: 30px;
    text-align: center;
}

.summary-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.summary-item {
    background-color: #f9f9f9;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 150px;
}

.summary-item h4 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #333;
}

.summary-item p {
    font-size: 16px;
    color: #555;
    margin: 0;
}


/* Dropdownmenu */
.menu-dropdown {
    display: none; /* Verborgen standaard */
    position: absolute; /* Absoluut gepositioneerd t.o.v. de .hamburger-container */
    right: 0; /* Lijn het menu uit aan de rechterkant van de container */
    top: 35px; /* Zet het menu net onder de hamburgerlijn */
    background-color: white; /* Witte achtergrondkleur */
    border-radius: 5px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 100; /* Zorgen dat het menu boven andere elementen ligt */
}

.menu-dropdown a {
    color: black; /* Zwarte tekstkleur */
    text-decoration: none; /* Geen onderstreping */
    display: block; /* Maakt de link een blokelement */
    padding: 10px 15px; /* Binnenruimte voor leesbaarheid */
    background-color: transparent; /* Geen achtergrondkleur */
    border: none; /* Geen rand */
    margin: 0; /* Geen ruimte tussen links */
    text-align: left; /* Tekst uitlijnen naar links */
    white-space: nowrap; /* Houd tekst op één regel */
}


.menu-dropdown a:hover {
    background-color: #f5f5f5; /* Lichtgrijze achtergrond bij hover */
    color: black; /* Zwarte tekstkleur blijft */
}

/* Toon menu als actief */
.menu-dropdown.active {
    display: block;
}

.top-bar h1 {
    display: none; /* Verberg de titel */
}

/* Styling voor de bovenste balk */
.top-bar {
    display: flex;
    justify-content: flex-end; /* Hamburgermenu aan de rechterkant */
    align-items: center;
    padding: 10px 20px;
    background-color: transparent; /* Geen achtergrondkleur */
    color: black; /* Zwarte tekstkleur */
}

/* Hamburger menu */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.hamburger-menu div {
    background-color: black; /* Zwarte kleur voor de hamburgermenu lijnen */
    height: 3px;
    width: 25px;
    margin: 3px 0;
}

.hamburger-container {
    position: relative; /* Maak de container het referentiepunt voor het menu */
}


.flatpickr-confirm {
    background-color: #5DADE2 !important; /* Lichtblauw als standaardkleur */
    color: #ffffff !important; /* Witte tekst */
    border: none !important;
    border-radius: 5px; /* Afronde hoeken */
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease; /* Gladde overgang voor hover */
}

.flatpickr-confirm:hover {
    background-color: #3498DB !important; /* Donkerder blauw bij hover */
}

/* ✅ Verwijder het vinkje */
.flatpickr-confirm::after {
    content: none !important;
}

.delete-icon {
    width: 20px;
    height: 20px;
}

/* Specifieke breedtes voor kolommen */
table th:nth-child(1), table td:nth-child(1) {
    width: 15%; /* Pas de breedte van de eerste kolom aan */
}

table th:nth-child(2), table td:nth-child(2) {
    width: 50%; /* Zorg voor meer ruimte voor de beschrijving */
}

table th:nth-child(3), table td:nth-child(3),
table th:nth-child(4), table td:nth-child(4) {
    width: 15%; /* Zorg voor consistente breedtes voor starttijd en eindtijd */
}

table th:nth-child(5), table td:nth-child(5) {
    width: 15%; /* Breedte voor de duur-kolom */
}

p.error {
    color: red;
    font-weight: bold;
}