/* the state of the input field when focus is released (after dated picked) */
.W_input_date {
		color: #363636;
		cursor:pointer;
		cursor:hand;
		width:152px;
		height:35px;
		font-size: 20px;
		font-style:normal;
		padding-top:2px;
		padding-bottom:2px;
		border:2px solid #EBEBEB;

		
		valign:top;
		text-align:center;

			 /* la taille de la bordure ne doit pas influer sur la taille de la div */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	font-family: 'Dosis', sans-serif;
		} 

/* the state of the input field when focus is released (after dated picked) */
.W_input_date:focus {
		color: #F8B62A;
		cursor:pointer;
		cursor:hand;
		width:152px;
		height:35px;
		font-size: 20px;
		font-style:normal;
		padding-top:2px;
		padding-bottom:2px;

		background-color:white;
		valign:top;
		text-align:center;
		outline: none;
		border-bottom:2px solid #EBEBEB;
		
		} 
		
		
		.W_input_date {
		color: #363636;
		cursor:pointer;
		cursor:hand;
		width:152px;
		height:32px;
		font-size: 20px;
		font-style:normal;
		padding-top:2px;
		padding-bottom:2px;
		border:1px solid #e0e0e0;
		-moz-border-radius:7px 0px 7px 7px; 
		border-radius:7px 0px 7px 7px;
		-webkit-border-radius:7px 0px 7px 7px;
		-moz-box-shadow: 0 0 1px 1px #e0e0e0;
		-webkit-box-shadow: 0 0 1px 1px #e0e0e0;
		box-shadow: 0 0 1px 1px #e0e0e0;
		valign:top;
		text-align:center;
				 /* the border should not modify the size of the field */
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		font-family: 'Roboto', sans-serif;
		} 

/* the state of the input field when focus is released (after dated picked) */
.W_input_date:focus {
		color: #F8B62A;
		cursor:pointer;
		cursor:hand;
		width:152px;
		height:32px;
		font-size: 20px;
		font-style:normal;
		padding-top:2px;
		padding-bottom:2px;
		border:2px solid #F8B62A;
		-moz-border-radius:7px 0px 7px 7px; 
		border-radius:7px 0px 7px 7px;
		-webkit-border-radius:7px 0px 7px 7px;
		valign:top;
		text-align:center;
		outline: none;
		
		} 

/* it is a global property we use ; the border size does not change div size */

.W_div {

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

}

/* the parent div of the datepicker  ; the position is handled by the js dynamically */
.W_datepicker {
	position:absolute;
	z-index:5000000;
	width:420px;
	border:0px solid red;
	overflow:hidden;
	-webkit-box-shadow: 0px 8px 15px rgba(45, 50, 50, 0.73);
	-moz-box-shadow:    0px 8px 15px rgba(45, 50, 50, 0.73);
	box-shadow:         0px 8px 15px rgba(45, 50, 50, 0.73);
	text-align:center;
	visibility:hidden;
	padding-bottom:10px;
	background-color:white;
	font-family: 'Roboto', sans-serif;
	border-radius:5px;

}

/* the optional header before the main header */
.W_datepicker_header_title {
	width:100%;
	height:30px;
	line-height:30px;	
	background-color:white;
	font-size:18px;
	font-weight:bold;
	color:#F8B62A;
	text-align:center;
}



/* main header with month and year */
.W_datepicker_header {
	width:100%;
	height:50px;
	line-height:50px;	
	
	font-size:24px;
	font-weight:bold;
	color:#F8B62A;
	background-color:white;
	
		color:white;
	background-color:#F8B62A;
	
	text-align:center;
}

/* the previous month left arrow */
.W_left_arrow::after {
	font-size:30px;
	content: "\25C0 \FE0E";
}

/* the next month right arrow */
.W_right_arrow::after {
	font-size:30px;
	content: "\25B6 \FE0E";
}

/* the select (drop down) for the month and year */
	.select_W_datepicker {
	  border:0px solid #e0e0e0;
	  font-size: 20px;
	  font-weight:bold;
		background-color:transparent;
	  -webkit-appearance:none;
	  -moz-user-select: none; 
	  color:#F8B62A;
	  cursor:pointer;
	  }
	  



/* each cell of the month ; the width is computed , do not provide it ; you can change the height */
.W_datepicker_cell {
	float:left;
	height:43px;
	line-height:43px;
	cursor:pointer;
	border:1px solid white;
	margin-left:0px;
	text-align:center;
	font-size:20px;
	color:white;
	border-radius:0px;
	letter-spacing:-1px;

}

.W_datepicker_cell_other_months {
	float:left;
	height:43px;
	line-height:43px;
	cursor:pointer;
	border:1px solid white;
	margin-left:0px;
	text-align:center;
	font-size:20px;
	color:white;
	border-radius:0px;
	letter-spacing:-1px;
	opacity:0.4;

}

/* the first row, with the days of the week and the first colunm with the week numbers */
.W_datepicker_cell_week {
	float:left;
	height:43px;
	line-height:54px;
	color:#636363;
	background-color:white;
	text-align:center;
	font-size:15px;
}

/* a day before or after the current month */
.W_datepicker_cell_other_months {
	float:left;
	height:43px;
	background-color:white;
	line-height:43px;
	margin-left:0px;
}


