/*
//////////////////////////////////////////////////////////////////////////////////
// 																				//
// COPYRIGHT: NICK VAN KOLLENBURG							 					//
// nickvankollenburg@gmail.com													//
// 																				//
//////////////////////////////////////////////////////////////////////////////////
*/

/* Datepicker
-------------------------------------------------------------- */
div.datepicker-alpha {
	position: absolute;
	z-index: 999980;
	
	margin: 0px;
	
	width: 100%;
	height: 100%;
}
div.datepicker-outline {
	
}
div.datepicker {
	cursor: default;
	
	background: var(--datepicker-background-color);
	border: var(--datepicker-overlay-border);
	border-radius: var(--border-radius);
	
	box-shadow:  var(--shadow-overlay);
	
	position: absolute;
	z-index: 999981;
	
	left: -500px;
	top: -500px;
	
	padding: 0px 3px 3px 3px;
		
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
div.datepicker table {
	width: 100%;
}
div.datepicker td.datepicker-prev {
	cursor: pointer;
	width: 30px;
}
div.datepicker td.datepicker-prev:hover div {
	opacity: 1;
	transform: scale(1.2);
}
div.datepicker td.datepicker-prev div {
	margin: 0px auto;
	width: 15px;
	height: 15px;
	
	opacity: 0.4;
	
	background-image: url(../../images/icons/buttons/prev.svg);
	background-repeat: no-repeat;
	background-size: contain;
	
	transition: 
		opacity 0.2s ease-in-out,
		transform 0.2s ease-in-out;
}
div.datepicker td.datepicker-next {
	cursor: pointer;
	width: 30px;
}
div.datepicker td.datepicker-next div {
	margin: 0px auto;
	
	width: 15px;
	height: 15px;
	
	opacity: 0.4;
	
	background-image: url(../../images/icons/buttons/next.svg);
	background-repeat: no-repeat;
	background-size: contain;
	
	transition: 
		opacity 0.2s ease-in-out,
		transform 0.2s ease-in-out;
}
div.datepicker td.datepicker-next:hover div {
	opacity: 1;
	transform: scale(1.2);
}
div.datepicker td.datepicker-year {
	text-align: center;
	height: 30px;
}
div.datepicker td.datepicker-year .select {
	font-size: 14px;
	
	color: rgb(var(--color-text));
	background-color: transparent;

	border: 0;
	border-radius: 0;
	
	box-shadow: none;
	
	width: 60px;
	padding: 5px;
	
	transition: font-weight 0.4s ease;
}
div.datepicker td.datepicker-year .select:hover {
	font-weight: var(--font-weight-bold);
}
div.datepicker td.datepicker-year .select:focus {
	font-weight: var(--font-weight-bold);
}
div.datepicker td.datepicker-day-names {
	font-weight: bold;
	text-align: center;
	
	width: 30px;
	height: 30px;
}
div.datepicker td.datepicker-days {
	cursor: pointer;
	text-align: center;
	
	width: 30px;
	height: 30px;
}
div.datepicker td.datepicker-days:hover {
	background-color: var(--datepicker-color-hover);
	font-weight: var(--font-weight-bold);
}
div.datepicker td.datepicker-selected {
	background-color: var(--datepicker-color-selected);
	font-weight: var(--font-weight-bold);
}
div.datepicker td.datepicker-current {
	background-color: var(--datepicker-color-current);
	font-weight: var(--font-weight-bold);
}
div.datepicker td.datepicker-lastmonth {
	color: var(--datepicker-color-bounds);
}
div.datepicker td.datepicker-nextmonth {
	color: var(--datepicker-color-bounds);
}

/** Datepicker input */
div.datepicker-input {
	cursor: pointer;
	
	font-family: var(--input-font);
	font-size: var(--input-font-size);
	font-weight: var(--input-font-weight);
	
	color: rgb(var(--color-input-text));
	background-color: var(--color-input-background);
	
	border: var(--input-border);
	border-radius: var(--input-border-radius);
	
	box-shadow: var(--input-box-shadow);
	
	width: var(--input-width);
	height:39px;
	
	opacity: var(--input-opacity);
	
	transition: 
		opacity 0.25s ease-in-out,
		color 0.25s ease-in-out,
		background-color 0.25s ease-in-out,
		box-shadow 0.25s ease-in-out,
		border 0.25s ease-in-out;
		
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
div.datepicker-input:hover {
	opacity: var(--input-opacity-hover);
	color: rgb(var(--color-input-text-hover));
	background-color: var(--color-input-background-hover);
	box-shadow: var(--input-box-shadow-hover);
	border: var(--input-border-hover);
}
div.datepicker-input-active {
	opacity: var(--input-opacity-active);
	color: rgb(var(--color-input-text-active));
	background-color: var(--color-input-background-active);
	box-shadow: var(--input-box-shadow-active);
	border: var(--input-border-active);
}
div.datepicker-input span {
	position:relative;
	top:10px;
	left:10px;
}