@media only screen and (max-width: 767px) {
    .myc-date-header, .myc-day-time-container {
        width: 13%;
    }

    .myc-available-time {
        background-color: red;
        color: #ffffff;
        display: block;
        /*padding: 10px 0px 10px 0px;*/
        text-align: center;
        /*border-radius: 50%;*/
        width: 160%;
        height: 5%;
        text-indent: -2px; /* YL-6200 : decremente nb espacve gauche - text-indent:-9999px; */
        text-decoration: none;
    }
    #txt_header_information, #txt_footer_information {
        font-size: 0.8em;
        margin-bottom: 20px;
    }

    #modalModificationCommentaire textarea {
        height: 60px;
    }

    .modalplannification-information {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto; /* Centrer horizontalement */
        width: 60%;
    }


    #myc-dates-container {
        background-color: #fafafa;
    }
    .myc-date-header {
        /*border-right: 1px solid #e0e0e0;*/
        display: inline-block;
        min-height: 50px;
        padding: 15px 0px 15px 5px;
        vertical-align: top;
    }

    .myc-date-display {
        font-weight: lighter;
        text-indent:-9999px;
    }

    #myc-available-time-container {
        border-top: 1px solid #e0e0e0;
        /*min-height: 150px;*/
        width:100%;
    }
    .myc-day-time-container {
        display: inline-block;
        /*height: 100%;*/
        padding: 15px 15px 15px 5px;
        vertical-align: top;
    }

    .modal-validation {
        /*position: absolute;*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centrer horizontalement et verticalement */
        margin-top: 30%;
        /*background-color: #fff;*/
        padding: 20px;
        border-radius: 5px;
        text-align: center; /* Centrer le texte */
    }

}

/*****************************************************************
    *
    *
    *
    *
    *
    *
    *
*/
@media only screen and (min-width: 768px) {
    span {
        font-size: 15px;
    }

    #myc-available-time-container {
        border-top: 1px solid #e0e0e0;
        /*min-height: 150px;*/
        /* YL-6200 - retrait padding et margin bottom */
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    #myc-dates-container {
        background-color: #fafafa;
    }
    .myc-date-display {
        font-weight: lighter;
    }
    .myc-date-header {
        border-right: 1px solid #e0e0e0;
        display: inline-block;
        min-height: 50px;
        padding: 15px 0px 15px 15px;
        vertical-align: top;
        width: 13.77%;
    }

    .myc-date-number {
        font-size: 1.8em;
        font-weight: lighter;
    }


    .myc-date-header, .myc-day-time-container {
        font-size: 11px;
    }

    .modalplannification-information-bottom {
        margin-top: 1cm;
    }

    .modalplannification-information {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto; /* Centrer horizontalement */
        width: 60%;
        margin-bottom: 2cm;
        margin-top: 1cm;
    }

    .myc-available-time {
        background-color: red;
        border-radius: 20px;
        color: #ffffff;
        display: block;
        margin-bottom: 15px;
        padding: 10px 0px 10px 0px;
        text-align: center;
    }

    #modalModificationCommentaire textarea {
        height: 10%;
    }

    .myc-day-time-container {
        /*border-right: 1px solid #e0e0e0;*/
        display: inline-block;
        /*height: 100%;*/
        /* YL-6200 - retrait padding bottom : 15px 15px 15px 15px; */
        padding: 15px 15px 0px 15px;
        vertical-align: top;
        width: 13.77%;
    }

    .myc-date-header:first-of-type {
        padding-left: 15px;
    }

    .myc-date-header:last-of-type {
        border-right: none;
        width: 13%;
    }
          
    .myc-day-time-container:first-of-type {
        padding-left: 15px;
    }

    .myc-day-time-container:last-of-type {
        border-right: none;
        width: 13%;
    }

    .modal-validation {
        /*position: absolute;*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centrer horizontalement et verticalement */
        margin-top: 10%;
        /*background-color: #fff;*/
        padding: 20px;
        border-radius: 5px;
        text-align: center; /* Centrer le texte */
    }
}




@media (min-width: 767px) and (max-width: 991px) {
    #modalModificationCommentaire textarea {
        height: 80px;
    }

    /*.myc-available-time {
        background-color: red;
        border-radius: 20px;
        color: #ffffff;
        display: block;
        margin-bottom: 15px;
        padding: 10px 0px 10px 0px;
        text-align: center;
        border-radius: 50%;
        width: 30%;
    }*/
}

/*
    ************************************************************************************************************
*/

.modalalert {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
  

    .modalplannification-information-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto; /* Centrer horizontalement */
        width: 60%;
    }

    .modalplannification-date {
        justify-content: center; /* Centrer horizontalement */
        align-items: center; /* Centrer verticalement */
        text-align: center;
    }

    span {
        text-align: center;
       
    }

    .modalPlanningInterventionBody {
        display: flex; /* Affichage en mode flex */
        justify-content: center; /* Centrer horizontalement */
        align-items: center; /* Centrer verticalement */
    }




.btn-modal-validation {
    border: 2px solid #FFF;
    color: #FFF !important;
    background: #ff2015 !important;
    border-radius: 10px;
}

    .btn-modal-validation:hover {
        border: 2px solid black;
    }  

#modalvalidation-deplanification-commentaire {
    margin:10px;
}


#modalModificationCommentaire textarea {
    display: block;
    margin: 10px auto; /* Centrer horizontalement le textarea */
    width: 100%;
    /*height: 20%;*/ /* hauteur de la textarea */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
    font-size: 15px; /* Nouvelle taille de police */
    background-color: #ffe2e3 !important;
}




    .btn-planification {
        background-color: transparent !important;
        font-family: Muli;
        cursor: pointer;
        font-size: 14px;
        padding: 10px 15px;
        text-align: center;
        font-weight: 800;
        text-transform: uppercase;
        margin-top: 20px;
        width: 100%;
    }


    #myc-container {
        width: inherit;
    }

    #myc-nav-container {
        margin-bottom: 15px;
        width: inherit;
    }

#myc-current-month-year-container {
    display: inline-block;
    font-size: 1.5em;
    font-weight: lighter;
    text-align: center;
    text-transform: capitalize;
    vertical-align: top;
    width: 60%;
    padding-left: 1.5em;
}

    #myc-prev-week-container {
        display: inline-block;
        width: 15%;
        padding-left:5%;
    }

    #myc-next-week-container {
        display: inline-block;
        width: 15%;
    }

    #myc-prev-week {
        border: 1px solid;
        border-radius: 80px;
        cursor: pointer;
        float: left;
        font-size: 1.9em;
        font-weight: lighter;
        /*height: 40px;*/
        text-align: center;
        width: 40px;
    }

    #myc-next-week {
        border: 1px solid;
        border-radius: 80px;
        cursor: pointer;
        float: right;
        font-size: 1.9em;
        font-weight: lighter;
        /*height: 40px;*/
        text-align: center;
        width: 40px;
    }

        #myc-prev-week:hover, #myc-next-week:hover {
            border: 1px solid;
        }

    #myc-week-container {
        /*border: 1px solid ;*/
    }

 

  


    


    a.myc-available-time {
        color: white;
        text-decoration: none;
        cursor: pointer;
        border: solid 2px;
    }

        a.myc-available-time:hover {
            font-weight: bold;
            border: solid 2px black;
        }

    .myc-available-time.selected a {
    }

    

  


  

        .modal-validation button {
            margin: 10px;
        }