/*-----------------------------------------------------------------------------------*/
/*	Calendar 
/*-----------------------------------------------------------------------------------*/

/* Navigation -------------------------------------------------------------*/
#calendar .DOPBookingSystem_Navigation {
    background: transparent;
}
#calendar .DOPBookingSystem_Navigation .month_year {
    font-family: 'Montserrat', sans-serif;    
    font-size: 1.6rem;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    color: #666;    
    padding-left: 0;
    padding-bottom: 25px;
    padding-top: 0;
}
#calendar .DOPBookingSystem_Navigation .add_btn {
    display: none;
}
#calendar .DOPBookingSystem_Navigation .previous_btn {
    background: url("../img/calendar-nav.png") 0 0;
    height: 28px;
    width: 28px;
    right: 43px;
    top: 0;
    opacity: 0.7;
}
#calendar .DOPBookingSystem_Navigation .next_btn {
    background: url("../img/calendar-nav.png") 28px 0;
    height: 28px;
    width: 28px;
    right: 2px;
    top: 0;
    opacity: 0.7;
}
#calendar .DOPBookingSystem_Navigation .week {
    padding: 15px 0 15px 0;
}
#calendar .DOPBookingSystem_Navigation .week .day {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    color: #7f8c8d;
}

/* Container --------------------------------------------------------------*/
#calendar .DOPBookingSystem_Container {
    background: transparent;
}

/* Month / Hours view -----------------------------------------------------*/
#calendar .DOPBookingSystem_Month {
    padding: 0;
}

#calendar .DOPBookingSystem_Month,
#calendar .DOPBookingSystem_Hours {
    background: transparent;
}

/* Day --------------------------------------------------------------------*/
#calendar .DOPBookingSystem_Day {  
}

/* Day - Header */
#calendar .DOPBookingSystem_Day .bind-content .header {
    padding: 17px 0!important;
    cursor: default!important;
}

/* Day - Content */
#calendar .DOPBookingSystem_Day .bind-content .content {
    display: none!important;
}

/* Day - Day number */
#calendar .DOPBookingSystem_Day .bind-content .header .day {    
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: normal;
    width: 40px!important;
    text-align: center;
    left: 50%;
    margin-left: -20px;
}

/* Day - Day number Past day & next month */
#calendar .DOPBookingSystem_Day.past_day .bind-content .header .day,
#calendar .DOPBookingSystem_Day.next_month .bind-content .header .day {
    color: #fff!important;
}

/* Day - Available */
#calendar .DOPBookingSystem_Day.available .header, 
#calendar .DOPBookingSystem_Day .header .co.available, 
#calendar .DOPBookingSystem_Day .header .ci.available, 
#calendar .DOPBookingSystem_Day .content .co.available,
#calendar .DOPBookingSystem_Day .content .ci.available,
#calendar .DOPBookingSystem_Day .bind-left.extended.available .header {
    background-color: #1abc9c !important;
    border-color: #1abc9c !important;
    cursor: default;
}

/* Day - Selected */
#calendar .DOPBookingSystem_Day.selected .header, 
#calendar .DOPBookingSystem_Day.selected .header .co, 
#calendar .DOPBookingSystem_Day.selected .header .ci, 
#calendar .DOPBookingSystem_Day.selected .bind-left.extended .header,
#calendar .DOPBookingSystem_Day.selected .content .co.available,
#calendar .DOPBookingSystem_Day.selected .content .ci.available  {
    background: #000000 !important;
    border-color: #000000 !important;
}

/* Day - Booked */
#calendar .DOPBookingSystem_Day.booked .header, 
#calendar .DOPBookingSystem_Day .header .co.booked, 
#calendar .DOPBookingSystem_Day .header .ci.booked, 
#calendar .DOPBookingSystem_Day .content .co.booked,
#calendar .DOPBookingSystem_Day .content .ci.booked,
#calendar .DOPBookingSystem_Day .bind-left.extended.booked .header {
    /*background-color: #f28079 !important;
    border-color: #f28079 !important;*/
}

