/**
  * @deprecated Use desktop with t-shirt size breakpoints instead
  */
.bg-white {
  background: var(--bal-background-color-white) !important;
}

.bg-transparent {
  background: var(--bal-background-color-transparent) !important;
}

.bg-sky-light {
  background: var(--bal-background-color-sky-light) !important;
}

.bg-sky {
  background: var(--bal-background-color-sky) !important;
}

.bg-sky-dark {
  background: var(--bal-background-color-sky-dark) !important;
}

.bg-disabled {
  background: var(--bal-background-color-disabled) !important;
}

.bg-info {
  background: var(--bal-background-color-info) !important;
}

.bg-info-light {
  background: var(--bal-background-color-info-light) !important;
}

.bg-info-dark {
  background: var(--bal-background-color-info-dark) !important;
}

.bg-info-darker {
  background: var(--bal-background-color-info-darker) !important;
}

.bg-info-darkest {
  background: var(--bal-background-color-info-darkest) !important;
}

.bg-success {
  background: var(--bal-background-color-success) !important;
}

.bg-success-lighter {
  background: var(--bal-background-color-success-lighter) !important;
}

.bg-success-light {
  background: var(--bal-background-color-success-light) !important;
}

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

.bg-success-darker {
  background: var(--bal-background-color-success-darker) !important;
}

.bg-success-darkest {
  background: var(--bal-background-color-success-darkest) !important;
}

.bg-warning-lighter {
  background: var(--bal-background-color-warning-lighter) !important;
}

.bg-warning-light {
  background: var(--bal-background-color-warning-light) !important;
}

.bg-warning {
  background: var(--bal-background-color-warning) !important;
}

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

.bg-warning-darker {
  background: var(--bal-background-color-warning-darker) !important;
}

.bg-warning-darkest {
  background: var(--bal-background-color-warning-darkest) !important;
}

.bg-danger-lighter {
  background: var(--bal-background-color-danger-lighter) !important;
}

.bg-danger-light {
  background: var(--bal-background-color-danger-light) !important;
}

.bg-danger {
  background: var(--bal-background-color-danger) !important;
}

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

.bg-danger-darker {
  background: var(--bal-background-color-danger-darker) !important;
}

.bg-danger-darkest {
  background: var(--bal-background-color-danger-darkest) !important;
}

.bg-green-light-2 {
  background: var(--bal-background-color-green-light-2) !important;
}

.bg-grey-light {
  background: var(--bal-background-color-grey-light) !important;
}

.bg-grey {
  background: var(--bal-background-color-grey) !important;
}

.bg-grey-dark {
  background: var(--bal-background-color-grey-dark) !important;
}

.bg-primary-light {
  background: var(--bal-background-color-primary-light) !important;
}

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

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

.bg-primary-active {
  background: var(--bal-background-color-primary-active) !important;
}

.bg-green-lighter {
  background: var(--bal-background-color-green-lighter) !important;
}

.bg-green-light {
  background: var(--bal-background-color-green-light) !important;
}

.bg-green {
  background: var(--bal-background-color-green) !important;
}

.bg-purple-lighter {
  background: var(--bal-background-color-purple-lighter) !important;
}

.bg-purple-light {
  background: var(--bal-background-color-purple-light) !important;
}

.bg-purple {
  background: var(--bal-background-color-purple) !important;
}

.bg-red-lighter {
  background: var(--bal-background-color-red-lighter) !important;
}

.bg-red-light {
  background: var(--bal-background-color-red-light) !important;
}

.bg-red {
  background: var(--bal-background-color-red) !important;
}

.bg-yellow-lighter {
  background: var(--bal-background-color-yellow-lighter) !important;
}

.bg-yellow-light {
  background: var(--bal-background-color-yellow-light) !important;
}

.bg-yellow {
  background: var(--bal-background-color-yellow) !important;
}

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

.bg-neutral {
  background: var(--bal-color-neutral) !important;
}

.bg-danger-1 {
  background: var(--bal-color-danger-1) !important;
}

.bg-danger-2 {
  background: var(--bal-color-danger-2) !important;
}

.bg-danger-3 {
  background: var(--bal-color-danger-3) !important;
}

.bg-danger-4 {
  background: var(--bal-color-danger-4) !important;
}

.bg-danger-5 {
  background: var(--bal-color-danger-5) !important;
}

.bg-danger-6 {
  background: var(--bal-color-danger-6) !important;
}

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

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

.bg-warning-3 {
  background: var(--bal-color-warning-3) !important;
}

.bg-warning-4 {
  background: var(--bal-color-warning-4) !important;
}

.bg-warning-5 {
  background: var(--bal-color-warning-5) !important;
}

.bg-warning-6 {
  background: var(--bal-color-warning-6) !important;
}

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

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

.bg-success-3 {
  background: var(--bal-color-success-3) !important;
}

.bg-success-4 {
  background: var(--bal-color-success-4) !important;
}

.bg-success-5 {
  background: var(--bal-color-success-5) !important;
}

.bg-success-6 {
  background: var(--bal-color-success-6) !important;
}

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

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

.bg-info-3 {
  background: var(--bal-color-info-3) !important;
}

.bg-info-4 {
  background: var(--bal-color-info-4) !important;
}

.bg-info-5 {
  background: var(--bal-color-info-5) !important;
}

.bg-info-6 {
  background: var(--bal-color-info-6) !important;
}

