.colorpickr,
.colorpickr *,
.colorpickr *:after,
.colorpickr *:before {
  box-sizing:border-box;
  }
.colorpickr {
  background-color:#f0f0f0;
  width:330px;
  padding:10px 0;
  z-index:1;
  border-radius:4px;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  }
  .colorpickr,
  .colorpickr input[type='number'],
  .colorpickr input[type='text'] {
    font-family:'Helvetica Neue', Helvetica, sans-serif;
    color:#404040;
    font-size:12px;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    }
  /* Clearfix rule */
  .colorpickr .cp-floor:after,
  .colorpickr .cp-body:after {
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

.colorpickr .cp-relative {
  position:relative;
  }
.colorpickr .cp-inputs > div {
  margin-bottom:10px;
  }
.colorpickr fieldset {
  padding:0;
  margin:0 0 5px;
  border:0;
  }

.colorpickr fieldset input[type=radio] {
  position:relative;
  top:3px;
  cursor:pointer;
  }
.colorpickr fieldset div:first-child {
  width:25px;
  display:inline-block;
  height:26px;
  }
.colorpickr fieldset div:last-child {
  width:75px;
  display:inline-block;
  position:relative;
  }

/* Inputs */
.colorpickr fieldset label {
  position:absolute;
  color:rgba(0,0,0,0.25);
  font-weight:600;
  top:7px;
  left:5px;
  }
  .colorpickr fieldset.cp-active label { color:rgba(0,0,0,0.75); }

.colorpickr fieldset input[type='number'],
.colorpickr fieldset input[type='text'] {
  width:100%;
  height:26px;
  margin:0;
  border:1px solid #fff;
  padding:5px 5px 5px 20px;
  -webkit-appearance:none;
  }
  .colorpickr input:invalid {
    border-color:#e55e5e;
    }

.colorpickr button {
  background-color:rgba(0,0,0,0.25);
  text-align:center;
  color:#fff;
  font-size:11px;
  line-height:14px;
  font-weight:bold;
  display:inline-block;
  height:auto;
  padding:5px 10px;
  width:50px;
  margin:0;
  border:none;
  cursor:pointer;
  border-radius:3px;
  white-space:nowrap;
  text-overflow:ellipsis;
  /* The button element needs to be forced this */
  -webkit-font-smoothing:antialiased;
  }
  .colorpickr button:not(.cp-active):hover {  box-shadow:inset 0 0 0 3px rgba(0,0,0,0.10); }
  .colorpickr button.cp-active { background-color:rgba(0,0,0,0.75); }

.colorpickr .cp-col {
  float:left;
  padding:0 10px;
  position:relative;
  }
  .colorpickr .cp-col:first-child {
    width:210px;
    padding-right:0;
    }
  .colorpickr .cp-col:last-child {
    width:120px;
    z-index:1;
    }

.colorpickr .cp-mode-tabs {
  margin:0 0 10px;
  }
  .colorpickr .cp-mode-tabs button:first-child { border-radius:3px 0 0 3px; }
  .colorpickr .cp-mode-tabs button:last-child { border-radius:0 3px 3px 0; }

.colorpickr .cp-selector {
  position:relative;
  width:190px;
  height:190px;
  z-index:1;
  }

.colorpickr .cp-gradient {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  }
  .colorpickr .cp-light-left {
    background:linear-gradient(to right, #FFF 0%, transparent 100%);
    }
  .colorpickr .cp-light-bottom {
    background:linear-gradient(to bottom, transparent 0%, #FFF 100%);
    }
  .colorpickr .cp-dark-bottom {
    background:linear-gradient(to bottom, transparent 0%, #000 100%);
    }

/* r-ne = white
 * r-nw = yellow
 * r-sw = red
 * r-se = violet
 */
.colorpickr .cp-gradient.cp-rgb {
  background-repeat:no-repeat;
  }
.colorpickr .cp-gradient.cp-rgb.cp-r-high { background-position:0 0; }
.colorpickr .cp-gradient.cp-rgb.cp-r-low  { background-position:-190px 0; }
.colorpickr .cp-gradient.cp-rgb.cp-g-high { background-position:-380px 0; }
.colorpickr .cp-gradient.cp-rgb.cp-g-low  { background-position:-570px 0; }
.colorpickr .cp-gradient.cp-rgb.cp-b-high { background-position:-760px 0; }
.colorpickr .cp-gradient.cp-rgb.cp-b-low  { background-position:-950px 0; }

.colorpickr input[type=range],
.colorpickr input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  margin:0; padding:0; border:0;
  }
.colorpickr input[type=range] {
  display:block!important;
  height:10px;
  width:100%;
  padding:0 2px;
  margin:0;
  min-width:100px;
  overflow:hidden;
  cursor:pointer;
  }
  .colorpickr input[type=range]::-ms-fill-upper { background:transparent; }
  .colorpickr input[type=range]::-ms-fill-lower { background:rgba(255,255,255,0.25); }

/* Vendor specific thingies */
.colorpickr input[type=range]::-moz-range-track { opacity:0; }
.colorpickr input[type=range]::-ms-track        { opacity:0; }
.colorpickr input[type=range]::-ms-tooltip      { display:none; }

/* For whatever reason, these need to be defined
 * on their own so dont group them */
.colorpickr input[type=range]::-webkit-slider-thumb {
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(0,0,0,0.75);
  height:10px; width:5px;
  cursor:ew-resize;
  box-shadow:none;
  }
.colorpickr input[type=range]::-ms-thumb {
  margin:0;padding:0;border:0;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(0,0,0,0.75);
  height:10px; width:5px;
  cursor:ew-resize;
  box-shadow:none;
  }
.colorpickr input[type=range]::-moz-range-thumb {
  margin:0;padding:0;border:0;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(0,0,0,0.75);
  height:10px; width:5px;
  cursor:ew-resize;
  box-shadow:none;
  }

/* Hue slider */
.colorpickr .cp-colormode-slider {
  position:absolute;
  top:90px;
  right:-90px;
  z-index:1;
  }
.colorpickr .cp-colormode-slider input[type=range] {
  margin:0;
  width:190px;
  -webkit-transform:rotate(-90deg);
     -moz-transform:rotate(-90deg);
      -ms-transform:rotate(-90deg);
       -o-transform:rotate(-90deg);
          transform:rotate(-90deg);
  }
.colorpickr .cp-gradient.cp-s-high,
.colorpickr .cp-gradient.cp-v-high,
.colorpickr .cp-colormode-slider.h input[type=range] {
  background:linear-gradient(
    to left,
    #ff0000 0%,
    #ff0099 10%,
    #cd00ff 20%,
    #3200ff 30%,
    #0066ff 40%,
    #00fffd 50%,
    #00ff66 60%,
    #35ff00 70%,
    #cdff00 80%,
    #ff9900 90%,
    #ff0000 100%
  );
}
.colorpickr .cp-gradient.cp-s-low {
  background:linear-gradient(
    to bottom,
    #FFF 0%,
    #BBB 100%
    );
  }
.colorpickr .cp-gradient.cp-v-low { background-color:#000; }

.colorpickr .cp-colormode-slider.r input[type=range] {
  background:linear-gradient(
    to left,
    #ff0000 0%,
    #000000 100%
  );
}
.colorpickr .cp-colormode-slider.g input[type=range] {
  background:linear-gradient(
    to left,
    #00ff00 0%,
    #000000 100%
  );
}
.colorpickr .cp-colormode-slider.b input[type=range] {
  background:linear-gradient(
    to left,
    #0000ff 0%,
    #000000 100%
  );
}

.colorpickr .cp-colormode-slider input[type=range]::-webkit-slider-thumb {
  cursor:ns-resize;
  }
.colorpickr .cp-colormode-slider input[type=range]::-ms-thumb {
  cursor:ns-resize;
  }
.colorpickr .cp-colormode-slider input[type=range]::-moz-range-thumb {
  cursor:ns-resize;
  }

.colorpickr .cp-fill-tile {
  background-image:url('data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==');
  background-repeat:repeat;
  }

.colorpickr .cp-floor {
  padding:5px 10px 0;
  position:relative;
  width:100%;
  clear:both;
  }
.colorpickr .cp-swatch {
  width:36px;
  height:24px;
  }
  .colorpickr .cp-actions .cp-fill-tile:only-of-type > .cp-swatch { border-radius:3px; }
  .colorpickr .cp-actions .cp-fill-tile,
  .colorpickr .cp-actions .cp-swatch { border-radius:3px 0 0 3px; }
  .colorpickr .cp-actions .cp-fill-tile + .cp-fill-tile,
  .colorpickr .cp-actions .cp-fill-tile + .cp-fill-tile .cp-swatch {
    border-radius:0 3px 3px 0;
    }
  .colorpickr .cp-actions .cp-fill-tile + .cp-fill-tile {
    margin-left:1px;
    }
  .colorpickr .cp-actions:after,
  .colorpickr .cp-actions:before {
    display:block;
    color:rgba(0,0,0,0.4);
    vertical-align:top;
    line-height:20px;
    float:left;
    margin-top:3px;
    padding:0 5px;
    content:'Current';
    }
    .colorpickr .cp-actions:before { content:'New'; }

.colorpickr .cp-fl { float:left; }
.colorpickr .cp-fr { float:right; }

.colorpickr .cp-floor .cp-output {
  width:100px;
  }
  .colorpickr .cp-output {
    width:50%;
    margin:0;
    }

/* xy controler for background selection */
.colorpickr .slider-xy {
  position:relative;
  width:100%;
  height:100%;
  cursor:pointer;
  }
  .colorpickr .slider-xy.dragging-xy {
    cursor:move;
    cursor:-webkit-grabbing;
    cursor:   -moz-grabbing;
    }
  .colorpickr .slider-xy .handle-xy {
    position:absolute;
    -webkit-user-select:none;
            user-select:none;
    }
  .colorpickr .slider-xy .handle-xy:after {
    content:'';
    background-color:rgba(255,255,255,0.10);
    border:1px solid #000;
    display:block;
    border-radius:50%;
    position:relative;
    width:10px;
    height:10px;
    top:-5px;
    left:-5px;
    }
    .colorpickr .slider-xy .handle-xy.dark:after {
      border-color:#fff;
      }

.colorpickr .cp-gradient.cp-rgb {
  background-image:url('data:image/png;base64,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')
}