/* DATEPICKER AWESOME STYLING */
#ui-datepicker-div { width:250px; padding:0px; margin-top:1px; box-shadow:0 2px 5px 1px rgba(0, 0, 0, 0.8); border-radius:3px; }
#ui-datepicker-div .datepicker-header { text-indent:5px; padding:5px 0px; font-weight:bold; color:#555; font-size:12px;  background:#fefefe; }
#ui-datepicker-div .ui-datepicker-header { font-weight:bold; border-radius:0px; border:none; }
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title span { font-size:12px; }
#ui-datepicker-div .ui-datepicker-group-last { margin-left:2px; }

/* next/prev arrows */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next { height:1.6em; width:1.6em; margin-top:0.1em; }
#ui-datepicker-div .ui-datepicker-next-hover,
#ui-datepicker-div .ui-datepicker-prev-hover { background:rgba(255,255,255,0.1); border-color:#aaa; }
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span { background:url(images/datepicker-arrow.png) top center no-repeat!important; width:12px; height:12px; }
#ui-datepicker-div .ui-datepicker-prev span { background-position:-6px -36px!important; }
#ui-datepicker-div .ui-datepicker-next span { background-position:-4px -6px!important; }

/* day headers */
#ui-datepicker-div .ui-datepicker-calendar thead th { border-bottom:1px solid #bbb; padding:5px 10px; font-size:9px; font-weight:bold; color:#666; text-transform:uppercase; }
.ui-datepicker .ui-datepicker-next { right:4px; top:2px; border:1px solid transparent; }
.ui-datepicker .ui-datepicker-prev { left:4px; top:2px; border:1px solid transparent; }

/* day cell */
#ui-datepicker-div .ui-datepicker-calendar { width:100%; border-radius:3px; overflow:hidden; margin:0px; }
#ui-datepicker-div .ui-datepicker-group-last { margin-left:-1px; border-left:1px solid #ccc; }

