@syncfusion/blazor-themes/Compiled-Themes/tailwind3.css

This package contains the individual component wise SCSS files and single SCSS files for Syncfusion Blazor components.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
  --color-sf-content-bg-color: rgba(255, 255, 255);
  --color-sf-content-bg-color-alt1: #f9fafb;
  --color-sf-content-bg-color-alt2: #f3f4f6;
  --color-sf-content-bg-color-alt3: #e5e7eb;
  --color-sf-content-bg-color-alt4: #9ca3af;
  --color-sf-content-bg-color-alt5: #6b7280;
  --color-sf-content-bg-color-hover: #f9fafb;
  --color-sf-content-bg-color-pressed: #f3f4f6;
  --color-sf-content-bg-color-focus: #f9fafb;
  --color-sf-content-bg-color-selected: #e5e7eb;
  --color-sf-content-bg-color-dragged: #f3f4f6;
  --color-sf-content-bg-color-disabled: #ffffff;
  --color-sf-flyout-bg-color: #ffffff;
  --color-sf-flyout-bg-color-hover: #f3f4f6;
  --color-sf-flyout-bg-color-pressed: #e5e7eb;
  --color-sf-flyout-bg-color-focus: #f3f4f6;
  --color-sf-flyout-bg-color-selected: #e5e7eb;
  --color-sf-flyout-bg-color-disabled: #fff;
  --color-sf-overlay-bg-color: rgba(107, 114, 128, .75);
  --color-sf-table-bg-color-hover: #f9fafb;
  --color-sf-table-bg-color-pressed: #f3f4f6;
  --color-sf-table-bg-color-selected: #e5e7eb;
  --color-sf-text-input-bg-color: #ffffff;
  --color-sf-treeview-item-active-hover-bg: #e5e7eb;
  --color-sf-content-text-color: #111827;
  --color-sf-content-text-color-alt1: #374151;
  --color-sf-content-text-color-alt2: #4b5563;
  --color-sf-content-text-color-alt3: #6b7280;
  --color-sf-content-text-color-alt4: #9ca3af;
  --color-sf-content-text-color-hover: #111827;
  --color-sf-content-text-color-pressed: #111827;
  --color-sf-content-text-color-focus: #111827;
  --color-sf-content-text-color-selected: #111827;
  --color-sf-content-text-color-dragged: #111827;
  --color-sf-content-text-color-disabled: #9ca3af;
  --color-sf-placeholder-text-color: #6b7280;
  --color-sf-flyout-text-color: #111827;
  --color-sf-flyout-text-color-hover: #111827;
  --color-sf-flyout-text-color-pressed: #111827;
  --color-sf-flyout-text-color-focus: #111827;
  --color-sf-flyout-text-color-selected: #111827;
  --color-sf-flyout-text-color-disabled: #9ca3af;
  --color-sf-table-text-color-hover: #111827;
  --color-sf-table-text-color-pressed: #111827;
  --color-sf-table-text-color-selected: #111827;
  --color-sf-icon-color: #6b7280;
  --color-sf-icon-color-hover: #374151;
  --color-sf-icon-color-pressed: #6b7280;
  --color-sf-icon-color-disabled: #d1d5db;
  --color-sf-close-icon-color: #9ca3af;
  --color-sf-close-icon-color-hover: #6b7280;
  --color-sf-close-icon-color-pressed: #6b7280;
  --color-sf-close-icon-color-disabled: #d1d5db;
  --color-sf-border-light: #e5e7eb;
  --color-sf-border: #d1d5db;
  --color-sf-border-dark: #9ca3af;
  --color-sf-border-hover: #d1d5db;
  --color-sf-border-pressed: #9ca3af;
  --color-sf-border-focus: #d1d5db;
  --color-sf-border-selected: #9ca3af;
  --color-sf-border-dragged: #e5e7eb;
  --color-sf-border-disabled: #e5e7eb;
  --color-sf-border-warning: #c2410c;
  --color-sf-border-error: #dc2626;
  --color-sf-border-success: #15803d;
  --color-sf-spreadsheet-gridline: #dee2e6;
  --color-sf-flyout-border: #e5e7eb;
  --color-sf-dialog-border: #fff;
  --color-sf-primary: rgba(79, 70, 229);
  --color-sf-primary-text-color: #fff;
  --color-sf-primary-light: #818cf8;
  --color-sf-primary-lighter: #e0e7ff;
  --color-sf-primary-dark: #4338ca;
  --color-sf-primary-darker: #3730a3;
  --color-sf-secondary: #ffffff;
  --color-sf-success: #15803d;
  --color-sf-info: #0e7490;
  --color-sf-warning: #c2410c;
  --color-sf-danger: #dc2626;
  --color-sf-success-light: #dcfce7;
  --color-sf-info-light: #cffafe;
  --color-sf-warning-light: #ffedd5;
  --color-sf-danger-light: #fee2e2;
  --color-sf-success-dark: #166534;
  --color-sf-info-dark: #155e75;
  --color-sf-warning-dark: #9a3412;
  --color-sf-danger-dark: #b91c1c;
  --color-sf-success-lighter: #f0fdf4;
  --color-sf-info-lighter: #ecfeff;
  --color-sf-warning-lighter: #fff7fd;
  --color-sf-danger-lighter: #fef2f2;
  --color-sf-black: 0, 0, 0;
  --color-sf-white: 255, 255, 255;
  --color-sf-primary-bg-color: #4f46e5;
  --color-sf-primary-border-color: #4f46e5;
  --color-sf-primary-text: #fff;
  --color-sf-primary-bg-color-hover: #4338ca;
  --color-sf-primary-border-color-hover: #4338ca;
  --color-sf-primary-text-hover: #ffffff;
  --color-sf-primary-bg-color-pressed: #3730a3;
  --color-sf-primary-border-color-pressed: #3730a3;
  --color-sf-primary-text-pressed: #fff;
  --color-sf-primary-bg-color-focus: #4338ca;
  --color-sf-primary-border-color-focus: #4338ca;
  --color-sf-primary-text-focus: #fff;
  --color-sf-primary-bg-color-disabled: #a5b4fc;
  --color-sf-primary-border-color-disabled: #a5b4fc;
  --color-sf-primary-text-disabled: #fff;
  --color-sf-secondary-bg-color: #fff;
  --color-sf-secondary-border-color: #d1d5db;
  --color-sf-secondary-text-color: #374151;
  --color-sf-secondary-bg-color-hover: #f3f4f6;
  --color-sf-secondary-border-color-hover: #d1d5db;
  --color-sf-secondary-text-color-hover: #374151;
  --color-sf-secondary-bg-color-pressed: #e5e7eb;
  --color-sf-secondary-border-color-pressed: #d1d5db;
  --color-sf-secondary-text-color-pressed: #374151;
  --color-sf-secondary-bg-color-focus: #f3f4f6;
  --color-sf-secondary-border-color-focus: #d1d5db;
  --color-sf-secondary-text-color-focus: #374151;
  --color-sf-secondary-bg-color-disabled: #fff;
  --color-sf-secondary-border-color-disabled: #e5e7eb;
  --color-sf-secondary-text-color-disabled: #9ca3af;
  --color-sf-success-bg-color: #15803d;
  --color-sf-success-border-color: #15803d;
  --color-sf-success-text: #fff;
  --color-sf-success-bg-color-hover: #166534;
  --color-sf-success-border-color-hover: #166534;
  --color-sf-success-text-hover: #fff;
  --color-sf-success-bg-color-pressed: #14532d;
  --color-sf-success-border-color-pressed: #14532d;
  --color-sf-success-text-pressed: #fff;
  --color-sf-success-bg-color-focus: #166534;
  --color-sf-success-border-color-focus: #166534;
  --color-sf-success-text-focus: #fff;
  --color-sf-success-bg-color-disabled: #86efac;
  --color-sf-success-border-color-disabled: #86efac;
  --color-sf-success-text-disabled: #fff;
  --color-sf-warning-bg-color: #c2410c;
  --color-sf-warning-border-color: #c2410c;
  --color-sf-warning-text: #fff;
  --color-sf-warning-bg-color-hover: #9a3412;
  --color-sf-warning-border-color-hover: #9a3412;
  --color-sf-warning-text-hover: #fff;
  --color-sf-warning-bg-color-pressed: #7c2d12;
  --color-sf-warning-border-color-pressed: #7c2d12;
  --color-sf-warning-text-pressed: #fff;
  --color-sf-warning-bg-color-focus: #9a3412;
  --color-sf-warning-border-color-focus: #9a3412;
  --color-sf-warning-text-focus: #fff;
  --color-sf-warning-bg-color-disabled: #fdba74;
  --color-sf-warning-border-color-disabled: #fdba74;
  --color-sf-warning-text-disabled: #fff;
  --color-sf-info-bg-color: #0e7490;
  --color-sf-info-border-color: #0e7490;
  --color-sf-info-text: #fff;
  --color-sf-info-bg-color-hover: #155e75;
  --color-sf-info-border-color-hover: #155e75;
  --color-sf-info-text-hover: #fff;
  --color-sf-info-bg-color-pressed: #164e63;
  --color-sf-info-border-color-pressed: #164e63;
  --color-sf-info-text-pressed: #fff;
  --color-sf-info-bg-color-focus: #155e75;
  --color-sf-info-border-color-focus: #155e75;
  --color-sf-info-text-focus: #fff;
  --color-sf-info-bg-color-disabled: #67e8f9;
  --color-sf-info-border-color-disabled: #67e8f9;
  --color-sf-info-text-disabled: #fff;
  --color-sf-danger-bg-color: #dc2626;
  --color-sf-danger-border-color: #dc2626;
  --color-sf-danger-text: #fff;
  --color-sf-danger-bg-color-hover: #b91c1c;
  --color-sf-danger-border-color-hover: #b91c1c;
  --color-sf-danger-text-hover: #fff;
  --color-sf-danger-bg-color-pressed: #991b1b;
  --color-sf-danger-border-color-pressed: #991b1b;
  --color-sf-danger-text-pressed: #fff;
  --color-sf-danger-bg-color-focus: #b91c1c;
  --color-sf-danger-border-color-focus: #b91c1c;
  --color-sf-danger-text-focus: #fff;
  --color-sf-danger-bg-color-disabled: #fca5a5;
  --color-sf-danger-border-color-disabled: #fca5a5;
  --color-sf-danger-text-disabled: #fff;
  --color-sf-primary-outline: #4f46e5;
  --color-sf-secondary-outline: #d1d5db;
  --color-sf-warning-outline: #c2410c;
  --color-sf-danger-outline: #dc2626;
  --color-sf-success-outline: #15803d;
  --color-sf-info-outline: #0e7490;
  --color-sf-tooltip-bg-color: #111827;
  --color-sf-tooltip-border: #111827;
  --color-sf-tooltip-text-color: #f9fafb;
  --color-sf-appbar-bg-color-alt1: #ffffff;
  --color-sf-appbar-color-alt1: #111827;
  --color-sf-appbar-border-color-alt1: #ffffff;
  --color-sf-appbar-hover-bg-color-alt1: rgba(255, 255, 255, .39);
  --color-sf-appbar-bg-color-alt2: #1f2937;
  --color-sf-appbar-color-alt2: #ffffff;
  --color-sf-appbar-border-color-alt2: #1f2937;
  --color-sf-appbar-hover-bg-color-alt2: #818cf8;
  --color-sf-diagram-palette-background: #fff;
  --color-sf-diagram-palette-hover-background: #f9fafb;
  --color-sf-diagram-palette-selected-color: #e5e7eb;
  --color-sf-rating-selected-color: #111827;
  --color-sf-rating-unrated-color: #e5e7eb;
  --color-sf-rating-selected-disabled-color: #9ca3af;
  --color-sf-rating-unrated-disabled-color: #e5e7eb;
  --color-sf-rating-selected-hover-color: #4f46e5;
  --color-sf-rating-unrated-hover-color: #374151;
  --color-sf-rating-pressed-color: #251bc3;
  --color-sf-msg-color: #374151;
  --color-sf-msg-bg-color: #f9fafb;
  --color-sf-msg-border-color: #e6e7ea;
  --color-sf-msg-color-alt1: #111827;
  --color-sf-msg-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-border-color-alt1: #e6e7ea;
  --color-sf-msg-color-alt2: #374151;
  --color-sf-msg-bg-color-alt2: #f9fafb;
  --color-sf-msg-border-color-alt2: #f1f3f4;
  --color-sf-msg-icon-color: #374151;
  --color-sf-msg-icon-color-alt1: #111827;
  --color-sf-msg-icon-color-alt2: #808691;
  --color-sf-msg-close-icon-color: #374151;
  --color-sf-msg-close-icon-color-alt1: #6b7280;
  --color-sf-msg-close-icon-color-alt2: #374151;
  --color-sf-msg-danger-color: #b91c1c;
  --color-sf-msg-danger-bg-color: #fff5f5;
  --color-sf-msg-danger-border-color: #fee2e2;
  --color-sf-msg-danger-color-alt1: #dc2626;
  --color-sf-msg-danger-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-danger-border-color-alt1: #fecaca;
  --color-sf-msg-danger-color-alt2: #e45959;
  --color-sf-msg-danger-bg-color-alt2: #fff5f5;
  --color-sf-msg-danger-border-color-alt2: #fff5f5;
  --color-sf-msg-danger-icon-color: #dc2626;
  --color-sf-msg-danger-icon-color-alt1: #dc2626;
  --color-sf-msg-danger-icon-color-alt2: #dc2626;
  --color-sf-msg-danger-close-icon-color: #b91c1c;
  --color-sf-msg-danger-close-icon-color-alt1: #6b7280;
  --color-sf-msg-danger-close-icon-color-alt2: #6b7280;
  --color-sf-msg-success-color: #15803d;
  --color-sf-msg-success-bg-color: #f0fdf4;
  --color-sf-msg-success-border-color: #bbf7d0;
  --color-sf-msg-success-color-alt1: #15803d;
  --color-sf-msg-success-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-success-border-color-alt1: #bbf7d0;
  --color-sf-msg-success-color-alt2: #15803d;
  --color-sf-msg-success-bg-color-alt2: #f0fdf4;
  --color-sf-msg-success-border-color-alt2: #f0fdf4;
  --color-sf-msg-success-icon-color: #15803d;
  --color-sf-msg-success-icon-color-alt1: #15803d;
  --color-sf-msg-success-icon-color-alt2: #15803d;
  --color-sf-msg-success-close-icon-color: #15803d;
  --color-sf-msg-success-close-icon-color-alt1: #6b7280;
  --color-sf-msg-success-close-icon-color-alt2: #6b7280;
  --color-sf-msg-warning-color: #c2410c;
  --color-sf-msg-warning-bg-color: #fff7ed;
  --color-sf-msg-warning-border-color: #ffedd5;
  --color-sf-msg-warning-color-alt1: #c2410c;
  --color-sf-msg-warning-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-warning-border-color-alt1: #fed7aa;
  --color-sf-msg-warning-color-alt2: #c2410c;
  --color-sf-msg-warning-bg-color-alt2: #fff7ed;
  --color-sf-msg-warning-border-color-alt2: #fff7ed;
  --color-sf-msg-warning-icon-color: #c2410c;
  --color-sf-msg-warning-icon-color-alt1: #c2410c;
  --color-sf-msg-warning-icon-color-alt2: #c2410c;
  --color-sf-msg-warning-close-icon-color: #c2410c;
  --color-sf-msg-warning-close-icon-color-alt1: #6b7280;
  --color-sf-msg-warning-close-icon-color-alt2: #6b7280;
  --color-sf-msg-info-color: #0e7490;
  --color-sf-msg-info-bg-color: #ecfeff;
  --color-sf-msg-info-border-color: #cffafe;
  --color-sf-msg-info-color-alt1: #0e7490;
  --color-sf-msg-info-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-info-border-color-alt1: #bae6fd;
  --color-sf-msg-info-color-alt2: #0e7490;
  --color-sf-msg-info-bg-color-alt2: #ecfeff;
  --color-sf-msg-info-border-color-alt2: #ecfeff;
  --color-sf-msg-info-icon-color: #0e7490;
  --color-sf-msg-info-icon-color-alt1: #6b7280;
  --color-sf-msg-info-icon-color-alt2: #0e7490;
  --color-sf-msg-info-close-icon-color: #0e7490;
  --color-sf-msg-info-close-icon-color-alt1: #6b7280;
  --color-sf-msg-info-close-icon-color-alt2: #6b7280;
  --color-sf-badge-light-bg-color: #faf9fa;
  --color-sf-badge-light-border-color: #faf9fa;
  --color-sf-badge-light-text-color: #000;
  --color-sf-badge-dark-bg-color: #212529;
  --color-sf-badge-dark-border-color: #212529;
  --color-sf-badge-dark-text-color: #fff;
  --color-sf-tab-border: #343a40;
  --color-sf-stepper: #fff;
  --color-sf-shadow-color: #fff;
  --color-sf-shadow-color1: ##000;
  --color-sf-breadcrumb-item-hover-color: #374151;
  --color-sf-breadcrumb-item-active-color: #4b5563;
  --color-sf-breadcrumb-item-focus-border-color: $transparent;
  --color-sf-transparent: rgba(255, 255, 255, 0);
  --color-sf-chip-primary-bg-color: #eef2ff;
  --color-sf-chip-primary-icon-color: rgba(67, 56, 202, .5);
  --color-sf-chip-primary-border-color: #e0e7ff;
  --color-sf-chip-primary-text: #4338ca;
  --color-sf-chip-primary-icon-color-hover: #4338ca;
  --color-sf-chip-primary-icon-color-pressed: #4338ca;
  --color-sf-chip-primary-bg-color-hover: #eef2ff;
  --color-sf-chip-primary-border-color-hover: #c7d2fe;
  --color-sf-chip-primary-text-hover: #4338ca;
  --color-sf-chip-primary-bg-color-pressed: #e0e7ff;
  --color-sf-chip-primary-icon-bg-color-pressed: #c7d2fe;
  --color-sf-chip-primary-icon-bg-color-hover: #c7d2fe;
  --color-sf-chip-primary-border-color-pressed: #e0e7ff;
  --color-sf-chip-primary-text-pressed: #4f46e5;
  --color-sf-chip-primary-bg-color-disabled: #eef2ff;
  --color-sf-chip-primary-border-color-disabled: #e0e7ff;
  --color-sf-chip-primary-text-disabled: #a5b4fc;
  --color-sf-chip-secondary-bg-color: #f9fafb;
  --color-sf-chip-secondary-icon-color: #9ca3af;
  --color-sf-chip-secondary-border-color: #f3f4f6;
  --color-sf-chip-secondary-text-color: #374151;
  --color-sf-chip-secondary-icon-color-hover: #5f6875;
  --color-sf-chip-secondary-icon-color-pressed: #5f6875;
  --color-sf-chip-secondary-bg-color-hover: #f9fafb;
  --color-sf-chip-secondary-border-color-hover: #e5e7eb;
  --color-sf-chip-secondary-text-color-hover: #374151;
  --color-sf-chip-secondary-bg-color-pressed: #e5e7eb;
  --color-sf-chip-secondary-icon-bg-color-pressed: #d7dadf;
  --color-sf-chip-secondary-icon-bg-color-hover: #d7dadf;
  --color-sf-chip-secondary-border-color-pressed: #e5e7eb;
  --color-sf-chip-secondary-text-color-pressed: #374151;
  --color-sf-chip-secondary-bg-color-disabled: #f9fafb;
  --color-sf-chip-secondary-border-color-disabled: #f3f4f6;
  --color-sf-chip-secondary-text-color-disabled: #9ca3af;
  --color-sf-chip-success-bg-color: #f0fdf4;
  --color-sf-chip-success-icon-color: rgba(21, 128, 61, .5);
  --color-sf-chip-success-border-color: #bbf7d0;
  --color-sf-chip-success-text: #15803d;
  --color-sf-chip-success-icon-color-hover: #489f68;
  --color-sf-chip-success-icon-color-pressed: #489f68;
  --color-sf-chip-success-bg-color-hover: #f0fdf4;
  --color-sf-chip-success-border-color-hover: #bbf7d0;
  --color-sf-chip-success-text-hover: #15803d;
  --color-sf-chip-success-bg-color-pressed: #bbf7d0;
  --color-sf-chip-success-icon-bg-color-pressed: #c4ebd2;
  --color-sf-chip-success-icon-bg-color-hover: #c4ebd2;
  --color-sf-chip-success-border-color-pressed: #bbf7d0;
  --color-sf-chip-success-text-pressed: #166534;
  --color-sf-chip-success-bg-color-disabled: #f0fdf4;
  --color-sf-chip-success-border-color-disabled: #bbf7d0;
  --color-sf-chip-success-text-disabled: #86efac;
  --color-sf-chip-warning-bg-color: #fff7ed;
  --color-sf-chip-warning-icon-color: rgba(194, 65, 12, .5);
  --color-sf-chip-warning-border-color: #ffedd5;
  --color-sf-chip-warning-text: #c2410c;
  --color-sf-chip-warning-icon-color-hover: #c2410c;
  --color-sf-chip-warning-icon-color-pressed: #c2410c;
  --color-sf-chip-warning-bg-color-hover: #fff7ed;
  --color-sf-chip-warning-border-color-hover: #fed7aa;
  --color-sf-chip-warning-text-hover: #c2410c;
  --color-sf-chip-warning-bg-color-pressed: #fed7aa;
  --color-sf-chip-warning-icon-bg-color-pressed: #fed7aa;
  --color-sf-chip-warning-icon-bg-color-hover: #fed7aa;
  --color-sf-chip-warning-border-color-pressed: #fed7aa;
  --color-sf-chip-warning-text-pressed: #9a3412;
  --color-sf-chip-warning-bg-color-disabled: #fff7ed;
  --color-sf-chip-warning-border-color-disabled: #ffedd5;
  --color-sf-chip-warning-text-disabled: #fdba74;
  --color-sf-chip-danger-bg-color: #fef2f2;
  --color-sf-chip-danger-icon-color: rgba(185, 28, 28, .5);
  --color-sf-chip-danger-border-color: #fee2e2;
  --color-sf-chip-danger-text: #b91c1c;
  --color-sf-chip-danger-icon-color-hover: #b91c1c;
  --color-sf-chip-danger-icon-color-pressed: #b91c1c;
  --color-sf-chip-danger-bg-color-hover: #fef2f2;
  --color-sf-chip-danger-border-color-hover: #fecaca;
  --color-sf-chip-danger-text-hover: #b91c1c;
  --color-sf-chip-danger-bg-color-pressed: #fecaca;
  --color-sf-chip-danger-icon-bg-color-pressed: #fecaca;
  --color-sf-chip-danger-icon-bg-color-hover: #fecaca;
  --color-sf-chip-danger-border-color-pressed: #fecaca;
  --color-sf-chip-danger-text-pressed: #991b1b;
  --color-sf-chip-danger-bg-color-disabled: #fef2f2;
  --color-sf-chip-danger-border-color-disabled: #fee2e2;
  --color-sf-chip-danger-text-disabled: #fca5a5;
  --color-sf-chip-info-bg-color: #ecfeff;
  --color-sf-chip-info-icon-color: rgba(14, 116, 144, .5);
  --color-sf-chip-info-border-color: #cffafe;
  --color-sf-chip-info-text: #0e7490;
  --color-sf-chip-info-icon-color-hover: #0e7490;
  --color-sf-chip-info-icon-color-pressed: #0e7490;
  --color-sf-chip-info-bg-color-hover: #ecfeff;
  --color-sf-chip-info-border-color-hover: #a5f3fc;
  --color-sf-chip-info-text-hover: #0e7490;
  --color-sf-chip-info-bg-color-pressed: #a5f3fc;
  --color-sf-chip-info-icon-bg-color-pressed: #a5f3fc;
  --color-sf-chip-info-icon-bg-color-hover: #a5f3fc;
  --color-sf-chip-info-border-color-pressed: #a5f3fc;
  --color-sf-chip-info-text-pressed: #155e75;
  --color-sf-chip-info-bg-color-disabled: #ecfeff;
  --color-sf-chip-info-border-color-disabled: #cffafe;
  --color-sf-chip-info-text-disabled: #67e8f9;
}