.bg-sky-1 {
  background: var(--bal-color-sky-1) !important;
}

.bg-sky-2 {
  background: var(--bal-color-sky-2) !important;
}

.bg-sky-3 {
  background: var(--bal-color-sky-3) !important;
}

.bg-sky-4 {
  background: var(--bal-color-sky-4) !important;
}

.bg-sky-5 {
  background: var(--bal-color-sky-5) !important;
}

.bg-sky-6 {
  background: var(--bal-color-sky-6) !important;
}

.bg-grey-1 {
  background: var(--bal-color-grey-1) !important;
}

.bg-grey-2 {
  background: var(--bal-color-grey-2) !important;
}

.bg-grey-3 {
  background: var(--bal-color-grey-3) !important;
}

.bg-grey-4 {
  background: var(--bal-color-grey-4) !important;
}

.bg-grey-5 {
  background: var(--bal-color-grey-5) !important;
}

.bg-grey-6 {
  background: var(--bal-color-grey-6) !important;
}

.bg-yellow-1 {
  background: var(--bal-color-yellow-1) !important;
}

.bg-yellow-2 {
  background: var(--bal-color-yellow-2) !important;
}

.bg-yellow-3 {
  background: var(--bal-color-yellow-3) !important;
}

.bg-yellow-4 {
  background: var(--bal-color-yellow-4) !important;
}

.bg-yellow-5 {
  background: var(--bal-color-yellow-5) !important;
}

.bg-yellow-6 {
  background: var(--bal-color-yellow-6) !important;
}

.bg-red-1 {
  background: var(--bal-color-red-1) !important;
}

.bg-red-2 {
  background: var(--bal-color-red-2) !important;
}

.bg-red-3 {
  background: var(--bal-color-red-3) !important;
}

.bg-red-4 {
  background: var(--bal-color-red-4) !important;
}

.bg-red-5 {
  background: var(--bal-color-red-5) !important;
}

.bg-red-6 {
  background: var(--bal-color-red-6) !important;
}

.bg-green-1 {
  background: var(--bal-color-green-1) !important;
}

.bg-green-2 {
  background: var(--bal-color-green-2) !important;
}

.bg-green-3 {
  background: var(--bal-color-green-3) !important;
}

.bg-green-4 {
  background: var(--bal-color-green-4) !important;
}

.bg-green-5 {
  background: var(--bal-color-green-5) !important;
}

.bg-green-6 {
  background: var(--bal-color-green-6) !important;
}

.bg-purple-1 {
  background: var(--bal-color-purple-1) !important;
}

.bg-purple-2 {
  background: var(--bal-color-purple-2) !important;
}

.bg-purple-3 {
  background: var(--bal-color-purple-3) !important;
}

.bg-purple-4 {
  background: var(--bal-color-purple-4) !important;
}

.bg-purple-5 {
  background: var(--bal-color-purple-5) !important;
}

.bg-purple-6 {
  background: var(--bal-color-purple-6) !important;
}

.bg-primary-1 {
  background: var(--bal-color-primary-1) !important;
}

.bg-primary-2 {
  background: var(--bal-color-primary-2) !important;
}

.bg-primary-3 {
  background: var(--bal-color-primary-3) !important;
}

.bg-primary-4 {
  background: var(--bal-color-primary-4) !important;
}

.bg-primary-5 {
  background: var(--bal-color-primary-5) !important;
}

.bg-primary-6 {
  background: var(--bal-color-primary-6) !important;
}

.focus\:bg-white:focus {
  background: var(--bal-background-color-white) !important;
}

.hover\:bg-white:hover {
  background: var(--bal-background-color-white) !important;
}

.active\:bg-white:active {
  background: var(--bal-background-color-white) !important;
}

.focus\:bg-transparent:focus {
  background: var(--bal-background-color-transparent) !important;
}

.hover\:bg-transparent:hover {
  background: var(--bal-background-color-transparent) !important;
}

.active\:bg-transparent:active {
  background: var(--bal-background-color-transparent) !important;
}

.focus\:bg-sky-light:focus {
  background: var(--bal-background-color-sky-light) !important;
}

.hover\:bg-sky-light:hover {
  background: var(--bal-background-color-sky-light) !important;
}

.active\:bg-sky-light:active {
  background: var(--bal-background-color-sky-light) !important;
}

.focus\:bg-sky:focus {
  background: var(--bal-background-color-sky) !important;
}

.hover\:bg-sky:hover {
  background: var(--bal-background-color-sky) !important;
}

.active\:bg-sky:active {
  background: var(--bal-background-color-sky) !important;
}

.focus\:bg-sky-dark:focus {
  background: var(--bal-background-color-sky-dark) !important;
}

.hover\:bg-sky-dark:hover {
  background: var(--bal-background-color-sky-dark) !important;
}

.active\:bg-sky-dark:active {
  background: var(--bal-background-color-sky-dark) !important;
}

.focus\:bg-disabled:focus {
  background: var(--bal-background-color-disabled) !important;
}

.hover\:bg-disabled:hover {
  background: var(--bal-background-color-disabled) !important;
}

.active\:bg-disabled:active {
  background: var(--bal-background-color-disabled) !important;
}

.focus\:bg-info:focus {
  background: var(--bal-background-color-info) !important;
}

.hover\:bg-info:hover {
  background: var(--bal-background-color-info) !important;
}

