@syncfusion/blazor-themes/Compiled-Themes/bootstrap5.3.css

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

:root {
  --color-sf-black: 0, 0, 0;
  --color-sf-white: 255, 255, 255;
  --color-sf-content-bg-color: #fff;
  --color-sf-content-bg-color-alt1: #f8f9fa;
  --color-sf-content-bg-color-alt2: #e9ecef;
  --color-sf-content-bg-color-alt3: #dee2e6;
  --color-sf-content-bg-color-alt4: #ced4da;
  --color-sf-content-bg-color-alt5: #adb5bd;
  --color-sf-content-bg-color-hover: #f8f9fa;
  --color-sf-content-bg-color-pressed: #e9ecef;
  --color-sf-content-bg-color-focus: #e9ecef;
  --color-sf-content-bg-color-selected: #0d6efd;
  --color-sf-content-bg-color-dragged: #ced4da;
  --color-sf-content-bg-color-disabled: #e9ecef;
  --color-sf-flyout-bg-color: #fff;
  --color-sf-flyout-bg-color-hover: #f8f9fa;
  --color-sf-flyout-bg-color-pressed: #0d6efd;
  --color-sf-flyout-bg-color-focus: #f8f9fa;
  --color-sf-overlay-bg-color: 0, 0, 0;
  --color-sf-table-bg-color-hover: rgba(0, 0, 0, .07);
  --color-sf-table-bg-color-pressed: #dee2e6;
  --color-sf-table-bg-color-selected: rgba(0, 0, 0, .1);
  --color-sf-content-text-color: #212529;
  --color-sf-content-text-color-alt1: rgba(33, 37, 41, .75);
  --color-sf-content-text-color-alt2: rgba(33, 37, 41, .5);
  --color-sf-content-text-color-alt3: rgba(33, 37, 41, .25);
  --color-sf-content-text-color-hover: #000;
  --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
  --color-sf-content-text-color-focus: #000;
  --color-sf-content-text-color-selected: #fff;
  --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
  --color-sf-content-text-color-disabled: rgba(33, 37, 41, .75);
  --color-sf-placeholder-text-color: #6c757d;
  --color-sf-flyout-text-color: var(--color-sf-content-text-color);
  --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
  --color-sf-flyout-text-color-pressed: #fff;
  --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
  --color-sf-flyout-text-color-disabled: rgba(33, 37, 41, .5);
  --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
  --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
  --color-sf-icon-color: #6c757d;
  --color-sf-icon-color-hover: #343a40;
  --color-sf-icon-color-pressed: #212529;
  --color-sf-icon-color-disabled: #adb5bd;
  --color-sf-close-icon-color: rgba(0, 0, 0, .5);
  --color-sf-close-icon-color-hover: rgba(0, 0, 0, .75);
  --color-sf-close-icon-color-pressed: rgba(0, 0, 0, 1);
  --color-sf-close-icon-color-disabled: rgba(0, 0, 0, .25);
  --color-sf-border-light: #dee2e6;
  --color-sf-border: #dee2e6;
  --color-sf-border-dark: #adb5bd;
  --color-sf-border-hover: #dee2e6;
  --color-sf-border-pressed: #dee2e6;
  --color-sf-border-focus: #86b7fe;
  --color-sf-border-selected: #86b7fe;
  --color-sf-border-dragged: #dee2e6;
  --color-sf-border-disabled: #dee2e6;
  --color-sf-border-warning: #ffc107;
  --color-sf-border-error: #dc3545;
  --color-sf-border-success: #198754;
  --color-sf-spreadsheet-gridline: #dee2e6;
  --color-sf-flyout-border: rgba(0, 0, 0, .175);
  --color-sf-primary: rgba(13, 110, 253, 1);
  --color-sf-primary-text-color: #fff;
  --color-sf-primary-light: #86b7fe;
  --color-sf-primary-lighter: #cfe2ff;
  --color-sf-primary-dark: #3367d1;
  --color-sf-primary-darker: #052c65;
  --color-sf-secondary: rgba(108, 117, 125, 1);
  --color-sf-success: rgba(25, 135, 84, 1);
  --color-sf-info: rgba(13, 202, 240, 1);
  --color-sf-warning: rgba(255, 193, 7, 1);
  --color-sf-danger: rgba(220, 53, 69, 1);
  --color-sf-success-light: #d1e7dd;
  --color-sf-info-light: #cff4fc;
  --color-sf-warning-light: #fff3cd;
  --color-sf-danger-light: #f8d7da;
  --color-sf-success-dark: #0a3622;
  --color-sf-info-dark: #055160;
  --color-sf-warning-dark: #664d03;
  --color-sf-danger-dark: #58151c;
  --color-sf-success-light-alt: #d1e7dd;
  --color-sf-info-light-alt: #cff4fc;
  --color-sf-warning-light-alt: #fff3cd;
  --color-sf-danger-light-alt: #f8d7da;
  --color-sf-primary-shadow: 13, 110, 253;
  --color-sf-secondary-shadow: 108, 117, 125;
  --color-sf-success-shadow: 25, 135, 84;
  --color-sf-info-shadow: 13, 202, 240;
  --color-sf-warning-shadow: 255, 193, 7;
  --color-sf-danger-shadow: 220, 53, 69;
  --color-sf-primary-bg-color: var(--color-sf-primary);
  --color-sf-primary-border-color: var(--color-sf-primary);
  --color-sf-primary-text: var(--color-sf-primary-text-color);
  --color-sf-primary-bg-color-hover: #0b5ed7;
  --color-sf-primary-border-color-hover: #0a58ca;
  --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
  --color-sf-primary-bg-color-pressed: #0a58ca;
  --color-sf-primary-border-color-pressed: #0a58ca;
  --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
  --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
  --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
  --color-sf-primary-text-focus: var(--color-sf-primary-text-hover);
  --color-sf-primary-bg-color-disabled: rgba(13, 110, 253, .65);
  --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
  --color-sf-primary-text-disabled: rgba(255, 255, 255, .65);
  --color-sf-secondary-bg-color: var(--color-sf-secondary);
  --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
  --color-sf-secondary-text-color: #fff;
  --color-sf-secondary-bg-color-hover: #5c636a;
  --color-sf-secondary-border-color-hover: #565e64;
  --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
  --color-sf-secondary-bg-color-pressed: #565e64;
  --color-sf-secondary-border-color-pressed: #51585e;
  --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color);
  --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
  --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
  --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
  --color-sf-secondary-bg-color-disabled: rgba(108, 117, 125, .65);
  --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
  --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .65);
  --color-sf-success-bg-color: var(--color-sf-success);
  --color-sf-success-border-color: var(--color-sf-success-bg-color);
  --color-sf-success-text: #fff;
  --color-sf-success-bg-color-hover: #157347;
  --color-sf-success-border-color-hover: #146c43;
  --color-sf-success-text-hover: var(--color-sf-success-text);
  --color-sf-success-bg-color-pressed: #146c43;
  --color-sf-success-border-color-pressed: #13653f;
  --color-sf-success-text-pressed: var(--color-sf-success-text);
  --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
  --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
  --color-sf-success-text-focus: var(--color-sf-success-text);
  --color-sf-success-bg-color-disabled: rgba(25, 135, 84, .65);
  --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
  --color-sf-success-text-disabled: rgba(255, 255, 255, .65);
  --color-sf-warning-bg-color: var(--color-sf-warning);
  --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
  --color-sf-warning-text: #000;
  --color-sf-warning-bg-color-hover: #ffca2c;
  --color-sf-warning-border-color-hover: #ffc720;
  --color-sf-warning-text-hover: var(--color-sf-warning-text);
  --color-sf-warning-bg-color-pressed: #ffcd39;
  --color-sf-warning-border-color-pressed: #ffc720;
  --color-sf-warning-text-pressed: var(--color-sf-warning-text);
  --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color-hover);
  --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
  --color-sf-warning-text-focus: var(--color-sf-warning-text);
  --color-sf-warning-bg-color-disabled: rgba(255, 193, 7, .65);
  --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
  --color-sf-warning-text-disabled: rgba(0, 0, 0, .65);
  --color-sf-info-bg-color: var(--color-sf-info);
  --color-sf-info-border-color: var(--color-sf-info-bg-color);
  --color-sf-info-text: #000;
  --color-sf-info-bg-color-hover: #31d2f2;
  --color-sf-info-border-color-hover: #25cff2;
  --color-sf-info-text-hover: var(--color-sf-info-text);
  --color-sf-info-bg-color-pressed: #3dd5f3;
  --color-sf-info-border-color-pressed: #25cff2;
  --color-sf-info-text-pressed: var(--color-sf-info-text);
  --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color-hover);
  --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
  --color-sf-info-text-focus: var(--color-sf-info-text-hover);
  --color-sf-info-bg-color-disabled: rgba(13, 202, 240, .65);
  --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
  --color-sf-info-text-disabled: rgba(0, 0, 0, .65);
  --color-sf-danger-bg-color: var(--color-sf-danger);
  --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
  --color-sf-danger-text: #fff;
  --color-sf-danger-bg-color-hover: #bb2d3b;
  --color-sf-danger-border-color-hover: #b02a37;
  --color-sf-danger-text-hover: var(--color-sf-danger-text);
  --color-sf-danger-bg-color-pressed: #b02a37;
  --color-sf-danger-border-color-pressed: #a52834;
  --color-sf-danger-text-pressed: var(--color-sf-danger-text);
  --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color-hover);
  --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
  --color-sf-danger-text-focus: var(--color-sf-danger-text-hover);
  --color-sf-danger-bg-color-disabled: rgba(220, 53, 69, .65);
  --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
  --color-sf-danger-text-disabled: rgba(255, 255, 255, .65);
  --color-sf-primary-outline: var(--color-sf-primary-bg-color);
  --color-sf-secondary-outline: var(--color-sf-secondary-bg-color);
  --color-sf-warning-outline: var(--color-sf-warning-bg-color);
  --color-sf-danger-outline: var(--color-sf-danger-bg-color);
  --color-sf-success-outline: var(--color-sf-success-bg-color);
  --color-sf-info-outline: var(--color-sf-info-bg-color);
  --color-sf-tooltip-bg-color: rgba(0, 0, 0, .9);
  --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
  --color-sf-tooltip-text-color: #fff;
  --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt1);
  --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
  --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
  --color-sf-appbar-hover-bg-color-alt1: transparent;
  --color-sf-appbar-bg-color-alt2: #212529;
  --color-sf-appbar-color-alt2: #fff;
  --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
  --color-sf-appbar-hover-bg-color-alt2: transparent;
  --color-sf-diagram-palette-background: #fff;
  --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
  --color-sf-diagram-palette-selected-color: #e9ecef;
  --color-sf-rating-selected-color: var(--color-sf-primary);
  --color-sf-rating-unrated-color: #6c757d;
  --color-sf-rating-selected-disabled-color: #adb5bd;
  --color-sf-rating-unrated-disabled-color: #ced4da;
  --color-sf-rating-selected-hover-color: #63757d;
  --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
  --color-sf-rating-pressed-color: #599bfe;
  --color-sf-msg-color: #2b2f32;
  --color-sf-msg-bg-color: #e2e3e5;
  --color-sf-msg-border-color: #c4c8cb;
  --color-sf-msg-color-alt1: var(--color-sf-msg-color);
  --color-sf-msg-bg-color-alt1: transparent;
  --color-sf-msg-border-color-alt1: var(--color-sf-msg-border-color);
  --color-sf-msg-color-alt2: #fff;
  --color-sf-msg-bg-color-alt2: #6c757d;
  --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
  --color-sf-msg-icon-color: var(--color-sf-msg-color);
  --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color);
  --color-sf-msg-icon-color-alt2: #fff;
  --color-sf-msg-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-close-icon-color-alt2: #fff;
  --color-sf-msg-danger-color: #58151c;
  --color-sf-msg-danger-bg-color: #f8d7da;
  --color-sf-msg-danger-border-color: #f1aeb5;
  --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
  --color-sf-msg-danger-bg-color-alt1: transparent;
  --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
  --color-sf-msg-danger-color-alt2: #fff;
  --color-sf-msg-danger-bg-color-alt2: #dc3545;
  --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
  --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
  --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
  --color-sf-msg-danger-icon-color-alt2: #fff;
  --color-sf-msg-danger-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-danger-close-icon-color-alt2: #fff;
  --color-sf-msg-success-color: #0a3622;
  --color-sf-msg-success-bg-color: #d1e7dd;
  --color-sf-msg-success-border-color: #a3cfbb;
  --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
  --color-sf-msg-success-bg-color-alt1: transparent;
  --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
  --color-sf-msg-success-color-alt2: #fff;
  --color-sf-msg-success-bg-color-alt2: #198754;
  --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
  --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
  --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
  --color-sf-msg-success-icon-color-alt2: #fff;
  --color-sf-msg-success-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-success-close-icon-color-alt2: #fff;
  --color-sf-msg-warning-color: #664d03;
  --color-sf-msg-warning-bg-color: #fff3cd;
  --color-sf-msg-warning-border-color: #ffe69c;
  --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
  --color-sf-msg-warning-bg-color-alt1: transparent;
  --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
  --color-sf-msg-warning-color-alt2: #212529;
  --color-sf-msg-warning-bg-color-alt2: #ffc107;
  --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
  --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
  --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
  --color-sf-msg-warning-icon-color-alt2: #212529;
  --color-sf-msg-warning-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-warning-close-icon-color-alt2: #212529;
  --color-sf-msg-info-color: #055160;
  --color-sf-msg-info-bg-color: #cff4fc;
  --color-sf-msg-info-border-color: #9eeaf9;
  --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
  --color-sf-msg-info-bg-color-alt1: transparent;
  --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
  --color-sf-msg-info-color-alt2: #212529;
  --color-sf-msg-info-bg-color-alt2: #0dcaf0;
  --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
  --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
  --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
  --color-sf-msg-info-icon-color-alt2: #212529;
  --color-sf-msg-info-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-info-close-icon-color-alt2: #212529;
  --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: #e9ecef;
  --color-sf-stepper: #fff;
  --color-sf-shadow-color: #000;
  --color-sf-shadow-color1: #fff;
}

