:root{--main-hue:210;--color-900:hsl(var(--main-hue), 80%, 22%);--color-800:hsl(var(--main-hue), 70%, 31%);--color-700:hsl(var(--main-hue), 64%, 43%);--color-600:hsl(var(--main-hue), 58%, 53%);--color-500:hsl(var(--main-hue), 57%, 63%);--color-400:hsl(var(--main-hue), 58%, 73%);--color-300:hsl(var(--main-hue), 64%, 83%);--color-200:hsl(var(--main-hue), 72%, 92%);--color-100:hsl(var(--main-hue), 85%, 97%);--background:#f2f2f2}
.colors{width:100%;display:flex}
.colors .left{flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.colors .right{margin-left:30px;flex-grow:1}
.colors .color-bg{width:40px;height:40px;border-radius:50%;background-color:hsl(var(--main-hue),90%,50%)}
.colors .slider-wrapper{width:100%;position:relative;display:flex;justify-content:center}
#hue-value{font-weight:700;position:absolute;display:none!important}
.colors input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:0 0;cursor:pointer}
.colors input[type=range]::-webkit-slider-runnable-track{height:12px;background:linear-gradient(to right,#f20c0c 0,#f2f20c 17%,#0cf20c 33%,#0cf2f2 50%,#0c0cf2 67%,#f20cf2 83%,#f20c0c 100%)}
.colors input[type=range]::-moz-range-track{height:12px;background:linear-gradient(to right,#f20c0c 0,#f2f20c 17%,#0cf20c 33%,#0cf2f2 50%,#0c0cf2 67%,#f20cf2 83%,#f20c0c 100%);border-radius:.2rem}
.colors input[type=range]::-webkit-slider-thumb{width:14px;height:14px;border:0 solid var(--color-900);border-radius:50%;-webkit-appearance:none;appearance:none;margin-top:-2px;background-color:#fff;box-shadow:0 1px 4px 0 rgba(0,0,0,.37)}
.colors input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0 solid var(--color-700);border-radius:50%;background-color:#fff}
.colors input[type=range]:focus{outline:0}
.colors input[type=range]:focus::-webkit-slider-thumb{border:1px solid #222;outline:3px solid #222;outline-offset:.2rem}
.colors input[type=range]:focus::-moz-range-thumb{border:1px solid #222;outline:3px solid #222;outline-offset:.2rem}
.color-palette{margin-top:20px;width:100%;display:flex;justify-content:space-between;text-align:center;align-items:center}
.color-palette .item{padding:0 .5px;flex-grow:1}
.color-palette .item.active .color-swatch{height:22px}
.color-swatch{height:12px}
.color-swatch-name{font-weight:600;color:#222;display:none!important}
.color-900{background-color:var(--color-900)}
.color-800{background-color:var(--color-800)}
.color-700{background-color:var(--color-700)}
.color-600{background-color:var(--color-600)}
.color-500{background-color:var(--color-500)}
.color-400{background-color:var(--color-400)}
.color-300{background-color:var(--color-300)}
.color-200{background-color:var(--color-200)}
.color-100{background-color:var(--color-100)}