/home/arranoyd/magicraft/wp-content/themes/massive-dynamic/lib/mbuilder/assets/css/color-picker.css
.color-picker-container {
  display: inline-block;
  background: #2f2f2f none repeat scroll 0% 0%;
  width: 170px;
}
.color-picker-container .picker-container .canvas-container {
  margin: 10px;
  position: relative;
  width: 150px;
  display: block;
}
.color-picker-container .picker-container .canvas-container.active {
  display: block;
}
.color-picker-container .picker-container .canvas-container canvas {
  cursor: crosshair;
  border-radius: 50%;
}
.color-picker-container .picker-container .canvas-container .pointer {
  width: 15px;
  height: 15px;
  border: 2px solid #2f2f2f;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  background: transparent;
}
.color-picker-container .picker-container .canvas-container input {
  margin-top: 18px;
  width:100%;
  font-size:12px;
  text-align: center;
  background: transparent;
  text-transform: uppercase;
  border: 0;
  color: #bbbdbf;
}
.color-picker-container .picker-container .canvas-container input:focus{
    outline: none;
}
.color-picker-container .picker-container .slider-container {
  width: 100%;
  position: relative;
  margin:10px 15px;
}
.color-picker-container .picker-container .slider-container .slider {
  width: 136px;
  height: 7px;
  border-radius:5px;
  background: #000;
}
.color-picker-container .picker-container .slider-container .pointer {
  width: 7px;
  height: 7px;
  border-radius:50%;
  position: absolute;
  top: 0;
  border: solid 1px #000;
  background:#ddd;
  cursor:pointer;
}
.color-picker-container .palletes-container {
  float: right;
  width: 100%;
  margin: 0 15px 15px 0;
}
.color-picker-container .palletes-container .palette {
  width: 12px;
  height: 12px;
  float: right;
  border-radius: 50%;
  margin: 2px;
  cursor: pointer;
}