/* ======================== */
/* BOOTSTRAP BACKGROUND COLORS */
/* ======================== */

/* Theme Color Backgrounds */
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(13, 110, 253, var(--bs-bg-opacity)) !important;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(108, 117, 125, var(--bs-bg-opacity)) !important;
}

.bg-success {
    --bs-bg-opacity: 1;
    background-color: rgba(25, 135, 84, var(--bs-bg-opacity)) !important;
}

.bg-danger {
    --bs-bg-opacity: 1;
    background-color: rgba(220, 53, 69, var(--bs-bg-opacity)) !important;
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(255, 193, 7, var(--bs-bg-opacity)) !important;
}

.bg-info {
    --bs-bg-opacity: 1;
    background-color: rgba(13, 202, 240, var(--bs-bg-opacity)) !important;
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(248, 249, 250, var(--bs-bg-opacity)) !important;
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(33, 37, 41, var(--bs-bg-opacity)) !important;
}

/* Custom Color - Indigo */
.bg-indigo {
    --bs-bg-opacity: 1;
    background-color: rgba(102, 16, 242, var(--bs-bg-opacity)) !important;
}

.bg-purple {
    --bs-bg-opacity: 1;
    background-color: rgba(111, 66, 193, var(--bs-bg-opacity)) !important;
}

/* ======================== */
/* SUBTLE BACKGROUNDS */
/* ======================== */
.bg-primary-subtle {
    background-color: #cfe2ff !important;
}

.bg-secondary-subtle {
    background-color: #e2e3e5 !important;
}

.bg-success-subtle {
    background-color: #d1e7dd !important;
}

.bg-danger-subtle {
    background-color: #f8d7da !important;
}

.bg-warning-subtle {
    background-color: #fff3cd !important;
}

.bg-info-subtle {
    background-color: #cff4fc !important;
}

.bg-light-subtle {
    background-color: #fcfcfd !important;
}

.bg-dark-subtle {
    background-color: #ced4da !important;
}

.bg-indigo-subtle {
    background-color: #D0CCFF !important;
}

.bg-purple-subtle {
    background-color: #e6d9f7 !important;
}

/* ======================== */
/* BODY BACKGROUNDS */
/* ======================== */
.bg-body {
    --bs-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--bs-bg-opacity)) !important;
}

.bg-body-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(233, 236, 239, var(--bs-bg-opacity)) !important;
}

.bg-body-tertiary {
    --bs-bg-opacity: 1;
    background-color: rgba(248, 249, 250, var(--bs-bg-opacity)) !important;
}

/* ======================== */
/* GRAYSCALE BACKGROUNDS */
/* ======================== */
.bg-white {
    --bs-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--bs-bg-opacity)) !important;
}

.bg-black {
    --bs-bg-opacity: 1;
    background-color: rgba(0, 0, 0, var(--bs-bg-opacity)) !important;
}

.bg-transparent {
    --bs-bg-opacity: 1;
    background-color: transparent !important;
}

/* ======================== */
/* BACKGROUND OPACITY */
/* ======================== */
.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
    --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
    --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
    --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
    --bs-bg-opacity: 1;
}

/* ======================== */
/* BACKGROUND GRADIENT */
/* ======================== */
.bg-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}

/* ======================== */
/* ADDITIONAL COLORS */
/* ======================== */
.bg-blue {
    --bs-bg-opacity: 1;
    background-color: rgba(13, 110, 253, var(--bs-bg-opacity)) !important;
}

.bg-purple {
    --bs-bg-opacity: 1;
    background-color: rgba(111, 66, 193, var(--bs-bg-opacity)) !important;
}

.bg-pink {
    --bs-bg-opacity: 1;
    background-color: rgba(214, 51, 132, var(--bs-bg-opacity)) !important;
}

.bg-red {
    --bs-bg-opacity: 1;
    background-color: rgba(220, 53, 69, var(--bs-bg-opacity)) !important;
}

.bg-orange {
    --bs-bg-opacity: 1;
    background-color: rgba(253, 126, 20, var(--bs-bg-opacity)) !important;
}

.bg-yellow {
    --bs-bg-opacity: 1;
    background-color: rgba(255, 193, 7, var(--bs-bg-opacity)) !important;
}

.bg-green {
    --bs-bg-opacity: 1;
    background-color: rgba(25, 135, 84, var(--bs-bg-opacity)) !important;
}

.bg-teal {
    --bs-bg-opacity: 1;
    background-color: rgba(32, 201, 151, var(--bs-bg-opacity)) !important;
}

.bg-cyan {
    --bs-bg-opacity: 1;
    background-color: rgba(13, 202, 240, var(--bs-bg-opacity)) !important;
}

/* ======================== */
/* GRAY SHADES */
/* ======================== */
.bg-gray-100 {
    --bs-bg-opacity: 1;
    background-color: rgba(248, 249, 250, var(--bs-bg-opacity)) !important;
}

.bg-gray-200 {
    --bs-bg-opacity: 1;
    background-color: rgba(233, 236, 239, var(--bs-bg-opacity)) !important;
}

.bg-gray-300 {
    --bs-bg-opacity: 1;
    background-color: rgba(222, 226, 230, var(--bs-bg-opacity)) !important;
}

.bg-gray-400 {
    --bs-bg-opacity: 1;
    background-color: rgba(206, 212, 218, var(--bs-bg-opacity)) !important;
}

.bg-gray-500 {
    --bs-bg-opacity: 1;
    background-color: rgba(173, 181, 189, var(--bs-bg-opacity)) !important;
}

.bg-gray-600 {
    --bs-bg-opacity: 1;
    background-color: rgba(108, 117, 125, var(--bs-bg-opacity)) !important;
}

.bg-gray-700 {
    --bs-bg-opacity: 1;
    background-color: rgba(73, 80, 87, var(--bs-bg-opacity)) !important;
}

.bg-gray-800 {
    --bs-bg-opacity: 1;
    background-color: rgba(52, 58, 64, var(--bs-bg-opacity)) !important;
}

.bg-gray-900 {
    --bs-bg-opacity: 1;
    background-color: rgba(33, 37, 41, var(--bs-bg-opacity)) !important;
}