.active\:bg-info:active {
  background: var(--bal-background-color-info) !important;
}

.focus\:bg-info-light:focus {
  background: var(--bal-background-color-info-light) !important;
}

.hover\:bg-info-light:hover {
  background: var(--bal-background-color-info-light) !important;
}

.active\:bg-info-light:active {
  background: var(--bal-background-color-info-light) !important;
}

.focus\:bg-info-dark:focus {
  background: var(--bal-background-color-info-dark) !important;
}

.hover\:bg-info-dark:hover {
  background: var(--bal-background-color-info-dark) !important;
}

.active\:bg-info-dark:active {
  background: var(--bal-background-color-info-dark) !important;
}

.focus\:bg-info-darker:focus {
  background: var(--bal-background-color-info-darker) !important;
}

.hover\:bg-info-darker:hover {
  background: var(--bal-background-color-info-darker) !important;
}

.active\:bg-info-darker:active {
  background: var(--bal-background-color-info-darker) !important;
}

.focus\:bg-info-darkest:focus {
  background: var(--bal-background-color-info-darkest) !important;
}

.hover\:bg-info-darkest:hover {
  background: var(--bal-background-color-info-darkest) !important;
}

.active\:bg-info-darkest:active {
  background: var(--bal-background-color-info-darkest) !important;
}

.focus\:bg-success:focus {
  background: var(--bal-background-color-success) !important;
}

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

.active\:bg-success:active {
  background: var(--bal-background-color-success) !important;
}

.focus\:bg-success-lighter:focus {
  background: var(--bal-background-color-success-lighter) !important;
}

.hover\:bg-success-lighter:hover {
  background: var(--bal-background-color-success-lighter) !important;
}

.active\:bg-success-lighter:active {
  background: var(--bal-background-color-success-lighter) !important;
}

.focus\:bg-success-light:focus {
  background: var(--bal-background-color-success-light) !important;
}

.hover\:bg-success-light:hover {
  background: var(--bal-background-color-success-light) !important;
}

.active\:bg-success-light:active {
  background: var(--bal-background-color-success-light) !important;
}

.focus\:bg-success-dark:focus {
  background: var(--bal-background-color-success-dark) !important;
}

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

.active\:bg-success-dark:active {
  background: var(--bal-background-color-success-dark) !important;
}

.focus\:bg-success-darker:focus {
  background: var(--bal-background-color-success-darker) !important;
}

.hover\:bg-success-darker:hover {
  background: var(--bal-background-color-success-darker) !important;
}

.active\:bg-success-darker:active {
  background: var(--bal-background-color-success-darker) !important;
}

.focus\:bg-success-darkest:focus {
  background: var(--bal-background-color-success-darkest) !important;
}

.hover\:bg-success-darkest:hover {
  background: var(--bal-background-color-success-darkest) !important;
}

.active\:bg-success-darkest:active {
  background: var(--bal-background-color-success-darkest) !important;
}

.focus\:bg-warning-lighter:focus {
  background: var(--bal-background-color-warning-lighter) !important;
}

.hover\:bg-warning-lighter:hover {
  background: var(--bal-background-color-warning-lighter) !important;
}

.active\:bg-warning-lighter:active {
  background: var(--bal-background-color-warning-lighter) !important;
}

.focus\:bg-warning-light:focus {
  background: var(--bal-background-color-warning-light) !important;
}

.hover\:bg-warning-light:hover {
  background: var(--bal-background-color-warning-light) !important;
}

.active\:bg-warning-light:active {
  background: var(--bal-background-color-warning-light) !important;
}

.focus\:bg-warning:focus {
  background: var(--bal-background-color-warning) !important;
}

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

.active\:bg-warning:active {
  background: var(--bal-background-color-warning) !important;
}

.focus\:bg-warning-dark:focus {
  background: var(--bal-background-color-warning-dark) !important;
}

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

.active\:bg-warning-dark:active {
  background: var(--bal-background-color-warning-dark) !important;
}

.focus\:bg-warning-darker:focus {
  background: var(--bal-background-color-warning-darker) !important;
}

.hover\:bg-warning-darker:hover {
  background: var(--bal-background-color-warning-darker) !important;
}

.active\:bg-warning-darker:active {
  background: var(--bal-background-color-warning-darker) !important;
}

.focus\:bg-warning-darkest:focus {
  background: var(--bal-background-color-warning-darkest) !important;
}

.hover\:bg-warning-darkest:hover {
  background: var(--bal-background-color-warning-darkest) !important;
}

.active\:bg-warning-darkest:active {
  background: var(--bal-background-color-warning-darkest) !important;
}

.focus\:bg-danger-lighter:focus {
  background: var(--bal-background-color-danger-lighter) !important;
}

.hover\:bg-danger-lighter:hover {
  background: var(--bal-background-color-danger-lighter) !important;
}

.active\:bg-danger-lighter:active {
  background: var(--bal-background-color-danger-lighter) !important;
}

.focus\:bg-danger-light:focus {
  background: var(--bal-background-color-danger-light) !important;
}

.hover\:bg-danger-light:hover {
  background: var(--bal-background-color-danger-light) !important;
}

.active\:bg-danger-light:active {
  background: var(--bal-background-color-danger-light) !important;
}

.focus\:bg-danger:focus {
  background: var(--bal-background-color-danger) !important;
}

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

.active\:bg-danger:active {
  background: var(--bal-background-color-danger) !important;
}

