input[type=color] {

    font-size:0px;

    color:rgba(0,0,0,0);

    cursor:pointer;

    

    -moz-user-select: none;

    -khtml-user-select: none;

    user-select: none;

    touch-action: none;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    -webkit-text-size-adjust: none;

}



input[type="color"]::-webkit-color-swatch-wrapper {

	padding: 0;

}

input[type="color"]::-webkit-color-swatch {

	border: none;

}



input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

}



.color-picker {

	display:inline-block;

	box-sizing:border-box;

	width:300px;

	padding:15px 15px 0 15px;

	box-shadow: 0px 2px 10px 5px rgba(0,0,0,0.2);

	height:150px;

	background:fff;

	font-size:0;

	position:fixed;

	top:50%;

	left:50%;

	margin:-75px 0 0 -150px;

	background: #fff;



	transition: opacity 0.2s ease-out;

	opacity: 1;

}



.color-picker.hidden {

    opacity: 0; 

    height: 0;

    top:-50%!important;

    left:-50%!important;

    transition: opacity 0.2s ease-out, height 0s linear 0.2s, top 0s linear 0.2s, left 0s linear 0.2s;

}



.color-picker * {

	font-family: 'Open Sans', sans-serif;

	position:relative;

}



.color-picker .color {

	display:inline-block;

	vertical-align:top;

	width:35px;

	height:35px;

	margin:0 15px 15px 0;

	box-sizing:border-box;

	border:1px solid #999;

	background:#ff0000;

}



.color-picker input {

	display:inline-block;

	vertical-align:top;

	box-sizing:border-box;

	width:120px;

	height:35px;

	line-height:35px;

	border:1px solid #999;

	font-size:12pt;

	color:#666;

	margin:0 15px 15px 0;

	padding:0 10px;

	text-transform:uppercase;

}



.color-picker .close {

	display:inline-block;

	vertical-align:top;

	width:35px;

	height:35px;

	cursor:pointer;

	background:#fff;

	border-radius:50%;

	position:absolute;

	top:-8px;

	right:-8px;

	box-shadow: 0 0 3px 5px rgba(0,0,0,0.1);

}



.color-picker .close:before, .color-picker .close:after {

	display:inline-block;

	content:'';

	width:2px;

	height:15px;

	position:absolute;

	top:10px;

	left:50%;

	margin-left:-1px;

	background:#999;

	transform: rotate(45deg) ;

	-webkit-transform: rotate(45deg) ;

	-moz-transform: rotate(45deg) ;

	-o-transform: rotate(45deg) ;

	-ms-transform: rotate(45deg) ;

}



.color-picker .close:before {

	transform: rotate(-45deg) ;

	-webkit-transform: rotate(-45deg) ;

	-moz-transform: rotate(-45deg) ;

	-o-transform: rotate(-45deg) ;

	-ms-transform: rotate(-45deg) ;

}



.color-picker iframe {

	display: inline-block;

	vertical-align:top;

    background: #fff;

    border: 0;

    width: 300px;

    height: 100px;

    margin:-15px -15px 0 -15px;

}