:root {
  --primary-50: #F4F6FF;
  --secondary-50: #F2F2F2;
  --secondary-100: #E6E6E6;
  --secondary-200: #CCCCCC;
  --secondary-300: #B3B3B3;
  --secondary-400: #999999;
  --secondary-500: #808080;
  --secondary-600: #666666;
  --secondary-700: #4D4D4D;
  --secondary-800: #333333;
  --secondary-900: #1A1A1A;
  --secondary-950: #121212;
  --secondary-secondary: var(--secondary-950);
  --primary-100: #CDD4FE;
  --primary-200: #9AA9FE;
  --primary-300: #687EFD;
  --primary-400: #3553FD;
  --primary-500: #0328FC;
  --primary-600: #0220CA;
  --primary-700: #021897;
  --primary-800: #011065;
  --primary-900: #010832;
  --primary-950: #000623;
  --primary-primary: var(--primary-800);
  --black: #000000;
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-2: #F8F8F8;
  --muted-bg: #F8F8F8;
  --grey-muted: #838383;
  --popup-bg: #FFFFFF;
  --text-text-heading: #000000;
  --text-text-subheading: #333333;
  --text-text-body: #666666;
  --text-text-caption: #AAAAAA;
  --text-text-inverse: #FFFFFF;
  --text-text-link: var(--primary);
  --card-card-bg: #F9F9F9;
  --card-card-border: #E5E5E5;
  --card-card-active-border: var(--primary);
  --card-card-foreground: #333333;
  --button-btn-primary-bg: var(--primary);
  --button-btn-primary-text: #FFFFFF;
  --button-btn-secondary-bg: var(--secondary);
  --button-btn-secondary-text: #FFFFFF;
  --button-btn-disabled-bg: #E5E5E5;
  --button-btn-disabled-text: #999999;
  --border-border-default: #E5E5E5;
  --border-border-muted: #F2F2F2;
  --color-states-color-success-: #22C55E;
  --color-states-color-warning: #F59E0B;
  --color-states-color-error: #EF4444;
  --color-states-color-info: #3B82F6;
  --input-input-label: #333333;
  --input-input-bg: #FFFFFF;
  --input-input-border: #E5E5E5;
  --input-input-text: #000000;
  --input-input-placeholder: #B4B2B2;
  --input-input-bg-disabled: #F5F5F5;
  --input-input-border-disabled: #E5E5E5;
  --input-input-placeholder-disabled: #CCCCCC;
  --red-red-50: #FEE2E2;
  --red-red-100: #DC2626;
  --green-green-50: #DCFCE7;
  --green-green-100: #166534;
  --orange-orange-50: #FFEDD5;
  --orange-orange-100: #F97316;
  --blue-blue-50: #DBEAFE;
  --blue-blue-100: #2563EB;
  --dashboard-stat-doc-bg: #ffeded;
  --dashboard-stat-doc-icon: #FF5353;
  --dashboard-stat-image-bg: #f6ffed;
  --dashboard-stat-image-icon: #65a30d;
  --dashboard-stat-video-bg: #f0efff;
  --dashboard-stat-video-icon: #6366f1;
  --dashboard-stat-tracker-bg: #ffeff9;
  --dashboard-stat-tracker-icon: #ec4899;
  --dashboard-stat-address-bg: #fff9ef;
  --dashboard-stat-address-icon: #f59e0b;
  --dashboard-stat-folder-bg: #effff9;
  --dashboard-stat-folder-icon: #10b981;
  --modal-option-bg: #F9FAFB;
  --modal-option-border: #E5E7EB;
  --modal-option-hover-bg: #EEF2FF;
  --logo-fill-primary: #01147B;
  --logo-fill-secondary: #FFFFFF;
  --tab-btn-bg: transparent;
  --tab-btn-text: var(--text-text-subheading);
  --tab-btn-border: var(--border-border-default);
  --tab-btn-hover-bg: var(--secondary-50);
  --tab-btn-hover-text: var(--text-text-heading);
  --tab-btn-hover-border: var(--border-border-default);
  --tab-btn-active-bg: var(--secondary-secondary);
  --tab-btn-active-text: var(--button-btn-secondary-text);
  --tab-btn-active-border: var(--border-border-default);
}

