.bg-core-hsbc-red {
  background: var(--group-hsbc-colour-core-hsbc-red) !important;
}

.bg-core-black {
  background: var(--group-hsbc-colour-core-black) !important;
}

.bg-core-white {
  background: var(--group-hsbc-colour-core-white) !important;
}

.bg-complimentary-red-1 {
  background: var(--group-hsbc-colour-complimentary-red-1) !important;
}

.bg-complimentary-red-2 {
  background: var(--group-hsbc-colour-complimentary-red-2) !important;
}

.bg-complimentary-red-3 {
  background: var(--group-hsbc-colour-complimentary-red-3) !important;
}

.bg-neutral-white {
  background: var(--group-hsbc-colour-neutral-white) !important;
}

.bg-neutral-grey-1 {
  background: var(--group-hsbc-colour-neutral-grey-1) !important;
}

.bg-neutral-grey-2 {
  background: var(--group-hsbc-colour-neutral-grey-2) !important;
}

.bg-neutral-grey-3 {
  background: var(--group-hsbc-colour-neutral-grey-3) !important;
}

.bg-neutral-grey-4 {
  background: var(--group-hsbc-colour-neutral-grey-4) !important;
}

.bg-neutral-grey-5 {
  background: var(--group-hsbc-colour-neutral-grey-5) !important;
}

.bg-neutral-black {
  background: var(--group-hsbc-colour-neutral-black) !important;
}

.bg-neutral-dark-grey-6 {
  background: var(--group-hsbc-colour-neutral-dark-grey-6) !important;
}

.bg-neutral-dark-grey-7 {
  background: var(--group-hsbc-colour-neutral-dark-grey-7) !important;
}

.bg-neutral-dark-grey-8 {
  background: var(--group-hsbc-colour-neutral-dark-grey-8) !important;
}

.bg-neutral-dark-new-grey {
  background: var(--group-hsbc-colour-neutral-dark-new-grey) !important;
}

.bg-illustration-blue-1 {
  background: var(--group-hsbc-colour-illustration-blue-1) !important;
}

.bg-illustration-blue-2 {
  background: var(--group-hsbc-colour-illustration-blue-2) !important;
}

.bg-illustration-blue-3 {
  background: var(--group-hsbc-colour-illustration-blue-3) !important;
}

.bg-illustration-blue-4 {
  background: var(--group-hsbc-colour-illustration-blue-4) !important;
}

.bg-illustration-blue-5 {
  background: var(--group-hsbc-colour-illustration-blue-5) !important;
}

.bg-illustration-blue-6 {
  background: var(--group-hsbc-colour-illustration-blue-6) !important;
}

.bg-illustration-blue-7 {
  background: var(--group-hsbc-colour-illustration-blue-7) !important;
}

.bg-illustration-blue-8 {
  background: var(--group-hsbc-colour-illustration-blue-8) !important;
}

.bg-illustration-green-1 {
  background: var(--group-hsbc-colour-illustration-green-1) !important;
}

.bg-illustration-green-2 {
  background: var(--group-hsbc-colour-illustration-green-2) !important;
}

.bg-illustration-green-3 {
  background: var(--group-hsbc-colour-illustration-green-3) !important;
}

.bg-illustration-green-4 {
  background: var(--group-hsbc-colour-illustration-green-4) !important;
}

.bg-illustration-green-5 {
  background: var(--group-hsbc-colour-illustration-green-5) !important;
}

.bg-illustration-green-6 {
  background: var(--group-hsbc-colour-illustration-green-6) !important;
}

.bg-illustration-green-7 {
  background: var(--group-hsbc-colour-illustration-green-7) !important;
}

.bg-illustration-green-8 {
  background: var(--group-hsbc-colour-illustration-green-8) !important;
}

.bg-illustration-pink-1 {
  background: var(--group-hsbc-colour-illustration-pink-1) !important;
}

.bg-illustration-pink-2 {
  background: var(--group-hsbc-colour-illustration-pink-2) !important;
}

.bg-illustration-pink-3 {
  background: var(--group-hsbc-colour-illustration-pink-3) !important;
}

.bg-illustration-pink-4 {
  background: var(--group-hsbc-colour-illustration-pink-4) !important;
}

.bg-illustration-pink-5 {
  background: var(--group-hsbc-colour-illustration-pink-5) !important;
}

.bg-illustration-pink-6 {
  background: var(--group-hsbc-colour-illustration-pink-6) !important;
}

.bg-illustration-pink-7 {
  background: var(--group-hsbc-colour-illustration-pink-7) !important;
}

.bg-illustration-pink-8 {
  background: var(--group-hsbc-colour-illustration-pink-8) !important;
}

.bg-illustration-yellow-1 {
  background: var(--group-hsbc-colour-illustration-yellow-1) !important;
}

.bg-illustration-yellow-2 {
  background: var(--group-hsbc-colour-illustration-yellow-2) !important;
}

.bg-illustration-yellow-3 {
  background: var(--group-hsbc-colour-illustration-yellow-3) !important;
}

.bg-illustration-yellow-4 {
  background: var(--group-hsbc-colour-illustration-yellow-4) !important;
}

.bg-illustration-yellow-5 {
  background: var(--group-hsbc-colour-illustration-yellow-5) !important;
}

.bg-illustration-yellow-6 {
  background: var(--group-hsbc-colour-illustration-yellow-6) !important;
}

.bg-illustration-yellow-7 {
  background: var(--group-hsbc-colour-illustration-yellow-7) !important;
}

.bg-illustration-yellow-8 {
  background: var(--group-hsbc-colour-illustration-yellow-8) !important;
}

.bg-illustration-orange-1 {
  background: var(--group-hsbc-colour-illustration-orange-1) !important;
}

.bg-illustration-orange-2 {
  background: var(--group-hsbc-colour-illustration-orange-2) !important;
}

.bg-illustration-orange-3 {
  background: var(--group-hsbc-colour-illustration-orange-3) !important;
}

.bg-illustration-orange-4 {
  background: var(--group-hsbc-colour-illustration-orange-4) !important;
}

.bg-illustration-orange-5 {
  background: var(--group-hsbc-colour-illustration-orange-5) !important;
}

.bg-illustration-orange-6 {
  background: var(--group-hsbc-colour-illustration-orange-6) !important;
}

.bg-illustration-orange-7 {
  background: var(--group-hsbc-colour-illustration-orange-7) !important;
}

.bg-illustration-orange-8 {
  background: var(--group-hsbc-colour-illustration-orange-8) !important;
}

.bg-illustration-complimentary-brown-1 {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-1) !important;
}

.bg-illustration-complimentary-brown-2 {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-2) !important;
}

.bg-illustration-complimentary-brown-3 {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-3) !important;
}

.bg-illustration-complimentary-brown-4 {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-4) !important;
}

.bg-illustration-complimentary-brown-5 {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-5) !important;
}

.bg-illustration-complimentary-brown-6 {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-6) !important;
}

.bg-illustration-complimentary-brown-7 {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-7) !important;
}

.bg-illustration-complimentary-brown-8 {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-8) !important;
}

.bg-illustration-complimentary-mid-brown-1 {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-1) !important;
}

.bg-illustration-complimentary-mid-brown-2 {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-2) !important;
}

.bg-illustration-complimentary-mid-brown-3 {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-3) !important;
}

.bg-illustration-complimentary-mid-brown-4 {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-4) !important;
}

.bg-illustration-complimentary-mid-brown-5 {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-5) !important;
}

.bg-illustration-complimentary-mid-brown-6 {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-6) !important;
}

.bg-illustration-complimentary-mid-brown-7 {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-7) !important;
}

.bg-illustration-complimentary-mid-brown-8 {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-8) !important;
}

.bg-illustration-complimentary-tan-1 {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-1) !important;
}

.bg-illustration-complimentary-tan-2 {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-2) !important;
}

.bg-illustration-complimentary-tan-3 {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-3) !important;
}

.bg-illustration-complimentary-tan-4 {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-4) !important;
}

.bg-illustration-complimentary-tan-5 {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-5) !important;
}

.bg-illustration-complimentary-tan-6 {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-6) !important;
}

.bg-illustration-complimentary-tan-7 {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-7) !important;
}

.bg-illustration-complimentary-tan-8 {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-8) !important;
}

.bg-illustration-complimentary-cream-1 {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-1) !important;
}

.bg-illustration-complimentary-cream-2 {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-2) !important;
}

.bg-illustration-complimentary-cream-3 {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-3) !important;
}

.bg-illustration-complimentary-cream-4 {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-4) !important;
}

.bg-illustration-complimentary-cream-5 {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-5) !important;
}

.bg-illustration-complimentary-cream-6 {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-6) !important;
}

.bg-illustration-complimentary-cream-7 {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-7) !important;
}

.bg-illustration-complimentary-cream-8 {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-8) !important;
}

.bg-data-vis-blue-1 {
  background: var(--group-hsbc-colour-data-vis-blue-1) !important;
}

.bg-data-vis-blue-2 {
  background: var(--group-hsbc-colour-data-vis-blue-2) !important;
}

.bg-data-vis-blue-3 {
  background: var(--group-hsbc-colour-data-vis-blue-3) !important;
}

.bg-data-vis-blue-4 {
  background: var(--group-hsbc-colour-data-vis-blue-4) !important;
}

.bg-data-vis-purple-1 {
  background: var(--group-hsbc-colour-data-vis-purple-1) !important;
}

.bg-data-vis-purple-2 {
  background: var(--group-hsbc-colour-data-vis-purple-2) !important;
}

.bg-data-vis-purple-3 {
  background: var(--group-hsbc-colour-data-vis-purple-3) !important;
}

.bg-data-vis-purple-4 {
  background: var(--group-hsbc-colour-data-vis-purple-4) !important;
}

.bg-data-vis-pink-1 {
  background: var(--group-hsbc-colour-data-vis-pink-1) !important;
}

.bg-data-vis-pink-2 {
  background: var(--group-hsbc-colour-data-vis-pink-2) !important;
}

.bg-data-vis-pink-3 {
  background: var(--group-hsbc-colour-data-vis-pink-3) !important;
}

.bg-data-vis-pink-4 {
  background: var(--group-hsbc-colour-data-vis-pink-4) !important;
}

.bg-data-vis-orange-1 {
  background: var(--group-hsbc-colour-data-vis-orange-1) !important;
}

.bg-data-vis-orange-2 {
  background: var(--group-hsbc-colour-data-vis-orange-2) !important;
}

.bg-data-vis-orange-3 {
  background: var(--group-hsbc-colour-data-vis-orange-3) !important;
}

.bg-data-vis-orange-4 {
  background: var(--group-hsbc-colour-data-vis-orange-4) !important;
}

.bg-data-vis-green-1 {
  background: var(--group-hsbc-colour-data-vis-green-1) !important;
}

.bg-data-vis-green-2 {
  background: var(--group-hsbc-colour-data-vis-green-2) !important;
}

.bg-data-vis-green-3 {
  background: var(--group-hsbc-colour-data-vis-green-3) !important;
}

.bg-data-vis-green-4 {
  background: var(--group-hsbc-colour-data-vis-green-4) !important;
}

.bg-rag-red {
  background: var(--group-hsbc-colour-rag-red) !important;
}

.bg-rag-red-tint {
  background: var(--group-hsbc-colour-rag-red-tint) !important;
}

.bg-rag-amber {
  background: var(--group-hsbc-colour-rag-amber) !important;
}

.bg-rag-amber-tint {
  background: var(--group-hsbc-colour-rag-amber-tint) !important;
}

.bg-rag-green {
  background: var(--group-hsbc-colour-rag-green) !important;
}

.bg-rag-green-tint {
  background: var(--group-hsbc-colour-rag-green-tint) !important;
}

.bg-rag-blue {
  background: var(--group-hsbc-colour-rag-blue) !important;
}

.bg-rag-blue-tint {
  background: var(--group-hsbc-colour-rag-blue-tint) !important;
}

.bg-rag-dark-red-tint {
  background: var(--group-hsbc-colour-rag-dark-red-tint) !important;
}

.bg-rag-dark-amber-tint {
  background: var(--group-hsbc-colour-rag-dark-amber-tint) !important;
}

.bg-rag-dark-green-tint {
  background: var(--group-hsbc-colour-rag-dark-green-tint) !important;
}

.bg-rag-dark-blue-tint {
  background: var(--group-hsbc-colour-rag-dark-blue-tint) !important;
}

.bg-light-interactive-on-light-surface-primary {
  background: var(--group-light-interactive-on-light-surface-primary) !important;
}

.bg-light-interactive-on-light-surface-primary-hover {
  background: var(--group-light-interactive-on-light-surface-primary-hover) !important;
}

.bg-light-interactive-on-light-surface-primary-pressed {
  background: var(--group-light-interactive-on-light-surface-primary-pressed) !important;
}

.bg-light-interactive-on-light-surface-primary-disabled {
  background: var(--group-light-interactive-on-light-surface-primary-disabled) !important;
}

.bg-light-interactive-on-light-surface-primary-processing {
  background: var(--group-light-interactive-on-light-surface-primary-processing) !important;
}

.bg-light-interactive-on-light-surface-active {
  background: var(--group-light-interactive-on-light-surface-active) !important;
}

