/* ==========================================================================
   FitSystem — Design Tokens & Bootstrap Bridge
   --------------------------------------------------------------------------
   The single source of colour truth for the web app. Ported directly from the
   Flutter app's design system so the two stay visually identical:

       mobile/fitsystem_app/lib/core/theme/app_colors.dart
       mobile/fitsystem_app/lib/core/theme/app_theme.dart

   Load order matters — this file must come after bootstrap.min.css and before
   fitsystem-components.css:

       bootstrap.min.css        vanilla BS 5.3.2, un-themed
       fitsystem.css            <- tokens, aliases, BS variable bridge, base
       fitsystem-components.css component styling
       fitsystem-workouts.css   workout-specific components

   Design principles (inherited from the mobile app):
     * Dark-first. Warm grey surfaces, never pure black.
     * Exactly one accent — the brand green. No blues, no purples.
     * Hairline 1px borders instead of shadows. elevation: 0 everywhere.
     * No gradients, with one deliberate exception (.fs-gradient-header).
   ========================================================================== */


/* ==========================================================================
   1. Brand, macro & semantic colours — identical in both themes
   ========================================================================== */
:root {
    /* Brand green — AppColors.green / greenBright / greenHover */
    --fs-green: #4F7942;
    --fs-green-bright: #7FB56B;
    --fs-green-light: #6B9E5A;
    --fs-green-hover: #3D5E33;

    /* Macros — AppColors.protein / carbs / fat */
    --fs-protein: #5B9BD5;
    --fs-carbs: #E8A838;
    --fs-fat: #D96060;

    /* Semantic — AppColors.success / danger / warning / info */
    --fs-success: #16A34A;
    --fs-danger: #DC2626;
    --fs-warning: #F59E0B;
    --fs-info: #0EA5E9;

    /* Analytics accent — the one non-green hue, kept muted and deliberate.
       Charts/labels only (.text-analytics); the analytics *buttons* deliberately
       use the neutral secondary treatment so no button reads blue. */
    --fs-analytics: #4A7FA5;
    --fs-analytics-hover: #3D6D91;

    /* Geometry — AppTheme._radiusCard / _radiusInput / _radiusButton */
    --fs-radius-card: 16px;
    --fs-radius-input: 12px;
    --fs-radius-btn: 10px;
    --fs-radius-sm: 8px;
    --fs-radius-pill: 999px;

    /* The centred app column. Matches the mobile viewport. */
    --fs-shell: 600px;
    --fs-shell-wide: 1240px;

    /* Motion */
    --fs-transition: 0.15s ease;

    /* No shadows anywhere — the mobile app uses elevation: 0 with a hairline
       border instead. Resolving these to `none` silences every legacy
       `box-shadow: var(--shadow-md)` call site without touching the markup. */
    --fs-shadow: none;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --fe-shadow: none;
    --fe-shadow-md: none;
}


/* ==========================================================================
   2. Surface palettes
   --------------------------------------------------------------------------
   Dark  = AppColorsDark  (app_colors.dart:46-61)
   Light = AppColorsLight (app_colors.dart:64-79)
   ========================================================================== */
html[data-theme="dark"] {
    --fs-bg: #1C1C1C;
    --fs-surface: #262626;
    --fs-elevated: #2E2E2E;
    --fs-recessed: #202020;
    --fs-border: #383838;
    --fs-border-soft: #2C2C2C;
    --fs-input-border: #404040;

    --fs-text: #E7E7E4;
    --fs-text-secondary: #A8A8A4;
    --fs-text-muted: #7C7C78;

    --fs-accent: var(--fs-green-bright);
    --fs-accent-hover: #93C47F;
    --fs-on-accent: #10240A;

    /* Accent tints — the alpha steps the Flutter theme uses for containers,
       selected states and indicators (0.10 / 0.16 / 0.18). */
    --fs-accent-subtle: rgba(127, 181, 107, 0.10);
    --fs-accent-tint: rgba(127, 181, 107, 0.16);
    --fs-accent-strong: rgba(127, 181, 107, 0.24);

    --fs-danger-tint: rgba(220, 38, 38, 0.16);
    --fs-warning-tint: rgba(245, 158, 11, 0.16);
    --fs-success-tint: rgba(22, 163, 74, 0.16);
    --fs-info-tint: rgba(14, 165, 233, 0.16);

    /* Neutral overlay for hover/pressed states on dark surfaces */
    --fs-hover-overlay: rgba(255, 255, 255, 0.05);
    --fs-active-overlay: rgba(255, 255, 255, 0.09);

    color-scheme: dark;
}

