/*--Jquery UI Calendar Custom--*/
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{background:none; border:0px; right:2px; top:2px;}
.ui-datepicker table{font-size:16px;}
.ui-datepicker .ui-datepicker-title{color:#1b1b1b;}
.ui-datepicker td{border:0px; padding:5px;}
.ui-datepicker td a, .ui-datepicker td span {text-align: center;}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {opacity:1}
.ui-state-disabled, .ui-widget-content .ui-state-disabled .ui-state-default, .ui-widget-header .ui-state-disabled .ui-state-default{color:#cbcbcb;}
.ui-widget-header{border:0px; background:none; font: 22px/30px roboto-light}
.ui-widget.ui-widget-content{border:0px;}
.ui-icon.ui-icon-circle-triangle-w{
    background-image: url("/images/responsive/schedule-left-arrow.png");
    background-position:0px 0px, 10px 10px;
    height:25px;
    width:20px;
}
.ui-icon.ui-icon-circle-triangle-e {
    background-image: url("/images/responsive/schedule-right-arrow.png");
    background-position:0px 0px, 10px 10px;
    height:25px;
    width:20px;
}
.ui-datepicker th {
    font-weight: normal;
    padding: 5px;
}
.ui-datepicker th span{background:#e4e9ec; padding:.2em; display:block; color:#13485f; font: 16px/26px roboto-regular;}
.ui-state-default, .ui-widget-content .ui-state-default {
    background: none;
    border: 0px;
    color: #0070c9;
    font: 16px/26px roboto-regular;
    border: solid 2px rgba(255,255,255,0.0);
}
.ui-widget-content .ui-state-active {
    background: none;
    border: solid 2px #058659;
    color: #058659;
}
.processing-image {
    background: url(/images/responsive/processing-image.gif) 0 0 no-repeat;
    width: 30px;
    height: 30px;
    color:#058659;
    display:inline-block;
    margin:40px auto 0px;
}
.slots-unavailable-err{
    margin:40px auto 0px;
    border:1px solid #00995f;
    padding:20px;
}

/*Time Slot Picker*/
.timeSlotPicker {
    text-align:center;
}
.slot-time a:hover{text-decoration:none;}
.slot-unavailable span.avail-time{color:#cbcbcb;}
.timeSlotPicker .header{ font:22px/30px roboto-light; padding:0.2em 0px}
.slot-heading, .slot-heading-aft{
    background: #e4e9ec;
    padding: .2em 1.3em;
    display: block;
    color: #13285f;
}
.slot-container.show-timeslot, .err-slot-container.show-timeslot{
    border: 0px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding: 20px 20px 10px;
    display:inline-block!important;
    width:100%;
    min-height:315px;
}
.first-slot, .second-slot{
    display: inline-block;
    vertical-align: top;
}
.morn-slot, .time-lhs, .time-rhs{
    display:inline-block;
    padding:5px;
}
.slot-time, .slot-unavailable{
    padding:5px;
}
span.ada-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*==================================================
=            Media Queries                          =
==================================================*/
/*Any device smaller than Ipad */
@media only screen and (max-width : 767px) {
    .dateTimeWrapper{margin:40px 20px 25px;}
    .ui-datepicker{
        width:auto;
        padding:0px;
    }
    .timeSlotPicker{ margin-top:35px;}
    .slot-container.show-timeslot, .err-slot-container.show-timeslot{
        min-height:315px;
    }

}
/*Tablet, desktop & wide Screens */
@media (min-width : 768px) {
    #datepicker{ width:50%; display:inline-block; vertical-align:top;}
    .ui-datepicker {width: 100%;}
    .dateTimeWrapper{margin:40px 0 25px;}
    .timeSlotPicker{
        display: inline-block;
        margin-left: 4%;
        width:40%;
    }
}