.bg-light-interactive-on-light-surface-active-hover {
  background: var(--group-light-interactive-on-light-surface-active-hover) !important;
}

.bg-light-interactive-on-light-surface-active-pressed {
  background: var(--group-light-interactive-on-light-surface-active-pressed) !important;
}

.bg-light-interactive-on-light-surface-brand-1 {
  background: var(--group-light-interactive-on-light-surface-brand-1) !important;
}

.bg-light-interactive-on-light-surface-brand-1-hover {
  background: var(--group-light-interactive-on-light-surface-brand-1-hover) !important;
}

.bg-light-interactive-on-light-surface-brand-1-pressed {
  background: var(--group-light-interactive-on-light-surface-brand-1-pressed) !important;
}

.bg-light-interactive-on-light-surface-brand-1-disabled {
  background: var(--group-light-interactive-on-light-surface-brand-1-disabled) !important;
}

.bg-light-interactive-on-light-surface-brand-1-processing {
  background: var(--group-light-interactive-on-light-surface-brand-1-processing) !important;
}

.bg-light-interactive-on-light-surface-brand-2 {
  background: var(--group-light-interactive-on-light-surface-brand-2) !important;
}

.bg-light-interactive-on-light-surface-brand-2-hover {
  background: var(--group-light-interactive-on-light-surface-brand-2-hover) !important;
}

.bg-light-interactive-on-light-surface-brand-2-pressed {
  background: var(--group-light-interactive-on-light-surface-brand-2-pressed) !important;
}

.bg-light-interactive-on-light-surface-brand-2-disabled {
  background: var(--group-light-interactive-on-light-surface-brand-2-disabled) !important;
}

.bg-light-interactive-on-light-surface-brand-2-processing {
  background: var(--group-light-interactive-on-light-surface-brand-2-processing) !important;
}

.bg-dark-interactive-on-light-surface-primary {
  background: var(--group-dark-interactive-on-light-surface-primary) !important;
}

.bg-dark-interactive-on-light-surface-primary-hover {
  background: var(--group-dark-interactive-on-light-surface-primary-hover) !important;
}

.bg-dark-interactive-on-light-surface-primary-pressed {
  background: var(--group-dark-interactive-on-light-surface-primary-pressed) !important;
}

.bg-dark-interactive-on-light-surface-primary-disabled {
  background: var(--group-dark-interactive-on-light-surface-primary-disabled) !important;
}

.bg-dark-interactive-on-light-surface-primary-processing {
  background: var(--group-dark-interactive-on-light-surface-primary-processing) !important;
}

.bg-dark-interactive-on-light-surface-active {
  background: var(--group-dark-interactive-on-light-surface-active) !important;
}

.bg-dark-interactive-on-light-surface-active-hover {
  background: var(--group-dark-interactive-on-light-surface-active-hover) !important;
}

.bg-dark-interactive-on-light-surface-active-pressed {
  background: var(--group-dark-interactive-on-light-surface-active-pressed) !important;
}

.bg-dark-interactive-on-light-surface-brand-1 {
  background: var(--group-dark-interactive-on-light-surface-brand-1) !important;
}

.bg-dark-interactive-on-light-surface-brand-1-hover {
  background: var(--group-dark-interactive-on-light-surface-brand-1-hover) !important;
}

.bg-dark-interactive-on-light-surface-brand-1-pressed {
  background: var(--group-dark-interactive-on-light-surface-brand-1-pressed) !important;
}

.bg-dark-interactive-on-light-surface-brand-1-disabled {
  background: var(--group-dark-interactive-on-light-surface-brand-1-disabled) !important;
}

.bg-dark-interactive-on-light-surface-brand-1-processing {
  background: var(--group-dark-interactive-on-light-surface-brand-1-processing) !important;
}

.bg-dark-interactive-on-light-surface-brand-2 {
  background: var(--group-dark-interactive-on-light-surface-brand-2) !important;
}

.bg-dark-interactive-on-light-surface-brand-2-hover {
  background: var(--group-dark-interactive-on-light-surface-brand-2-hover) !important;
}

.bg-dark-interactive-on-light-surface-brand-2-pressed {
  background: var(--group-dark-interactive-on-light-surface-brand-2-pressed) !important;
}

.bg-dark-interactive-on-light-surface-brand-2-disabled {
  background: var(--group-dark-interactive-on-light-surface-brand-2-disabled) !important;
}

.bg-dark-interactive-on-light-surface-brand-2-processing {
  background: var(--group-dark-interactive-on-light-surface-brand-2-processing) !important;
}

.bg-light-non-interactive-surface-white {
  background: var(--group-light-non-interactive-surface-white) !important;
}

.bg-light-non-interactive-surface-neutral-1 {
  background: var(--group-light-non-interactive-surface-neutral-1) !important;
}

.bg-light-non-interactive-surface-neutral-2 {
  background: var(--group-light-non-interactive-surface-neutral-2) !important;
}

.bg-light-non-interactive-surface-neutral-3 {
  background: var(--group-light-non-interactive-surface-neutral-3) !important;
}

.bg-light-non-interactive-surface-neutral-4 {
  background: var(--group-light-non-interactive-surface-neutral-4) !important;
}

.bg-light-non-interactive-surface-neutral-5 {
  background: var(--group-light-non-interactive-surface-neutral-5) !important;
}

.bg-light-non-interactive-surface-black {
  background: var(--group-light-non-interactive-surface-black) !important;
}

.bg-light-non-interactive-surface-brand-1 {
  background: var(--group-light-non-interactive-surface-brand-1) !important;
}

.bg-light-non-interactive-surface-brand-2 {
  background: var(--group-light-non-interactive-surface-brand-2) !important;
}

.bg-light-non-interactive-surface-brand-3 {
  background: var(--group-light-non-interactive-surface-brand-3) !important;
}

.bg-light-rag-surface-error-default-1 {
  background: var(--group-light-rag-surface-error-default-1) !important;
}

.bg-light-rag-surface-error-default2 {
  background: var(--group-light-rag-surface-error-default2) !important;
}

.bg-light-rag-surface-warning-default-1 {
  background: var(--group-light-rag-surface-warning-default-1) !important;
}

.bg-light-rag-surface-warning-default2 {
  background: var(--group-light-rag-surface-warning-default2) !important;
}

.bg-light-rag-surface-success-default-1 {
  background: var(--group-light-rag-surface-success-default-1) !important;
}

.bg-light-rag-surface-success-default2 {
  background: var(--group-light-rag-surface-success-default2) !important;
}

.bg-light-rag-surface-information-default-1 {
  background: var(--group-light-rag-surface-information-default-1) !important;
}

.bg-light-rag-surface-information-default2 {
  background: var(--group-light-rag-surface-information-default2) !important;
}

.bg-dark-rag-surface-error-default-1 {
  background: var(--group-dark-rag-surface-error-default-1) !important;
}

.bg-dark-rag-surface-error-default2 {
  background: var(--group-dark-rag-surface-error-default2) !important;
}

.bg-dark-rag-surface-warning-default-1 {
  background: var(--group-dark-rag-surface-warning-default-1) !important;
}

.bg-dark-rag-surface-warning-default2 {
  background: var(--group-dark-rag-surface-warning-default2) !important;
}

.bg-dark-rag-surface-success-default-1 {
  background: var(--group-dark-rag-surface-success-default-1) !important;
}

.bg-dark-rag-surface-success-default2 {
  background: var(--group-dark-rag-surface-success-default2) !important;
}

.bg-dark-rag-surface-information-default-1 {
  background: var(--group-dark-rag-surface-information-default-1) !important;
}

.bg-dark-rag-surface-information-default2 {
  background: var(--group-dark-rag-surface-information-default2) !important;
}

.bg-light-interactive-on-dark-surface-primary {
  background: var(--group-light-interactive-on-dark-surface-primary) !important;
}

.bg-light-interactive-on-dark-surface-primary-hover {
  background: var(--group-light-interactive-on-dark-surface-primary-hover) !important;
}

.bg-light-interactive-on-dark-surface-primary-pressed {
  background: var(--group-light-interactive-on-dark-surface-primary-pressed) !important;
}

.bg-light-interactive-on-dark-surface-primary-disabled {
  background: var(--group-light-interactive-on-dark-surface-primary-disabled) !important;
}

.bg-light-interactive-on-dark-surface-active {
  background: var(--group-light-interactive-on-dark-surface-active) !important;
}

.bg-light-interactive-on-dark-surface-active-hover {
  background: var(--group-light-interactive-on-dark-surface-active-hover) !important;
}

.bg-light-interactive-on-dark-surface-active-pressed {
  background: var(--group-light-interactive-on-dark-surface-active-pressed) !important;
}

.bg-light-interactive-on-dark-surface-brand-1 {
  background: var(--group-light-interactive-on-dark-surface-brand-1) !important;
}

.bg-light-interactive-on-dark-surface-brand-1-hover {
  background: var(--group-light-interactive-on-dark-surface-brand-1-hover) !important;
}

.bg-light-interactive-on-dark-surface-brand-1-pressed {
  background: var(--group-light-interactive-on-dark-surface-brand-1-pressed) !important;
}

.bg-light-interactive-on-dark-surface-brand-1-disabled {
  background: var(--group-light-interactive-on-dark-surface-brand-1-disabled) !important;
}

.bg-light-interactive-on-dark-surface-brand-1-processing {
  background: var(--group-light-interactive-on-dark-surface-brand-1-processing) !important;
}

.bg-light-interactive-on-dark-surface-brand-2 {
  background: var(--group-light-interactive-on-dark-surface-brand-2) !important;
}

.bg-light-interactive-on-dark-surface-brand-2-hover {
  background: var(--group-light-interactive-on-dark-surface-brand-2-hover) !important;
}

.bg-light-interactive-on-dark-surface-brand-2-pressed {
  background: var(--group-light-interactive-on-dark-surface-brand-2-pressed) !important;
}

.bg-light-interactive-on-dark-surface-brand-2-disabled {
  background: var(--group-light-interactive-on-dark-surface-brand-2-disabled) !important;
}

.bg-light-interactive-on-dark-surface-brand-2-processing {
  background: var(--group-light-interactive-on-dark-surface-brand-2-processing) !important;
}

.bg-core-primary {
  background: var(--group-color-base-core-primary) !important;
}

.bg-white {
  background: var(--group-color-base-white) !important;
}

.bg-black {
  background: var(--group-color-base-black) !important;
}

.bg-neutral-1 {
  background: var(--group-color-base-neutral-1) !important;
}

.bg-neutral-2 {
  background: var(--group-color-base-neutral-2) !important;
}

.bg-neutral-3 {
  background: var(--group-color-base-neutral-3) !important;
}

.bg-neutral-4 {
  background: var(--group-color-base-neutral-4) !important;
}

.bg-neutral-5 {
  background: var(--group-color-base-neutral-5) !important;
}

.bg-info-default-1 {
  background: var(--group-color-base-info-default-1) !important;
}

.bg-info-default-2 {
  background: var(--group-color-base-info-default-2) !important;
}

.bg-success-default-1 {
  background: var(--group-color-base-success-default-1) !important;
}

.bg-success-default-2 {
  background: var(--group-color-base-success-default-2) !important;
}

.bg-warning-default-1 {
  background: var(--group-color-base-warning-default-1) !important;
}

.bg-warning-default-2 {
  background: var(--group-color-base-warning-default-2) !important;
}

.bg-error-default-1 {
  background: var(--group-color-base-error-default-1) !important;
}

.bg-error-default-2 {
  background: var(--group-color-base-error-default-2) !important;
}

.bg-dark-interactive-on-dark-surface-primary {
  background: var(--group-dark-interactive-on-dark-surface-primary) !important;
}

.bg-dark-interactive-on-dark-surface-primary-hover {
  background: var(--group-dark-interactive-on-dark-surface-primary-hover) !important;
}

.bg-dark-interactive-on-dark-surface-primary-pressed {
  background: var(--group-dark-interactive-on-dark-surface-primary-pressed) !important;
}

.bg-dark-interactive-on-dark-surface-primary-disabled {
  background: var(--group-dark-interactive-on-dark-surface-primary-disabled) !important;
}

.bg-dark-interactive-on-dark-surface-active {
  background: var(--group-dark-interactive-on-dark-surface-active) !important;
}

.bg-dark-interactive-on-dark-surface-active-hover {
  background: var(--group-dark-interactive-on-dark-surface-active-hover) !important;
}

.bg-dark-interactive-on-dark-surface-active-pressed {
  background: var(--group-dark-interactive-on-dark-surface-active-pressed) !important;
}

.bg-dark-interactive-on-dark-surface-brand-1 {
  background: var(--group-dark-interactive-on-dark-surface-brand-1) !important;
}

.bg-dark-interactive-on-dark-surface-brand-1-hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-hover) !important;
}

.bg-dark-interactive-on-dark-surface-brand-1-pressed {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-pressed) !important;
}

.bg-dark-interactive-on-dark-surface-brand-1-disabled {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-disabled) !important;
}

.bg-dark-interactive-on-dark-surface-brand-1-processing {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-processing) !important;
}

.bg-dark-interactive-on-dark-surface-brand-2 {
  background: var(--group-dark-interactive-on-dark-surface-brand-2) !important;
}