.e-dark-mode {
  --color-sf-content-bg-color: rgba(17, 24, 39);
  --color-sf-content-bg-color-alt1: #1d2432;
  --color-sf-content-bg-color-alt2: #232937;
  --color-sf-content-bg-color-alt3: #282f3c;
  --color-sf-content-bg-color-alt4: #2f3542;
  --color-sf-content-bg-color-alt5: #343a47;
  --color-sf-content-bg-color-hover: #1a212f;
  --color-sf-content-bg-color-pressed: #242a38;
  --color-sf-content-bg-color-focus: #1a212f;
  --color-sf-content-bg-color-selected: #2e3441;
  --color-sf-content-bg-color-dragged: #242a38;
  --color-sf-content-bg-color-disabled: #111827;
  --color-sf-flyout-bg-color: #1a212f;
  --color-sf-flyout-bg-color-hover: #1f2634;
  --color-sf-flyout-bg-color-pressed: #242a38;
  --color-sf-flyout-bg-color-focus: #1f2634;
  --color-sf-flyout-bg-color-selected: #2e3441;
  --color-sf-flyout-bg-color-disabled: #1a212f;
  --color-sf-overlay-bg-color: rgba(107, 114, 128, .75);
  --color-sf-table-bg-color-hover: #1a212f;
  --color-sf-table-bg-color-pressed: #242a38;
  --color-sf-table-bg-color-selected: #2e3441;
  --color-sf-text-input-bg-color: rgba(255, 255, 255, .05);
  --color-sf-treeview-item-active-hover-bg: ##2e3441;
  --color-sf-content-text-color: #fff;
  --color-sf-content-text-color-alt1: #e5e7eb;
  --color-sf-content-text-color-alt2: #d1d5db;
  --color-sf-content-text-color-alt3: #9ca3af;
  --color-sf-content-text-color-alt4: #6b7280;
  --color-sf-content-text-color-hover: #fff;
  --color-sf-content-text-color-pressed: #fff;
  --color-sf-content-text-color-focus: #fff;
  --color-sf-content-text-color-selected: #fff;
  --color-sf-content-text-color-dragged: #fff;
  --color-sf-content-text-color-disabled: #6b7280;
  --color-sf-placeholder-text-color: #6b7280;
  --color-sf-flyout-text-color: #fff;
  --color-sf-flyout-text-color-hover: #fff;
  --color-sf-flyout-text-color-pressed: #fff;
  --color-sf-flyout-text-color-focus: #fff;
  --color-sf-flyout-text-color-selected: #fff;
  --color-sf-flyout-text-color-disabled: #6b7280;
  --color-sf-table-text-color-hover: #fff;
  --color-sf-table-text-color-pressed: #fff;
  --color-sf-table-text-color-selected: #fff;
  --color-sf-icon-color: #d1d5db;
  --color-sf-icon-color-hover: #9ca3af;
  --color-sf-icon-color-pressed: #e5e7eb;
  --color-sf-icon-color-disabled: #4b5563;
  --color-sf-close-icon-color: #9ca3af;
  --color-sf-close-icon-color-hover: #9ca3af;
  --color-sf-close-icon-color-pressed: #9ca3af;
  --color-sf-close-icon-color-disabled: #6b7280;
  --color-sf-border-light: #282f3c;
  --color-sf-border: #374151;
  --color-sf-border-dark: #9ca3af;
  --color-sf-border-hover: #4b5563;
  --color-sf-border-pressed: #6b7280;
  --color-sf-border-focus: #374151;
  --color-sf-border-selected: #4b5563;
  --color-sf-border-dragged: #374151;
  --color-sf-border-disabled: #374151;
  --color-sf-border-warning: #c2410c;
  --color-sf-border-error: #dc2626;
  --color-sf-border-success: #15803d;
  --color-sf-spreadsheet-gridline: #e5e7eb;
  --color-sf-flyout-border: #282f3c;
  --color-sf-dialog-border: rgba(255, 255, 255, .1);
  --color-sf-primary: rgba(99, 102, 241);
  --color-sf-primary-text-color: #000;
  --color-sf-primary-light: #3730a3;
  --color-sf-primary-lighter: #1e1b4b;
  --color-sf-primary-dark: #818cf8;
  --color-sf-primary-darker: #4f46e5;
  --color-sf-secondary: rgba(255, 255, 255, .01);
  --color-sf-success: #22c55e;
  --color-sf-info: #38bdf8;
  --color-sf-warning: #f97316;
  --color-sf-danger: #f87171;
  --color-sf-success-light: #164c37;
  --color-sf-info-light: #0e485b;
  --color-sf-warning-light: #573422;
  --color-sf-danger-light: #54252f;
  --color-sf-success-dark: #4ade80;
  --color-sf-info-dark: #38bdf8;
  --color-sf-warning-dark: #fb923c;
  --color-sf-danger-dark: #ef4444;
  --color-sf-success-lighter: #122a2c;
  --color-sf-info-lighter: #102838;
  --color-sf-warning-lighter: #282125;
  --color-sf-danger-lighter: #271d2a;
  --color-sf-black: 0, 0, 0;
  --color-sf-white: 255, 255, 255;
  --color-sf-primary-bg-color: #6366f1;
  --color-sf-primary-border-color: #6366f1;
  --color-sf-primary-text: #fff;
  --color-sf-primary-bg-color-hover: #818cf8;
  --color-sf-primary-border-color-hover: #818cf8;
  --color-sf-primary-text-hover: #ffffff;
  --color-sf-primary-bg-color-pressed: #4f46e5;
  --color-sf-primary-border-color-pressed: #4f46e5;
  --color-sf-primary-text-pressed: #fff;
  --color-sf-primary-bg-color-focus: #818cf8;
  --color-sf-primary-border-color-focus: #818cf8;
  --color-sf-primary-text-focus: #fff;
  --color-sf-primary-bg-color-disabled: #312e81;
  --color-sf-primary-border-color-disabled: #312e81;
  --color-sf-primary-text-disabled: rgba(255, 255, 255, .3);
  --color-sf-secondary-bg-color: rgba(255, 255, 255, .1);
  --color-sf-secondary-border-color: rgba(255, 255, 255, .1);
  --color-sf-secondary-text-color: #fff;
  --color-sf-secondary-bg-color-hover: rgba(255, 255, 255, .2);
  --color-sf-secondary-border-color-hover: rgba(255, 255, 255, .2);
  --color-sf-secondary-text-color-hover: #fff;
  --color-sf-secondary-bg-color-pressed: rgba(255, 255, 255, .3);
  --color-sf-secondary-border-color-pressed: rgba(255, 255, 255, .3);
  --color-sf-secondary-text-color-pressed: #fff;
  --color-sf-secondary-bg-color-focus: rgba(255, 255, 255, .2);
  --color-sf-secondary-border-color-focus: rgba(255, 255, 255, .2);
  --color-sf-secondary-text-color-focus: #fff;
  --color-sf-secondary-bg-color-disabled: rgba(255, 255, 255, .2);
  --color-sf-secondary-border-color-disabled: rgba(255, 255, 255, .2);
  --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .3);
  --color-sf-success-bg-color: #22c55e;
  --color-sf-success-border-color: #22c55e;
  --color-sf-success-text: #000;
  --color-sf-success-bg-color-hover: #4ade80;
  --color-sf-success-border-color-hover: #4ade80;
  --color-sf-success-text-hover: #000;
  --color-sf-success-bg-color-pressed: #16a34a;
  --color-sf-success-border-color-pressed: #16a34a;
  --color-sf-success-text-pressed: #000;
  --color-sf-success-bg-color-focus: #4ade80;
  --color-sf-success-border-color-focus: #4ade80;
  --color-sf-success-text-focus: #000;
  --color-sf-success-bg-color-disabled: #14532d;
  --color-sf-success-border-color-disabled: #14532d;
  --color-sf-success-text-disabled: rgba(0, 0, 0, .3);
  --color-sf-warning-bg-color: #f97316;
  --color-sf-warning-border-color: #f97316;
  --color-sf-warning-text: #000;
  --color-sf-warning-bg-color-hover: #fb923c;
  --color-sf-warning-border-color-hover: #fb923c;
  --color-sf-warning-text-hover: #000;
  --color-sf-warning-bg-color-pressed: #ea580c;
  --color-sf-warning-border-color-pressed: #ea580c;
  --color-sf-warning-text-pressed: #000;
  --color-sf-warning-bg-color-focus: #fb923c;
  --color-sf-warning-border-color-focus: #fb923c;
  --color-sf-warning-text-focus: #000;
  --color-sf-warning-bg-color-disabled: #7c2d12;
  --color-sf-warning-border-color-disabled: #7c2d12;
  --color-sf-warning-text-disabled: rgba(255, 255, 255, .3);
  --color-sf-info-bg-color: #0ea5e9;
  --color-sf-info-border-color: #0ea5e9;
  --color-sf-info-text: #000;
  --color-sf-info-bg-color-hover: #38bdf8;
  --color-sf-info-border-color-hover: #38bdf8;
  --color-sf-info-text-hover: #000;
  --color-sf-info-bg-color-pressed: #0284c7;
  --color-sf-info-border-color-pressed: #0284c7;
  --color-sf-info-text-pressed: #000;
  --color-sf-info-bg-color-focus: #38bdf8;
  --color-sf-info-border-color-focus: #38bdf8;
  --color-sf-info-text-focus: #000;
  --color-sf-info-bg-color-disabled: #0c4a6e;
  --color-sf-info-border-color-disabled: #0c4a6e;
  --color-sf-info-text-disabled: rgba(255, 255, 255, .3);
  --color-sf-danger-bg-color: #f87171;
  --color-sf-danger-border-color: #f87171;
  --color-sf-danger-text: #000;
  --color-sf-danger-bg-color-hover: #ef4444;
  --color-sf-danger-border-color-hover: #ef4444;
  --color-sf-danger-text-hover: #fff;
  --color-sf-danger-bg-color-pressed: #dc2626;
  --color-sf-danger-border-color-pressed: #dc2626;
  --color-sf-danger-text-pressed: #fff;
  --color-sf-danger-bg-color-focus: #ef4444;
  --color-sf-danger-border-color-focus: #ef4444;
  --color-sf-danger-text-focus: #fff;
  --color-sf-danger-bg-color-disabled: #7f1d1d;
  --color-sf-danger-border-color-disabled: #7f1d1d;
  --color-sf-danger-text-disabled: rgba(255, 255, 255, .3);
  --color-sf-primary-outline: #6366f1;
  --color-sf-secondary-outline: rgba(255, 255, 255, .1);
  --color-sf-warning-outline: #f97316;
  --color-sf-danger-outline: #f87171;
  --color-sf-success-outline: #22c55e;
  --color-sf-info-outline: #38bdf8;
  --color-sf-tooltip-bg-color: #f9fafb;
  --color-sf-tooltip-border: #f9fafb;
  --color-sf-tooltip-text-color: #1f2937;
  --color-sf-appbar-bg-color-alt1: #374151;
  --color-sf-appbar-color-alt1: #fff;
  --color-sf-appbar-border-color-alt1: #374151;
  --color-sf-appbar-hover-bg-color-alt1: #fff;
  --color-sf-appbar-bg-color-alt2: #e5e7eb;
  --color-sf-appbar-color-alt2: #111827;
  --color-sf-appbar-border-color-alt2: #e5e7eb;
  --color-sf-appbar-hover-bg-color-alt2: #fff;
  --color-sf-diagram-palette-background: #e5e7eb;
  --color-sf-diagram-palette-hover-background: #d1d5db;
  --color-sf-diagram-palette-selected-color: #9ca3af;
  --color-sf-rating-selected-color: #d1d5db;
  --color-sf-rating-unrated-color: #374151;
  --color-sf-rating-selected-disabled-color: #6b7280;
  --color-sf-rating-unrated-disabled-color: #374151;
  --color-sf-rating-selected-hover-color: #4f46e5;
  --color-sf-rating-unrated-hover-color: #9ca3af;
  --color-sf-rating-pressed-color: #69e1f3;
  --color-sf-msg-color: #9ca3af;
  --color-sf-msg-bg-color: #1f2937;
  --color-sf-msg-border-color: #374151;
  --color-sf-msg-color-alt1: #9ca3af;
  --color-sf-msg-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-border-color-alt1: #374151;
  --color-sf-msg-color-alt2: #9ca3af;
  --color-sf-msg-bg-color-alt2: #1f2937;
  --color-sf-msg-border-color-alt2: #2c394c;
  --color-sf-msg-icon-color: #9ca3af;
  --color-sf-msg-icon-color-alt1: #9ca3af;
  --color-sf-msg-icon-color-alt2: #9ca3af;
  --color-sf-msg-close-icon-color: #9ca3af;
  --color-sf-msg-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-close-icon-color-alt2: #9ca3af;
  --color-sf-msg-danger-color: #f87171;
  --color-sf-msg-danger-bg-color: #271d2a;
  --color-sf-msg-danger-border-color: #4f2530;
  --color-sf-msg-danger-color-alt1: #f87171;
  --color-sf-msg-danger-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-danger-border-color-alt1: #4f2530;
  --color-sf-msg-danger-color-alt2: #f87171;
  --color-sf-msg-danger-bg-color-alt2: #271d2a;
  --color-sf-msg-danger-border-color-alt2: #271d2a;
  --color-sf-msg-danger-icon-color: #f87171;
  --color-sf-msg-danger-icon-color-alt1: #f87171;
  --color-sf-msg-danger-icon-color-alt2: #f87171;
  --color-sf-msg-danger-close-icon-color: #f87171;
  --color-sf-msg-danger-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-danger-close-icon-color-alt2: #adb5bd;
  --color-sf-msg-success-color: #22c55e;
  --color-sf-msg-success-bg-color: #122a2c;
  --color-sf-msg-success-border-color: #154936;
  --color-sf-msg-success-color-alt1: #22c55e;
  --color-sf-msg-success-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-success-border-color-alt1: #154936;
  --color-sf-msg-success-color-alt2: #22c55e;
  --color-sf-msg-success-bg-color-alt2: #122a2c;
  --color-sf-msg-success-border-color-alt2: #122a2c;
  --color-sf-msg-success-icon-color: #22c55e;
  --color-sf-msg-success-icon-color-alt1: #22c55e;
  --color-sf-msg-success-icon-color-alt2: #22c55e;
  --color-sf-msg-success-close-icon-color: #22c55e;
  --color-sf-msg-success-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-success-close-icon-color-alt2: #adb5bd;
  --color-sf-msg-warning-color: #fb923c;
  --color-sf-msg-warning-bg-color: #282125;
  --color-sf-msg-warning-border-color: #523122;
  --color-sf-msg-warning-color-alt1: #fb923c;
  --color-sf-msg-warning-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-warning-border-color-alt1: #523122;
  --color-sf-msg-warning-color-alt2: #fb923c;
  --color-sf-msg-warning-bg-color-alt2: #282125;
  --color-sf-msg-warning-border-color-alt2: #282125;
  --color-sf-msg-warning-icon-color: #fb923c;
  --color-sf-msg-warning-icon-color-alt1: #fb923c;
  --color-sf-msg-warning-icon-color-alt2: #fb923c;
  --color-sf-msg-warning-close-icon-color: #fb923c;
  --color-sf-msg-warning-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-warning-close-icon-color-alt2: #adb5bd;
  --color-sf-msg-info-color: #22d3ee;
  --color-sf-msg-info-bg-color: #102838;
  --color-sf-msg-info-border-color: #0e4457;
  --color-sf-msg-info-color-alt1: #22d3ee;
  --color-sf-msg-info-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-info-border-color-alt1: #0e4457;
  --color-sf-msg-info-color-alt2: #22d3ee;
  --color-sf-msg-info-bg-color-alt2: #102838;
  --color-sf-msg-info-border-color-alt2: #102838;
  --color-sf-msg-info-icon-color: #06b6d4;
  --color-sf-msg-info-icon-color-alt1: #22d3ee;
  --color-sf-msg-info-icon-color-alt2: #22d3ee;
  --color-sf-msg-info-close-icon-color: #22d3ee;
  --color-sf-msg-info-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-info-close-icon-color-alt2: #adb5bd;
  --color-sf-badge-light-bg-color: #faf9fa;
  --color-sf-badge-light-border-color: #faf9fa;
  --color-sf-badge-light-text-color: #000;
  --color-sf-badge-dark-bg-color: #212529;
  --color-sf-badge-dark-border-color: #212529;
  --color-sf-badge-dark-text-color: #fff;
  --color-sf-tab-border: #343a40;
  --color-sf-stepper: rgba(17, 24, 39);
  --color-sf-shadow-color: #fff;
  --color-sf-shadow-color1: #000;
  --color-sf-breadcrumb-item-hover-color: #e5e7eb;
  --color-sf-breadcrumb-item-active-color: #d1d5db;
  --color-sf-breadcrumb-item-focus-border-color: $transparent;
  --color-sf-transparent: rgba(255, 255, 255, .01);
  --color-sf-chip-primary-bg-color: rgba(99, 102, 241, .1);
  --color-sf-chip-primary-icon-color: rgba(99, 102, 241, .5);
  --color-sf-chip-primary-border-color: rgba(79, 70, 229, .5);
  --color-sf-chip-primary-text: #818cf8;
  --color-sf-chip-primary-icon-color-hover: #818cf8;
  --color-sf-chip-primary-icon-color-pressed: #818cf8;
  --color-sf-chip-primary-bg-color-hover: rgba(99, 102, 241, .1);
  --color-sf-chip-primary-border-color-hover: rgba(79, 70, 229, .7);
  --color-sf-chip-primary-text-hover: #818cf8;
  --color-sf-chip-primary-bg-color-pressed: rgba(99, 102, 241, .7);
  --color-sf-chip-primary-icon-bg-color-pressed: rgba(99, 102, 241, .7);
  --color-sf-chip-primary-icon-bg-color-hover: rgba(99, 102, 241, .7);
  --color-sf-chip-primary-border-color-pressed: rgba(99, 102, 241, .7);
  --color-sf-chip-primary-text-pressed: #c7d2fe;
  --color-sf-chip-primary-bg-color-disabled: rgba(99, 102, 241, .1);
  --color-sf-chip-primary-border-color-disabled: rgba(79, 70, 229, .5);
  --color-sf-chip-primary-text-disabled: #3730a3;
  --color-sf-chip-secondary-bg-color: #1f2937;
  --color-sf-chip-secondary-icon-color: #6b7280;
  --color-sf-chip-secondary-border-color: #374151;
  --color-sf-chip-secondary-text-color: #9ca3af;
  --color-sf-chip-secondary-icon-color-hover: #9ca3af;
  --color-sf-chip-secondary-icon-color-pressed: #9ca3af;
  --color-sf-chip-secondary-bg-color-hover: #1f2937;
  --color-sf-chip-secondary-border-color-hover: #4b5563;
  --color-sf-chip-secondary-text-color-hover: #9ca3af;
  --color-sf-chip-secondary-bg-color-pressed: #4b5563;
  --color-sf-chip-secondary-icon-bg-color-pressed: #4b5563;
  --color-sf-chip-secondary-icon-bg-color-hover: #4b5563;
  --color-sf-chip-secondary-border-color-pressed: #4b5563;
  --color-sf-chip-secondary-text-color-pressed: #d1d5db;
  --color-sf-chip-secondary-bg-color-disabled: #1f2937;
  --color-sf-chip-secondary-border-color-disabled: #374151;
  --color-sf-chip-secondary-text-color-disabled: #4b5563;
  --color-sf-chip-success-bg-color: rgba(34, 197, 94, .1);
  --color-sf-chip-success-icon-color: rgba(34, 197, 94, .5);
  --color-sf-chip-success-border-color: rgba(34, 197, 94, .2);
  --color-sf-chip-success-text: #22c55e;
  --color-sf-chip-success-icon-color-hover: #22c55e;
  --color-sf-chip-success-icon-color-pressed: #4ade80;
  --color-sf-chip-success-bg-color-hover: rgba(34, 197, 94, .1);
  --color-sf-chip-success-border-color-hover: rgba(34, 197, 94, .3);
  --color-sf-chip-success-text-hover: #22c55e;
  --color-sf-chip-success-bg-color-pressed: rgba(34, 197, 94, .3);
  --color-sf-chip-success-icon-bg-color-pressed: rgba(34, 197, 94, .3);
  --color-sf-chip-success-icon-bg-color-hover: rgba(34, 197, 94, .3);
  --color-sf-chip-success-border-color-pressed: rgba(34, 197, 94, .3);
  --color-sf-chip-success-text-pressed: #22c55e;
  --color-sf-chip-success-bg-color-disabled: rgba(34, 197, 94, .1);
  --color-sf-chip-success-border-color-disabled: rgba(34, 197, 94, .1);
  --color-sf-chip-success-text-disabled: #14532d;
  --color-sf-chip-warning-bg-color: rgba(249, 115, 22, .1);
  --color-sf-chip-warning-icon-color: rgba(249, 115, 22, .5);
  --color-sf-chip-warning-border-color: rgba(249, 115, 22, .2);
  --color-sf-chip-warning-text: #fb923c;
  --color-sf-chip-warning-icon-color-hover: #fb923c;
  --color-sf-chip-warning-icon-color-pressed: #fb923c;
  --color-sf-chip-warning-bg-color-hover: rgba(249, 115, 22, .1);
  --color-sf-chip-warning-border-color-hover: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-text-hover: #fb923c;
  --color-sf-chip-warning-bg-color-pressed: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-icon-bg-color-pressed: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-icon-bg-color-hover: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-border-color-pressed: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-text-pressed: #fed7aa;
  --color-sf-chip-warning-bg-color-disabled: rgba(249, 115, 22, .1);
  --color-sf-chip-warning-border-color-disabled: rgba(249, 115, 22, .1);
  --color-sf-chip-warning-text-disabled: #9a3412;
  --color-sf-chip-danger-bg-color: rgba(239, 68, 68, .1);
  --color-sf-chip-danger-icon-color: rgba(239, 68, 68, .5);
  --color-sf-chip-danger-border-color: rgba(239, 68, 68, .2);
  --color-sf-chip-danger-text: #f87171;
  --color-sf-chip-danger-icon-color-hover: #f87171;
  --color-sf-chip-danger-icon-color-pressed: #f87171;
  --color-sf-chip-danger-bg-color-hover: rgba(239, 68, 68, .1);
  --color-sf-chip-danger-border-color-hover: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-text-hover: #f87171;
  --color-sf-chip-danger-bg-color-pressed: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-icon-bg-color-pressed: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-icon-bg-color-hover: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-border-color-pressed: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-text-pressed: #fca5a5;
  --color-sf-chip-danger-bg-color-disabled: rgba(239, 68, 68, .1);
  --color-sf-chip-danger-border-color-disabled: rgba(239, 68, 68, .2);
  --color-sf-chip-danger-text-disabled: #7f1d1d;
  --color-sf-chip-info-bg-color: rgba(6, 182, 212, .1);
  --color-sf-chip-info-icon-color: rgba(6, 182, 212, .5);
  --color-sf-chip-info-border-color: rgba(6, 182, 212, .2);
  --color-sf-chip-info-text: #22d3ee;
  --color-sf-chip-info-icon-color-hover: #22d3ee;
  --color-sf-chip-info-icon-color-pressed: #22d3ee;
  --color-sf-chip-info-bg-color-hover: rgba(6, 182, 212, .1);
  --color-sf-chip-info-border-color-hover: rgba(6, 182, 212, .3);
  --color-sf-chip-info-text-hover: #22d3ee;
  --color-sf-chip-info-bg-color-pressed: rgba(6, 182, 212, .3);
  --color-sf-chip-info-icon-bg-color-pressed: rgba(6, 182, 212, .3);
  --color-sf-chip-info-icon-bg-color-hover: rgba(6, 182, 212, .3);
  --color-sf-chip-info-border-color-pressed: rgba(6, 182, 212, .3);
  --color-sf-chip-info-text-pressed: #22d3ee;
  --color-sf-chip-info-bg-color-disabled: rgba(6, 182, 212, .1);
  --color-sf-chip-info-border-color-disabled: rgba(6, 182, 212, .2);
  --color-sf-chip-info-text-disabled: #155e75;
}

