.colourpicker {
  position: relative;
}

.cp-clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.colourpicker.input-group .colourpicker-input {
  float: none;
}

.colourpicker-input-container {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAElBMVEXs7Ozt7e3u7u79/f3+/v7////P4ouPAAAAI0lEQVQIW2NkAAJGZkYQSZAJIcAkC5D4//8/iMkKYv4ligkAoE4PJIKs1ewAAAAASUVORK5CYII=);
  border-radius: 4px;
}

.colourpicker.istransparent .input-group .colourpicker-input {
  color: transparent !important;
  background-color: transparent !important;
}

.colourpicker .colourpicker-input[disabled] {
  background-color: #EEEEEE !important;
}

.colourpicker .colourpicker-input[readonly] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.colourpicker-panel {
  position: absolute;
  background: #fff;
  border: 1px solid #CCC;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  z-index: 99999;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: none;
  left: 0;
  top: auto;
}

.palette-square .colourpicker-panel {
  width: 173px;
  height: 152px;
}

.palette-square.colourpicker-with-alpha .colourpicker-panel {
  width: 194px;
}

.palette-limited .colourpicker-panel {
  width: 184px;
  height: auto;
  padding: 1px 4px 4px 1px;
  background-color: #F8F8F8;
}

.colourpicker .cp-list-col {
  height: 100%;
  width: 100%;
  display: block;
}

.colourpicker .cp-list-col-outer {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  float: left;
  margin-left: 3px;
  border: 1px solid #DDD;
  cursor: pointer;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAElBMVEXs7Ozt7e3u7u79/f3+/v7////P4ouPAAAAI0lEQVQIW2NkAAJGZkYQSZAJIcAkC5D4//8/iMkKYv4ligkAoE4PJIKs1ewAAAAASUVORK5CYII=);
}

.colourpicker .cp-list-col-outer:hover {
  border-color: #444;
}

.colourpicker .cp-list-col.selected-col.light {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.colourpicker .cp-list-col.selected-col.dark {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.colourpicker .colourpicker-grid {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 150px;
  height: 150px;
  cursor: crosshair;
}

.colourpicker .colourpicker-grid-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right,#FFF,rgba(255,255,255,0));
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorstr=#FFFFFFFF,endColorstr=#00000000);
}

.colourpicker .colourpicker-grid-inner-2 {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0),#000);
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#00000000,endColorstr=#FF000000);
}

.colourpicker-grid .colourpicker-picker {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: -4px;
}

.colourpicker-grid .colourpicker-picker > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: 1px solid #fff;
  background-color: #111;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.colourpicker-slider {
  position: absolute;
  top: 1px;
  left: 152px;
  width: 20px;
  height: 150px;
  background: linear-gradient(red 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%);
  cursor: row-resize;
}

.colourpicker-slider-picker {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 2px;
  background: #fff;
  border: 1px solid #000;
  margin-top: -2px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.colourpicker-alpha-slider {
  position: absolute;
  top: 1px;
  left: 173px;
  width: 20px;
  height: 150px;
  display: none;
  cursor: row-resize;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAElBMVEXs7Ozt7e3u7u79/f3+/v7////P4ouPAAAAI0lEQVQIW2NkAAJGZkYQSZAJIcAkC5D4//8/iMkKYv4ligkAoE4PJIKs1ewAAAAASUVORK5CYII=);
}

.colourpicker-with-alpha .colourpicker-alpha-slider {
  display: block;
}

.colourpicker-alpha-inner-slider {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(255,255,255,1) 0, rgba(255,255,255,0) 100%);
  cursor: row-resize;
}

.colourpicker-with-alpha .colourpicker-alpha-inner-slider {
  display: block;
}

.colourpicker-istransparent,
.colourpicker-transparent-text {
  vertical-align: middle;
}

@media screen\0 {
  .colourpicker-slider {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAACWCAYAAAAWnUIIAAAAAXNSR0IArs4c6QAAA6tJREFUSA11lmF2FDkMhN2Nkw2EPHgsv/jDWfb+V9gz7L5lgYQk0019ZcmjHoKS8dilUkl22+5Z9tb0f7ZN3eUSxL2eOefei2Bv7fZMce+qCfwc4DKdAj/MweisMN8WcFQn8I3ADD2ASca5E36Z3eBrebNcJmnwLmPj+0Q4TOycrGiOJK1tMCmp2m/Bq9QM9hPZ38Y0H5kNH7JfB/MapsBHNF8r0fOYM2nbFcxVoFkQ5ewwlxvihrl+wFe1TjE3wmF6PWJGi5kR7lxqVkAPUlTfClC4WicQQHaZSvK3m02E0760/l2snQWXLSJshD9osFe2FPoDmmGKbBsg4WkGlfUIyot8/560+N6k379FnVaRnplfiybAhubXGh6EXpn4vc4HpkL3lXA1mJZRtulPj/gLfcxTXezs3wbklhlhk+mVpFHd/UupExZ4/7eAlLPq0//BVYxi+t8CTuHoAv7QuD+X8Cf1nwSuvzximPPxapCmvaRuPjhPFSbKF6adXDJFAoGFxqOh+JZ71gE0mvs8WwZF01zPTFSCfQRDXkcmemaKylZst44Jj6r/RTOex8iea0qQdu1RExEpDHAyRTWzHjgzKf5QUmpWJjKukwVJzRfDcTpRLh0sbJY0hgaGZl15wk9ZfDID5NiO3LR8rJnPfLJ9Vd7ncFJ1PXG4c6EVvz9r7gaH7HBysRhEIR3W5BwngHOCDGT4dKEovGbHc9AEwAxKk7BZFZr7S+GLiue2cgGi+1bcdWTzbuJS0v/InseXPC5pZ+6yTOTsixKxpNbEyWag+GThGOFRUjqE6xiG5gx3duqMRA635g8hsgBIoGk+DvCoybGXHZnPAyyt6tRiHGyfx/8AixlWEp03jRMNwup5FxbwxVsGuqc5Oh7RaBl1WRXQfeaOXjro6yNNMTMRD04mZgkHEUnF7+068Bv1Cep/sTwRvovlS/WTwLUkots/JmC53Xn7n1q6xFHxG+HdQZO0yv7OP7hGepgG37MNp+1+Dv0uwFxYHeLW78qMdk3T783bYPqSlaiz32k7uyTlIp3fxTc1kdAT5/2N843pwzxJYoJZlTWXR4oIE/WVPr09xK4zLgTN9kNvzjxHFuVsPpT3IbWZeV+2Ikx9essX/FiiYMbh8HOCOcJHiJPTOLzkscPMqgl6AE37HWjNyyvkUGeGT1DiNp6er9/Lq054b5d1Gjz+5igzYjEwJcF6+3903JLIM5o/RMIpR2//acDrvJg3Yhm7m5vtgL8I/gQWR3mPqBzLfwAAAABJRU5ErkJggg==);
  }

  .input-group {
    border: 1px solid #ccc;
  }
}
