.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-group input{background-color:#fff}
.R button{color:#ff7979;border:1px solid #ff7979 !important}
.R button:hover{color:#fff;background-color:#ff7979}
.G .input-group span,
.G .input-group input{border:1px solid #55ef9c}
.G .input-group input{background-color:#fff}
.G button{color:#55ef9c;border:1px solid #55ef9c !important}
.G button:hover{color:#fff;background-color:#55ef9c}
.B .input-group span,
.B .input-group input{border:1px solid #5652c3}
.B .input-group input{background-color:#fff}
.B button{color:#5652c3;border:1px solid #5652c3 !important}
.B button:hover{color:#fff;background-color:#5652c3}
.RGB .input-group input{background-color:#fff}
.RGB button{border:1px solid #ced4da}
.RGB button:hover{background-color:#ced4da}
.input{max-width:280px;margin-left:auto;margin-right:auto}
.input span,
.input input,
.input button{background:0;font-weight:500;border:1px solid #ced4da}
.input span{color:#6c757d}
.input button{color:#ff7979}
.input 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)}