/* Base Background Color Classes */
.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 Background Color Classes */
.text-bg-blue {
    color: #fff !important;
    background-color: var(--bs-blue) !important;
}

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

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

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

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

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

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

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

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

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


/* Hover and Focus States */
a.text-bg-blue:hover, a.text-bg-blue:focus,
button.text-bg-blue:hover, button.text-bg-blue:focus {
    color: #fff !important;
    background-color: #0a58ca !important;
}

a.text-bg-indigo:hover, a.text-bg-indigo:focus,
button.text-bg-indigo:hover, button.text-bg-indigo:focus {
    color: #fff !important;
    background-color: #4f46e5 !important;
}

a.text-bg-purple:hover, a.text-bg-purple:focus,
button.text-bg-purple:hover, button.text-bg-purple:focus {
    color: #fff !important;
    background-color: #8540f5 !important;
}

a.text-bg-pink:hover, a.text-bg-pink:focus,
button.text-bg-pink:hover, button.text-bg-pink:focus {
    color: #fff !important;
    background-color: #d63384 !important;
}

a.text-bg-red:hover, a.text-bg-red:focus,
button.text-bg-red:hover, button.text-bg-red:focus {
    color: #fff !important;
    background-color: #b02a37 !important;
}

a.text-bg-orange:hover, a.text-bg-orange:focus,
button.text-bg-orange:hover, button.text-bg-orange:focus {
    color: #000 !important;
    background-color: #fd7e14 !important;
}

a.text-bg-yellow:hover, a.text-bg-yellow:focus,
button.text-bg-yellow:hover, button.text-bg-yellow:focus {
    color: #000 !important;
    background-color: #ffc720 !important;
}

a.text-bg-green:hover, a.text-bg-green:focus,
button.text-bg-green:hover, button.text-bg-green:focus {
    color: #fff !important;
    background-color: #146c43 !important;
}

a.text-bg-teal:hover, a.text-bg-teal:focus,
button.text-bg-teal:hover, button.text-bg-teal:focus {
    color: #fff !important;
    background-color: #13795b !important;
}

a.text-bg-cyan:hover, a.text-bg-cyan:focus,
button.text-bg-cyan:hover, button.text-bg-cyan:focus {
    color: #000 !important;
    background-color: #0dcaf0 !important;
}

/* Text color classes */
.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;
}
/* Border color classes */
.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;
}