:root {
  --primary-50: #e4f1ff;
  --primary-100: #bfdcff;
  --primary-200: #95c7ff;
  --primary-300: #6bb1ff;
  --primary-400: #519fff;
  --primary-500: #458eff;
  --primary-600: #487fff;
  --primary-700: #486cea;
  --primary-800: #4759d6;
  --primary-900: #4536b6;
  --neutral-50: #f5f6fa;
  --neutral-100: #f3f4f6;
  --neutral-200: #ebecef;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;
  --warning-50: #fefce8;
  --warning-100: #fef9c3;
  --warning-200: #fef08a;
  --warning-300: #fde047;
  --warning-400: #facc15;
  --warning-500: #eab308;
  --warning-600: #ff9f29;
  --warning-700: #f39016;
  --warning-800: #e58209;
  --warning-900: #d77907;
  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-200: #bfdbfe;
  --info-300: #93c5fd;
  --info-400: #60a5fa;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;
  --info-800: #1e40af;
  --info-900: #1e3a8a;
  --cyan-50: #e2f5fb;
  --cyan-100: #daf6ff;
  --cyan-200: #85daf4;
  --cyan-300: #6cdafc;
  --cyan-400: #48cef7;
  --cyan-500: #2bc9f9;
  --cyan-600: #00b8f2;
  --cyan-700: #03a9dc;
  --cyan-800: #049dcb;
  --cyan-900: #0390bb;
  --dark-1: #1b2431;
  --dark-2: #273142;
  --dark-3: #323d4e;
  --lilac-50: #f0e1ff;
  --lilac-100: #ebd7ff;
  --lilac-200: #dcc0f8;
  --lilac-300: #cd9ffa;
  --lilac-400: #c48afe;
  --lilac-500: #b66dff;
  --lilac-600: #8252e9;
  --lilac-700: #6f37e6;
  --lilac-800: #601eef;
  --light-50: #f5f6fa;
  --light-100: #f3f4f6;
  --light-600: #e4f1ff;
  --light-700: #374151;
  --light-800: #1f2937;
  --success-main: #45b369;
  --success-surface: #daf0e1;
  --success-border: #b5e1c3;
  --success-hover: #009f5e;
  --success-pressed: #006038;
  --success-focus: rgba(69, 179, 105, 0.1490196078);
  --info-main: #144bd6;
  --info-surface: #e7eefc;
  --info-border: #aecafc;
  --info-hover: #0a51ce;
  --info-pressed: #06307c;
  --info-focus: rgba(20, 75, 214, 0.1490196078);
  --warning-main: #ff9f29;
  --warning-surface: #fff9e2;
  --warning-border: #ffeba6;
  --warning-hover: #d69705;
  --warning-pressed: #c28800;
  --warning-focus: rgba(255, 192, 45, 0.1490196078);
  --danger-main: #ef4a00;
  --danger-surface: #fcdae2;
  --danger-border: #f9b5c6;
  --danger-hover: #d53128;
  --danger-pressed: #801d18;
  --danger-focus: rgba(239, 71, 112, 0.1490196078);
  --cyan: #00b8f2;
  --indigo: #7f27ff;
  --purple: #8252e9;
  --red: #e30a0a;
  --yellow: #f4941e;
  --orange: #f86624;
  --pink: #de3ace;
}

/* === color css start === */
.text-primary-50 {
  color: var(--primary-50) !important;
}

.text-primary-100 {
  color: var(--primary-100) !important;
}

.text-primary-200 {
  color: var(--primary-200) !important;
}

.text-primary-300 {
  color: var(--primary-300) !important;
}

.text-primary-400 {
  color: var(--primary-400) !important;
}

.text-primary-500 {
  color: var(--primary-500) !important;
}

.text-primary-600 {
  color: var(--primary-600) !important;
}

.text-primary-700 {
  color: var(--primary-700) !important;
}

.text-primary-800 {
  color: var(--primary-800) !important;
}

.text-primary-900 {
  color: var(--primary-900) !important;
}

