.bg-primary {
    background: var(--mdb-primary) !important;
}

.bg-primary-soft {
    background: var(--mdb-primary-soft) !important;
}

.bg-primary-softer {
    background: var(--mdb-primary-softer) !important;
}

.bg-secondary {
    background: var(--mdb-secondary) !important;
}

.bg-dark {
    background: var(--mdb-dark) !important;
}

.bg-gray {
    background: var(--mdb-gray);
}

.bg-gray-dark {
    background: #f4f4f4;
}

.bg-glass {
    background: hsla(0, 0%, 100%, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Force GPU acceleration */
    /* https://graffino.com/til/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari */
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}

.bg-glass-dark {
    background: hsla(0, 0%, 0%, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Force GPU acceleration */
    /* https://graffino.com/til/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari */
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}

.bg-transparent-shadow {
    background: linear-gradient(153.32deg, rgba(255, 255, 255, .3) -65.62%, rgba(255, 255, 255, .1) 83.28%);
    box-shadow: 0 .25rem 1.5rem -.0625rem rgba(0, 0, 0, .2);
    backdrop-filter: blur(25px);
}

.bg-primary-radial {
    background: radial-gradient(116.18% 118% at 50% 100%,
    rgba(255, 174, 79, 0.10) 0%,
    rgba(255, 174, 79, 0.05) 41.83%,
    rgba(255, 174, 79, 0.07) 82.52%);
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #ffe7b7 0%, var(--mdb-warning) 100%);
}

.bg-gradient-primary-soft {
    background: linear-gradient(135deg, hsl(47, 69%, 95%) 0%, hsl(41, 92%, 91%) 100%);
}