@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:1px solid white;

	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: 17px;

    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;

	margin: 0 auto;

	background-color:#6997BC; 

	line-height:20px;

	cursor:pointer;

	text-align:center;

	color:white;

	margin-left:3px;

	margin-top:2px;

	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: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;	

}



/* 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:3px;

	margin-top:2px;

	z-index:2000;

	//background-color:#4585F1; 

	opacity:0.8;

	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+ */



        

}