.text-neutral-50 {
  color: var(--neutral-50) !important;
}

.text-neutral-100 {
  color: var(--neutral-100) !important;
}

.text-neutral-200 {
  color: var(--neutral-200) !important;
}

.text-neutral-300 {
  color: var(--neutral-300) !important;
}

.text-neutral-400 {
  color: var(--neutral-400) !important;
}

.text-neutral-500 {
  color: var(--neutral-500) !important;
}

.text-neutral-600 {
  color: var(--neutral-600) !important;
}

.text-neutral-700 {
  color: var(--neutral-700) !important;
}

.text-neutral-800 {
  color: var(--neutral-800) !important;
}

.text-neutral-900 {
  color: var(--neutral-900) !important;
}

.text-danger-50 {
  color: var(--danger-50) !important;
}

.text-danger-100 {
  color: var(--danger-100) !important;
}

.text-danger-200 {
  color: var(--danger-200) !important;
}

.text-danger-300 {
  color: var(--danger-300) !important;
}

.text-danger-400 {
  color: var(--danger-400) !important;
}

.text-danger-500 {
  color: var(--danger-500) !important;
}

.text-danger-600 {
  color: var(--danger-600) !important;
}

.text-danger-700 {
  color: var(--danger-700) !important;
}

.text-danger-800 {
  color: var(--danger-800) !important;
}

.text-danger-900 {
  color: var(--danger-900) !important;
}

.text-success-50 {
  color: var(--success-50) !important;
}

.text-success-100 {
  color: var(--success-100) !important;
}

.text-success-200 {
  color: var(--success-200) !important;
}

.text-success-300 {
  color: var(--success-300) !important;
}

.text-success-400 {
  color: var(--success-400) !important;
}

.text-success-500 {
  color: var(--success-500) !important;
}

.text-success-600 {
  color: var(--success-600) !important;
}

.text-success-700 {
  color: var(--success-700) !important;
}

.text-success-800 {
  color: var(--success-800) !important;
}

.text-success-900 {
  color: var(--success-900) !important;
}

.text-warning-50 {
  color: var(--warning-50) !important;
}

.text-warning-100 {
  color: var(--warning-100) !important;
}

.text-warning-200 {
  color: var(--warning-200) !important;
}

.text-warning-300 {
  color: var(--warning-300) !important;
}

.text-warning-400 {
  color: var(--warning-400) !important;
}

.text-warning-500 {
  color: var(--warning-500) !important;
}

.text-warning-600 {
  color: var(--warning-600) !important;
}

.text-warning-700 {
  color: var(--warning-700) !important;
}

.text-warning-800 {
  color: var(--warning-800) !important;
}

.text-warning-900 {
  color: var(--warning-900) !important;
}

.text-info-50 {
  color: var(--info-50) !important;
}

.text-info-100 {
  color: var(--info-100) !important;
}

.text-info-200 {
  color: var(--info-200) !important;
}

.text-info-300 {
  color: var(--info-300) !important;
}

.text-info-400 {
  color: var(--info-400) !important;
}

.text-info-500 {
  color: var(--info-500) !important;
}

.text-info-600 {
  color: var(--info-600) !important;
}

.text-info-700 {
  color: var(--info-700) !important;
}

.text-info-800 {
  color: var(--info-800) !important;
}

.text-info-900 {
  color: var(--info-900) !important;
}

.text-cyan-50 {
  color: var(--cyan-50) !important;
}

.text-cyan-100 {
  color: var(--cyan-100) !important;
}

.text-cyan-200 {
  color: var(--cyan-200) !important;
}

.text-cyan-300 {
  color: var(--cyan-300) !important;
}

.text-cyan-400 {
  color: var(--cyan-400) !important;
}

.text-cyan-500 {
  color: var(--cyan-500) !important;
}

.text-cyan-600 {
  color: var(--cyan-600) !important;
}

.text-cyan-700 {
  color: var(--cyan-700) !important;
}

.text-cyan-800 {
  color: var(--cyan-800) !important;
}