.bg-dark-interactive-on-dark-surface-brand-2-hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-hover) !important;
}

.bg-dark-interactive-on-dark-surface-brand-2-pressed {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-pressed) !important;
}

.bg-dark-interactive-on-dark-surface-brand-2-disabled {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-disabled) !important;
}

.bg-dark-interactive-on-dark-surface-brand-2-processing {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-processing) !important;
}

.bg-transparent {
  background: transparent !important;
}

.focus\:bg-core-hsbc-red:focus {
  background: var(--group-hsbc-colour-core-hsbc-red) !important;
}

.hover\:bg-core-hsbc-red:hover {
  background: var(--group-hsbc-colour-core-hsbc-red) !important;
}

.active\:bg-core-hsbc-red:active {
  background: var(--group-hsbc-colour-core-hsbc-red) !important;
}

.focus\:bg-core-black:focus {
  background: var(--group-hsbc-colour-core-black) !important;
}

.hover\:bg-core-black:hover {
  background: var(--group-hsbc-colour-core-black) !important;
}

.active\:bg-core-black:active {
  background: var(--group-hsbc-colour-core-black) !important;
}

.focus\:bg-core-white:focus {
  background: var(--group-hsbc-colour-core-white) !important;
}

.hover\:bg-core-white:hover {
  background: var(--group-hsbc-colour-core-white) !important;
}

.active\:bg-core-white:active {
  background: var(--group-hsbc-colour-core-white) !important;
}

.focus\:bg-complimentary-red-1:focus {
  background: var(--group-hsbc-colour-complimentary-red-1) !important;
}

.hover\:bg-complimentary-red-1:hover {
  background: var(--group-hsbc-colour-complimentary-red-1) !important;
}

.active\:bg-complimentary-red-1:active {
  background: var(--group-hsbc-colour-complimentary-red-1) !important;
}

.focus\:bg-complimentary-red-2:focus {
  background: var(--group-hsbc-colour-complimentary-red-2) !important;
}

.hover\:bg-complimentary-red-2:hover {
  background: var(--group-hsbc-colour-complimentary-red-2) !important;
}

.active\:bg-complimentary-red-2:active {
  background: var(--group-hsbc-colour-complimentary-red-2) !important;
}

.focus\:bg-complimentary-red-3:focus {
  background: var(--group-hsbc-colour-complimentary-red-3) !important;
}

.hover\:bg-complimentary-red-3:hover {
  background: var(--group-hsbc-colour-complimentary-red-3) !important;
}

.active\:bg-complimentary-red-3:active {
  background: var(--group-hsbc-colour-complimentary-red-3) !important;
}

.focus\:bg-neutral-white:focus {
  background: var(--group-hsbc-colour-neutral-white) !important;
}

.hover\:bg-neutral-white:hover {
  background: var(--group-hsbc-colour-neutral-white) !important;
}

.active\:bg-neutral-white:active {
  background: var(--group-hsbc-colour-neutral-white) !important;
}

.focus\:bg-neutral-grey-1:focus {
  background: var(--group-hsbc-colour-neutral-grey-1) !important;
}

.hover\:bg-neutral-grey-1:hover {
  background: var(--group-hsbc-colour-neutral-grey-1) !important;
}

.active\:bg-neutral-grey-1:active {
  background: var(--group-hsbc-colour-neutral-grey-1) !important;
}

.focus\:bg-neutral-grey-2:focus {
  background: var(--group-hsbc-colour-neutral-grey-2) !important;
}

.hover\:bg-neutral-grey-2:hover {
  background: var(--group-hsbc-colour-neutral-grey-2) !important;
}

.active\:bg-neutral-grey-2:active {
  background: var(--group-hsbc-colour-neutral-grey-2) !important;
}

.focus\:bg-neutral-grey-3:focus {
  background: var(--group-hsbc-colour-neutral-grey-3) !important;
}

.hover\:bg-neutral-grey-3:hover {
  background: var(--group-hsbc-colour-neutral-grey-3) !important;
}

.active\:bg-neutral-grey-3:active {
  background: var(--group-hsbc-colour-neutral-grey-3) !important;
}

.focus\:bg-neutral-grey-4:focus {
  background: var(--group-hsbc-colour-neutral-grey-4) !important;
}

.hover\:bg-neutral-grey-4:hover {
  background: var(--group-hsbc-colour-neutral-grey-4) !important;
}

.active\:bg-neutral-grey-4:active {
  background: var(--group-hsbc-colour-neutral-grey-4) !important;
}

.focus\:bg-neutral-grey-5:focus {
  background: var(--group-hsbc-colour-neutral-grey-5) !important;
}

.hover\:bg-neutral-grey-5:hover {
  background: var(--group-hsbc-colour-neutral-grey-5) !important;
}

.active\:bg-neutral-grey-5:active {
  background: var(--group-hsbc-colour-neutral-grey-5) !important;
}

.focus\:bg-neutral-black:focus {
  background: var(--group-hsbc-colour-neutral-black) !important;
}

.hover\:bg-neutral-black:hover {
  background: var(--group-hsbc-colour-neutral-black) !important;
}

.active\:bg-neutral-black:active {
  background: var(--group-hsbc-colour-neutral-black) !important;
}

.focus\:bg-neutral-dark-grey-6:focus {
  background: var(--group-hsbc-colour-neutral-dark-grey-6) !important;
}

.hover\:bg-neutral-dark-grey-6:hover {
  background: var(--group-hsbc-colour-neutral-dark-grey-6) !important;
}

.active\:bg-neutral-dark-grey-6:active {
  background: var(--group-hsbc-colour-neutral-dark-grey-6) !important;
}

.focus\:bg-neutral-dark-grey-7:focus {
  background: var(--group-hsbc-colour-neutral-dark-grey-7) !important;
}

.hover\:bg-neutral-dark-grey-7:hover {
  background: var(--group-hsbc-colour-neutral-dark-grey-7) !important;
}

.active\:bg-neutral-dark-grey-7:active {
  background: var(--group-hsbc-colour-neutral-dark-grey-7) !important;
}

.focus\:bg-neutral-dark-grey-8:focus {
  background: var(--group-hsbc-colour-neutral-dark-grey-8) !important;
}

.hover\:bg-neutral-dark-grey-8:hover {
  background: var(--group-hsbc-colour-neutral-dark-grey-8) !important;
}

.active\:bg-neutral-dark-grey-8:active {
  background: var(--group-hsbc-colour-neutral-dark-grey-8) !important;
}

.focus\:bg-neutral-dark-new-grey:focus {
  background: var(--group-hsbc-colour-neutral-dark-new-grey) !important;
}

.hover\:bg-neutral-dark-new-grey:hover {
  background: var(--group-hsbc-colour-neutral-dark-new-grey) !important;
}

.active\:bg-neutral-dark-new-grey:active {
  background: var(--group-hsbc-colour-neutral-dark-new-grey) !important;
}

.focus\:bg-illustration-blue-1:focus {
  background: var(--group-hsbc-colour-illustration-blue-1) !important;
}

.hover\:bg-illustration-blue-1:hover {
  background: var(--group-hsbc-colour-illustration-blue-1) !important;
}

.active\:bg-illustration-blue-1:active {
  background: var(--group-hsbc-colour-illustration-blue-1) !important;
}

.focus\:bg-illustration-blue-2:focus {
  background: var(--group-hsbc-colour-illustration-blue-2) !important;
}

.hover\:bg-illustration-blue-2:hover {
  background: var(--group-hsbc-colour-illustration-blue-2) !important;
}

.active\:bg-illustration-blue-2:active {
  background: var(--group-hsbc-colour-illustration-blue-2) !important;
}

.focus\:bg-illustration-blue-3:focus {
  background: var(--group-hsbc-colour-illustration-blue-3) !important;
}

.hover\:bg-illustration-blue-3:hover {
  background: var(--group-hsbc-colour-illustration-blue-3) !important;
}

.active\:bg-illustration-blue-3:active {
  background: var(--group-hsbc-colour-illustration-blue-3) !important;
}

.focus\:bg-illustration-blue-4:focus {
  background: var(--group-hsbc-colour-illustration-blue-4) !important;
}

.hover\:bg-illustration-blue-4:hover {
  background: var(--group-hsbc-colour-illustration-blue-4) !important;
}

.active\:bg-illustration-blue-4:active {
  background: var(--group-hsbc-colour-illustration-blue-4) !important;
}

.focus\:bg-illustration-blue-5:focus {
  background: var(--group-hsbc-colour-illustration-blue-5) !important;
}

.hover\:bg-illustration-blue-5:hover {
  background: var(--group-hsbc-colour-illustration-blue-5) !important;
}

.active\:bg-illustration-blue-5:active {
  background: var(--group-hsbc-colour-illustration-blue-5) !important;
}

.focus\:bg-illustration-blue-6:focus {
  background: var(--group-hsbc-colour-illustration-blue-6) !important;
}

.hover\:bg-illustration-blue-6:hover {
  background: var(--group-hsbc-colour-illustration-blue-6) !important;
}

.active\:bg-illustration-blue-6:active {
  background: var(--group-hsbc-colour-illustration-blue-6) !important;
}

.focus\:bg-illustration-blue-7:focus {
  background: var(--group-hsbc-colour-illustration-blue-7) !important;
}

.hover\:bg-illustration-blue-7:hover {
  background: var(--group-hsbc-colour-illustration-blue-7) !important;
}

.active\:bg-illustration-blue-7:active {
  background: var(--group-hsbc-colour-illustration-blue-7) !important;
}

.focus\:bg-illustration-blue-8:focus {
  background: var(--group-hsbc-colour-illustration-blue-8) !important;
}

.hover\:bg-illustration-blue-8:hover {
  background: var(--group-hsbc-colour-illustration-blue-8) !important;
}

.active\:bg-illustration-blue-8:active {
  background: var(--group-hsbc-colour-illustration-blue-8) !important;
}

.focus\:bg-illustration-green-1:focus {
  background: var(--group-hsbc-colour-illustration-green-1) !important;
}

.hover\:bg-illustration-green-1:hover {
  background: var(--group-hsbc-colour-illustration-green-1) !important;
}

.active\:bg-illustration-green-1:active {
  background: var(--group-hsbc-colour-illustration-green-1) !important;
}

.focus\:bg-illustration-green-2:focus {
  background: var(--group-hsbc-colour-illustration-green-2) !important;
}

.hover\:bg-illustration-green-2:hover {
  background: var(--group-hsbc-colour-illustration-green-2) !important;
}

.active\:bg-illustration-green-2:active {
  background: var(--group-hsbc-colour-illustration-green-2) !important;
}

.focus\:bg-illustration-green-3:focus {
  background: var(--group-hsbc-colour-illustration-green-3) !important;
}

.hover\:bg-illustration-green-3:hover {
  background: var(--group-hsbc-colour-illustration-green-3) !important;
}

.active\:bg-illustration-green-3:active {
  background: var(--group-hsbc-colour-illustration-green-3) !important;
}

.focus\:bg-illustration-green-4:focus {
  background: var(--group-hsbc-colour-illustration-green-4) !important;
}

.hover\:bg-illustration-green-4:hover {
  background: var(--group-hsbc-colour-illustration-green-4) !important;
}

.active\:bg-illustration-green-4:active {
  background: var(--group-hsbc-colour-illustration-green-4) !important;
}

.focus\:bg-illustration-green-5:focus {
  background: var(--group-hsbc-colour-illustration-green-5) !important;
}

.hover\:bg-illustration-green-5:hover {
  background: var(--group-hsbc-colour-illustration-green-5) !important;
}

.active\:bg-illustration-green-5:active {
  background: var(--group-hsbc-colour-illustration-green-5) !important;
}

.focus\:bg-illustration-green-6:focus {
  background: var(--group-hsbc-colour-illustration-green-6) !important;
}

.hover\:bg-illustration-green-6:hover {
  background: var(--group-hsbc-colour-illustration-green-6) !important;
}

.active\:bg-illustration-green-6:active {
  background: var(--group-hsbc-colour-illustration-green-6) !important;
}

.focus\:bg-illustration-green-7:focus {
  background: var(--group-hsbc-colour-illustration-green-7) !important;
}

.hover\:bg-illustration-green-7:hover {
  background: var(--group-hsbc-colour-illustration-green-7) !important;
}

.active\:bg-illustration-green-7:active {
  background: var(--group-hsbc-colour-illustration-green-7) !important;
}

.focus\:bg-illustration-green-8:focus {
  background: var(--group-hsbc-colour-illustration-green-8) !important;
}

.hover\:bg-illustration-green-8:hover {
  background: var(--group-hsbc-colour-illustration-green-8) !important;
}

.active\:bg-illustration-green-8:active {
  background: var(--group-hsbc-colour-illustration-green-8) !important;
}

.focus\:bg-illustration-pink-1:focus {
  background: var(--group-hsbc-colour-illustration-pink-1) !important;
}

.hover\:bg-illustration-pink-1:hover {
  background: var(--group-hsbc-colour-illustration-pink-1) !important;
}

.active\:bg-illustration-pink-1:active {
  background: var(--group-hsbc-colour-illustration-pink-1) !important;
}

.focus\:bg-illustration-pink-2:focus {
  background: var(--group-hsbc-colour-illustration-pink-2) !important;
}

