.calendar-7{
    position:absolute;
    width:376px;
    margin-top:265px;
    background-color:#f20455;
    padding:9px;
    box-shadow: 3px 3px 10px 7px #a07b887d;
}
.date-title {
    text-align: center;
    font-size: 16px;
    font-family: 'Arimo', sans-serif;
    color: #fff;
    text-shadow: 1px 1px 2px #6d2812;
    padding: 5px;
}
.calendar-7 .days{
    color:white;
    font:14px normal;
    width:100%;
    text-align:center;
    font-family: monospace;
}
.calendar-7 .days .calendar-7-day{
    display:inline-block;
    cursor:pointer;
    width:13%;
    height:55px;
    padding-top:8px;
    margin-bottom:8px
}
.calendar-7 .days .calendar-7-day:hover,.calendar-7 .days .calendar-7-day.active{
    background-color:#333e48
}
.calendar-7 .hours,.calendar-7 .minutes{
    background-color:white;
    width:360px;
    height:162px;
    margin:0 auto;
    border-radius:4px;
    font-family: monospace;
}
.calendar-7 .minutes{
    display:none;
    height:81px;
}
.calendar-7 .calendar-7-hour,.calendar-7 .calendar-7-minute{
    float:left;
    display:inline-block;
    box-sizing:border-box;
    width:25%;
    font:14px normal;
    padding:4px;
    color:#4a4a4a;
    text-align:center;
    cursor:pointer;
    font-family: monospace;
}
.calendar-7 .calendar-7-hour:hover,.calendar-7 .calendar-7-minute:hover,.calendar-7 .calendar-7-hour.active,.calendar-7 .active.calendar-7-minute{
    background-color:#53a2f6;
    color:white;
    border-radius:3px
}
.calendar-7 .calendar-7-hour.disabled,.calendar-7 .disabled.calendar-7-minute{
    color:#333;
    background-color:#eee;
    cursor:not-allowed;
}


@media only screen and (max-width: 500px) {
    .calendar-7{
   left:8px !important;
   max-width:95%;
    }
    .hours{

   max-width:95%;
    }
}