.text-cyan-900 {
  color: var(--cyan-900) !important;
}

.text-dark-1 {
  color: var(--dark-1) !important;
}

.text-dark-2 {
  color: var(--dark-2) !important;
}

.text-dark-3 {
  color: var(--dark-3) !important;
}

.text-lilac-50 {
  color: var(--lilac-50) !important;
}

.text-lilac-100 {
  color: var(--lilac-100) !important;
}

.text-lilac-200 {
  color: var(--lilac-200) !important;
}

.text-lilac-300 {
  color: var(--lilac-300) !important;
}

.text-lilac-400 {
  color: var(--lilac-400) !important;
}

.text-lilac-500 {
  color: var(--lilac-500) !important;
}

.text-lilac-600 {
  color: var(--lilac-600) !important;
}

.text-lilac-700 {
  color: var(--lilac-700) !important;
}

.text-lilac-800 {
  color: var(--lilac-800) !important;
}

.text-light-50 {
  color: var(--light-50) !important;
}

.text-light-100 {
  color: var(--light-100) !important;
}

.text-light-600 {
  color: var(--light-600) !important;
}

.text-light-700 {
  color: var(--light-700) !important;
}

.text-light-800 {
  color: var(--light-800) !important;
}

.text-hover-primary-50:hover {
  color: var(--primary-50) !important;
}

.text-hover-primary-100:hover {
  color: var(--primary-100) !important;
}

.text-hover-primary-200:hover {
  color: var(--primary-200) !important;
}

.text-hover-primary-300:hover {
  color: var(--primary-300) !important;
}

.text-hover-primary-400:hover {
  color: var(--primary-400) !important;
}

.text-hover-primary-500:hover {
  color: var(--primary-500) !important;
}

.text-hover-primary-600:hover {
  color: var(--primary-600) !important;
}

.text-hover-primary-700:hover {
  color: var(--primary-700) !important;
}

.text-hover-primary-800:hover {
  color: var(--primary-800) !important;
}

.text-hover-primary-900:hover {
  color: var(--primary-900) !important;
}

.text-hover-neutral-50:hover {
  color: var(--neutral-50) !important;
}

.text-hover-neutral-100:hover {
  color: var(--neutral-100) !important;
}

.text-hover-neutral-200:hover {
  color: var(--neutral-200) !important;
}

.text-hover-neutral-300:hover {
  color: var(--neutral-300) !important;
}

.text-hover-neutral-400:hover {
  color: var(--neutral-400) !important;
}

.text-hover-neutral-500:hover {
  color: var(--neutral-500) !important;
}

.text-hover-neutral-600:hover {
  color: var(--neutral-600) !important;
}

.text-hover-neutral-700:hover {
  color: var(--neutral-700) !important;
}

.text-hover-neutral-800:hover {
  color: var(--neutral-800) !important;
}

.text-hover-neutral-900:hover {
  color: var(--neutral-900) !important;
}

.text-hover-danger-50:hover {
  color: var(--danger-50) !important;
}

.text-hover-danger-100:hover {
  color: var(--danger-100) !important;
}

.text-hover-danger-200:hover {
  color: var(--danger-200) !important;
}

.text-hover-danger-300:hover {
  color: var(--danger-300) !important;
}

.text-hover-danger-400:hover {
  color: var(--danger-400) !important;
}

.text-hover-danger-500:hover {
  color: var(--danger-500) !important;
}

.text-hover-danger-600:hover {
  color: var(--danger-600) !important;
}

.text-hover-danger-700:hover {
  color: var(--danger-700) !important;
}

.text-hover-danger-800:hover {
  color: var(--danger-800) !important;
}

.text-hover-danger-900:hover {
  color: var(--danger-900) !important;
}

.text-hover-success-50:hover {
  color: var(--success-50) !important;
}

.text-hover-success-100:hover {
  color: var(--success-100) !important;
}

.text-hover-success-200:hover {
  color: var(--success-200) !important;
}

.text-hover-success-300:hover {
  color: var(--success-300) !important;
}