html[data-theme="light"] {
    --fs-bg: #FAFAFA;
    --fs-surface: #FFFFFF;
    --fs-elevated: #FFFFFF;
    --fs-recessed: #F5F5F5;
    --fs-border: #E5E5E5;
    --fs-border-soft: #F0F0F0;
    --fs-input-border: #D4D4D4;

    --fs-text: #171717;
    --fs-text-secondary: #737373;
    --fs-text-muted: #A3A3A3;

    --fs-accent: var(--fs-green);
    --fs-accent-hover: var(--fs-green-hover);
    --fs-on-accent: #FFFFFF;

    --fs-accent-subtle: rgba(79, 121, 66, 0.07);
    --fs-accent-tint: rgba(79, 121, 66, 0.12);
    --fs-accent-strong: rgba(79, 121, 66, 0.20);

    --fs-danger-tint: rgba(220, 38, 38, 0.10);
    --fs-warning-tint: rgba(245, 158, 11, 0.14);
    --fs-success-tint: rgba(22, 163, 74, 0.10);
    --fs-info-tint: rgba(14, 165, 233, 0.10);

    --fs-hover-overlay: rgba(0, 0, 0, 0.03);
    --fs-active-overlay: rgba(0, 0, 0, 0.06);

    color-scheme: light;
}


/* ==========================================================================
   3. Compatibility aliases
   --------------------------------------------------------------------------
   ~200 inline `style="color:var(--fe-primary)"` declarations live directly in
   the .cshtml pages, plus --primary-color across Coaching and --gray-* in the
   older markup. Aliasing the legacy namespaces onto --fs-* retires three
   competing token systems without editing 50 page files.

   New markup should use --fs-* only. These aliases exist to be deleted once
   the last inline style is gone.
   ========================================================================== */
:root {
    /* --- workouts.css namespace (--fe-*) --- */
    --fe-primary: var(--fs-accent);
    --fe-primary-hover: var(--fs-accent-hover);
    --fe-primary-light: var(--fs-accent-tint);
    --fe-danger: var(--fs-danger);
    --fe-danger-hover: var(--fs-danger);
    --fe-analytics: var(--fs-analytics);
    --fe-analytics-hover: var(--fs-analytics-hover);
    --fe-analytics-light: rgba(74, 127, 165, 0.14);
    --fe-bg: var(--fs-bg);
    --fe-surface: var(--fs-surface);
    --fe-border: var(--fs-border);
    --fe-text: var(--fs-text);
    --fe-text-muted: var(--fs-text-secondary);
    --fe-text-light: var(--fs-text-muted);
    --fe-radius: var(--fs-radius-btn);
    --fe-radius-lg: var(--fs-radius-card);
    /* --fe-dark drove the near-black card headers, table heads and modal
       headers. Those slabs are gone — it now resolves to the ordinary
       surface so any straggler renders as a normal panel. */
    --fe-dark: var(--fs-surface);
    --fe-dark-hover: var(--fs-elevated);

    /* --- site.css namespace --- */
    --primary-color: var(--fs-accent);
    --primary-hover: var(--fs-accent-hover);
    --primary-light: var(--fs-accent);
    --primary-extra-light: var(--fs-accent-subtle);
    --primary-hover-light: var(--fs-accent-tint);
    --primary-glow: var(--fs-accent-tint);
    --secondary-color: var(--fs-text-secondary);
    --secondary-hover: var(--fs-text);
    --success-color: var(--fs-success);
    --danger-color: var(--fs-danger);
    --warning-color: var(--fs-warning);
    --info-color: var(--fs-info);
    --bg-color: var(--fs-bg);
    --card-bg: var(--fs-surface);
    --text-primary: var(--fs-text);
    --text-secondary: var(--fs-text-secondary);
    --text-muted: var(--fs-text-muted);
    --border-color: var(--fs-border);
    --border-light: var(--fs-border-soft);
    --slider-bg: var(--fs-border);
    --slider-thumb: var(--fs-accent);
    --white: var(--fs-surface);
    --black: var(--fs-text);
    --navbar-bg-color: var(--fs-bg);
    --navbar-text-color: var(--fs-text);
    --navbar-hover-color: var(--fs-text-secondary);
    --navbar-active-color: var(--fs-accent);
    --transition-fast: var(--fs-transition);
    --transition-speed: var(--fs-transition);
    --transition-slow: 0.3s ease;
    --radius-sm: var(--fs-radius-sm);
    --radius-md: var(--fs-radius-btn);
    --radius-lg: var(--fs-radius-input);
    --radius-xl: var(--fs-radius-card);
    --radius-full: var(--fs-radius-pill);

    /* The monochrome ramp, re-pointed so it tracks the active theme rather
       than always meaning "light grey". */
    --gray-50: var(--fs-recessed);
    --gray-100: var(--fs-recessed);
    --gray-200: var(--fs-border);
    --gray-300: var(--fs-input-border);
    --gray-400: var(--fs-text-muted);
    --gray-500: var(--fs-text-secondary);
    --gray-600: var(--fs-text-secondary);
    --gray-700: var(--fs-text-secondary);
    --gray-800: var(--fs-text);
    --gray-900: var(--fs-text);
}