.focus\:bg-danger-dark:focus {
  background: var(--bal-background-color-danger-dark) !important;
}

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

.active\:bg-danger-dark:active {
  background: var(--bal-background-color-danger-dark) !important;
}

.focus\:bg-danger-darker:focus {
  background: var(--bal-background-color-danger-darker) !important;
}

.hover\:bg-danger-darker:hover {
  background: var(--bal-background-color-danger-darker) !important;
}

.active\:bg-danger-darker:active {
  background: var(--bal-background-color-danger-darker) !important;
}

.focus\:bg-danger-darkest:focus {
  background: var(--bal-background-color-danger-darkest) !important;
}

.hover\:bg-danger-darkest:hover {
  background: var(--bal-background-color-danger-darkest) !important;
}

.active\:bg-danger-darkest:active {
  background: var(--bal-background-color-danger-darkest) !important;
}

.focus\:bg-green-light-2:focus {
  background: var(--bal-background-color-green-light-2) !important;
}

.hover\:bg-green-light-2:hover {
  background: var(--bal-background-color-green-light-2) !important;
}

.active\:bg-green-light-2:active {
  background: var(--bal-background-color-green-light-2) !important;
}

.focus\:bg-grey-light:focus {
  background: var(--bal-background-color-grey-light) !important;
}

.hover\:bg-grey-light:hover {
  background: var(--bal-background-color-grey-light) !important;
}

.active\:bg-grey-light:active {
  background: var(--bal-background-color-grey-light) !important;
}

.focus\:bg-grey:focus {
  background: var(--bal-background-color-grey) !important;
}

.hover\:bg-grey:hover {
  background: var(--bal-background-color-grey) !important;
}

.active\:bg-grey:active {
  background: var(--bal-background-color-grey) !important;
}

.focus\:bg-grey-dark:focus {
  background: var(--bal-background-color-grey-dark) !important;
}

.hover\:bg-grey-dark:hover {
  background: var(--bal-background-color-grey-dark) !important;
}

.active\:bg-grey-dark:active {
  background: var(--bal-background-color-grey-dark) !important;
}

.focus\:bg-primary-light:focus {
  background: var(--bal-background-color-primary-light) !important;
}

.hover\:bg-primary-light:hover {
  background: var(--bal-background-color-primary-light) !important;
}

.active\:bg-primary-light:active {
  background: var(--bal-background-color-primary-light) !important;
}

.focus\:bg-primary:focus {
  background: var(--bal-background-color-primary) !important;
}

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

.active\:bg-primary:active {
  background: var(--bal-background-color-primary) !important;
}

.focus\:bg-primary-hover:focus {
  background: var(--bal-background-color-primary-hover) !important;
}

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

.active\:bg-primary-hover:active {
  background: var(--bal-background-color-primary-hover) !important;
}

.focus\:bg-primary-active:focus {
  background: var(--bal-background-color-primary-active) !important;
}

.hover\:bg-primary-active:hover {
  background: var(--bal-background-color-primary-active) !important;
}

.active\:bg-primary-active:active {
  background: var(--bal-background-color-primary-active) !important;
}

.focus\:bg-green-lighter:focus {
  background: var(--bal-background-color-green-lighter) !important;
}

.hover\:bg-green-lighter:hover {
  background: var(--bal-background-color-green-lighter) !important;
}

.active\:bg-green-lighter:active {
  background: var(--bal-background-color-green-lighter) !important;
}

.focus\:bg-green-light:focus {
  background: var(--bal-background-color-green-light) !important;
}

.hover\:bg-green-light:hover {
  background: var(--bal-background-color-green-light) !important;
}

.active\:bg-green-light:active {
  background: var(--bal-background-color-green-light) !important;
}

.focus\:bg-green:focus {
  background: var(--bal-background-color-green) !important;
}

.hover\:bg-green:hover {
  background: var(--bal-background-color-green) !important;
}

.active\:bg-green:active {
  background: var(--bal-background-color-green) !important;
}

.focus\:bg-purple-lighter:focus {
  background: var(--bal-background-color-purple-lighter) !important;
}

.hover\:bg-purple-lighter:hover {
  background: var(--bal-background-color-purple-lighter) !important;
}

.active\:bg-purple-lighter:active {
  background: var(--bal-background-color-purple-lighter) !important;
}

.focus\:bg-purple-light:focus {
  background: var(--bal-background-color-purple-light) !important;
}

.hover\:bg-purple-light:hover {
  background: var(--bal-background-color-purple-light) !important;
}

.active\:bg-purple-light:active {
  background: var(--bal-background-color-purple-light) !important;
}

.focus\:bg-purple:focus {
  background: var(--bal-background-color-purple) !important;
}

.hover\:bg-purple:hover {
  background: var(--bal-background-color-purple) !important;
}

.active\:bg-purple:active {
  background: var(--bal-background-color-purple) !important;
}

.focus\:bg-red-lighter:focus {
  background: var(--bal-background-color-red-lighter) !important;
}

.hover\:bg-red-lighter:hover {
  background: var(--bal-background-color-red-lighter) !important;
}

.active\:bg-red-lighter:active {
  background: var(--bal-background-color-red-lighter) !important;
}

.focus\:bg-red-light:focus {
  background: var(--bal-background-color-red-light) !important;
}

.hover\:bg-red-light:hover {
  background: var(--bal-background-color-red-light) !important;
}

