:root {
    --dark-grey: #393A43;
    --light-grey: #E6E6E6;
    --dark-blue: #253B6E;
    --light-blue : #0077C0;
}



/* Légende */
.circle_selected {
    width: 10px;
    height: 10px;
    background-color: #babac5;
    border-radius: 50%;
    margin-top: auto;
    margin-bottom: auto;
}

.circle_available {
    width: 10px;
    height: 10px;
    background-color: rgb(96 165 250);

    border-radius: 50%;
    margin-top: auto;
    margin-bottom: auto;
}

.circle_unavailable {
    width: 10px;
    height: 10px;
    background-color: rgb(100,100,100);
    border-radius: 50%;
    margin-top: auto;
    margin-bottom: auto;
}

.circle_not_modified {
    width: 10px;
    height: 10px;
    background-color: white;
    border:1px solid black;
    border-radius: 50%;
    margin-top: auto;
    margin-bottom: auto;
}

.legend_title {
    font-size: 12px;
}
/* =======================================================*/

/* États des jours */
.box_selected{
    background-color: #FFF2CC;
}

.box_available{
    background-color: #D5E8D4;
}

.box_unavailable{
    background-color: #EA6B66;
}

.box_not_modified{
    background-color: #E6E6E6;
}

.div_flex{
    display: flex;
}

.legends{
    justify-content: flex-end;
}

.padding_left{
    padding-left: 320px;
}

.checkbox_text_size{
    font-size: 12px;
}

.checkbox_day tr td{
    width: 120px;
}

.btn_light_blue {
    border-width: 1px;
    border-color: var(--dark-blue);
    color: white;
    height: 40px;
    width: 120px;
    background-color: var(--light-blue);
}

.btn_dark_blue {
    color: white;
    height: 40px;
    width: 120px;
    background-color: var(--dark-blue);
}

.btn_dark_blue_large {
    color: white;
    height: 40px;
    width: 360px;
    background-color: var(--dark-blue);
}

.w_groupe{
    width: 173px;
}

.m_r_jour{
    margin-right: 975px;
}

.scrollable_container {
    height: 600px;
    overflow: auto;
}

.plage_horaire_jour_semaine{
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    border-radius: 0.5rem/* 8px */;
}

.plage_horaire_jour_semaine:hover{
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.aButton:hover {
    transform: scale(1.1);
    opacity: 0.5;

}

.aButton2:hover {
    transform: scale(1.04);
    opacity: 0.5;
}

/* less then 500  */
@media screen and (max-width: 500px) {

    .padding_left{
    padding-left: 0px;
}

    .div_width{
        width: 100%;
    }

     /* Légende */
    .legends{
        justify-content: center;
    }

    .circle_selected {
        width: 6px;
        height: 6px;
    }

    .circle_available {
        width: 6px;
        height: 6px;
    }

    .circle_unavailable {
        width: 6px;
        height: 6px;
    }

    .circle_not_modified {
        width: 6px;
        height: 6px;
    }

    .legend_title {
        font-size: 8px;
    }

    .checkbox_text_size{
        font-size: 8px;
    }

    /* Jours */
    .week {
        font-size: 10px;
        width: 100%;
    }

    .week div {
        width: 70px;
    }

    .week div a {
        width: 70px;
    }
}