/* the color and background-color for a day of the week */
	.W_week_datepicker {
		color:black;
	    background-color:white;
	  }
	  /* the color and background-color for a weekend day */
	.W_weekend_datepicker {
		color:gray;
		color:#F8B62A;
	    background-color:white;
	  }
	   /* the color and background-color for a public holiday */
	 .W_public_holiday_datepicker {

		color:#F8B62A;
		background-color:white;
		font-weight:bold;
	  }
	  
	
	  
/* public holiday label */
.W_public_holiday_label {
	position: absolute;
    text-align: center;
    max-height: 25px;
	overflow:hidden;
	font-size: 12px;
    line-height: 10px;
	border:0px solid red;
    margin-top: 33px;
    margin-left: 0;
	color:#F8B62A;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
	font-weight:normal;
	pointer-events: none;
}

/* if you use the option public_holidays_dot to display a dot instead of the public holiday label */
.W_public_holiday_dot {
	
	position: absolute;
	font-size:43px;
	color:#F8B62A;
	margin-left:21px;
	margin-top:12px;
	display:none;
	pointer-events: none;
	
}



/* the current date ; we add a circle around the selected date */	  
.W_datepicker_current_date { 
	float:left;
	height:40px;
	width:40px;
	border-radius:40px;
	margin: 0 auto;
	background-color:#F8B62A; 
	line-height:40px;
	cursor:pointer;
	text-align:center;
	color:white;
	margin-left:6px;
	margin-top:1px;
	z-index:2000;
	//border:2px dashed #29323F;
	box-shadow: 0px 0px 22px -5px rgba(0,0,0,0.56);
	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.56);  /*  Horizontal decalage, vertical decalage,  blur raduis, spreda radius color */
	font-weight:bold;
}

/* this is a circle centered inside the cell and around the day ; it is used for the hover effect */
.W_inner_cell { 
	float:left;
	height:40px;
	width:40px;
	border-radius:40px;
	margin: 0 auto;
	line-height:40px;
	//cursor:pointer;
	text-align:center;
	margin-left:6px;
	margin-top:2px;
	z-index:2000;
	opacity:1;
	border:3px solid white;	
}

/* the hover style */
.W_inner_cell:hover { 
	float:left;
	height:40px;
	line-height:40px;
	width:40px;
	border-radius:40px;
	margin: 0 auto;
	border:3px solid #F8B62A;
	transition: border .2s ease ;
	cursor:pointer;
	text-align:center;
	margin-left:6px;
	margin-top:2px;
	z-index:2000;
	opacity:1;

}

/* this class is added on disabled days (like public holidays or weekend days not selectable) */
.W_inner_cell_disabled { 
	float:left;
	height:40px;
	width:40px;
	border-radius:40px;
	margin: 0 auto;
	line-height:40px;
	text-align:center;
	margin-left:6px;
	margin-top:2px;
	z-index:2000;
	opacity:1;
	border:3px solid white;	
	cursor:not-allowed;
}



/* this is a line containing the optional today button and the cancel button below the calendar */
.W_datepicker_footer_bar {
	display:block;
	float:left;
	width:100%;
	height:50px;
	background-color:white;
	text-align:center;
	border:0px solid lightgray;
	margin-top:10px;
}

/* the optional today button */
.W_datepicker_today_button {
	
	float:left;
	margin-left:50px;
	margin-top:15px;
	font-size:18px;
	font-weight:bold;
	color:#F8B62A;
	border:1px solid lightgray;
	text-align:center;
	border-radius:3px;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	cursor:pointer;
}
.W_datepicker_today_button:hover {
	
	color:white;
	background-color:#F8B62A;
	border:1px solid #F8B62A;
	
}  

/* the optional today button */
.W_datepicker_cancel_button {
	
	float:left;
	margin-left:20px;
	margin-top:15px;
	font-size:18px;
	color:#F8B62A;
	color:#636363;
	border:1px solid lightgray;
	text-align:center;
	border-radius:3px;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	cursor:pointer;
}
.W_datepicker_cancel_button:hover {
	
	color:white;
	background-color:#F8B62A;
	border:1px solid #F8B62A;
	
}  

/* this is the style of the small calendar icon you can optionally provide */
.calendar_icon{
	float:left;
	margin-top:8px;
	margin-left:10px;
	font-size:5px;
	width:28px;
	height:25px;
	border:1px solid gray;
	border-width:6px 0px 1px 0px; 
	border-color: #F8B62A #6997BC lightgray #6997BC; /* the first color is the header of the calendar icon */
	background-color:white;
	 /* la taille de la bordure ne doit pas influer sur la taille de la div */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

}
 .calendar_icon:before {
         
          position:relative;
          bottom:0;
          right:0;
          border-bottom:5px solid gray;
		  border-left:5px solid transparent;
      }

.calendar_icon_text {
		
		width:100%;
		text-align:center;
		font-size:5px;
		color:lightgray;
		margin-top:2px;
		letter-spacing: 1px;
		line-height:5px;
        text-align:left;
		
}
.calendar_icon_text::after {
	content:" 1 2 3 4 5 6 7 9 10 11 12";
}

.calendar_icon_corner {

	width:8px;
	height:8px;
	float:right;
	margin-top:-5px;
	border-left:8px solid lightgray; /* lightgray is the upper color of the corner */
	border-bottom:8px solid white; /* this the color of the lower color of the corner */
		
	 /* la taille de la bordure ne doit pas influer sur la taille de la div */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

        
}