:root {
    --app-bg-primary: var(--app-primary);
    --app-bg-primary-soft: var(--app-primary-soft);
    --app-bg-primary-dark: var(--app-primary-dark);

    --app-bg-secondary: var(--app-secondary);
    --app-bg-secondary-soft: var(--app-secondary-soft);
    --app-bg-secondary-dark: var(--app-secondary-dark);

    --app-bg-accent: var(--app-accent);
    --app-bg-accent-soft: var(--app-accent-soft);
    --app-bg-accent-dark: var(--app-accent-dark);

    --app-bg-success: var(--app-success);
    --app-bg-success-soft: var(--app-success-soft);
    --app-bg-success-dark: var(--app-success-dark);

    --app-bg-warning: var(--app-warning);
    --app-bg-warning-soft: var(--app-warning-soft);
    --app-bg-warning-dark: var(--app-warning-dark);

    --app-bg-danger: var(--app-danger);
    --app-bg-danger-soft: var(--app-danger-soft);
    --app-bg-danger-dark: var(--app-danger-dark);

    --app-bg-layer-one: var(--app-layer-one);
    --app-bg-layer-two: var(--app-layer-two);
    --app-bg-layer-three: var(--app-layer-three);
    --app-bg-layer-four: var(--app-layer-four);

    --app-bg-alt-layer-one: var(--app-alt-layer-one);
    --app-bg-alt-layer-two: var(--app-alt-layer-two);
    --app-bg-alt-layer-three: var(--app-alt-layer-three);
    --app-bg-alt-layer-four: var(--app-alt-layer-four);

    --app-bg-card-header: var(--app-card-header);

    --app-bg-side-navigation: var(--app-side-navigation-bg-color);

    --app-bg-top-navigation: var(--app-top-navigation-bg-color);

    --app-bg-footer: var(--app-footer-bg-color);

    --app-bg-table-row: var(--app-table-row-color);
    --app-bg-table-row-alt: var(--app-table-row-alt-color);
    --app-bg-table-row-hover: var(--app-table-row-hover-color);
}

.bg-app-primary, .bg-app-primary-hover:hover {
    background-color: var(--app-bg-primary) !important;
}

.bg-app-primary-soft, .bg-app-primary-soft-hover:hover {
    background-color: var(--app-bg-primary-soft) !important;
}

.bg-app-primary-dark, .bg-app-primary-dark-hover:hover {
    background-color: var(--app-bg-primary-dark) !important;
}

.bg-app-primary-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-primary) 10%, transparent) !important;
}

.bg-app-primary-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-primary) 25%, transparent) !important;
}

.bg-app-primary-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-primary) 50%, transparent) !important;
}

.bg-app-primary-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-primary) 75%, transparent) !important;
}

.bg-app-primary-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-primary) 90%, transparent) !important;
}

.bg-app-secondary, .bg-app-secondary-hover:hover {
    background-color: var(--app-bg-secondary) !important;
}

.bg-app-secondary-soft, .bg-app-secondary-soft-hover:hover {
    background-color: var(--app-bg-secondary-soft) !important;
}

.bg-app-secondary-dark, .bg-app-secondary-dark-hover:hover {
    background-color: var(--app-bg-secondary-dark) !important;
}

.bg-app-secondary-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-secondary) 10%, transparent) !important;
}

.bg-app-secondary-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-secondary) 25%, transparent) !important;
}

.bg-app-secondary-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-secondary) 50%, transparent) !important;
}

.bg-app-secondary-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-secondary) 75%, transparent) !important;
}

.bg-app-secondary-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-secondary) 90%, transparent) !important;
}

.bg-app-accent, .bg-app-accent-hover:hover {
    background-color: var(--app-bg-accent) !important;
}

.bg-app-accent-soft, .bg-app-accent-soft-hover:hover {
    background-color: var(--app-bg-accent-soft) !important;
}

.bg-app-accent-dark, .bg-app-accent-dark-hover:hover {
    background-color: var(--app-bg-accent-dark) !important;
}

.bg-app-accent-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-accent) 10%, transparent) !important;
}

.bg-app-accent-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-accent) 25%, transparent) !important;
}

.bg-app-accent-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-accent) 50%, transparent) !important;
}

.bg-app-accent-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-accent) 75%, transparent) !important;
}

.bg-app-accent-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-accent) 90%, transparent) !important;
}

.bg-app-success, .bg-app-success-hover:hover {
    background-color: var(--app-bg-success) !important;
}

.bg-app-success-soft, .bg-app-success-soft-hover:hover {
    background-color: var(--app-bg-success-soft) !important;
}

.bg-app-success-dark, .bg-app-success-dark-hover:hover {
    background-color: var(--app-bg-success-dark) !important;
}

.bg-app-success-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-success) 10%, transparent) !important;
}

.bg-app-success-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-success) 25%, transparent) !important;
}

.bg-app-success-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-success) 50%, transparent) !important;
}

.bg-app-success-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-success) 75%, transparent) !important;
}

.bg-app-success-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-success) 90%, transparent) !important;
}

.bg-app-warning, .bg-app-warning-hover:hover {
    background-color: var(--app-bg-warning) !important;
}

.bg-app-warning-soft, .bg-app-warning-soft-hover:hover {
    background-color: var(--app-bg-warning-soft) !important;
}

.bg-app-warning-dark, .bg-app-warning-dark-hover:hover {
    background-color: var(--app-bg-warning-dark) !important;
}