.active\:bg-red-light:active {
  background: var(--bal-background-color-red-light) !important;
}

.focus\:bg-red:focus {
  background: var(--bal-background-color-red) !important;
}

.hover\:bg-red:hover {
  background: var(--bal-background-color-red) !important;
}

.active\:bg-red:active {
  background: var(--bal-background-color-red) !important;
}

.focus\:bg-yellow-lighter:focus {
  background: var(--bal-background-color-yellow-lighter) !important;
}

.hover\:bg-yellow-lighter:hover {
  background: var(--bal-background-color-yellow-lighter) !important;
}

.active\:bg-yellow-lighter:active {
  background: var(--bal-background-color-yellow-lighter) !important;
}

.focus\:bg-yellow-light:focus {
  background: var(--bal-background-color-yellow-light) !important;
}

.hover\:bg-yellow-light:hover {
  background: var(--bal-background-color-yellow-light) !important;
}

.active\:bg-yellow-light:active {
  background: var(--bal-background-color-yellow-light) !important;
}

.focus\:bg-yellow:focus {
  background: var(--bal-background-color-yellow) !important;
}

.hover\:bg-yellow:hover {
  background: var(--bal-background-color-yellow) !important;
}

.active\:bg-yellow:active {
  background: var(--bal-background-color-yellow) !important;
}

.focus\:bg-black:focus {
  background: var(--bal-color-black) !important;
}

.hover\:bg-black:hover {
  background: var(--bal-color-black) !important;
}

.active\:bg-black:active {
  background: var(--bal-color-black) !important;
}

.focus\:bg-neutral:focus {
  background: var(--bal-color-neutral) !important;
}

.hover\:bg-neutral:hover {
  background: var(--bal-color-neutral) !important;
}

.active\:bg-neutral:active {
  background: var(--bal-color-neutral) !important;
}

.focus\:bg-danger-1:focus {
  background: var(--bal-color-danger-1) !important;
}

.hover\:bg-danger-1:hover {
  background: var(--bal-color-danger-1) !important;
}

.active\:bg-danger-1:active {
  background: var(--bal-color-danger-1) !important;
}

.focus\:bg-danger-2:focus {
  background: var(--bal-color-danger-2) !important;
}

.hover\:bg-danger-2:hover {
  background: var(--bal-color-danger-2) !important;
}

.active\:bg-danger-2:active {
  background: var(--bal-color-danger-2) !important;
}

.focus\:bg-danger-3:focus {
  background: var(--bal-color-danger-3) !important;
}

.hover\:bg-danger-3:hover {
  background: var(--bal-color-danger-3) !important;
}

.active\:bg-danger-3:active {
  background: var(--bal-color-danger-3) !important;
}

.focus\:bg-danger-4:focus {
  background: var(--bal-color-danger-4) !important;
}

.hover\:bg-danger-4:hover {
  background: var(--bal-color-danger-4) !important;
}

.active\:bg-danger-4:active {
  background: var(--bal-color-danger-4) !important;
}

.focus\:bg-danger-5:focus {
  background: var(--bal-color-danger-5) !important;
}

.hover\:bg-danger-5:hover {
  background: var(--bal-color-danger-5) !important;
}

.active\:bg-danger-5:active {
  background: var(--bal-color-danger-5) !important;
}

.focus\:bg-danger-6:focus {
  background: var(--bal-color-danger-6) !important;
}

.hover\:bg-danger-6:hover {
  background: var(--bal-color-danger-6) !important;
}

.active\:bg-danger-6:active {
  background: var(--bal-color-danger-6) !important;
}

.focus\:bg-warning-1:focus {
  background: var(--bal-color-warning-1) !important;
}

.hover\:bg-warning-1:hover {
  background: var(--bal-color-warning-1) !important;
}

.active\:bg-warning-1:active {
  background: var(--bal-color-warning-1) !important;
}

.focus\:bg-warning-2:focus {
  background: var(--bal-color-warning-2) !important;
}

.hover\:bg-warning-2:hover {
  background: var(--bal-color-warning-2) !important;
}

.active\:bg-warning-2:active {
  background: var(--bal-color-warning-2) !important;
}

.focus\:bg-warning-3:focus {
  background: var(--bal-color-warning-3) !important;
}

.hover\:bg-warning-3:hover {
  background: var(--bal-color-warning-3) !important;
}

.active\:bg-warning-3:active {
  background: var(--bal-color-warning-3) !important;
}

.focus\:bg-warning-4:focus {
  background: var(--bal-color-warning-4) !important;
}

.hover\:bg-warning-4:hover {
  background: var(--bal-color-warning-4) !important;
}

.active\:bg-warning-4:active {
  background: var(--bal-color-warning-4) !important;
}

.focus\:bg-warning-5:focus {
  background: var(--bal-color-warning-5) !important;
}

.hover\:bg-warning-5:hover {
  background: var(--bal-color-warning-5) !important;
}

.active\:bg-warning-5:active {
  background: var(--bal-color-warning-5) !important;
}

.focus\:bg-warning-6:focus {
  background: var(--bal-color-warning-6) !important;
}

.hover\:bg-warning-6:hover {
  background: var(--bal-color-warning-6) !important;
}

.active\:bg-warning-6:active {
  background: var(--bal-color-warning-6) !important;
}

.focus\:bg-success-1:focus {
  background: var(--bal-color-success-1) !important;
}

