.picker_wrapper.no_alpha .picker_alpha {
  display:none
}
.picker_wrapper.no_editor .picker_editor {
  position:absolute;
  z-index:-1;
  opacity:0
}
.picker_wrapper.no_cancel .picker_cancel {
  display:none
}
.layout_default.picker_wrapper {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  align-items:stretch;
  font-size:10px;
  width:25em;
  padding:.5em
}
.layout_default.picker_wrapper input,
.layout_default.picker_wrapper button {
  font-size:14px;
}
.layout_default.picker_wrapper>* {
  margin:.5em
}
.layout_default.picker_wrapper::before {
  content:"";
  display:block;
  width:100%;
  height:0;
  order:1
}
.layout_default .picker_slider,
.layout_default .picker_selector {
  padding:1em
}
.layout_default .picker_hue {
  width:100%
}
.layout_default .picker_sl {
  flex:1 1 auto;
  border-radius:6px;
}
.layout_default .picker_sl::before {
  content:"";
  display:block;
  padding-bottom:100%
}
.layout_default .picker_editor {
  order:1;
  width:6.5rem
}
.layout_default .picker_editor input {
  width:100%;
  height:100%;
  border-radius:6px;
}
.layout_default .picker_sample {
  order:1;
  flex:1 1 auto;
  border-radius:6px;
}
.layout_default .picker_done,
.layout_default .picker_cancel {
  order:1
}
.picker_wrapper {
  box-sizing:border-box;
  background:#fff;
  box-shadow:0 0 0 1px silver;
  cursor:default;
  color:#000;
  pointer-events:auto
}
.picker_wrapper:focus {
  outline:none
}
.picker_wrapper button,
.picker_wrapper input {
  box-sizing:border-box;
  border:none;
  box-shadow:0 0 0 1px silver;
  outline:none
}
.picker_wrapper button:focus,
.picker_wrapper button:active,
.picker_wrapper input:focus,
.picker_wrapper input:active {
  box-shadow:0 0 2px 1px #1e90ff
}
.picker_wrapper button {
  padding:.4em .6em;
  cursor:pointer;
  color:#000;
  background-color:#fff;
}
.picker_wrapper button:hover {
  background-color:#fff
}
.picker_selector {
  position:absolute;
  z-index:1;
  display:block;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  border:2px solid #fff;
  border-radius:100%;
  box-shadow:0 0 3px 1px #67b9ff;
  background:currentColor;
  cursor:pointer
}
.picker_slider .picker_selector {
  border-radius:6px
}
.picker_hue {
  position:relative;
  background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
  box-shadow:0 0 0 1px silver;
  border-radius: 6px;
}
.picker_sl {
  position:relative;
  box-shadow:0 0 0 1px silver;
  background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),
linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),
linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))
}
.picker_alpha,
.picker_sample {
  position:relative;
  background:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,
linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;
  box-shadow:0 0 0 1px silver
}
.picker_alpha .picker_selector,
.picker_sample .picker_selector {
  background:none
}
.picker_editor input {
    padding:.2em .4em
}
.picker_sample::before {
  content:"";
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  background:currentColor;
  border-radius:6px;
}
.picker_arrow {
  position:absolute;
  z-index:-1
}
.picker_wrapper.popup {
  position:absolute;
  z-index:2;
  margin:1.5em
}
.picker_wrapper.popup,
.picker_wrapper.popup .picker_arrow::before,
.picker_wrapper.popup .picker_arrow::after {
  background:#f2f2f2;
  box-shadow:0 0 10px 1px rgba(0,
0,
0,
.4)
}
.picker_wrapper.popup .picker_arrow {
  width:3em;
  height:3em;
  margin:0
}
.picker_wrapper.popup .picker_arrow::before,
.picker_wrapper.popup .picker_arrow::after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:-99
}
.picker_wrapper.popup .picker_arrow::before {
  width:100%;
  height:100%;
  -webkit-transform:skew(45deg);
  transform:skew(45deg);
  -webkit-transform-origin:0 100%;
  transform-origin:0 100%
}
.picker_wrapper.popup .picker_arrow::after {
  width:150%;
  height:150%;
  box-shadow:none
}
.popup.popup_top {
  bottom:100%;
  left:0
}
.popup.popup_top .picker_arrow {
  bottom:0;
  left:0;
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg)
}
.popup.popup_bottom {
  top:100%;
  left:0;
  border-radius:6px;
}
.popup.popup_bottom .picker_arrow {
  top:0;
  left:0;
  -webkit-transform:rotate(90deg) scale(1, -1);
  transform:rotate(90deg) scale(1, -1)
}
.popup.popup_left {
  top:0;
  right:100%
}
.popup.popup_left .picker_arrow {
  top:0;
  right:0;
  -webkit-transform:scale(-1, 1);
  transform:scale(-1, 1)
}
.popup.popup_right {
  top:0;
  left:100%
}
.popup.popup_right .picker_arrow {
  top:0;
  left:0
}