/* Day - Special */
#calendar .DOPBookingSystem_Day.special .header, 
#calendar .DOPBookingSystem_Day .header .co.special, 
#calendar .DOPBookingSystem_Day .header .ci.special, 
#calendar .DOPBookingSystem_Day .bind-left.extended.special .header {
    background: #f3c244 !important;
    border-color: #f3c244 !important;
}

/* Day next month */
#calendar .DOPBookingSystem_Day.next_month {
    /*display: none !important;*/
}

/* Sidebar ----------------------------------------------------------------*/
#booking #reservationForm {
    margin: 0!important;
    clear: both;
}

#booking .DOPBookingSystem_Sidebar {
    margin: 0;
}

#booking .DOPBookingSystem_Sidebar,
#booking .DOPBookingSystem_Sidebar .section {
    background: transparent;
    border: 0;
}

#booking .DOPBookingSystem_Sidebar .section {
    padding: 0;
    margin: 0; /* 0 15px */
    border-radius: 0;
}

#booking .DOPBookingSystem_Sidebar .section-item {
    margin: 0 0 2em 0;
}

#booking .DOPBookingSystem_Sidebar .section-item.col-md-12 {
    clear: both;
}

/* Form container */
#booking form[id^='DOPBookingSystem_Form'] {
    margin-bottom: 0;
}

#booking .DOPBookingSystem_Sidebar {
    float: none;
    width: 100%;
    clear: both;
}

/* Form title */
#booking .DOPBookingSystem_Sidebar .section-item.title {
    display: none!important;
}

/* Form price */
#booking .DOPBookingSystem_Sidebar .section-item.price {
    display: none!important;
}

/* Label */
#booking .DOPBookingSystem_Sidebar .section-item label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: normal;
    color: #000;
    display: block;
    margin-top: 12px;   
    line-height: 24px;
}

#booking .DOPBookingSystem_Sidebar .section-item label.radio {
    margin-top: 8px;
    margin-bottom: 2em;
    padding-left: 10px;
    display: inline-block;
}

/* Input */
#booking input[type=text], 
#booking input[type=email], 
#booking textarea {
    background: #efefef;
    border: none;
    padding: 1em;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px; 
    color: #000;
    font-family: inherit!important;
    font-size: 1.6rem!important;
    width: 100%;
}

#booking input[type=text]:focus, 
#booking input[type=email]:focus, 
#booking textarea:focus {
    outline: none;
    background: #e2e2e2; 
}

/* Datepicker */
.ui-datepicker {
    margin-top: 10px;
}

/* submit button */
#booking .DOPBookingSystem_Sidebar .section-item input[type=submit] {
    font-family: 'Montserrat', sans-serif!important;
    font-size: 1.6rem!important;
    font-weight: normal;
    color: #fff!important;
    border: 0;
    width: auto;
    line-height: 24px!important;
}

/* Reservation feedback messages ------------------------------------------*/
#booking .section-item.message {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    margin: 0;
    
    color: #dd6464;
    /*margin-top: 60px;*/
    padding-top: 40px;
    /*background: transparent url(../img/alert_icon.png) top center no-repeat;*/
}

/* success */
#booking .section-item.message .success {
    color: #1abc9c;
    display: block;
    margin-top: 20px;
    padding-top: 90px;
    background: transparent url(../img/success_icon.png) top center no-repeat;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* FANCY SELECT */
div.fancy-select {
	position: relative;
	width: 65px;
	z-index: 10;
}

div.fancy-select.disabled {
	opacity: 0.5;
}

/*div.fancy-select select:focus + div.trigger {
	box-shadow: 0 0 0 2px #4B5468;
}*/

div.fancy-select select:focus + div.trigger.open {
	box-shadow: none;
}

div.fancy-select div.trigger {
    background: #5dade2;
    width: 65px;
    /*padding: 0 33px 0 24px;*/
    height: 65px;
    line-height: 65px;
    text-align: center;
    display: inline-block;
    font-size: 2.8rem;
    color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 3px 0 0px #2980B9;
    	
	cursor: pointer;
	
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	
	

	transition: all 240ms ease-out;
	-webkit-transition: all 240ms ease-out;
	-moz-transition: all 240ms ease-out;
	-ms-transition: all 240ms ease-out;
	-o-transition: all 240ms ease-out;
}