/* ==========================================================================
   4. Bootstrap 5.3 bridge
   --------------------------------------------------------------------------
   BS 5.3 is entirely CSS-variable driven, so retheming is variable assignment
   rather than selector warfare. Setting these on :root cascades into every
   Bootstrap component at once.
   ========================================================================== */
:root,
[data-bs-theme] {
    /* Core */
    --bs-body-bg: var(--fs-bg);
    --bs-body-bg-rgb: var(--fs-bg-rgb);
    --bs-body-color: var(--fs-text);
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.55;
    --bs-emphasis-color: var(--fs-text);
    --bs-secondary-color: var(--fs-text-secondary);
    --bs-tertiary-color: var(--fs-text-muted);
    --bs-secondary-bg: var(--fs-surface);
    --bs-tertiary-bg: var(--fs-recessed);
    --bs-border-color: var(--fs-border);
    --bs-border-color-translucent: var(--fs-border);
    --bs-heading-color: var(--fs-text);

    /* Theme colours. `secondary` becomes a neutral, not slate blue. */
    --bs-primary: var(--fs-accent);
    --bs-secondary: var(--fs-text-secondary);
    --bs-success: var(--fs-success);
    --bs-info: var(--fs-info);
    --bs-warning: var(--fs-warning);
    --bs-danger: var(--fs-danger);
    --bs-light: var(--fs-recessed);
    --bs-dark: var(--fs-text);

    /* Links — green, not #0d6efd */
    --bs-link-color: var(--fs-accent);
    --bs-link-hover-color: var(--fs-accent-hover);
    --bs-link-color-rgb: var(--fs-accent-rgb);
    --bs-link-hover-color-rgb: var(--fs-accent-rgb);

    /* Focus ring — green, not blue */
    --bs-focus-ring-color: var(--fs-accent-tint);
    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: 1;

    /* Radii */
    --bs-border-radius: var(--fs-radius-btn);
    --bs-border-radius-sm: var(--fs-radius-sm);
    --bs-border-radius-lg: var(--fs-radius-input);
    --bs-border-radius-xl: var(--fs-radius-card);
    --bs-border-radius-2xl: var(--fs-radius-card);
    --bs-border-radius-pill: var(--fs-radius-pill);

    /* Card */
    --bs-card-bg: var(--fs-surface);
    --bs-card-color: var(--fs-text);
    --bs-card-border-color: var(--fs-border);
    --bs-card-border-radius: var(--fs-radius-card);
    --bs-card-inner-border-radius: var(--fs-radius-card);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--fs-text-secondary);
    --bs-card-box-shadow: none;

    /* List group */
    --bs-list-group-bg: var(--fs-surface);
    --bs-list-group-color: var(--fs-text);
    --bs-list-group-border-color: var(--fs-border);
    --bs-list-group-border-radius: var(--fs-radius-card);
    --bs-list-group-action-color: var(--fs-text);
    --bs-list-group-action-hover-bg: var(--fs-hover-overlay);
    --bs-list-group-action-hover-color: var(--fs-text);
    --bs-list-group-action-active-bg: var(--fs-active-overlay);
    --bs-list-group-action-active-color: var(--fs-text);
    --bs-list-group-active-bg: var(--fs-accent-tint);
    --bs-list-group-active-color: var(--fs-accent);
    --bs-list-group-active-border-color: var(--fs-border);

    /* Dropdown */
    --bs-dropdown-bg: var(--fs-surface);
    --bs-dropdown-color: var(--fs-text);
    --bs-dropdown-border-color: var(--fs-border);
    --bs-dropdown-border-radius: var(--fs-radius-input);
    --bs-dropdown-link-color: var(--fs-text);
    --bs-dropdown-link-hover-bg: var(--fs-hover-overlay);
    --bs-dropdown-link-hover-color: var(--fs-text);
    --bs-dropdown-link-active-bg: var(--fs-accent-tint);
    --bs-dropdown-link-active-color: var(--fs-accent);
    --bs-dropdown-header-color: var(--fs-text-muted);
    --bs-dropdown-divider-bg: var(--fs-border);
    --bs-dropdown-box-shadow: none;

    /* Modal / offcanvas */
    --bs-modal-bg: var(--fs-surface);
    --bs-modal-color: var(--fs-text);
    --bs-modal-border-color: var(--fs-border);
    --bs-modal-border-radius: var(--fs-radius-card);
    --bs-modal-header-border-color: var(--fs-border);
    --bs-modal-footer-border-color: var(--fs-border);
    --bs-modal-box-shadow: none;
    --bs-offcanvas-bg: var(--fs-surface);
    --bs-offcanvas-color: var(--fs-text);
    --bs-offcanvas-border-color: var(--fs-border);

    /* Accordion */
    --bs-accordion-bg: var(--fs-surface);
    --bs-accordion-color: var(--fs-text);
    --bs-accordion-border-color: var(--fs-border);
    --bs-accordion-border-radius: var(--fs-radius-card);
    --bs-accordion-inner-border-radius: var(--fs-radius-card);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-color: var(--fs-text);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: var(--fs-accent-subtle);
    --bs-accordion-active-color: var(--fs-text);

    /* Nav / tabs / pills */
    --bs-nav-link-color: var(--fs-text-secondary);
    --bs-nav-link-hover-color: var(--fs-text);
    --bs-nav-link-disabled-color: var(--fs-text-muted);
    --bs-nav-tabs-border-color: var(--fs-border);
    --bs-nav-tabs-link-active-bg: var(--fs-surface);
    --bs-nav-tabs-link-active-color: var(--fs-accent);
    --bs-nav-tabs-link-active-border-color: var(--fs-border);
    --bs-nav-pills-link-active-bg: var(--fs-accent-tint);
    --bs-nav-pills-link-active-color: var(--fs-accent);
    --bs-nav-pills-border-radius: var(--fs-radius-pill);

    /* Table */
    --bs-table-bg: transparent;
    --bs-table-color: var(--fs-text);
    --bs-table-border-color: var(--fs-border);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--fs-text);
    --bs-table-hover-bg: var(--fs-hover-overlay);
    --bs-table-hover-color: var(--fs-text);

    /* Pagination */
    --bs-pagination-bg: var(--fs-surface);
    --bs-pagination-color: var(--fs-text-secondary);
    --bs-pagination-border-color: var(--fs-border);
    --bs-pagination-hover-bg: var(--fs-hover-overlay);
    --bs-pagination-hover-color: var(--fs-text);
    --bs-pagination-hover-border-color: var(--fs-border);
    --bs-pagination-active-bg: var(--fs-accent);
    --bs-pagination-active-color: var(--fs-on-accent);
    --bs-pagination-active-border-color: var(--fs-accent);
    --bs-pagination-focus-bg: var(--fs-hover-overlay);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-disabled-bg: var(--fs-surface);
    --bs-pagination-disabled-color: var(--fs-text-muted);
    --bs-pagination-disabled-border-color: var(--fs-border);

    /* Progress */
    --bs-progress-bg: var(--fs-border);
    --bs-progress-bar-bg: var(--fs-accent);
    --bs-progress-border-radius: var(--fs-radius-pill);
    --bs-progress-box-shadow: none;

    /* Popover / tooltip */
    --bs-popover-bg: var(--fs-elevated);
    --bs-popover-border-color: var(--fs-border);
    --bs-popover-header-bg: var(--fs-elevated);
    --bs-popover-header-color: var(--fs-text);
    --bs-popover-body-color: var(--fs-text-secondary);
    --bs-tooltip-bg: var(--fs-elevated);
    --bs-tooltip-color: var(--fs-text);
    --bs-tooltip-opacity: 1;
}

