.datemanager, .datemanager > *
{
	box-sizing: border-box;
	outline: none;
}

.datemanager
{
	position: relative;
	display: inline-block;
	background: #fff;
	margin: 0;
	padding: 3px 5px;
	border: 1px solid #ccc;
	height: 25px;
	vertical-align: top;
	white-space: nowrap;
	color: #717173;
	font-family: Arial, Helvetica, sans-serif !important;
	cursor: pointer;
	overflow: hidden;
}
	.datemanager.focus
	{
		border-color: #777;
	}

	.datemanager .current-date
	{
		display: inline-block;
		vertical-align: top;
		font-size: 12px;
	}
		.datemanager .current-date:hover
		{
			color: #333;
		}

	.datemanager:after
	{
		content: "";
		position: absolute;
		width: 20px;
		top: 0;
		bottom: 0;
		right: 25px;
		background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
		background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1));
		background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
	}

	.datemanager .arrow
	{
		position: absolute;
		width: 25px;
		right: 0;
		top: 0;
		bottom: 0;
		background: #fff;
	}
		.datemanager .arrow:after
		{
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			border-color: transparent;
			border-top-color: #999;
			border-width: 6px;
			right: 50%;
			top: 50%;
			margin: -3px -6px;
		}
		.datemanager .arrow:hover:after
		{
			border-top-color: #555;
		}


.datemanager-select-box
{
	position: absolute;
	z-index: 20;
	border: 1px solid rgb(155, 155, 155);
	padding: 30px 30px 5px;
	background: #FBFBFB;
	margin: 0 0 50px;
	font-family: Arial, Helvetica, sans-serif !important;
	color: #999;
	outline: none;
	width: 660px;
	box-shadow: 0 0 15px #999;
	box-sizing: content-box;
}

.datemanager-select-box *{
	font-family: Arial, Helvetica, sans-serif !important;
}

	.datemanager-select-box .dates
	{
		position: relative;
		padding: 30px 20px 0 20px;
		left: -20px;
	}

	.datemanager-select-box input
	{
		display: inline-block;
		cursor: pointer;
		outline: none;
		border: 1px solid #DEDEDE;
		border-radius: 100px;
		width: 100px;
		height: 36px;
		padding: 8px 0 8px 12px;
		background: #fff;
		box-sizing: border-box;
		margin: 0 5px 0 0;
		color: rgb(62, 62, 62);
		font-size: 12px;
	}
	.datemanager-select-box input:focus
	{
		border-color: #C2D1F3;
	}
		.datemanager-select-box input+span
		{
			margin: 0 5px 0 0;
			line-height: 32px;
		}

	
	.datemanager-select-box .apply
	{
		float: right;
		margin: 0 0 0 14px;
	}

	.datemanager-select-box .cancel
	{
		float: right;
		margin-left: 14px;
	}


