body { }

/*DATE PICKER*/

.ui-datepicker td { border: 2px solid #FFF; padding: 0px; }
td.ui-datepicker-other-month { border: 0 }

.ui-datepicker td.date-not-available .ui-state-default, .legends .date-not-available .ui-state-default { background-color: #ff0000 !important; color: #FFF !important; }
.ui-datepicker td.date-available-walkin .ui-state-default, .legends .date-available-walkin .ui-state-default { background-color: #fea600 !important; color: #FFF !important; }
.ui-datepicker td.date-available-internal .ui-state-default, .legends .date-available-internal .ui-state-default { background-color: #eb28e5 !important; color: #FFF !important; }
.ui-datepicker-prev, .ui-datepicker-next { background-color: #0053a0 !important; width: 1em !important; height: 3em !important; border-radius: 1px; background-position: center center !important; }
.ui-datepicker-prev, .ui-datepicker-prev-hover { background-position-y: center; left: -20px !important }
.ui-widget { font-family: Arial, 'HelveticaNeueLTStd47LightCondensed'; font-size: 16px; font-weight: bold; }
.ui-datepicker { margin: 0 auto; width: 92% !important; padding: 0; border: none; border-radius: 0; background-color: rgba(255,255,255,0); }
.ui-widget-header { background: #fff; color: #234994; font-size: 20px; border: none }
.ui-datepicker table { margin: 0 0 1.4em; table-layout: fixed; font-size: .95em }
.ui-datepicker th, .ui-datepicker th { border: none }
.ui-datepicker th { padding: .7em .3em; background-color: #234994; color: #FFF; text-transform: uppercase; }
.ui-datepicker td span, .ui-datepicker td a { text-align: center; }
.ui-state-active { border: 4px solid rgba(0,0,0,.8) !important }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-active { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-weight: normal !important; color: #9c9c9c !important; font-size: 1.4em; background: rgba(168,192,228,1) !important; padding: .6em 0 !important; color: #FFF !important; border: 4px solid rgba(255,255,255,.01); font-weight: bold !important; }

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { background-color: #dde0e5; opacity: 1; filter: Alpha(Opacity=1); }

.ui-datepicker-week-end .ui-state-default { background: rgba(144,176,217,1) !important; }

.ui-datepicker-prev, .ui-datepicker-prev-hover { background: url(../AMSolutions/Img/prev-icon.png) no-repeat transparent !important; margin-top: 10px; cursor: pointer; }
.ui-datepicker-next, .ui-datepicker-next-hover { background: url(../AMSolutions/Img/next-icon.png) no-repeat transparent !important; margin-top: 10px; right: -20px !important; cursor: pointer; }

.ui-datepicker-prev,
.ui-datepicker-next { background-color: #0053a0 !important; width: 1em !important; height: 3em !important; border-radius: 1px; background-position: center center !important; top: 400% !important; }

/*// Type display classes*/
.display-1, .display-2, .display-3, .display-4 { font-weight: 400; line-height: 1.2; }

.display-1 { font-size: 6.5rem; }

.display-2 { font-size: 5.5rem; }

.display-3 { font-size: 4.5rem; }

.display-4 { font-size: 3.5rem; }

.display-5 { font-size: 3rem; }



.legends a { text-transform: uppercase; font-size: 11px; font-weight: bold; }
.legends .ui-state-default { border: none !important; width: 25px; height: 25px; float: left; margin-right: 5px; font-size: 1.2em !important; text-decoration: none }
.legends a.text-decoration-none { text-decoration: none; }
.legends a.text-decoration-none:hover, a.text-decoration-none:focus { color: #428bca; }

/*#datepicker { margin-top: 0; }*/

.ui-datepicker td.date-available .ui-state-default,
.legends .date-available .ui-state-default { background-color: rgba(0,182,72,1) !important; color: #FFF !important; }
.legends { max-width: 88%; margin: 0 auto; display: block; }
    .legends .legend-item { float: left; padding: 0 }
    .legends ul { padding: 0; margin: 0; margin-bottom: 10px }
    .legends .legend-item li { list-style-type: none; display: inline; }
    .legends .legend-item .legend-label { line-height: 26px; }

#messages { display: block; margin-top: 20px; }

h4.walkinMgs, h4.bookedMsg, h4.avlMsg, h4.infoMsg { padding: 10px; color: #FFF; font-family: Arial, 'HelveticaNeueCondensedBold'; text-align: center }

div#messages h4.walkinMgs { background: rgba(254,166,0,0.7) }

div#messages h4.bookedMsg { background: rgba(254,0,0,0.7) }

div#messages h4.avlMsg { background: rgba(13,150,7,0.7) }

div#messages h4.infoMsg { background: #26529d }

.divLoading { background: url(../AMsolutions/img/loadinganimation_transparent.gif) no-repeat center center; height: 50px; background-size: contain; }

.clear-fix { clear: both; height: 1px; }

#time-Selector { margin-top: 25px; margin-bottom: 3%; }

.section-heading { color: #0051a0; text-transform: uppercase; font-weight: bold }


.nav-tabs { border-bottom: none; }

    .nav-tabs li a { background-color: #dde0e5; color: #000100; border: none; text-transform: uppercase; font-size: 1.2em; font-weight: bold; padding: 10px 30px; min-width: 160px; text-align: center; }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #fffeff; background-color: #0051a0; border: none; border-bottom-color: transparent; cursor: default; }

div.tab-content { margin-top: 2px; margin-bottom: 10px; /*height: 320px;*/ overflow-y: auto; }

.tab-content > .tab-pane { width: auto; margin-left: auto; margin-right: auto }

ul.timeSlot { list-style-type: none; margin: 0; padding: 0; display: block }

    ul.timeSlot li { float: left; width: 24%; padding: 7px 1% 0px 1%; background-color: #00b648; border: 4px solid transparent; margin: 2px 2px 0px 0px; display: table-cell; color: #FFF; font-weight: bold; text-align: center; line-height: .95em; font-size: 1.3em; cursor: pointer; }

        ul.timeSlot li.bookedOut { background-color: #de4545; border: 4px solid rgba(50,50, 50, 0.1); }

        ul.timeSlot li > span { font-family: Arial, HelveticaNeueLTStd47LightCondensed; display: block; color: #42ffad; font-weight: bold; font-size: 11px; text-transform: uppercase; }

        ul.timeSlot li.ui-state-active { border-color: rgba(0,0, 0, 0.5); }

        ul.timeSlot li.nodate { background-color: #FFF; color: rgb(227, 6, 19); float: none; display: block; width: 99%; border: none; }

.booked-address { border: 1px solid #dde0e5; border-radius: 2px; text-align: left; padding: 3% 4%; }
    .booked-address p { font-size: 14px !important }

    .booked-address ul.address { list-style: none; padding: 0; margin: 0; }

        .booked-address ul.address li { font-size: 1em; line-height: 20px; color: #0051a0;display:table-row}

            .booked-address ul.address li span:first-child { font-weight: bold;white-space:nowrap; width:32%}
                /*.booked-address ul.address li span:first-child:after { content:"  "}*/
                
                .booked-address ul.address li span { display: table-cell;}

.btnContainer { margin-top: 30px }

 .btnContainer .btn { width: 250px; height: 50px; font-weight: bold; color: #FFF; border-radius: 0pc; min-width: 140px; font-size: 1.2em; text-transform: uppercase; font-family: Arial; background-color: #00b648; }

.covid-buttons-container #covid-date-back-button {
    background: #FFFFFF;
    border: 1px solid #6F535E;
    box-sizing: border-box;
    border-radius: 3px;
    color: #6F535E;
    margin-right: 20px;
    max-width: 200px;
    text-align: center;
    padding-top: 12px;
}

.covid-buttons-container #covid-date-confirm-button {
    background: #00B648;
    border-radius: 3px;
    min-width: 285px;
}

.covid-store-appointment-section .appointment-details {
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    color: #2D529D;
}

.covid-store-appointment-section .store-name {
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    text-transform: uppercase;
    color: #2D529D;
}
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (max-width: 601px) {
    ul .timeSlot li { font-size: 24px; }

    .legends { padding-left: 4px; padding-right: 4px; }

        .legends .legend-item { padding-right: 4%; }

            .legends .legend-item ul { padding-left: 0px; }

    .booked-address { padding: 8px; }
    .legends { max-width: 95%; }

    @media screen and (max-width: 1001px) {
        .booked-address ul.address { margin-bottom: 10px; }

            .booked-address ul.address span { display: block }

        .booked-address { padding: 8px; }
    }

    @media screen and (max-width: 767px) {
        .booked-address ul.address li span { display: block; }
        ul.timeSlot li { font-size: 1em }
        .ui-datepicker { width: 95% !important; margin: 0 auto; }

        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-active { padding: .3em 0 !important; }
    }

}