.dark {
  --primary-50: #000623;
  --secondary-50: #1F2937;
  --secondary-100: #374151;
  --secondary-200: #4B5563;
  --secondary-300: #6B7280;
  --secondary-400: #9CA3AF;
  --secondary-500: #D1D5DB;
  --secondary-600: #E5E7EB;
  --secondary-700: #EEF2FF;
  --secondary-800: #F8FAFC;
  --secondary-900: #FFFFFF;
  --secondary-950: #F9FAFB;
  --secondary-secondary: var(--secondary-950);
  --primary-100: #010832;
  --primary-200: #011065;
  --primary-300: #021897;
  --primary-400: #0220CA;
  --primary-500: #0328FC;
  --primary-600: #3553FD;
  --primary-700: #687EFD;
  --primary-800: #9AA9FE;
  --primary-900: #CDD4FE;
  --primary-950: #E6EAFF;
  --primary-primary: var(--primary-800);
  --black: #FFFFFF;
  --white: #182235;
  --bg: #020817;
  --bg-2: #0B1220;
  --muted-bg: #111B31;
  --grey-muted: #9CA3AF;
  --popup-bg: #11172A;
  --text-text-heading: #FFFFFF;
  --text-text-subheading: #D1D5DB;
  --text-text-body: #9CA3AF;
  --text-text-caption: #6B7280;
  --text-text-inverse: #0B1020;
  --text-text-link: var(--primary-primary);
  --card-card-bg: #11172A;
  --card-card-border: #1F2937;
  --card-card-active-border: var(--primary-primary);
  --card-card-foreground: #FFFFFF;
  --button-btn-primary-bg: var(--primary-primary);
  --button-btn-primary-text: #FFFFFF;
  --button-btn-secondary-bg: var(--secondary-secondary);
  --button-btn-secondary-text: #E5E7EB;
  --button-btn-disabled-bg: #374151;
  --button-btn-disabled-text: #9CA3AF;
  --border-border-default: #334155;
  --border-border-muted: #1F2937;
  --color-states-color-success-: #22C55E;
  --color-states-color-warning: #F59E0B;
  --color-states-color-error: #EF4444;
  --color-states-color-info: #60A5FA;
  --input-input-label: #D1D5DB;
  --input-input-bg: #11172A;
  --input-input-border: #334155;
  --input-input-text: #F9FAFB;
  --input-input-placeholder: #9CA3AF;
  --input-input-bg-disabled: #1F2937;
  --input-input-border-disabled: #334155;
  --input-input-placeholder-disabled: #6B7280;
  --red-red-50: #450A0A;
  --red-red-100: #F87171;
  --green-green-50: #052E16;
  --green-green-100: #4ADE80;
  --orange-orange-50: #431407;
  --orange-orange-100: #FB923C;
  --blue-blue-50: #172554;
  --blue-blue-100: #60A5FA;
  --dashboard-stat-doc-bg: #2b1f29;
  --dashboard-stat-doc-icon: #f87171;
  --dashboard-stat-image-bg: #1e2b24;
  --dashboard-stat-image-icon: #84cc16;
  --dashboard-stat-video-bg: #22263d;
  --dashboard-stat-video-icon: #818cf8;
  --dashboard-stat-tracker-bg: #2e2134;
  --dashboard-stat-tracker-icon: #f472b6;
  --dashboard-stat-address-bg: #2f261c;
  --dashboard-stat-address-icon: #fbbf24;
  --dashboard-stat-folder-bg: #1d2f2b;
  --dashboard-stat-folder-icon: #34d399;
  --modal-option-bg: #0F172A;
  --modal-option-border: #1E293B;
  --modal-option-hover-bg: #172554;
  --logo-fill-primary: #FFFFFF;
  --logo-fill-secondary: #01147B;
  --tab-btn-bg: #0f172a;
  --tab-btn-text: #cbd5e1;
  --tab-btn-border: #334155;
  --tab-btn-hover-bg: #172554;
  --tab-btn-hover-text: #f8fafc;
  --tab-btn-hover-border: #475569;
  --tab-btn-active-bg: #1e293b;
  --tab-btn-active-text: #f8fafc;
  --tab-btn-active-border: #475569;
}

.dark body {
  background: var(--bg);
  color: var(--text-text-heading);
}

.dark .site-wraper,
.dark .main_login_bg {
  background: var(--bg-2);
}

.dark .bg-white,
.dark .bg-\[white\] {
  background-color: var(--card-card-bg) !important;
}

.dark .bg-\[var\(--white\)\] {
  background-color: var(--white) !important;
}

.dark .text-black,
.dark .text-\[black\] {
  color: var(--text-text-heading) !important;
}

.dark .border-neutral-200,
.dark .border-gray-200,
.dark .border-slate-200 {
  border-color: var(--border-border-default) !important;
}

.dark svg [stroke="black"] {
  stroke: currentColor !important;
}

.dark svg [fill="black"] {
  fill: currentColor !important;
}

.dark [data-switch-toggle][aria-checked="false"] {
  background-color: #334155 !important;
}

.dark [data-switch-toggle][aria-checked="true"] {
  background-color: var(--primary-primary) !important;
}

.dark .sharing-role-card {
  border-left-color: #334155 !important;
  background-color: #0f172a !important;
}

.dark .sharing-role-owners {
  border-left-color: #7c93ff !important;
  background-color: #1a2340 !important;
}

.dark .sharing-role-editors {
  border-left-color: #22c55e !important;
  background-color: #152a20 !important;
}

.dark .sharing-role-posters {
  border-left-color: #f59e0b !important;
  background-color: #2e2417 !important;
}

.dark .sharing-role-viewers {
  border-left-color: #3b82f6 !important;
  background-color: #18263d !important;
}

.dark .sharing-role-chip {
  background-color: #0b1220 !important;
  border: 1px solid #334155;
}

.dark .sharing-role-card svg [stroke="#011065"] {
  stroke: #9aa9fe !important;
}

.card-card-border {
  border-color: var(--card-card-border);
}

.card-card-active-border {
  border-color: var(--card-card-active-border);
}

.border-border-default {
  border-color: var(--border-border-default);
}

.border-border-muted {
  border-color: var(--border-border-muted);
}

.color-states-color-success- {
  color: var(--color-states-color-success-);
}

.color-states-color-warning {
  color: var(--color-states-color-warning);
}

.color-states-color-error {
  color: var(--color-states-color-error);
}

.color-states-color-info {
  color: var(--color-states-color-info);
}

.input-input-border {
  border-color: var(--input-input-border);
}

.input-input-border-disabled {
  border-color: var(--input-input-border-disabled);
}