@import url(//fonts.googleapis.com/css?family=Roboto:400,700);


/* the state of the input field when focus is released (after dated picked) */
.W_input_date {
		color: #363636;
		cursor:pointer;
		cursor:hand;
		width:102px;
		height:30px;
		line-height:30px;
		font-size: 15px;
		font-style:normal;
		padding-top:2px;
		padding-bottom:2px;
		border:1px solid #e0e0e0;
		border-radius:4px 4px 4px 4px;
		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;
		} 

/* the state of the input field when focus is released (after dated picked) */
.W_input_date:focus {
		background-color: #6997BC;
		color:white;
		cursor:pointer;
		cursor:hand;
		font-size: 15px;
		font-style:normal;
		padding-top:2px;
		padding-bottom:2px;
				border-radius:4px 4px 4px 4px; 
		border-bottom:2px solid #EBEBEB;

		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;
	background-color:gray;
	z-index:5000000;
	width:320px;
	border:0px solid red;
	overflow:hidden;
		border-radius:4px 4px 4px 4px; 
	-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;

}

.W_datepicker_header {
	width:100%;
	height:30px;
	line-height:30px;	
	background-color:#6997BC;
	font-size:15px;
	color:white;
	text-align:center;
}

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

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


/* the select (drop down) for the month and year */
	.select_W_datepicker {
	  border:0px solid #e0e0e0;
	  font-size: 14px;
	 background-color:#6997BC;

	  -webkit-appearance:none;
	  -moz-user-select: none; 
	  color:white;
	  cursor:pointer;
	  }
	  



/* each cell of the month ; the width is computed, do not provide it */
.W_datepicker_cell {
	float:left;
	height:25px;
	line-height:25px;
	cursor:pointer;
	border:0px solid red;
	margin-left:0px;
	text-align:center;
	font-size:12px;
	color:#636363;

}

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

/* a day before or after the current month */
.W_datepicker_cell_other_months {
	float:left;
	height:25px;
	background-color:white;
	line-height:25px;
	font-size:12px;
	cursor:pointer;
	margin-left:0px;
	opacity:0.3;
}


/* the color and background-color for a day of the week */
	.W_week_datepicker {
		color:black;

	  }
	  /* the color and background-color for a weekend day */
	.W_weekend_datepicker {
		color:gray;
	  }
	   /* the color and background-color for a public holiday */
	 .W_public_holiday_datepicker {
	   color:#6997BC;
	   font-weight:bold;
		
	  }
	
	  	/* public holiday label */
.W_public_holiday_label {
	position: absolute;
    text-align: center;
    overflow: hidden;
    max-height: 9px;
	font-size: 7px;
    line-height: 9px;
	overflow:hidden;
	border:0px solid red;
    word-wrap: break-word;
    margin-top: 16px;
    margin-left: 0;
	color:#6997BC;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
	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:#6997BC;
	margin-left:8px;
	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:20px;
	width:20px;
	border-radius:20px;
	opacity:1;
	margin: 0 auto;
	background-color:#6997BC; 
	line-height:20px;
	cursor:pointer;
	text-align:center;
	color:white;
	margin-left:8px;
	margin-top:0px;
	zoom:1.1;
	z-index:2000;
	//border:2px dashed black;
	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.56);  /*  Horizontal decalage, vertical decalage,  blur raduis, spreda radius color */
	
}

/* 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:20px;
	width:20px;
	border-radius:20px;
	margin: 0 auto;
	line-height:20px;
	//cursor:pointer;
	text-align:center;
	margin-left:8px; /* you should center this cercle into its parent cell  adjusting margin-left and margin-top */
	margin-top:2px;
	z-index:2000;
	opacity:0.8;
	border:0px solid #4585F1;	
}

/* the hover style */
.W_inner_cell:hover { 
	float:left;
	height:20px;
	width:20px;
	border-radius:20px;
	margin: 0 auto;
	border:1px solid lightgray;
	//border:2px solid #4585F1;
	//transition: border .2s linear;
	line-height:20px;
	cursor:pointer;
	text-align:center;
	//color:white;
	margin-left:8px;
	margin-top:2px;
	z-index:2000;
	//background-color:#4585F1; 
	opacity:1;
	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.56); 
    

}

/* this class is applied on disabled days (non selectable) */
.W_inner_cell_disabled { 
	float:left;
	height:20px;
	width:20px;
	border-radius:20px;
	margin: 0 auto;
	line-height:20px;
	//cursor:pointer;
	text-align:center;
	margin-left:3px; /* you should center this cercle into its parent cell  adjusting margin-left and margin-top */
	margin-top:2px;
	z-index:2000;
	opacity:0.6;
	border:0px solid #4585F1;	
	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:30px;
	text-align:center;
	border:0px solid lightgray;
	margin-top:0px;
	font-size:10px;
}

/* the optional today button */
.W_datepicker_today_button {
	
	float:left;
	margin-left:10px;
	margin-top:5px;
	color:black;
	font-weight:bold;
	border:1px solid lightgray;
	text-align:center;
	border-radius:0px;
	padding-left:5px;
	padding-right:5px;
	padding-top:2px;
	padding-bottom:2px;
	cursor:pointer;
}
.W_datepicker_today_button:hover {
	
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75);
	
}  

/* the optional today button */
.W_datepicker_cancel_button {
	
	float:left;
	margin-left:5px;
	margin-top:5px;
	border:1px solid lightgray;
	text-align:center;
	border-radius:0px;
	padding-left:5px;
	padding-right:5px;
	padding-top:2px;
	padding-bottom:2px;
	cursor:pointer;
}
.W_datepicker_cancel_button:hover {
	
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75);
	
	
}  
   

/* this is the style of the small calendar icon you can optionally provide */
.calendar_icon{
	float:left;
	margin-top:5px;
	margin-left:10px;
	font-size:5px;
	width:28px;
	height:25px;
	border:1px solid gray;
	border-width:6px 0px 1px 0px; 
	border-color: #6997BC #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+ */

        
}