.pickr{position: relative; overflow: visible}.pickr *{box-sizing: border-box}.pickr .pcr-button{position: relative; height: 2em; width: 2em; padding: .5em; border-radius: .15em; cursor: pointer; background: transparent; transition: background-color .3s; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif}.pickr .pcr-button:before{background: url('data:image/svg+xml;utf8, '); 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: url('data:image/svg+xml;utf8, ') no-repeat 50%; 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; 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 .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: gray}.pcr-app .pcr-interaction .pcr-result{color: gray; 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}.pcr-app .pcr-selection .pcr-color-preview:before{position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8, '); 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}.pcr-app .pcr-selection .pcr-color-palette{flex-grow: 0.9; 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: url('data:image/svg+xml;utf8, '); background-size: .5em; border-radius: .15em; z-index: -1}.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, lime, cyan, blue, #f0f, red)}.pcr-app .pcr-selection .pcr-color-opacity .pcr-slider{background: linear-gradient(180deg, transparent, #000), url('data:image/svg+xml;utf8, '); background-size: 100%, 50%}