.colourpicker {
  position: relative;
}
.cp-clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.colourpicker.input-group .colourpicker-input {
  float: none;
}
.colourpicker.input-group.istransparent .colourpicker-input {
  color: transparent !important;
  background-color: #DDDDDD !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: white;
  border: solid 1px #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-limited .colourpicker-panel {
  width: 181px;
  height: auto;
  padding: 5px;
  background-color: #F8F8F8;
}
.colourpicker .cp-list-row {
  margin-top: 3px;
}
.colourpicker .cp-list-row:first-child {
  margin-top: 0;
}
.colourpicker .cp-list-col {
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 3px;
  border: 1px solid #DDDDDD;
  cursor: pointer;
}
.colourpicker .cp-list-col:hover {
  border-color: #444444;
}
.colourpicker .cp-list-col:first-child {
  margin-left: 0;
}
.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;
  background: linear-gradient(to right,#FFF,rgba(255,255,255,0));
}
.colourpicker .colourpicker-grid-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0),#000);
}
.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: solid 1px white;
  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: white;
  border: solid 1px black;
  margin-top: -2px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.colourpicker-istransparent,
.colourpicker-transparent-text {
  vertical-align: middle;
}

/* The following is a hack for IE8+9 so that the colour images will work */
@media screen\0 {
  .colourpicker-sprite {
     background-image: url(data:image/png;base64,[encoded data, 18632 characters]);
  }
  .colourpicker-slider {
    background-position: 20px 0;
  }
}