.el-cp-palette{background-color:var(--palette-bg,#eee);box-sizing:border-box;cursor:default;height:var(--palette-height,150px);position:relative;width:var(--palette-width,100%)}.el-cp-palette:after,.el-cp-palette:before{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.el-cp-palette:before{background-color:rgba(204,154,129,0);background-image:linear-gradient(90deg,#fff,hsla(20,42%,65%,0));background-repeat:repeat-x}.el-cp-palette:after{background-image:linear-gradient(0deg,#000,hsla(20,42%,65%,0))}.el-cp-palette:active .el-cp-palette__pointer{box-shadow:var(--shadow-pointer-active)}.el-cp-palette__pointer{border:var(--size-pointer-stroke) solid var(--color-pointer-fill);border-radius:50%;box-shadow:var(--shadow-pointer);box-sizing:border-box;display:block;height:var(--size-pointer);position:absolute;transform:translate(-50%,-50%);width:var(--size-pointer);z-index:2}.el-cp-color-form{border:none;margin:0;padding:0}.el-cp-color-form legend{font-size:0}.el-cp-color-form__wrap{display:flex;margin:0}.el-cp-color-form.hex .el-cp-color-field:first-child,.el-cp-color-form.hsl .el-cp-color-field:nth-child(3),.el-cp-color-form.rgb .el-cp-color-field:nth-child(2){display:flex}.el-cp-color-field{display:none;flex:1;gap:4px}.el-cp-color-field label{display:block;flex:1;text-align:center}.el-cp-color-field input{-moz-appearance:textfield;background:var(--form-bg);border:none;border-radius:2px;box-shadow:inset 0 0 0 1px var(--form-border-color);box-sizing:border-box;color:var(--color-fill);display:block;font-size:12px;font-weight:500;height:24px;margin:0;outline:none;padding:0;text-align:center;transition:box-shadow var(--speed-focus) ease-out;width:100%}.el-cp-color-field input:focus{box-shadow:inset 0 1px 5px 0 var(--form-border-color),inset 0 0 0 1px var(--form-border-color),0 0 0 2px var(--color-key)}.el-cp-color-field input::-webkit-inner-spin-button,.el-cp-color-field input::-webkit-outer-spin-button{-webkit-appearance:none}.el-cp-color-field span{color:var(--color-blur);display:block;font-size:10px;line-height:1.15;margin:4px 0 0}.el-cp-color-nav{margin-left:var(--size-inner-padding)}.el-cp-color-nav__label{-webkit-tap-highlight-color:transparent;background:none;border:none;border-radius:2px;height:24px;margin:0;padding:0;position:relative;transition:box-shadow var(--speed-focus) ease-out;width:36px}.el-cp-color-nav__label,.el-cp-color-nav__label select{box-sizing:border-box;cursor:pointer;display:block;outline:none}.el-cp-color-nav__label select{appearance:none;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.el-cp-color-nav__label svg{stroke-width:1.5px;color:var(--color-fill);display:block;height:100%;margin:0 auto;transform-origin:50% 50%;transition:transform var(--speed-focus) ease-out;width:20px}.el-cp-color-nav__label:focus-within{box-shadow:0 0 0 2px var(--color-key)}.el-cp-color-nav__label:active svg{transform:rotate(90deg)}.el-cp-swatches__header{align-items:center;display:flex;margin:0 0 16px}.el-cp-swatches__header h2{cursor:auto;flex:1;font-size:12px;font-weight:600;line-height:1.15;margin:0}.el-cp-colors{display:grid;gap:var(--swatch-gap,10px);grid-template-columns:repeat(var(--swatch-column,5),1fr);list-style:none;margin:0;padding:0}.el-cp-colors>li button{border:none;border-radius:var(--swatch-item-stroke-radius);box-sizing:border-box;cursor:pointer;display:block;font-size:0;height:var(--swatch-item-size,20px);margin:0 auto;outline:none;padding:0;transition:box-shadow var(--speed-focus) ease-out;width:var(--swatch-item-size,20px)}.el-cp-colors>li button:active{opacity:.5}.el-cp-colors__item{background-color:transparent;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;position:relative}.el-cp-colors__item:after,.el-cp-colors__item:before{border-radius:var(--swatch-item-stroke-radius);bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.el-cp-colors__item:before{background-color:var(--color)}.el-cp-colors__item:after{box-shadow:inset 0 0 0 1px var(--swatch-item-stroke-color)}.el-cp-colors__item:disabled,.el-cp-colors__item:focus{box-shadow:0 0 0 2px var(--color-key)}.el-cp-slider{box-sizing:border-box;position:relative}.el-cp-slider:active .el-cp-slider__circle{box-shadow:var(--shadow-pointer-active)}.el-cp-slider__body{border-radius:var(--slider-radius,4px);box-sizing:border-box;cursor:default;height:var(--slider-height,8px);margin:0;position:relative}.el-cp-slider__body:after{bottom:0;box-shadow:inset 0 0 0 1px var(--slider-stroke-color);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.el-cp-slider__bar,.el-cp-slider__body:after{border-radius:var(--slider-radius,4px);display:block}.el-cp-slider__bar{height:100%}.el-cp-slider__circle{border-radius:50%}.el-cp-slider__brick,.el-cp-slider__circle{border:var(--size-pointer-stroke,3px) solid var(--color-pointer-fill,#fff);box-shadow:var(--shadow-pointer);box-sizing:border-box;height:var(--size-pointer,12px);left:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:box-shadow var(--speed-focus) ease-out;width:var(--size-pointer,12px);z-index:2}.el-cp-slider__brick{border-radius:2px}.el-cp-slider--hue .el-cp-slider__body{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.el-cp-slider--alpha .el-cp-slider__body{background-color:transparent;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px}.el-cp-slider--brightness .el-cp-slider__body{background-image:linear-gradient(90deg,#000 0,hsla(0,0%,100%,0))}.el-cp-slider--vertical .el-cp-slider__body{height:100%}.el-cp-slider--vertical .el-cp-slider__brick,.el-cp-slider--vertical .el-cp-slider__circle{left:50%;top:0}.el-cp-slider--vertical .el-cp-slider__brick{height:10px;width:100%}.el-cp-slider--vertical.el-cp-slider--hue .el-cp-slider__body{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.el-cp-color-preview{background-color:transparent;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;box-sizing:border-box;height:var(--preview-size);overflow:hidden;position:relative;width:var(--preview-size)}.el-cp-color-preview,.el-cp-color-preview:after{border-radius:var(--preview-radius);display:block}.el-cp-color-preview:after{bottom:0;box-shadow:inset 0 0 0 1px var(--preview-stroke-color);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.el-cp-color-preview em{display:block;height:100%;position:relative}.el-cp-color-eyedropper button{background:none;border:none;border-radius:var(--size-radius);box-sizing:border-box;cursor:pointer;display:block;font-size:0;height:30px;margin:-4px;outline:none;padding:0;transition:box-shadow var(--speed-focus) ease-out,opacity var(--speed-focus) ease-out;width:30px}.el-cp-color-eyedropper button:focus-visible{box-shadow:0 0 0 2px var(--color-key)}.el-cp-color-eyedropper button:active{opacity:.5}.el-cp-color-eyedropper svg{color:var(--color-fill);display:block;margin:0 auto}.el-colorpicker--default .el-colorpicker__wrap{padding:0 0 16px;position:relative}.el-colorpicker--default .el-cp-palette,.el-colorpicker--default .el-cp-palette:after,.el-colorpicker--default .el-cp-palette:before{border-top-left-radius:var(--size-radius);border-top-right-radius:var(--size-radius)}.el-colorpicker--default .el-cp-color-control{align-items:center;display:flex;margin:16px 0 0;padding:0 var(--size-side-padding);user-select:none}.el-colorpicker--default .el-cp-color-control__left{margin-right:var(--size-inner-padding,16px)}.el-colorpicker--default .el-cp-color-control__body{flex:1}.el-colorpicker--default .el-cp-color-control__body>:nth-child(n+2){margin-top:8px}.el-colorpicker--default .el-cp-color-control__right{margin-left:var(--size-inner-padding,16px)}.el-colorpicker--default .el-cp-color-form{margin:16px 0 0;padding:0 var(--size-side-padding)}.el-colorpicker--default .el-cp-swatches{border-top:1px solid var(--swatch-border-color);margin:16px 0 0;padding:16px var(--size-side-padding) 0}.el-cp-palette-circle{box-sizing:border-box;display:flex;justify-content:center}.el-cp-palette-circle__wrap{position:relative}.el-cp-palette-circle__canvas{border-radius:50%;display:block;overflow:hidden}.el-cp-palette-circle__brightness{border-radius:50%;box-sizing:border-box;display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.el-cp-palette-circle__pointer{border:var(--size-pointer-stroke) solid var(--color-pointer-fill);border-radius:50%;box-shadow:var(--shadow-pointer);box-sizing:border-box;display:block;height:var(--size-pointer);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--size-pointer);z-index:2}.el-cp-palette-circle:active .el-cp-palette-circle__pointer{box-shadow:var(--shadow-pointer-active)}.el-colorpicker--circle .el-colorpicker__wrap{padding:0 0 16px;position:relative}.el-colorpicker--circle .el-cp-palette-circle{padding:20px}.el-colorpicker--circle .el-cp-color-control{align-items:center;display:flex;margin:0;padding:0 var(--size-side-padding);user-select:none}.el-colorpicker--circle .el-cp-color-control__left{margin-right:var(--size-inner-padding,16px)}.el-colorpicker--circle .el-cp-color-control__body{flex:1}.el-colorpicker--circle .el-cp-color-control__body>:nth-child(n+2){margin-top:8px}.el-colorpicker--circle .el-cp-color-control__right{margin-left:var(--size-side-padding,16px)}.el-colorpicker--circle .el-cp-color-form{margin:16px 0 0;padding:0 var(--size-side-padding)}.el-colorpicker--circle .el-cp-swatches{border-top:1px solid var(--swatch-border-color);margin:16px 0 0;padding:16px var(--size-side-padding) 0}.el-cp-palette-ring{box-sizing:border-box;display:flex;justify-content:center}.el-cp-palette-ring__wrap{margin:0 auto;position:relative}.el-cp-palette-ring__canvas{border-radius:50%;display:block;margin:0 auto;overflow:hidden}.el-cp-palette-ring__pointer{border:var(--size-pointer-stroke) solid var(--color-pointer-fill);border-radius:50%;box-shadow:var(--shadow-pointer);box-sizing:border-box;display:block;height:var(--size-pointer);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--size-pointer);z-index:2}.el-cp-palette-ring:active .el-cp-palette-ring__pointer{box-shadow:var(--shadow-pointer-active)}.el-colorpicker--ring .el-colorpicker__wrap{padding:20px 0 16px}.el-colorpicker--ring .el-colorpicker__body{height:var(--height);margin:0 auto 16px;padding:20px;position:relative;width:var(--width)}.el-colorpicker--ring .el-cp-palette-ring{height:var(--height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--width)}.el-colorpicker--ring .el-cp-palette{height:calc(var(--height) - var(--thickness)*2 - 30%);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--width) - var(--thickness)*2 - 30%);z-index:3}.el-colorpicker--ring .el-cp-color-control{align-items:center;display:flex;margin:0;padding:0 var(--size-side-padding);user-select:none}.el-colorpicker--ring .el-cp-color-control__left{margin-right:var(--size-inner-padding,16px)}.el-colorpicker--ring .el-cp-color-control__body{flex:1}.el-colorpicker--ring .el-cp-color-control__body>:nth-child(n+2){margin-top:8px}.el-colorpicker--ring .el-cp-color-control__right{margin-left:var(--size-side-padding,16px)}.el-colorpicker--ring .el-cp-color-form{margin:16px 0 0;padding:0 var(--size-side-padding)}.el-colorpicker--ring .el-cp-swatches{border-top:1px solid var(--swatch-border-color);margin:16px 0 0;padding:16px var(--size-side-padding) 0}.el-colorpicker--mini{--control-width:40px}.el-colorpicker--mini .el-colorpicker__wrap{position:relative}.el-colorpicker--mini .el-colorpicker__body{padding-right:var(--control-width);position:relative}.el-colorpicker--mini .el-colorpicker__palette{padding-top:100%;position:relative}.el-colorpicker--mini .el-cp-palette{--palette-width:100%;--palette-height:100%;bottom:0;left:0;position:absolute;right:0;top:0}.el-colorpicker--mini .el-cp-palette,.el-colorpicker--mini .el-cp-palette:after,.el-colorpicker--mini .el-cp-palette:before{border-bottom-left-radius:var(--size-radius);border-top-left-radius:var(--size-radius)}.el-colorpicker--mini .el-cp-color-control{--slider-radius:0;bottom:0;display:flex;position:absolute;right:0;top:0;width:var(--control-width)}.el-colorpicker--mini .el-cp-color-control>*{flex:1}.el-colorpicker--mini .el-cp-color-control>:last-child .el-cp-slider__body:after{border-bottom-right-radius:var(--size-radius);border-top-right-radius:var(--size-radius)}.el-colorpicker--mini .el-cp-swatches{margin:0;padding:16px var(--size-side-padding) 16px}.el-colorpicker--none .el-colorpicker__wrap{padding:16px;position:relative}.el-colorpicker--none .el-colorpicker__empty{align-items:center;color:var(--color-blur);display:flex;font-size:12px;height:65px;justify-content:center;letter-spacing:-.25px}.gradient-editor{position:relative;user-select:none}.gradient-editor .unit{grid-column-gap:2px;display:grid;font-size:11px;grid-template-columns:70px 50px 50px}.gradient-editor [data-editor]{display:none;margin-top:6px}.gradient-editor [data-editor]>label{font-size:11px}.gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient],.gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools],.gradient-editor[data-selected-editor=conic-gradient] [data-editor=angle],.gradient-editor[data-selected-editor=conic-gradient] [data-editor=centerX],.gradient-editor[data-selected-editor=conic-gradient] [data-editor=centerY],.gradient-editor[data-selected-editor=linear-gradient] [data-editor=angle],.gradient-editor[data-selected-editor=radial-gradient] [data-editor=centerX],.gradient-editor[data-selected-editor=radial-gradient] [data-editor=centerY],.gradient-editor[data-selected-editor=repeating-conic-gradient] [data-editor=angle],.gradient-editor[data-selected-editor=repeating-conic-gradient] [data-editor=centerX],.gradient-editor[data-selected-editor=repeating-conic-gradient] [data-editor=centerY],.gradient-editor[data-selected-editor=repeating-linear-gradient] [data-editor=angle],.gradient-editor[data-selected-editor=repeating-radial-gradient] [data-editor=centerX],.gradient-editor[data-selected-editor=repeating-radial-gradient] [data-editor=centerY]{display:grid}.gradient-editor[data-selected-editor=conic-gradient] [data-editor=radialType],.gradient-editor[data-selected-editor=radial-gradient] [data-editor=radialType],.gradient-editor[data-selected-editor=repeating-conic-gradient] [data-editor=radialType],.gradient-editor[data-selected-editor=repeating-radial-gradient] [data-editor=radialType]{grid-column-gap:2px;display:grid;grid-template-columns:50px 80px;margin-top:5px}.gradient-editor[data-selected-editor=conic-gradient] [data-editor=radialType] select,.gradient-editor[data-selected-editor=radial-gradient] [data-editor=radialType] select,.gradient-editor[data-selected-editor=repeating-conic-gradient] [data-editor=radialType] select,.gradient-editor[data-selected-editor=repeating-radial-gradient] [data-editor=radialType] select{font-size:12px;width:100%}.gradient-editor .sub-editor{padding:0 8px 10px}.gradient-editor .sub-editor>div{grid-template-columns:50px 1fr}.gradient-editor .gradient-steps{height:30px;position:relative}.gradient-editor .hue,.gradient-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;border:1px solid var(--gradientpicker-border-color);border-radius:10px;box-sizing:border-box;height:14px;left:10px;pointer-events:all;position:absolute;right:10px;top:4px}.gradient-editor .hue{pointer-events:none}.gradient-editor .hue .step-list{border-radius:10px;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.gradient-editor .hue .step-list[data-selected-index="0"] [data-index="0"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="0"] [data-index="0"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="1"] [data-index="1"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="1"] [data-index="1"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="2"] [data-index="2"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="2"] [data-index="2"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="3"] [data-index="3"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="3"] [data-index="3"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="4"] [data-index="4"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="4"] [data-index="4"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="5"] [data-index="5"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="5"] [data-index="5"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="6"] [data-index="6"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="6"] [data-index="6"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="7"] [data-index="7"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="7"] [data-index="7"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="8"] [data-index="8"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="8"] [data-index="8"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="9"] [data-index="9"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="9"] [data-index="9"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="10"] [data-index="10"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="10"] [data-index="10"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="11"] [data-index="11"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="11"] [data-index="11"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="12"] [data-index="12"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="12"] [data-index="12"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="13"] [data-index="13"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="13"] [data-index="13"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="14"] [data-index="14"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="14"] [data-index="14"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="15"] [data-index="15"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="15"] [data-index="15"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="16"] [data-index="16"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="16"] [data-index="16"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="17"] [data-index="17"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="17"] [data-index="17"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="18"] [data-index="18"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="18"] [data-index="18"] .arrow{display:block}.gradient-editor .hue .step-list[data-selected-index="19"] [data-index="19"]{border:0;transform:translateX(-50%) translateY(100%)}.gradient-editor .hue .step-list[data-selected-index="19"] [data-index="19"] .arrow{display:block}.gradient-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;border:1px solid #fff;border-radius:100%;box-shadow:0 0 2px 0 rgba(0,0,0,.5);box-sizing:border-box;display:inline-block;height:10px;pointer-events:all;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:10px}.gradient-editor .hue .step-list .step[data-cut=true],.gradient-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.gradient-editor .hue .step-list .step .color-view{border-radius:100%;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.gradient-editor .hue .step-list .step .arrow{clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%);display:none;height:5px;left:50%;pointer-events:none;position:absolute;top:0;transform:translateX(-50%) translateY(-120%);width:5px}.gradient-editor input[type=range]{appearance:none;background-color:transparent;margin:6.2px 0;width:100%}.gradient-editor input[type=range]:focus{outline:none}.gradient-editor input[type=range]::-webkit-slider-runnable-track{background:var(--range-thumb-color);border:0 solid #010101;border-radius:0;cursor:pointer;height:1px;width:100%}.gradient-editor input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--range-thumb-color);border-radius:10px;cursor:pointer;height:var(--range-thumb-width);margin-top:-5px;width:var(--range-thumb-width)}.gradient-editor input[type=range]:focus::-webkit-slider-runnable-track{background:#3174ad}.gradient-editor input[type=range]::-moz-range-track{background:var(--range-thumb-color);border:0 solid #010101;border-radius:0;cursor:pointer;height:1px;width:100%}.gradient-editor input[type=range]::-moz-range-thumb{background:var(--range-thumb-color);border:1px solid #000;border-radius:9px;cursor:pointer;height:var(--range-thumb-width);width:var(--range-thumb-height)}.gradient-editor input[type=range]::-ms-track{background:transparent;border-color:transparent;color:transparent;cursor:pointer;height:1px;width:100%}.gradient-editor input[type=range]::-ms-fill-lower{box-shadow:0 0 0 #000,0 0 0 #0d0d0d}.gradient-editor input[type=range]::-ms-fill-lower,.gradient-editor input[type=range]::-ms-fill-upper{background:var(--range-thumb-color);border:0 solid #010101;border-radius:0}.gradient-editor input[type=range]::-ms-thumb{background:var(--range-thumb-color);border-radius:9px;cursor:pointer;height:var(--range-thumb-width);width:var(--range-thumb-height)}.gradient-editor input[type=range]:focus::-ms-fill-lower,.gradient-editor input[type=range]:focus::-ms-fill-upper{background:var(--range-thumb-color)}.gradient-editor .right-menu{display:inline-block;float:right}.gradient-editor .right-menu button{background-color:transparent;border:0;border-radius:4px;font-size:11px;height:20px;text-align:center;vertical-align:middle;width:20px}.gradient-editor .right-menu button:hover{background-color:var(--gradientpicker-border-color)}.gradient-picker{border:1px solid #ececec;box-sizing:border-box}.gradient-picker .gradient-body{display:grid;grid-template-columns:1fr 224px}.gradient-picker .gradient-body>div:first-child{border-right:1px solid var(--gradientpicker-border-color);padding:5px}.gradient-picker .popup-item{margin-bottom:5px}.gradient-picker .grid-2{display:grid;grid-template-columns:60px 1fr}.gradient-picker .grid-2 label{font-size:11px;padding-right:2px;text-align:left}.gradient-picker label{font-size:11px}.gradient-picker .gradient-preview{background-color:transparent;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;height:150px;overflow:hidden;position:relative;width:100%}.gradient-picker .gradient-preview .gradient-view{bottom:0;left:0;position:absolute;right:0;top:0}.gradient-picker .picker-tab{margin-top:4px;user-select:none}.gradient-picker .picker-tab .picker-tab-list{padding:2px 0;text-align:center}.gradient-picker .picker-tab .picker-tab-list[data-value=linear-gradient] .picker-tab-item[data-selected-value=linear-gradient]{box-shadow:0 0 3px 0 rgba(0,0,0,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=linear-gradient] .picker-tab-item[data-selected-value=linear-gradient] .icon svg path{fill:rgba(0,0,255,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=repeating-linear-gradient] .picker-tab-item[data-selected-value=repeating-linear-gradient]{box-shadow:0 0 3px 0 rgba(0,0,0,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=repeating-linear-gradient] .picker-tab-item[data-selected-value=repeating-linear-gradient] .icon svg path{fill:rgba(0,0,255,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=radial-gradient] .picker-tab-item[data-selected-value=radial-gradient]{box-shadow:0 0 3px 0 rgba(0,0,0,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=radial-gradient] .picker-tab-item[data-selected-value=radial-gradient] .icon svg path{fill:rgba(0,0,255,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=repeating-radial-gradient] .picker-tab-item[data-selected-value=repeating-radial-gradient]{box-shadow:0 0 3px 0 rgba(0,0,0,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=repeating-radial-gradient] .picker-tab-item[data-selected-value=repeating-radial-gradient] .icon svg path{fill:rgba(0,0,255,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=conic-gradient] .picker-tab-item[data-selected-value=conic-gradient]{box-shadow:0 0 3px 0 rgba(0,0,0,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=conic-gradient] .picker-tab-item[data-selected-value=conic-gradient] .icon svg path{fill:rgba(0,0,255,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=repeating-conic-gradient] .picker-tab-item[data-selected-value=repeating-conic-gradient]{box-shadow:0 0 3px 0 rgba(0,0,0,.5)}.gradient-picker .picker-tab .picker-tab-list[data-value=repeating-conic-gradient] .picker-tab-item[data-selected-value=repeating-conic-gradient] .icon svg path{fill:rgba(0,0,255,.5)}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item{border-radius:20%;box-sizing:border-box;cursor:pointer;display:inline-block;height:20px;position:relative;vertical-align:middle;width:20px}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item .icon{border-radius:100%;display:inline-block;height:90%;left:50%;pointer-events:none;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:90%}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item .icon svg{height:100%;width:100%}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value=static-gradient] .icon{background-image:linear-gradient(90deg,red,red)}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value=linear-gradient] .icon{background-image:linear-gradient(90deg,#000,gray)}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value=radial-gradient] .icon{background-image:radial-gradient(closest-side,#000,#ebf8e1,gray)}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value=conic-gradient] .icon{background-image:conic-gradient(#000,#ebf8e1)}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value=repeating-linear-gradient] .icon{background-image:repeating-linear-gradient(45deg,#3f87a6,#ebf8e1 15%,#f69d3c 20%)}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value=repeating-radial-gradient] .icon{background-image:repeating-radial-gradient(circle,#3f87a6,#ebf8e1 15%,#f69d3c 20%)}.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value=repeating-conic-gradient] .icon{background-image:repeating-conic-gradient(#3f87a6,#ebf8e1 5%,#f69d3c 10%)}.gradient-picker .picker-tab .picker-gradient-selector{padding:2px 10px}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps{display:block;height:30px;position:relative}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;box-shadow:0 0 1px 0 rgba(0,0,0,.1);height:14px;position:absolute;width:100%;z-index:0}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue{cursor:pointer;margin:0;padding:0;position:relative}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue>.step-list{cursor:copy;height:14px;position:relative;width:100%;z-index:1}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue>.step-list.mode-drag{cursor:pointer}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar{background-color:rgba(255,255,255,.8);border:2px solid #fff;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.6);cursor:pointer;display:inline-block;height:10px;left:0;position:absolute;top:17px;transform:translateX(-50%);transition:top .3s ease-out;width:10px}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar .guide-line{bottom:8px;height:0;left:3px;pointer-events:none;position:absolute;transform:translateX(-1px);transition:all .3s ease-out;width:1px}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected{top:30px;z-index:1}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected .guide-line{height:17px}.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected .guide-change{opacity:1}.gradient-picker .el-colorpicker{--shadow-outer:none;--size-radius:0}.el-gradientpicker--default{display:flex}.el-gradientpicker--default>.box:nth-child(n+2){border-left:1px solid var(--gradientpicker-border-color)}.el-colorpicker{--color-bg:var(--cp-color-bg,#fff);--color-fill:var(--cp-color-fill,#222);--color-key:var(--cp-color-key,#30a2ff);--color-blur:var(--cp-color-blur,#888);--color-pointer-fill:var(--cp-color-pointer-fill,#fff);--size-width:var(--cp-size-width,240px);--size-radius:var(--cp-size-radius,2px);--size-side-padding:var(--cp-size-side-padding,16px);--size-inner-padding:var(--cp-size-inner-padding,10px);--size-pointer:var(--cp-size-pointer,12px);--size-pointer-stroke:var(--cp-size-pointer-stroke,3px);--palette-width:var(--cp-palette-width,100%);--palette-height:var(--cp-palette-height,150px);--slider-height:var(--cp-slider-height,8px);--slider-radius:var(--cp-slider-radius,4px);--slider-stroke-color:var(--cp-slider-stroke-color,rgba(0,0,0,.15));--preview-size:var(--cp-preview-size,36px);--preview-radius:var(--cp-preview-radius,50%);--preview-stroke-color:var(--cp-preview-stroke-color,rgba(0,0,0,.15));--form-bg:var(--cp-form-bg,#fff);--form-border-color:var(--cp-form-border-color,#ddd);--swatch-column:var(--cp-swatch-column,7);--swatch-gap:var(--cp-swatch-gap,8px);--swatch-item-size:var(--cp-swatch-item-size,22px);--swatch-item-stroke-radius:var(--cp-swatch-item-stroke-radius,50%);--swatch-item-stroke-color:var(--cp-swatch-item-stroke-color,rgba(0,0,0,.15));--swatch-border-color:var(--cp-swatch-border-color,#ddd);--shadow-outer:var(--cp-shadow-outer,0 0 10px 2px rgba(0,0,0,.12),inset 0 0 0 1px rgba(0,0,0,.15));--shadow-pointer:var(--cp-shadow-pointer,0 0 2px 1px rgba(0,0,0,.5),inset 0 0 3px 0 rgba(0,0,0,.5));--shadow-pointer-active:var(--cp-shadow-pointer-active,inset 0 0 0 1px var(--color-key),0 0 3px 1px var(--color-key));--speed-focus:var(--cp-speed-focus,200ms);background-color:var(--color-bg);border-radius:var(--size-radius);box-sizing:border-box;color:var(--color-fill);position:relative;user-select:none;-webkit-user-select:none;width:var(--size-width)}.el-colorpicker:after{border-radius:var(--size-radius);bottom:0;box-shadow:var(--shadow-outer);content:"";display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}.el-colorpicker,.el-colorpicker button,.el-colorpicker input{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.25}.el-gradientpicker{--gradientpicker-border-color:var(--cp-gradientpicker-border-color,#ddd);--range-thumb-width:var(--cp-range-thumb-width,10px);--range-thumb-height:var(--cp-range-thumb-height,10px);--range-thumb-color:var(--cp-range-thumb-color,#556375)}