/*
* @Author: Administrator
* @Date:   2017-05-21 20:50:09
* @Last Modified by:   Administrator
* @Last Modified time: 2018-07-31 15:47:27
*/


*{
	padding: 0;
	margin: 0;
	list-style: none;
}
html,body{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #ccc;
}
.huaban{
	position: absolute;
	left: 0;
	top: 60px;
	right: 0;
	bottom: 0;
	background: #ccc;
}
.huaban .left{
	width: 150px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0px;
	padding: 30px 20px;
	box-sizing: border-box;
	border-right: 1px solid #000;
	background: #ccc;
}
.huaban .left label{
	width: 40px;
	height: 40px;
	border: 1px solid #000;
	float: left;
	margin: 5px 5px;
	text-align: center;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
hr{
	background: #000;
}
.huaban .left label input{
	width: 20px;
	/* opacity: 0; */
}

.huaban .top{
	height: 100px;
	top: 0;
	left: 0;
	padding: 25px 180px;
	box-sizing: border-box;
	border-bottom: 1px solid #000;
}
.huaban .top label{
	width: 40px;
	height: 40px;
	border: 1px solid #000;
	float: left;
	margin: 5px 5px;
	text-align: center;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
.huaban .top .btn-btn{
	line-height: 26px;
	float: left;
	height: 40px;
	width: 100px;
	margin: 5px 5px;
}
/* .screenCanvas{
	position: absolute;
	left: 150px;
	width: 100%;
	height: 100%;
	background: #0c0c0c;
} */
.screen{
	position: absolute;
	width: 600px;
	height: 400px;
	background: #fff;
	left: 150px;
	top: 100px;
	/* left: 0; */
/* 	right: 0;
	bottom: 0;
	margin: auto; */
}
.screen .mask{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 2;
}
.screen .masktop{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background: rgba(0, 0, 0, 0);
	z-index: 10;
	display: none;
}
.screen .eraser{
	display: none;
	border: 1px solid #000;
	position: absolute;
	z-index: 1;
}
.canvas{
	z-index: 1;
	position: absolute;
}
.clip{
	z-index: 1;
	position: absolute;
}
.screen .image{
	position: absolute;
	z-index: -1;
}
.photo{
	width: 600px;
	position: absolute;
	/* overflow: hidden */
}
#photo{
	position: absolute;
	top: 0;
	left: 0;
}
#pic{
	position: absolute;
	top: 0;
	left: 0;
}
.filter input {
	position: relative;
	margin: 10px 20px 0 10px;
	vertical-align: middle;
}

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border-radius: 5px;
    
    /*required for proper track sizing in FF*/
    width: 150px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 7px;
    background: #ABB7B7;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #4B77BE;
    margin-top: -6px;
    vertical-align: middle;
}
input[type=range]:focus {
    outline: none;
}

input[type=range]:hover {
	cursor: pointer;
}
.filter{
	width: 500px;
	position: absolute;
	top: 100px;
	left: 800px;
}

/* .filter {
    width: 30%;
    display: inline-block;
	border: 2px solid #000;
	padding-left: 10px;
} */

.filter p {
	margin: 18px 0;
	vertical-align: middle;
	clear: both;

}

.filter label {
	display: inline-block;
	margin: 10px 0 0 0;
	width: 50px;
	font-size: 1.1rem;
	color: #22313F;
	text-align: left;
	vertical-align: middle;
	float: left
}

.filter input {
	position: relative;
	/* vertical-align: middle; */
	float: left
}