/* 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 0px; 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; text-shadow:1px 1px 0px #fff; box-sizing:initial; }
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-default { background:#f4f4f4; color:#777; }
.ui-datepicker .ui-datepicker-calendar .ui-state-active { color:#fff; background:#999; border: 1px solid #55838f; margin: -1px; text-shadow:none; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.1) inset; }
.ui-datepicker .ui-datepicker-calendar .ui-state-hover { background:#fff !important; color:#666666 !important; }

/* 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:100%;
    left:0px !important;
    margin: 6px 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:10px; }
}