.customCalendar
{
	position: relative;
	white-space: nowrap;
}

	.customCalendar .left,
	.customCalendar .right
	{
		position: absolute;
		width: 40px;
		height: 45px;
		top: 30px;
		cursor: pointer;
		background: #fff;
		z-index: 1;
		transition: background .3s;
	}
		.customCalendar .left:hover,
		.customCalendar .right:hover
		{
			background: #F8F8F8;
		}

		.customCalendar .left:after,
		.customCalendar .right:after
		{
			content: "";
			position: absolute;
			height: 6px;
			width: 6px;
			border-style: solid;
			border-color: #828384;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			top: 18px;
		}
		.customCalendar .left
		{
			left: -10px;
		}
			.customCalendar .left:after
			{
				left: 17px;
				border-width: 0 0 2px 2px;
			}
		.customCalendar .right
		{
			right: -50px;
		}
			.customCalendar .right:after
			{
				right: 17px;
				border-width: 2px 2px 0 0;
			}


	.customCalendar .calendar
	{
		position: relative;
		display: inline-block;
		padding: 0;
		vertical-align: top;
		box-sizing: border-box;
	}
		.customCalendar .calendar .title
		{
			text-align: center;
			font-size: 16px;
			margin: 0 0 25px 0;
			background: #fff;
			color: #494949;
			height: 45px;
			box-sizing: border-box;
			line-height: 45px;
		}
		.customCalendar .calendar table
		{
			border-collapse: collapse;
			border-spacing: 0;
			width: 200px;
			margin: 20px 10px 5px;
			font-size: 12px;
		}
			.customCalendar .calendar table th
			{
				font-weight: normal;
				font-size: 12px;
				text-align: center;
				color: #D0D0D0;
				padding-bottom: 5px;
			}
			.customCalendar .calendar table tr:nth-child(2) td > *
			{
				margin-top: 5px;
			}

			.customCalendar .calendar table td
			{
				color: #ccc;
				text-align: center;
				padding: 0;
				border-bottom: 1px solid #FBFBFB;
			}
				.customCalendar .calendar table td > *
				{
					display: inline-block;
					text-decoration: none;
					width: 100%;
					padding: 4px;
					color: inherit;
					box-sizing: border-box;
					transition: none;
				}
				.customCalendar .calendar table td.in-other-month
				{
					color: transparent;
				}
				.customCalendar .calendar table td.today > *
				{
					background-color: #C2D1F3;
				}
				.customCalendar .calendar table td.available
				{
					color: rgb(68, 68, 68);
				}
					.customCalendar .calendar table td.available:hover > *
					{
						background-color: #DFDFDF;
					}

				.customCalendar .calendar table td.in-range > a
				{
					background: #DFDFDF;
				}

				.customCalendar .calendar table td.in-range.today > a
				{
					background: #C2D1F3;
				}


/* Date Picker*/
.datemanager-select-box.piker{
	width: 220px;
	padding-top: 10px;
}

.datemanager-select-box.piker .dates{
	padding-top: 0;
}

.datemanager-select-box.piker .customCalendar .left, .datemanager-select-box.piker .customCalendar .right{
	top: 0;
}

.datemanager-select-box.piker .apply
{
	margin: 10px 12px 10px 0;
}

.datemanager-select-box.piker .cancel
{
	margin: 10px 12px 10px 14px;
}



.datemanagerSelect
{
	display: inline-block;
	font-size: 13px;
	color: #FFF;
	margin: 0 5px 0 0;
	cursor: pointer;
	background: #B6B7B9;
	outline: none;
	height: 17px;
	vertical-align: top;
	padding: 0 5px;
}
	.datemanagerSelect:hover
	{
		background: #777;
	}


.datemanagerSelect-box
{
	display: inline-block;
	position: relative;
	cursor: pointer;
	outline: none;
	border-radius: 100px;
	border: 1px solid #DEDEDE;
	width: 145px;
	height: 36px;
	line-height: 36px;
	padding: 0 15px;
	background: #fff;
	box-sizing: border-box;
	margin: 0 14px 0 0;
	color: rgb(62, 62, 62);
	font-size: 12px;
	vertical-align: top;
}
	.datemanagerSelect-box:focus
	{
		border-color: #777;
	}
	.datemanagerSelect-box:after
	{
		content: "";
		position: absolute;
		top: 15px;
		right: 13px;
		border-style: solid;
		border-width: 4px 4px;
		border-color: transparent;
		border-top-color: rgb(112, 112, 112);
	}

.datemanagerSelect-options
{
	position: absolute;
	margin-top: -36px;
	padding: 5px 0px;
	z-index: 999;
	background: #fff;
	box-shadow: 0 0 15px #999;
	font-size: 12px;
	color: #494949;
	box-sizing: border-box;
	font-family: sans-serif;
}

	.datemanagerSelect-options .search-text
	{
		font-size: 12px;
		color: #777;
		padding: 0 10px;
		font-style: italic;
		text-decoration: underline;
	}

	.datemanagerSelect-options .item
	{
		padding: 2px 20px 2px 20px;
		white-space: nowrap;
		line-height: 20px;
		cursor: pointer;
	}
	.datemanagerSelect-options .item.selected
	{
		background: #DFDFDF;
		cursor: default;
	}
	.datemanagerSelect-options .item.active
	{
		background: #C2D1F3;
	}


/* way to stop blinking*/
.datemanager select{
	width: 200px;
	height: 25px;
}