.hover\:bg-illustration-pink-2:hover {
  background: var(--group-hsbc-colour-illustration-pink-2) !important;
}

.active\:bg-illustration-pink-2:active {
  background: var(--group-hsbc-colour-illustration-pink-2) !important;
}

.focus\:bg-illustration-pink-3:focus {
  background: var(--group-hsbc-colour-illustration-pink-3) !important;
}

.hover\:bg-illustration-pink-3:hover {
  background: var(--group-hsbc-colour-illustration-pink-3) !important;
}

.active\:bg-illustration-pink-3:active {
  background: var(--group-hsbc-colour-illustration-pink-3) !important;
}

.focus\:bg-illustration-pink-4:focus {
  background: var(--group-hsbc-colour-illustration-pink-4) !important;
}

.hover\:bg-illustration-pink-4:hover {
  background: var(--group-hsbc-colour-illustration-pink-4) !important;
}

.active\:bg-illustration-pink-4:active {
  background: var(--group-hsbc-colour-illustration-pink-4) !important;
}

.focus\:bg-illustration-pink-5:focus {
  background: var(--group-hsbc-colour-illustration-pink-5) !important;
}

.hover\:bg-illustration-pink-5:hover {
  background: var(--group-hsbc-colour-illustration-pink-5) !important;
}

.active\:bg-illustration-pink-5:active {
  background: var(--group-hsbc-colour-illustration-pink-5) !important;
}

.focus\:bg-illustration-pink-6:focus {
  background: var(--group-hsbc-colour-illustration-pink-6) !important;
}

.hover\:bg-illustration-pink-6:hover {
  background: var(--group-hsbc-colour-illustration-pink-6) !important;
}

.active\:bg-illustration-pink-6:active {
  background: var(--group-hsbc-colour-illustration-pink-6) !important;
}

.focus\:bg-illustration-pink-7:focus {
  background: var(--group-hsbc-colour-illustration-pink-7) !important;
}

.hover\:bg-illustration-pink-7:hover {
  background: var(--group-hsbc-colour-illustration-pink-7) !important;
}

.active\:bg-illustration-pink-7:active {
  background: var(--group-hsbc-colour-illustration-pink-7) !important;
}

.focus\:bg-illustration-pink-8:focus {
  background: var(--group-hsbc-colour-illustration-pink-8) !important;
}

.hover\:bg-illustration-pink-8:hover {
  background: var(--group-hsbc-colour-illustration-pink-8) !important;
}

.active\:bg-illustration-pink-8:active {
  background: var(--group-hsbc-colour-illustration-pink-8) !important;
}

.focus\:bg-illustration-yellow-1:focus {
  background: var(--group-hsbc-colour-illustration-yellow-1) !important;
}

.hover\:bg-illustration-yellow-1:hover {
  background: var(--group-hsbc-colour-illustration-yellow-1) !important;
}

.active\:bg-illustration-yellow-1:active {
  background: var(--group-hsbc-colour-illustration-yellow-1) !important;
}

.focus\:bg-illustration-yellow-2:focus {
  background: var(--group-hsbc-colour-illustration-yellow-2) !important;
}

.hover\:bg-illustration-yellow-2:hover {
  background: var(--group-hsbc-colour-illustration-yellow-2) !important;
}

.active\:bg-illustration-yellow-2:active {
  background: var(--group-hsbc-colour-illustration-yellow-2) !important;
}

.focus\:bg-illustration-yellow-3:focus {
  background: var(--group-hsbc-colour-illustration-yellow-3) !important;
}

.hover\:bg-illustration-yellow-3:hover {
  background: var(--group-hsbc-colour-illustration-yellow-3) !important;
}

.active\:bg-illustration-yellow-3:active {
  background: var(--group-hsbc-colour-illustration-yellow-3) !important;
}

.focus\:bg-illustration-yellow-4:focus {
  background: var(--group-hsbc-colour-illustration-yellow-4) !important;
}

.hover\:bg-illustration-yellow-4:hover {
  background: var(--group-hsbc-colour-illustration-yellow-4) !important;
}

.active\:bg-illustration-yellow-4:active {
  background: var(--group-hsbc-colour-illustration-yellow-4) !important;
}

.focus\:bg-illustration-yellow-5:focus {
  background: var(--group-hsbc-colour-illustration-yellow-5) !important;
}

.hover\:bg-illustration-yellow-5:hover {
  background: var(--group-hsbc-colour-illustration-yellow-5) !important;
}

.active\:bg-illustration-yellow-5:active {
  background: var(--group-hsbc-colour-illustration-yellow-5) !important;
}

.focus\:bg-illustration-yellow-6:focus {
  background: var(--group-hsbc-colour-illustration-yellow-6) !important;
}

.hover\:bg-illustration-yellow-6:hover {
  background: var(--group-hsbc-colour-illustration-yellow-6) !important;
}

.active\:bg-illustration-yellow-6:active {
  background: var(--group-hsbc-colour-illustration-yellow-6) !important;
}

.focus\:bg-illustration-yellow-7:focus {
  background: var(--group-hsbc-colour-illustration-yellow-7) !important;
}

.hover\:bg-illustration-yellow-7:hover {
  background: var(--group-hsbc-colour-illustration-yellow-7) !important;
}

.active\:bg-illustration-yellow-7:active {
  background: var(--group-hsbc-colour-illustration-yellow-7) !important;
}

.focus\:bg-illustration-yellow-8:focus {
  background: var(--group-hsbc-colour-illustration-yellow-8) !important;
}

.hover\:bg-illustration-yellow-8:hover {
  background: var(--group-hsbc-colour-illustration-yellow-8) !important;
}

.active\:bg-illustration-yellow-8:active {
  background: var(--group-hsbc-colour-illustration-yellow-8) !important;
}

.focus\:bg-illustration-orange-1:focus {
  background: var(--group-hsbc-colour-illustration-orange-1) !important;
}

.hover\:bg-illustration-orange-1:hover {
  background: var(--group-hsbc-colour-illustration-orange-1) !important;
}

.active\:bg-illustration-orange-1:active {
  background: var(--group-hsbc-colour-illustration-orange-1) !important;
}

.focus\:bg-illustration-orange-2:focus {
  background: var(--group-hsbc-colour-illustration-orange-2) !important;
}

.hover\:bg-illustration-orange-2:hover {
  background: var(--group-hsbc-colour-illustration-orange-2) !important;
}

.active\:bg-illustration-orange-2:active {
  background: var(--group-hsbc-colour-illustration-orange-2) !important;
}

.focus\:bg-illustration-orange-3:focus {
  background: var(--group-hsbc-colour-illustration-orange-3) !important;
}

.hover\:bg-illustration-orange-3:hover {
  background: var(--group-hsbc-colour-illustration-orange-3) !important;
}

.active\:bg-illustration-orange-3:active {
  background: var(--group-hsbc-colour-illustration-orange-3) !important;
}

.focus\:bg-illustration-orange-4:focus {
  background: var(--group-hsbc-colour-illustration-orange-4) !important;
}

.hover\:bg-illustration-orange-4:hover {
  background: var(--group-hsbc-colour-illustration-orange-4) !important;
}

.active\:bg-illustration-orange-4:active {
  background: var(--group-hsbc-colour-illustration-orange-4) !important;
}

.focus\:bg-illustration-orange-5:focus {
  background: var(--group-hsbc-colour-illustration-orange-5) !important;
}

.hover\:bg-illustration-orange-5:hover {
  background: var(--group-hsbc-colour-illustration-orange-5) !important;
}

.active\:bg-illustration-orange-5:active {
  background: var(--group-hsbc-colour-illustration-orange-5) !important;
}

.focus\:bg-illustration-orange-6:focus {
  background: var(--group-hsbc-colour-illustration-orange-6) !important;
}

.hover\:bg-illustration-orange-6:hover {
  background: var(--group-hsbc-colour-illustration-orange-6) !important;
}

.active\:bg-illustration-orange-6:active {
  background: var(--group-hsbc-colour-illustration-orange-6) !important;
}

.focus\:bg-illustration-orange-7:focus {
  background: var(--group-hsbc-colour-illustration-orange-7) !important;
}

.hover\:bg-illustration-orange-7:hover {
  background: var(--group-hsbc-colour-illustration-orange-7) !important;
}

.active\:bg-illustration-orange-7:active {
  background: var(--group-hsbc-colour-illustration-orange-7) !important;
}

.focus\:bg-illustration-orange-8:focus {
  background: var(--group-hsbc-colour-illustration-orange-8) !important;
}

.hover\:bg-illustration-orange-8:hover {
  background: var(--group-hsbc-colour-illustration-orange-8) !important;
}

.active\:bg-illustration-orange-8:active {
  background: var(--group-hsbc-colour-illustration-orange-8) !important;
}

.focus\:bg-illustration-complimentary-brown-1:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-1) !important;
}

.hover\:bg-illustration-complimentary-brown-1:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-1) !important;
}

.active\:bg-illustration-complimentary-brown-1:active {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-1) !important;
}

.focus\:bg-illustration-complimentary-brown-2:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-2) !important;
}

.hover\:bg-illustration-complimentary-brown-2:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-2) !important;
}

.active\:bg-illustration-complimentary-brown-2:active {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-2) !important;
}

.focus\:bg-illustration-complimentary-brown-3:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-3) !important;
}

.hover\:bg-illustration-complimentary-brown-3:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-3) !important;
}

.active\:bg-illustration-complimentary-brown-3:active {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-3) !important;
}

.focus\:bg-illustration-complimentary-brown-4:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-4) !important;
}

.hover\:bg-illustration-complimentary-brown-4:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-4) !important;
}

.active\:bg-illustration-complimentary-brown-4:active {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-4) !important;
}

.focus\:bg-illustration-complimentary-brown-5:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-5) !important;
}

.hover\:bg-illustration-complimentary-brown-5:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-5) !important;
}

.active\:bg-illustration-complimentary-brown-5:active {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-5) !important;
}

.focus\:bg-illustration-complimentary-brown-6:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-6) !important;
}

.hover\:bg-illustration-complimentary-brown-6:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-6) !important;
}

.active\:bg-illustration-complimentary-brown-6:active {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-6) !important;
}

.focus\:bg-illustration-complimentary-brown-7:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-7) !important;
}

.hover\:bg-illustration-complimentary-brown-7:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-7) !important;
}

.active\:bg-illustration-complimentary-brown-7:active {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-7) !important;
}

.focus\:bg-illustration-complimentary-brown-8:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-8) !important;
}

.hover\:bg-illustration-complimentary-brown-8:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-8) !important;
}

.active\:bg-illustration-complimentary-brown-8:active {
  background: var(--group-hsbc-colour-illustration-complimentary-brown-8) !important;
}

.focus\:bg-illustration-complimentary-mid-brown-1:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-1) !important;
}

.hover\:bg-illustration-complimentary-mid-brown-1:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-1) !important;
}

.active\:bg-illustration-complimentary-mid-brown-1:active {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-1) !important;
}

.focus\:bg-illustration-complimentary-mid-brown-2:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-2) !important;
}

.hover\:bg-illustration-complimentary-mid-brown-2:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-2) !important;
}

.active\:bg-illustration-complimentary-mid-brown-2:active {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-2) !important;
}

.focus\:bg-illustration-complimentary-mid-brown-3:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-3) !important;
}

.hover\:bg-illustration-complimentary-mid-brown-3:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-3) !important;
}

.active\:bg-illustration-complimentary-mid-brown-3:active {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-3) !important;
}

.focus\:bg-illustration-complimentary-mid-brown-4:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-4) !important;
}

.hover\:bg-illustration-complimentary-mid-brown-4:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-4) !important;
}

.active\:bg-illustration-complimentary-mid-brown-4:active {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-4) !important;
}

.focus\:bg-illustration-complimentary-mid-brown-5:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-5) !important;
}

.hover\:bg-illustration-complimentary-mid-brown-5:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-5) !important;
}

.active\:bg-illustration-complimentary-mid-brown-5:active {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-5) !important;
}

.focus\:bg-illustration-complimentary-mid-brown-6:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-6) !important;
}

.hover\:bg-illustration-complimentary-mid-brown-6:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-6) !important;
}

.active\:bg-illustration-complimentary-mid-brown-6:active {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-6) !important;
}

.focus\:bg-illustration-complimentary-mid-brown-7:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-7) !important;
}

.hover\:bg-illustration-complimentary-mid-brown-7:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-7) !important;
}

.active\:bg-illustration-complimentary-mid-brown-7:active {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-7) !important;
}

.focus\:bg-illustration-complimentary-mid-brown-8:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-8) !important;
}

.hover\:bg-illustration-complimentary-mid-brown-8:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-8) !important;
}

.active\:bg-illustration-complimentary-mid-brown-8:active {
  background: var(--group-hsbc-colour-illustration-complimentary-mid-brown-8) !important;
}

.focus\:bg-illustration-complimentary-tan-1:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-1) !important;
}

.hover\:bg-illustration-complimentary-tan-1:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-1) !important;
}

.active\:bg-illustration-complimentary-tan-1:active {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-1) !important;
}

.focus\:bg-illustration-complimentary-tan-2:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-2) !important;
}

.hover\:bg-illustration-complimentary-tan-2:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-2) !important;
}

