#colorpicker {
	/*background-color: #808080;*/
	display: table;
	margin: 0 auto;
	/*padding: .5em;*/
}

/**************************** saturation */
.colorpicker-sat {
	display: inline-block;
	margin-right: .5em;
	position: relative;
	width: 256px; height: 256px;
}
.colorpicker-sat div {
	background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.colorpicker-sat div + div {
	background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.colorpicker-sat div,
.colorpicker-sat div + div {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.colorpicker-sat i {
	display: block;
	position: absolute; top: -4px; right: -4px;
	width: 9px; height: 9px;
	z-index: 2;
}
.colorpicker-sat i::before {
	content: "";
	border: 1px solid #fff;
	border-radius: 100%;
	box-shadow: 0 0 0 1px #000;
	display: block;
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}

/**************************** hue */
.colorpicker-hue {
	display: inline-block;
	margin-right: .5em;
	position: relative;
	width: 32px; height: 256px;
}
.colorpicker-hue div {
	background-image: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.colorpicker-hue i {
	border: 1px solid #fff;
	box-shadow: 0 0 0 1px #000;
	display: block;
	position: absolute; top: -3px; right: 0; left: -1px;
	width: 32px; height: 7px;
	z-index: 2;
}
.colorpicker-hue i::before {
	display: block;
	content: "";
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}

/**************************** input */
#colorpicker table {
	display: inline-block;
	vertical-align: top;
}
.colorpicker-swatch {
	border: 1px solid #000;
	height: 4em;
}
input.colorpicker {
	font-family: "courier new",courier,monospace;
	width: 5em;
}

.colorpicker-hue,
.colorpicker-sat {
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}
