:root {
    --shadow-1: 0 4px 60px 0 rgba(4, 6, 15, 0.8);
    --shadow-2: 0 4px 60px 0 rgba(4, 6, 15, 0.5);
    --shadow-3: 0 20px 100px 0 rgba(4, 6, 15, 0.8);
    --shadow-4: 4px 8px 24px 0 rgba(182, 182, 182, 0.2);
    --shadow-5: 4px 12px 32px 0 rgba(0, 169, 158, 0.1);
    --shadow-6: 4px 16px 32px 0 rgba(0, 169, 158, 0.1);
    --shadow-7: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
    --shadow-8: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    --shadow-9: 0px 4px 16px 0px rgba(46, 45, 116, 0.04);
    --shadow-10: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
    --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;
    --primary-light: rgba(72, 127, 255, 0.15);
    --yellow-light: rgba(255, 159, 41, 0.15);
    --purple-light: rgba(130, 82, 233, 0.15);
    --pink-light: rgba(250, 54, 230, 0.15);
    --primary-light-white: rgba(72, 127, 255, 0.25);
    --yellow-light-white: rgba(255, 159, 41, 0.25);
    --purple-light-white: rgba(132, 90, 223, 0.25);
    --pink-light-white: rgba(250, 54, 230, 0.25);
    --base: #fff;
    --brand: var(--primary-600);
    --button-secondary: var(--primary-50);
    --black: var(--dark-2);
    --white: var(--base);
    --bg-color: var(--neutral-50);
    --text-primary-light: var(--neutral-900);
    --text-secondary-light: var(--neutral-600);
    --text-secondary-dark: var(--neutral-300);
    --input-form-light: var(--neutral-300);
    --input-form-dark: var(--neutral-500);
    --input-bg: var(--neutral-50);
    --input-stroke: var(--neutral-300);
    --border-color: #d1d5db80;
    --font-2xxl: 2rem;
    --font-2xl: 1.75rem;
    --font-xxl: 1.5rem;
    --font-xl: 1.25rem;
    --font-lg: 1.125rem;
    --font-md: 1rem;
    --font-sm: 0.875rem;
    --font-xs: 0.75rem;
    --font-xxs: 0.625rem;
  }