.text-hover-success-400:hover {
  color: var(--success-400) !important;
}

.text-hover-success-500:hover {
  color: var(--success-500) !important;
}

.text-hover-success-600:hover {
  color: var(--success-600) !important;
}

.text-hover-success-700:hover {
  color: var(--success-700) !important;
}

.text-hover-success-800:hover {
  color: var(--success-800) !important;
}

.text-hover-success-900:hover {
  color: var(--success-900) !important;
}

.text-hover-warning-50:hover {
  color: var(--warning-50) !important;
}

.text-hover-warning-100:hover {
  color: var(--warning-100) !important;
}

.text-hover-warning-200:hover {
  color: var(--warning-200) !important;
}

.text-hover-warning-300:hover {
  color: var(--warning-300) !important;
}

.text-hover-warning-400:hover {
  color: var(--warning-400) !important;
}

.text-hover-warning-500:hover {
  color: var(--warning-500) !important;
}

.text-hover-warning-600:hover {
  color: var(--warning-600) !important;
}

.text-hover-warning-700:hover {
  color: var(--warning-700) !important;
}

.text-hover-warning-800:hover {
  color: var(--warning-800) !important;
}

.text-hover-warning-900:hover {
  color: var(--warning-900) !important;
}

.text-hover-info-50:hover {
  color: var(--info-50) !important;
}

.text-hover-info-100:hover {
  color: var(--info-100) !important;
}

.text-hover-info-200:hover {
  color: var(--info-200) !important;
}

.text-hover-info-300:hover {
  color: var(--info-300) !important;
}

.text-hover-info-400:hover {
  color: var(--info-400) !important;
}

.text-hover-info-500:hover {
  color: var(--info-500) !important;
}

.text-hover-info-600:hover {
  color: var(--info-600) !important;
}

.text-hover-info-700:hover {
  color: var(--info-700) !important;
}

.text-hover-info-800:hover {
  color: var(--info-800) !important;
}

.text-hover-info-900:hover {
  color: var(--info-900) !important;
}

.text-hover-cyan-50:hover {
  color: var(--cyan-50) !important;
}

.text-hover-cyan-100:hover {
  color: var(--cyan-100) !important;
}

.text-hover-cyan-200:hover {
  color: var(--cyan-200) !important;
}

.text-hover-cyan-300:hover {
  color: var(--cyan-300) !important;
}

.text-hover-cyan-400:hover {
  color: var(--cyan-400) !important;
}

.text-hover-cyan-500:hover {
  color: var(--cyan-500) !important;
}

.text-hover-cyan-600:hover {
  color: var(--cyan-600) !important;
}

.text-hover-cyan-700:hover {
  color: var(--cyan-700) !important;
}

.text-hover-cyan-800:hover {
  color: var(--cyan-800) !important;
}

.text-hover-cyan-900:hover {
  color: var(--cyan-900) !important;
}

.text-hover-dark-1:hover {
  color: var(--dark-1) !important;
}

.text-hover-dark-2:hover {
  color: var(--dark-2) !important;
}

.text-hover-dark-3:hover {
  color: var(--dark-3) !important;
}

.text-hover-lilac-50:hover {
  color: var(--lilac-50) !important;
}

.text-hover-lilac-100:hover {
  color: var(--lilac-100) !important;
}

.text-hover-lilac-200:hover {
  color: var(--lilac-200) !important;
}

.text-hover-lilac-300:hover {
  color: var(--lilac-300) !important;
}

.text-hover-lilac-400:hover {
  color: var(--lilac-400) !important;
}

.text-hover-lilac-500:hover {
  color: var(--lilac-500) !important;
}

.text-hover-lilac-600:hover {
  color: var(--lilac-600) !important;
}

.text-hover-lilac-700:hover {
  color: var(--lilac-700) !important;
}

.text-hover-lilac-800:hover {
  color: var(--lilac-800) !important;
}

.text-hover-light-50:hover {
  color: var(--light-50) !important;
}

