.clr-picker {
   display: none;
   flex-wrap: wrap;
   position: absolute;
   width: 200px;
   z-index: 1000;
   border-radius: 10px;
   background-color: #fff;
   justify-content: space-between;
   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: 8px;
}

.clr-picker input[type="range"]::-webkit-slider-thumb {
   width: 8px;
   height: 8px;
   -webkit-appearance: none;
}

.clr-picker input[type="range"]::-moz-range-track {
   width: 100%;
   height: 8px;
   border: 0;
}

.clr-picker input[type="range"]::-moz-range-thumb {
   width: 8px;
   height: 8px;
   border: 0;
}

.clr-hue {
   background-image: linear-gradient(toright,#f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
}

.clr-hue,
.clr-alpha {
   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-hue input,
.clr-alpha input {
   position: absolute;
   width: calc(100% + 16px);
   height: 16px;
   left: -8px;
   top: -4px;
   margin: 0;
   background-color: transparent;
   opacity: 0;
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
}

.clr-hue div,
.clr-alpha 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;
   padding: 4px 0;
   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;
   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 0;
   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: none;
   border: 1px solid #1e90ff;
}

.clr-clear {
   display: none;
   order: 2;
   height: 24px;
   margin: 0 20px 20px auto;
   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-preview {
   position: relative;
   width: 32px;
   height: 32px;
   margin: 15px 0 20px 20px;
   border: 0;
   border-radius: 50%;
   overflow: hidden;
   cursor: pointer;

}

.clr-preview:before,
.clr-preview:after {
   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-marker,
.clr-hue div,
.clr-alpha div,
.clr-color {
   box-sizing: border-box;
}

.clr-field {
   display: inline-block;
   position: relative;
   color: transparent;
   border: none;
   outline: none;
   background-color: currentColor;
   border-radius: .3rem;
}

.clr-field button {
   position: absolute;
   width: 30px;
   height: 100%;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   border: 0;
   color: inherit;
   text-indent: -1000px;
   white-space: nowrap;
   overflow: hidden;
   pointer-events: none;
   display: none;
}

.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-swatches button,
.clr-preview:before,
.clr-field 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: none;
}

.clr-keyboard-nav .clr-marker:focus,
.clr-keyboard-nav .clr-hue input:focus + div,
.clr-keyboard-nav .clr-alpha input:focus + div,
.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-gradient,
.clr-picker[data-minimal="true"] .clr-hue,
.clr-picker[data-minimal="true"] .clr-alpha,
.clr-picker[data-minimal="true"] .clr-color,
.clr-picker[data-minimal="true"] .clr-preview {
   display: none;
}

/** Dark theme **/

.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-swatches button,
.clr-dark .clr-preview:before {
   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);
}

/** Polaroid theme **/

.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-hue,
.clr-polaroid .clr-alpha {
   width: calc(100% - 30px);
   height: 10px;
   margin: 6px 15px;
   border-radius: 5px;
}

.clr-polaroid .clr-hue div,
.clr-polaroid .clr-alpha 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 0;
}

.clr-polaroid .clr-clear {
   margin: 0 10px 15px auto;
}

.clr-polaroid .clr-preview {
   margin: 10px 0 15px 10px;
}

/** Large theme **/

.clr-picker.clr-large {
   width: 275px;
}

.clr-large .clr-gradient {
   height: 150px;
}

.clr-large .clr-swatches button {
   width: 22px;
   height: 22px;
   content-visibility: hidden;
}