.color-picker * {
    box-sizing: border-box;
}

.color-picker input[type="radio"] {
    display: none;
}

.color-picker span:focus {
    border: 1px solid #000;
}

.color-picker span{
    border: 1px solid #919191;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    cursor: pointer;
    margin-bottom: inherit!important;
    line-height: inherit!important;
    transition: transform 0.2s ease-in-out;
}
.color-picker span:hover  {
    transform: scale(1.25);
    border: 1px solid #919191;
}

.span-selected {
    border: 3px solid #919191;
    transform: scale(1.25);
}

.color-picker .red {
    background: #db2828;
}
.color-picker .orange {
    background: #f2711c;
}
.color-picker .yellow {
    background: #f4f480;
}
.color-picker .olive {
    background: #b5cc18;
}
.color-picker .green {
    background: #21ba45;
}
.color-picker .teal {
    background: #00b5ad;
}
.color-picker .blue {
    background: #b9efe5;
}
.color-picker .violet {
    background: #6435c9;
}
.color-picker .purple {
    background: #a333c8;
}
.color-picker .pink {
    background: #e03997;
}
.color-picker .white {
    background: #ffffff;
}

.color-picker .black {
    background: #000;
}