.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-picker[data-inline=true] {
 position: relative;
}

.clr-gradient {
 position: relative;
 width: 100%;
 height: 100px;
 margin-bottom: 15px;
 border-radius: 3px 3px 0 0;
 background-image: linear-gradient(rgba(0,0,0,0),#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(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%);
}

.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,rgba(0,0,0,0),currentColor);
}

.clr-alpha input[type=range],.clr-hue input[type=range] {
 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 {
 position: absolute;
 width: 16px;
 height: 16px;
 left: 0;
 top: 50%;
 margin-left: -8px;
 transform: translateY(-50%);
 border: 2px solid #fff;
 border-radius: 50%;
 background-color: currentColor;
 box-shadow: 0 0 1px #888;
 pointer-events: none;
}

.clr-alpha div:before {
 content: '';
 position: absolute;
 height: 100%;
 width: 100%;
 left: 0;
 top: 0;
 border-radius: 50%;
 background-color: currentColor;
}

.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: initial;
 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 4px;
 padding: 0;
 border: 0;
 border-radius: 50%;
 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: #444;
 background-color: #fff;
 font-family: sans-serif;
 font-size: 14px;
 text-align: center;
 box-shadow: none;
}

input.clr-color:focus {
 outline: 0;
 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: 12px;
 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 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);
 background-position: 0 0,4px 4px;
 background-size: 8px 8px;
}

.clr-marker:focus {
 outline: 0;
}

.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: 0;
 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: #444;
}

.clr-dark .clr-segmented {
 border-color: #777;
}

.clr-dark .clr-swatches button:after {
 box-shadow: inset 0 0 0 1px rgba(255,255,255,.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 rgba(255,255,255,.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 25%,transparent 75%,#888 75%,#888),repeating-linear-gradient(45deg,#888 25%,#444 25%,#444 75%,#888 75%,#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-width: 0 8px 10px 8px;
 border-bottom-color: currentColor;
 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: rotateZ(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 10px;
}

.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: 380px;
 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;
}