.wrapper{width:225px;height:225px;margin:0 auto;position:absolute;margin-top:-200px;pointer-events:all}.pointer-wrapper{float:left;left:0;top:0;position:absolute;width:225px;height:225px;margin:0 auto;pointer-events:none}.color-mask{float:left;left:0;top:0;position:absolute;width:225px;height:225px;margin:0 auto;pointer-events:none;border-radius:50%;background-color:rgba(0,0,0,0)}.color-pointer{float:left;top:0;left:0;position:relative;width:14px;height:14px;border:2px #000 solid;border-radius:50%;pointer-events:none}.color-pointer-inner,.slider-pointer-inner{width:70%;height:70%;top:0;right:0;bottom:0;left:0;margin:auto;margin:0 auto;pointer-events:none;border:2px #fff solid;border-radius:50%;position:absolute}.color-panel{width:100%;background:#fff;border-radius:50%;cursor:pointer;pointer-events:all}.light-slider-wrapper{width:235px;height:24px;margin:50px auto;position:absolute;left:50%;transform:translate(-50%);border-radius:24px;border:solid #fff 6px;background:linear-gradient(to right,#000,#fff);cursor:pointer;pointer-events:all}.slider-pointer{float:left;top:3px;left:0;position:relative;width:14px;height:14px;border:2px #000 solid;border-radius:50%;pointer-events:none}.color-picker-bg{width:100%;height:100%;background-color:#4d4d4d}.color-picker-opbt{text-align:center;width:100%;position:absolute;letter-spacing:.2rem;margin-top:300px}.color-picker-bt{margin:0 calc(3px + 1vmin);color:#fff;font-family:Ubuntu,sans-serif;display:inline-block;padding:0 calc(10px + 1vmin);cursor:pointer;border:calc(2px + .3vmin) solid #fff;font-size:calc(.8rem + .8vmin);height:calc(25px + 1.8vmin);line-height:calc(25px + 1.8vmin);text-align:center;pointer-events:all}