/* CHANGE THIS PATH ACCORDING TO YOUR THEME !!!!! */

/* define background image for special states - I use one single image that holds all the colors */
.cal_month ul li.booked_am,
.cal_month ul li.booked_pm,
.cal_month ul li.booked_pr_am,
.cal_month ul li.date-start:after,
.cal_month ul li.date-end:after,
.cal_month ul li.booked_pr_pm	{	background-image:url("../images/bg_days.png");}	


#cal_wrapper{
	font: 11px/1.6 Arial, sans-serif;
	color: #444;
	margin:20px auto;
	overflow: hidden;
	max-width: 600px;	
	}
#the_months{
	max-width: 100%;
	}
.clear{	clear:both;}
#ajax_message{
	text-align:center;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	background: #FFFFEE;
	float:left;
	margin-left:10px;
	width:260px;
	}
/* month loading animation - push to center*/
.img_loading_month{
	margin:50px;
	}
/*
calendar key
***************************/

#key_wrapper{
	text-align:center;
	float: left ;
	}
#key{
	width:122px;
	background: #EEE;
	color:#111;
	}
#key .cal_title{
	color:#FFF;
	}
#key ul{
	text-align:left;
	}
#key ul li{
	float:none;
	}
#key ul li span{
	margin-left:22px;
	width:90px;
	text-align:left;
	display:block;
	}
#key #footer_data{
	font-size:0.7em;
	clear:both;
	}


/*
calendar controls (back and next)
***************************/
#cal_controls{
	margin-bottom:10px;
	overflow: hidden;
	}
#cal_controls #cal_prev{
	float:left;
	}
#cal_controls #cal_next{	
	float:left; 
	margin-left:2px;
	}
#cal_controls #cal_admin{
	float:left;
	margin-left:10px;
	overflow: hidden;
	}
#cal_controls img{
	border-radius: 3px;
}
/*
calendar month styles
***************************/
.cal_month{
	/* month div*/
	width:286px;
	border:1px solid #dfa974;
	background:#FFF;
	line-height:20px;
	padding-bottom:6px;
	float:left;
	margin-right:6px;
	margin-bottom:20px;
	min-height:194px;
	color:#666;
	}

@media only screen and (max-width: 374px) {
	.cal_month{
	/* month div*/
	width:339px;
	border:1px solid #dfa974;
	background:#FFF;
	line-height:20px;
	padding-bottom:6px;
	float:left;
	margin-right:6px;
	margin-bottom:20px;
	min-height:194px;
	color:#666;
	}
}
	

/* Extra small screen / smartphone / 280px to 479px */
@media (max-width: 479px) {
	.cal_month{
	/* month div*/
	width:339px;
	border:1px solid #dfa974;
	background:#FFF;
	line-height:20px;
	padding-bottom:6px;
	float:left;
	margin-right:6px;
	margin-bottom:20px;
	min-height:194px;
	color:#666;
	}
}

/* Smaller screen / tablet+phone / 480px to 759px */
@media (max-width: 759px) {
	.cal_month{
	/* month div*/
	width:339px;
	border:1px solid #dfa974;
	background:#FFF;
	line-height:20px;
	padding-bottom:6px;
	float:left;
	margin-right:6px;
	margin-bottom:20px;
	min-height:194px;
	color:#666;
	}
}

/* Small screen / tablet / 760px to 991px */
@media (max-width: 991px) {
	.cal_month{
	/* month div*/
	vertical-align: middle;
	width:90%;
	border:1px solid #dfa974;
	background:#FFF;
	line-height:20px;
	padding-bottom:6px;
	float:left;
	margin-right:6px;
	margin-left: 20px;
	margin-bottom:20px;
	min-height:194px;
	color:#666;
	}
}

	
#key .cal_title,
.cal_month .cal_title{
	border-bottom: 1px solid #CCC;
	background:#dfa974;
	padding:2px;
	text-align:center;
	color:#FFF;
	}	
.cal_month ul{
	clear:both;
	list-style:none;
	margin:0px;
	padding:4px;
	margin:auto;
	width:274px;
	color:#FFF;
	}
.cal_month ul li{
	float:left;
	width:37px;
	height:37px;
	border:1px solid #CCC;
	margin-right:1px;
	margin-bottom:1px;
	text-align:center;
	background-color:#41a000;
	color:#000;
	font-size:90%;
	line-height: 35px;
	position: relative;
	}
i { z-index: 1; position: relative; border:1px dashed red; display: block;}

