/*!
 * jQuery / jqLite colorPicker ByGiro
 *
 * version 0.0.2
 * Copyright August 2016, G. Tomaselli
 * Licensed under the MIT license.
 *
 */

.cp-cont {
	position: relative;
}

.cpBG {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 13px;
    width: 280px;
	box-shadow: 3px 3px 5px #888888;
	left: 10px;
	position: absolute;
	background: #fff;
	z-index: 10;
}

.cp-cont .fade {
	opacity: 0;
	transition: opacity 0.15s linear 0s;
}

.cp-cont .fade.in {
    opacity: 1;
}

.cp-colors {
    border: 1px solid #808080;
    width: 200px;
    height: 200px;
    float: left;
	position: relative;
}

.cp-colors .cp-trigger {
    width: 200px;
    height: 200px;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}

.cp-colors .cp-white {
    width: 200px;
    height: 200px;
    background: -webkit-linear-gradient(left, #fff 0, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0, transparent 100%);
    background: -ms-linear-gradient(left, #fff 0, transparent 100%);
    background: linear-gradient(to right, #fff 0, transparent 100%);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00ffffff', GradientType='1')";
}

.cp-colors .cp-white .cp-black {
    width: 200px;
    height: 200px;
    background: -webkit-linear-gradient(top, transparent 0, #000 100%);
    background: -moz-linear-gradient(top, transparent 0, #000 100%);
    background: -ms-linear-gradient(top, transparent 0, #000 100%);
    background: linear-gradient(to bottom, transparent 0, #000 100%);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#ff000000')";
    position: relative;
}
.cp-colors .cp-white .cp-black .cp-cursor {
    position: absolute;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
	border: 2px solid rgb(255, 255, 255);
	box-shadow: rgb(103, 185, 255) 0px 0px 3px 1px;
}

.cp-hues {
    border: 1px solid #808080;
    position: relative;
    margin-left: 10px;
	float: left;
    height: 200px;
    width: 15px;
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.cp-alpha {
    border: 1px solid #808080;
    position: relative;
    margin-left: 10px;
	float: left;
    height: 200px;
    width: 15px;
}

.cp-alpha .cp-bg,
.cp-alpha .cp-trigger,
.cp-hues .cp-trigger {
    position: absolute;
    left: 0;
	top: 0;
    width: 15px;
	cursor: pointer;
    height: 200px;
}

.cp-alpha .cp-bg {
	width: 13px;
	height: 198px;
}

.cp-alpha .cp-cursor,
.cp-hues .cp-cursor {
	border: 2px solid rgb(255, 255, 255);
	box-shadow: rgb(103, 185, 255) 0px 0px 3px 1px;
	border-radius: 3px;
    position: absolute;
    left: -1px;
    width: 15px;
    height: 12px;
}

.cp-alpha .cp-chess {
    background-image: url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QN/aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzAxNCA3OS4xNTY3OTcsIDIwMTQvMDgvMjAtMDk6NTM6MDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZDU1MjYzNGYtMTc2My04MDQzLWJiZTctZDZkYmVhOWM0ZTEyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM3RTIwRDVENzUxNTExRTY4OEE1OEYyNEYxNTIyODU2IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM3RTIwRDVDNzUxNTExRTY4OEE1OEYyNEYxNTIyODU2IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE0IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNiNDllNzE3LWI1NjQtNGY0NC05MjhmLWY4ZDYwZGU4NWMyMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNTUyNjM0Zi0xNzYzLTgwNDMtYmJlNy1kNmRiZWE5YzRlMTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAOAA4DAREAAhEBAxEB/8QAWwABAQEAAAAAAAAAAAAAAAAABgAHAQEBAAAAAAAAAAAAAAAAAAAAARAAAgIBAQkAAAAAAAAAAAAAAQIDBAARIdGSsnM0VAUVEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDc6dO3HcgkkgkSNJFZ3ZSAADqSSRgLvoUPJi4134F7DsLPSflOAD2aYV//2Q==');
    background-repeat: repeat-y;	
}

.cp-alpha .cp-chess-bg,
.cp-alpha .cp-chess{
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 200px;
}

.cp-alpha .cp-chess-bg {
	overflow: hidden;
    width: 13px;
    height: 198px;
}

/* based on: http://jsfiddle.net/bgrins/Whc6Z/ */
.cp-hues .ie-1 {
    height: 17%;
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00')";
}
.cp-hues .ie-2 {
    height: 16%;
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00')";
}
.cp-hues .ie-3 {
    height: 17%;
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff')";
}
.cp-hues .ie-4 {
    height: 17%;
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff')";
}
.cp-hues .ie-5 {
    height: 16%;
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff')";
}
.cp-hues .ie-6 {
    height: 17%;
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000')";
}

.cp-values,
.cp-buttons {
	float: left;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.cp-buttons .btn:not(:first-child) {
	margin-left: 5px;
}

.cp-values {
	font-size: 12px;
	line-height: 14px;
	margin-top: 15px;
}

.cp-values > * {
	float: left;
	margin-top: 10px;
	font-weight: bold;
	font-style: italic;
}

.cp-values > *:not(:first-child) {
	margin-left: 10px;
}

.cp-values input {
	line-height: 12px;
	width: 35px;
	font-weight: normal;
	font-style: normal;
}

.cp-values .cp-prev,
.cp-values .cp-hex {
	width: 50%;
	margin: 0;
}

.cp-values .cp-prev {
	height: 14px;
	text-align: center;
}

.cp-values .cp-prev i{
	width: 50px;
	height: 14px;
	display: inline-block;
	border-radius: 3px;
	border: 2px solid rgb(255, 255, 255);
	box-shadow: rgb(103, 185, 255) 0px 0px 3px 1px;
}

.cp-values .cp-hex input {
	width: 70px;
}

.clear {
	clear: both;
}