/* RGB channel values Bootstrap needs for its rgba() utilities. These can't be
   derived from the var()s above, so they're mirrored per theme. */
html[data-theme="dark"] {
    --fs-bg-rgb: 28, 28, 28;
    --fs-surface-rgb: 38, 38, 38;
    --fs-accent-rgb: 127, 181, 107;
    --fs-text-rgb: 231, 231, 228;

    --bs-primary-rgb: 127, 181, 107;
    --bs-secondary-rgb: 168, 168, 164;
    --bs-body-bg-rgb: 28, 28, 28;
    --bs-body-color-rgb: 231, 231, 228;
    --bs-emphasis-color-rgb: 231, 231, 228;
    --bs-light-rgb: 32, 32, 32;
    --bs-dark-rgb: 231, 231, 228;
    --bs-black-rgb: 28, 28, 28;
    --bs-white-rgb: 38, 38, 38;
}

html[data-theme="light"] {
    --fs-bg-rgb: 250, 250, 250;
    --fs-surface-rgb: 255, 255, 255;
    --fs-accent-rgb: 79, 121, 66;
    --fs-text-rgb: 23, 23, 23;

    --bs-primary-rgb: 79, 121, 66;
    --bs-secondary-rgb: 115, 115, 115;
    --bs-body-bg-rgb: 250, 250, 250;
    --bs-body-color-rgb: 23, 23, 23;
    --bs-emphasis-color-rgb: 23, 23, 23;
    --bs-light-rgb: 245, 245, 245;
    --bs-dark-rgb: 23, 23, 23;
    --bs-black-rgb: 23, 23, 23;
    --bs-white-rgb: 255, 255, 255;
}

