.mm-color-picker{background-color:#fff;padding:8px;border:1px solid #ccc;border-radius:4px}.mm-color-picker-device{width:300px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:8px}.mm-color-picker-device-value{width:12px;height:12px}.mm-color-picker-tools{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mm-color-picker-tools-value{width:180px}.mm-color-picker-box{display:inline-block;border-radius:4px;border:1px solid #B6B6B6;vertical-align:middle}.mm-color-picker-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;margin:4px;background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee);background-size:12px 12px;background-position:0 0,6px 6px}.mm-color-picker-toggle-value{width:24px;height:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mm-color-picker-panel{position:relative;width:280px;height:180px}.mm-color-picker-panel--black{background:-webkit-gradient(linear,left bottom,left top,from(#000),to(transparent));background:linear-gradient(0deg,#000,transparent)}.mm-color-picker-panel--white{background:-webkit-gradient(linear,left top,right top,from(#fff),to(rgba(255,255,255,0)));background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}.mm-color-picker-panel--black,.mm-color-picker-panel--white{position:absolute;top:0;left:0;right:0;bottom:0}.mm-color-picker-panel .mm-color-picker-slider--thumb{position:absolute}.mm-color-picker-panel .mm-color-picker-slider--thumb::after{content:"";display:block;width:4px;height:4px;-webkit-box-shadow:0 0 0 1px #fff,inset 0 0 1px 0 rgba(0,0,0,.8),0 0 1px 2px rgba(0,0,0,.5);box-shadow:0 0 0 1px #fff,inset 0 0 1px 0 rgba(0,0,0,.8),0 0 1px 2px rgba(0,0,0,.5);border-radius:50%;-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}.mm-color-picker-slider{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:280px;height:12px}.mm-color-picker-slider.is-vertical{width:12px;height:180px}.mm-color-picker-slider.is-vertical .mm-color-picker-slider--thumb{left:0;top:0;width:100%;height:4px;margin:-2px 0 0}.mm-color-picker-slider .mm-color-picker-slider--thumb{cursor:pointer;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;left:0;top:0;width:4px;margin:0 0 0 -2px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.mm-color-picker-slider--bar{display:block;height:100%;position:relative;cursor:pointer}.mm-color-picker-alpha{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee);background-size:12px 12px;background-position:0 0,6px 6px}.mm-color-picker-alpha .mm-color-slider--bar{background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),to(#fff));background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,#fff)}.mm-color-picker-hue{background-color:red}.mm-color-picker-hue .mm-color-picker-slider--bar{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,red),color-stop(17%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(83%,#f0f),to(red));background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.mm-color-picker-predefine{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-8px 0 0 -8px}.mm-color-picker-predefine-item{cursor:pointer;width:18px;height:18px;margin:8px 0 0 8px;border-radius:4px;border:1px solid transparent;background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee);background-size:12px 12px;background-position:0 0,6px 6px}.mm-color-picker-predefine-item:hover{-webkit-box-shadow:0 0 3px 2px #409eff;box-shadow:0 0 3px 2px #409eff}.mm-color-picker-predefine-item-bg{border-radius:3px;display:block;height:100%}