/* color picker */

.pickr{position:relative;overflow:visible;z-index:1}.pickr *{box-sizing:border-box}.pickr
.pcr-button{cursor:pointer;border-radius:3px;padding:0 3px 0 3px}.pickr
/*
.pcr-button:before{background-size:.5em;border-radius:.15em;z-index:-1}.pickr
.pcr-button:after,.pickr
.pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%}.pickr
.pcr-button:after{background-size:70%;opacity:0}.pickr
*/
.pcr-button.clear:after{opacity:1}.pickr.pcr-button.disabled{cursor:not-allowed}.pcr-app{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0.2em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.02);top:5px;height:15em;width:28em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s}.pcr-app.visible{visibility:visible;opacity:1}.pcr-app

.swatches{display:flex;flex-wrap:wrap;display:grid;grid-template-columns:repeat(auto-fit,minmax(1.6em,1fr));margin-top:.75em}.pcr-app
.swatches>div{position:relative;width:1.5em;height:1.5em;border-radius:.15em;border:1px solid rgba(0,0,0,.05);transition:all .3s;cursor:pointer;margin:0 2px 2px 0;flex-shrink:0;justify-self:center}.pcr-app
.swatches>div:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background-size:6px;border-radius:.15em;z-index:-1}.pcr-app
.swatches>div:hover{filter:brightness(1.1)}.pcr-app
.pcr-interaction{display:flex;align-items:center;margin:1em -.2em 0}.pcr-app
.pcr-interaction>*{margin:0.2em}.pcr-app
.pcr-interaction input{padding:.5em .6em;border:none;outline:none;letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#c4c4c4;background:#f8f8f8;border-radius:.15em;transition:all .15s}.pcr-app
.pcr-interaction input:hover{color:grey}.pcr-app
.pcr-interaction
.pcr-result{color:grey;text-align:left;flex-grow:1;min-width:1em;transition:all .2s;border-radius:.15em;background:#f8f8f8;cursor:text;padding-left:.8em}.pcr-app
.pcr-interaction
.pcr-result:focus{color:#4285f4}.pcr-app
.pcr-interaction
.pcr-result::selection{background:#4285f4;color:#fff}.pcr-app
.pcr-interaction
.pcr-type.active{color:#fff;background:#4285f4}.pcr-app
.pcr-interaction
.pcr-clear,.pcr-app
.pcr-interaction
.pcr-save{color:#fff;width:auto}.pcr-app
.pcr-interaction
.pcr-save{background:#4285f4}.pcr-app
.pcr-interaction
.pcr-save:hover{background:#4370f4;color:#fff}.pcr-app
.pcr-interaction
.pcr-clear{background:#f44250}.pcr-app
.pcr-interaction
.pcr-clear:hover{background:#db3d49;color:#fff}.pcr-app
.pcr-selection{display:flex;justify-content:space-between;flex-grow:1}.pcr-app
.pcr-selection
.pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;user-select:none;cursor:-moz-grab;cursor:-webkit-grabbing}.pcr-app
.pcr-selection
.pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}.pcr-app
.pcr-selection
.pcr-color-preview:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app
.pcr-selection
.pcr-color-preview
.pcr-last-color{cursor:pointer;transition:background-color .3s;border-radius:.15em .15em 0 0}.pcr-app
.pcr-selection
.pcr-color-preview
.pcr-current-color{border-radius:0 0 .15em .15em}.pcr-app
.pcr-selection
.pcr-color-preview
.pcr-current-color,.pcr-app
.pcr-selection
.pcr-color-preview
.pcr-last-color{background:transparent;width:100%;height:50%}.pcr-app
.pcr-selection
.pcr-color-chooser,.pcr-app
.pcr-selection
.pcr-color-opacity,.pcr-app
.pcr-selection
.pcr-color-palette{position:relative;user-select:none;display:flex;flex-direction:column}.pcr-app
.pcr-selection
.pcr-color-palette{width:100%;z-index:1}.pcr-app
.pcr-selection
.pcr-color-palette
.pcr-palette{height:100%;border-radius:.15em}.pcr-app
.pcr-selection
.pcr-color-palette.pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app
.pcr-selection
.pcr-color-chooser,.pcr-app
.pcr-selection
.pcr-color-opacity{margin-left:.75em}.pcr-app
.pcr-selection
.pcr-color-chooser
.pcr-picker,.pcr-app
.pcr-selection
.pcr-color-opacity
.pcr-picker{left:50%;transform:translateX(-50%)}.pcr-app
.pcr-selection
.pcr-color-chooser
.pcr-slider,.pcr-app
.pcr-selection
.pcr-color-opacity
.pcr-slider{width:8px;height:100%;border-radius:50em}.pcr-app
.pcr-selection
.pcr-color-chooser
.pcr-slider{background:linear-gradient(180deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app
.pcr-selection
.pcr-color-opacity
.pcr-slider{background:linear-gradient(180deg,transparent,#000);background-size:100%,50%}