:root {
  --sp-border-color: #999;
}

.sp-cp.sp-container {
  background-color: #f2f2f2;
  border-color: var(--sp-border-color);
  border-radius: 0.25rem;
  z-index: 1000;
}

.sp-cp.sp-container, .sp-cp.sp-container button, .sp-cp.sp-container input, .sp-cp .sp-color, .sp-cp .sp-hue, .sp-cp .sp-clear {
  font: inherit;
}

.sp-cp .sp-top {
}
.sp-cp .sp-color, .sp-cp .sp-hue, .sp-cp .sp-clear {
  border: 1px solid var(--sp-border-color);
}

/* Input */
.sp-cp .sp-input-container {
}
.sp-cp .sp-initial-disabled .sp-input-container {
}
.sp-cp .sp-input {
  border: 1px solid var(--sp-border-color);
  background: #fff;
}
.sp-cp .sp-input:focus {
  border: 1px solid var(--primary);
}
.sp-cp .sp-input.sp-validation-error {
}
.sp-cp .sp-picker-container , .sp-cp .sp-palette-container {
  border: 0;
}
.sp-cp .sp-picker-container {
}

/* Palettes */
.sp-cp .sp-palette-container {
  border: 0;
}

.sp-cp .sp-palette-row {
  display: flex !important;
  flex-direction: column !important;
}

.sp-cp .sp-palette-only .sp-palette-container {
}

.sp-cp .sp-palette .sp-thumb-el {
}
.sp-cp .sp-palette .sp-thumb-el:hover, .sp-cp .sp-palette .sp-thumb-el.sp-thumb-active {
}
.sp-cp .sp-thumb-el {
}

/* Initial */
.sp-cp .sp-initial {

}
.sp-cp .sp-initial span {
}

.sp-cp .sp-initial .sp-clear-display {
}

/* Buttons */
.sp-cp .sp-palette-button-container,
.sp-cp .sp-button-container {
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-cp.sp-replacer {
  border-radius: 0.25rem;
  border-color: var(--sp-border-color);
  padding: 3px;
}
.sp-cp.sp-replacer:hover, .sp-cp.sp-replacer.sp-active {
  border-color: var(--primary);
}
.sp-cp.sp-replacer.sp-disabled {
  cursor:default;
}
.sp-cp .sp-dd {
  display: none;
}
.sp-cp .sp-preview {
  margin-right: 0;
  border: 0;
  width: 20px;
  height: 20px;
}

.sp-cp .sp-palette {
}
.sp-cp .sp-palette .sp-thumb-el {
  border: 0;
}

/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-cp.sp-container button {
}
.sp-cp.sp-container button:hover {
}
.sp-cp.sp-container button:active {
}
.sp-cp .sp-cancel {
}
.sp-cp .sp-cancel:hover {
}

.sp-cp .sp-palette span:hover, .sp-cp .sp-palette span.sp-thumb-active {
  border-color: var(--sp-border-color);
}

.sp-cp .sp-preview, .sp-alpha, .sp-thumb-el {
}
.sp-cp .sp-preview-inner, .sp-cp .sp-alpha-inner, .sp-cp .sp-thumb-inner {
  border: 1px solid var(--sp-border-color);
}

.sp-cp .sp-palette .sp-thumb-inner {
}

.sp-cp .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
  background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAF5JREFUeNpiYBgFtAGMggJAvB+IDWBCzGQZwsCwH4gtgPgHEO0k1yXngfg/EM+nxDv0NAShOIEyl4BigFHwPVRDAmXeQTWsgLIwQTWMgoBFNWw+NVKvwmgWBgOAAAMA7dkixP/Gjn8AAAAASUVORK5CYII=');
}

.sp-cp .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
  background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNpiYBgFNAH///8XAOL9QGxAqSHn/0NAPzUMmT9EDEFSnECRS0AxAMTvoRoSKPIOmmEFFIUJmmHkByyaYfOpkXoVRvMwGAAEGAAjJbOa/GmUVAAAAABJRU5ErkJggg==');
}

.sp-cp .sp-clear-display {
}

/* interactive */
.sp-cp .sp-dragger {
  border: 1px solid #000;
  background: #fff;
}
.sp-cp .sp-slider {
  opacity: 1;
  height: 4px;
  left: -2px;
  right: -2px;
  border-radius: 1em;
}
.sp-cp .sp-alpha-handle {
  opacity: 1;
  top: -2px;
  bottom: -2px;
  width: 4px;
  border-radius: 1em;
}