[data-v-16f607d2]{padding:0;margin:0}.container[data-v-16f607d2]{display:inline-block;margin:10px;padding:10px;-webkit-box-shadow:0 0 2px 2px #ccc;box-shadow:0 0 2px 2px #ccc;border-radius:10px;text-align:center}.colorView[data-v-16f607d2]{display:inline-block;width:300px;height:200px;border-radius:5px;position:relative;border:1px solid #ccc;overflow:hidden}.colorView .colorBlock[data-v-16f607d2],.colorView .transparent[data-v-16f607d2]{display:inline-block;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:5px}.colorView .transparent[data-v-16f607d2]{background:url(https://t3.ftcdn.net/jpg/04/71/63/80/360_F_471638092_3MMZ9pE8idFf3b5lFeE9YcTdpCRB4jvF.jpg) no-repeat 50%/cover}.colorCode .hex[data-v-16f607d2],.colorCode .rgba[data-v-16f607d2]{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;position:relative}.colorCode input[data-v-16f607d2]{margin:5px 0;padding:5px;text-align:center;cursor:text}.colorCode button[data-v-16f607d2]{cursor:pointer;padding:5px;background-color:transparent;border-color:transparent}.colorCode button i[data-v-16f607d2]{color:#666;-webkit-transition:.3s;transition:.3s;pointer-events:none}.colorCode button:hover i[data-v-16f607d2]{color:#000}.colorCode .hint[data-v-16f607d2]{display:none;position:absolute;padding:5px;top:0;bottom:0;right:-10px;margin:auto 0;background-color:rgba(70,70,70,.7);color:#fff;border-radius:5px}.colorCode button:hover~.hint[data-v-16f607d2]{display:block}.colorValue .rgbaSetting[data-v-16f607d2]{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;margin-top:10px}.colorValue label[data-v-16f607d2]{width:20px}.colorValue input[data-v-16f607d2]{margin-left:10px}.colorValue .rgbaSetting input[type=text][data-v-16f607d2]{text-align:center;border:transparent;width:50px}.colorValue .rgbaSetting.red input[type=text][data-v-16f607d2],.colorValue .rgbaSetting.red label[data-v-16f607d2]{color:red;font-weight:900}.colorValue .rgbaSetting.green input[type=text][data-v-16f607d2],.colorValue .rgbaSetting.green label[data-v-16f607d2]{color:#0f0;font-weight:900}.colorValue .rgbaSetting.blue input[type=text][data-v-16f607d2],.colorValue .rgbaSetting.blue label[data-v-16f607d2]{color:#00f;font-weight:900}.colorValue .rgbaSetting.alpha input[type=text][data-v-16f607d2],.colorValue .rgbaSetting.alpha label[data-v-16f607d2]{color:#999;font-weight:900}.colorValue .rgbaSetting input[type=range][data-v-16f607d2],.colorValue .rgbaSetting input[type=range][data-v-16f607d2]::-webkit-slider-runnable-track,.colorValue .rgbaSetting input[type=range][data-v-16f607d2]::-webkit-slider-thumb{-webkit-appearance:none}.colorValue .rgbaSetting.red input[type=range][data-v-16f607d2]::-webkit-slider-runnable-track{background-color:red;height:5px;border-radius:5px;cursor:pointer}.colorValue .rgbaSetting.red input[type=range][data-v-16f607d2]::-webkit-slider-thumb{background-color:red;width:15px;height:15px;border-radius:50%;cursor:pointer;margin-top:-5px}.colorValue .rgbaSetting.green input[type=range][data-v-16f607d2]::-webkit-slider-runnable-track{background-color:#0f0;height:5px;border-radius:5px;cursor:pointer}.colorValue .rgbaSetting.green input[type=range][data-v-16f607d2]::-webkit-slider-thumb{background-color:#0f0;width:15px;height:15px;border-radius:50%;cursor:pointer;margin-top:-5px}.colorValue .rgbaSetting.blue input[type=range][data-v-16f607d2]::-webkit-slider-runnable-track{background-color:#00f;height:5px;border-radius:5px;cursor:pointer}.colorValue .rgbaSetting.blue input[type=range][data-v-16f607d2]::-webkit-slider-thumb{background-color:#00f;width:15px;height:15px;border-radius:50%;cursor:pointer;margin-top:-5px}.colorValue .rgbaSetting.alpha input[type=range][data-v-16f607d2]::-webkit-slider-runnable-track{background-color:#999;height:5px;border-radius:5px;cursor:pointer}.colorValue .rgbaSetting.alpha input[type=range][data-v-16f607d2]::-webkit-slider-thumb{background-color:#999;width:15px;height:15px;border-radius:50%;cursor:pointer;margin-top:-5px}