/* === 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%));
  }
  
  html[data-theme=dark] .bg-base-50 {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  html[data-theme=dark] .bg-gradient-start-1 {
    background: linear-gradient(to right, rgba(230, 249, 255, 0.15), rgba(254, 255, 255, 0.1));
  }
  
  html[data-theme=dark] .bg-gradient-start-2 {
    background: linear-gradient(to right, rgba(247, 233, 255, 0.15), rgba(255, 254, 253, 0.1));
  }
  
  html[data-theme=dark] .bg-gradient-start-3 {
    background: linear-gradient(to right, rgba(230, 235, 255, 0.15), rgba(255, 255, 255, 0.1));
  }
  
  html[data-theme=dark] .bg-gradient-start-4 {
    background: linear-gradient(to right, rgba(232, 255, 245, 0.15), rgba(255, 255, 255, 0.1));
  }
  
  html[data-theme=dark] .bg-gradient-start-5 {
    background: linear-gradient(to right, rgba(255, 238, 238, 0.15), rgba(255, 252, 252, 0.1));
  }
  
  html[data-theme=dark] .bg-gradient-dark-start-1 {
    background: linear-gradient(261deg, rgba(255, 234, 244, 0.08) 2.07%, rgba(255, 226, 240, 0.15) 97.73%);
  }
  
  html[data-theme=dark] .bg-gradient-dark-start-2 {
    background: linear-gradient(262deg, rgba(236, 221, 255, 0.05) 2.45%, rgba(236, 221, 255, 0.15) 97.35%);
  }
  
  html[data-theme=dark] .bg-gradient-dark-start-3 {
    background: linear-gradient(262deg, rgba(235, 250, 255, 0.15) 4.01%, rgba(192, 240, 255, 0.15) 99.29%);
  }
  
  html[data-theme=dark] .bg-gradient-end-1 {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.075), rgba(239, 244, 255, 0.125));
  }
  
  html[data-theme=dark] .bg-gradient-end-2 {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.075), rgba(234, 255, 249, 0.125));
  }
  
  html[data-theme=dark] .bg-gradient-end-3 {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.075), rgba(255, 245, 233, 0.125));
  }
  
  html[data-theme=dark] .bg-gradient-end-4 {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.075), rgba(243, 238, 255, 0.125));
  }
  
  html[data-theme=dark] .bg-gradient-end-5 {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.075), rgba(255, 242, 254, 0.125));
  }
  
  html[data-theme=dark] .bg-gradient-end-6 {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.075), rgba(238, 251, 255, 0.125));
  }
  
  html[data-theme=dark] .bg-gradient-purple {
    background: linear-gradient(300deg, rgba(255, 233, 224, 0.1) 1.27%, rgba(239, 211, 255, 0.15) 98.89%);
  }
  
  html[data-theme=dark] .bg-gradient-primary {
    background: linear-gradient(299deg, rgba(215, 246, 255, 0.1) 1.03%, rgba(209, 222, 255, 0.15) 97.72%);
  }
  
  html[data-theme=dark] .bg-gradient-success {
    background: linear-gradient(299deg, rgba(236, 255, 247, 0.1) 1.76%, rgba(173, 247, 214, 0.15) 98.11%);
  }
  
  html[data-theme=dark] .bg-gradient-danger {
    background: linear-gradient(299deg, rgba(255, 239, 239, 0.1) 0.96%, rgba(255, 215, 215, 0.15) 98.97%);
  }
  
  html[data-theme=dark] .bg-danger-gradient-light {
    background: linear-gradient(90deg, rgba(247, 233, 255, 0.05) 0.12%, rgba(253, 248, 247, 0.1) 99.89%) !important;
  }
  
  html[data-theme=dark] .bg-white-gradient-light {
    background: linear-gradient(317deg, rgba(225, 225, 225, 0.05) 8.56%, rgba(255, 255, 255, 0.1) 91.49%) !important;
  }
  
  html[data-theme=dark] .bg-light-pink {
    background: var(--gradients-Colors-gradients-2, linear-gradient(90deg, rgba(247, 233, 255, 0.1) 0.12%, rgba(253, 248, 247, 0.05) 99.89%));
  }
  
  .bg-gradient-blue-warning {
    background: linear-gradient(90deg, #CBFFF9 0%, #FFEEB1 100%);
  }
  
  .aspect-ratio-1 {
    aspect-ratio: 1;
  }
  
  .bg-tb-warning {
    background: linear-gradient(180deg, rgba(255, 186, 69, 0.25) 0%, rgba(244, 116, 53, 0.25) 100%);
  }
  
  .bg-tb-lilac {
    background: linear-gradient(180deg, rgba(252, 120, 138, 0.25) 0%, rgba(152, 22, 139, 0.25) 100%);
  }
  
  .bg-tb-primary {
    background: linear-gradient(180deg, rgba(25, 207, 239, 0.25) 0%, rgba(13, 106, 184, 0.25) 100%);
  }
  
  .bg-tb-success {
    background: linear-gradient(180deg, rgba(134, 221, 102, 0.25) 0%, rgba(2, 140, 75, 0.25) 100%);
  }
  
  .gradient-deep-1 {
    background: linear-gradient(270deg, #EEF7FF 0%, #DFF0FF 100%);
  }
  
  .gradient-deep-2 {
    background: linear-gradient(270deg, #F7F2FF 0%, #EEE5FF 100%);
  }
  
  .gradient-deep-3 {
    background: linear-gradient(270deg, #E8FFF9 0%, #D1FFF3 100%);
  }
  
  .gradient-deep-4 {
    background: linear-gradient(270deg, #FFF4E8 0%, #FFEEDC 100%);
  }
  
  .gradient-deep-two-1 {
    background: linear-gradient(270deg, #D4F7FF 0%, #F2FDFF 100%);
  }
  
  .gradient-deep-two-2 {
    background: linear-gradient(270deg, #FFEFDD 0%, #FFF8EF 100%);
  }
  
  .gradient-deep-two-3 {
    background: linear-gradient(270deg, #E9E0FF 0%, #F6F2FF 100%);
  }
  
  .gradient-deep-two-4 {
    background: linear-gradient(270deg, #DEFFEC 0%, #F6FFFA 100%);
  }
  
  html[data-theme=dark] .gradient-deep-1 {
    background: var(--neutral-50);
  }
  
  html[data-theme=dark] .gradient-deep-2 {
    background: var(--neutral-50);
  }
  
  html[data-theme=dark] .gradient-deep-3 {
    background: var(--neutral-50);
  }
  
  html[data-theme=dark] .gradient-deep-4 {
    background: var(--neutral-50);
  }
  
  html[data-theme=dark] .gradient-deep-two-1 {
    background: var(--neutral-100);
    border-color: var(--border-color) !important;
  }
  
  html[data-theme=dark] .gradient-deep-two-2 {
    background: var(--neutral-100);
    border-color: var(--border-color) !important;
  }
  
  html[data-theme=dark] .gradient-deep-two-3 {
    background: var(--neutral-100);
    border-color: var(--border-color) !important;
  }
  
  html[data-theme=dark] .gradient-deep-two-4 {
    background: var(--neutral-100);
    border-color: var(--border-color) !important;
  }
  
  html[data-theme=dark] .dark-bg-neutral-200 {
    background-color: var(--neutral-200) !important;
  }
  
  .bg-blue-light {
    background-color: #A8C9F4;
  }
  
  .bg-green-light {
    background-color: #A4E7BC;
  }
  
  .bg-red-light {
    background-color: #FFBAAA;
  }
  
  .bg-warning-light {
    background-color: #FFDD96;
  }
  
  html[data-theme=dark] .bg-blue-light {
    background-color: rgba(1, 52, 173, 0.4);
  }
  
  html[data-theme=dark] .bg-green-light {
    background-color: rgba(38, 161, 124, 0.4);
  }
  
  html[data-theme=dark] .bg-red-light {
    background-color: rgba(252, 86, 49, 0.4);
  }
  
  html[data-theme=dark] .bg-warning-light {
    background-color: rgba(255, 136, 0, 0.4);
  }
  
  .bg-blue-light-two {
    background-color: #E8EDFB;
  }
  
  .bg-green-light-two {
    background-color: #E3F4E9;
  }
  
  .bg-red-light-two {
    background-color: #FDE4EA;
  }
  
  .bg-warning-light-two {
    background-color: #FFF2D5;
  }
  
  html[data-theme=dark] .bg-blue-light-two {
    background-color: rgba(1, 52, 173, 0.1490196078);
  }
  
  html[data-theme=dark] .bg-green-light-two {
    background-color: rgba(38, 161, 124, 0.1490196078);
  }
  
  html[data-theme=dark] .bg-red-light-two {
    background-color: rgba(252, 86, 49, 0.1490196078);
  }
  
  html[data-theme=dark] .bg-warning-light-two {
    background-color: rgba(255, 136, 0, 0.1490196078);
  }
  
  /* Stroke Class */
  .stroke-blue {
    stroke: #487FFF !important;
  }
  
  .stroke-red {
    stroke: #EF4A00 !important;
  }
  
  .stroke-warning {
    stroke: #FF9F29 !important;
  }
  
  .stroke-green {
    stroke: #45B369 !important;
  }
  
  /* Stroke Class */
  .bg-gradient-custom-1 {
    background: linear-gradient(246deg, #B159FF 5.05%, #8B08FE 96.12%);
  }
  
  .bg-gradient-custom-2 {
    background: linear-gradient(245deg, #7397FD 4.86%, #5077E5 96.35%);
  }
  
  .bg-gradient-custom-3 {
    background: linear-gradient(245deg, #2FD8E4 3.97%, #04B4C0 96.86%);
  }
  
  .bg-gradient-custom-4 {
    background: linear-gradient(250deg, #FFB359 3.29%, #FB9B29 96.24%);
  }
  
  .gradient-bg-chart::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 106px;
    background: linear-gradient(90deg, rgba(156, 43, 255, 0.15) 0%, rgba(6, 207, 221, 0.15) 36.35%, rgba(91, 134, 255, 0.15) 70.54%, rgba(253, 164, 58, 0.15) 100%);
    filter: blur(25px);
    inset-block-end: 0;
    z-index: -1;
  }
  
  .gradient-bg-light-one {
    background: linear-gradient(0deg, #EEF3FF 0%, #FDFDFF 100%);
  }
  
  .gradient-bg-light-two {
    background: linear-gradient(0deg, #E7F5FF 0%, #FCFEFF 100%);
  }
  
  .gradient-bg-light-three {
    background: linear-gradient(0deg, #ECE9FF 0%, #FCFCFF 100%);
  }
  
  .gradient-bg-light-four {
    background: linear-gradient(357deg, #FFF5E8 2.78%, #FFFCF9 97.3%);
  }
  
  .gradient-bg-light-five {
    background: linear-gradient(0deg, #FFF6D3 0%, #FFFFF4 100%);
  }
  
  .gradient-bg-light-six {
    background: linear-gradient(0deg, #EBFFD8 0%, #FFF 100%);
  }
  
  [data-theme=dark] .gradient-bg-light-one,
  [data-theme=dark] .gradient-bg-light-two,
  [data-theme=dark] .gradient-bg-light-three,
  [data-theme=dark] .gradient-bg-light-four,
  [data-theme=dark] .gradient-bg-light-five,
  [data-theme=dark] .gradient-bg-light-six {
    background: linear-gradient(0deg, rgba(231, 245, 255, 0.1) 0%, rgba(252, 254, 255, 0.1) 100%);
  }
  
  [data-theme=dark] .br-white {
    border-color: #606266 !important;
  }
  
  .sass-card-gradient-bg-1 {
    background: linear-gradient(299deg, rgba(255, 255, 255, 0) 53.55%, rgba(0, 85, 255, 0.0784313725) 93.27%);
  }
  
  .sass-card-gradient-bg-2 {
    background: linear-gradient(299deg, rgba(255, 255, 255, 0) 56.67%, rgba(244, 148, 30, 0.1490196078) 92.87%);
  }
  
  .sass-card-gradient-bg-3 {
    background: linear-gradient(299deg, rgba(255, 255, 255, 0) 56.67%, rgba(130, 82, 233, 0.168627451) 92.87%);
  }
  
  .sass-card-gradient-bg-4 {
    background: linear-gradient(299deg, rgba(255, 255, 255, 0) 56.67%, rgba(34, 197, 94, 0.14) 92.87%);
  }
  
  .sales-card-gradient-bg-1 {
    background: linear-gradient(190deg, #FDFDFF 8.24%, #EEF3FF 89.87%);
  }
  
  .sales-card-gradient-bg-2 {
    background: linear-gradient(190deg, #FFF 8.24%, #FFF5E8 89.87%);
  }
  
  .sales-card-gradient-bg-3 {
    background: linear-gradient(190deg, #FDFDFF 8.24%, #ECE9FF 89.87%);
  }
  
  .sales-card-gradient-bg-4 {
    background: linear-gradient(190deg, #FDFDFF 8.24%, #E6FFEF 89.87%);
  }
  
  [data-theme=dark] .sales-card-gradient-bg-1 {
    background: #1b2431;
  }
  
  [data-theme=dark] .sales-card-gradient-bg-2 {
    background: #1b2431;
  }
  
  [data-theme=dark] .sales-card-gradient-bg-3 {
    background: #1b2431;
  }
  
  [data-theme=dark] .sales-card-gradient-bg-4 {
    background: #1b2431;
  }
  
  .bg-purple-30 {
    background-color: #ddcdff;
  }
  
  .bg-brand-color {
    background-color: #2563eb;
  }
  
  .text-brand-color {
    color: #2563eb;
  }
  
  /* === bg css end === */
  /* === shadow css start === */
  .shadow-1 {
    box-shadow: var(--shadow-1);
  }
  
  .shadow-2 {
    box-shadow: var(--shadow-2);
  }
  
  .shadow-3 {
    box-shadow: var(--shadow-3);
  }
  
  .shadow-4 {
    box-shadow: var(--shadow-4);
  }
  
  .shadow-5 {
    box-shadow: var(--shadow-5);
  }
  
  .shadow-6 {
    box-shadow: var(--shadow-6);
  }
  
  .shadow-7 {
    box-shadow: var(--shadow-7);
  }
  
  .shadow-8 {
    box-shadow: var(--shadow-8);
  }
  
  .shadow-9 {
    box-shadow: var(--shadow-9);
  }
  
  .shadow-10 {
    box-shadow: var(--shadow-10);
  }
  
  .bordered-shadow {
    box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.5019607843);
  }
  
  .shadow-top {
    box-shadow: 0px -4px 30px 0px rgba(46, 45, 116, 0.05);
  }
  
  .primary-shadow {
    box-shadow: 0px 17px 30px -4px rgba(72, 127, 255, 0.4);
  }
  
  .warning-shadow {
    box-shadow: 0px 17px 30px -4px rgba(255, 159, 41, 0.3);
  }
  
  /* === shadow css end === */

  /* === typography css start === */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary-light);
  font-weight: 600;
}

.text-2xxl {
  font-size: var(--font-2xxl) !important;
}

.text-2xl {
  font-size: var(--font-2xl) !important;
}

.text-xxl {
  font-size: var(--font-xxl) !important;
}

.text-xl {
  font-size: var(--font-xl) !important;
}

.text-lg {
  font-size: var(--font-lg) !important;
}

.text-md {
  font-size: var(--font-md) !important;
}

.text-sm {
  font-size: var(--font-sm) !important;
}

.text-xs {
  font-size: var(--font-xs) !important;
}

.text-xxs {
  font-size: var(--font-xxs) !important;
}