.bg-app-warning-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-warning) 10%, transparent) !important;
}

.bg-app-warning-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-warning) 25%, transparent) !important;
}

.bg-app-warning-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-warning) 50%, transparent) !important;
}

.bg-app-warning-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-warning) 75%, transparent) !important;
}

.bg-app-warning-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-warning) 90%, transparent) !important;
}

.bg-app-danger, .bg-app-danger-hover:hover {
    background-color: var(--app-bg-danger) !important;
}

.bg-app-danger-soft, .bg-app-danger-soft-hover:hover {
    background-color: var(--app-bg-danger-soft) !important;
}

.bg-app-danger-dark, .bg-app-danger-dark-hover:hover {
    background-color: var(--app-bg-danger-dark) !important;
}

.bg-app-danger-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-danger) 10%, transparent) !important;
}

.bg-app-danger-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-danger) 25%, transparent) !important;
}

.bg-app-danger-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-danger) 50%, transparent) !important;
}

.bg-app-danger-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-danger) 75%, transparent) !important;
}

.bg-app-danger-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-danger) 90%, transparent) !important;
}

.bg-app-layer-one, .bg-app-layer-one-hover:hover {
    background-color: var(--app-bg-layer-one) !important;
}

.bg-app-layer-two, .bg-app-layer-two-hover:hover {
    background-color: var(--app-bg-layer-two) !important;
}

.bg-app-layer-three, .bg-app-layer-three-hover:hover {
    background-color: var(--app-bg-layer-three) !important;
}

.bg-app-layer-four, .bg-app-layer-four-hover:hover {
    background-color: var(--app-bg-layer-four) !important;
}

.bg-app-layer-one-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-layer-one) 10%, transparent) !important;
}

.bg-app-layer-one-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-layer-one) 25%, transparent) !important;
}

.bg-app-layer-one-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-layer-one) 50%, transparent) !important;
}

.bg-app-layer-one-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-layer-one) 75%, transparent) !important;
}

.bg-app-layer-one-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-layer-one) 90%, transparent) !important;
}

.bg-app-layer-two-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-layer-two) 10%, transparent) !important;
}

.bg-app-layer-two-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-layer-two) 25%, transparent) !important;
}

.bg-app-layer-two-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-layer-two) 50%, transparent) !important;
}

.bg-app-layer-two-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-layer-two) 75%, transparent) !important;
}

.bg-app-layer-two-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-layer-two) 90%, transparent) !important;
}

.bg-app-layer-three-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-layer-three) 10%, transparent) !important;
}

.bg-app-layer-three-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-layer-three) 25%, transparent) !important;
}

.bg-app-layer-three-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-layer-three) 50%, transparent) !important;
}

.bg-app-layer-three-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-layer-three) 75%, transparent) !important;
}

.bg-app-layer-three-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-layer-three) 90%, transparent) !important;
}

.bg-app-layer-four-opacity-10 {
    background-color: color-mix(in srgb, var(--app-bg-layer-four) 10%, transparent) !important;
}

.bg-app-layer-four-opacity-25 {
    background-color: color-mix(in srgb, var(--app-bg-layer-four) 25%, transparent) !important;
}

.bg-app-layer-four-opacity-50 {
    background-color: color-mix(in srgb, var(--app-bg-layer-four) 50%, transparent) !important;
}

.bg-app-layer-four-opacity-75 {
    background-color: color-mix(in srgb, var(--app-bg-layer-four) 75%, transparent) !important;
}

.bg-app-layer-four-opacity-90 {
    background-color: color-mix(in srgb, var(--app-bg-layer-four) 90%, transparent) !important;
}

.bg-app-alt-layer-one, .bg-app-alt-layer-one-hover:hover {
    background-color: var(--app-bg-alt-layer-one) !important;
    color: var(--app-default-alt-text-color) !important;
}

.bg-app-alt-layer-two, .bg-app-alt-layer-two-hover:hover {
    background-color: var(--app-bg-alt-layer-two) !important;
    color: var(--app-default-alt-text-color) !important;
}

.bg-app-alt-layer-three, .bg-app-alt-layer-three-hover:hover {
    background-color: var(--app-bg-alt-layer-three) !important;
    color: var(--app-default-alt-text-color) !important;
}

.bg-app-alt-layer-four, .bg-app-alt-layer-four-hover:hover {
    background-color: var(--app-bg-alt-layer-four) !important;
}

.bg-app-card-header {
    background-color: var(--app-bg-card-header) !important;
}

.bg-app-side-navigation, .bg-app-side-navigation-hover:hover {
    background-color: var(--app-bg-side-navigation) !important;
}

.bg-app-top-navigation, .bg-app-top-navigation-hover:hover {
    background-color: var(--app-bg-top-navigation) !important;
}

.bg-app-footer, .bg-app-footer-hover:hover {
    background-color: var(--app-bg-footer) !important;
}

.bg-app-table-row, .bg-app-table-row-hover:hover {
    background-color: var(--app-bg-table-row) !important;
}

.bg-app-table-row-alt, .bg-app-table-row-alt-hover:hover {
    background-color: var(--app-bg-table-row-alt) !important;
    color: var(--app-default-alt-text-color) !important;
}

.bg-app-table-row-hover, .bg-app-table-row-hover:hover {
    background-color: var(--app-bg-table-row-hover) !important;
}