
.card-background-white{
    background-color: var(--odeo-haylem-white);
}

/*Cheat to simulate disabled element in the calendar and action list*/
.simulate-visual-disabled{
    opacity: 0.5;
}

:root {
    --drop-color: #007bff;
    --drop-background: #91C4F2;
    --calendar-invalid-cell: #f55c53;
}

/*
Related to calendar drag and drop styling
*/
td.valid-drop {
    border: 3px dashed var(--drop-color) !important;
    background-color: var(--drop-background) !important;
}

.calendar-wrapper {
    display: flex; /* Utiliser Flexbox pour aligner les éléments horizontalement */
    align-items: stretch; /* Étirer les éléments enfants pour qu'ils aient la même hauteur */
    justify-content: space-between; /* Espacer les éléments avec les flèches aux extrémités */
    position: relative; /* Assurez-vous que le wrapper est positionné correctement */
    width: 100%; /* Ajuster la largeur selon vos besoins */
    overflow: hidden;

    /*max-width: 400px;*/ /*TODO need to set a max-width for the calendar because it scale in height based on its width*/

    max-height: 700px;
}

.calendar-container {
    flex-grow: 1; /* Permet au calendrier de prendre l'espace disponible entre les flèches */
    margin: 0 3px; /* Espacer le calendrier des flèches */
    display: flex; /* Utiliser Flexbox pour la hauteur du calendrier */
}

#appointments_calendar {
    flex-grow: 1; /* Assurez-vous que le calendrier prend tout l'espace disponible */
}

#availability-list {
    height: 300px;
    overflow: auto;
}

/* ************************************* */
/* Styles personnalisés pour le collapse */
/* ************************************* */

.consultant-list {
    overflow-y: auto;
    overflow-x: hidden;
}

.consultant-checkbox-filter {
    padding-left: 2rem;
}


.section-action-list {
    overflow-y: auto;
    overflow-x: hidden;
}

.calendar-filter-and-action-container {
    height: 700px;
    min-height: 700px;
    max-height: 700px;
}

/*Large devices*/
@media (min-width: 992px) {
    .fixed-width-on-lg-screen {
        flex: 0 0 450px;
        max-width: 450px;
    }
}