.active\:bg-illustration-complimentary-tan-2:active {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-2) !important;
}

.focus\:bg-illustration-complimentary-tan-3:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-3) !important;
}

.hover\:bg-illustration-complimentary-tan-3:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-3) !important;
}

.active\:bg-illustration-complimentary-tan-3:active {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-3) !important;
}

.focus\:bg-illustration-complimentary-tan-4:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-4) !important;
}

.hover\:bg-illustration-complimentary-tan-4:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-4) !important;
}

.active\:bg-illustration-complimentary-tan-4:active {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-4) !important;
}

.focus\:bg-illustration-complimentary-tan-5:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-5) !important;
}

.hover\:bg-illustration-complimentary-tan-5:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-5) !important;
}

.active\:bg-illustration-complimentary-tan-5:active {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-5) !important;
}

.focus\:bg-illustration-complimentary-tan-6:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-6) !important;
}

.hover\:bg-illustration-complimentary-tan-6:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-6) !important;
}

.active\:bg-illustration-complimentary-tan-6:active {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-6) !important;
}

.focus\:bg-illustration-complimentary-tan-7:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-7) !important;
}

.hover\:bg-illustration-complimentary-tan-7:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-7) !important;
}

.active\:bg-illustration-complimentary-tan-7:active {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-7) !important;
}

.focus\:bg-illustration-complimentary-tan-8:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-8) !important;
}

.hover\:bg-illustration-complimentary-tan-8:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-8) !important;
}

.active\:bg-illustration-complimentary-tan-8:active {
  background: var(--group-hsbc-colour-illustration-complimentary-tan-8) !important;
}

.focus\:bg-illustration-complimentary-cream-1:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-1) !important;
}

.hover\:bg-illustration-complimentary-cream-1:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-1) !important;
}

.active\:bg-illustration-complimentary-cream-1:active {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-1) !important;
}

.focus\:bg-illustration-complimentary-cream-2:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-2) !important;
}

.hover\:bg-illustration-complimentary-cream-2:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-2) !important;
}

.active\:bg-illustration-complimentary-cream-2:active {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-2) !important;
}

.focus\:bg-illustration-complimentary-cream-3:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-3) !important;
}

.hover\:bg-illustration-complimentary-cream-3:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-3) !important;
}

.active\:bg-illustration-complimentary-cream-3:active {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-3) !important;
}

.focus\:bg-illustration-complimentary-cream-4:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-4) !important;
}

.hover\:bg-illustration-complimentary-cream-4:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-4) !important;
}

.active\:bg-illustration-complimentary-cream-4:active {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-4) !important;
}

.focus\:bg-illustration-complimentary-cream-5:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-5) !important;
}

.hover\:bg-illustration-complimentary-cream-5:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-5) !important;
}

.active\:bg-illustration-complimentary-cream-5:active {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-5) !important;
}

.focus\:bg-illustration-complimentary-cream-6:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-6) !important;
}

.hover\:bg-illustration-complimentary-cream-6:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-6) !important;
}

.active\:bg-illustration-complimentary-cream-6:active {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-6) !important;
}

.focus\:bg-illustration-complimentary-cream-7:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-7) !important;
}

.hover\:bg-illustration-complimentary-cream-7:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-7) !important;
}

.active\:bg-illustration-complimentary-cream-7:active {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-7) !important;
}

.focus\:bg-illustration-complimentary-cream-8:focus {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-8) !important;
}

.hover\:bg-illustration-complimentary-cream-8:hover {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-8) !important;
}

.active\:bg-illustration-complimentary-cream-8:active {
  background: var(--group-hsbc-colour-illustration-complimentary-cream-8) !important;
}

.focus\:bg-data-vis-blue-1:focus {
  background: var(--group-hsbc-colour-data-vis-blue-1) !important;
}

.hover\:bg-data-vis-blue-1:hover {
  background: var(--group-hsbc-colour-data-vis-blue-1) !important;
}

.active\:bg-data-vis-blue-1:active {
  background: var(--group-hsbc-colour-data-vis-blue-1) !important;
}

.focus\:bg-data-vis-blue-2:focus {
  background: var(--group-hsbc-colour-data-vis-blue-2) !important;
}

.hover\:bg-data-vis-blue-2:hover {
  background: var(--group-hsbc-colour-data-vis-blue-2) !important;
}

.active\:bg-data-vis-blue-2:active {
  background: var(--group-hsbc-colour-data-vis-blue-2) !important;
}

.focus\:bg-data-vis-blue-3:focus {
  background: var(--group-hsbc-colour-data-vis-blue-3) !important;
}

.hover\:bg-data-vis-blue-3:hover {
  background: var(--group-hsbc-colour-data-vis-blue-3) !important;
}

.active\:bg-data-vis-blue-3:active {
  background: var(--group-hsbc-colour-data-vis-blue-3) !important;
}

.focus\:bg-data-vis-blue-4:focus {
  background: var(--group-hsbc-colour-data-vis-blue-4) !important;
}

.hover\:bg-data-vis-blue-4:hover {
  background: var(--group-hsbc-colour-data-vis-blue-4) !important;
}

.active\:bg-data-vis-blue-4:active {
  background: var(--group-hsbc-colour-data-vis-blue-4) !important;
}

.focus\:bg-data-vis-purple-1:focus {
  background: var(--group-hsbc-colour-data-vis-purple-1) !important;
}

.hover\:bg-data-vis-purple-1:hover {
  background: var(--group-hsbc-colour-data-vis-purple-1) !important;
}

.active\:bg-data-vis-purple-1:active {
  background: var(--group-hsbc-colour-data-vis-purple-1) !important;
}

.focus\:bg-data-vis-purple-2:focus {
  background: var(--group-hsbc-colour-data-vis-purple-2) !important;
}

.hover\:bg-data-vis-purple-2:hover {
  background: var(--group-hsbc-colour-data-vis-purple-2) !important;
}

.active\:bg-data-vis-purple-2:active {
  background: var(--group-hsbc-colour-data-vis-purple-2) !important;
}

.focus\:bg-data-vis-purple-3:focus {
  background: var(--group-hsbc-colour-data-vis-purple-3) !important;
}

.hover\:bg-data-vis-purple-3:hover {
  background: var(--group-hsbc-colour-data-vis-purple-3) !important;
}

.active\:bg-data-vis-purple-3:active {
  background: var(--group-hsbc-colour-data-vis-purple-3) !important;
}

.focus\:bg-data-vis-purple-4:focus {
  background: var(--group-hsbc-colour-data-vis-purple-4) !important;
}

.hover\:bg-data-vis-purple-4:hover {
  background: var(--group-hsbc-colour-data-vis-purple-4) !important;
}

.active\:bg-data-vis-purple-4:active {
  background: var(--group-hsbc-colour-data-vis-purple-4) !important;
}

.focus\:bg-data-vis-pink-1:focus {
  background: var(--group-hsbc-colour-data-vis-pink-1) !important;
}

.hover\:bg-data-vis-pink-1:hover {
  background: var(--group-hsbc-colour-data-vis-pink-1) !important;
}

.active\:bg-data-vis-pink-1:active {
  background: var(--group-hsbc-colour-data-vis-pink-1) !important;
}

.focus\:bg-data-vis-pink-2:focus {
  background: var(--group-hsbc-colour-data-vis-pink-2) !important;
}

.hover\:bg-data-vis-pink-2:hover {
  background: var(--group-hsbc-colour-data-vis-pink-2) !important;
}

.active\:bg-data-vis-pink-2:active {
  background: var(--group-hsbc-colour-data-vis-pink-2) !important;
}

.focus\:bg-data-vis-pink-3:focus {
  background: var(--group-hsbc-colour-data-vis-pink-3) !important;
}

.hover\:bg-data-vis-pink-3:hover {
  background: var(--group-hsbc-colour-data-vis-pink-3) !important;
}

.active\:bg-data-vis-pink-3:active {
  background: var(--group-hsbc-colour-data-vis-pink-3) !important;
}

.focus\:bg-data-vis-pink-4:focus {
  background: var(--group-hsbc-colour-data-vis-pink-4) !important;
}

.hover\:bg-data-vis-pink-4:hover {
  background: var(--group-hsbc-colour-data-vis-pink-4) !important;
}

.active\:bg-data-vis-pink-4:active {
  background: var(--group-hsbc-colour-data-vis-pink-4) !important;
}

.focus\:bg-data-vis-orange-1:focus {
  background: var(--group-hsbc-colour-data-vis-orange-1) !important;
}

.hover\:bg-data-vis-orange-1:hover {
  background: var(--group-hsbc-colour-data-vis-orange-1) !important;
}

.active\:bg-data-vis-orange-1:active {
  background: var(--group-hsbc-colour-data-vis-orange-1) !important;
}

.focus\:bg-data-vis-orange-2:focus {
  background: var(--group-hsbc-colour-data-vis-orange-2) !important;
}

.hover\:bg-data-vis-orange-2:hover {
  background: var(--group-hsbc-colour-data-vis-orange-2) !important;
}

.active\:bg-data-vis-orange-2:active {
  background: var(--group-hsbc-colour-data-vis-orange-2) !important;
}

.focus\:bg-data-vis-orange-3:focus {
  background: var(--group-hsbc-colour-data-vis-orange-3) !important;
}

.hover\:bg-data-vis-orange-3:hover {
  background: var(--group-hsbc-colour-data-vis-orange-3) !important;
}

.active\:bg-data-vis-orange-3:active {
  background: var(--group-hsbc-colour-data-vis-orange-3) !important;
}

.focus\:bg-data-vis-orange-4:focus {
  background: var(--group-hsbc-colour-data-vis-orange-4) !important;
}

.hover\:bg-data-vis-orange-4:hover {
  background: var(--group-hsbc-colour-data-vis-orange-4) !important;
}

.active\:bg-data-vis-orange-4:active {
  background: var(--group-hsbc-colour-data-vis-orange-4) !important;
}

.focus\:bg-data-vis-green-1:focus {
  background: var(--group-hsbc-colour-data-vis-green-1) !important;
}

.hover\:bg-data-vis-green-1:hover {
  background: var(--group-hsbc-colour-data-vis-green-1) !important;
}

.active\:bg-data-vis-green-1:active {
  background: var(--group-hsbc-colour-data-vis-green-1) !important;
}

.focus\:bg-data-vis-green-2:focus {
  background: var(--group-hsbc-colour-data-vis-green-2) !important;
}

.hover\:bg-data-vis-green-2:hover {
  background: var(--group-hsbc-colour-data-vis-green-2) !important;
}

.active\:bg-data-vis-green-2:active {
  background: var(--group-hsbc-colour-data-vis-green-2) !important;
}

.focus\:bg-data-vis-green-3:focus {
  background: var(--group-hsbc-colour-data-vis-green-3) !important;
}

.hover\:bg-data-vis-green-3:hover {
  background: var(--group-hsbc-colour-data-vis-green-3) !important;
}

.active\:bg-data-vis-green-3:active {
  background: var(--group-hsbc-colour-data-vis-green-3) !important;
}

.focus\:bg-data-vis-green-4:focus {
  background: var(--group-hsbc-colour-data-vis-green-4) !important;
}

.hover\:bg-data-vis-green-4:hover {
  background: var(--group-hsbc-colour-data-vis-green-4) !important;
}

.active\:bg-data-vis-green-4:active {
  background: var(--group-hsbc-colour-data-vis-green-4) !important;
}

.focus\:bg-rag-red:focus {
  background: var(--group-hsbc-colour-rag-red) !important;
}

.hover\:bg-rag-red:hover {
  background: var(--group-hsbc-colour-rag-red) !important;
}

.active\:bg-rag-red:active {
  background: var(--group-hsbc-colour-rag-red) !important;
}

.focus\:bg-rag-red-tint:focus {
  background: var(--group-hsbc-colour-rag-red-tint) !important;
}

.hover\:bg-rag-red-tint:hover {
  background: var(--group-hsbc-colour-rag-red-tint) !important;
}

.active\:bg-rag-red-tint:active {
  background: var(--group-hsbc-colour-rag-red-tint) !important;
}

.focus\:bg-rag-amber:focus {
  background: var(--group-hsbc-colour-rag-amber) !important;
}

.hover\:bg-rag-amber:hover {
  background: var(--group-hsbc-colour-rag-amber) !important;
}

.active\:bg-rag-amber:active {
  background: var(--group-hsbc-colour-rag-amber) !important;
}

.focus\:bg-rag-amber-tint:focus {
  background: var(--group-hsbc-colour-rag-amber-tint) !important;
}

.hover\:bg-rag-amber-tint:hover {
  background: var(--group-hsbc-colour-rag-amber-tint) !important;
}

.active\:bg-rag-amber-tint:active {
  background: var(--group-hsbc-colour-rag-amber-tint) !important;
}

.focus\:bg-rag-green:focus {
  background: var(--group-hsbc-colour-rag-green) !important;
}

.hover\:bg-rag-green:hover {
  background: var(--group-hsbc-colour-rag-green) !important;
}

.active\:bg-rag-green:active {
  background: var(--group-hsbc-colour-rag-green) !important;
}

.focus\:bg-rag-green-tint:focus {
  background: var(--group-hsbc-colour-rag-green-tint) !important;
}