.e-dark-mode {
  --color-sf-content-bg-color: #212529;
  --color-sf-content-bg-color-alt1: #2b3035;
  --color-sf-content-bg-color-alt2: #343a40;
  --color-sf-content-bg-color-alt3: #495057;
  --color-sf-content-bg-color-alt4: #1a1d20;
  --color-sf-content-bg-color-alt5: #adb5bd;
  --color-sf-content-bg-color-hover: #2b3035;
  --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
  --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
  --color-sf-content-bg-color-selected: #0d6efd;
  --color-sf-content-bg-color-dragged: #343a40;
  --color-sf-content-bg-color-disabled: var(--color-sf-content-bg-color-alt2);
  --color-sf-flyout-bg-color: #212529;
  --color-sf-flyout-bg-color-hover: #2b3035;
  --color-sf-flyout-bg-color-pressed: #0d6efd;
  --color-sf-flyout-bg-color-focus: #2b3035;
  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
  --color-sf-table-bg-color-hover: rgba(255, 255, 255, .07);
  --color-sf-table-bg-color-pressed: var(--color-sf-content-bg-color-alt3);
  --color-sf-table-bg-color-selected: rgba(255, 255, 255, .1);
  --color-sf-content-text-color: #dee2e6;
  --color-sf-content-text-color-alt1: rgba(222, 226, 230, .75);
  --color-sf-content-text-color-alt2: rgba(222, 226, 230, .5);
  --color-sf-content-text-color-alt3: rgba(222, 226, 230, .25);
  --color-sf-content-text-color-hover: #fff;
  --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
  --color-sf-content-text-color-focus: #fff;
  --color-sf-content-text-color-selected: var(--color-sf-primary-text-color);
  --color-sf-content-text-color-dragged: #fff;
  --color-sf-content-text-color-disabled: rgba(222, 226, 230, .75);
  --color-sf-placeholder-text-color: #6c757d;
  --color-sf-flyout-text-color: var(--color-sf-content-text-color);
  --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
  --color-sf-flyout-text-color-pressed: var(--color-sf-primary-text-color);
  --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
  --color-sf-flyout-text-color-disabled: rgba(222, 226, 230, .5);
  --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
  --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
  --color-sf-icon-color: #adb5bd;
  --color-sf-icon-color-hover: #dee2e6;
  --color-sf-icon-color-pressed: #f8f9fa;
  --color-sf-icon-color-disabled: #adb5bd;
  --color-sf-close-icon-color: rgba(255, 255, 255, .5);
  --color-sf-close-icon-color-hover: rgba(255, 255, 255, .75);
  --color-sf-close-icon-color-pressed: rgba(255, 255, 255, 1);
  --color-sf-close-icon-color-disabled: rgba(255, 255, 255, .25);
  --color-sf-border-light: #495057;
  --color-sf-border: #495057;
  --color-sf-border-dark: #6c757d;
  --color-sf-border-hover: #495057;
  --color-sf-border-pressed: #495057;
  --color-sf-border-focus: #86d7fe;
  --color-sf-border-selected: #86d7fe;
  --color-sf-border-dragged: #495057;
  --color-sf-border-disabled: #495057;
  --color-sf-border-warning: #ffda6a;
  --color-sf-border-error: #ea868f;
  --color-sf-border-success: #75b798;
  --color-sf-spreadsheet-gridline: #dee2e6;
  --color-sf-flyout-border: rgba(255, 255, 255, .15);
  --color-sf-primary: rgba(13, 110, 253, 1);
  --color-sf-primary-text-color: #fff;
  --color-sf-primary-light: #86b7fe;
  --color-sf-primary-lighter: #031633;
  --color-sf-primary-dark: #073ba6;
  --color-sf-primary-darker: #6ea8fe;
  --color-sf-secondary: rgba(108, 117, 125, 1);
  --color-sf-success: rgba(25, 135, 84, 1);
  --color-sf-info: rgba(13, 202, 240, 1);
  --color-sf-warning: rgba(255, 193, 7, 1);
  --color-sf-danger: rgba(220, 53, 69, 1);
  --color-sf-success-light: #75b798;
  --color-sf-info-light: #6edff6;
  --color-sf-warning-light: #ffda6a;
  --color-sf-danger-light: #ea868f;
  --color-sf-success-dark: #75b798;
  --color-sf-info-dark: #6edff6;
  --color-sf-warning-dark: #ffda6a;
  --color-sf-danger-dark: #ea868f;
  --color-sf-success-light-alt: #051b11;
  --color-sf-info-light-alt: #032830;
  --color-sf-warning-light-alt: #332701;
  --color-sf-danger-light-alt: #2c0b0e;
  --color-sf-primary-shadow: 13, 110, 253;
  --color-sf-secondary-shadow: 108, 117, 125;
  --color-sf-success-shadow: 25, 135, 84;
  --color-sf-info-shadow: 13, 202, 240;
  --color-sf-warning-shadow: 255, 193, 7;
  --color-sf-danger-shadow: 220, 53, 69;
  --color-sf-black: 0, 0, 0;
  --color-sf-white: 255, 255, 255;
  --color-sf-primary-bg-color: var(--color-sf-primary);
  --color-sf-primary-border-color: var(--color-sf-primary);
  --color-sf-primary-text: var(--color-sf-primary-text-color);
  --color-sf-primary-bg-color-hover: #0b5ed7;
  --color-sf-primary-border-color-hover: #0a58ca;
  --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
  --color-sf-primary-bg-color-pressed: #0a58ca;
  --color-sf-primary-border-color-pressed: #0a58ca;
  --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
  --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
  --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
  --color-sf-primary-text-focus: var(--color-sf-primary-text-hover);
  --color-sf-primary-bg-color-disabled: rgba(13, 110, 253, .65);
  --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
  --color-sf-primary-text-disabled: rgba(255, 255, 255, .65);
  --color-sf-secondary-bg-color: var(--color-sf-secondary);
  --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
  --color-sf-secondary-text-color: #fff;
  --color-sf-secondary-bg-color-hover: #5c636a;
  --color-sf-secondary-border-color-hover: #565e64;
  --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
  --color-sf-secondary-bg-color-pressed: #565e64;
  --color-sf-secondary-border-color-pressed: #51585e;
  --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color);
  --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
  --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
  --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
  --color-sf-secondary-bg-color-disabled: rgba(108, 117, 125, .65);
  --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
  --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .65);
  --color-sf-success-bg-color: var(--color-sf-success);
  --color-sf-success-border-color: var(--color-sf-success-bg-color);
  --color-sf-success-text: #fff;
  --color-sf-success-bg-color-hover: #157347;
  --color-sf-success-border-color-hover: #146c43;
  --color-sf-success-text-hover: var(--color-sf-success-text);
  --color-sf-success-bg-color-pressed: #146c43;
  --color-sf-success-border-color-pressed: #15803d;
  --color-sf-success-text-pressed: var(--color-sf-success-text);
  --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
  --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
  --color-sf-success-text-focus: var(--color-sf-success-text);
  --color-sf-success-bg-color-disabled: rgba(25, 135, 84, .65);
  --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
  --color-sf-success-text-disabled: rgba(255, 255, 255, .65);
  --color-sf-warning-bg-color: var(--color-sf-warning);
  --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
  --color-sf-warning-text: #000;
  --color-sf-warning-bg-color-hover: #ffca2c;
  --color-sf-warning-border-color-hover: #ffc720;
  --color-sf-warning-text-hover: var(--color-sf-warning-text);
  --color-sf-warning-bg-color-pressed: #ffcd39;
  --color-sf-warning-border-color-pressed: #ffc720;
  --color-sf-warning-text-pressed: var(--color-sf-warning-text);
  --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color-hover);
  --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
  --color-sf-warning-text-focus: var(--color-sf-warning-text);
  --color-sf-warning-bg-color-disabled: rgba(255, 193, 7, .65);
  --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
  --color-sf-warning-text-disabled: rgba(0, 0, 0, .65);
  --color-sf-info-bg-color: var(--color-sf-info);
  --color-sf-info-border-color: var(--color-sf-info-bg-color);
  --color-sf-info-text: #000;
  --color-sf-info-bg-color-hover: #31d2f2;
  --color-sf-info-border-color-hover: #25cff2;
  --color-sf-info-text-hover: var(--color-sf-info-text);
  --color-sf-info-bg-color-pressed: #3dd5f3;
  --color-sf-info-border-color-pressed: #25cff2;
  --color-sf-info-text-pressed: var(--color-sf-info-text);
  --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color-hover);
  --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
  --color-sf-info-text-focus: var(--color-sf-info-text-hover);
  --color-sf-info-bg-color-disabled: rgba(13, 202, 240, .65);
  --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
  --color-sf-info-text-disabled: rgba(0, 0, 0, .65);
  --color-sf-danger-bg-color: var(--color-sf-danger);
  --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
  --color-sf-danger-text: #fff;
  --color-sf-danger-bg-color-hover: #bb2d3b;
  --color-sf-danger-border-color-hover: #b02a37;
  --color-sf-danger-text-hover: var(--color-sf-danger-text);
  --color-sf-danger-bg-color-pressed: #b02a37;
  --color-sf-danger-border-color-pressed: #a52834;
  --color-sf-danger-text-pressed: var(--color-sf-danger-text);
  --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color-hover);
  --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
  --color-sf-danger-text-focus: var(--color-sf-danger-text-hover);
  --color-sf-danger-bg-color-disabled: rgba(220, 53, 69, .65);
  --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
  --color-sf-danger-text-disabled: rgba(255, 255, 255, .65);
  --color-sf-primary-outline: var(--color-sf-primary-bg-color);
  --color-sf-secondary-outline: var(--color-sf-secondary-bg-color);
  --color-sf-warning-outline: var(--color-sf-warning-bg-color);
  --color-sf-danger-outline: var(--color-sf-danger-bg-color);
  --color-sf-success-outline: var(--color-sf-success-bg-color);
  --color-sf-info-outline: var(--color-sf-info-bg-color);
  --color-sf-tooltip-bg-color: rgba(255, 255, 255, .9);
  --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
  --color-sf-tooltip-text-color: #212529;
  --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt1);
  --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
  --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
  --color-sf-appbar-hover-bg-color-alt1: transparent;
  --color-sf-appbar-bg-color-alt2: #dee2e6;
  --color-sf-appbar-color-alt2: #212529;
  --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
  --color-sf-appbar-hover-bg-color-alt2: transparent;
  --color-sf-diagram-palette-background: #dee2e6;
  --color-sf-diagram-palette-hover-background: #ced4da;
  --color-sf-rating-selected-color: var(--color-sf-primary);
  --color-sf-rating-unrated-color: #adb5bd;
  --color-sf-rating-selected-disabled-color: #6c757d;
  --color-sf-rating-unrated-disabled-color: #495057;
  --color-sf-rating-selected-hover-color: #adb5bd;
  --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
  --color-sf-rating-pressed-color: #599bfe;
  --color-sf-msg-color: #a7acb1;
  --color-sf-msg-bg-color: #161719;
  --color-sf-msg-border-color: #41464b;
  --color-sf-msg-color-alt1: var(--color-sf-msg-color);
  --color-sf-msg-bg-color-alt1: transparent;
  --color-sf-msg-border-color-alt1: var(--color-sf-msg-border-color);
  --color-sf-msg-color-alt2: #fff;
  --color-sf-msg-bg-color-alt2: #6c757d;
  --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
  --color-sf-msg-icon-color: var(--color-sf-msg-color);
  --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color);
  --color-sf-msg-icon-color-alt2: #fff;
  --color-sf-msg-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-close-icon-color-alt2: #fff;
  --color-sf-msg-danger-color: #ea868f;
  --color-sf-msg-danger-bg-color: #2c0b0e;
  --color-sf-msg-danger-border-color: #842029;
  --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
  --color-sf-msg-danger-bg-color-alt1: transparent;
  --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
  --color-sf-msg-danger-color-alt2: #fff;
  --color-sf-msg-danger-bg-color-alt2: #dc3545;
  --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
  --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
  --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
  --color-sf-msg-danger-icon-color-alt2: #fff;
  --color-sf-msg-danger-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-danger-close-icon-color-alt2: #fff;
  --color-sf-msg-success-color: #75b798;
  --color-sf-msg-success-bg-color: #051b11;
  --color-sf-msg-success-border-color: #0f5132;
  --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
  --color-sf-msg-success-bg-color-alt1: transparent;
  --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
  --color-sf-msg-success-color-alt2: #fff;
  --color-sf-msg-success-bg-color-alt2: #198754;
  --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
  --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
  --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
  --color-sf-msg-success-icon-color-alt2: #fff;
  --color-sf-msg-success-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-success-close-icon-color-alt2: #fff;
  --color-sf-msg-warning-color: #ffda6a;
  --color-sf-msg-warning-bg-color: #332701;
  --color-sf-msg-warning-border-color: #997404;
  --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
  --color-sf-msg-warning-bg-color-alt1: transparent;
  --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
  --color-sf-msg-warning-color-alt2: #212529;
  --color-sf-msg-warning-bg-color-alt2: #ffc107;
  --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
  --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
  --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
  --color-sf-msg-warning-icon-color-alt2: #212529;
  --color-sf-msg-warning-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-warning-close-icon-color-alt2: #212529;
  --color-sf-msg-info-color: #6edff6;
  --color-sf-msg-info-bg-color: #032830;
  --color-sf-msg-info-border-color: #087990;
  --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
  --color-sf-msg-info-bg-color-alt1: transparent;
  --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
  --color-sf-msg-info-color-alt2: #212529;
  --color-sf-msg-info-bg-color-alt2: #0dcaf0;
  --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
  --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
  --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
  --color-sf-msg-info-icon-color-alt2: #212529;
  --color-sf-msg-info-close-icon-color: var(--color-sf-close-icon-color);
  --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-close-icon-color);
  --color-sf-msg-info-close-icon-color-alt2: #212529;
  --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: #212529;
  --color-sf-shadow-color: #fff;
  --color-sf-shadow-color1: #000;
}