.text-hover-light-100:hover {
  color: var(--light-100) !important;
}

.text-hover-light-600:hover {
  color: var(--light-600) !important;
}

.text-hover-light-700:hover {
  color: var(--light-700) !important;
}

.text-hover-light-800:hover {
  color: var(--light-800) !important;
}

.text-success-main {
  color: var(--success-main);
}

.text-success-surface {
  color: var(--success-surface);
}

.text-success-border {
  color: var(--success-border);
}

.text-success-hover {
  color: var(--success-hover);
}

.text-success-pressed {
  color: var(--success-pressed);
}

.text-success-focus {
  color: var(--success-focus);
}

.text-info-main {
  color: var(--info-main);
}

.text-info-surface {
  color: var(--info-surface);
}

.text-info-border {
  color: var(--info-border);
}

.text-info-hover {
  color: var(--info-hover);
}

.text-info-pressed {
  color: var(--info-pressed);
}

.text-info-focus {
  color: var(--info-focus);
}

.text-warning-main {
  color: var(--warning-main);
}

.text-warning-surface {
  color: var(--warning-surface);
}

.text-warning-border {
  color: var(--warning-border);
}

.text-warning-hover {
  color: var(--warning-hover);
}

.text-warning-pressed {
  color: var(--warning-pressed);
}

.text-warning-focus {
  color: var(--warning-focus);
}

.text-danger-main {
  color: var(--danger-main);
}

.text-danger-surface {
  color: var(--danger-surface);
}

.text-danger-border {
  color: var(--danger-border);
}

.text-danger-hover {
  color: var(--danger-hover);
}

.text-danger-pressed {
  color: var(--danger-pressed);
}

.text-danger-focus {
  color: var(--danger-focus);
}

.text-cyan {
  color: var(--cyan);
}

.text-indigo {
  color: var(--indigo);
}

.text-purple {
  color: var(--purple);
}

.text-red {
  color: var(--red);
}

.text-yellow {
  color: var(--yellow);
}

.text-orange {
  color: var(--orange);
}

.text-pink {
  color: var(--pink);
}

.text-primary-light {
  color: var(--text-primary-light) !important;
}

.text-secondary-light {
  color: var(--text-secondary-light);
}

.text-secondary-dark {
  color: var(--text-secondary-dark);
}

.text-base {
  color: var(--white) !important;
}

.text-black {
  color: var(--black) !important;
}

.hover-text-primary:hover,
.btn.hover-text-primary:hover {
  color: var(--primary-600) !important;
}

.hover-text-success:hover,
.btn.hover-text-success:hover {
  color: var(--success-main) !important;
}

.hover-text-info:hover,
.btn.hover-text-info:hover {
  color: var(--info-main) !important;
}

.hover-text-warning:hover,
.btn.hover-text-warning:hover {
  color: var(--warning-main) !important;
}

.hover-text-danger:hover,
.btn.hover-text-danger:hover {
  color: var(--danger-main) !important;
}

.hover-text-white:hover,
.btn.hover-text-white:hover {
  color: var(--base) !important;
}

/* === color css end === */