.e-control,
.e-css,
.e-error {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
  font-size: 12px;
  font-weight: 400;
}

.e-error {
  color: var(--color-sf-danger);
}

.e-control,
.e-control [class^=e-],
.e-control [class*=" e-"] {
  box-sizing: border-box;
}

.e-control:focus,
.e-control *:focus {
  outline: none;
}

.e-rtl {
  direction: rtl;
  text-align: right;
}

.e-overlay {
  background-color: var(--color-sf-overlay-bg-color);
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
  touch-action: none;
  width: 100%;
}

.e-hidden {
  display: none;
}

.e-blazor-hidden {
  visibility: hidden;
}

.e-disabled {
  background-image: none;
  cursor: default;
  opacity: 0.35;
}

.e-ul {
  list-style-type: none;
}

.e-prevent-select {
  user-select: none;
}

.e-warning {
  color: var(--color-sf-warning);
}

.e-success {
  color: var(--color-sf-success);
}

.e-information {
  color: var(--color-sf-info);
}

.e-block-touch {
  touch-action: pinch-zoom;
}

.e-license {
  color: #ff0;
  text-decoration: none;
}

.e-license-banner {
  position: absolute;
  right: 10px;
  top: 27%;
  cursor: pointer;
}

@keyframes SlideLeftOut {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-100%, 0);
  }
}
@keyframes SlideLeftIn {
  from {
    transform: translate(-100%, 0);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes SlideRightIn {
  from {
    transform: translate(100%, 0);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes SlideRightOut {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(100%, 0);
  }
}
@keyframes SlideBottomIn {
  from {
    transform: translate(0, 100%);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes SlideBottomOut {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 100%);
  }
}
@keyframes SlideTopIn {
  from {
    transform: translate(0, -100%);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes SlideTopOut {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, -100%);
  }
}
@keyframes SlideRight {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes SlideLeft {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@keyframes SlideDown {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@keyframes SlideUp {
  from {
    height: 100%;
  }
  to {
    height: 0;
  }
}
@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes FadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes ZoomIn {
  from {
    transform: translate(0, 0) scale(0);
  }
  to {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes ZoomOut {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(0, 0) scale(0);
  }
}
@keyframes FadeZoomIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes FadeZoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes FlipRightDownIn {
  from {
    transform: perspective(400px) rotateY(-180deg);
    transform-origin: right center;
    transform-style: preserve-3d;
  }
  to {
    transform: rotateY(0deg);
    transform-origin: right center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipRightDownOut {
  from {
    transform: perspective(400px) rotateY(0deg);
    transform-origin: right center;
    transform-style: preserve-3d;
  }
  to {
    transform: rotateY(-180deg);
    transform-origin: right center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipRightUpIn {
  from {
    transform: perspective(400px) rotateY(135deg);
    transform-origin: right center;
    transform-style: preserve-3d;
  }
  to {
    transform: rotateY(0deg);
    transform-origin: right center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipRightUpOut {
  from {
    transform: perspective(400px) rotateY(0deg);
    transform-origin: right center;
    transform-style: preserve-3d;
  }
  to {
    transform: rotateY(135deg);
    transform-origin: right center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipLeftDownIn {
  from {
    transform: perspective(400px) rotateY(-180deg);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
  to {
    transform: rotateY(0deg);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipLeftDownOut {
  from {
    transform: perspective(400px) rotateY(0deg);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
  to {
    transform: rotateY(135deg);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipLeftUpIn {
  from {
    transform: perspective(400px) rotateY(-135deg);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
  to {
    transform: rotateY(0deg);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipLeftUpOut {
  from {
    transform: perspective(400px) rotateY(0deg);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
  to {
    transform: rotateY(135deg) perspective(200px);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipYLeftIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(180deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
  50% {
    transform: perspective(700px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipYLeftOut {
  from {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
  50% {
    transform: perspective(700px) rotateY(90deg);
  }
  75% {
    transform: perspective(850px) rotateY(125deg);
  }
  to {
    opacity: 0;
    transform: rotateY(180deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipYRightIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(-180deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
  50% {
    transform: perspective(700px) rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipYRightOut {
  from {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
  50% {
    transform: perspective(700px) rotateY(-90deg);
  }
  to {
    opacity: 0;
    transform: rotateY(-180deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipXDownIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(180deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
  50% {
    transform: perspective(700px) rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipXDownOut {
  from {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
  50% {
    transform: perspective(700px) rotateX(90deg);
  }
  75% {
    transform: perspective(850px) rotateX(125deg);
  }
  to {
    opacity: 0;
    transform: rotateX(180deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipXUpIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(-180deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
  50% {
    transform: perspective(700px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
}
@keyframes FlipXUpOut {
  from {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
  50% {
    transform: perspective(700px) rotateX(-90deg);
  }
  to {
    opacity: 0;
    transform: rotateX(-180deg);
    transform-origin: center center;
    transform-style: preserve-3d;
  }
}
.e-ripple,
.e-ripple-style {
  overflow: hidden;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.e-ripple-element,
.e-ripple-style::after {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transform: scale(0);
  transition: opacity, transform 0ms cubic-bezier(0, 0.1, 0.2, 1);
}

.e-ripple-style::after {
  background: rgba(0, 0, 0, 0.3);
  content: "";
  display: block;
  height: 50%;
  left: 25%;
  opacity: 0;
  top: 25%;
  transform: scale(3);
  transition: transform 0.5s, opacity 0.5s;
  width: 50%;
}
.e-ripple-style:active::after {
  opacity: 1;
  transform: scale(0);
  transition: 0s;
}

@font-face {
  font-family: "e-icons";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tTD8AAAEoAAAAVmNtYXA7AkNUAAAKvAAABNBnbHlmkN2XJwAAGMwABHyIaGVhZCw6nMwAAADQAAAANmhoZWEIVQZQAAAArAAAACRobXR4PAAAAAAAAYAAAAk8bG9jYQVQf/QAAA+MAAAJQG1heHADeQLBAAABCAAAACBuYW1lc0cOBgAElVQAAAIlcG9zdJfCD/QABJd8AAAi6wABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAACTwABAAAAAQAAiiu5XV8PPPUACwQAAAAAAOSSK+sAAAAA5JIr6wAAAAAD+AP4AAAACAACAAEAAAAAAAEAAAJPArUAIAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDpTQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAB