.clr-picker {display: none;flex-wrap: wrap;position: absolute;width: 200px;z-index: 1000;border-radius: 10px;background-color: #fff;justify-content: flex-end;direction: ltr;box-shadow: 0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select: none;-webkit-user-select: none;user-select: none }.clr-picker.clr-open, .clr-picker[data-inline=true] {display: flex }.clr-gradient, .clr-picker[data-inline=true] {position: relative }.clr-gradient {width: 100%;height: 100px;margin-bottom: 15px;border-radius: 3px 3px 0 0;background-image: linear-gradient(transparent,#000),linear-gradient(90deg,#fff,currentColor);cursor: pointer }.clr-marker {position: absolute;width: 12px;height: 12px;margin: -6px 0 0 -6px;border: 1px solid #fff;border-radius: 50%;background-color: currentColor;cursor: pointer }.clr-picker input[type=range]::-webkit-slider-runnable-track {width: 100%;height: 16px }.clr-picker input[type=range]::-webkit-slider-thumb {width: 16px;height: 16px;-webkit-appearance: none }.clr-picker input[type=range]::-moz-range-track {width: 100%;height: 16px;border: 0 }.clr-picker input[type=range]::-moz-range-thumb {width: 16px;height: 16px;border: 0 }.clr-hue {background-image: linear-gradient(90deg,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red) }.clr-alpha, .clr-hue {position: relative;width: calc(100% - 40px);height: 8px;margin: 5px 20px;border-radius: 4px }.clr-alpha span {display: block;height: 100%;width: 100%;border-radius: inherit;background-image: linear-gradient(90deg,transparent,currentColor) }.clr-alpha input, .clr-hue input {position: absolute;width: calc(100% + 32px);height: 16px;left: -16px;top: -4px;margin: 0;background-color: transparent;opacity: 0;cursor: pointer;appearance: none;-webkit-appearance: none }.clr-alpha div, .clr-hue div {width: 16px;height: 16px;top: 50%;margin-left: -8px;transform: translateY(-50%);border: 2px solid #fff;border-radius: 50%;box-shadow: 0 0 1px #888;pointer-events: none }.clr-alpha div, .clr-alpha div:before, .clr-hue div {position: absolute;left: 0;background-color: currentColor }.clr-alpha div:before {content: "";height: 100%;width: 100%;top: 0;border-radius: 50% }.clr-format {display: none;order: 1;width: calc(100% - 40px);margin: 0 20px 20px }.clr-segmented {display: flex;position: relative;width: 100%;margin: 0;padding: 0;border: 1px solid #ddd;border-radius: 15px;box-sizing: border-box;color: #999;font-size: 12px }.clr-segmented input, .clr-segmented legend {position: absolute;width: 100%;height: 100%;margin: 0;padding: 0;border: 0;left: 0;top: 0;opacity: 0;pointer-events: none }.clr-segmented label {flex-grow: 1;margin: 0;padding: 4px 0;font-size: inherit;font-weight: 400;line-height: normal;text-align: center;cursor: pointer }.clr-segmented label:first-of-type {border-radius: 10px 0 0 10px }.clr-segmented label:last-of-type {border-radius: 0 10px 10px 0 }.clr-segmented input:checked + label {color: #fff;background-color: #666 }.clr-swatches {order: 2;width: calc(100% - 32px);margin: 0 16px }.clr-swatches div {display: flex;flex-wrap: wrap;padding-bottom: 12px;justify-content: center }.clr-swatches button {position: relative;width: 20px;height: 20px;margin: 0 4px 6px;padding: 0;border: 0;border-radius: 8px;color: inherit;text-indent: -1000px;white-space: nowrap;overflow: hidden;cursor: pointer }.clr-swatches button:after {content: "";display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;border-radius: inherit;background-color: currentColor;box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) }input.clr-color {order: 1;width: calc(100% - 80px);height: 32px;margin: 15px 20px 20px auto;padding: 0 10px;border: 1px solid #ddd;border-radius: 16px;color: #000;background-color: #fff;font-family: sans-serif;font-size: 14px;text-align: center;box-shadow: none }input.clr-color:focus {outline: none;border: 1px solid #1e90ff }.clr-clear, .clr-close {display: none;order: 2;height: 24px;margin: 0 20px 20px;padding: 0 20px;border: 0;border-radius: 8px;color: #fff;background-color: #666;font-family: inherit;font-size: 12px;font-weight: 400;cursor: pointer }.clr-close {display: block;margin: 0 20px 20px auto }.clr-preview {position: relative;width: 32px;height: 32px;margin: 15px 0 20px 20px;border-radius: 50%;overflow: hidden }.clr-preview:after, .clr-preview:before {content: "";position: absolute;height: 100%;width: 100%;left: 0;top: 0;border: 1px solid #fff;border-radius: 50% }.clr-preview:after {border: 0;background-color: currentColor;box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) }.clr-preview button {position: absolute;width: 100%;height: 100%;z-index: 1;margin: 0;padding: 0;border: 0;border-radius: 50%;outline-offset: -2px;background-color: transparent;text-indent: -9999px;cursor: pointer;overflow: hidden }.clr-alpha div, .clr-color, .clr-hue div, .clr-marker {box-sizing: border-box }.clr-field {display: inline-block;position: relative;color: transparent }.clr-field input {margin: 0;direction: ltr }.clr-field.clr-rtl input {text-align: right }.clr-field button {position: absolute;width: 30px;height: 100%;right: 0;top: 50%;transform: translateY(-50%);margin: 0;padding: 0;border: 0;color: inherit;text-indent: -1000px;white-space: nowrap;overflow: hidden;pointer-events: none }.clr-field.clr-rtl button {right: auto;left: 0 }.clr-field button:after {content: "";display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;border-radius: inherit;background-color: currentColor;box-shadow: inset 0 0 1px rgba(0,0,0,.5) }.clr-alpha, .clr-alpha div, .clr-field button, .clr-preview:before, .clr-swatches button {background-image: repeating-linear-gradient(45deg,#aaa 25%,transparent 0,transparent 75%,#aaa 0,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 0,#fff 75%,#aaa 0,#aaa);background-position: 0 0,4px 4px;background-size: 8px 8px }.clr-marker:focus {outline: none }.clr-keyboard-nav .clr-alpha input:focus + div, .clr-keyboard-nav .clr-hue input:focus + div, .clr-keyboard-nav .clr-marker:focus, .clr-keyboard-nav .clr-segmented input:focus + label {outline: none;box-shadow: 0 0 0 2px #1e90ff,0 0 2px 2px #fff }.clr-picker[data-alpha=false] .clr-alpha {display: none }.clr-picker[data-minimal=true] {padding-top: 16px }.clr-picker[data-minimal=true] .clr-alpha, .clr-picker[data-minimal=true] .clr-color, .clr-picker[data-minimal=true] .clr-gradient, .clr-picker[data-minimal=true] .clr-hue, .clr-picker[data-minimal=true] .clr-preview {display: none }.clr-dark {background-color: #1c1c1c }.clr-dark .clr-segmented {border-color: #777 }.clr-dark .clr-swatches button:after {box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.3) }.clr-dark input.clr-color {color: #fff;border-color: #777;background-color: #555 }.clr-dark input.clr-color:focus {border-color: #1e90ff }.clr-dark .clr-preview:after {box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.5) }.clr-dark .clr-alpha, .clr-dark .clr-alpha div, .clr-dark .clr-preview:before, .clr-dark .clr-swatches button {background-image: repeating-linear-gradient(45deg,#666 25%,transparent 0,transparent 75%,#888 0,#888),repeating-linear-gradient(45deg,#888 25%,#444 0,#444 75%,#888 0,#888) }.clr-picker.clr-polaroid {border-radius: 6px;box-shadow: 0 0 5px rgba(0,0,0,.1),0 5px 30px rgba(0,0,0,.2) }.clr-picker.clr-polaroid:before {content: "";display: block;position: absolute;width: 16px;height: 10px;left: 20px;top: -10px;border: solid transparent;border-bottom: solid;border-width: 0 8px 10px;box-sizing: border-box;color: #fff;filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));pointer-events: none }.clr-picker.clr-polaroid.clr-dark:before {color: #444 }.clr-picker.clr-polaroid.clr-left:before {left: auto;right: 20px }.clr-picker.clr-polaroid.clr-top:before {top: auto;bottom: -10px;transform: rotate(180deg) }.clr-polaroid .clr-gradient {width: calc(100% - 20px);height: 120px;margin: 10px;border-radius: 3px }.clr-polaroid .clr-alpha, .clr-polaroid .clr-hue {width: calc(100% - 30px);height: 10px;margin: 6px 15px;border-radius: 5px }.clr-polaroid .clr-alpha div, .clr-polaroid .clr-hue div {box-shadow: 0 0 5px rgba(0,0,0,.2) }.clr-polaroid .clr-format {width: calc(100% - 20px);margin: 0 10px 15px }.clr-polaroid .clr-swatches {width: calc(100% - 12px);margin: 0 6px }.clr-polaroid .clr-swatches div {padding-bottom: 10px }.clr-polaroid .clr-swatches button {width: 22px;height: 22px }.clr-polaroid input.clr-color {width: calc(100% - 60px);margin: 10px 10px 15px auto }.clr-polaroid .clr-clear {margin: 0 10px 15px }.clr-polaroid .clr-close {margin: 0 10px 15px auto }.clr-polaroid .clr-preview {margin: 10px 0 15px 10px }.clr-picker.clr-large {width: 275px }.clr-large .clr-gradient {height: 150px }.clr-large .clr-swatches button {width: 22px;height: 22px }.clr-picker.clr-pill {width: 390px;padding-left: 180px;box-sizing: border-box }.clr-pill .clr-gradient {position: absolute;width: 180px;height: 100%;left: 0;top: 0;margin-bottom: 0;border-radius: 3px 0 0 3px }.clr-pill .clr-hue {margin-top: 20px }