.hover\:bg-success-1:hover {
  background: var(--bal-color-success-1) !important;
}

.active\:bg-success-1:active {
  background: var(--bal-color-success-1) !important;
}

.focus\:bg-success-2:focus {
  background: var(--bal-color-success-2) !important;
}

.hover\:bg-success-2:hover {
  background: var(--bal-color-success-2) !important;
}

.active\:bg-success-2:active {
  background: var(--bal-color-success-2) !important;
}

.focus\:bg-success-3:focus {
  background: var(--bal-color-success-3) !important;
}

.hover\:bg-success-3:hover {
  background: var(--bal-color-success-3) !important;
}

.active\:bg-success-3:active {
  background: var(--bal-color-success-3) !important;
}

.focus\:bg-success-4:focus {
  background: var(--bal-color-success-4) !important;
}

.hover\:bg-success-4:hover {
  background: var(--bal-color-success-4) !important;
}

.active\:bg-success-4:active {
  background: var(--bal-color-success-4) !important;
}

.focus\:bg-success-5:focus {
  background: var(--bal-color-success-5) !important;
}

.hover\:bg-success-5:hover {
  background: var(--bal-color-success-5) !important;
}

.active\:bg-success-5:active {
  background: var(--bal-color-success-5) !important;
}

.focus\:bg-success-6:focus {
  background: var(--bal-color-success-6) !important;
}

.hover\:bg-success-6:hover {
  background: var(--bal-color-success-6) !important;
}

.active\:bg-success-6:active {
  background: var(--bal-color-success-6) !important;
}

.focus\:bg-info-1:focus {
  background: var(--bal-color-info-1) !important;
}

.hover\:bg-info-1:hover {
  background: var(--bal-color-info-1) !important;
}

.active\:bg-info-1:active {
  background: var(--bal-color-info-1) !important;
}

.focus\:bg-info-2:focus {
  background: var(--bal-color-info-2) !important;
}

.hover\:bg-info-2:hover {
  background: var(--bal-color-info-2) !important;
}

.active\:bg-info-2:active {
  background: var(--bal-color-info-2) !important;
}

.focus\:bg-info-3:focus {
  background: var(--bal-color-info-3) !important;
}

.hover\:bg-info-3:hover {
  background: var(--bal-color-info-3) !important;
}

.active\:bg-info-3:active {
  background: var(--bal-color-info-3) !important;
}

.focus\:bg-info-4:focus {
  background: var(--bal-color-info-4) !important;
}

.hover\:bg-info-4:hover {
  background: var(--bal-color-info-4) !important;
}

.active\:bg-info-4:active {
  background: var(--bal-color-info-4) !important;
}

.focus\:bg-info-5:focus {
  background: var(--bal-color-info-5) !important;
}

.hover\:bg-info-5:hover {
  background: var(--bal-color-info-5) !important;
}

.active\:bg-info-5:active {
  background: var(--bal-color-info-5) !important;
}

.focus\:bg-info-6:focus {
  background: var(--bal-color-info-6) !important;
}

.hover\:bg-info-6:hover {
  background: var(--bal-color-info-6) !important;
}

.active\:bg-info-6:active {
  background: var(--bal-color-info-6) !important;
}

.focus\:bg-sky-1:focus {
  background: var(--bal-color-sky-1) !important;
}

.hover\:bg-sky-1:hover {
  background: var(--bal-color-sky-1) !important;
}

.active\:bg-sky-1:active {
  background: var(--bal-color-sky-1) !important;
}

.focus\:bg-sky-2:focus {
  background: var(--bal-color-sky-2) !important;
}

.hover\:bg-sky-2:hover {
  background: var(--bal-color-sky-2) !important;
}

.active\:bg-sky-2:active {
  background: var(--bal-color-sky-2) !important;
}

.focus\:bg-sky-3:focus {
  background: var(--bal-color-sky-3) !important;
}

.hover\:bg-sky-3:hover {
  background: var(--bal-color-sky-3) !important;
}

.active\:bg-sky-3:active {
  background: var(--bal-color-sky-3) !important;
}

.focus\:bg-sky-4:focus {
  background: var(--bal-color-sky-4) !important;
}

.hover\:bg-sky-4:hover {
  background: var(--bal-color-sky-4) !important;
}

.active\:bg-sky-4:active {
  background: var(--bal-color-sky-4) !important;
}

.focus\:bg-sky-5:focus {
  background: var(--bal-color-sky-5) !important;
}

.hover\:bg-sky-5:hover {
  background: var(--bal-color-sky-5) !important;
}

.active\:bg-sky-5:active {
  background: var(--bal-color-sky-5) !important;
}

.focus\:bg-sky-6:focus {
  background: var(--bal-color-sky-6) !important;
}

.hover\:bg-sky-6:hover {
  background: var(--bal-color-sky-6) !important;
}

.active\:bg-sky-6:active {
  background: var(--bal-color-sky-6) !important;
}

.focus\:bg-grey-1:focus {
  background: var(--bal-color-grey-1) !important;
}

.hover\:bg-grey-1:hover {
  background: var(--bal-color-grey-1) !important;
}

.active\:bg-grey-1:active {
  background: var(--bal-color-grey-1) !important;
}

.focus\:bg-grey-2:focus {
  background: var(--bal-color-grey-2) !important;
}

.hover\:bg-grey-2:hover {
  background: var(--bal-color-grey-2) !important;
}

