#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: 68%;
}

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

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

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

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

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

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

/* contenitore dei giorni (header) */
#myc-dates-container {
    background-color: #fafafa;
}

.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-header:first-of-type {
    padding-left: 15px;
}

.myc-date-header:last-of-type {
    border-right: none;
    width: 13%;
}

#myc-available-time-container {
    border-top: 1px solid #e0e0e0;
    min-height: 150px;
}

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

.myc-day-time-container:first-of-type {
    padding-left: 15px;
}

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

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

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

.not-available{
    background-color: rgba(128, 128, 128, 0.347);
    color:black;
}

.myc-available-time.selected, .myc-available-time:hover {
    background-color: rgba(0, 0, 255, 0.756);
    color: white !important;
}

.myc-available-time.not-available.selected,
.myc-available-time.not-available:hover {
    background-color: rgba(128, 128, 128, 0.347);
    color: black !important
}

.myc-date-display {
    font-weight: lighter;
}

@media only screen and (max-width: 768px) {
    .myc-date-header, .myc-day-time-container {
        width: 13.5%;
    }
    /*.myc-date-header:last-of-type, .myc-day-time-container:last-of-type {
        width: 12%;
    }*/
}

/* @media (max-width: 830px) {
.myc-available-time {
        background-color: #29b6f6;
        border-radius: 20px;
        color: #ffffff;
        display: block;
        width: 50px;
        margin-bottom: 15px;
        padding: 5px 5px 5px 5px;
        text-align: center;
        text-decoration: none;
    }
} */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    

    #myc-week-container {
            overflow-y: scroll;
        }

    #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: 75%;
        }
    
        #myc-prev-week-container {
            display: inline-block;
            width: 10%;
            padding-left: 10px;
        }
    
        #myc-next-week-container {
            display: inline-block;
            width: 10%;
        }

    
    #myc-dates-container {
            background-color: #fafafa;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
    
        /* box date */
        .myc-date-header {
            border-right: 1px solid #e0e0e0;
            display: inline-block;
            min-height: 50px;
            padding: 10px;
            padding-right: 14.5px;
            padding-left: 14.5px;
            vertical-align: top;
            /* background-color: red; */
            width: 100px;
        }
    
        .myc-date-header:first-of-type {
            padding-left: 14px;
            padding-right: 14px;
        }
    
        .myc-date-header:last-of-type {
            border-right: none;
        }

        /* giorno della settimana */
        .myc-date-display {
            font-weight: lighter;
            font-size: 15px;
        }
    
        #myc-available-time-container {
            border-top: 1px solid #e0e0e0;
            min-height: 150px;
            width: 700px;
            display: inline-block;
        }
    
        .myc-day-time-container {
            /*border-right: 1px solid #e0e0e0;*/
            display: inline-block;
            height: 100%;
            padding: 5px;
            padding-left: 15px;
            vertical-align: top;
            /* background-color: blue; */
            width: 95px;
        }
    
        .myc-day-time-container:first-of-type {
            padding-left: 0px;
        }
    
        .myc-day-time-container:last-of-type {
            border-right: none;
        }
    
        .myc-date-number {
            font-size: 20px;
            font-weight: lighter;
        }
    
        .myc-available-time {
            background-color: #29b6f6;
            border-radius: 20px;
            color: #ffffff;
            display: block;
            width: 90%;
            margin-bottom: 15px;
            padding: 5px 5px 5px 5px;
            text-align: center;
            text-decoration: none;
        }

        .myc-available-time.not-available.selected,
        .myc-available-time.not-available:hover {
                     background-color: rgba(128, 128, 128, 0.347);
                     color: black !important
        }
        
                .not-available {
                    background-color: rgba(128, 128, 128, 0.347);
                    color: black;
                }

}