@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap);.colorpicker-wrap{position:relative;width:56px;font-family:'Montserrat',Arial,sans-serif}.colorpicker-icon{width:56px;height:56px;border:2px solid #b0bec5;border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0002;transition:border-color .18s}.colorpicker-icon:active,.colorpicker-icon:hover{border-color:#1976d2}.colorpicker-icon-inner{width:44px;height:44px;border-radius:50%;box-shadow:0 1px 4px #0001;transition:background .14s}.colorpicker-palette{display:none;position:absolute;top:62px;left:0;z-index:100;background:#fff;border-radius:12px;border:1px solid #b0bec5;box-shadow:0 8px 36px #0002;width:325px;padding:18px 20px;user-select:none;box-sizing:border-box;font-family:'Montserrat',Arial,sans-serif}.colorpicker-palette.active{display:block}.colorpicker-flex{display:flex;align-items:flex-start;width:100%}.colorpicker-canvas{position:relative;width:253px;height:160px;background:#eee;overflow:hidden;box-shadow:0 1px 6px #0001;cursor:crosshair}.colorpicker-hue{width:22px;height:160px;background:linear-gradient(to top,red 0%,#ff0 16%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,red 100%);margin-left:8px;position:relative;cursor:ns-resize;flex-shrink:0}.colorpicker-hue-thumb{position:absolute;left:-3px;width:28px;height:6px;border-radius:3px;background:#fff;border:2px solid #333;box-sizing:border-box;pointer-events:none}.colorpicker-thumb{position:absolute;width:16px;height:16px;border:2px solid #fff;box-shadow:0 0 5px #0004;border-radius:50%;pointer-events:none;transform:translate(-8px,-8px)}.colorpicker-section{margin-top:16px;width:100%}.colorpicker-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;justify-content:center;width:100%}.colorpicker-select{padding:4px 12px;border-radius:6px;border:1px solid #bbb;background:#f7f7f7;font-size:.8rem;font-weight:400;min-width:76px;margin-right:6px;font-family:'Montserrat',Arial,sans-serif;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.colorpicker-code-input{font-family:'Montserrat',monospace,sans-serif;font-size:.8rem;padding:5px 8px;border-radius:6px;background:#f4f4f4;border:1px solid #e0e0e0;min-width:150px;flex:1;text-align:left;transition:border-color .2s,border .2s}.colorpicker-code-input.invalid{border:1.5px solid #e53935;background:#fff3f3}.colorpicker-opacity-row{display:flex;align-items:center;gap:12px;justify-content:center;width:100%;margin-bottom:0;margin-top:6px}.colorpicker-opacity-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-right:1px}.colorpicker-opacity-slider{width:230px;max-width:100%;appearance:none;height:8px;border-radius:6px;background:linear-gradient(90deg,#FFFFFF00 0%,#000 100%),repeating-conic-gradient(#d3d3d3 0 25%,#0000 0 50%);background-size:auto auto,6px 6px;background-position:0 0,0 0;background-repeat:repeat;outline:none;box-shadow:none;position:relative;height:8px;padding-block:inherit;padding-inline:inherit;border:none}.colorpicker-opacity-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#111;border:2px solid #111;cursor:pointer;transition:.15s;margin-top:-4px}.colorpicker-opacity-slider::-webkit-slider-runnable-track{height:8px;border-radius:6px;background:0 0}.colorpicker-opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#111;border:2px solid #111;cursor:pointer;transition:.15s}.colorpicker-opacity-slider::-moz-range-track{height:8px;border-radius:6px;background:linear-gradient(90deg,#FFFFFF00 0%,#000 100%),linear-gradient(45deg,#d3d3d3 25%,transparent 25%),linear-gradient(135deg,#d3d3d3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d3d3d3 75%),linear-gradient(135deg,transparent 75%,#d3d3d3 75%);background-size:auto auto,4px 4px,4px 4px,4px 4px,4px 4px;background-position:0 0,0 0,10px 0,10px -10px,0 10px;background-repeat:repeat}.colorpicker-opacity-slider::-ms-thumb{width:16px;height:16px;border-radius:50%;background:#111;border:2px solid #111;cursor:pointer;transition:.15s}.colorpicker-opacity-slider::-ms-fill-lower,.colorpicker-opacity-slider::-ms-fill-upper{background:linear-gradient(90deg,#FFFFFF00 0%,#000 100%),linear-gradient(45deg,#d3d3d3 25%,transparent 25%),linear-gradient(135deg,#d3d3d3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d3d3d3 75%),linear-gradient(135deg,transparent 75%,#d3d3d3 75%);background-size:auto auto,4px 4px,4px 4px,4px 4px,4px 4px;background-position:0 0,0 0,10px 0,10px -10px,0 10px;background-repeat:repeat;border-radius:6px}.colorpicker-opacity-slider:disabled{background:#e0e0e0;opacity:.6;cursor:not-allowed}.colorpicker-opacity-val{font-family:monospace;color:#111;min-width:36px;font-weight:400;font-size:.92rem}.colorpicker-opacity-slider:disabled+.colorpicker-opacity-val,.colorpicker-opacity-slider:disabled~.colorpicker-opacity-val,.colorpicker-opacity-val[disabled],.colorpicker-opacity-val.disabled{color:#ccc!important}@media (max-width:500px){.colorpicker-palette{width:98vw;min-width:0;left:0;right:0;padding:8px 2vw 16px}.colorpicker-canvas{width:96vw!important}}