@charset "UTF-8";

.slider-validator {
	position: relative;
	width: 100%;
	height: 100%;
}

.slider-validator .slider-board {
	display: block;
	width: 100%;
	height: 160px;
	position: absolute;
	top: -160px;
	background-image: url(../../img/common/slider-validator/board-bg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity: 0;
	transition: all .2s linear;
	transform: translateY(20%);
}

.slider-validator.hidden .slider-board {
	display: none;
}

.slider-validator.hiding .slider-board {
	opacity: 0;
	transform: translateY(20%);
}

.slider-validator.showing .slider-board {
	opacity: 1;
	transform: translateY(0);
	pointer-events: none;
}

.slider-validator.shown .slider-board, .slider-validator.dragging .slider-board {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.slider-validator .slider-board .refresh-btn {
	position: absolute;
	cursor: pointer;
	width: 24px;
	height: 20px;
	background-image: url(../../img/common/slider-validator/refresh-btn.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	top: 10px;
	right: 10px;
}

.slider-validator.loading .slider-board .refresh-btn {
	display: none;
}

.slider-validator .slider-board .slice {
	position: absolute;
	width: 38px;
	height: 38px;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.slider-validator .slider-bar {
	width: 100%;
	height: 38px;
	box-sizing: border-box;
	color: #45494c;
	position: relative;
	border: 1px solid #e5e8ec;
	background-color: #f7f9fa;
	border-radius: 3px;
	text-align: center;
	line-height: 38px;
	user-select: none;
	font-size: 14px;
	color: #45494c;
	box-sizing: content-box;
}

.slider-validator .slider-bar .slider-mask {
	position: absolute;
	width: 38px;
	height: 38px;
	box-sizing: content-box;
	border-radius: 3px;
	top: -1px;
	left: -1px;
}

.slider-validator .slider-bar .slider {
	position: absolute;
	width: 38px;
	height: 38px;
	background-image: url(../../img/common/slider-validator/slider.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	box-shadow: 0 0 2px rgba(0, 0, 0, .3);
	box-sizing: border-box;
}

.slider-validator.loading .slider-board .slice {
	display: none;
}

.slider-validator.passed:hover .slider-board {
	display: none;
}

.slider-validator .slider-bar .desc {
	pointer-events: none;
}

.slider-validator.dragging .slider-bar .desc, .slider-validator.passed .slider-bar .desc {
	display: none;
}

.slider-validator.active .slider-bar .slider {
	cursor: pointer;
}

.slider-validator.active .slider-bar .slider:hover, .slider-validator.dragging .slider-bar .slider {
	background-image: url(../../img/common/slider-validator/slider-active.png);
}

.slider-validator.active .slider-bar .slider-mask:hover, .slider-validator.dragging .slider-bar .slider-mask {
	border: 1px solid #1990fa;
	background-color: #d1e9fe;
}

.slider-validator.passed .slider-bar .slider {
	background-image: url(../../img/common/slider-validator/slider-passed.png);
}

.slider-validator.passed .slider-bar .slider-mask {
	border: 1px solid #52ccba;
	background-color: #d2f4ef;
}

.slider-validator.failed .slider-bar .slider {
	background-image: url(../../img/common/slider-validator/slider-failed.png) !important;
}

.slider-validator.failed .slider-bar .slider-mask {
	border: 1px solid #f57a7a;
	background-color: #fce1e1;
}