.color-picker-popup svg
{
  display: block;
}
.color-picker-popup
{
  position: relative;
  width: 374px;
  height: 222px;
}

/* Color picker boxes */
.color-picker-2-d-graphic,
.color-picker-1-d-graphic,
.color-picker-color-old,
.color-picker-color,
.color-picker-alpha
{
  border: 1px solid #333;
  box-shadow:0 -1px 1px rgba(255,255,255,0.1),  0 1px rgba(0,0,0,0.2);
}

.color-picker-2-d-graphic
{
  position: absolute;
  left: 10px;
  top: 10px;
  width: 200px;
  height: 200px;
}

.height-100
{
  height: 100%;
}

.color-picker-1-d-graphic
{
  position: absolute;
  left: 227px;
  top: 10px;
  width: 20px;
  height: 200px;
}
.color-picker-color-old,
.color-picker-color
{
  position: absolute;
  left: 264px;
  top: 10px;
  width: 50px;
  height: 36px;
  margin: 0;
}
.color-picker-color-old div,
.color-picker-color div
{
  border-width: 18px 25px;
  border-style: solid;
  border-color: black transparent transparent black;
}
.color-picker-color-old
{
  border-right-width: 0;
}
.color-picker-color
{
  left: 315px;
  border-left-width: 0;
}

.color-picker-inputs
{
  position: absolute;
  left: 259px;
  top: 54px;
  margin: 0;
  border-collapse: collapse;
}

.color-picker-inputs td
{
  padding: 0px 2px;
  text-align: left;
}
.color-picker-inputs td:first-child
{
  text-align: right;
}

.color-picker-spacer
{
  height: 6px;
}
.color-picker-number
{
  width: 40px;
  margin: 0 0 1px 0;
}

.color-picker-text
{
  width: 50px;
  margin: 0;
  padding: 1px 1px 0 1px;
}

.color-picker-slider-base
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.color-picker-slider
{
  width: 40px;
  height: 10px;
  position: absolute;
  margin-left: -10px;
  margin-top: -5px;
  left: 0px;
  top: 0px;
}
.color-picker-pointer
{
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  /* to prevent painting artefacts on moving the pointer */
  border: 1px solid transparent;
}
.color-picker-target-element
{
  position: relative;
}
.color-picker-target-element key,
.color-picker-target-element value
{
  position: relative;
  z-index: 3;
}

.black-50
{
  position: absolute;
  z-index: 1;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
}
.color-picker-popup.alpha
{
  width: 521px;
}
.color-picker-alpha
{
  position: absolute;
  left: 380px;
  top: 10px;
  width: 20px;
  height: 200px;
}
.color-picker-input-alpha
{
  position: absolute;
  left: 415px;
  top: 192px;
  width: 12em;
}
.color-picker-number.alpha
{
  width: 4.4em;
}
.color-sample-alpha-bg
{
  position: absolute;
  left: 265px;
  top: 11px;
}

.color-picker-palette
{
  position: absolute;
  left: 10px;
  right: 9px;
  top: 220px;
  overflow: auto;
  white-space: nowrap;
  padding-bottom: 2px;
}

.color-picker-palette-item
{
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  border: 1px solid #333;
  margin-right: 6px;
}

.color-picker-palette-item:last-of-type {
  margin: 0;
}