.colorPreview {
    height: 27px;
    width: 50px;
    border-width: 2px;
    border-style: solid;
    border-color: white;
    padding: 2px;
    outline: 2px solid black;
}

/*background-color*/
.bg-blue {
    background-color: var(--bs-blue) !important;
}

.bg-indigo {
    background-color: var(--bs-indigo) !important;
}

.bg-purple {
    background-color: var(--bs-purple) !important;
}

.bg-pink {
    background-color: var(--bs-pink) !important;
}

.bg-red {
    background-color: var(--bs-red) !important;
}

.bg-orange {
    background-color: var(--bs-orange) !important;
}

.bg-yellow {
    background-color: var(--bs-yellow) !important;
}

.bg-green {
    background-color: var(--bs-green) !important;
}

.bg-teal {
    background-color: var(--bs-teal) !important;
}

.bg-cyan {
    background-color: var(--bs-cyan) !important;
}

/*Text-color*/
.text-blue {
    color: var(--bs-blue) !important;
}

.text-indigo {
    color: var(--bs-indigo) !important;
}

.text-purple {
    color: var(--bs-purple) !important;
}

.text-pink {
    color: var(--bs-pink) !important;
}

.text-red {
    color: var(--bs-red) !important;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.text-yellow {
    color: var(--bs-yellow) !important;
}

.text-green {
    color: var(--bs-green) !important;
}

.text-teal {
    color: var(--bs-teal) !important;
}

.text-cyan {
    color: var(--bs-cyan) !important;
}

/*Boarder-color*/
.border-blue {
    border-color: var(--bs-blue) !important;
}

.border-indigo {
    border-color: var(--bs-indigo) !important;
}

.border-purple {
    border-color: var(--bs-purple) !important;
}

.border-pink {
    border-color: var(--bs-pink) !important;
}

.border-red {
    border-color: var(--bs-red) !important;
}

.border-orange {
    border-color: var(--bs-orange) !important;
}

.border-yellow {
    border-color: var(--bs-yellow) !important;
}

.border-green {
    border-color: var(--bs-green) !important;
}

.border-teal {
    border-color: var(--bs-teal) !important;
}

.border-cyan {
    border-color: var(--bs-cyan) !important;
}