.ui-datepicker tbody td { padding:0; border-right: 1px solid #bbb; }
.ui-datepicker tbody td:last-child { border-right: 0px; }
.ui-datepicker tbody tr { border-bottom: 1px solid #bbb; }
.ui-datepicker tbody tr:last-child { border-bottom: 0px; }

.ui-datepicker .ui-datepicker-calendar td span,
.ui-datepicker .ui-datepicker-calendar td a { height:20px; line-height:20px; font-weight:bold; font-size:11px; color:#666; box-sizing:initial; text-shadow: none; }
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-default { background:#f4f4f4; color:#777; }
.ui-datepicker .ui-datepicker-calendar .ui-state-hover { background:#fff !important; color:#666666 !important; opacity: 70% }

/* cell gradient */
.ui-datepicker-calendar .ui-state-default {
    border:none;
    background: #ededed;
    background: -moz-linear-gradient(top,  #ededed 0%, #dedede 100%);
    background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#ededed), color-stop(100%,#dedede));
    background: -webkit-linear-gradient(top,  #ededed 0%,#dedede 100%);
    background: -o-linear-gradient(top,  #ededed 0%,#dedede 100%);
    background: -ms-linear-gradient(top,  #ededed 0%,#dedede 100%);
    background: linear-gradient(top,  #ededed 0%,#dedede 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );
    -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
    -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
    box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}

/* POPUP BOX AWESOME STYLING */

#background-popup { display:none; position:fixed; top: 0; bottom: 0; left:0; right: 0; background: url(images/popup-bg.png) top left repeat; font-size: 13px; color: black; z-index: 10000; }

#background-popup .close-button { position: absolute; top: 10px; right: 10px; cursor: pointer; width:30px; height:30px; background:url(images/popup-close-button.png) top center no-repeat; border-radius:3px; border:none; }
#background-popup .close-button:hover { background-position: bottom center; }


#background-popup .client-login-box,
#background-popup .cancel-box,
#background-popup .guest-allocation-box
{ display: none; position: absolute; top: 50%; left: 50%; width: 390px; margin-left: -195px; margin-top: -200px; background: white; border:none; }

#background-popup .pop-header { font-size: 24px; font-weight: normal; padding: 30px 30px 10px; background: #EEE; }

#background-popup .content-text { font-size: 16px; font-weight: normal; padding: 10px 30px 30px; background: #EEE; }

#background-popup .client-content,
#background-popup .cancel-content { padding: 30px; font-size: 14px; font-weight: normal; }

#background-popup .form-line { padding-bottom: 15px; }
#background-popup label { display: block; margin-bottom: 5px; }
#background-popup input[type=text],
#background-popup input[type=password] { display: block; width: 318px; height: 30px; border-radius: 5px; border: 1px solid #CCC; padding: 0 5px; }

#client-login-submit,
#cancel-submit { display: block; height: 28px; margin: 10px auto 0; cursor: pointer; padding: 0 15px; border:1px solid transparent; border-radius:5px; }
#client-login-submit:after,
#cancel-submit:after { margin-left: 5px; content: url(images/white-arrow.png); }




@media screen and (max-width:768px) {
    #ui-datepicker-div {
    position:fixed !important;
    width: 98%;
    left:0px !important;
    margin: 3px 0 0 0 !important;
    box-shadow:0 0 10px 4px #000;
    border:0 !important;

    }
    #ui-datepicker-div .ui-datepicker-header { height:35px; }
    #ui-datepicker-div .ui-datepicker-title { line-height:24px; font-size:25px; }
    #ui-datepicker-div .ui-datepicker-prev,
    #ui-datepicker-div .ui-datepicker-next { padding:5px; }
    #ui-datepicker-div td a,
    #ui-datepicker-div td span { padding:8px; }
}


.dp-highlight{
    background-color: #d4d4d4;

}

.dp-highlight a{
    text-shadow: none !important;
    box-shadow : none !important;
}

.checkIn span{
    color: black !important;
    opacity:1 !important;
    text-decoration: none !important


}

.checkOut {
    background-color: #cfcfcf !important;
    border-radius: 0px 15px 15px 0px

}

.checkIn .ui-state-default, .checkOut .ui-state-default{
    color: black !important;
    box-shadow: none !important;
}

.cover.active {
    background: #000000c2;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
}
.ui-widget-content{
    background: white !important;
}


.hover {
    background-color: #ebebeb !important;
}

.ui-widget-header {
    color: black !important;
    font-weight: bold;
}

.checkIn{
    /*pointer-events: none !important;*/
    background-color: #cfcfcf !important;
    border-radius: 15px 0px 0px 15px;
}

.cal-button{
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 12px !important;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    color: black;
    background-color: #ebebeb;
}

#datepicker_clear{
    float: right;
    color: black;
    cursor: pointer;
    font-size: 12px;
    margin-right: 10px;
    background-color: #ededed;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 99999;
}

.ui-datepicker .ui-datepicker-buttonpane {
    margin: 0px !important;
    padding: 0px !important;
}

/*
.CTA, .mlosSelected, .sold {
    text-decoration: line-through !important;
    color: #f00 !important;
    cursor: none !important;
}
*/


.ui-state-highlight {
    background-color:transparent !important;
    border: none !important;
}

/*
.CTA:active{
    pointer-events: none !important;
}

.CTD:active{
    pointer-events: none !important;
}

.CTD {
    text-decoration: line-through !important;
    cursor: none !important;
}

.sold:active {
    pointer-events: none !important;
}

.mlosSelected a, .CTD a{
    opacity: 0.35;
}

*/

.datepicker-apply {
    float: right;
    color: black;
    font-size: 12px;
    background-color: #cfcfcf !important;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
    margin-top: 5px;
}

.ui-datepicker-current {
    float:left !important;
    background-color: transparent !important;
}

.warning {
  color: #CE6100 !important;
}

.fullwarning .checkOut, .fullwarning .checkIn {
    background-color: #FAA530 !important;
}

.fullwarning .hover {
    background-color: #FAB550 !important;
}

.ui-datepicker .ui-datepicker-calendar td.unavailable a {

  color: #9d9d9d !important;
  font-weight: bold;
}

.ui-datepicker .ui-datepicker-calendar td.sold a {

  color: red !important;
  font-weight: bold;
}


body .ui-datepicker {
  font-size: 17px;
}

@media screen and (max-width:768px) {
    .ui-datepicker-current{
        margin-top: -1px !important;
        font-size: 16px !important;
        font-weight: bold !important;
    }
    .ui-datepicker-buttonpane{
        border: none !important;
    }

    #ui-datepicker-div {
        height: auto !important;
    }
    .ui-datepicker-current {
        max-width: unset !important;
    }
}

@media screen and (min-width:768px) {
    .ui-datepicker-current{
        margin-top: -35px !important;
        font-size: 16px !important;
        font-weight: bold !important;

    }
    .ui-datepicker-current {
        max-width: unset !important;
    }
    .ui-datepicker .ui-datepicker-buttonpane button {
        width: 100% !important;
    }
}