body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }


        #resetMedewerkersLink{
            float: right;
            position: absolute;
            right: 15px;
            top: 15px;
        }
        
        /*Menu*/
        
        menu{
            margin: 0;
            padding: 0;
        }
        
         menu ul.menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
            overflow: hidden; margin-bottom: 15px;
        }

       menu li {
            float: left;
        }

        menu li a {
            display: block;
            color: #333;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        menu li a:hover {
            background-color: #ddd;
        }
        
        /*EINDE Menu*/

        .ploegenbox {
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .ploeg {
            width: 250px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            margin: 0 20px;
        }

        .ploeg h3 {
            margin: 0 0 10px 0;
            font-size: 18px;
            text-align: center;
        }

        .textdis {
            width: 600px;
            text-align: center;

        }

        .medewerker {
            background-color: #fff;
            padding: 8px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
            list-style: none;
        }

        .medewerker.halve_dag {
            background-color: #ffe699;
            /* Geef medewerkers met halve dag werktijd een andere achtergrondkleur */

        }

        .medewerker:hover {
            background-color: #f0f0f0;
        }

        .medewerkerslijst {
            padding-left: 0;
        }
        
        #beschikbareMedewerkers {
        background-color: #f5f5f5; /* Achtergrondkleur toegevoegd voor consistentie */
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        margin: 0 20px;
        width: 385px; /* Breedte van de beschikbare medewerkers */
}

        .datum-form {
            margin-bottom: 20px;
        }
       .ploegenbuttons{
        width: 70%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        }
        .ploegenbuttons button{
            font-size: xx-large;
        }
        .btn-left{
            float: left;
        }
        .btn-right{
            float: right;
        }
        
        .pagination {
    margin-top: 20px; /* Voeg wat ruimte toe tussen de paginaknoppen en de rest van de inhoud */
    text-align: center; /* Centreer de paginaknoppen */
}

.pagination a {
    display: inline-block;
    padding: 5px 10px; /* Voeg wat ruimte toe rond de tekst van de knoppen */
    margin: 0 2px; /* Voeg wat ruimte toe tussen de knoppen */
    border: 1px solid #ccc; /* Voeg een rand toe aan de knoppen */
    border-radius: 3px; /* Maak de randen van de knoppen wat afgerond */
    color: #333; /* Stel de tekstkleur van de knoppen in */
    text-decoration: none; /* Verwijder de standaard onderstreping van links */
    transition: background-color 0.3s, color 0.3s; /* Voeg een overgang toe voor een vloeiende kleurverandering */
}

.pagination a:hover {
    background-color: #f0f0f0; /* Verander de achtergrondkleur van de knoppen bij hover */
}

.pagination a.active {
    background-color: #007bff; /* Verander de achtergrondkleur van de actieve knop */
    color: #fff; /* Verander de tekstkleur van de actieve knop naar wit */
}


.tooltip {
    position: fixed;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -100%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 9999;
}