.colorpicker-mask{position:fixed;top:0;right:0;bottom:0;left:0}.colorpicker-base{position:inherit;z-index:100;box-shadow:rgba(0,0,0,.3) 0 0 2px,rgba(0,0,0,.3) 0 4px 8px}.color-palette{padding:10px;background:#f9f9f9;display:flex;flex-flow:row wrap;align-content:flex-start}.color-palette .color-palette-item{width:10%;height:20px;transition:transform .5s;-webkit-transition:transform .5s}.color-palette .color-palette-item:hover{transform:scale(1.2);-webkit-transform:scale(1.2)}.colorpicker-pancel{background:#fff;box-sizing:initial;width:225px;font-family:Menlo}.color-board{width:100%;padding-bottom:58%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.color-board .color-pancel{position:absolute;top:0;right:0;bottom:0;left:0}.saturation-white{position:absolute;top:0;right:0;bottom:0;left:0;background:-webkit-linear-gradient(to right,#fff,rgba(255,255,255,0));background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.saturation-white .saturation-black{position:absolute;top:0;right:0;bottom:0;left:0;background:-webkit-linear-gradient(to top,#000,rgba(0,0,0,0));background:linear-gradient(to top,#000,rgba(0,0,0,0))}.saturation-white .pickerBtn{position:absolute;top:0;left:100%;cursor:default}.saturation-white .pickerBtn .pickerBtn-in{width:12px;height:12px;border-radius:6px;box-shadow:#fff 0 0 0 1px inset;transform:translate(-6px,-6px)}.color_hue{padding:0 16px 12px}.color_hue .flexbox-fix{display:flex}.color_hue .flexbox-fix1{align-items:center;height:30px;padding-top:2px}.color_hue .flexbox-fix1 .huering_l{width:32px}.color_hue .flexbox-fix1 .huering_l .color_showBox{width:16px;height:16px;border-radius:8px;position:relative;overflow:hidden;background-image:url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTlBNkE1N0M0RUI3MTFFOEEwMDhBODQzMzk2OUYxMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTlBNkE1N0Q0RUI3MTFFOEEwMDhBODQzMzk2OUYxMzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOUE2QTU3QTRFQjcxMUU4QTAwOEE4NDMzOTY5RjEzMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBOUE2QTU3QjRFQjcxMUU4QTAwOEE4NDMzOTY5RjEzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAICAgICAgICAgIDAgICAwQDAgIDBAUEBAQEBAUGBQUFBQUFBgYHBwgHBwYJCQoKCQkMDAwMDAwMDAwMDAwMDAwBAwMDBQQFCQYGCQ0LCQsNDw4ODg4PDwwMDAwMDw8MDAwMDAwPDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/AABEIAAgACAMBEQACEQEDEQH/xABVAAEAAAAAAAAAAAAAAAAAAAAJAQEAAAAAAAAAAAAAAAAAAAAAEAAAAwkAAAAAAAAAAAAAAAAREhMAQWGTFIQVZTcRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AGW6posFdK1UkpUYiLgYP//Z)}.color_showBox .colorpicker-showColor{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;box-shadow:rgba(0,0,0,.1) 0 0 0 1px inset;z-index:2}.color_showBox .cs_mask{position:absolute;top:0;right:0;bottom:0;left:0;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center}.color_hue .flexbox-fix1 .huering_r{-webkit-box-flex:1;flex:1 1 0%}.hueringBox{height:10px;position:relative}.hueringBox .hueringBox-in{position:absolute;top:0;right:0;bottom:0;left:0}.hueringBox .hue-horizontal{padding:0 2px;position:relative;height:100%;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-webkit-linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hueringBox .hue-vertical{background:linear-gradient(to top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-webkit-linear-gradient(to top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-horizontal .colorBar-color-picker{position:absolute;left:0}.hue-horizontal .colorBar-color-picker .colorBar-colorhue-cur{width:12px;height:12px;border-radius:6px;transform:translate(-6px,-1px);background-color:#f8f8f8;box-shadow:rgba(0,0,0,.37) 0 1px 4px 0}.flexbox-fix2{height:20px;align-items:center}.transparencyBox{padding:0 2px;position:relative;height:10px;width:100%;background-image:url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTlBNkE1N0M0RUI3MTFFOEEwMDhBODQzMzk2OUYxMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTlBNkE1N0Q0RUI3MTFFOEEwMDhBODQzMzk2OUYxMzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOUE2QTU3QTRFQjcxMUU4QTAwOEE4NDMzOTY5RjEzMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBOUE2QTU3QjRFQjcxMUU4QTAwOEE4NDMzOTY5RjEzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAICAgICAgICAgIDAgICAwQDAgIDBAUEBAQEBAUGBQUFBQUFBgYHBwgHBwYJCQoKCQkMDAwMDAwMDAwMDAwMDAwBAwMDBQQFCQYGCQ0LCQsNDw4ODg4PDwwMDAwMDw8MDAwMDAwPDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/AABEIAAgACAMBEQACEQEDEQH/xABVAAEAAAAAAAAAAAAAAAAAAAAJAQEAAAAAAAAAAAAAAAAAAAAAEAAAAwkAAAAAAAAAAAAAAAAREhMAQWGTFIQVZTcRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AGW6posFdK1UkpUYiLgYP//Z)}.transparencyBox .transparency-color{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to right,rgba(255,255,255,0),#000)}.transparencyBox .colorBar-opacity-picker{position:absolute;left:100%}.transparencyBox .colorBar-opacity-picker .transparency-cur{width:12px;height:12px;border-radius:6px;transform:translate(-6px,-1px);background-color:#f8f8f8;box-shadow:rgba(0,0,0,.37) 0 1px 4px 0}.flexbox-fix3{padding-top:10px}.flexbox-fix3 .colorpicker-inputWrap{-webkit-box-flex:1;flex:1 1 0%;display:flex;margin-left:-6px}.flexbox-fix3 .colorpicker-showModeBtn{width:32px;text-align:right;position:relative}.flexbox-fix3 .colorpicker-showModeBtn .showModeBtn-in{margin-right:-4px;cursor:pointer;position:relative}.colorpicker-hexBox{padding-left:6px;width:100%}.colorpicker-hexBox .colorpicker-hexBox-in{position:relative}.colorpicker-hexBox .colorpicker-hexInput{font-size:11px;color:#333;width:100%;border-radius:2px;border:none;box-shadow:#dadada 0 0 0 1px inset;height:21px;text-align:center}.colorpicker-hexBox .colorpicker-hexSpan{text-transform:uppercase;font-size:11px;line-height:11px;color:#969696;text-align:center;display:block;margin-top:7px}.colorpicker-rgbBox{padding-left:6px;width:100%}.colorpicker-rgbBox .colorpicker-rgbBox-in{position:relative}.colorpicker-rgbBox .colorpicker-hexInput{font-size:11px;color:#333;width:100%;border-radius:2px;border:none;box-shadow:#dadada 0 0 0 1px inset;height:21px;text-align:center}.colorpicker-rgbBox .colorpicker-hexSpan{text-transform:uppercase;font-size:11px;line-height:11px;color:#969696;text-align:center;display:block;margin-top:7px}