.ui-color-picker {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  width: 420px;
  background-color: #FFF;
  display: flex;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ui-color-picker.simple, .ui-color-picker.show {
  position: relative;
  width: unset;
}

.ui-color-picker .picking-area {
  width: 198px;
  height: 198px;
  border: 1px solid #ddd;
  position: relative;

  background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
  -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
  -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
  background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
  -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
  -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);

  background-color: #F00;
}

.ui-color-picker .value-area {
  flex: 1;
}

.ui-color-picker .picking-area:hover {
  cursor: default;
}

.ui-color-picker .picker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #FFF;
  position: absolute;
  top: 45%;
  left: 45%;
}

.ui-color-picker .picker:before {
  width: 8px;
  height: 8px;
  content: "";
  position: absolute;
  border: 1px solid #999;
  border-radius: 50%;
}

.ui-color-picker .hue,
.ui-color-picker .alpha {
  width: 198px;
  height: 28px;
  margin: 5px;
  border: 1px solid #FFF;
  float: left;
}

.ui-color-picker .hue {
  background: url("hue.png") center;
  background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
  #00F 66.66%, #F0F 83.33%, #F00 100%);
  background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
  #00F 66.66%, #F0F 83.33%, #F00 100%);
  background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
  #00F 66.66%, #F0F 83.33%, #F00 100%);
  background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
  #00F 66.66%, #F0F 83.33%, #F00 100%);
}

.ui-color-picker .alpha {
  border: 1px solid #CCC;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAG0lEQVR42mM4c+bMf2SMDhjooABdAF0DHRQAAJ4P6+G77p9NAAAAAElFTkSuQmCC');
}

.ui-color-picker .alpha-mask {
  width: 100%;
  height: 100%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAAAeCAYAAAB39mEfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njc2REE2MjIxRTQwMTFFMzhBN0RGRUNERjQzQzU5NUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njc2REE2MjMxRTQwMTFFMzhBN0RGRUNERjQzQzU5NUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NzZEQTYyMDFFNDAxMUUzOEE3REZFQ0RGNDNDNTk1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NzZEQTYyMTFFNDAxMUUzOEE3REZFQ0RGNDNDNTk1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhiH6HAAAAD0SURBVHja7NdRDoIwEEXRatwR+98BbGkqJGqAtojVP89NSNSb0gaZzJvLOI45pbRcC3kYhtfn5ZqmqeZzxedOHw0fq/Wx89FYHwc+Hutjd/9vfOzOt96/tn5/vvjQP/df+81+jfNH4/kcnf8TX3s+LX/m/62tzz98/9693+maABQoDEBhAOe4zZlq88OcuTbfef4fvY4BiFKAwgD6ZwyZkudLr2MAohSgMID+GUOm5PnS6xiAKAUoDKB/xpApeb70OgYgSgEKA+ifMWRKni+9jgGIUoDCAPpnDJmS50uvYwCiFKAwgP4ZQ6bk+dLrGECFuwADAEXCF3VzjeI9AAAAAElFTkSuQmCC");
}

.ui-color-picker .slider-picker {
  width: 4px;
  height: 28px;
  border: 1px solid #777;
  position: relative;
  top: -1px;
}

.ui-color-picker .info {
  width: 200px;
  margin: 5px;
  float: left;
}

.ui-color-picker .info * {
  float: left;
}

.ui-color-picker .input {
  width: 64px;
  margin: 5px 2px;
  float: left;
}

.ui-color-picker input:focus-visible {
  outline: var(--lighter-color) auto 1px;
}

.ui-color-picker .input .name {
  height: 20px;
  width: 30px;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  float: left;
}

.ui-color-picker .input input {
  width: 30px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  text-align: center;
  float: right;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

.ui-color-picker input[readonly], .ui-color-picker input[disabled] {
  background: #ddd;
}

.ui-color-picker .input[data-topic="alpha"] {
  margin-top: 10px;
  width: 94px;
}

.ui-color-picker .input[data-topic="alpha"] > .name {
  width: 60px;
}

.ui-color-picker .input[data-topic="alpha"] > input {
  float: right;
}

.ui-color-picker .input[data-topic="hexa"] {
  width: 94px;
}

.ui-color-picker .input[data-topic="hexa"] > .name {
  display: none;
}

.ui-color-picker .input[data-topic="hexa"] > input {
  width: 94px;
  height: 24px;
  padding: 2px 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ui-color-picker .preview {
  width: 95px;
  height: 53px;
  margin: 10px 5px 5px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAG0lEQVR42mM4c+bMf2SMDhjooABdAF0DHRQAAJ4P6+G77p9NAAAAAElFTkSuQmCC');
  float: left;
  position: relative;
}

.ui-color-picker.simple .preview, .ui-color-picker.show .preview {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 4px;
  margin: 4px;
}
.ui-color-picker.show .preview {
  margin-top: 2px;
}
.ui-color-picker.show .ohke-box {
  padding-left: 28px;
  padding-top: 4px;
}

.ui-color-picker.simple .w3-input, .ui-color-picker.show .w3-input {
  padding-left: 28px;
}

.ohke-required .ui-color-picker.simple .preview {
  margin-left: 7px;
}

.ui-color-picker.simple .input[data-topic="hexa"] {
  margin: 0 0 0 5px;
}

.ui-color-picker .preview-color {
  width: 100%;
  height: 100%;
  border: 1px dashed #ccc;
}

.ui-color-picker.simple .preview-color, .ui-color-picker.show .preview-color {
  border-radius: 4px;
}

.ui-color-picker .switch_mode {
  width: 10px;
  height: 20px;
  position: relative;
  border-radius: 5px 0 0 5px;
  border: 1px solid #DDD;
  background-color: #EEE;
  left: -12px;
  top: -1px;
  z-index: 1;
  transition: all 0.5s;
}

.ui-color-picker .switch_mode:hover {
  background-color: #CCC;
  cursor: pointer;
}

.ui-input-slider {
  height: 20px;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  -moz-user-select: none;
  user-select: none;
}

.ui-input-slider * {
  float: left;
  height: 100%;
  line-height: 100%;
}

.ui-input-slider > input {
  margin: 0;
  padding: 0;
  width: 50px;
  text-align: center;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ui-input-slider-info {
  width: 90px;
  padding: 0px 10px 0px 0px;
  text-align: right;
  text-transform: lowercase;
}

.ui-input-slider-left, .ui-input-slider-right {
  width: 16px;
  cursor: pointer;
  background: url("arrows.png") center left no-repeat;
}

.ui-input-slider-right {
  background: url("arrows.png") center right no-repeat;
}

.ui-input-slider-name {
  width: 90px;
  padding: 0 10px 0 0;
  text-align: right;
  text-transform: lowercase;
}

.ui-input-slider-btn-set {
  width: 25px;
  background-color: #2C9FC9;
  border-radius: 5px;
  color: #FFF;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
}

.ui-input-slider-btn-set:hover {
  background-color: #379B4A;
  cursor: pointer;
}

.ui-color-picker input[type=number]::-webkit-inner-spin-button,
.ui-color-picker input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ui-color-picker-popup {
  z-index: 1000;
  position: absolute;
  background: #fff;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}
.ui-color-view{
  display: inline-block;
}
.ui-color-view .preview{
  width: 20px;
  height: 20px;
  border-radius: 4px;
  float: left;
  margin-right: 4px;
  border: 1px dashed #ccc;
}