/* Style CSS pour le calendrier */
.groupPicker {
    display: flex;
    gap:10px;
}
.picker {
    display: flex;
    flex-direction: column;
    width: fit-content;
}
.calendar {
    display: flex;
    flex-direction: row;
    grid-template-columns: repeat(7, 50px);
    align-content: center;
    align-items: center;
    max-width: 350px;
    flex-wrap: wrap;
    font-size:20px;
}

.day {
    width: 50px; /* Largeur de la cellule du jour */
    height: 50px; /* Hauteur de la cellule du jour */
    background-color: #f0f0f0; /* Couleur de fond par défaut */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd; /* Bordure de la cellule du jour */
}

.dayPast {
    background-color: lightcoral; /* Couleur de fond pour les dimanches */
}

.sunday {
    background-color: aliceblue; /* Couleur de fond pour les dimanches */
}
.timeSlot {
    display: flex;
    margin-top: 10px;
    align-content: center;
    justify-items: center;
    max-width: 1000px;
    flex-wrap:wrap;
}
    .timeSlot > div {
        width: 100px; /* Largeur de la cellule du jour */
        background-color: #f0f0f0; /* Couleur de fond par défaut */
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd; /* Bordure de la cellule du jour */
        font-size : 20px;
    }
.slot:hover, .day:hover {
    background-color: forestgreen; /* Couleur de fond lors du survol */
}

.calendar .isActiveDate, .timeSlot .isActiveTime {
    background-color: forestgreen; /* Couleur de fond lors du clic */
}