.e-control,
.e-css,
.e-error {
  font-family: 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: rgba(var(--color-sf-overlay-bg-color), 0.5);
  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: #ffc107;
}

.e-success {
  color: #198754;
}

.e-information {
  color: #0dcaf0;
}

.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";
  font-style: normal;
  font-weight: normal;
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tTEcAAAEoAAAAVmNtYXBESky4AAAK3AAABOBnbHlmGXJ/QQAAGRwABAhYaGVhZCytTkwAAADQAAAANmhoZWEIVQZYAAAArAAAACRobXR4XAAAAAAAAYAAAAlcbG9jYQSpHjwAAA+8AAAJYG1heHADmAMQAAABCAAAACBuYW1lc0cOBgAEIXQAAAIlcG9zdLxiQHUABCOcAAAjTgABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAACVwABAAAAAQAA3V4vrl8PPPUACwQAAAAAAOTLhKsAAAAA5MuEqwAAAAAD+AP4AAAACAACAAEAAAAAAAEAAAJXAwQANwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDpVQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAA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AAJEvAACRUgAAkXIAAJGcAACRwwAAkeYAAJIPAACSRQAAknQAAJKdAACSvQAAktoAAJMDAACTIwAAk0MAAJNuAACTjwAAk6UAAJO9AACUfgAAlPEAAJUJAACVFgAAlTEAAJVGAACVYgAAlXcAAJWKAACVnQAAla0AAJXBAACWKgAAlkIAAJc1AACXvgAAmHMAAJjGAACY6gAAmSwAAJmjAACZxwAAmesAAJoTAACbuAAAm+0AAJzeAACdmAAAnlgAAJ8XAACf2gAAoGwAAKCUAACg3wAAoSoAAKGZAACh0gAAokgAAKK+AACjYQAAo/wAAKSYAAClNAAApaQAAKY1AACmhQAApyEAAKdKAACoOAAAqTUAAKnPAACqewAAqpUAAKs3AACrwgAArLoAAK1mAACuCAAArswAAK9dAACv8gAAsPEAALHyAACyGwAAs50AALPHAACz0gAAs90AALPoAACz8wAAs/4AALQJAAC1DAAAtS0AALYWAAC3EwAAt+QAALiUAAC5WAAAumEAALtqAAC7/QAAvQsAAL59AAC+7AAAv1kAAL+lAADADgAAwJ4AAMDHAADA8AAAwR0AAMHHAADCGQAAwocAAML1AADD5wAAxIkAAMW/AADGZQAAx48AAMgeAADImwAAyVoAAMn5AADKawAAytcAAMsJAADLGwAAy0EAAMtMAADLegAAy4UAAMuaAADLqgAAy9EAAMy0AADMvwAAzMoAAMzVAADM4AAAzOsAAM2kAADNrwAAzbgAAM3BAADODQAAzrAAAM69AADOyQAAztQAAM7eAADO5wAAzzMAAM/uAADP/AAA0AsAANBcAADQwgAA0TkAANGpAADSHgAA0qAAANMhAADTpQAA1AIAANRgA