.active\:bg-grey-2:active {
  background: var(--bal-color-grey-2) !important;
}

.focus\:bg-grey-3:focus {
  background: var(--bal-color-grey-3) !important;
}

.hover\:bg-grey-3:hover {
  background: var(--bal-color-grey-3) !important;
}

.active\:bg-grey-3:active {
  background: var(--bal-color-grey-3) !important;
}

.focus\:bg-grey-4:focus {
  background: var(--bal-color-grey-4) !important;
}

.hover\:bg-grey-4:hover {
  background: var(--bal-color-grey-4) !important;
}

.active\:bg-grey-4:active {
  background: var(--bal-color-grey-4) !important;
}

.focus\:bg-grey-5:focus {
  background: var(--bal-color-grey-5) !important;
}

.hover\:bg-grey-5:hover {
  background: var(--bal-color-grey-5) !important;
}

.active\:bg-grey-5:active {
  background: var(--bal-color-grey-5) !important;
}

.focus\:bg-grey-6:focus {
  background: var(--bal-color-grey-6) !important;
}

.hover\:bg-grey-6:hover {
  background: var(--bal-color-grey-6) !important;
}

.active\:bg-grey-6:active {
  background: var(--bal-color-grey-6) !important;
}

.focus\:bg-yellow-1:focus {
  background: var(--bal-color-yellow-1) !important;
}

.hover\:bg-yellow-1:hover {
  background: var(--bal-color-yellow-1) !important;
}

.active\:bg-yellow-1:active {
  background: var(--bal-color-yellow-1) !important;
}

.focus\:bg-yellow-2:focus {
  background: var(--bal-color-yellow-2) !important;
}

.hover\:bg-yellow-2:hover {
  background: var(--bal-color-yellow-2) !important;
}

.active\:bg-yellow-2:active {
  background: var(--bal-color-yellow-2) !important;
}

.focus\:bg-yellow-3:focus {
  background: var(--bal-color-yellow-3) !important;
}

.hover\:bg-yellow-3:hover {
  background: var(--bal-color-yellow-3) !important;
}

.active\:bg-yellow-3:active {
  background: var(--bal-color-yellow-3) !important;
}

.focus\:bg-yellow-4:focus {
  background: var(--bal-color-yellow-4) !important;
}

.hover\:bg-yellow-4:hover {
  background: var(--bal-color-yellow-4) !important;
}

.active\:bg-yellow-4:active {
  background: var(--bal-color-yellow-4) !important;
}

.focus\:bg-yellow-5:focus {
  background: var(--bal-color-yellow-5) !important;
}

.hover\:bg-yellow-5:hover {
  background: var(--bal-color-yellow-5) !important;
}

.active\:bg-yellow-5:active {
  background: var(--bal-color-yellow-5) !important;
}

.focus\:bg-yellow-6:focus {
  background: var(--bal-color-yellow-6) !important;
}

.hover\:bg-yellow-6:hover {
  background: var(--bal-color-yellow-6) !important;
}

.active\:bg-yellow-6:active {
  background: var(--bal-color-yellow-6) !important;
}

.focus\:bg-red-1:focus {
  background: var(--bal-color-red-1) !important;
}

.hover\:bg-red-1:hover {
  background: var(--bal-color-red-1) !important;
}

.active\:bg-red-1:active {
  background: var(--bal-color-red-1) !important;
}

.focus\:bg-red-2:focus {
  background: var(--bal-color-red-2) !important;
}

.hover\:bg-red-2:hover {
  background: var(--bal-color-red-2) !important;
}

.active\:bg-red-2:active {
  background: var(--bal-color-red-2) !important;
}

.focus\:bg-red-3:focus {
  background: var(--bal-color-red-3) !important;
}

.hover\:bg-red-3:hover {
  background: var(--bal-color-red-3) !important;
}

.active\:bg-red-3:active {
  background: var(--bal-color-red-3) !important;
}

.focus\:bg-red-4:focus {
  background: var(--bal-color-red-4) !important;
}

.hover\:bg-red-4:hover {
  background: var(--bal-color-red-4) !important;
}

.active\:bg-red-4:active {
  background: var(--bal-color-red-4) !important;
}

.focus\:bg-red-5:focus {
  background: var(--bal-color-red-5) !important;
}

.hover\:bg-red-5:hover {
  background: var(--bal-color-red-5) !important;
}

.active\:bg-red-5:active {
  background: var(--bal-color-red-5) !important;
}

.focus\:bg-red-6:focus {
  background: var(--bal-color-red-6) !important;
}

.hover\:bg-red-6:hover {
  background: var(--bal-color-red-6) !important;
}

.active\:bg-red-6:active {
  background: var(--bal-color-red-6) !important;
}

.focus\:bg-green-1:focus {
  background: var(--bal-color-green-1) !important;
}

.hover\:bg-green-1:hover {
  background: var(--bal-color-green-1) !important;
}

.active\:bg-green-1:active {
  background: var(--bal-color-green-1) !important;
}

.focus\:bg-green-2:focus {
  background: var(--bal-color-green-2) !important;
}

.hover\:bg-green-2:hover {
  background: var(--bal-color-green-2) !important;
}

.active\:bg-green-2:active {
  background: var(--bal-color-green-2) !important;
}

.focus\:bg-green-3:focus {
  background: var(--bal-color-green-3) !important;
}

