.pickr{position:relative;overflow:visible}.pickr *{box-sizing:border-box}.pickr .pcr-button{height:2em;width:2em;cursor:pointer;background:0 0;border-radius:.15em;padding:.5em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;transition:background-color .3s;position:relative}.pickr .pcr-button:before{z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em}.pickr .pcr-button:after,.pickr .pcr-button:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0}.pickr .pcr-button:after{opacity:0;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>") 50%/70% no-repeat}.pickr .pcr-button.clear:after{opacity:1}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app{height:15em;width:28em;max-width:95vw;opacity:0;visibility:hidden;background:#fff;border-radius:.1em;flex-direction:column;padding:.8em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;transition:opacity .3s;display:flex;position:absolute;top:5px;box-shadow:0 .2em 1.5em rgba(0,0,0,.1),0 0 1em rgba(0,0,0,.02)}.pcr-app.visible{visibility:visible;opacity:1}.pcr-app .pcr-interaction{align-items:center;margin:1em -.2em 0;display:flex}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;text-align:center;cursor:pointer;color:#c4c4c4;background:#f8f8f8;border:none;border-radius:.15em;outline:none;padding:.5em .6em;font-size:.75em;transition:all .15s}.pcr-app .pcr-interaction input:hover{color:gray}.pcr-app .pcr-interaction .pcr-result{color:gray;text-align:left;min-width:1em;cursor:text;background:#f8f8f8;border-radius:.15em;flex-grow:1;padding-left:.8em;transition:all .2s}.pcr-app .pcr-interaction .pcr-result:focus{color:#4285f4}.pcr-app .pcr-interaction .pcr-result::selection{color:#fff;background:#4285f4}.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{color:#fff;background:#4370f4}.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:hover{color:#fff;background:#db3d49}.pcr-app .pcr-selection{flex-grow:1;justify-content:space-between;display:flex}.pcr-app .pcr-selection .pcr-picker{height:18px;width:18px;-webkit-user-select:none;user-select:none;cursor:-moz-grab;cursor:-webkit-grabbing;border:2px solid #fff;border-radius:100%;position:absolute}.pcr-app .pcr-selection .pcr-color-preview{z-index:1;width:2em;flex-direction:column;justify-content:space-between;display:flex;position:relative}.pcr-app .pcr-selection .pcr-color-preview:before{content:"";width:100%;height:100%;z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em;position:absolute;top:0;left:0}.pcr-app .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;border-radius:.15em .15em 0 0;transition:background-color .3s}.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{width:100%;height:50%;background:0 0}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{-webkit-user-select:none;user-select:none;position:relative}.pcr-app .pcr-selection .pcr-color-palette{z-index:1;flex-grow:.9}.pcr-app .pcr-selection .pcr-color-palette .pcr-palette{height:100%;border-radius:.15em}.pcr-app .pcr-selection .pcr-color-palette .pcr-palette:before{content:"";width:100%;height:100%;z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em;position:absolute;top:0;left:0}.pcr-app .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translate(-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(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(transparent,#000) 0 0/100%,url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/50%}