.hover\:bg-rag-green-tint:hover {
  background: var(--group-hsbc-colour-rag-green-tint) !important;
}

.active\:bg-rag-green-tint:active {
  background: var(--group-hsbc-colour-rag-green-tint) !important;
}

.focus\:bg-rag-blue:focus {
  background: var(--group-hsbc-colour-rag-blue) !important;
}

.hover\:bg-rag-blue:hover {
  background: var(--group-hsbc-colour-rag-blue) !important;
}

.active\:bg-rag-blue:active {
  background: var(--group-hsbc-colour-rag-blue) !important;
}

.focus\:bg-rag-blue-tint:focus {
  background: var(--group-hsbc-colour-rag-blue-tint) !important;
}

.hover\:bg-rag-blue-tint:hover {
  background: var(--group-hsbc-colour-rag-blue-tint) !important;
}

.active\:bg-rag-blue-tint:active {
  background: var(--group-hsbc-colour-rag-blue-tint) !important;
}

.focus\:bg-rag-dark-red-tint:focus {
  background: var(--group-hsbc-colour-rag-dark-red-tint) !important;
}

.hover\:bg-rag-dark-red-tint:hover {
  background: var(--group-hsbc-colour-rag-dark-red-tint) !important;
}

.active\:bg-rag-dark-red-tint:active {
  background: var(--group-hsbc-colour-rag-dark-red-tint) !important;
}

.focus\:bg-rag-dark-amber-tint:focus {
  background: var(--group-hsbc-colour-rag-dark-amber-tint) !important;
}

.hover\:bg-rag-dark-amber-tint:hover {
  background: var(--group-hsbc-colour-rag-dark-amber-tint) !important;
}

.active\:bg-rag-dark-amber-tint:active {
  background: var(--group-hsbc-colour-rag-dark-amber-tint) !important;
}

.focus\:bg-rag-dark-green-tint:focus {
  background: var(--group-hsbc-colour-rag-dark-green-tint) !important;
}

.hover\:bg-rag-dark-green-tint:hover {
  background: var(--group-hsbc-colour-rag-dark-green-tint) !important;
}

.active\:bg-rag-dark-green-tint:active {
  background: var(--group-hsbc-colour-rag-dark-green-tint) !important;
}

.focus\:bg-rag-dark-blue-tint:focus {
  background: var(--group-hsbc-colour-rag-dark-blue-tint) !important;
}

.hover\:bg-rag-dark-blue-tint:hover {
  background: var(--group-hsbc-colour-rag-dark-blue-tint) !important;
}

.active\:bg-rag-dark-blue-tint:active {
  background: var(--group-hsbc-colour-rag-dark-blue-tint) !important;
}

.focus\:bg-light-interactive-on-light-surface-primary:focus {
  background: var(--group-light-interactive-on-light-surface-primary) !important;
}

.hover\:bg-light-interactive-on-light-surface-primary:hover {
  background: var(--group-light-interactive-on-light-surface-primary) !important;
}

.active\:bg-light-interactive-on-light-surface-primary:active {
  background: var(--group-light-interactive-on-light-surface-primary) !important;
}

.focus\:bg-light-interactive-on-light-surface-primary-hover:focus {
  background: var(--group-light-interactive-on-light-surface-primary-hover) !important;
}

.hover\:bg-light-interactive-on-light-surface-primary-hover:hover {
  background: var(--group-light-interactive-on-light-surface-primary-hover) !important;
}

.active\:bg-light-interactive-on-light-surface-primary-hover:active {
  background: var(--group-light-interactive-on-light-surface-primary-hover) !important;
}

.focus\:bg-light-interactive-on-light-surface-primary-pressed:focus {
  background: var(--group-light-interactive-on-light-surface-primary-pressed) !important;
}

.hover\:bg-light-interactive-on-light-surface-primary-pressed:hover {
  background: var(--group-light-interactive-on-light-surface-primary-pressed) !important;
}

.active\:bg-light-interactive-on-light-surface-primary-pressed:active {
  background: var(--group-light-interactive-on-light-surface-primary-pressed) !important;
}

.focus\:bg-light-interactive-on-light-surface-primary-disabled:focus {
  background: var(--group-light-interactive-on-light-surface-primary-disabled) !important;
}

.hover\:bg-light-interactive-on-light-surface-primary-disabled:hover {
  background: var(--group-light-interactive-on-light-surface-primary-disabled) !important;
}

.active\:bg-light-interactive-on-light-surface-primary-disabled:active {
  background: var(--group-light-interactive-on-light-surface-primary-disabled) !important;
}

.focus\:bg-light-interactive-on-light-surface-primary-processing:focus {
  background: var(--group-light-interactive-on-light-surface-primary-processing) !important;
}

.hover\:bg-light-interactive-on-light-surface-primary-processing:hover {
  background: var(--group-light-interactive-on-light-surface-primary-processing) !important;
}

.active\:bg-light-interactive-on-light-surface-primary-processing:active {
  background: var(--group-light-interactive-on-light-surface-primary-processing) !important;
}

.focus\:bg-light-interactive-on-light-surface-active:focus {
  background: var(--group-light-interactive-on-light-surface-active) !important;
}

.hover\:bg-light-interactive-on-light-surface-active:hover {
  background: var(--group-light-interactive-on-light-surface-active) !important;
}

.active\:bg-light-interactive-on-light-surface-active:active {
  background: var(--group-light-interactive-on-light-surface-active) !important;
}

.focus\:bg-light-interactive-on-light-surface-active-hover:focus {
  background: var(--group-light-interactive-on-light-surface-active-hover) !important;
}

.hover\:bg-light-interactive-on-light-surface-active-hover:hover {
  background: var(--group-light-interactive-on-light-surface-active-hover) !important;
}

.active\:bg-light-interactive-on-light-surface-active-hover:active {
  background: var(--group-light-interactive-on-light-surface-active-hover) !important;
}

.focus\:bg-light-interactive-on-light-surface-active-pressed:focus {
  background: var(--group-light-interactive-on-light-surface-active-pressed) !important;
}

.hover\:bg-light-interactive-on-light-surface-active-pressed:hover {
  background: var(--group-light-interactive-on-light-surface-active-pressed) !important;
}

