.colorpicker-wrapper, .colorpicker-second-wrapper, .colorpicker {
	width: 221px;
	height: 468px;
	background: #fff;
	border: 1px solid #d4d4d4;
}

.colorpicker-relative {
	position: relative;	
	height: 538px;
}

.colorpicker-wrapper {
	position: fixed;
		left: 4px;
		top: 50%;
		z-index: 999999;
	margin: -234px 0 0 0;
}

.colorpicker-second-wrapper, .colorpicker {
	position: absolute;
		top: -3px;
		right: 1px; 	
}

.colorpicker {
	width: 229px;
	height: 470px; 
	padding: 0px 0 0 0;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}

.colorpicker h3, .colorpicker h2 {
	color: #5d5d5d !important;
	text-transform: uppercase !important;
	font-family: Open Sans !important;
		font-weight: 400 !important;
	text-align: center !important;
	width: 100% !important;
}

.colorpicker h2 {
	font-size: 13px !important;
	margin: 0 0 26px 0 !important;
	background: #fafafa !important;
	padding: 11px 0 12px 0 !important;
}

.colorpicker h3 {
	font-size: 11px !important;
	margin: 22px 0 !important;
}

.colorpicker .layout, .colorpicker .pattern, .colorpicker .color-select, .colorpicker .icon-shapes {
	text-align: center;	
}

/* Layout style */

.colorpicker .layout img {
	margin: 0 7px;
	border: 4px solid #fff;	
	outline: 1px solid #fff;
}

/* Pattern style */

.colorpicker .pattern {
	padding: 0 30px;	
	margin: 0;
}

.colorpicker .pattern img, .colorpicker .color-select li, .colorpicker .icon-shapes img {
	margin: 0;
	border: 2px solid #fff;	
	outline: 1px solid #fff;
}

/* Color style */

.colorpicker .color-select {
	padding: 0 33px 0 38px;	
	margin: 0;
}

.colorpicker .color-select li {
	margin: 0 3px 2px 0;
	float: left;
	list-style: none;
}

.colorpicker .color-select li span {
	display: block;
	width: 22px;
	height: 22px;
	border: 1px solid #c4c4c4;	
}

.colorpicker .color-select li.blue {
	background: #4568a8;	
}

.colorpicker .color-select li.green {
	background: #c70000;
}

.colorpicker .color-select li.yellow {
	background: #fbac14;
}

.colorpicker .color-select li.red {
	background: #bf2525;	
}

.colorpicker .color-select li.grey {
	background: #606060;
}

.colorpicker .color-select li.purple {
	background: #c0a4c0;
}

.colorpicker .color-select li.beige {
	background: #e9b481;
}

.colorpicker .color-select li.cyan {
	background: #94cedc;
}

.colorpicker .color-select li.pink {
	background: #f59ac7;
}

.colorpicker .color-select li.light-green {
	background: #c70000;
}

/* Icons style */

.colorpicker .icon-shapes {
	display: table;
	width: 140px;
	margin: 0 auto;
}

.colorpicker .icon-shapes div {
	display: table-row;
	vertical-align: middle;
	height: 29px;
}

.colorpicker .icon-shapes img {
	display: table-cell;
	vertical-align: middle;
	float: left;
	margin: 0 4px
}

/* Selected classes, hover classes */

.colorpicker .layout img#selected-layout, .colorpicker .layout img:hover, .colorpicker .pattern img#selected-pattern, .colorpicker .pattern img:hover, .colorpicker .color-select li#selected-color, .colorpicker .color-select li:hover, .colorpicker .icon-shapes img#selected-icon, .colorpicker .icon-shapes img:hover {
	border-color: #f8f8f8;
	outline-color: #e7e7e7;
	cursor: pointer;
	transition: border-color .2s, outline-color .2s;
		-moz-transition: border-color .2s, outline-color .2s;
		-webkit-transition: border-color .2s, outline-color .2s;
		-o-transition: border-color .2s, outline-color .2s;
}

.colorpicker .layout img#selected-layout, .colorpicker .pattern img#selected-pattern, .colorpicker .color-select li#selected-color {
	cursor: default;	
}

/* Colorpicker arrow */

.colorpicker:before, .colorpicker-second-wrapper:before, .colorpicker-wrapper:before {
	content: url("images/colorpicker_arrow.png");
	position: absolute;
		right: -34px;
		top: 50%;
	margin-top: -27px;
	padding: 14px 13px;
	background: #fff;
	border: 1px solid #d4d4d4;
	border-style: solid solid solid none;
	cursor: pointer;	
}

.colorpicker-move {
	position: absolute;
		right: -34px;
		top: 50%;
		z-index: 99999999;
	margin-top: -27px;
	display: block;
	width: 33px;
	height: 48px;
	cursor: pointer;	
}