/* day titles (m,t,w etc. */
.cal_month ul.cal_weekday li{	
	color:#FFF;
	background-color:#dfa974;
	border:1px solid #dfa974;
	}
/* no month date */
.cal_month ul li.cal_empty{		
	background-color:#EEE;
	border:1px solid #EEE;
	color:#CCC;
	}

.cal_month ul li.booked			{	background-color: #FF0000;	}		/* complete day booked */
.cal_month ul li.booked_pr		{	background-color: #ff9700;	}		/* complete day provisionally booked */





/*
calendar date styles
class name must be the same as defined in admin panel
***************************/

.cal_month ul li.offer			{	background-color:lime;		}
.cal_month ul li.changeover		{	background-color:pink;		}

	
/* position background image for each state - adjust to your image */
.cal_month ul li.booked_am		{	background-position: 295px top;	}
.cal_month ul li.booked_pm		{	background-position: 258px top;	}
.cal_month ul li.booked_pr_am	{	background-position: 295px top;	}
.cal_month ul li.booked_pr_pm	{	background-position: 295px top;	}

.cal_month ul li.weekend		{	/*border:1px solid #3399CC;*//*altered via mootools*/}
.cal_month ul li.today			{	border:1px dotted #006699;	}	/* current date - MUST be defined last otherwise other classes might overwrite it*/
/*.cal_month ul li:hover{	background:#006699; color:#FFF;}*/




.cal_month ul li.clickable{ cursor: pointer;}
.cal_month ul li.past		{ opacity: 0.6;}

.cal_month ul li.date-start:after 	{ 
	width:36px; 
	height:36px;
	position:absolute;
	top:0;
	right:0;
	content:'';
	z-index: 0;
	background-position: 220px top !important;
	}

.cal_month ul li.date-end:after 		{ 
	width:36px; 
	height:36px;
	position:absolute;
	top:0;
	right:0;
	content:'';
	z-index: 0;
	background-position: 185px top !important;
	}
.cal_month ul li.date-between	{ background-color: #ff9700;}



.tips{
	background: #000;
	padding:6px;

	color:#FFF;
	border:2px solid #666;
}
.cal_month ul li.weeknum_spacer{
	width:4px;
	background-color:#FFFFEE;
	border:none;
	}
.cal_month ul li.weeknum{
	width:4px;
	background-color:green;
	}

#bookingsForm input,
#bookingsForm textarea{
	width: 100%;
	border: 1px solid #e1e1e1;
	font-size: 16px;
	color: #aaaab3;
	padding-left: 25px;
	margin-bottom: 20px;
}
#bookingsForm input{
	
	height:50px;
	
	}
#bookingsForm textarea{
	height: 150px;
	margin-bottom: 20px;
	resize: none;
	padding-top:10px;
}
#bookingsForm input[type=checkbox]{
	width:auto;
	height:auto;
	display: inline-block;
	}
#bookingsForm input[type=submit]{
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	letter-spacing: 2px;
	background: #dfa974;
	border: none;
	padding: 14px 34px 13px;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
}
#bookingsForm input[type=submit][disabled]{
	background: #DDD;
}
#bookingsForm .nice-select,
#bookingsForm .nice-select .list,
#bookingsForm .nice-select li	{	
	width: 100%;
}

#bookingsForm label{
	display: inline-block;
	margin-left:10px;
}
#bookingsForm label,
#bookingsForm label a {
	color:#19191a;
}
#bookingsForm label a:hover{
	color:#dfa974;
}
#bookingsForm .error{
	border-color:red;
}

#reservation-inst ul{ list-style: circle; margin-top:20px;}
#reservation-inst li { margin:10px 0;}
/* modal */

.white-popup{
	background: #FFF;
padding: 20px 30px;
text-align: left;
max-width: 650px;
margin: 40px auto;
position: relative;
}

.mfp-close {            
    color : black;          
}
#ac-loading{
	position: absolute;
	left:50%;
	margin-left:-30px;
	top:50%;
	margin-top:-30px;
}
#aac-container ul#aac-nav{
	display: block;
	text-align: center;
	list-style: none;
	margin-bottom:10px;
	width:100%;
	}
#aac-container ul#aac-nav li{
	display: inline-block;
	margin-right:10px;
	cursor: pointer;
	color:#dfa974;
	}
#aac-container ul#aac-nav li:hover{
	color:#111;
	}
#aac-container ul#aac-nav li.loader{
	text-align: center;
	min-width:70px;
	}