.ui-widget{font-size:0.7em; font-weight:500; width: 100%; font-family:  "Montserrat", sans-serif; background:#FFF; border:1px solid #ddd; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border-radius:3px}
.inline-dp .ui-widget{ border:none; box-shadow: none; width:100%}


.ui-datepicker{background:#fff;width:280px; padding:8px; display:none}
.ui-datepicker table {width: 100%;}

.ui-datepicker-header {
    color: #000;
    font-weight:700;
    line-height: 30px;
    background:#FFF;
}

.ui-datepicker-title {
    text-align: center;
}

.ui-datepicker-prev, .ui-datepicker-next {
    display: inline-block;
    width: 10px;
    height: 15px;
    text-align: center;
    cursor: pointer;
    background-image: url('/assets/images/common/chevron-left-right.png');
    background-repeat: no-repeat;
    line-height: 600%;
    overflow: hidden;
    padding:0px !important
}

.ui-datepicker-prev {
    float: left;
    background-position: left center;
}
.ui-datepicker-next {
    float: right;
    background-position: right center;
}


.ui-datepicker thead {
    background-color: #FFF;

}

.ui-datepicker th {
    text-transform: uppercase;
    padding: 8px;
    color: #000;
    text-align:center
}
.ui-datepicker td{ text-align:center}
.ui-datepicker td a, .ui-datepicker td span{padding:2px; text-align:center; display:inline-block; border: 1px solid #FFF; width:100%}
.ui-datepicker td a.ui-state-active{ background:#464646; color:#FFF; border:1px solid #000}

.ui-state-disabled{ opacity: 0.5;}

.ui-datepicker td.blackout{opacity:1 !important; background:#E3E3E3}
.ui-datepicker td.morningBooked {background: linear-gradient(to bottom, #E3E3E3 0%,#E3E3E3 50%, #E3E3E3 50%,#F7F7F7 50%,#F7F7F7 100%);}
.ui-datepicker td.eveningBooked {background: linear-gradient(to top, #E3E3E3 0%,#E3E3E3 50%, #E3E3E3 50%,#F7F7F7 50%,#F7F7F7 100%);}


#home-booking .ui-widget{font-size:0.8em}



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .ui-widget{font-size:0.8em;}
    .ui-datepicker{padding:20px; width:300px}
    .inline-dp .ui-datepicker{ width:100% !important}



}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .ui-widget{font-size:1em;}
    .ui-datepicker{padding:20px; width:360px}
    .ui-datepicker td a, .ui-datepicker td span{padding:8px;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #home-booking .ui-widget{font-size:0.9em}
    .ui-datepicker{width: 360px; padding:20px}


}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}