.gearDate
{
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:10px;
	background-color:rgba(0,0,0,0.2);
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2018917;
	overflow:hidden;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-transform:translateZ(0);
}

.date_ctrl
{
	vertical-align:middle;
	background-color:#F0F0F0;
	color:#363837;
	height:auto;
	width:100%;
	max-width:600px;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index:9902;
	overflow:hidden;
	-webkit-transform:translateY(0);
	transform:translateY(0);
	-ms-transform:translateY(0);
	-moz-transform:translateY(0);
	margin:0 auto;
}

.slideInUp
{
	animation:slideInUp .3s ease-in;
	-webkit-animation:slideInUp .3s ease-in;
	-ms-animation:slideInUp .3s ease-in;
	-moz-animation:slideInUp .3s ease-in;
}

100%
{
	-webkit-transform:translateY(0);
	transform:translateY(0);
	-moz-transform:translateY(0);
	-o-transform:translateY(0);
	-ms-transform:translateY(0);
}

.date_roll
{
	position:relative;
	width:100%;
	height:auto;
	overflow:hidden;
	font-weight:700;
	background-color:transparent;
	-webkit-mask:0;
}

.date_roll>div
{
	font-size:1.6em;
	height:10em;
	float:left;
	background-color:transparent;
	position:relative;
	overflow:hidden;
	width:33.33%;
}

.date_roll_mask
{
	-webkit-mask:0;
	padding:0 1em;
}

.date_grid
{
	position:relative;
	top:4em;
	width:100%;
	height:2em;
	box-sizing:border-box;
	z-index:0;
	background-color:#E8E8E8;
	border-top:1px solid #d4d4d4;
	border-bottom:1px solid #d4d4d4;
	margin:0;
}

.date_grid>div
{
	color:#000;
	position:absolute;
	right:0;
	top:0;
	font-size:.8em;
	line-height:2.5em;
}

.date_info_box
{
	color:#363837;
	font-size:1.8em;
	text-align:center;
	border-bottom:1px solid #d4d4d4;
	font-weight:700;
	padding:.6em 0;
}

.date_class_box
{
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:space-evenly;
	border-bottom:1px solid #ccc;
	padding:1em 2em;
}

.date_class
{
	display:inline-block;
	font-size:1.4em;
	width:20%;
	text-align:center;
	color:#809be6;
	border:1px solid #809be6;
	cursor:pointer;
	padding:.2em 0;
}

.date_class_box .date_class:first-child
{
	border-top-left-radius:.2em;
	border-bottom-left-radius:.2em;
}

.date_class_box .date_class:last-child
{
	border-top-right-radius:.2em;
	border-bottom-right-radius:.2em;
}

.date_class_box .active
{
	background-color:#809be6;
	color:#fff;
}

.lcalendar_cancel
{
	float:left!important;
}

.lcalendar_finish
{
	float:right!important;
}

.date_btn.lcalendar_cancel
{
	border-right:1px solid #d4d4d4;
}

.gear
{
	float:left;
	position:absolute;
	z-index:9902;
	width:5.5em;
	margin-top:-6em;
	cursor:pointer;
	padding:2em 0;
}

.date_roll>div .gear
{
	width:100%;
	color:#000;
}

.tooth
{
	height:2em;
	line-height:2em;
	text-align:center;
	overflow:hidden;
}

.date_roll_more>div:nth-of-type(4),.date_roll_more>div:nth-of-type(1)
{
	width:30%;
}

.date_btn_box
{
	overflow:hidden;
	position:relative;
	border-top:1px solid #d4d4d4;
}

.date_btn
{
	color:#000;
	font-size:1.6em;
	line-height:1em;
	text-align:center;
	cursor:pointer;
	float:left;
	width:49.9%;
	box-sizing:border-box;
	padding:.8em 1em;
}

.date_class_box>div:nth-of-type(2)
{
	flex:1;
}

.date_class_box .date_btn
{
	font-size:1.4em;
	line-height:1em;
	text-align:center;
	width:2em;
	float:left;
	border:none;
	height:100%;
	padding:0;
}

.date_roll_more>div,.date_roll_minut>div
{
	width:20%;
}

@media screen and min-width800px {
	body
	{
		background-color:#ADD8E6;
	}
}