.hover\:bg-green-3:hover {
  background: var(--bal-color-green-3) !important;
}

.active\:bg-green-3:active {
  background: var(--bal-color-green-3) !important;
}

.focus\:bg-green-4:focus {
  background: var(--bal-color-green-4) !important;
}

.hover\:bg-green-4:hover {
  background: var(--bal-color-green-4) !important;
}

.active\:bg-green-4:active {
  background: var(--bal-color-green-4) !important;
}

.focus\:bg-green-5:focus {
  background: var(--bal-color-green-5) !important;
}

.hover\:bg-green-5:hover {
  background: var(--bal-color-green-5) !important;
}

.active\:bg-green-5:active {
  background: var(--bal-color-green-5) !important;
}

.focus\:bg-green-6:focus {
  background: var(--bal-color-green-6) !important;
}

.hover\:bg-green-6:hover {
  background: var(--bal-color-green-6) !important;
}

.active\:bg-green-6:active {
  background: var(--bal-color-green-6) !important;
}

.focus\:bg-purple-1:focus {
  background: var(--bal-color-purple-1) !important;
}

.hover\:bg-purple-1:hover {
  background: var(--bal-color-purple-1) !important;
}

.active\:bg-purple-1:active {
  background: var(--bal-color-purple-1) !important;
}

.focus\:bg-purple-2:focus {
  background: var(--bal-color-purple-2) !important;
}

.hover\:bg-purple-2:hover {
  background: var(--bal-color-purple-2) !important;
}

.active\:bg-purple-2:active {
  background: var(--bal-color-purple-2) !important;
}

.focus\:bg-purple-3:focus {
  background: var(--bal-color-purple-3) !important;
}

.hover\:bg-purple-3:hover {
  background: var(--bal-color-purple-3) !important;
}

.active\:bg-purple-3:active {
  background: var(--bal-color-purple-3) !important;
}

.focus\:bg-purple-4:focus {
  background: var(--bal-color-purple-4) !important;
}

.hover\:bg-purple-4:hover {
  background: var(--bal-color-purple-4) !important;
}

.active\:bg-purple-4:active {
  background: var(--bal-color-purple-4) !important;
}

.focus\:bg-purple-5:focus {
  background: var(--bal-color-purple-5) !important;
}

.hover\:bg-purple-5:hover {
  background: var(--bal-color-purple-5) !important;
}

.active\:bg-purple-5:active {
  background: var(--bal-color-purple-5) !important;
}

.focus\:bg-purple-6:focus {
  background: var(--bal-color-purple-6) !important;
}

.hover\:bg-purple-6:hover {
  background: var(--bal-color-purple-6) !important;
}

.active\:bg-purple-6:active {
  background: var(--bal-color-purple-6) !important;
}

.focus\:bg-primary-1:focus {
  background: var(--bal-color-primary-1) !important;
}

.hover\:bg-primary-1:hover {
  background: var(--bal-color-primary-1) !important;
}

.active\:bg-primary-1:active {
  background: var(--bal-color-primary-1) !important;
}

.focus\:bg-primary-2:focus {
  background: var(--bal-color-primary-2) !important;
}

.hover\:bg-primary-2:hover {
  background: var(--bal-color-primary-2) !important;
}

.active\:bg-primary-2:active {
  background: var(--bal-color-primary-2) !important;
}

.focus\:bg-primary-3:focus {
  background: var(--bal-color-primary-3) !important;
}

.hover\:bg-primary-3:hover {
  background: var(--bal-color-primary-3) !important;
}

.active\:bg-primary-3:active {
  background: var(--bal-color-primary-3) !important;
}

.focus\:bg-primary-4:focus {
  background: var(--bal-color-primary-4) !important;
}

.hover\:bg-primary-4:hover {
  background: var(--bal-color-primary-4) !important;
}

.active\:bg-primary-4:active {
  background: var(--bal-color-primary-4) !important;
}

.focus\:bg-primary-5:focus {
  background: var(--bal-color-primary-5) !important;
}

.hover\:bg-primary-5:hover {
  background: var(--bal-color-primary-5) !important;
}

.active\:bg-primary-5:active {
  background: var(--bal-color-primary-5) !important;
}

.focus\:bg-primary-6:focus {
  background: var(--bal-color-primary-6) !important;
}

.hover\:bg-primary-6:hover {
  background: var(--bal-color-primary-6) !important;
}

.active\:bg-primary-6:active {
  background: var(--bal-color-primary-6) !important;
}

/**
  * Deprecated
  */
.bg-primary {
  color: var(--bal-color-white);
}

.bg-primary-3 {
  color: var(--bal-color-white);
}

.bg-primary-4 {
  color: var(--bal-color-white);
}

.bg-primary-5 {
  color: var(--bal-color-white);
}

.bg-primary-6 {
  color: var(--bal-color-white);
}

.focus\:bg-primary:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary:active {
  color: var(--bal-color-white);
}

.focus\:bg-primary-3:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary-3:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary-3:active {
  color: var(--bal-color-white);
}

.focus\:bg-primary-4:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary-4:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary-4:active {
  color: var(--bal-color-white);
}

.focus\:bg-primary-5:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary-5:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary-5:active {
  color: var(--bal-color-white);
}

.focus\:bg-primary-6:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary-6:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary-6:active {
  color: var(--bal-color-white);
}
/*# sourceMappingURL=utilities/background.css.map */