::-webkit-scrollbar { display:none; }

/* STRUCTURE */
html, body { height:100%; }
body { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:0.9em; color:#000; }

#widget { min-width:320px; width:100%; min-height:320px; height:100%; display:block; position:relative; overflow:hidden; margin:0 auto; max-width:640px; background:#EEE; }

#container { overflow-y:auto; overflow-x:hidden; position:relative; margin:0; z-index:0; }

.step_one, .step_two, .step_three, .step_four, .modal { position:absolute; top:0; width:100%; }
.inner { padding:10px; }
.gap { display:block; height:10px; }
.message { font-style:italic; font-size:0.8em; }
.scrollable { overflow-y:auto; height:100%; }
.label { display:inline-block; width:55px; }

.widget_calendar { margin:12px 0 10px 0; }
.widget_time { margin-top:10px; }
.widget_timeslots { overflow-y:auto; overflow-x:hidden; padding-top:5px; }
.widget_timeslots .col { padding-left:5px; padding-right:4px; }

.confirmation-box { margin:0 10px; }
#stepamend_form { margin-bottom:10px; }
.confirm-box { background:#FFF; margin-bottom:10px; padding:10px 10px 5px 10px; color:#999; }


/* MODAL */
/* amends */
.amend_box { margin-bottom:0; padding-bottom:20px; }
.inner_amend { background:#FFF; padding:10px; margin:0 10px 0 10px; }



/* TYPOGRAPHY */
h2 { font-size:1.1em; line-height:1.4em; font-weight:bold; }
h3 { font-size:1.3em; line-height:1.8em; }
p { font-size:1em; line-height:2em; }
p.small { font-size:0.8em; line-height:1.4em; }
b { font-weight:bold!important; }
i { font-style:italic!important; }

/* HEADER */
#header { height:40px; width:100%; z-index:10; position:relative; text-align:center; background:#CCC; } 
#header div { position:absolute; display:block; height:40px; }
#header .back { top:0; left:8px; }
#header .back button { height:40px; width:40px; border:0; display:none; background:url(../img/icon-menu-back.png) no-repeat center; }
#header .step-no { top:0px; right:0; }
#header .step-no span { line-height:40px; padding-right:8px; font-size:0.8em; color:#FFF; }
#header h1 { padding-top:5px; }
#header h1 .estate { display:none; font-size:0.7em; line-height:1.4em; text-transform:uppercase; }
#header h1 .site { font-weight:bold; line-height:30px; display:block; }


/* ICONS */
.icon { display:block; width:24px; height:24px; float:left; margin-right:5px; }
.icon span { display:block; width:100%; height:100%; }
.icon .icon-session {background:url(../img/icons/session.png); }
.icon .icon-party_size { background:url(../img/icons/partysize.png); }
.icon .icon-date { background:url(../img/icons/date.png); }
.icon .icon-request { background:url(../img/icons/request.png); }
.label-time { display:block; width:100%; text-align:center; line-height:2em; margin-top:5px; }

/* TABLES */
table.details { width:100%; margin-bottom:10px; }
table.details tr {  }
table.details tr td { line-height:1.4em; }
table.details tr td.icons { position:relative; vertical-align:top; }
.inner_amend .details { margin-bottom:0; }

td.status { border-top: 1px solid #EEE; padding-top:15px; vertical-align:middle; }

/* FORMS */
form {  }
label { display:block; line-height:2em; }
select { width:100%; font-size:1.1em; height:2.2em; border:1px solid #DDD; background:#FFF; }
input, textarea { width:100%; font-size:1.1em; box-sizing:border-box; margin-bottom:5px; background:#FFF; border:1px solid #DDD; }
input { height:36px; line-height:36px; }
textarea { height:60px; line-height:24px; }
input[type=checkbox] { height:20px; width:20px; background:#FFF; -webkit-appearance:checkbox; }
input[type=text] { -webkit-appearance:textfield; }
textarea { -webkit-appearance:textarea; }
select { /*-webkit-appearance:listbox;*/ }
:disabled { background:#DDD; color:#BBB; }

button { background:#DDD; width:100%; line-height:100%; height:44px; border:0; border-radius:3px; font-weight:bold; margin:0 0 5px 0; font-size:1em; }
button:hover { cursor:pointer; }
.confirm, button.selected { background:#00c300; color:#FFF; }
.amend, .amend_selected { background:#F90; color:#FFF; }
.delete { background:#F00; color:#FFF; width:auto; }
.general { background:#F90; color:#FFF; }
.sm { width:75px; height:28px; }
.sm.gap { margin-right:10px; }
.med { width:150px; height:28px; }
.full { width:100%; }
#booking_code { text-align:center; margin:0; }

/* NOTIFICATIONS */
.notification { color:#000; text-align:center; padding:10px; margin:10px 0; }
.notification h2 { }
.notification p { font-size:1em; line-height:1.4em; margin-bottom:5px; }

.confirmation { background:#CFC; border:1px solid #6C6; }
.error { background:#FFC; border:1px solid #FC0; }
.info { background:#d0e5f2; border:1px solid #519ccf; }
.warning { background:#FFC; border:1px solid #FC0; }
.warning h2 { padding:20px 0; }

/* DATE PICKER */
.ui-datepicker { width:100%; display:none; margin:0 auto; }
.ui-datepicker .ui-datepicker-header { position:relative; width:100%; height:36px; background:#CCC; }
.ui-datepicker .ui-datepicker-title { line-height:36px; text-align:center; font-weight:bold; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top:5px; width:24px; border-radius:3px; }
.ui-datepicker .ui-datepicker-prev { left:5px; }
.ui-datepicker .ui-datepicker-next { right:5px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display:block; text-align:center; width:100%; line-height:24px; font-size:0.6em; text-transform:uppercase; text-indent:-10000px; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { cursor:pointer; }
.ui-datepicker .ui-datepicker-prev span { background:url(../img/icon-back.png); background-size:24px; }
.ui-datepicker .ui-datepicker-next span { background:url(../img/icon-forward.png); background-size:24px; }
.ui-datepicker  .ui-datepicker-prev.ui-state-disabled, .ui-datepicker  .ui-datepicker-next.ui-state-disabled { opacity:0.3; }
.ui-datepicker-unselectable { color:#BBB; }
.ui-datepicker table { width:100%; border-collapse:separate; background:#FFF; }
.ui-datepicker th { padding:6px 0; background:#BBB; font-size:0.8em; font-weight:bold; }
.ui-datepicker td { text-align:center; }
.ui-datepicker td a { text-decoration:none; display:block; line-height:30px; color:#000; }
.ui-datepicker td a.ui-state-hover { background:#f0bd8a; color:#000; }
.ui-datepicker td span { line-height:30px; }
.ui-datepicker td.ui-datepicker-today { background:#ffffcc; border:0; }
.ui-datepicker td.ui-datepicker-current-day { background:#f0bd8a; border:1px solid red; }
.ui-datepicker td.ui-datepicker-current-day a { color:#000; }



/* LOADING */
.loading_div { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; z-index:10000; }
.loading_content { margin:30% auto; width:50%; text-align:center; padding:30px 20px 20px 20px; background:#FFF; border-radius:5px; }
.loading_content img { margin-bottom:10px; }
.loading_content p { line-height:1.6em; color:#000; }

/* ALERT */
.alert_div { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); display:none; z-index:10000; }
.alert_content { margin:40% auto; width:50%; padding:15px 10px 10px 10px; text-align:center; background:#FFF; border-radius:5px; }
.alert_content img { margin-bottom:10px; }
.alert_content p { line-height:1.6em; color:#000; padding-bottom:15px; }
.alert_content button { }


/* MODAL */
.modal { background:#F7F7F7; }
.modal .notification { margin:10px; }



/* GRID */
.col { display:inline-block; vertical-align:top; margin-right:-4px; padding-right:5px; box-sizing:border-box; -webkit-box-sizing:border; -moz-box-sizing:border; -o-box-sizing:border; }
.col-25 { width:25%; }
.col-33 { width:33%; }
.col-40 { width:40%; }
.col-50 { width:50%; }
.col-60 { width:60%; }
.col-75 { width:75%; }
.col-100 { width:100%; }
.last { padding-right:0; }


@media (max-width:480px) {
	.col { width:100%!important; margin-bottom:10px!important; }
    .col.col-33 { width:33%!important; margin-bottom:5px!important; }
    .col.col-50 { width:100%!important; }
    td.col-50 { width:50%; }
}

@media (min-width:480px) {
	
}


@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
    
    #header .back button { border:0; display:none; background:url(../img/icon-menu-back.png) no-repeat; }
    
    .ui-datepicker .ui-datepicker-prev span { background:url(../img/icon-back.png); background-size:24px; }
    .ui-datepicker .ui-datepicker-next span { background:url(../img/icon-forward.png); background-size:24px; }
    
    .icon .icon-session {background:url(../img/icons/session@2x.png); background-size:24px; }
    .icon .icon-party_size { background:url(../img/icons/partysize@2x.png); background-size:24px; }
    .icon .icon-date { background:url(../img/icons/date@2x.png); background-size:24px; }
    .icon .icon-request { background:url(../img/icons/request@2x.png); background-size:24px; }
    
    
      
}



@media only screen and (max-width: 480px) {
    button.sm.gap { margin-right:0; }
    .col { padding-right:0; }
}