.r-letter{background-color:#ff7979;color:#fff;font-weight:500}
.g-letter{background-color:#55ef9c;color:#fff;font-weight:500}
.b-letter{background-color:#5652c3;color:#fff;font-weight:500}
.R .input-group span,
.R .input-group input{border:1px solid #ff7979}
.R input[type=range]::-webkit-slider-thumb{background:#ff7979}
.R input[type=range]::-moz-range-thumb{background:#ff7979}
.R input[type=range]::-ms-thumb{background:#ff7979}
.G .input-group span,
.G .input-group input{border:1px solid #55ef9c}
.G input[type=range]::-webkit-slider-thumb{background:#55ef9c}
.G input[type=range]::-moz-range-thumb{background:#55ef9c}
.G input[type=range]::-ms-thumb{background:#55ef9c}
.B .input-group span,
.B .input-group input{border:1px solid #5652c3}
.B input[type=range]::-webkit-slider-thumb{background:#5652c3}
.B input[type=range]::-moz-range-thumb{background:#5652c3}
.B input[type=range]::-ms-thumb{background:#5652c3}
.result{max-width:280px;margin-left:auto;margin-right:auto}
.result span,
.result input,
.result button{background:0;font-weight:500;border:1px solid #ced4da}
.result span{color:#6c757d}
.result button{color:#ff7979}
.result button:hover{color:#fff;background-color:#ff7979}
.presets a{text-decoration:none;color:#3f3744;display:block;border:1px solid #eaeaea;border-radius:5px;overflow:hidden;margin-bottom:20px;text-align:center}
.presets a .color-preset{width:100%;height:80px;transition:all 0.1s ease-in-out;-moz-transition:-moz-transform 0.1s ease-in-out;-webkit-transition:-webkit-transform 0.1s ease-in-out;margin-bottom:5px;-webkit-box-shadow:0px 0px 3px 0px rgba(0,0,0,0.1);box-shadow:0px 0px 3px 0px rgba(0,0,0,0.1)}
.presets a p{margin-bottom:5px}
.presets a:hover .color-preset{transform:scale(1.05)}