/* 
// Examples Stylesheet
// -------------------
*/

body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333;
	margin: 0;
	padding: 0;
}

a {
	color: #08c;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	padding: 1em;
}

.footer {
	margin-top: 50px;
	border-top: 1px solid #eee;
	padding: 20px 0;
	font-size: 12px;
	color: #999;
}

h1, h2, h3, h4, h5, h6 {
	color: #222;
	font-weight: 100;
	margin: 0.5em 0;
}

label {
	color: #999;
	display: inline-block;
	font-size: 0.85em;
	font-weight: bold;
	margin: 1em 0;
	text-transform: uppercase;
}

.hint {
	margin: 15px 0;
	font-style: italic;
	color: #999;
}
 .clearfix { overflow: hidden; }
body{
	background-color: #f0f0f0;
}
.container{
	background-color: #fff;
}


//=============================react- datepicker-plus css
@selectColor: #589DE2;
@selectLighter: lighten(@selectColor, 10%);
@borderColor: #ccc;
@borderLighter: lighten(@borderColor, 10%);
@borderDarker: darken(@borderColor, 10%);
@gap: 5px;

.date-components{
	.date-inputs input{
		float: left;
	}
	input{
		padding: @gap;
	}
}
.date-picker-block{
	position: absolute;
}
.date-multi{
	.date-picker:first-child{
		.date-next{display: none;}
	}		
	.date-picker:last-child{
		.date-prev{display: none;}
	}
}
.date-picker{
	display: inline-block;
	box-shadow: 0 1px 3px @borderColor;
	.date-title{
		position: relative;
		text-align: center;
		margin: @gap 0;
		.date-prev, .date-next{
		    text-align: center;
		    cursor: pointer;
		    position: absolute;
		    top: 0;
		    width: 0;
		    border: 0.45rem solid transparent;
		}
		.date-prev{
			left: 0;
    		border-right-color: @borderColor;
		}
		.date-next{
			right: 0;
			border-left-color: @borderColor;
		}
	}
	.date-header, .date-calendar{
		background-color: #f9f9f9;
		// padding: 5px 5px 0;
		font-size: 11px;
	}
	.date-header{
		border-bottom: 1px solid @borderLighter;
		background-color: @borderLighter;
		padding: @gap 0;
	}
	.date-week{
		&-0{
			text-align: right;
		}
	}
	.date-wtitle > span,
	.date-day{
		display:inline-block;
		padding:8px @gap;
		width: 25px;
		text-align: center;
	}
	.date-nocurrent, .date-disabled{
		color: @borderColor;
	}

	.date-range, .date-hover, .date-day:hover{
		background-color: @selectLighter;
	}

	.date-selected{
		background-color: @selectColor;
	}
	
	.date-selecting{
		.date-range:not(.date-hover){
			background-color: @borderLighter;
		}
	}

	.date-day{
		position: relative;
		cursor: pointer;
		.date-d{font-size: 13px;}
		.date-lunar{
			color: @borderDarker;
			font-size: 10px;
		}
	}
	.date-day-sets{
		span{display: block;} 
	}
	.date-time{
		text-align: center;
		padding: @gap 0;
		background-color: @borderLighter;
	}
	.date-fest{ 
		font-size: 11px;
		letter-spacing: 0;
	}
}

.date-picker-lunar{
	.date-wtitle > span,
	.date-day{
		padding: @gap;
	}
}

//=================================demo

.demo-list{
	font-family: MicroSoft Yahei;
	h5{
		font-size: 15px;
		font-weight: bold;
		color: #666;
		margin: 10px 0;
	}
	.demo-item{
		width: 45%;
		margin: 30px 5% 50px 0;
		float: left;
		input{
			display: block;
		}
	}
	.demo-full{
		width: 100%;
	}
	.demo-code{
		background-color: #f0f0f0;
		padding: 10px;
		// border: 1px solid @borderColor;
		color: #666;
	}
	.date-components{float: left;}
	.date-day-rest{
		background-color: #D47878;
		color: #fff;
		position: absolute;
		top: 0; right: 0;
	}
}
.date-picker-demo{
	.date-wtitle > span,
	.date-day{
		padding: 5px!important;
		width: 45px;
	}
	.date-day{
		border-right: 1px solid @borderColor;
		border-bottom: 1px solid @borderColor;
	}
	.date-week{
		.date-day:last-child{
			border-right: 0;
		} 
	}
	.date-day-price{
		color: #038DF3;
		font-size: 15px;
		letter-spacing: -1px
	}
}