.color-picker {
  display: inline-block;
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.4;
}
.color-picker .color-box {
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  width: 2em;
  height: 1.5em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.050000000000000044);
  z-index: 1;
  -webkit-transition: all 0.15s ease 0s;
  -moz-transition: all 0.15s ease 0s;
  -ms-transition: all 0.15s ease 0s;
  -o-transition: all 0.15s ease 0s;
  transition: all 0.15s ease 0s;
}
.color-picker .color-button-group {
  display: inline-block;
  position: relative;
  padding: .25em .5em;
  margin: 0 0 0 .5em;
  border: 1px solid #6d8fb1;
  background: #FFF;
  border-radius: .3em;
  cursor: pointer;
}
.color-picker .color-button-group .color-cue {
  border-radius: .25em;
  display: block;
  margin: 0;
  background-color: #000;
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  height: auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15000000000000002) inset;
}
.color-picker .color-button-group .color-cue.invalid-color {
  background: rgba(255, 0, 0, 0.15000000000000002) !important;
}
.color-picker .color-button-group .color-cue-name {
  display: inline-block;
  margin-left: 2em;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.65);
  font-family: Monaco, monospace;
}
.color-picker .color-button-group .color-picker-input {
  padding: 0;
  color: #999;
  margin: 0 0 0 .5em;
}
.color-picker .color-button-group .color-picker-input:focus {
  box-shadow: none;
  background: rgba(102, 204, 255, 0.15000000000000002);
}
.color-picker ul {
  padding: .5em;
  margin: 0;
  list-style: none;
}
.color-picker ul:after {
  content: '';
  display: block;
  clear: both;
}
.color-picker li {
  float: left;
  position: relative;
  padding: 0;
}
.color-picker li:hover .color-box {
  width: 2.2em;
  height: 1.7em;
  margin: -0.1em;
  z-index: 3;
  border-radius: .25em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.19999999999999996) inset, 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.color-picker li.light,
.color-picker li.medium,
.color-picker li.dark {
  display: none;
}
.color-picker li.previewer {
  float: right;
}
.color-picker li.highlight .color-box {
  border-color: #FFFFFF;
  box-shadow: 0 0 7px #99CCFF;
}
.color-picker li:nth-child(7n+1) {
  clear: left;
}
.color-picker li [type=radio] {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
}
.color-picker li [type=radio]:checked + .color-box {
  z-index: 2;
  border-radius: .25em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.050000000000000044) inset, 0 0 0 0.25em #ffffff, 0 0 0.75em 0 rgba(0, 0, 0, 0.65);
}
.color-picker li span {
  display: none;
}
.color-picker .color-chips {
  display: none;
  opacity: 0;
  position: absolute;
  top: -0.3em;
  left: 2.85em;
  width: 15.1em;
  background: #333639;
  border: 2px solid #dadcde;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  border-radius: .5em;
  z-index: 2;
  -webkit-transition: opacity 0.25s ease 0.3s;
  -moz-transition: opacity 0.25s ease 0.3s;
  -ms-transition: opacity 0.25s ease 0.3s;
  -o-transition: opacity 0.25s ease 0.3s;
  transition: opacity 0.25s ease 0.3s;
}
.color-picker .color-chips .color-box:after {
  content: attr(data-title);
  position: absolute;
  top: 65%;
  left: 65%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  font-size: .85em;
  white-space: nowrap;
  line-height: 1;
  border-radius: .3em;
  opacity: 0;
  background-color: #f1efee;
  box-shadow: 0 0 0.3em 0 rgba(0, 0, 0, 0.35);
  padding: .3em .9em;
  color: #333639;
}
.color-picker .color-chips .color-box:hover:after {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.15s ease 0.5s;
  -moz-transition: all 0.15s ease 0.5s;
  -ms-transition: all 0.15s ease 0.5s;
  -o-transition: all 0.15s ease 0.5s;
  transition: all 0.15s ease 0.5s;
}
.color-picker .toggle {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
}
.color-picker .toggle-picker:checked ~ .color-chips {
  display: block;
  opacity: 1;
}
.color-picker .toggle-picker:checked ~ .color-button-group {
  box-shadow: 0 0 .35em 0 #69C;
  border-color: #69C;
}
.color-picker .handle {
  display: inline-block;
  padding: .1em .85em;
  margin: .5em 0 0 .5em;
  border-radius: 1em;
  line-height: 1;
  border: 0;
  color: #FFF;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.65);
  box-shadow: none;
  outline: none;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.color-picker .toggle:checked + .handle {
  box-shadow: 0 0 0 1px #69C, 0 0 .5em 0 #69C;
  background: rgba(102, 153, 204, 0.35);
}
.color-picker .toggle-light:checked ~ ul .light {
  display: block;
}
.color-picker .toggle-medium:checked ~ ul .medium {
  display: block;
}
.color-picker .toggle-dark:checked ~ ul .dark {
  display: block;
}
.color-picker .close-picker {
  position: absolute;
  top: -0.7em;
  right: -0.7em;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(0, 0, 0, 0.15000000000000002);
  border-radius: .25em;
  color: #FFF;
  line-height: .9em;
  font-size: 1.2em;
  z-index: 5;
  width: 1em;
  height: 1em;
  text-align: center;
  cursor: pointer;
}
.color-picker .close-picker:hover {
  background: #66ccff;
}
.color-picker .divider {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #575c61;
  padding: .5em;
  background: #1b1d1e url(striped.png) repeat 50% 50%;
  border-radius: 0 0 .3em .3em;
  font-weight: 300;
}
.color-picker .divider .color-cue-name {
  padding: 0 .5em 0 0;
  line-height: 2;
  color: rgba(255, 255, 255, 0.65);
}
.color-picker .divider-heading {
  text-transform: uppercase;
  font-size: .8em;
  color: #969699;
}
.color-picker .color-picker-input {
  padding: .35em .5em;
  margin: .2em;
  width: 7em;
  border: 0;
  border-radius: .3em;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.65);
  font-family: Monaco, monospace;
  box-shadow: none;
  outline: none;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.color-picker .color-picker-input:focus,
.color-picker .color-picker-input:active {
  box-shadow: 0 0 0 1px #69C, 0 0 .5em 0 #69C;
}
.color-picker .no-hex-input .color-picker-input,
.color-picker .no-hex-input .hex-control {
  display: none;
}