* {
	margin: 0;
	padding: 0;
}
.showColor{
    position: absolute;
    display: inline-block;
    height: 80%;
    top: 10%;
    width: 120px;
    border: 1px solid #353535;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}
.color-picker {
	width: 300px;
	padding: 6px;
	background-color: #FFF;
	border: 1px solid #EBEEF5;
	border-radius: 4px;
	box-sizing: content-box;
	position: fixed;
	display: none;
	z-index: 9999;
}
.color-picker *{
	-webkit-user-select:none; 
	-moz-user-select:none; 
	-ms-user-select:none; 
	user-select:none;
}

.color-main {}

.color-svpanel {
	position: relative;
	width: 280px;
	height: 180px;
	background-color: rgb(255, 0, 0);
}

.color-svpanel__white {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255, 255, 255, 0)));
	background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.color-svpanel__black {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0, 0, 0, 0)));
	background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.color-hue {
	position: relative;
	background-color: red;
	float: right;
	width: 12px;
	height: 180px;
	box-sizing: border-box;
}

.color-hue-slider__bar {
	position: relative;
	height: 180px;
	background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red));
	background: linear-gradient(to bottom, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
}

.color-hue-slider__thumb {
	position: absolute;
	cursor: pointer;
	box-sizing: border-box;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	border-radius: 1px;
	background: #fff;
	border: 1px solid #f0f0f0;
	-webkit-box-shadow: 0 0 2px rgb(0 0 0 / 60%);
	box-shadow: 0 0 2px rgb(0 0 0 / 60%);
	z-index: 1;
}

.color-alpha {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 280px;
	height: 12px;
	margin-top: 6px;
	background: url(../img/bg.png);
}

.color-alpha-slider__bar {
	position: relative;
	background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white));
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
	height: 100%;
	background: linear-gradient(to right, rgba(255, 0, 0, 0) 0%, rgb(255, 0, 0) 100%);
}

.color-alpha-slider__thumb {
	position: absolute;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	left: 278px;
	top: 0;
	width: 4px;
	height: 100%;
	border-radius: 1px;
	background: #fff;
	border: 1px solid #f0f0f0;
	-webkit-box-shadow: 0 0 2px rgb(0 0 0 / 60%);
	box-shadow: 0 0 2px rgb(0 0 0 / 60%);
	z-index: 1;
}

.color-btns {
	margin-top: 6px;
	text-align: right;
}

.color-dropdown__value {
	float: left;
	line-height: 26px;
	font-size: 12px;
	color: #000;
	width: 160px;
}

.color-btns input {
	height: 24px;
	line-height: 24px;
	border-radius: 5px;
	background-color: #FFF;
	background-image: none;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	font-size: inherit;
	outline: none;
	padding: 0 15px;
	border: 1px solid #DCDFE6;
}

.color-btns button {
	color: #409EFF;
	background: 0 0;
	padding-left: 0;
	padding-right: 0;
	padding: 7px 15px;
	font-size: 12px;
	border-radius: 3px;
	border: 0;
	outline: none;
	cursor: pointer;
}

.color-btns button:nth-child(3) {
	border: 1px solid #DCDFE6;
	color: #606266;
	padding: 5px 12px;
}

.color-btns button:nth-child(3):hover {
	border: 1px solid #409EFF;
	color: #409EFF;
}
.color-svpanel__cursor{
	position: absolute;
	left:100%;
	top: 0;
}
.color-svpanel__cursor div{
	width: 4px;
	height: 4px;
	-webkit-box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px 2px rgb(0 0 0 / 40%);
	box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px 2px rgb(0 0 0 / 40%);
	border-radius: 50%;
	-webkit-transform: translate(-2px,-2px);
	transform: translate(-2px,-2px);
}