.active\:bg-light-interactive-on-light-surface-active-pressed:active {
  background: var(--group-light-interactive-on-light-surface-active-pressed) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-1:focus {
  background: var(--group-light-interactive-on-light-surface-brand-1) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-1:hover {
  background: var(--group-light-interactive-on-light-surface-brand-1) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-1:active {
  background: var(--group-light-interactive-on-light-surface-brand-1) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-1-hover:focus {
  background: var(--group-light-interactive-on-light-surface-brand-1-hover) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-1-hover:hover {
  background: var(--group-light-interactive-on-light-surface-brand-1-hover) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-1-hover:active {
  background: var(--group-light-interactive-on-light-surface-brand-1-hover) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-1-pressed:focus {
  background: var(--group-light-interactive-on-light-surface-brand-1-pressed) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-1-pressed:hover {
  background: var(--group-light-interactive-on-light-surface-brand-1-pressed) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-1-pressed:active {
  background: var(--group-light-interactive-on-light-surface-brand-1-pressed) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-1-disabled:focus {
  background: var(--group-light-interactive-on-light-surface-brand-1-disabled) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-1-disabled:hover {
  background: var(--group-light-interactive-on-light-surface-brand-1-disabled) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-1-disabled:active {
  background: var(--group-light-interactive-on-light-surface-brand-1-disabled) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-1-processing:focus {
  background: var(--group-light-interactive-on-light-surface-brand-1-processing) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-1-processing:hover {
  background: var(--group-light-interactive-on-light-surface-brand-1-processing) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-1-processing:active {
  background: var(--group-light-interactive-on-light-surface-brand-1-processing) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-2:focus {
  background: var(--group-light-interactive-on-light-surface-brand-2) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-2:hover {
  background: var(--group-light-interactive-on-light-surface-brand-2) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-2:active {
  background: var(--group-light-interactive-on-light-surface-brand-2) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-2-hover:focus {
  background: var(--group-light-interactive-on-light-surface-brand-2-hover) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-2-hover:hover {
  background: var(--group-light-interactive-on-light-surface-brand-2-hover) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-2-hover:active {
  background: var(--group-light-interactive-on-light-surface-brand-2-hover) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-2-pressed:focus {
  background: var(--group-light-interactive-on-light-surface-brand-2-pressed) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-2-pressed:hover {
  background: var(--group-light-interactive-on-light-surface-brand-2-pressed) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-2-pressed:active {
  background: var(--group-light-interactive-on-light-surface-brand-2-pressed) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-2-disabled:focus {
  background: var(--group-light-interactive-on-light-surface-brand-2-disabled) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-2-disabled:hover {
  background: var(--group-light-interactive-on-light-surface-brand-2-disabled) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-2-disabled:active {
  background: var(--group-light-interactive-on-light-surface-brand-2-disabled) !important;
}

.focus\:bg-light-interactive-on-light-surface-brand-2-processing:focus {
  background: var(--group-light-interactive-on-light-surface-brand-2-processing) !important;
}

.hover\:bg-light-interactive-on-light-surface-brand-2-processing:hover {
  background: var(--group-light-interactive-on-light-surface-brand-2-processing) !important;
}

.active\:bg-light-interactive-on-light-surface-brand-2-processing:active {
  background: var(--group-light-interactive-on-light-surface-brand-2-processing) !important;
}

.focus\:bg-dark-interactive-on-light-surface-primary:focus {
  background: var(--group-dark-interactive-on-light-surface-primary) !important;
}

.hover\:bg-dark-interactive-on-light-surface-primary:hover {
  background: var(--group-dark-interactive-on-light-surface-primary) !important;
}

.active\:bg-dark-interactive-on-light-surface-primary:active {
  background: var(--group-dark-interactive-on-light-surface-primary) !important;
}

.focus\:bg-dark-interactive-on-light-surface-primary-hover:focus {
  background: var(--group-dark-interactive-on-light-surface-primary-hover) !important;
}

.hover\:bg-dark-interactive-on-light-surface-primary-hover:hover {
  background: var(--group-dark-interactive-on-light-surface-primary-hover) !important;
}

.active\:bg-dark-interactive-on-light-surface-primary-hover:active {
  background: var(--group-dark-interactive-on-light-surface-primary-hover) !important;
}

.focus\:bg-dark-interactive-on-light-surface-primary-pressed:focus {
  background: var(--group-dark-interactive-on-light-surface-primary-pressed) !important;
}

.hover\:bg-dark-interactive-on-light-surface-primary-pressed:hover {
  background: var(--group-dark-interactive-on-light-surface-primary-pressed) !important;
}

.active\:bg-dark-interactive-on-light-surface-primary-pressed:active {
  background: var(--group-dark-interactive-on-light-surface-primary-pressed) !important;
}

.focus\:bg-dark-interactive-on-light-surface-primary-disabled:focus {
  background: var(--group-dark-interactive-on-light-surface-primary-disabled) !important;
}

.hover\:bg-dark-interactive-on-light-surface-primary-disabled:hover {
  background: var(--group-dark-interactive-on-light-surface-primary-disabled) !important;
}

.active\:bg-dark-interactive-on-light-surface-primary-disabled:active {
  background: var(--group-dark-interactive-on-light-surface-primary-disabled) !important;
}

.focus\:bg-dark-interactive-on-light-surface-primary-processing:focus {
  background: var(--group-dark-interactive-on-light-surface-primary-processing) !important;
}

.hover\:bg-dark-interactive-on-light-surface-primary-processing:hover {
  background: var(--group-dark-interactive-on-light-surface-primary-processing) !important;
}

.active\:bg-dark-interactive-on-light-surface-primary-processing:active {
  background: var(--group-dark-interactive-on-light-surface-primary-processing) !important;
}

.focus\:bg-dark-interactive-on-light-surface-active:focus {
  background: var(--group-dark-interactive-on-light-surface-active) !important;
}

.hover\:bg-dark-interactive-on-light-surface-active:hover {
  background: var(--group-dark-interactive-on-light-surface-active) !important;
}

.active\:bg-dark-interactive-on-light-surface-active:active {
  background: var(--group-dark-interactive-on-light-surface-active) !important;
}

.focus\:bg-dark-interactive-on-light-surface-active-hover:focus {
  background: var(--group-dark-interactive-on-light-surface-active-hover) !important;
}

.hover\:bg-dark-interactive-on-light-surface-active-hover:hover {
  background: var(--group-dark-interactive-on-light-surface-active-hover) !important;
}

.active\:bg-dark-interactive-on-light-surface-active-hover:active {
  background: var(--group-dark-interactive-on-light-surface-active-hover) !important;
}

.focus\:bg-dark-interactive-on-light-surface-active-pressed:focus {
  background: var(--group-dark-interactive-on-light-surface-active-pressed) !important;
}

.hover\:bg-dark-interactive-on-light-surface-active-pressed:hover {
  background: var(--group-dark-interactive-on-light-surface-active-pressed) !important;
}

.active\:bg-dark-interactive-on-light-surface-active-pressed:active {
  background: var(--group-dark-interactive-on-light-surface-active-pressed) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-1:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-1) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-1:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-1) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-1:active {
  background: var(--group-dark-interactive-on-light-surface-brand-1) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-1-hover:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-1-hover) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-1-hover:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-1-hover) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-1-hover:active {
  background: var(--group-dark-interactive-on-light-surface-brand-1-hover) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-1-pressed:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-1-pressed) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-1-pressed:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-1-pressed) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-1-pressed:active {
  background: var(--group-dark-interactive-on-light-surface-brand-1-pressed) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-1-disabled:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-1-disabled) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-1-disabled:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-1-disabled) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-1-disabled:active {
  background: var(--group-dark-interactive-on-light-surface-brand-1-disabled) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-1-processing:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-1-processing) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-1-processing:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-1-processing) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-1-processing:active {
  background: var(--group-dark-interactive-on-light-surface-brand-1-processing) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-2:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-2) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-2:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-2) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-2:active {
  background: var(--group-dark-interactive-on-light-surface-brand-2) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-2-hover:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-2-hover) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-2-hover:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-2-hover) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-2-hover:active {
  background: var(--group-dark-interactive-on-light-surface-brand-2-hover) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-2-pressed:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-2-pressed) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-2-pressed:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-2-pressed) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-2-pressed:active {
  background: var(--group-dark-interactive-on-light-surface-brand-2-pressed) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-2-disabled:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-2-disabled) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-2-disabled:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-2-disabled) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-2-disabled:active {
  background: var(--group-dark-interactive-on-light-surface-brand-2-disabled) !important;
}

.focus\:bg-dark-interactive-on-light-surface-brand-2-processing:focus {
  background: var(--group-dark-interactive-on-light-surface-brand-2-processing) !important;
}

.hover\:bg-dark-interactive-on-light-surface-brand-2-processing:hover {
  background: var(--group-dark-interactive-on-light-surface-brand-2-processing) !important;
}

.active\:bg-dark-interactive-on-light-surface-brand-2-processing:active {
  background: var(--group-dark-interactive-on-light-surface-brand-2-processing) !important;
}

.focus\:bg-light-non-interactive-surface-white:focus {
  background: var(--group-light-non-interactive-surface-white) !important;
}

.hover\:bg-light-non-interactive-surface-white:hover {
  background: var(--group-light-non-interactive-surface-white) !important;
}

.active\:bg-light-non-interactive-surface-white:active {
  background: var(--group-light-non-interactive-surface-white) !important;
}

.focus\:bg-light-non-interactive-surface-neutral-1:focus {
  background: var(--group-light-non-interactive-surface-neutral-1) !important;
}

.hover\:bg-light-non-interactive-surface-neutral-1:hover {
  background: var(--group-light-non-interactive-surface-neutral-1) !important;
}

.active\:bg-light-non-interactive-surface-neutral-1:active {
  background: var(--group-light-non-interactive-surface-neutral-1) !important;
}

.focus\:bg-light-non-interactive-surface-neutral-2:focus {
  background: var(--group-light-non-interactive-surface-neutral-2) !important;
}

.hover\:bg-light-non-interactive-surface-neutral-2:hover {
  background: var(--group-light-non-interactive-surface-neutral-2) !important;
}

.active\:bg-light-non-interactive-surface-neutral-2:active {
  background: var(--group-light-non-interactive-surface-neutral-2) !important;
}

.focus\:bg-light-non-interactive-surface-neutral-3:focus {
  background: var(--group-light-non-interactive-surface-neutral-3) !important;
}

.hover\:bg-light-non-interactive-surface-neutral-3:hover {
  background: var(--group-light-non-interactive-surface-neutral-3) !important;
}

.active\:bg-light-non-interactive-surface-neutral-3:active {
  background: var(--group-light-non-interactive-surface-neutral-3) !important;
}

.focus\:bg-light-non-interactive-surface-neutral-4:focus {
  background: var(--group-light-non-interactive-surface-neutral-4) !important;
}

.hover\:bg-light-non-interactive-surface-neutral-4:hover {
  background: var(--group-light-non-interactive-surface-neutral-4) !important;
}

.active\:bg-light-non-interactive-surface-neutral-4:active {
  background: var(--group-light-non-interactive-surface-neutral-4) !important;
}

.focus\:bg-light-non-interactive-surface-neutral-5:focus {
  background: var(--group-light-non-interactive-surface-neutral-5) !important;
}

.hover\:bg-light-non-interactive-surface-neutral-5:hover {
  background: var(--group-light-non-interactive-surface-neutral-5) !important;
}

.active\:bg-light-non-interactive-surface-neutral-5:active {
  background: var(--group-light-non-interactive-surface-neutral-5) !important;
}

.focus\:bg-light-non-interactive-surface-black:focus {
  background: var(--group-light-non-interactive-surface-black) !important;
}

.hover\:bg-light-non-interactive-surface-black:hover {
  background: var(--group-light-non-interactive-surface-black) !important;
}

.active\:bg-light-non-interactive-surface-black:active {
  background: var(--group-light-non-interactive-surface-black) !important;
}

.focus\:bg-light-non-interactive-surface-brand-1:focus {
  background: var(--group-light-non-interactive-surface-brand-1) !important;
}

.hover\:bg-light-non-interactive-surface-brand-1:hover {
  background: var(--group-light-non-interactive-surface-brand-1) !important;
}

.active\:bg-light-non-interactive-surface-brand-1:active {
  background: var(--group-light-non-interactive-surface-brand-1) !important;
}

.focus\:bg-light-non-interactive-surface-brand-2:focus {
  background: var(--group-light-non-interactive-surface-brand-2) !important;
}

.hover\:bg-light-non-interactive-surface-brand-2:hover {
  background: var(--group-light-non-interactive-surface-brand-2) !important;
}

.active\:bg-light-non-interactive-surface-brand-2:active {
  background: var(--group-light-non-interactive-surface-brand-2) !important;
}

.focus\:bg-light-non-interactive-surface-brand-3:focus {
  background: var(--group-light-non-interactive-surface-brand-3) !important;
}

.hover\:bg-light-non-interactive-surface-brand-3:hover {
  background: var(--group-light-non-interactive-surface-brand-3) !important;
}

.active\:bg-light-non-interactive-surface-brand-3:active {
  background: var(--group-light-non-interactive-surface-brand-3) !important;
}

.focus\:bg-light-rag-surface-error-default-1:focus {
  background: var(--group-light-rag-surface-error-default-1) !important;
}

.hover\:bg-light-rag-surface-error-default-1:hover {
  background: var(--group-light-rag-surface-error-default-1) !important;
}

.active\:bg-light-rag-surface-error-default-1:active {
  background: var(--group-light-rag-surface-error-default-1) !important;
}

.focus\:bg-light-rag-surface-error-default2:focus {
  background: var(--group-light-rag-surface-error-default2) !important;
}

.hover\:bg-light-rag-surface-error-default2:hover {
  background: var(--group-light-rag-surface-error-default2) !important;
}

.active\:bg-light-rag-surface-error-default2:active {
  background: var(--group-light-rag-surface-error-default2) !important;
}

.focus\:bg-light-rag-surface-warning-default-1:focus {
  background: var(--group-light-rag-surface-warning-default-1) !important;
}

.hover\:bg-light-rag-surface-warning-default-1:hover {
  background: var(--group-light-rag-surface-warning-default-1) !important;
}

.active\:bg-light-rag-surface-warning-default-1:active {
  background: var(--group-light-rag-surface-warning-default-1) !important;
}

.focus\:bg-light-rag-surface-warning-default2:focus {
  background: var(--group-light-rag-surface-warning-default2) !important;
}

.hover\:bg-light-rag-surface-warning-default2:hover {
  background: var(--group-light-rag-surface-warning-default2) !important;
}

.active\:bg-light-rag-surface-warning-default2:active {
  background: var(--group-light-rag-surface-warning-default2) !important;
}

.focus\:bg-light-rag-surface-success-default-1:focus {
  background: var(--group-light-rag-surface-success-default-1) !important;
}

.hover\:bg-light-rag-surface-success-default-1:hover {
  background: var(--group-light-rag-surface-success-default-1) !important;
}

.active\:bg-light-rag-surface-success-default-1:active {
  background: var(--group-light-rag-surface-success-default-1) !important;
}

.focus\:bg-light-rag-surface-success-default2:focus {
  background: var(--group-light-rag-surface-success-default2) !important;
}

.hover\:bg-light-rag-surface-success-default2:hover {
  background: var(--group-light-rag-surface-success-default2) !important;
}

.active\:bg-light-rag-surface-success-default2:active {
  background: var(--group-light-rag-surface-success-default2) !important;
}

.focus\:bg-light-rag-surface-information-default-1:focus {
  background: var(--group-light-rag-surface-information-default-1) !important;
}

.hover\:bg-light-rag-surface-information-default-1:hover {
  background: var(--group-light-rag-surface-information-default-1) !important;
}

.active\:bg-light-rag-surface-information-default-1:active {
  background: var(--group-light-rag-surface-information-default-1) !important;
}

.focus\:bg-light-rag-surface-information-default2:focus {
  background: var(--group-light-rag-surface-information-default2) !important;
}

.hover\:bg-light-rag-surface-information-default2:hover {
  background: var(--group-light-rag-surface-information-default2) !important;
}

.active\:bg-light-rag-surface-information-default2:active {
  background: var(--group-light-rag-surface-information-default2) !important;
}

.focus\:bg-dark-rag-surface-error-default-1:focus {
  background: var(--group-dark-rag-surface-error-default-1) !important;
}

.hover\:bg-dark-rag-surface-error-default-1:hover {
  background: var(--group-dark-rag-surface-error-default-1) !important;
}

.active\:bg-dark-rag-surface-error-default-1:active {
  background: var(--group-dark-rag-surface-error-default-1) !important;
}

.focus\:bg-dark-rag-surface-error-default2:focus {
  background: var(--group-dark-rag-surface-error-default2) !important;
}

.hover\:bg-dark-rag-surface-error-default2:hover {
  background: var(--group-dark-rag-surface-error-default2) !important;
}

.active\:bg-dark-rag-surface-error-default2:active {
  background: var(--group-dark-rag-surface-error-default2) !important;
}

.focus\:bg-dark-rag-surface-warning-default-1:focus {
  background: var(--group-dark-rag-surface-warning-default-1) !important;
}

.hover\:bg-dark-rag-surface-warning-default-1:hover {
  background: var(--group-dark-rag-surface-warning-default-1) !important;
}

.active\:bg-dark-rag-surface-warning-default-1:active {
  background: var(--group-dark-rag-surface-warning-default-1) !important;
}

.focus\:bg-dark-rag-surface-warning-default2:focus {
  background: var(--group-dark-rag-surface-warning-default2) !important;
}

.hover\:bg-dark-rag-surface-warning-default2:hover {
  background: var(--group-dark-rag-surface-warning-default2) !important;
}

.active\:bg-dark-rag-surface-warning-default2:active {
  background: var(--group-dark-rag-surface-warning-default2) !important;
}

.focus\:bg-dark-rag-surface-success-default-1:focus {
  background: var(--group-dark-rag-surface-success-default-1) !important;
}

.hover\:bg-dark-rag-surface-success-default-1:hover {
  background: var(--group-dark-rag-surface-success-default-1) !important;
}

.active\:bg-dark-rag-surface-success-default-1:active {
  background: var(--group-dark-rag-surface-success-default-1) !important;
}

.focus\:bg-dark-rag-surface-success-default2:focus {
  background: var(--group-dark-rag-surface-success-default2) !important;
}

.hover\:bg-dark-rag-surface-success-default2:hover {
  background: var(--group-dark-rag-surface-success-default2) !important;
}

.active\:bg-dark-rag-surface-success-default2:active {
  background: var(--group-dark-rag-surface-success-default2) !important;
}

.focus\:bg-dark-rag-surface-information-default-1:focus {
  background: var(--group-dark-rag-surface-information-default-1) !important;
}

.hover\:bg-dark-rag-surface-information-default-1:hover {
  background: var(--group-dark-rag-surface-information-default-1) !important;
}

.active\:bg-dark-rag-surface-information-default-1:active {
  background: var(--group-dark-rag-surface-information-default-1) !important;
}

.focus\:bg-dark-rag-surface-information-default2:focus {
  background: var(--group-dark-rag-surface-information-default2) !important;
}

.hover\:bg-dark-rag-surface-information-default2:hover {
  background: var(--group-dark-rag-surface-information-default2) !important;
}

.active\:bg-dark-rag-surface-information-default2:active {
  background: var(--group-dark-rag-surface-information-default2) !important;
}

.focus\:bg-light-interactive-on-dark-surface-primary:focus {
  background: var(--group-light-interactive-on-dark-surface-primary) !important;
}

.hover\:bg-light-interactive-on-dark-surface-primary:hover {
  background: var(--group-light-interactive-on-dark-surface-primary) !important;
}

.active\:bg-light-interactive-on-dark-surface-primary:active {
  background: var(--group-light-interactive-on-dark-surface-primary) !important;
}

.focus\:bg-light-interactive-on-dark-surface-primary-hover:focus {
  background: var(--group-light-interactive-on-dark-surface-primary-hover) !important;
}

.hover\:bg-light-interactive-on-dark-surface-primary-hover:hover {
  background: var(--group-light-interactive-on-dark-surface-primary-hover) !important;
}

.active\:bg-light-interactive-on-dark-surface-primary-hover:active {
  background: var(--group-light-interactive-on-dark-surface-primary-hover) !important;
}

.focus\:bg-light-interactive-on-dark-surface-primary-pressed:focus {
  background: var(--group-light-interactive-on-dark-surface-primary-pressed) !important;
}

.hover\:bg-light-interactive-on-dark-surface-primary-pressed:hover {
  background: var(--group-light-interactive-on-dark-surface-primary-pressed) !important;
}

.active\:bg-light-interactive-on-dark-surface-primary-pressed:active {
  background: var(--group-light-interactive-on-dark-surface-primary-pressed) !important;
}

.focus\:bg-light-interactive-on-dark-surface-primary-disabled:focus {
  background: var(--group-light-interactive-on-dark-surface-primary-disabled) !important;
}

.hover\:bg-light-interactive-on-dark-surface-primary-disabled:hover {
  background: var(--group-light-interactive-on-dark-surface-primary-disabled) !important;
}

.active\:bg-light-interactive-on-dark-surface-primary-disabled:active {
  background: var(--group-light-interactive-on-dark-surface-primary-disabled) !important;
}

.focus\:bg-light-interactive-on-dark-surface-active:focus {
  background: var(--group-light-interactive-on-dark-surface-active) !important;
}

.hover\:bg-light-interactive-on-dark-surface-active:hover {
  background: var(--group-light-interactive-on-dark-surface-active) !important;
}

.active\:bg-light-interactive-on-dark-surface-active:active {
  background: var(--group-light-interactive-on-dark-surface-active) !important;
}

.focus\:bg-light-interactive-on-dark-surface-active-hover:focus {
  background: var(--group-light-interactive-on-dark-surface-active-hover) !important;
}

.hover\:bg-light-interactive-on-dark-surface-active-hover:hover {
  background: var(--group-light-interactive-on-dark-surface-active-hover) !important;
}

.active\:bg-light-interactive-on-dark-surface-active-hover:active {
  background: var(--group-light-interactive-on-dark-surface-active-hover) !important;
}

.focus\:bg-light-interactive-on-dark-surface-active-pressed:focus {
  background: var(--group-light-interactive-on-dark-surface-active-pressed) !important;
}

.hover\:bg-light-interactive-on-dark-surface-active-pressed:hover {
  background: var(--group-light-interactive-on-dark-surface-active-pressed) !important;
}

.active\:bg-light-interactive-on-dark-surface-active-pressed:active {
  background: var(--group-light-interactive-on-dark-surface-active-pressed) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-1:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-1) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-1:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-1) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-1:active {
  background: var(--group-light-interactive-on-dark-surface-brand-1) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-1-hover:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-1-hover) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-1-hover:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-1-hover) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-1-hover:active {
  background: var(--group-light-interactive-on-dark-surface-brand-1-hover) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-1-pressed:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-1-pressed) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-1-pressed:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-1-pressed) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-1-pressed:active {
  background: var(--group-light-interactive-on-dark-surface-brand-1-pressed) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-1-disabled:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-1-disabled) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-1-disabled:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-1-disabled) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-1-disabled:active {
  background: var(--group-light-interactive-on-dark-surface-brand-1-disabled) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-1-processing:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-1-processing) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-1-processing:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-1-processing) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-1-processing:active {
  background: var(--group-light-interactive-on-dark-surface-brand-1-processing) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-2:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-2) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-2:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-2) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-2:active {
  background: var(--group-light-interactive-on-dark-surface-brand-2) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-2-hover:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-2-hover) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-2-hover:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-2-hover) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-2-hover:active {
  background: var(--group-light-interactive-on-dark-surface-brand-2-hover) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-2-pressed:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-2-pressed) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-2-pressed:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-2-pressed) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-2-pressed:active {
  background: var(--group-light-interactive-on-dark-surface-brand-2-pressed) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-2-disabled:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-2-disabled) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-2-disabled:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-2-disabled) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-2-disabled:active {
  background: var(--group-light-interactive-on-dark-surface-brand-2-disabled) !important;
}

.focus\:bg-light-interactive-on-dark-surface-brand-2-processing:focus {
  background: var(--group-light-interactive-on-dark-surface-brand-2-processing) !important;
}

.hover\:bg-light-interactive-on-dark-surface-brand-2-processing:hover {
  background: var(--group-light-interactive-on-dark-surface-brand-2-processing) !important;
}

.active\:bg-light-interactive-on-dark-surface-brand-2-processing:active {
  background: var(--group-light-interactive-on-dark-surface-brand-2-processing) !important;
}

.focus\:bg-core-primary:focus {
  background: var(--group-color-base-core-primary) !important;
}

.hover\:bg-core-primary:hover {
  background: var(--group-color-base-core-primary) !important;
}

.active\:bg-core-primary:active {
  background: var(--group-color-base-core-primary) !important;
}

.focus\:bg-white:focus {
  background: var(--group-color-base-white) !important;
}

.hover\:bg-white:hover {
  background: var(--group-color-base-white) !important;
}

.active\:bg-white:active {
  background: var(--group-color-base-white) !important;
}

.focus\:bg-black:focus {
  background: var(--group-color-base-black) !important;
}

.hover\:bg-black:hover {
  background: var(--group-color-base-black) !important;
}

.active\:bg-black:active {
  background: var(--group-color-base-black) !important;
}

.focus\:bg-neutral-1:focus {
  background: var(--group-color-base-neutral-1) !important;
}

.hover\:bg-neutral-1:hover {
  background: var(--group-color-base-neutral-1) !important;
}

.active\:bg-neutral-1:active {
  background: var(--group-color-base-neutral-1) !important;
}

.focus\:bg-neutral-2:focus {
  background: var(--group-color-base-neutral-2) !important;
}

.hover\:bg-neutral-2:hover {
  background: var(--group-color-base-neutral-2) !important;
}

.active\:bg-neutral-2:active {
  background: var(--group-color-base-neutral-2) !important;
}

.focus\:bg-neutral-3:focus {
  background: var(--group-color-base-neutral-3) !important;
}

.hover\:bg-neutral-3:hover {
  background: var(--group-color-base-neutral-3) !important;
}

.active\:bg-neutral-3:active {
  background: var(--group-color-base-neutral-3) !important;
}

.focus\:bg-neutral-4:focus {
  background: var(--group-color-base-neutral-4) !important;
}

.hover\:bg-neutral-4:hover {
  background: var(--group-color-base-neutral-4) !important;
}

.active\:bg-neutral-4:active {
  background: var(--group-color-base-neutral-4) !important;
}

.focus\:bg-neutral-5:focus {
  background: var(--group-color-base-neutral-5) !important;
}

.hover\:bg-neutral-5:hover {
  background: var(--group-color-base-neutral-5) !important;
}

.active\:bg-neutral-5:active {
  background: var(--group-color-base-neutral-5) !important;
}

.focus\:bg-info-default-1:focus {
  background: var(--group-color-base-info-default-1) !important;
}

.hover\:bg-info-default-1:hover {
  background: var(--group-color-base-info-default-1) !important;
}

.active\:bg-info-default-1:active {
  background: var(--group-color-base-info-default-1) !important;
}

.focus\:bg-info-default-2:focus {
  background: var(--group-color-base-info-default-2) !important;
}

.hover\:bg-info-default-2:hover {
  background: var(--group-color-base-info-default-2) !important;
}

.active\:bg-info-default-2:active {
  background: var(--group-color-base-info-default-2) !important;
}

.focus\:bg-success-default-1:focus {
  background: var(--group-color-base-success-default-1) !important;
}

.hover\:bg-success-default-1:hover {
  background: var(--group-color-base-success-default-1) !important;
}

.active\:bg-success-default-1:active {
  background: var(--group-color-base-success-default-1) !important;
}

.focus\:bg-success-default-2:focus {
  background: var(--group-color-base-success-default-2) !important;
}

.hover\:bg-success-default-2:hover {
  background: var(--group-color-base-success-default-2) !important;
}

.active\:bg-success-default-2:active {
  background: var(--group-color-base-success-default-2) !important;
}

.focus\:bg-warning-default-1:focus {
  background: var(--group-color-base-warning-default-1) !important;
}

.hover\:bg-warning-default-1:hover {
  background: var(--group-color-base-warning-default-1) !important;
}

.active\:bg-warning-default-1:active {
  background: var(--group-color-base-warning-default-1) !important;
}

.focus\:bg-warning-default-2:focus {
  background: var(--group-color-base-warning-default-2) !important;
}

.hover\:bg-warning-default-2:hover {
  background: var(--group-color-base-warning-default-2) !important;
}

.active\:bg-warning-default-2:active {
  background: var(--group-color-base-warning-default-2) !important;
}

.focus\:bg-error-default-1:focus {
  background: var(--group-color-base-error-default-1) !important;
}

.hover\:bg-error-default-1:hover {
  background: var(--group-color-base-error-default-1) !important;
}

.active\:bg-error-default-1:active {
  background: var(--group-color-base-error-default-1) !important;
}

.focus\:bg-error-default-2:focus {
  background: var(--group-color-base-error-default-2) !important;
}

.hover\:bg-error-default-2:hover {
  background: var(--group-color-base-error-default-2) !important;
}

.active\:bg-error-default-2:active {
  background: var(--group-color-base-error-default-2) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-primary:focus {
  background: var(--group-dark-interactive-on-dark-surface-primary) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-primary:hover {
  background: var(--group-dark-interactive-on-dark-surface-primary) !important;
}

.active\:bg-dark-interactive-on-dark-surface-primary:active {
  background: var(--group-dark-interactive-on-dark-surface-primary) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-primary-hover:focus {
  background: var(--group-dark-interactive-on-dark-surface-primary-hover) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-primary-hover:hover {
  background: var(--group-dark-interactive-on-dark-surface-primary-hover) !important;
}

.active\:bg-dark-interactive-on-dark-surface-primary-hover:active {
  background: var(--group-dark-interactive-on-dark-surface-primary-hover) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-primary-pressed:focus {
  background: var(--group-dark-interactive-on-dark-surface-primary-pressed) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-primary-pressed:hover {
  background: var(--group-dark-interactive-on-dark-surface-primary-pressed) !important;
}

.active\:bg-dark-interactive-on-dark-surface-primary-pressed:active {
  background: var(--group-dark-interactive-on-dark-surface-primary-pressed) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-primary-disabled:focus {
  background: var(--group-dark-interactive-on-dark-surface-primary-disabled) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-primary-disabled:hover {
  background: var(--group-dark-interactive-on-dark-surface-primary-disabled) !important;
}

.active\:bg-dark-interactive-on-dark-surface-primary-disabled:active {
  background: var(--group-dark-interactive-on-dark-surface-primary-disabled) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-active:focus {
  background: var(--group-dark-interactive-on-dark-surface-active) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-active:hover {
  background: var(--group-dark-interactive-on-dark-surface-active) !important;
}

.active\:bg-dark-interactive-on-dark-surface-active:active {
  background: var(--group-dark-interactive-on-dark-surface-active) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-active-hover:focus {
  background: var(--group-dark-interactive-on-dark-surface-active-hover) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-active-hover:hover {
  background: var(--group-dark-interactive-on-dark-surface-active-hover) !important;
}

.active\:bg-dark-interactive-on-dark-surface-active-hover:active {
  background: var(--group-dark-interactive-on-dark-surface-active-hover) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-active-pressed:focus {
  background: var(--group-dark-interactive-on-dark-surface-active-pressed) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-active-pressed:hover {
  background: var(--group-dark-interactive-on-dark-surface-active-pressed) !important;
}

.active\:bg-dark-interactive-on-dark-surface-active-pressed:active {
  background: var(--group-dark-interactive-on-dark-surface-active-pressed) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-1:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-1) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-1:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-1) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-1:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-1) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-1-hover:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-hover) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-1-hover:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-hover) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-1-hover:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-hover) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-1-pressed:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-pressed) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-1-pressed:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-pressed) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-1-pressed:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-pressed) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-1-disabled:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-disabled) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-1-disabled:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-disabled) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-1-disabled:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-disabled) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-1-processing:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-processing) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-1-processing:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-processing) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-1-processing:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-1-processing) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-2:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-2) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-2:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-2) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-2:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-2) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-2-hover:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-hover) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-2-hover:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-hover) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-2-hover:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-hover) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-2-pressed:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-pressed) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-2-pressed:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-pressed) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-2-pressed:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-pressed) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-2-disabled:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-disabled) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-2-disabled:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-disabled) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-2-disabled:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-disabled) !important;
}

.focus\:bg-dark-interactive-on-dark-surface-brand-2-processing:focus {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-processing) !important;
}

.hover\:bg-dark-interactive-on-dark-surface-brand-2-processing:hover {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-processing) !important;
}

.active\:bg-dark-interactive-on-dark-surface-brand-2-processing:active {
  background: var(--group-dark-interactive-on-dark-surface-brand-2-processing) !important;
}

.focus\:bg-transparent:focus {
  background: transparent !important;
}

.hover\:bg-transparent:hover {
  background: transparent !important;
}

.active\:bg-transparent:active {
  background: transparent !important;
}

.bg-transparent {
  background: transparent !important;
}
/*# sourceMappingURL=utilities/background.css.map */