/* Theme colours that aren't variable-driven in BS 5.3 and have to be stated. */
.text-primary { color: var(--fs-accent) !important; }
.text-secondary { color: var(--fs-text-secondary) !important; }
.text-muted { color: var(--fs-text-muted) !important; }
.text-body { color: var(--fs-text) !important; }
.text-body-secondary { color: var(--fs-text-secondary) !important; }
.text-success { color: var(--fs-success) !important; }
.text-danger { color: var(--fs-danger) !important; }
.text-warning { color: var(--fs-warning) !important; }
.text-info { color: var(--fs-accent) !important; }
.text-dark { color: var(--fs-text) !important; }
.text-black { color: var(--fs-text) !important; }
.text-white { color: var(--fs-text) !important; }
.text-white-50 { color: var(--fs-text-secondary) !important; }

.bg-primary { background-color: var(--fs-accent) !important; color: var(--fs-on-accent) !important; }
.bg-success { background-color: var(--fs-success) !important; color: #fff !important; }
.bg-danger { background-color: var(--fs-danger) !important; color: #fff !important; }
.bg-warning { background-color: var(--fs-warning) !important; color: #1A1200 !important; }
.bg-info { background-color: var(--fs-info) !important; color: #fff !important; }

/* .text-white above is remapped to the body colour, because the app uses it
   almost entirely inside headers that used to be near-black slabs. Where it
   genuinely sits on a saturated fill (danger modal headers, badges) it has to
   stay white. */
.bg-primary.text-white, .bg-primary .text-white { color: var(--fs-on-accent) !important; }
.bg-success.text-white, .bg-success .text-white,
.bg-danger.text-white,  .bg-danger .text-white,
.bg-info.text-white,    .bg-info .text-white { color: #fff !important; }
.bg-body,
.bg-white { background-color: var(--fs-surface) !important; }
.bg-body-secondary,
.bg-light { background-color: var(--fs-recessed) !important; }
.bg-body-tertiary { background-color: var(--fs-recessed) !important; }
.bg-dark { background-color: var(--fs-elevated) !important; color: var(--fs-text) !important; }
.bg-secondary { background-color: var(--fs-elevated) !important; color: var(--fs-text) !important; }

.border { border-color: var(--fs-border) !important; }
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--fs-border) !important; }
.border-primary { border-color: var(--fs-accent) !important; }
.border-light { border-color: var(--fs-border) !important; }
.border-secondary { border-color: var(--fs-border) !important; }

hr,
.dropdown-divider {
    border-color: var(--fs-border);
    opacity: 1;
}


/* ==========================================================================
   5. Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--fs-bg);
    color: var(--fs-text);
    font-size: 0.9375rem;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

/* Type scale mirroring the Flutter TextTheme. Headings are tight and bold;
   the app leans on weight and colour for hierarchy, not size. */
h1, .h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.5rem;  font-weight: 700; letter-spacing: -0.02em; }
h3, .h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
h4, .h4 { font-size: 1.125rem; font-weight: 700; }
h5, .h5 { font-size: 1rem;    font-weight: 600; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fs-text);
    line-height: 1.25;
}

small, .small { font-size: 0.8125rem; }

a {
    color: var(--fs-accent);
    text-decoration: none;
    transition: color var(--fs-transition);
}

a:hover {
    color: var(--fs-accent-hover);
    text-decoration: none;
}

::selection {
    background-color: var(--fs-accent);
    color: var(--fs-on-accent);
}

/* Focus — a green ring, never the Bootstrap blue glow */
:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: 2px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--fs-accent-tint);
}

/* Scrollbars, tuned to the surface palette */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--fs-input-border) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--fs-input-border);
    border-radius: var(--fs-radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--fs-text-muted);
}

/* Smooth the theme switch on the surfaces that actually change */
body,
.card,
.list-group-item,
.modal-content,
.form-control,
.form-select,
.table,
.accordion-item {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}