* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: subpixel-antialiased;
}
body,
html {
  height: 100%;
  background: #222;
  -webkit-user-select: none;
  overflow: hidden;
}
div {
  position: relative;
}
h1 {
  color: #fff;
}
.ui {
  width: 100%;
  height: 100%;
  background: #222;
}
.color-memory {
  width: 100%;
  height: 10%;
  background: repeating-linear-gradient(45deg, #222, #222 5px, #333 5px, #333 10px);
}
.color-memory .drop {
  height: 100%;
  width: 5%;
  background: #333;
  cursor: pointer;
  float: left;
  border-left: 1px solid #808080;
  display: none;
}
.color-memory .drop img {
  position: relative;
  opacity: 0.5;
  width: 50%;
  height: 50%;
  left: -3%;
  top: -5%;
  -webkit-transform: translate(50%, 15%);
}
.color-memory .drop .drop-plus {
  color: #fff;
  left: 65%;
  top: -2%;
  font-size: 1.8vw;
  position: absolute;
  color: #ccc;
  display: none;
}
.color-memory .plus {
  float: left;
  height: 100%;
  width: 5%;
  background: #333;
  font-size: 5vw;
  font-weight: bold;
  cursor: pointer;
}
.color-memory .plus div {
  position: relative;
  left: 21%;
  top: -15%;
  color: #888;
  -webkit-transition: color 200ms;
}
.color-memory .plus div:hover {
  color: #fff;
}
.checker-bg,
.alpha,
.color-preview {
  background-color: #fff;
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
}
.shade {
  float: left;
  cursor: crosshair;
  width: 40%;
  height: 80%;
}
.shade div {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
}
.shade .current-color {
  background: #008000;
}
.shade .saturation {
  border: 1px solid #f00;
  background: linear-gradient(90deg, #fff 0%, transparent 100%);
}
.shade .brightness {
  background: linear-gradient(0deg, #000 0%, transparent 100%);
  overflow: hidden;
}
.shade .selector {
  position: absolute;
  left: 0;
  top: 0;
  width: 5%;
  height: 5%;
  -webkit-transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
  border-radius: 50%;
  opacity: 0.5;
}
.lightness {
  cursor: ew-resize;
  position: absolute;
  left: 47%;
  top: 80%;
  width: 51.5%;
  height: 5%;
  background: #008000;
}
.lightness .grad {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #fff 0%, transparent 100%);
}
.darkness {
  cursor: ew-resize;
  position: absolute;
  left: 47%;
  top: 70%;
  width: 51.5%;
  height: 5%;
  background: #008000;
}
.darkness .grad {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, #000 100%);
}
.alpha {
  cursor: ew-resize;
  position: absolute;
  left: 47%;
  top: 60%;
  width: 51.5%;
  height: 5%;
}
.alpha .grad {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #008000 0%, transparent 100%);
}
.color-preview {
  float: left;
  top: 4%;
  width: 5%;
  height: 72%;
  outline: 1px solid rgba(127, 127, 127, 1);
}
.color-preview .actual-color {
  width: 100%;
  height: 100%;
  background: #f00;
}
.hue {
  cursor: ew-resize;
  clear: both;
  width: 96.5%;
  height: 10%;
  left: 2%;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.hue .selector,
.darkness .selector,
.lightness .selector,
.alpha .selector {
  position: absolute;
  top: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: rgba(0,0,0,0.4) transparent transparent transparent;
  -webkit-transform: translate(-4px, 0px);
}
.hue .selector:before,
.darkness .selector:before,
.lightness .selector:before,
.alpha .selector:before {
  position: absolute;
  left: -4px;
  top: -8px;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: #bbb transparent transparent transparent;
}
.input {
  position: absolute;
  left: 47%;
  width: 56%;
  height: 6%;
}
.input input[type=text] {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.5%;
  padding-left: 1%;
  width: 80%;
  height: 100%;
  border: 1px solid #444;
  background: #333;
  color: rgb(230, 230, 230);
  outline: none;
  font-family: Courier, monospace;
  font-size: 2vw;
  -webkit-transition: color 200ms;
}
.input input[type=text]:hover {
  color: #fff;
}
.input input[type=text]:focus {
  border: 1px solid #888;
}
.input .copy-text {
  position: absolute;
  background: #333;
  top: 0;
  left: 85%;
  height: 100%;
  padding: 0.5%;
  padding-left: 1%;
  width: 5%;
  border: 1px solid #444;
  font-size: 2.8vw;
  line-height: 3.05vw;
  color: #6b6b78;
  cursor: copy;
  -webkit-transition: color 200ms;
}


.bordery {
  pointer-events: none;
  outline: 1px solid rgba(127, 127, 127, 1);
}
.container svg {
  overflow: visible;
}
.input .copy-text:hover {
  color: #fff;
}
.input .copy-text div {
  position: absolute;
  top: 50%;
  transform: translateY(-40%);
  left: 0;
  width: 100%;
  text-align: center;
}
.rgba {
  top: 14%;
}
.hex {
  top: 25%;
}
.hsla {
  top: 36%;
}
.hexa {
  top: 47%;
}
.colors {
  position: absolute;
  top: 0;
  left: 5%;
  width: 90%;
  height: 100%;
}
.colors div {
  float: left;
  width: 5%;
  height: 100%;
  cursor: s-resize;
}
.file-io {
  position: absolute;
  left: 47%;
  top: 13.3%;
  z-index: 1000;
  width: 4.5%;
  height: 42%;
  overflow: visible;
}
.file-io img {
  width: 100%;
  opacity: 0.4;
  transition: opacity 200ms;
  cursor: pointer;
}
.file-io img:hover {
  opacity: 1;
}
.file-io .save {
  top: 33%;
  width: 100%;
}
.file-io .open {
  top: 36.5%;
}
.tool-tip {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  line-height: 1.5em;
  font-family: sans-serif;
  color: #fff;
  pointer-events: none;
  font-size: 0.8em;
  background: #333;
  outline: 1px solid #666;
  padding: 0.5em;
  box-shadow: 0 0 40px 2px rgba(0,0,0,0.5);
  z-index: 9999;
}
.tool-tip em {
  color: #ccc;
}
.help {
  color: #fff;
  opacity: 0.4;
  font-family: sans-serif;
  padding: 0;
  right: 7%;
  top: 5%;
  font-size: 2vw;
  position: absolute;
  font-size: 2.2vw;
  pointer-events: all;
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  z-index: 1200;
  border: 2px solid #808080;
}
.help .help-txt {
  position: absolute;
  top: 2px;
  left: -0.5px;
  width: 100%;
}
.help:hover {
  opacity: 1;
}
.file-io {
  display: none;
}