/* === bg css start === */
.bg-primary-50 {
  background-color: var(--primary-50) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-cyan-50 {
  background-color: var(--cyan-50) !important;
}

.bg-cyan-100 {
  background-color: var(--cyan-100) !important;
}

.bg-cyan-200 {
  background-color: var(--cyan-200) !important;
}

.bg-cyan-300 {
  background-color: var(--cyan-300) !important;
}

.bg-cyan-400 {
  background-color: var(--cyan-400) !important;
}

.bg-cyan-500 {
  background-color: var(--cyan-500) !important;
}

.bg-cyan-600 {
  background-color: var(--cyan-600) !important;
}

.bg-cyan-700 {
  background-color: var(--cyan-700) !important;
}

.bg-cyan-800 {
  background-color: var(--cyan-800) !important;
}

.bg-cyan-900 {
  background-color: var(--cyan-900) !important;
}

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

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

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

.bg-lilac-50 {
  background-color: var(--lilac-50) !important;
}

.bg-lilac-100 {
  background-color: var(--lilac-100) !important;
}

.bg-lilac-200 {
  background-color: var(--lilac-200) !important;
}

.bg-lilac-300 {
  background-color: var(--lilac-300) !important;
}

.bg-lilac-400 {
  background-color: var(--lilac-400) !important;
}

.bg-lilac-500 {
  background-color: var(--lilac-500) !important;
}

.bg-lilac-600 {
  background-color: var(--lilac-600) !important;
}

.bg-lilac-700 {
  background-color: var(--lilac-700) !important;
}

.bg-lilac-800 {
  background-color: var(--lilac-800) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-hover-primary-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-200 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-300 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-400 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-500 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-primary-900 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-200 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-300 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-400 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-500 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-neutral-900 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-200 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-300 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-400 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-500 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-900 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-200 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-300 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-400 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-500 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-900 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-200 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-300 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-400 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-500 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-900 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-200 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-300 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-400 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-500 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-900 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-cyan-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-50:hover {
  background-color: var(--cyan-50) !important;
}

.bg-hover-cyan-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-100:hover {
  background-color: var(--cyan-100) !important;
}

.bg-hover-cyan-200 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-200:hover {
  background-color: var(--cyan-200) !important;
}

.bg-hover-cyan-300 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-300:hover {
  background-color: var(--cyan-300) !important;
}

.bg-hover-cyan-400 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-400:hover {
  background-color: var(--cyan-400) !important;
}

.bg-hover-cyan-500 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-500:hover {
  background-color: var(--cyan-500) !important;
}

.bg-hover-cyan-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-600:hover {
  background-color: var(--cyan-600) !important;
}

.bg-hover-cyan-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-700:hover {
  background-color: var(--cyan-700) !important;
}

.bg-hover-cyan-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-800:hover {
  background-color: var(--cyan-800) !important;
}

.bg-hover-cyan-900 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-cyan-900:hover {
  background-color: var(--cyan-900) !important;
}

.bg-hover-dark-1 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-dark-2 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-dark-3 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-lilac-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-50:hover {
  background-color: var(--lilac-50) !important;
}

.bg-hover-lilac-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-100:hover {
  background-color: var(--lilac-100) !important;
}

.bg-hover-lilac-200 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-200:hover {
  background-color: var(--lilac-200) !important;
}

.bg-hover-lilac-300 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-300:hover {
  background-color: var(--lilac-300) !important;
}

.bg-hover-lilac-400 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-400:hover {
  background-color: var(--lilac-400) !important;
}

.bg-hover-lilac-500 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-500:hover {
  background-color: var(--lilac-500) !important;
}

.bg-hover-lilac-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-600:hover {
  background-color: var(--lilac-600) !important;
}

.bg-hover-lilac-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-700:hover {
  background-color: var(--lilac-700) !important;
}

.bg-hover-lilac-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bg-hover-lilac-800:hover {
  background-color: var(--lilac-800) !important;
}

.bg-hover-light-50 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-light-100 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-light-600 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-light-700 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-light-800 {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-main {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-surface {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-border {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-hover {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-pressed {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-success-focus {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-main {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-surface {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-border {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-hover {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-pressed {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-info-focus {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-main {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-surface {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-border {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-hover {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-pressed {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-warning-focus {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-main {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-surface {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-border {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-hover {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-pressed {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-danger-focus {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-cyan {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-indigo {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-purple {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-red {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-yellow {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-orange {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

.bg-hover-pink {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

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

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

.bg-base-50 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

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

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

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

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

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

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

.bg-gradient-start-1 {
  background: linear-gradient(to right, #e6f9ff, #feffff);
}

.bg-gradient-start-2 {
  background: linear-gradient(to right, #f7e9ff, #fffefd);
}

.bg-gradient-start-3 {
  background: linear-gradient(to right, #e6ebff, #ffffff);
}

.bg-gradient-start-4 {
  background: linear-gradient(to right, #e8fff5, #ffffff);
}

.bg-gradient-start-5 {
  background: linear-gradient(to right, #ffeeee, #fffcfc);
}

.bg-gradient-dark-start-1 {
  background: linear-gradient(261deg,
      rgba(255, 234, 244, 0.5) 2.07%,
      #ffe2f0 97.73%);
}

.bg-gradient-dark-start-2 {
  background: linear-gradient(262deg,
      rgba(236, 221, 255, 0.3) 2.45%,
      #ecddff 97.35%);
}

.bg-gradient-dark-start-3 {
  background: linear-gradient(262deg, #ebfaff 4.01%, #c0f0ff 99.29%);
}

.bg-gradient-end-1 {
  background: linear-gradient(to right, #ffffff, #eff4ff);
}

.bg-gradient-end-2 {
  background: linear-gradient(to right, #ffffff, #eafff9);
}

.bg-gradient-end-3 {
  background: linear-gradient(to right, #ffffff, #fff5e9);
}

.bg-gradient-end-4 {
  background: linear-gradient(to right, #ffffff, #f3eeff);
}

.bg-gradient-end-5 {
  background: linear-gradient(to right, #ffffff, #fff2fe);
}

.bg-gradient-end-6 {
  background: linear-gradient(to right, #ffffff, #eefbff);
}

.bg-gradient-purple {
  background: linear-gradient(300deg, #ffe9e0 1.27%, #efd3ff 98.89%);
}

.bg-gradient-primary {
  background: linear-gradient(299deg, #d7f6ff 1.03%, #d1deff 97.72%);
}

.bg-gradient-success {
  background: linear-gradient(299deg, #ecfff7 1.76%, #adf7d6 98.11%);
}

.bg-gradient-danger {
  background: linear-gradient(299deg, #ffefef 0.96%, #ffd7d7 98.97%);
}

.bg-primary-gradient {
  background: linear-gradient(299deg, #d7f6ff 1.03%, #d1deff 97.72%);
}

.bg-success-gradient {
  background: linear-gradient(270deg, #70e396 0%, #45b369 100%);
}

.bg-info-gradient {
  background: linear-gradient(270deg, #85a7ff 0%, #144bd6 100%);
}

.bg-warning-gradient {
  background: linear-gradient(270deg, #ffd199 0%, #ff9f29 100%);
}

.bg-danger-gradient {
  background: linear-gradient(270deg, #ffab86 0%, #ef4a00 100%);
}

.bg-primary-success-gradient {
  background: linear-gradient(90deg, #bbcaff 0%, #dcfffd 100%);
}

.bg-dark-primary-gradient {
  background: linear-gradient(270deg, #7ea5ff 0%, #003dcc 100%);
}

.bg-dark-lilac-gradient {
  background: linear-gradient(270deg, #ba76ff 0%, #6100c1 100%);
}

.bg-dark-success-gradient {
  background: linear-gradient(270deg, #48dc79 0%, #02862d 100%);
}

.bg-dark-info-gradient {
  background: linear-gradient(270deg, #5384ff 0%, #0036bd 100%);
}

.bg-dark-warning-gradient {
  background: linear-gradient(270deg, #ffc175 0%, #c36c00 100%);
}

.bg-dark-danger-gradient {
  background: linear-gradient(270deg, #ff7739 0%, #c63d00 100%);
}

.bg-dark-dark-gradient {
  background: linear-gradient(90deg, #273142 0%, #637da8 100%);
}

.bg-danger-gradient-light {
  background: linear-gradient(90deg, #f7e9ff 0.12%, #fdf8f7 99.89%) !important;
}

.bg-white-gradient-light {
  background: linear-gradient(317deg,
      rgba(225, 225, 225, 0.1) 8.56%,
      rgba(255, 255, 255, 0.5) 91.49%) !important;
}

.bg-light-pink {
  background: var(--gradients-Colors-gradients-2,
      linear-gradient(90deg, #f7e9ff 0.12%, #fdf8f7 99.89%));
}