/* arrow */
/*div.fancy-select div.trigger:after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top-color: #fff;
	bottom: 5px;
	left: 50%;
	margin-left: -5px;
}*/

div.fancy-select div.trigger.open {
	background: #2980B9;
	/*border: 1px solid #475062;*/
	color: #eee;
	box-shadow: none;
}

div.fancy-select div.trigger.open:after {
	border-top-color: #7A8498;
}

div.fancy-select ul.options {
    font-size: 1.8rem;
    text-align: center;
    background: #5dade2;
    
	list-style: none;
	margin: 0;
	position: absolute;
	top: 40px;
	left: 0;
	visibility: hidden;
	opacity: 0;
	z-index: 50;
	overflow: auto;
	
	border-radius: 4px;
	min-width: 65px;

	transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.open {
	visibility: visible;
	top: 50px;
	opacity: 1;

	/* have to use a non-visibility transition to prevent this iOS issue (bug?): */
	/*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
	transition: opacity 300ms ease-out, top 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, top 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, top 300ms ease-out;
	-o-transition: opacity 300ms ease-out, top 300ms ease-out;
}

div.fancy-select ul.options.overflowing {
	top: 70px;
	/*bottom: 40px;*/

	transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.overflowing.open {
	top: 70px;
	/*bottom: 50px;*/

	transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
}

div.fancy-select ul.options {
    padding-left: 0;
}

div.fancy-select ul.options li {
	padding: 12px;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;

	transition: all 150ms ease-out;
	-webkit-transition: all 150ms ease-out;
	-moz-transition: all 150ms ease-out;
	-ms-transition: all 150ms ease-out;
	-o-transition: all 150ms ease-out;
}

div.fancy-select ul.options li.selected {
	background: #2980B9;
	color: #eee;
}

div.fancy-select ul.options li.hover {
	color: #fff;
}

/* guest number */
#guestNumb {
    width: 62px!important;
    height: 62px!important;
}

/*-----------------------------------------------------------------------------------*/
/*	11.	Media Queries
/*-----------------------------------------------------------------------------------*/

/* Large screen */
@media only screen and (min-width: 1025px) {
    
    /* Day --------------------------------------------------------------------*/
    /* Day - Header */
    #calendar .DOPBookingSystem_Day .bind-content .header {
        padding: 20px 0!important;
        cursor: default!important;
    }

}

@media (max-width: 768px) {
    /* Day --------------------------------------------------------------------*/
    /* Day - Header */
    #calendar .DOPBookingSystem_Day .bind-content .header {
        padding: 15px 0!important;
        cursor: default!important;
    }
    
}

/* Smartphone */
@media (max-width: 767px) {

    /* Container --------------------------------------------------------------*/        
    /* Month / Hours view -----------------------------------------------------*/
    #calendar .DOPBookingSystem_Month {
        margin: 0 0 50px 0;
    }

    /* Day --------------------------------------------------------------------*/
    /* Day - Header */
    #calendar .DOPBookingSystem_Day .bind-content .header {
        padding: 12px 0!important;
        cursor: default!important;
    }
    
    /* Day - Day number */
    #calendar .DOPBookingSystem_Day .bind-content .header .day {    
        font-size: 1.4rem;
    }
    
    /* Sidebar ----------------------------------------------------------------*/
    /*#booking .DOPBookingSystem_Sidebar {
        padding-top: 30px;
    }*/    
    
    /* Label */
    #booking .DOPBookingSystem_Sidebar .section-item label.radio {
        margin-top: -2px;
        margin-bottom: 1em;
        padding-left: 15px;
        width: 80%;
    }
    
    /* Reservation feedback messages ------------------------------------------*/
    #booking .section-item.message {
        margin-left: 15px;
        margin-right: 15px;
        line-height: 24px;
    }

}