.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: 20px 0 5px 36px;
	background: #F8F8F8;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif !important;
	color: #999;
	outline: none;
	width: 565px;
	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: 10px 20px 0 20px;
		left: -20px;
	}

	.datemanager-select-box input
	{
		display: inline-block;
		cursor: pointer;
		outline: none;
		border: 3px solid rgb(222, 222, 222);
		border-radius: 0;
		width: 95px;
		height: 33px;
		padding: 7px 0 7px 10px;
		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: rgb(65, 153, 193);
	}
		.datemanager-select-box input+span
		{
			margin: 0 5px 0 0;
		}

	
	.datemanager-select-box .apply
	{
		height: 32px;
		box-sizing: border-box;
		border: 1px solid rgb(112, 134, 34);
		background: rgb(148, 182, 43);
		color: #fff;
		border-radius: 7px;
		padding: 0 15px;
		margin-left: 20px;
	}

	.datemanager-select-box .cancel
	{
		margin-left: 15px;
		color: rgb(68, 68, 68);
		vertical-align: middle;
		line-height: 33px;
		font-size: 12px;
	}

	.datemanager-select-box .cancel:hover{
		text-decoration: underline;
	}

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

	.customCalendar .left,
	.customCalendar .right
	{
		position: absolute;
		width: 40px;
		height: 45px;
		top: 10px;
		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: 10px;
			width: 10px;
			border-style: solid;
			border-color: rgb(137, 206, 239);
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			top: 17px;
		}
		.customCalendar .left
		{
			left: -16px;
		}
			.customCalendar .left:after
			{
				left: 17px;
				border-width: 0 0 1px 1px;
			}
		.customCalendar .right
		{
			right: -20px;
		}
			.customCalendar .right:after
			{
				right: 17px;
				border-width: 1px 1px 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 15px 0;
			background: #fff;
			color: rgb(68, 68, 68);
			height: 45px;
			box-sizing: border-box;
			line-height: 45px;
		}
		.customCalendar .calendar table
		{
			border-collapse: collapse;
			border-spacing: 0;
			width: 165px;
			margin: 20px 10px 5px 0;
			font-size: 12px;
		}
			.customCalendar .calendar table th
			{
				font-weight: normal;
				font-size: 10px;
				text-align: center;
				color: rgb(68, 68, 68);
				padding-bottom: 5px;
				border-bottom: 1px solid rgb(160, 160, 160);
			}
			.customCalendar .calendar table tr:nth-child(2) td > *
			{
				margin-top: 5px;
			}

			.customCalendar .calendar table td
			{
				color: #ccc;
				text-align: center;
				padding: 0;
			}
				.customCalendar .calendar table td > *
				{
					display: inline-block;
					text-decoration: none;
					width: 100%;
					padding: 5px 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: rgb(239, 209, 136);
				}
				.customCalendar .calendar table td.available
				{
					color: rgb(68, 68, 68);
				}
					.customCalendar .calendar table td.available:hover > *
					{
						background-color: rgb(65, 153, 193);
					}

				.customCalendar .calendar table td.in-range > a
				{
					background: rgb(139, 202, 237);
				}


.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: 1px solid rgb(222, 222, 222);
	width: 145px;
	height: 33px;
	line-height: 33px;
	padding: 0 15px;
	background: #fff;
	box-sizing: border-box;
	margin: 0 25px 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: 13px;
		right: 10px;
		border-style: solid;
		border-width: 5px 4px;
		border-color: transparent;
		border-top-color: rgb(112, 112, 112);
	}

.datemanagerSelect-options
{
	position: absolute;
	padding: 5px 0px;
	z-index: 999;
	background: #fff;
	border: 1px solid #777;
	border-top-width: 0;
	font-size: 12px;
	color: rgb(62, 62, 62);
	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: #EEE;
		color: #AAA;
		cursor: default;
	}
	.datemanagerSelect-options .item.active
	{
		background: rgb(139, 202, 237);
	}


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