/*!***********************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/assets/ngx-design-system/tokens.css?ngGlobalStyle ***! \***********************************************************************************************************************************************************************************************************************************************/ @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap); /*!*******************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/ngx-tokens.css ***! \*******************************************************************************************************************************************************************************************************************/ @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&family=Roboto+Mono:wght@100..700&display=swap); /*!***********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/ngx-design-system/ds-fonts.css ***! \***********************************************************************************************************************************************************************************************************************************/ @import url(https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap); /*!***************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/assets/ngx-design-system/tokens.css?ngGlobalStyle (1) ***! \***************************************************************************************************************************************************************************************************************************************************/ /* ========================================================================== NGX Design System — Tokens CSS -------------------------------------------------------------------------- Importar uma vez no root da aplicação. Theme switching via [data-theme="light"] ou [data-theme="dark"] no . ========================================================================== */ /* ---------- Fonts ---------- Estratégia v1.4 — Apple-first system stack: - macOS / iOS / iPadOS: usa SF Pro nativo (mesma fonte do macOS Tahoe) — zero download - Windows: usa Segoe UI Variable nativo - Outros: cai pra Inter (carregado via Google Fonts) — desenhada pra ser similar ao SF - Mono: SF Mono / Menlo nativos primeiro, JetBrains Mono fallback ---------------------------- */ /* ========================================================================== 1. PRIMITIVAS — escalas brutas (não consumir direto em componentes) ========================================================================== */ :root { /* Brand colors — imutáveis */ --ngx-brand-orange: #F79520; --ngx-brand-amber: #FBB042; --ngx-brand-graphite: #424142; --ngx-brand-black: #000000; /* Orange scale */ --ngx-orange-50: #FFF7ED; --ngx-orange-100: #FFEDD5; --ngx-orange-200: #FED7AA; --ngx-orange-300: #FDBA74; --ngx-orange-400: #FBB042; --ngx-orange-500: #F79520; --ngx-orange-600: #EA7C0E; --ngx-orange-700: #C2620B; --ngx-orange-800: #9A4E10; --ngx-orange-900: #7C4011; --ngx-orange-950: #432006; /* Neutral scale */ --ngx-neutral-0: #FFFFFF; --ngx-neutral-50: #FAFAFA; --ngx-neutral-100: #F4F4F5; --ngx-neutral-200: #E4E4E7; --ngx-neutral-300: #D4D4D8; --ngx-neutral-400: #A1A1AA; --ngx-neutral-500: #71717A; --ngx-neutral-600: #52525B; --ngx-neutral-700: #424142; --ngx-neutral-800: #2D2D30; --ngx-neutral-900: #1A1A1C; --ngx-neutral-950: #0A0A0B; --ngx-neutral-1000: #000000; /* Semantic — success */ --ngx-success-50: #ECFDF5; --ngx-success-100: #D1FAE5; --ngx-success-500: #10B981; --ngx-success-600: #059669; --ngx-success-700: #047857; --ngx-success-900: #064E3B; /* Semantic — warning (amber, distinto do brand orange) */ --ngx-warning-50: #FFFBEB; --ngx-warning-100: #FEF3C7; --ngx-warning-500: #F59E0B; --ngx-warning-600: #D97706; --ngx-warning-700: #B45309; --ngx-warning-900: #78350F; /* Semantic — danger */ --ngx-danger-50: #FEF2F2; --ngx-danger-100: #FEE2E2; --ngx-danger-500: #EF4444; --ngx-danger-600: #DC2626; --ngx-danger-700: #B91C1C; --ngx-danger-900: #7F1D1D; /* Semantic — info */ --ngx-info-50: #EFF6FF; --ngx-info-100: #DBEAFE; --ngx-info-500: #3B82F6; --ngx-info-600: #2563EB; --ngx-info-700: #1D4ED8; --ngx-info-900: #1E3A8A; /* Typography — v1.4 system stack Apple-first Em macOS/iOS pega SF Pro (San Francisco) nativo — mesma fonte do macOS Tahoe. Em Windows pega Segoe UI Variable. Em Linux/outros, cai pra Inter (Google Fonts). */ --ngx-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro', 'Segoe UI Variable Display', 'Segoe UI', 'Inter', system-ui, sans-serif; --ngx-font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Segoe UI Variable Text', 'Segoe UI', 'Inter', system-ui, sans-serif; --ngx-font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'JetBrains Mono', monospace; --ngx-text-xs: 0.75rem; --ngx-text-sm: 0.875rem; --ngx-text-base: 1rem; --ngx-text-lg: 1.125rem; --ngx-text-xl: 1.25rem; --ngx-text-2xl: 1.5rem; --ngx-text-3xl: 1.875rem; --ngx-text-4xl: 2.25rem; --ngx-text-display: 3rem; --ngx-font-regular: 400; --ngx-font-medium: 500; --ngx-font-semibold: 600; --ngx-font-bold: 700; --ngx-font-extrabold: 800; --ngx-tracking-tight: -0.02em; --ngx-tracking-normal: 0; --ngx-tracking-wide: 0.04em; /* Spacing */ --ngx-space-0: 0; --ngx-space-px: 1px; --ngx-space-0_5: 0.125rem; --ngx-space-1: 0.25rem; --ngx-space-1_5: 0.375rem; --ngx-space-2: 0.5rem; --ngx-space-2_5: 0.625rem; --ngx-space-3: 0.75rem; --ngx-space-4: 1rem; --ngx-space-5: 1.25rem; --ngx-space-6: 1.5rem; --ngx-space-7: 1.75rem; --ngx-space-8: 2rem; --ngx-space-10: 2.5rem; --ngx-space-12: 3rem; --ngx-space-14: 3.5rem; --ngx-space-16: 4rem; --ngx-space-20: 5rem; --ngx-space-24: 6rem; --ngx-space-32: 8rem; /* Radius — escala estendida v1.1 (Liquid Glass) */ --ngx-radius-none: 0; --ngx-radius-xs: 2px; --ngx-radius-sm: 4px; --ngx-radius-md: 6px; --ngx-radius-lg: 8px; --ngx-radius-xl: 12px; --ngx-radius-2xl: 16px; --ngx-radius-3xl: 20px; /* novo — cards principais Liquid Glass */ --ngx-radius-4xl: 28px; /* novo — superfícies grandes (sidebar, modal hero) */ --ngx-radius-5xl: 40px; /* novo — heros, splash, banners full-width */ --ngx-radius-full: 9999px; /* Liquid Glass — blurs (intensidade do desfoque do backdrop) */ --ngx-blur-sm: 8px; --ngx-blur-md: 16px; --ngx-blur-lg: 24px; --ngx-blur-xl: 40px; /* Liquid Glass — saturação (vibrancy: realça cores por trás do glass) */ --ngx-saturate-glass: 180%; /* Motion */ --ngx-duration-instant: 0ms; --ngx-duration-fast: 120ms; --ngx-duration-base: 200ms; --ngx-duration-moderate: 280ms; --ngx-duration-slow: 400ms; --ngx-ease-linear: linear; --ngx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ngx-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ngx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Z-index */ --ngx-z-base: 0; --ngx-z-raised: 10; --ngx-z-sticky: 100; --ngx-z-dropdown: 200; --ngx-z-overlay: 300; --ngx-z-modal: 400; --ngx-z-popover: 500; --ngx-z-toast: 600; --ngx-z-max: 9999; /* Breakpoints (referência — usar em media queries) */ --ngx-bp-sm: 640px; --ngx-bp-md: 768px; --ngx-bp-lg: 1024px; --ngx-bp-xl: 1280px; --ngx-bp-2xl: 1536px; /* Mobile-specific tokens (v1.3) */ --ngx-touch-target-min: 44px; /* WCAG 2.5.5 — alvo mínimo de toque */ --ngx-touch-target-cozy: 48px; /* Material Design recommendation */ --ngx-mobile-page-padding: var(--ngx-space-4); /* 16px lateral em mobile */ --ngx-mobile-section-gap: var(--ngx-space-6); /* 24px entre seções */ --ngx-mobile-bottomnav-height: 64px; --ngx-mobile-topbar-height: 56px; --ngx-mobile-fab-size: 56px; --ngx-mobile-safe-bottom: env(safe-area-inset-bottom, 0); --ngx-mobile-safe-top: env(safe-area-inset-top, 0); } /* ========================================================================== 2. SEMÂNTICOS — LIGHT MODE Componentes consomem APENAS estes tokens. ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; /* Backgrounds */ --ngx-bg-canvas: var(--ngx-neutral-50); --ngx-bg-surface: var(--ngx-neutral-0); --ngx-bg-surface-raised: var(--ngx-neutral-0); --ngx-bg-surface-sunken: var(--ngx-neutral-100); --ngx-bg-overlay: rgba(0, 0, 0, 0.50); --ngx-bg-hover: var(--ngx-neutral-100); --ngx-bg-selected: var(--ngx-orange-50); --ngx-bg-selected-strong: var(--ngx-orange-100); /* Text */ --ngx-text-primary: var(--ngx-neutral-900); --ngx-text-secondary: var(--ngx-neutral-700); --ngx-text-tertiary: var(--ngx-neutral-500); --ngx-text-disabled: var(--ngx-neutral-400); --ngx-text-inverse: var(--ngx-neutral-0); --ngx-text-brand: var(--ngx-orange-600); --ngx-text-brand-strong: var(--ngx-orange-700); /* Borders */ --ngx-border-subtle: var(--ngx-neutral-200); --ngx-border-default: var(--ngx-neutral-300); --ngx-border-strong: var(--ngx-neutral-400); --ngx-border-brand: var(--ngx-orange-500); --ngx-border-brand-subtle: var(--ngx-orange-200); /* Interactive primary (cor da marca) */ --ngx-interactive-primary: var(--ngx-orange-500); --ngx-interactive-primary-hover: var(--ngx-orange-600); --ngx-interactive-primary-active: var(--ngx-orange-700); --ngx-interactive-primary-disabled: var(--ngx-orange-300); --ngx-interactive-on-primary: var(--ngx-neutral-0); /* Interactive secondary (neutro) */ --ngx-interactive-secondary: var(--ngx-neutral-100); --ngx-interactive-secondary-hover: var(--ngx-neutral-200); --ngx-interactive-secondary-active: var(--ngx-neutral-300); --ngx-interactive-secondary-disabled: var(--ngx-neutral-100); --ngx-interactive-on-secondary: var(--ngx-neutral-900); /* Interactive ghost (transparent) */ --ngx-interactive-ghost-hover: var(--ngx-neutral-100); --ngx-interactive-ghost-active: var(--ngx-neutral-200); /* Interactive danger */ --ngx-interactive-danger: var(--ngx-danger-600); --ngx-interactive-danger-hover: var(--ngx-danger-700); --ngx-interactive-danger-active: var(--ngx-danger-700); --ngx-interactive-on-danger: var(--ngx-neutral-0); /* Focus */ --ngx-focus-ring-color: var(--ngx-orange-500); --ngx-focus-ring-shadow: 0 0 0 3px rgba(247, 149, 32, 0.30); /* Feedback */ --ngx-feedback-success: var(--ngx-success-600); --ngx-feedback-success-bg: var(--ngx-success-50); --ngx-feedback-warning: var(--ngx-warning-600); --ngx-feedback-warning-bg: var(--ngx-warning-50); --ngx-feedback-danger: var(--ngx-danger-600); --ngx-feedback-danger-bg: var(--ngx-danger-50); --ngx-feedback-info: var(--ngx-info-600); --ngx-feedback-info-bg: var(--ngx-info-50); /* Shadows */ --ngx-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --ngx-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06); --ngx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --ngx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.06); --ngx-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.05); --ngx-shadow-focus: var(--ngx-focus-ring-shadow); /* Status pills (cores de prioridade/status comuns aos 3 sistemas) */ --ngx-status-todo-bg: var(--ngx-neutral-100); --ngx-status-todo-fg: var(--ngx-neutral-700); --ngx-status-doing-bg: var(--ngx-info-50); --ngx-status-doing-fg: var(--ngx-info-700); --ngx-status-review-bg: rgba(251, 176, 66, 0.15); --ngx-status-review-fg: var(--ngx-orange-700); --ngx-status-done-bg: var(--ngx-success-50); --ngx-status-done-fg: var(--ngx-success-700); --ngx-status-blocked-bg: var(--ngx-danger-50); --ngx-status-blocked-fg: var(--ngx-danger-700); --ngx-priority-low-bg: var(--ngx-neutral-100); --ngx-priority-low-fg: var(--ngx-neutral-700); --ngx-priority-medium-bg: var(--ngx-info-50); --ngx-priority-medium-fg: var(--ngx-info-700); --ngx-priority-high-bg: var(--ngx-warning-50); --ngx-priority-high-fg: var(--ngx-warning-700); --ngx-priority-urgent-bg: var(--ngx-danger-50); --ngx-priority-urgent-fg: var(--ngx-danger-700); /* ───────────────────────────────────────────────────── LIQUID GLASS — superfícies translúcidas (light mode) Use estes tokens nas .glass-* classes. ───────────────────────────────────────────────────── */ /* Glass surfaces (background com alpha) — v1.1.1 cards mais sólidos */ --ngx-glass-bg-thin: rgba(255, 255, 255, 0.78); /* sidebar, header sticky */ --ngx-glass-bg-regular: rgba(255, 255, 255, 0.92); /* padrão — cards, modais */ --ngx-glass-bg-thick: rgba(255, 255, 255, 0.97); /* praticamente sólido */ --ngx-glass-bg-tinted: rgba(247, 149, 32, 0.10); /* glass com tom da marca */ /* Glass borders (inner highlight + outline) */ --ngx-glass-border: rgba(255, 255, 255, 0.50); --ngx-glass-border-strong: rgba(255, 255, 255, 0.70); --ngx-glass-outline: rgba(0, 0, 0, 0.06); /* outline externo sutil */ /* Glass shadows — soft & layered (replicam profundidade Apple) */ --ngx-glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06); --ngx-glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5) inset; --ngx-glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset; --ngx-glass-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.08), 0 40px 80px rgba(0, 0, 0, 0.16), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } /* ========================================================================== 3. SEMÂNTICOS — DARK MODE ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* Backgrounds */ --ngx-bg-canvas: var(--ngx-neutral-950); --ngx-bg-surface: var(--ngx-neutral-900); --ngx-bg-surface-raised: var(--ngx-neutral-800); --ngx-bg-surface-sunken: var(--ngx-neutral-1000); --ngx-bg-overlay: rgba(0, 0, 0, 0.70); --ngx-bg-hover: var(--ngx-neutral-800); --ngx-bg-selected: rgba(251, 176, 66, 0.10); --ngx-bg-selected-strong: rgba(251, 176, 66, 0.18); /* Text */ --ngx-text-primary: var(--ngx-neutral-50); --ngx-text-secondary: var(--ngx-neutral-300); --ngx-text-tertiary: var(--ngx-neutral-400); --ngx-text-disabled: var(--ngx-neutral-600); --ngx-text-inverse: var(--ngx-neutral-1000); --ngx-text-brand: var(--ngx-orange-400); --ngx-text-brand-strong: var(--ngx-orange-300); /* Borders */ --ngx-border-subtle: var(--ngx-neutral-800); --ngx-border-default: var(--ngx-neutral-700); --ngx-border-strong: var(--ngx-neutral-600); --ngx-border-brand: var(--ngx-orange-400); --ngx-border-brand-subtle: rgba(251, 176, 66, 0.30); /* Interactive primary */ --ngx-interactive-primary: var(--ngx-orange-400); --ngx-interactive-primary-hover: var(--ngx-orange-300); --ngx-interactive-primary-active: var(--ngx-orange-500); --ngx-interactive-primary-disabled: rgba(251, 176, 66, 0.30); --ngx-interactive-on-primary: var(--ngx-neutral-1000); /* Interactive secondary */ --ngx-interactive-secondary: var(--ngx-neutral-800); --ngx-interactive-secondary-hover: var(--ngx-neutral-700); --ngx-interactive-secondary-active: var(--ngx-neutral-600); --ngx-interactive-secondary-disabled: var(--ngx-neutral-800); --ngx-interactive-on-secondary: var(--ngx-neutral-50); /* Interactive ghost */ --ngx-interactive-ghost-hover: var(--ngx-neutral-800); --ngx-interactive-ghost-active: var(--ngx-neutral-700); /* Interactive danger */ --ngx-interactive-danger: var(--ngx-danger-500); --ngx-interactive-danger-hover: var(--ngx-danger-600); --ngx-interactive-danger-active: var(--ngx-danger-700); --ngx-interactive-on-danger: var(--ngx-neutral-1000); /* Focus */ --ngx-focus-ring-color: var(--ngx-orange-400); --ngx-focus-ring-shadow: 0 0 0 3px rgba(251, 176, 66, 0.35); /* Feedback */ --ngx-feedback-success: var(--ngx-success-500); --ngx-feedback-success-bg: rgba(16, 185, 129, 0.12); --ngx-feedback-warning: var(--ngx-warning-500); --ngx-feedback-warning-bg: rgba(245, 158, 11, 0.12); --ngx-feedback-danger: var(--ngx-danger-500); --ngx-feedback-danger-bg: rgba(239, 68, 68, 0.12); --ngx-feedback-info: var(--ngx-info-500); --ngx-feedback-info-bg: rgba(59, 130, 246, 0.12); /* Shadows */ --ngx-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40); --ngx-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.50); --ngx-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55); --ngx-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.60); --ngx-shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.65); --ngx-shadow-focus: var(--ngx-focus-ring-shadow); /* Status pills */ --ngx-status-todo-bg: rgba(161, 161, 170, 0.15); --ngx-status-todo-fg: var(--ngx-neutral-300); --ngx-status-doing-bg: rgba(59, 130, 246, 0.18); --ngx-status-doing-fg: #93C5FD; --ngx-status-review-bg: rgba(251, 176, 66, 0.18); --ngx-status-review-fg: var(--ngx-orange-300); --ngx-status-done-bg: rgba(16, 185, 129, 0.15); --ngx-status-done-fg: #6EE7B7; --ngx-status-blocked-bg: rgba(239, 68, 68, 0.18); --ngx-status-blocked-fg: #FCA5A5; --ngx-priority-low-bg: rgba(161, 161, 170, 0.15); --ngx-priority-low-fg: var(--ngx-neutral-300); --ngx-priority-medium-bg: rgba(59, 130, 246, 0.18); --ngx-priority-medium-fg: #93C5FD; --ngx-priority-high-bg: rgba(245, 158, 11, 0.18); --ngx-priority-high-fg: #FCD34D; --ngx-priority-urgent-bg: rgba(239, 68, 68, 0.18); --ngx-priority-urgent-fg: #FCA5A5; /* ───────────────────────────────────────────────────── LIQUID GLASS — superfícies translúcidas (dark mode) ───────────────────────────────────────────────────── */ --ngx-glass-bg-thin: rgba(26, 26, 28, 0.78); --ngx-glass-bg-regular: rgba(26, 26, 28, 0.92); --ngx-glass-bg-thick: rgba(26, 26, 28, 0.97); --ngx-glass-bg-tinted: rgba(251, 176, 66, 0.12); --ngx-glass-border: rgba(255, 255, 255, 0.10); --ngx-glass-border-strong: rgba(255, 255, 255, 0.18); --ngx-glass-outline: rgba(255, 255, 255, 0.04); --ngx-glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.40); --ngx-glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.50), 0 1px 0 rgba(255, 255, 255, 0.06) inset; --ngx-glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.40), 0 24px 48px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.08) inset; --ngx-glass-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.45), 0 40px 80px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.10) inset; } /* ========================================================================== 4. AUTO DARK MODE (quando user não escolheu) ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; /* Re-aplica todos os tokens dark — duplicado pra que o seletor :not seja específico */ --ngx-bg-canvas: var(--ngx-neutral-950); --ngx-bg-surface: var(--ngx-neutral-900); --ngx-bg-surface-raised: var(--ngx-neutral-800); --ngx-bg-surface-sunken: var(--ngx-neutral-1000); --ngx-bg-overlay: rgba(0, 0, 0, 0.70); --ngx-bg-hover: var(--ngx-neutral-800); --ngx-bg-selected: rgba(251, 176, 66, 0.10); --ngx-bg-selected-strong: rgba(251, 176, 66, 0.18); --ngx-text-primary: var(--ngx-neutral-50); --ngx-text-secondary: var(--ngx-neutral-300); --ngx-text-tertiary: var(--ngx-neutral-400); --ngx-text-disabled: var(--ngx-neutral-600); --ngx-text-inverse: var(--ngx-neutral-1000); --ngx-text-brand: var(--ngx-orange-400); --ngx-text-brand-strong: var(--ngx-orange-300); --ngx-border-subtle: var(--ngx-neutral-800); --ngx-border-default: var(--ngx-neutral-700); --ngx-border-strong: var(--ngx-neutral-600); --ngx-border-brand: var(--ngx-orange-400); --ngx-border-brand-subtle: rgba(251, 176, 66, 0.30); --ngx-interactive-primary: var(--ngx-orange-400); --ngx-interactive-primary-hover: var(--ngx-orange-300); --ngx-interactive-primary-active: var(--ngx-orange-500); --ngx-interactive-primary-disabled: rgba(251, 176, 66, 0.30); --ngx-interactive-on-primary: var(--ngx-neutral-1000); --ngx-focus-ring-color: var(--ngx-orange-400); --ngx-focus-ring-shadow: 0 0 0 3px rgba(251, 176, 66, 0.35); } } /* ========================================================================== 5. RESET MÍNIMO + APP DEFAULTS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--ngx-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Habilita features OpenType — quando Inter é usado, fica mais parecido com SF Pro */ font-feature-settings: 'cv11', 'ss01', 'ss03', 'calt'; -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--ngx-bg-canvas); color: var(--ngx-text-primary); font-family: var(--ngx-font-body); font-size: var(--ngx-text-sm); line-height: 1.43; letter-spacing: -0.01em; /* SF Pro tem tracking ligeiramente negativo */ transition: background-color var(--ngx-duration-base) var(--ngx-ease-out), color var(--ngx-duration-base) var(--ngx-ease-out); } :focus-visible { outline: 2px solid var(--ngx-focus-ring-color); outline-offset: 2px; border-radius: var(--ngx-radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 6. LIQUID GLASS — utilities (v1.1) -------------------------------------------------------------------------- Use estas classes em superfícies que devem ter o efeito de "vidro" (sidebar, header sticky, cards principais, modais, popovers). Combine com `radius-3xl` ou `radius-4xl` pra fechar o look. ========================================================================== */ .glass-thin, .glass, .glass-thick, .glass-tinted { backdrop-filter: blur(var(--ngx-blur-md)) saturate(var(--ngx-saturate-glass)); border: 1px solid var(--ngx-glass-border); box-shadow: var(--ngx-glass-shadow-md); transition: background-color var(--ngx-duration-base) var(--ngx-ease-out), backdrop-filter var(--ngx-duration-base) var(--ngx-ease-out), box-shadow var(--ngx-duration-base) var(--ngx-ease-out); } .glass-thin { background-color: var(--ngx-glass-bg-thin); backdrop-filter: blur(var(--ngx-blur-sm)) saturate(var(--ngx-saturate-glass)); box-shadow: var(--ngx-glass-shadow-sm); } .glass { background-color: var(--ngx-glass-bg-regular); } .glass-thick { background-color: var(--ngx-glass-bg-thick); backdrop-filter: blur(var(--ngx-blur-lg)) saturate(var(--ngx-saturate-glass)); box-shadow: var(--ngx-glass-shadow-lg); } .glass-tinted { background-color: var(--ngx-glass-bg-tinted); border-color: var(--ngx-border-brand-subtle); } /* Modificador de elevação */ .glass-raised { box-shadow: var(--ngx-glass-shadow-lg); } .glass-floating { box-shadow: var(--ngx-glass-shadow-xl); } /* Fallback pra navegadores sem backdrop-filter */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-thin { background-color: var(--ngx-bg-surface); } .glass { background-color: var(--ngx-bg-surface); } .glass-thick { background-color: var(--ngx-bg-surface-raised); } .glass-tinted { background-color: var(--ngx-bg-selected); } } /* Em dark mode, o saturate excessivo deixa cores estouradas — reduzir */ :root[data-theme="dark"] .glass-thin, :root[data-theme="dark"] .glass, :root[data-theme="dark"] .glass-thick, :root[data-theme="dark"] .glass-tinted { backdrop-filter: blur(var(--ngx-blur-md)) saturate(140%); } /* Ajustes pra evitar artefato de blur em containers sticky/fixed */ .glass, .glass-thin, .glass-thick, .glass-tinted { isolation: isolate; } /* ========================================================================== 7. MOBILE / RESPONSIVE — utilities (v1.3) -------------------------------------------------------------------------- Helpers pra construir layouts adaptativos sem depender de framework. ========================================================================== */ /* Show/hide por breakpoint */ .hide-mobile { /* default visible */ } .hide-tablet { /* default visible */ } .hide-desktop { /* default visible */ } .show-mobile { display: none !important; } .show-tablet { display: none !important; } @media (max-width: 639.98px) { .hide-mobile { display: none !important; } .show-mobile { display: revert !important; } } @media (min-width: 640px) and (max-width: 1023.98px) { .hide-tablet { display: none !important; } .show-tablet { display: revert !important; } } @media (min-width: 1024px) { .hide-desktop { display: none !important; } } /* Touch target — sempre 44x44 mínimo em mobile */ @media (max-width: 767.98px) { .btn--sm, .btn--md { min-height: var(--ngx-touch-target-min); } .btn--icon-only.btn--sm, .btn--icon-only.btn--md { min-width: var(--ngx-touch-target-min); } .input--sm, .input--md { min-height: var(--ngx-touch-target-min); } .select--sm, .select--md { min-height: var(--ngx-touch-target-min); } } /* Safe area insets (iOS notch/home indicator) */ .safe-area-bottom { padding-bottom: var(--ngx-mobile-safe-bottom); } .safe-area-top { padding-top: var(--ngx-mobile-safe-top); } .safe-area-y { padding-top: var(--ngx-mobile-safe-top); padding-bottom: var(--ngx-mobile-safe-bottom); } /* Stack horizontal vira vertical em mobile */ @media (max-width: 639.98px) { .stack--horizontal-stack-mobile { flex-direction: column !important; align-items: stretch !important; } } /* Grid responsivo automático */ .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--ngx-space-4); } /* Tabela com scroll horizontal em mobile */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { min-width: 600px; } /* Esconde scroll bonito em mobile */ @media (max-width: 767.98px) { .table-scroll { scrollbar-width: thin; } .table-scroll::-webkit-scrollbar { height: 4px; } .table-scroll::-webkit-scrollbar-thumb { background: var(--ngx-border-default); border-radius: 999px; } } /* Text scale — type ligeiramente menor em mobile */ @media (max-width: 639.98px) { :root { --ngx-text-display: 2.25rem; /* 48 → 36 */ --ngx-text-4xl: 1.875rem; /* 36 → 30 */ --ngx-text-3xl: 1.5rem; /* 30 → 24 */ } } /* Padding lateral padrão em mobile */ @media (max-width: 767.98px) { .container, .container--sm, .container--md, .container--lg, .container--xl, .container--2xl { padding-inline: var(--ngx-mobile-page-padding); } } /* ========================================================================== 8. PADRÕES MOBILE — Bottom nav, FAB, Pull-to-refresh hint ========================================================================== */ /* Bottom navigation bar (mobile-only) */ .bottomnav { display: none; } @media (max-width: 767.98px) { .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--ngx-mobile-bottomnav-height) + var(--ngx-mobile-safe-bottom)); padding-bottom: var(--ngx-mobile-safe-bottom); background: var(--ngx-glass-bg-thick); backdrop-filter: blur(var(--ngx-blur-md)) saturate(var(--ngx-saturate-glass)); border-top: 1px solid var(--ngx-border-subtle); display: flex; align-items: stretch; justify-content: space-around; z-index: var(--ngx-z-sticky); } } .bottomnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--ngx-space-1); background: none; border: none; color: var(--ngx-text-tertiary); font-size: 10px; font-weight: var(--ngx-font-medium); text-decoration: none; cursor: pointer; min-height: var(--ngx-touch-target-min); } .bottomnav__item-icon { font-size: 22px; line-height: 1; } .bottomnav__item--active { color: var(--ngx-text-brand); } .bottomnav__item--active .bottomnav__item-icon { color: var(--ngx-text-brand); } /* FAB (floating action button) */ .fab { position: fixed; bottom: calc(var(--ngx-mobile-bottomnav-height) + var(--ngx-space-4) + var(--ngx-mobile-safe-bottom)); right: var(--ngx-space-4); width: var(--ngx-mobile-fab-size); height: var(--ngx-mobile-fab-size); border-radius: 50%; background: var(--ngx-interactive-primary); color: var(--ngx-interactive-on-primary); border: none; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 12px rgba(247, 149, 32, 0.40), 0 8px 24px rgba(0,0,0,0.15); z-index: var(--ngx-z-raised); cursor: pointer; transition: transform var(--ngx-duration-fast) var(--ngx-ease-out), box-shadow var(--ngx-duration-fast) var(--ngx-ease-out); } .fab:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(247, 149, 32, 0.50), 0 12px 32px rgba(0,0,0,0.20); } .fab:active { transform: scale(0.95); } /* FAB extended (com label) */ .fab--extended { width: auto; padding: 0 var(--ngx-space-5); border-radius: var(--ngx-radius-full); gap: var(--ngx-space-2); font-size: var(--ngx-text-sm); font-weight: var(--ngx-font-semibold); } /* Hide FAB em desktop por padrão */ @media (min-width: 768px) { .fab { display: none; } } /*!***********************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/ngx-tokens.css (1) ***! \***********************************************************************************************************************************************************************************************************************/ /* ========================================================================== NGX Design System — Tokens CSS -------------------------------------------------------------------------- Importar uma vez no root da aplicação. Theme switching via [data-theme="light"] ou [data-theme="dark"] no . ========================================================================== */ /* ---------- Fonts ---------- Estratégia v1.5 — Roboto via Google Fonts: - Display + Body: Roboto Variable (acesso a todos os pesos 100-900) - Mono: Roboto Mono Variable - Fallback: system stack (SF Pro no Apple, Segoe UI no Windows) ---------------------------- */ /* ========================================================================== 1. PRIMITIVAS — escalas brutas (não consumir direto em componentes) ========================================================================== */ :root { /* Brand colors — imutáveis */ --ngx-brand-orange: #F79520; --ngx-brand-amber: #FBB042; --ngx-brand-graphite: #424142; --ngx-brand-black: #000000; /* Orange scale */ --ngx-orange-50: #FFF7ED; --ngx-orange-100: #FFEDD5; --ngx-orange-200: #FED7AA; --ngx-orange-300: #FDBA74; --ngx-orange-400: #FBB042; --ngx-orange-500: #F79520; --ngx-orange-600: #EA7C0E; --ngx-orange-700: #C2620B; --ngx-orange-800: #9A4E10; --ngx-orange-900: #7C4011; --ngx-orange-950: #432006; /* Neutral scale */ --ngx-neutral-0: #FFFFFF; --ngx-neutral-50: #FAFAFA; --ngx-neutral-100: #F4F4F5; --ngx-neutral-200: #E4E4E7; --ngx-neutral-300: #D4D4D8; --ngx-neutral-400: #A1A1AA; --ngx-neutral-500: #71717A; --ngx-neutral-600: #52525B; --ngx-neutral-700: #424142; --ngx-neutral-800: #2D2D30; --ngx-neutral-900: #1A1A1C; --ngx-neutral-950: #0A0A0B; --ngx-neutral-1000: #000000; /* Semantic — success */ --ngx-success-50: #ECFDF5; --ngx-success-100: #D1FAE5; --ngx-success-500: #10B981; --ngx-success-600: #059669; --ngx-success-700: #047857; --ngx-success-900: #064E3B; /* Semantic — warning (amber, distinto do brand orange) */ --ngx-warning-50: #FFFBEB; --ngx-warning-100: #FEF3C7; --ngx-warning-500: #F59E0B; --ngx-warning-600: #D97706; --ngx-warning-700: #B45309; --ngx-warning-900: #78350F; /* Semantic — danger */ --ngx-danger-50: #FEF2F2; --ngx-danger-100: #FEE2E2; --ngx-danger-500: #EF4444; --ngx-danger-600: #DC2626; --ngx-danger-700: #B91C1C; --ngx-danger-900: #7F1D1D; /* Semantic — info */ --ngx-info-50: #EFF6FF; --ngx-info-100: #DBEAFE; --ngx-info-500: #3B82F6; --ngx-info-600: #2563EB; --ngx-info-700: #1D4ED8; --ngx-info-900: #1E3A8A; /* Typography — v1.5 Roboto-first via Google Fonts Roboto e Roboto Mono carregados como variáveis (todos os pesos disponíveis). Fallback pro system stack se Google Fonts não carregar. */ --ngx-font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --ngx-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --ngx-font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; --ngx-text-xs: 0.75rem; --ngx-text-sm: 0.875rem; --ngx-text-base: 1rem; --ngx-text-lg: 1.125rem; --ngx-text-xl: 1.25rem; --ngx-text-2xl: 1.5rem; --ngx-text-3xl: 1.875rem; --ngx-text-4xl: 2.25rem; --ngx-text-display: 3rem; --ngx-font-regular: 400; --ngx-font-medium: 500; --ngx-font-semibold: 600; --ngx-font-bold: 700; --ngx-font-extrabold: 800; --ngx-tracking-tight: -0.02em; --ngx-tracking-normal: 0; --ngx-tracking-wide: 0.04em; /* Spacing */ --ngx-space-0: 0; --ngx-space-px: 1px; --ngx-space-0_5: 0.125rem; --ngx-space-1: 0.25rem; --ngx-space-1_5: 0.375rem; --ngx-space-2: 0.5rem; --ngx-space-2_5: 0.625rem; --ngx-space-3: 0.75rem; --ngx-space-4: 1rem; --ngx-space-5: 1.25rem; --ngx-space-6: 1.5rem; --ngx-space-7: 1.75rem; --ngx-space-8: 2rem; --ngx-space-10: 2.5rem; --ngx-space-12: 3rem; --ngx-space-14: 3.5rem; --ngx-space-16: 4rem; --ngx-space-20: 5rem; --ngx-space-24: 6rem; --ngx-space-32: 8rem; /* Radius — escala estendida v1.1 (Liquid Glass) */ --ngx-radius-none: 0; --ngx-radius-xs: 2px; --ngx-radius-sm: 4px; --ngx-radius-md: 6px; --ngx-radius-lg: 8px; --ngx-radius-xl: 12px; --ngx-radius-2xl: 16px; --ngx-radius-3xl: 20px; /* novo — cards principais Liquid Glass */ --ngx-radius-4xl: 28px; /* novo — superfícies grandes (sidebar, modal hero) */ --ngx-radius-5xl: 40px; /* novo — heros, splash, banners full-width */ --ngx-radius-full: 9999px; /* Liquid Glass — blurs (intensidade do desfoque do backdrop) */ --ngx-blur-sm: 8px; --ngx-blur-md: 16px; --ngx-blur-lg: 24px; --ngx-blur-xl: 40px; /* Liquid Glass — saturação (vibrancy: realça cores por trás do glass) */ --ngx-saturate-glass: 180%; /* Motion */ --ngx-duration-instant: 0ms; --ngx-duration-fast: 120ms; --ngx-duration-base: 200ms; --ngx-duration-moderate: 280ms; --ngx-duration-slow: 400ms; --ngx-ease-linear: linear; --ngx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ngx-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ngx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Z-index */ --ngx-z-base: 0; --ngx-z-raised: 10; --ngx-z-sticky: 100; --ngx-z-dropdown: 200; --ngx-z-overlay: 300; --ngx-z-modal: 400; --ngx-z-popover: 500; --ngx-z-toast: 600; --ngx-z-max: 9999; /* Breakpoints (referência — usar em media queries) */ --ngx-bp-sm: 640px; --ngx-bp-md: 768px; --ngx-bp-lg: 1024px; --ngx-bp-xl: 1280px; --ngx-bp-2xl: 1536px; /* Mobile-specific tokens (v1.3) */ --ngx-touch-target-min: 44px; /* WCAG 2.5.5 — alvo mínimo de toque */ --ngx-touch-target-cozy: 48px; /* Material Design recommendation */ --ngx-mobile-page-padding: var(--ngx-space-4); /* 16px lateral em mobile */ --ngx-mobile-section-gap: var(--ngx-space-6); /* 24px entre seções */ --ngx-mobile-bottomnav-height: 64px; --ngx-mobile-topbar-height: 56px; --ngx-mobile-fab-size: 56px; --ngx-mobile-safe-bottom: env(safe-area-inset-bottom, 0); --ngx-mobile-safe-top: env(safe-area-inset-top, 0); } /* ========================================================================== 2. SEMÂNTICOS — LIGHT MODE Componentes consomem APENAS estes tokens. ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; /* Backgrounds */ --ngx-bg-canvas: var(--surface-page); --ngx-bg-surface: var(--surface-card); --ngx-bg-surface-raised: var(--surface-card); --ngx-bg-surface-sunken: var(--surface-inset); --ngx-bg-overlay: rgba(0, 0, 0, 0.50); --ngx-bg-hover: var(--ngx-neutral-100); --ngx-bg-selected: var(--ngx-orange-50); --ngx-bg-selected-strong: var(--ngx-orange-100); /* Text */ --ngx-text-primary: var(--ngx-neutral-900); --ngx-text-secondary: var(--ngx-neutral-700); --ngx-text-tertiary: var(--ngx-neutral-500); --ngx-text-disabled: var(--ngx-neutral-400); --ngx-text-inverse: var(--ngx-neutral-0); --ngx-text-brand: var(--ngx-orange-600); --ngx-text-brand-strong: var(--ngx-orange-700); /* Borders */ --ngx-border-subtle: var(--ngx-neutral-200); --ngx-border-default: var(--ngx-neutral-300); --ngx-border-strong: var(--ngx-neutral-400); --ngx-border-brand: var(--ngx-orange-500); --ngx-border-brand-subtle: var(--ngx-orange-200); /* Interactive primary (cor da marca) */ --ngx-interactive-primary: var(--ngx-orange-500); --ngx-interactive-primary-hover: var(--ngx-orange-600); --ngx-interactive-primary-active: var(--ngx-orange-700); --ngx-interactive-primary-disabled: var(--ngx-orange-300); --ngx-interactive-on-primary: var(--ngx-neutral-0); /* Interactive secondary (neutro) */ --ngx-interactive-secondary: var(--ngx-neutral-100); --ngx-interactive-secondary-hover: var(--ngx-neutral-200); --ngx-interactive-secondary-active: var(--ngx-neutral-300); --ngx-interactive-secondary-disabled: var(--ngx-neutral-100); --ngx-interactive-on-secondary: var(--ngx-neutral-900); /* Interactive ghost (transparent) */ --ngx-interactive-ghost-hover: var(--ngx-neutral-100); --ngx-interactive-ghost-active: var(--ngx-neutral-200); /* Interactive danger */ --ngx-interactive-danger: var(--ngx-danger-600); --ngx-interactive-danger-hover: var(--ngx-danger-700); --ngx-interactive-danger-active: var(--ngx-danger-700); --ngx-interactive-on-danger: var(--ngx-neutral-0); /* Focus */ --ngx-focus-ring-color: var(--ngx-orange-500); --ngx-focus-ring-shadow: 0 0 0 3px rgba(247, 149, 32, 0.30); /* Feedback */ --ngx-feedback-success: var(--ngx-success-600); --ngx-feedback-success-bg: var(--ngx-success-50); --ngx-feedback-warning: var(--ngx-warning-600); --ngx-feedback-warning-bg: var(--ngx-warning-50); --ngx-feedback-danger: var(--ngx-danger-600); --ngx-feedback-danger-bg: var(--ngx-danger-50); --ngx-feedback-info: var(--ngx-info-600); --ngx-feedback-info-bg: var(--ngx-info-50); /* Shadows */ --ngx-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --ngx-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06); --ngx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --ngx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.06); --ngx-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.05); --ngx-shadow-focus: var(--ngx-focus-ring-shadow); /* Status pills (cores de prioridade/status comuns aos 3 sistemas) */ --ngx-status-todo-bg: var(--ngx-neutral-100); --ngx-status-todo-fg: var(--ngx-neutral-700); --ngx-status-doing-bg: var(--ngx-info-50); --ngx-status-doing-fg: var(--ngx-info-700); --ngx-status-review-bg: rgba(251, 176, 66, 0.15); --ngx-status-review-fg: var(--ngx-orange-700); --ngx-status-done-bg: var(--ngx-success-50); --ngx-status-done-fg: var(--ngx-success-700); --ngx-status-blocked-bg: var(--ngx-danger-50); --ngx-status-blocked-fg: var(--ngx-danger-700); --ngx-priority-low-bg: var(--ngx-neutral-100); --ngx-priority-low-fg: var(--ngx-neutral-700); --ngx-priority-medium-bg: var(--ngx-info-50); --ngx-priority-medium-fg: var(--ngx-info-700); --ngx-priority-high-bg: var(--ngx-warning-50); --ngx-priority-high-fg: var(--ngx-warning-700); --ngx-priority-urgent-bg: var(--ngx-danger-50); --ngx-priority-urgent-fg: var(--ngx-danger-700); /* ───────────────────────────────────────────────────── LIQUID GLASS — superfícies translúcidas (light mode) Use estes tokens nas .glass-* classes. ───────────────────────────────────────────────────── */ /* Glass surfaces (background com alpha) — v1.1.1 cards mais sólidos */ --ngx-glass-bg-thin: rgba(255, 255, 255, 0.78); /* sidebar, header sticky */ --ngx-glass-bg-regular: rgba(255, 255, 255, 0.92); /* padrão — cards, modais */ --ngx-glass-bg-thick: rgba(255, 255, 255, 0.97); /* praticamente sólido */ --ngx-glass-bg-tinted: rgba(247, 149, 32, 0.10); /* glass com tom da marca */ /* Glass borders (inner highlight + outline) */ --ngx-glass-border: rgba(255, 255, 255, 0.50); --ngx-glass-border-strong: rgba(255, 255, 255, 0.70); --ngx-glass-outline: rgba(0, 0, 0, 0.06); /* outline externo sutil */ /* Glass shadows — soft & layered (replicam profundidade Apple) */ --ngx-glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06); --ngx-glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5) inset; --ngx-glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset; --ngx-glass-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.08), 0 40px 80px rgba(0, 0, 0, 0.16), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } /* ========================================================================== 3. SEMÂNTICOS — DARK MODE ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* Backgrounds */ --ngx-bg-canvas: var(--ngx-neutral-950); --ngx-bg-surface: var(--ngx-neutral-900); --ngx-bg-surface-raised: var(--ngx-neutral-800); --ngx-bg-surface-sunken: var(--ngx-neutral-1000); --ngx-bg-overlay: rgba(0, 0, 0, 0.70); --ngx-bg-hover: var(--ngx-neutral-800); --ngx-bg-selected: rgba(251, 176, 66, 0.10); --ngx-bg-selected-strong: rgba(251, 176, 66, 0.18); /* Text */ --ngx-text-primary: var(--ngx-neutral-50); --ngx-text-secondary: var(--ngx-neutral-300); --ngx-text-tertiary: var(--ngx-neutral-400); --ngx-text-disabled: var(--ngx-neutral-600); --ngx-text-inverse: var(--ngx-neutral-1000); --ngx-text-brand: var(--ngx-orange-400); --ngx-text-brand-strong: var(--ngx-orange-300); /* Borders */ --ngx-border-subtle: var(--ngx-neutral-800); --ngx-border-default: var(--ngx-neutral-700); --ngx-border-strong: var(--ngx-neutral-600); --ngx-border-brand: var(--ngx-orange-400); --ngx-border-brand-subtle: rgba(251, 176, 66, 0.30); /* Interactive primary */ --ngx-interactive-primary: var(--ngx-orange-400); --ngx-interactive-primary-hover: var(--ngx-orange-300); --ngx-interactive-primary-active: var(--ngx-orange-500); --ngx-interactive-primary-disabled: rgba(251, 176, 66, 0.30); --ngx-interactive-on-primary: var(--ngx-neutral-1000); /* Interactive secondary */ --ngx-interactive-secondary: var(--ngx-neutral-800); --ngx-interactive-secondary-hover: var(--ngx-neutral-700); --ngx-interactive-secondary-active: var(--ngx-neutral-600); --ngx-interactive-secondary-disabled: var(--ngx-neutral-800); --ngx-interactive-on-secondary: var(--ngx-neutral-50); /* Interactive ghost */ --ngx-interactive-ghost-hover: var(--ngx-neutral-800); --ngx-interactive-ghost-active: var(--ngx-neutral-700); /* Interactive danger */ --ngx-interactive-danger: var(--ngx-danger-500); --ngx-interactive-danger-hover: var(--ngx-danger-600); --ngx-interactive-danger-active: var(--ngx-danger-700); --ngx-interactive-on-danger: var(--ngx-neutral-1000); /* Focus */ --ngx-focus-ring-color: var(--ngx-orange-400); --ngx-focus-ring-shadow: 0 0 0 3px rgba(251, 176, 66, 0.35); /* Feedback */ --ngx-feedback-success: var(--ngx-success-500); --ngx-feedback-success-bg: rgba(16, 185, 129, 0.12); --ngx-feedback-warning: var(--ngx-warning-500); --ngx-feedback-warning-bg: rgba(245, 158, 11, 0.12); --ngx-feedback-danger: var(--ngx-danger-500); --ngx-feedback-danger-bg: rgba(239, 68, 68, 0.12); --ngx-feedback-info: var(--ngx-info-500); --ngx-feedback-info-bg: rgba(59, 130, 246, 0.12); /* Shadows */ --ngx-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40); --ngx-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.50); --ngx-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55); --ngx-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.60); --ngx-shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.65); --ngx-shadow-focus: var(--ngx-focus-ring-shadow); /* Status pills */ --ngx-status-todo-bg: rgba(161, 161, 170, 0.15); --ngx-status-todo-fg: var(--ngx-neutral-300); --ngx-status-doing-bg: rgba(59, 130, 246, 0.18); --ngx-status-doing-fg: #93C5FD; --ngx-status-review-bg: rgba(251, 176, 66, 0.18); --ngx-status-review-fg: var(--ngx-orange-300); --ngx-status-done-bg: rgba(16, 185, 129, 0.15); --ngx-status-done-fg: #6EE7B7; --ngx-status-blocked-bg: rgba(239, 68, 68, 0.18); --ngx-status-blocked-fg: #FCA5A5; --ngx-priority-low-bg: rgba(161, 161, 170, 0.15); --ngx-priority-low-fg: var(--ngx-neutral-300); --ngx-priority-medium-bg: rgba(59, 130, 246, 0.18); --ngx-priority-medium-fg: #93C5FD; --ngx-priority-high-bg: rgba(245, 158, 11, 0.18); --ngx-priority-high-fg: #FCD34D; --ngx-priority-urgent-bg: rgba(239, 68, 68, 0.18); --ngx-priority-urgent-fg: #FCA5A5; /* ───────────────────────────────────────────────────── LIQUID GLASS — superfícies translúcidas (dark mode) ───────────────────────────────────────────────────── */ --ngx-glass-bg-thin: rgba(26, 26, 28, 0.78); --ngx-glass-bg-regular: rgba(26, 26, 28, 0.92); --ngx-glass-bg-thick: rgba(26, 26, 28, 0.97); --ngx-glass-bg-tinted: rgba(251, 176, 66, 0.12); --ngx-glass-border: rgba(255, 255, 255, 0.10); --ngx-glass-border-strong: rgba(255, 255, 255, 0.18); --ngx-glass-outline: rgba(255, 255, 255, 0.04); --ngx-glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.40); --ngx-glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.50), 0 1px 0 rgba(255, 255, 255, 0.06) inset; --ngx-glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.40), 0 24px 48px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.08) inset; --ngx-glass-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.45), 0 40px 80px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.10) inset; } /* ========================================================================== 4. AUTO DARK MODE (quando user não escolheu) ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; /* Re-aplica todos os tokens dark — duplicado pra que o seletor :not seja específico */ --ngx-bg-canvas: var(--ngx-neutral-950); --ngx-bg-surface: var(--ngx-neutral-900); --ngx-bg-surface-raised: var(--ngx-neutral-800); --ngx-bg-surface-sunken: var(--ngx-neutral-1000); --ngx-bg-overlay: rgba(0, 0, 0, 0.70); --ngx-bg-hover: var(--ngx-neutral-800); --ngx-bg-selected: rgba(251, 176, 66, 0.10); --ngx-bg-selected-strong: rgba(251, 176, 66, 0.18); --ngx-text-primary: var(--ngx-neutral-50); --ngx-text-secondary: var(--ngx-neutral-300); --ngx-text-tertiary: var(--ngx-neutral-400); --ngx-text-disabled: var(--ngx-neutral-600); --ngx-text-inverse: var(--ngx-neutral-1000); --ngx-text-brand: var(--ngx-orange-400); --ngx-text-brand-strong: var(--ngx-orange-300); --ngx-border-subtle: var(--ngx-neutral-800); --ngx-border-default: var(--ngx-neutral-700); --ngx-border-strong: var(--ngx-neutral-600); --ngx-border-brand: var(--ngx-orange-400); --ngx-border-brand-subtle: rgba(251, 176, 66, 0.30); --ngx-interactive-primary: var(--ngx-orange-400); --ngx-interactive-primary-hover: var(--ngx-orange-300); --ngx-interactive-primary-active: var(--ngx-orange-500); --ngx-interactive-primary-disabled: rgba(251, 176, 66, 0.30); --ngx-interactive-on-primary: var(--ngx-neutral-1000); --ngx-focus-ring-color: var(--ngx-orange-400); --ngx-focus-ring-shadow: 0 0 0 3px rgba(251, 176, 66, 0.35); } } /* ========================================================================== 5. RESET MÍNIMO + APP DEFAULTS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--ngx-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--ngx-bg-canvas); color: var(--ngx-text-primary); font-family: var(--ngx-font-body); font-size: var(--ngx-text-sm); line-height: 1.43; transition: background-color var(--ngx-duration-base) var(--ngx-ease-out), color var(--ngx-duration-base) var(--ngx-ease-out); } :focus-visible { outline: 2px solid var(--ngx-focus-ring-color); outline-offset: 2px; border-radius: var(--ngx-radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 6. LIQUID GLASS — utilities (v1.1) -------------------------------------------------------------------------- Use estas classes em superfícies que devem ter o efeito de "vidro" (sidebar, header sticky, cards principais, modais, popovers). Combine com `radius-3xl` ou `radius-4xl` pra fechar o look. ========================================================================== */ .glass-thin, .glass, .glass-thick, .glass-tinted { backdrop-filter: blur(var(--ngx-blur-md)) saturate(var(--ngx-saturate-glass)); border: 1px solid var(--ngx-glass-border); box-shadow: var(--ngx-glass-shadow-md); transition: background-color var(--ngx-duration-base) var(--ngx-ease-out), backdrop-filter var(--ngx-duration-base) var(--ngx-ease-out), box-shadow var(--ngx-duration-base) var(--ngx-ease-out); } .glass-thin { background-color: var(--ngx-glass-bg-thin); backdrop-filter: blur(var(--ngx-blur-sm)) saturate(var(--ngx-saturate-glass)); box-shadow: var(--ngx-glass-shadow-sm); } .glass { background-color: var(--ngx-glass-bg-regular); } .glass-thick { background-color: var(--ngx-glass-bg-thick); backdrop-filter: blur(var(--ngx-blur-lg)) saturate(var(--ngx-saturate-glass)); box-shadow: var(--ngx-glass-shadow-lg); } .glass-tinted { background-color: var(--ngx-glass-bg-tinted); border-color: var(--ngx-border-brand-subtle); } /* Modificador de elevação */ .glass-raised { box-shadow: var(--ngx-glass-shadow-lg); } .glass-floating { box-shadow: var(--ngx-glass-shadow-xl); } /* Fallback pra navegadores sem backdrop-filter */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-thin { background-color: var(--ngx-bg-surface); } .glass { background-color: var(--ngx-bg-surface); } .glass-thick { background-color: var(--ngx-bg-surface-raised); } .glass-tinted { background-color: var(--ngx-bg-selected); } } /* Em dark mode, o saturate excessivo deixa cores estouradas — reduzir */ :root[data-theme="dark"] .glass-thin, :root[data-theme="dark"] .glass, :root[data-theme="dark"] .glass-thick, :root[data-theme="dark"] .glass-tinted { backdrop-filter: blur(var(--ngx-blur-md)) saturate(140%); } /* Ajustes pra evitar artefato de blur em containers sticky/fixed */ .glass, .glass-thin, .glass-thick, .glass-tinted { isolation: isolate; } /* ========================================================================== 7. MOBILE / RESPONSIVE — utilities (v1.3) -------------------------------------------------------------------------- Helpers pra construir layouts adaptativos sem depender de framework. ========================================================================== */ /* Show/hide por breakpoint */ .hide-mobile { /* default visible */ } .hide-tablet { /* default visible */ } .hide-desktop { /* default visible */ } .show-mobile { display: none !important; } .show-tablet { display: none !important; } @media (max-width: 639.98px) { .hide-mobile { display: none !important; } .show-mobile { display: revert !important; } } @media (min-width: 640px) and (max-width: 1023.98px) { .hide-tablet { display: none !important; } .show-tablet { display: revert !important; } } @media (min-width: 1024px) { .hide-desktop { display: none !important; } } /* Touch target — sempre 44x44 mínimo em mobile */ @media (max-width: 767.98px) { .btn--sm, .btn--md { min-height: var(--ngx-touch-target-min); } .btn--icon-only.btn--sm, .btn--icon-only.btn--md { min-width: var(--ngx-touch-target-min); } .input--sm, .input--md { min-height: var(--ngx-touch-target-min); } .select--sm, .select--md { min-height: var(--ngx-touch-target-min); } } /* Safe area insets (iOS notch/home indicator) */ .safe-area-bottom { padding-bottom: var(--ngx-mobile-safe-bottom); } .safe-area-top { padding-top: var(--ngx-mobile-safe-top); } .safe-area-y { padding-top: var(--ngx-mobile-safe-top); padding-bottom: var(--ngx-mobile-safe-bottom); } /* Stack horizontal vira vertical em mobile */ @media (max-width: 639.98px) { .stack--horizontal-stack-mobile { flex-direction: column !important; align-items: stretch !important; } } /* Grid responsivo automático */ .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--ngx-space-4); } /* Tabela com scroll horizontal em mobile */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { min-width: 600px; } /* Esconde scroll bonito em mobile */ @media (max-width: 767.98px) { .table-scroll { scrollbar-width: thin; } .table-scroll::-webkit-scrollbar { height: 4px; } .table-scroll::-webkit-scrollbar-thumb { background: var(--ngx-border-default); border-radius: 999px; } } /* Text scale — type ligeiramente menor em mobile */ @media (max-width: 639.98px) { :root { --ngx-text-display: 2.25rem; /* 48 → 36 */ --ngx-text-4xl: 1.875rem; /* 36 → 30 */ --ngx-text-3xl: 1.5rem; /* 30 → 24 */ } } /* Padding lateral padrão em mobile */ @media (max-width: 767.98px) { .container, .container--sm, .container--md, .container--lg, .container--xl, .container--2xl { padding-inline: var(--ngx-mobile-page-padding); } } /* ========================================================================== 8. PADRÕES MOBILE — Bottom nav, FAB, Pull-to-refresh hint ========================================================================== */ /* Bottom navigation bar (mobile-only) */ .bottomnav { display: none; } @media (max-width: 767.98px) { .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--ngx-mobile-bottomnav-height) + var(--ngx-mobile-safe-bottom)); padding-bottom: var(--ngx-mobile-safe-bottom); background: var(--ngx-glass-bg-thick); backdrop-filter: blur(var(--ngx-blur-md)) saturate(var(--ngx-saturate-glass)); border-top: 1px solid var(--ngx-border-subtle); display: flex; align-items: stretch; justify-content: space-around; z-index: var(--ngx-z-sticky); } } .bottomnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--ngx-space-1); background: none; border: none; color: var(--ngx-text-tertiary); font-size: 10px; font-weight: var(--ngx-font-medium); text-decoration: none; cursor: pointer; min-height: var(--ngx-touch-target-min); } .bottomnav__item-icon { font-size: 22px; line-height: 1; } .bottomnav__item--active { color: var(--ngx-text-brand); } .bottomnav__item--active .bottomnav__item-icon { color: var(--ngx-text-brand); } /* FAB (floating action button) */ .fab { position: fixed; bottom: calc(var(--ngx-mobile-bottomnav-height) + var(--ngx-space-4) + var(--ngx-mobile-safe-bottom)); right: var(--ngx-space-4); width: var(--ngx-mobile-fab-size); height: var(--ngx-mobile-fab-size); border-radius: 50%; background: var(--ngx-interactive-primary); color: var(--ngx-interactive-on-primary); border: none; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 12px rgba(247, 149, 32, 0.40), 0 8px 24px rgba(0,0,0,0.15); z-index: var(--ngx-z-raised); cursor: pointer; transition: transform var(--ngx-duration-fast) var(--ngx-ease-out), box-shadow var(--ngx-duration-fast) var(--ngx-ease-out); } .fab:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(247, 149, 32, 0.50), 0 12px 32px rgba(0,0,0,0.20); } .fab:active { transform: scale(0.95); } /* FAB extended (com label) */ .fab--extended { width: auto; padding: 0 var(--ngx-space-5); border-radius: var(--ngx-radius-full); gap: var(--ngx-space-2); font-size: var(--ngx-text-sm); font-weight: var(--ngx-font-semibold); } /* Hide FAB em desktop por padrão */ @media (min-width: 768px) { .fab { display: none; } } /* ========================================================================== 9. SHELL-BG — background ambiente NGX (v1.4.3) -------------------------------------------------------------------------- Aplica gradients sutis em tons NGX (laranja brand) atrás do app shell. Necessário pra que `.glass-thin / .glass / .glass-thick` mostrem o efeito de blur de verdade — sem algo colorido pra desfocar, glass fica inerte. Aplique no ou no wrapper do app shell. NÃO use em telas de leitura intensa (tabelas densas, formulários longos) — distrai. ========================================================================== */ .shell-bg { position: relative; background-color: var(--ngx-bg-canvas); isolation: isolate; } /* Camada de gradients ambiente — fica atrás de tudo via z-index negativo */ .shell-bg::before { content: ''; position: fixed; /* fixed pra acompanhar scroll sem repintar */ inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 18% 22%, rgba(247, 149, 32, 0.22) 0%, transparent 45%), radial-gradient(circle at 82% 28%, rgba(251, 176, 66, 0.18) 0%, transparent 50%), radial-gradient(circle at 28% 88%, rgba(255, 157, 111, 0.15) 0%, transparent 45%), radial-gradient(circle at 78% 78%, rgba(247, 149, 32, 0.12) 0%, transparent 50%); } /* Dark mode — gradients mais saturados, fundo neutral-950 */ :root[data-theme="dark"] .shell-bg::before { background: radial-gradient(circle at 18% 22%, rgba(251, 176, 66, 0.20) 0%, transparent 45%), radial-gradient(circle at 82% 28%, rgba(247, 149, 32, 0.18) 0%, transparent 50%), radial-gradient(circle at 28% 88%, rgba(255, 157, 111, 0.15) 0%, transparent 45%), radial-gradient(circle at 78% 78%, rgba(107, 91, 255, 0.18) 0%, transparent 50%); } /* Variantes de intensidade */ .shell-bg--subtle::before { /* mais sutil — pra apps focados em conteúdo */ opacity: 0.5; } .shell-bg--vivid::before { /* mais saturado — pra dashboards / hero pages */ opacity: 1.2; } /* Quando user prefere reduzir movimento/distração, esconde o gradient */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .shell-bg::before { display: none; } } /*!***************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/ngx-design-system/ds-fonts.css (1) ***! \***************************************************************************************************************************************************************************************************************************************/ /* NGX Design System — webfonts Archivo: UI + display (grotesco industrial, envelhece bem) JetBrains Mono: números, dados tabulares, código (SQL editor, logs) */ /*!************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/ngx-design-system/ds-colors.css ***! \************************************************************************************************************************************************************************************************************************************/ /* ============================================================ NGX Design System — Cores Tema escuro é o PADRÃO (:root). Tema claro via [data-theme="light"]. A sidebar permanece escura nos dois temas (essência NGX). ============================================================ */ :root { color-scheme: dark; /* ---------- Primitivas: marca ---------- */ --orange-300: #FFC069; --orange-400: #FCA94A; --orange-500: #F79520; /* laranja NGX — cor primária oficial */ --orange-600: #DE7E0E; --orange-700: #B96608; --orange-a08: rgba(247, 149, 32, 0.08); --orange-a14: rgba(247, 149, 32, 0.14); --orange-a24: rgba(247, 149, 32, 0.24); --ink-500: #3E3E42; /* grafite do logotipo */ /* ---------- Primitivas: neutros ---------- */ --gray-950: #0A0A0C; --gray-900: #121214; --gray-850: #18181B; --gray-800: #1F1F23; --gray-750: #26262B; --gray-700: #2E2E34; --gray-600: #45454D; --gray-500: #6C6C76; --gray-400: #8E8E99; --gray-300: #ADADB8; --gray-200: #D2D2DA; --gray-100: #ECECF1; --gray-50: #F7F7F9; --white: #FFFFFF; /* ---------- Primitivas: semânticas ---------- */ --green-400: #3FCF8E; --green-500: #29A868; --green-600: #1F8A55; --green-a12: rgba(63, 207, 142, 0.12); --red-400: #F2696D; --red-500: #E5484D; --red-600: #C93A3F; --red-a12: rgba(242, 105, 109, 0.12); --yellow-400: #F5C951; --yellow-500: #EDB431; --yellow-a12: rgba(245, 201, 81, 0.12); --blue-400: #6FB4F5; --blue-500: #4C9EEB; --blue-a12: rgba(111, 180, 245, 0.12); /* ---------- Data-viz (gráficos, na ordem) ---------- */ --chart-1: #F79520; --chart-2: #6FB4F5; --chart-3: #3FCF8E; --chart-4: #A78BFA; --chart-5: #2DD4BF; --chart-6: #8E8E99; /* ---------- Aliases semânticos (tema escuro) ---------- */ --brand: var(--orange-500); --brand-hover: var(--orange-400); --brand-active: var(--orange-600); --brand-soft: var(--orange-a14); --text-on-brand: #1C1207; /* texto escuro sobre laranja, como no botão Criar */ --surface-page: var(--gray-900); --surface-sidebar: var(--gray-950); /* escura nos DOIS temas */ --surface-card: var(--gray-850); --surface-raised: var(--gray-800); --surface-overlay: var(--gray-800); --surface-hover: rgba(255, 255, 255, 0.045); --surface-active: rgba(255, 255, 255, 0.08); --surface-input: var(--gray-900); --surface-inset: var(--gray-950); --border-subtle: rgba(255, 255, 255, 0.07); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.18); --border-input: rgba(255, 255, 255, 0.13); --text-primary: #F4F4F6; --text-secondary: #A6A6B0; --text-muted: #71717B; --text-disabled: #55555E; --text-inverse: #17171A; /* Sidebar (constante entre temas) */ --sidebar-text: #B9B9C2; --sidebar-text-active: var(--orange-400); --sidebar-item-active-bg: var(--orange-a14); --sidebar-border: rgba(255, 255, 255, 0.07); /* Financeiro */ --money-in: var(--green-400); --money-in-soft: var(--green-a12); --money-out: var(--red-400); --money-out-soft: var(--red-a12); --success: var(--green-400); --success-soft: var(--green-a12); --danger: var(--red-400); --danger-strong: var(--red-500); --danger-soft: var(--red-a12); --warning: var(--yellow-400); --warning-soft: var(--yellow-a12); --info: var(--blue-400); --info-soft: var(--blue-a12); --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--orange-a24), 0 0 0 4.5px var(--orange-500); --scrim: rgba(6, 6, 8, 0.62); } /* ============================================================ Tema claro — sobrepõe apenas os aliases semânticos ============================================================ */ [data-theme="light"] { color-scheme: light; --brand: var(--orange-500); --brand-hover: var(--orange-600); --brand-active: var(--orange-700); --brand-soft: var(--orange-a08); --text-on-brand: #1C1207; --surface-page: #F6EEE3; --surface-card: #FEFBF7; --surface-raised: #F0E8D5; --surface-overlay: #FEFBF7; --surface-hover: rgba(18, 18, 20, 0.04); --surface-active: rgba(18, 18, 20, 0.08); --surface-input: #FEFBF7; --surface-inset: #EBE0D0; --border-subtle: rgba(18, 18, 20, 0.09); --border-default: rgba(18, 18, 20, 0.11); --border-strong: rgba(18, 18, 20, 0.2); --border-input: rgba(18, 18, 20, 0.16); --text-primary: #1B1B1F; --text-secondary: #5A5A64; --text-muted: #83838D; --text-disabled: #ABABB4; --text-inverse: #F4F4F6; --money-in: var(--green-600); --money-in-soft: rgba(41, 168, 104, 0.1); --money-out: var(--red-600); --money-out-soft: rgba(229, 72, 77, 0.08); --success: var(--green-600); --success-soft: rgba(41, 168, 104, 0.1); --danger: var(--red-600); --danger-strong: var(--red-500); --danger-soft: rgba(229, 72, 77, 0.08); --warning: #B7830A; --warning-soft: rgba(237, 180, 49, 0.14); --info: #2E7CC7; --info-soft: rgba(76, 158, 235, 0.1); --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--orange-a24), 0 0 0 4.5px var(--orange-500); --scrim: rgba(20, 20, 24, 0.4); } /*!****************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/ngx-design-system/ds-typography.css ***! \****************************************************************************************************************************************************************************************************************************************/ /* ============================================================ NGX Design System — Tipografia Archivo: UI e display. JetBrains Mono: valores monetários, dados tabulares, código. Números de dinheiro SEMPRE em mono. ============================================================ */ :root { --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* Escala (px) */ --text-2xs: 10.5px; /* selos, versão do build */ --text-xs: 11.5px; /* micro-labels UPPERCASE, headers de coluna */ --text-sm: 12.5px; /* meta, células secundárias, badges */ --text-base: 14px; /* corpo padrão da UI */ --text-md: 16px; /* ênfase, inputs grandes */ --text-lg: 18px; /* título de card */ --text-xl: 22px; /* título de página */ --text-2xl: 28px; /* números de destaque (stat) */ --text-3xl: 36px; /* display, relatórios */ --text-4xl: 52px; /* slides */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Micro-labels uppercase (ENTRADAS, SAÍDAS, headers de coluna) */ --tracking-caps: 0.07em; --tracking-wide: 0.045em; /* Números tabulares para o mono */ --numeric-features: 'zero' 0, 'tnum' 1; } /*!*************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/ngx-design-system/ds-spacing.css ***! \*************************************************************************************************************************************************************************************************************************************/ /* ============================================================ NGX Design System — Espaçamento, raios, sombras, densidade, motion ============================================================ */ :root { /* Espaçamento (base 4) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Raios — pills para badges, cantos generosos em cards */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; /* botões, inputs */ --radius-lg: 14px; /* cards */ --radius-xl: 18px; /* modais, painéis grandes */ --radius-pill: 999px; /* Bordas */ --border-w: 1px; /* Sombras — no escuro, elevação vem de borda + leve sombra */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22); --shadow-raised: 0 4px 14px rgba(0, 0, 0, 0.32); --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-brand: 0 4px 16px rgba(247, 149, 32, 0.25); /* Densidade — padrão "média" (a do produto atual) */ --control-h-sm: 30px; --control-h: 36px; --control-h-lg: 42px; --row-h: 46px; /* linha de tabela */ --cell-pad-x: 14px; --input-pad-x: 12px; --sidebar-w: 252px; --topbar-h: 60px; /* Motion — rápido, sem exageros */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; /* Z-index */ --z-sticky: 30; --z-overlay: 100; --z-toast: 200; --z-tooltip: 300; } /* Densidade compacta — telas de operação pesada (lançamentos, logs) */ [data-density="compact"] { --control-h-sm: 26px; --control-h: 32px; --control-h-lg: 38px; --row-h: 38px; --cell-pad-x: 10px; } /* Densidade confortável — dashboards, telas de leitura */ [data-density="comfortable"] { --control-h-sm: 34px; --control-h: 40px; --control-h-lg: 48px; --row-h: 54px; --cell-pad-x: 18px; } [data-theme="light"] { --shadow-card: 0 1px 2px rgba(18, 18, 20, 0.05), 0 2px 8px rgba(18, 18, 20, 0.04); --shadow-raised: 0 4px 14px rgba(18, 18, 20, 0.08); --shadow-overlay: 0 12px 40px rgba(18, 18, 20, 0.16), 0 2px 8px rgba(18, 18, 20, 0.08); --shadow-brand: 0 4px 16px rgba(247, 149, 32, 0.3); } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; .mat-ripple { overflow: hidden; position: relative; } .mat-ripple:not(:empty) { transform: translateZ(0); } .mat-ripple.mat-ripple-unbounded { overflow: visible; } .mat-ripple-element { position: absolute; border-radius: 50%; pointer-events: none; transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1); transform: scale3d(0, 0, 0); background-color: var(--mat-ripple-color, rgba(0, 0, 0, 0.1)); } .cdk-high-contrast-active .mat-ripple-element { display: none; } .cdk-drag-preview .mat-ripple-element, .cdk-drag-placeholder .mat-ripple-element { display: none; } .cdk-visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; outline: 0; -webkit-appearance: none; -moz-appearance: none; left: 0; } [dir=rtl] .cdk-visually-hidden { left: auto; right: 0; } .cdk-overlay-container, .cdk-global-overlay-wrapper { pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; } .cdk-overlay-container { position: fixed; z-index: 1000; } .cdk-overlay-container:empty { display: none; } .cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; } .cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing: border-box; z-index: 1000; display: flex; max-width: 100%; max-height: 100%; } .cdk-overlay-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 1; } .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 0.6; } .cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.32); } .cdk-overlay-transparent-backdrop { transition: visibility 1ms linear, opacity 1ms linear; visibility: hidden; opacity: 1; } .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing { opacity: 0; visibility: visible; } .cdk-overlay-backdrop-noop-animation { transition: none; } .cdk-overlay-connected-position-bounding-box { position: absolute; z-index: 1000; display: flex; flex-direction: column; min-width: 1px; min-height: 1px; } .cdk-global-scrollblock { position: fixed; width: 100%; overflow-y: scroll; } textarea.cdk-textarea-autosize { resize: none; } textarea.cdk-textarea-autosize-measuring { padding: 2px 0 !important; box-sizing: content-box !important; height: auto !important; overflow: hidden !important; } textarea.cdk-textarea-autosize-measuring-firefox { padding: 2px 0 !important; box-sizing: content-box !important; height: 0 !important; } @keyframes cdk-text-field-autofill-start { /*!*/ } @keyframes cdk-text-field-autofill-end { /*!*/ } .cdk-text-field-autofill-monitored:-webkit-autofill { animation: cdk-text-field-autofill-start 0s 1ms; } .cdk-text-field-autofill-monitored:not(:-webkit-autofill) { animation: cdk-text-field-autofill-end 0s 1ms; } .mat-focus-indicator { position: relative; } .mat-focus-indicator::before { top: 0; left: 0; right: 0; bottom: 0; position: absolute; box-sizing: border-box; pointer-events: none; display: var(--mat-focus-indicator-display, none); border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent); border-radius: var(--mat-focus-indicator-border-radius, 4px); } .mat-focus-indicator:focus::before { content: ""; } .cdk-high-contrast-active { --mat-focus-indicator-display: block; } .mat-mdc-focus-indicator { position: relative; } .mat-mdc-focus-indicator::before { top: 0; left: 0; right: 0; bottom: 0; position: absolute; box-sizing: border-box; pointer-events: none; display: var(--mat-mdc-focus-indicator-display, none); border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent); border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px); } .mat-mdc-focus-indicator:focus::before { content: ""; } .cdk-high-contrast-active { --mat-mdc-focus-indicator-display: block; } .mat-app-background { background-color: var(--mat-app-background-color, var(--mat-app-background, transparent)); color: var(--mat-app-text-color, var(--mat-app-on-background, inherit)); } .mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 { box-shadow: var(--mat-app-elevation-shadow-level-0, none); } .mat-elevation-z1, .mat-mdc-elevation-specific.mat-elevation-z1 { box-shadow: var(--mat-app-elevation-shadow-level-1, none); } .mat-elevation-z2, .mat-mdc-elevation-specific.mat-elevation-z2 { box-shadow: var(--mat-app-elevation-shadow-level-2, none); } .mat-elevation-z3, .mat-mdc-elevation-specific.mat-elevation-z3 { box-shadow: var(--mat-app-elevation-shadow-level-3, none); } .mat-elevation-z4, .mat-mdc-elevation-specific.mat-elevation-z4 { box-shadow: var(--mat-app-elevation-shadow-level-4, none); } .mat-elevation-z5, .mat-mdc-elevation-specific.mat-elevation-z5 { box-shadow: var(--mat-app-elevation-shadow-level-5, none); } .mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 { box-shadow: var(--mat-app-elevation-shadow-level-6, none); } .mat-elevation-z7, .mat-mdc-elevation-specific.mat-elevation-z7 { box-shadow: var(--mat-app-elevation-shadow-level-7, none); } .mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 { box-shadow: var(--mat-app-elevation-shadow-level-8, none); } .mat-elevation-z9, .mat-mdc-elevation-specific.mat-elevation-z9 { box-shadow: var(--mat-app-elevation-shadow-level-9, none); } .mat-elevation-z10, .mat-mdc-elevation-specific.mat-elevation-z10 { box-shadow: var(--mat-app-elevation-shadow-level-10, none); } .mat-elevation-z11, .mat-mdc-elevation-specific.mat-elevation-z11 { box-shadow: var(--mat-app-elevation-shadow-level-11, none); } .mat-elevation-z12, .mat-mdc-elevation-specific.mat-elevation-z12 { box-shadow: var(--mat-app-elevation-shadow-level-12, none); } .mat-elevation-z13, .mat-mdc-elevation-specific.mat-elevation-z13 { box-shadow: var(--mat-app-elevation-shadow-level-13, none); } .mat-elevation-z14, .mat-mdc-elevation-specific.mat-elevation-z14 { box-shadow: var(--mat-app-elevation-shadow-level-14, none); } .mat-elevation-z15, .mat-mdc-elevation-specific.mat-elevation-z15 { box-shadow: var(--mat-app-elevation-shadow-level-15, none); } .mat-elevation-z16, .mat-mdc-elevation-specific.mat-elevation-z16 { box-shadow: var(--mat-app-elevation-shadow-level-16, none); } .mat-elevation-z17, .mat-mdc-elevation-specific.mat-elevation-z17 { box-shadow: var(--mat-app-elevation-shadow-level-17, none); } .mat-elevation-z18, .mat-mdc-elevation-specific.mat-elevation-z18 { box-shadow: var(--mat-app-elevation-shadow-level-18, none); } .mat-elevation-z19, .mat-mdc-elevation-specific.mat-elevation-z19 { box-shadow: var(--mat-app-elevation-shadow-level-19, none); } .mat-elevation-z20, .mat-mdc-elevation-specific.mat-elevation-z20 { box-shadow: var(--mat-app-elevation-shadow-level-20, none); } .mat-elevation-z21, .mat-mdc-elevation-specific.mat-elevation-z21 { box-shadow: var(--mat-app-elevation-shadow-level-21, none); } .mat-elevation-z22, .mat-mdc-elevation-specific.mat-elevation-z22 { box-shadow: var(--mat-app-elevation-shadow-level-22, none); } .mat-elevation-z23, .mat-mdc-elevation-specific.mat-elevation-z23 { box-shadow: var(--mat-app-elevation-shadow-level-23, none); } .mat-elevation-z24, .mat-mdc-elevation-specific.mat-elevation-z24 { box-shadow: var(--mat-app-elevation-shadow-level-24, none); } .mat-theme-loaded-marker { display: none; } html { --mat-ripple-color: rgba(255, 255, 255, 0.1); } html { --mat-option-selected-state-label-text-color: #ffa726; --mat-option-label-text-color: white; --mat-option-hover-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.08); } .mat-accent { --mat-option-selected-state-label-text-color: #ffd54f; --mat-option-label-text-color: white; --mat-option-hover-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.08); } .mat-warn { --mat-option-selected-state-label-text-color: #f44336; --mat-option-label-text-color: white; --mat-option-hover-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.08); } html { --mat-optgroup-label-text-color: white; } .mat-primary { --mat-full-pseudo-checkbox-selected-icon-color: #ffa726; --mat-full-pseudo-checkbox-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868; --mat-minimal-pseudo-checkbox-selected-checkmark-color: #ffa726; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868; } html { --mat-full-pseudo-checkbox-selected-icon-color: #ffd54f; --mat-full-pseudo-checkbox-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868; --mat-minimal-pseudo-checkbox-selected-checkmark-color: #ffd54f; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868; } .mat-accent { --mat-full-pseudo-checkbox-selected-icon-color: #ffd54f; --mat-full-pseudo-checkbox-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868; --mat-minimal-pseudo-checkbox-selected-checkmark-color: #ffd54f; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868; } .mat-warn { --mat-full-pseudo-checkbox-selected-icon-color: #f44336; --mat-full-pseudo-checkbox-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868; --mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868; } html { --mat-app-background-color: #303030; --mat-app-text-color: white; --mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } html { --mdc-elevated-card-container-shape: 4px; --mdc-outlined-card-container-shape: 4px; --mdc-outlined-card-outline-width: 1px; } html { --mdc-elevated-card-container-color: #424242; --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mdc-outlined-card-container-color: #424242; --mdc-outlined-card-outline-color: rgba(255, 255, 255, 0.12); --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7); } html { --mdc-linear-progress-active-indicator-height: 4px; --mdc-linear-progress-track-height: 4px; --mdc-linear-progress-track-shape: 0; } .mat-mdc-progress-bar { --mdc-linear-progress-active-indicator-color: #ffa726; --mdc-linear-progress-track-color: rgba(255, 167, 38, 0.25); } .mat-mdc-progress-bar.mat-accent { --mdc-linear-progress-active-indicator-color: #ffd54f; --mdc-linear-progress-track-color: rgba(255, 213, 79, 0.25); } .mat-mdc-progress-bar.mat-warn { --mdc-linear-progress-active-indicator-color: #f44336; --mdc-linear-progress-track-color: rgba(244, 67, 54, 0.25); } html { --mdc-plain-tooltip-container-shape: 4px; --mdc-plain-tooltip-supporting-text-line-height: 16px; } html { --mdc-plain-tooltip-container-color: #616161; --mdc-plain-tooltip-supporting-text-color: #fff; } html { --mdc-filled-text-field-active-indicator-height: 1px; --mdc-filled-text-field-focus-active-indicator-height: 2px; --mdc-filled-text-field-container-shape: 4px; --mdc-outlined-text-field-outline-width: 1px; --mdc-outlined-text-field-focus-outline-width: 2px; --mdc-outlined-text-field-container-shape: 4px; } html { --mdc-filled-text-field-caret-color: #ffa726; --mdc-filled-text-field-focus-active-indicator-color: #ffa726; --mdc-filled-text-field-focus-label-text-color: rgba(255, 167, 38, 0.87); --mdc-filled-text-field-container-color: #4a4a4a; --mdc-filled-text-field-disabled-container-color: #464646; --mdc-filled-text-field-label-text-color: rgba(255, 255, 255, 0.6); --mdc-filled-text-field-hover-label-text-color: rgba(255, 255, 255, 0.6); --mdc-filled-text-field-disabled-label-text-color: rgba(255, 255, 255, 0.38); --mdc-filled-text-field-input-text-color: rgba(255, 255, 255, 0.87); --mdc-filled-text-field-disabled-input-text-color: rgba(255, 255, 255, 0.38); --mdc-filled-text-field-input-text-placeholder-color: rgba(255, 255, 255, 0.6); --mdc-filled-text-field-error-hover-label-text-color: #f44336; --mdc-filled-text-field-error-focus-label-text-color: #f44336; --mdc-filled-text-field-error-label-text-color: #f44336; --mdc-filled-text-field-error-caret-color: #f44336; --mdc-filled-text-field-active-indicator-color: rgba(255, 255, 255, 0.42); --mdc-filled-text-field-disabled-active-indicator-color: rgba(255, 255, 255, 0.06); --mdc-filled-text-field-hover-active-indicator-color: rgba(255, 255, 255, 0.87); --mdc-filled-text-field-error-active-indicator-color: #f44336; --mdc-filled-text-field-error-focus-active-indicator-color: #f44336; --mdc-filled-text-field-error-hover-active-indicator-color: #f44336; --mdc-outlined-text-field-caret-color: #ffa726; --mdc-outlined-text-field-focus-outline-color: #ffa726; --mdc-outlined-text-field-focus-label-text-color: rgba(255, 167, 38, 0.87); --mdc-outlined-text-field-label-text-color: rgba(255, 255, 255, 0.6); --mdc-outlined-text-field-hover-label-text-color: rgba(255, 255, 255, 0.6); --mdc-outlined-text-field-disabled-label-text-color: rgba(255, 255, 255, 0.38); --mdc-outlined-text-field-input-text-color: rgba(255, 255, 255, 0.87); --mdc-outlined-text-field-disabled-input-text-color: rgba(255, 255, 255, 0.38); --mdc-outlined-text-field-input-text-placeholder-color: rgba(255, 255, 255, 0.6); --mdc-outlined-text-field-error-caret-color: #f44336; --mdc-outlined-text-field-error-focus-label-text-color: #f44336; --mdc-outlined-text-field-error-label-text-color: #f44336; --mdc-outlined-text-field-error-hover-label-text-color: #f44336; --mdc-outlined-text-field-outline-color: rgba(255, 255, 255, 0.38); --mdc-outlined-text-field-disabled-outline-color: rgba(255, 255, 255, 0.06); --mdc-outlined-text-field-hover-outline-color: rgba(255, 255, 255, 0.87); --mdc-outlined-text-field-error-focus-outline-color: #f44336; --mdc-outlined-text-field-error-hover-outline-color: #f44336; --mdc-outlined-text-field-error-outline-color: #f44336; --mat-form-field-focus-select-arrow-color: rgba(255, 167, 38, 0.87); --mat-form-field-disabled-input-text-placeholder-color: rgba(255, 255, 255, 0.38); --mat-form-field-state-layer-color: rgba(255, 255, 255, 0.87); --mat-form-field-error-text-color: #f44336; --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87); --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38); --mat-form-field-leading-icon-color: unset; --mat-form-field-disabled-leading-icon-color: unset; --mat-form-field-trailing-icon-color: unset; --mat-form-field-disabled-trailing-icon-color: unset; --mat-form-field-error-focus-trailing-icon-color: unset; --mat-form-field-error-hover-trailing-icon-color: unset; --mat-form-field-error-trailing-icon-color: unset; --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.54); --mat-form-field-disabled-select-arrow-color: rgba(255, 255, 255, 0.38); --mat-form-field-hover-state-layer-opacity: 0.08; --mat-form-field-focus-state-layer-opacity: 0.24; } .mat-mdc-form-field.mat-accent { --mdc-filled-text-field-caret-color: #ffd54f; --mdc-filled-text-field-focus-active-indicator-color: #ffd54f; --mdc-filled-text-field-focus-label-text-color: rgba(255, 213, 79, 0.87); --mdc-outlined-text-field-caret-color: #ffd54f; --mdc-outlined-text-field-focus-outline-color: #ffd54f; --mdc-outlined-text-field-focus-label-text-color: rgba(255, 213, 79, 0.87); --mat-form-field-focus-select-arrow-color: rgba(255, 213, 79, 0.87); } .mat-mdc-form-field.mat-warn { --mdc-filled-text-field-caret-color: #f44336; --mdc-filled-text-field-focus-active-indicator-color: #f44336; --mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, 0.87); --mdc-outlined-text-field-caret-color: #f44336; --mdc-outlined-text-field-focus-outline-color: #f44336; --mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, 0.87); --mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, 0.87); } html { --mat-form-field-container-height: 56px; --mat-form-field-filled-label-display: block; --mat-form-field-container-vertical-padding: 16px; --mat-form-field-filled-with-label-container-padding-top: 24px; --mat-form-field-filled-with-label-container-padding-bottom: 8px; } html { --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } html { --mat-select-panel-background-color: #424242; --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, 0.87); --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, 0.38); --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.6); --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.54); --mat-select-disabled-arrow-color: rgba(255, 255, 255, 0.38); --mat-select-focused-arrow-color: rgba(255, 167, 38, 0.87); --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87); } html .mat-mdc-form-field.mat-accent { --mat-select-panel-background-color: #424242; --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, 0.87); --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, 0.38); --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.6); --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.54); --mat-select-disabled-arrow-color: rgba(255, 255, 255, 0.38); --mat-select-focused-arrow-color: rgba(255, 213, 79, 0.87); --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87); } html .mat-mdc-form-field.mat-warn { --mat-select-panel-background-color: #424242; --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, 0.87); --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, 0.38); --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.6); --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.54); --mat-select-disabled-arrow-color: rgba(255, 255, 255, 0.38); --mat-select-focused-arrow-color: rgba(244, 67, 54, 0.87); --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87); } html { --mat-select-arrow-transform: translateY(-8px); } html { --mat-autocomplete-container-shape: 4px; --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } html { --mat-autocomplete-background-color: #424242; } html { --mdc-dialog-container-shape: 4px; --mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); --mat-dialog-container-max-width: 80vw; --mat-dialog-container-small-max-width: 80vw; --mat-dialog-container-min-width: 0; --mat-dialog-actions-alignment: start; --mat-dialog-actions-padding: 8px; --mat-dialog-content-padding: 20px 24px; --mat-dialog-with-actions-content-padding: 20px 24px; --mat-dialog-headline-padding: 0 24px 9px; } html { --mdc-dialog-container-color: #424242; --mdc-dialog-subhead-color: rgba(255, 255, 255, 0.87); --mdc-dialog-supporting-text-color: rgba(255, 255, 255, 0.6); } .mat-mdc-standard-chip { --mdc-chip-container-shape-radius: 16px; --mdc-chip-with-avatar-avatar-shape-radius: 14px; --mdc-chip-with-avatar-avatar-size: 28px; --mdc-chip-with-icon-icon-size: 18px; --mdc-chip-outline-width: 0; --mdc-chip-outline-color: transparent; --mdc-chip-disabled-outline-color: transparent; --mdc-chip-focus-outline-color: transparent; --mdc-chip-hover-state-layer-opacity: 0.04; --mdc-chip-with-avatar-disabled-avatar-opacity: 1; --mdc-chip-flat-selected-outline-width: 0; --mdc-chip-selected-hover-state-layer-opacity: 0.04; --mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1; --mdc-chip-with-icon-disabled-icon-opacity: 1; --mat-chip-disabled-container-opacity: 0.4; --mat-chip-trailing-action-opacity: 0.54; --mat-chip-trailing-action-focus-opacity: 1; --mat-chip-trailing-action-state-layer-color: transparent; --mat-chip-selected-trailing-action-state-layer-color: transparent; --mat-chip-trailing-action-hover-state-layer-opacity: 0; --mat-chip-trailing-action-focus-state-layer-opacity: 0; } .mat-mdc-standard-chip { --mdc-chip-disabled-label-text-color: #fafafa; --mdc-chip-elevated-container-color: #595959; --mdc-chip-elevated-selected-container-color: #595959; --mdc-chip-elevated-disabled-container-color: #595959; --mdc-chip-flat-disabled-selected-container-color: #595959; --mdc-chip-focus-state-layer-color: white; --mdc-chip-hover-state-layer-color: white; --mdc-chip-selected-hover-state-layer-color: white; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: white; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: #fafafa; --mdc-chip-selected-label-text-color: #fafafa; --mdc-chip-with-icon-icon-color: #fafafa; --mdc-chip-with-icon-disabled-icon-color: #fafafa; --mdc-chip-with-icon-selected-icon-color: #fafafa; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #fafafa; --mdc-chip-with-trailing-icon-trailing-icon-color: #fafafa; --mat-chip-selected-disabled-trailing-icon-color: #fafafa; --mat-chip-selected-trailing-icon-color: #fafafa; } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary { --mdc-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-elevated-container-color: #ffa726; --mdc-chip-elevated-selected-container-color: #ffa726; --mdc-chip-elevated-disabled-container-color: #ffa726; --mdc-chip-flat-disabled-selected-container-color: #ffa726; --mdc-chip-focus-state-layer-color: white; --mdc-chip-hover-state-layer-color: white; --mdc-chip-selected-hover-state-layer-color: white; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: white; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-selected-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87); } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent { --mdc-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-elevated-container-color: #ffd54f; --mdc-chip-elevated-selected-container-color: #ffd54f; --mdc-chip-elevated-disabled-container-color: #ffd54f; --mdc-chip-flat-disabled-selected-container-color: #ffd54f; --mdc-chip-focus-state-layer-color: white; --mdc-chip-hover-state-layer-color: white; --mdc-chip-selected-hover-state-layer-color: white; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: white; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-selected-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87); } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn { --mdc-chip-disabled-label-text-color: white; --mdc-chip-elevated-container-color: #f44336; --mdc-chip-elevated-selected-container-color: #f44336; --mdc-chip-elevated-disabled-container-color: #f44336; --mdc-chip-flat-disabled-selected-container-color: #f44336; --mdc-chip-focus-state-layer-color: white; --mdc-chip-hover-state-layer-color: white; --mdc-chip-selected-hover-state-layer-color: white; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: white; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: white; --mdc-chip-selected-label-text-color: white; --mdc-chip-with-icon-icon-color: white; --mdc-chip-with-icon-disabled-icon-color: white; --mdc-chip-with-icon-selected-icon-color: white; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white; --mdc-chip-with-trailing-icon-trailing-icon-color: white; --mat-chip-selected-disabled-trailing-icon-color: white; --mat-chip-selected-trailing-icon-color: white; } .mat-mdc-chip.mat-mdc-standard-chip { --mdc-chip-container-height: 32px; } html { --mdc-switch-disabled-selected-icon-opacity: 0.38; --mdc-switch-disabled-track-opacity: 0.12; --mdc-switch-disabled-unselected-icon-opacity: 0.38; --mdc-switch-handle-height: 20px; --mdc-switch-handle-shape: 10px; --mdc-switch-handle-width: 20px; --mdc-switch-selected-icon-size: 18px; --mdc-switch-track-height: 14px; --mdc-switch-track-shape: 7px; --mdc-switch-track-width: 36px; --mdc-switch-unselected-icon-size: 18px; --mdc-switch-selected-focus-state-layer-opacity: 0.12; --mdc-switch-selected-hover-state-layer-opacity: 0.04; --mdc-switch-selected-pressed-state-layer-opacity: 0.1; --mdc-switch-unselected-focus-state-layer-opacity: 0.12; --mdc-switch-unselected-hover-state-layer-opacity: 0.04; --mdc-switch-unselected-pressed-state-layer-opacity: 0.1; } html .mat-mdc-slide-toggle { --mat-switch-disabled-selected-handle-opacity: 0.38; --mat-switch-disabled-unselected-handle-opacity: 0.38; --mat-switch-unselected-handle-size: 20px; --mat-switch-selected-handle-size: 20px; --mat-switch-pressed-handle-size: 20px; --mat-switch-with-icon-handle-size: 20px; --mat-switch-selected-handle-horizontal-margin: 0; --mat-switch-selected-with-icon-handle-horizontal-margin: 0; --mat-switch-selected-pressed-handle-horizontal-margin: 0; --mat-switch-unselected-handle-horizontal-margin: 0; --mat-switch-unselected-with-icon-handle-horizontal-margin: 0; --mat-switch-unselected-pressed-handle-horizontal-margin: 0; --mat-switch-visible-track-opacity: 1; --mat-switch-hidden-track-opacity: 1; --mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1); --mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1); --mat-switch-track-outline-width: 1px; --mat-switch-track-outline-color: transparent; --mat-switch-selected-track-outline-width: 1px; --mat-switch-selected-track-outline-color: transparent; --mat-switch-disabled-unselected-track-outline-width: 1px; --mat-switch-disabled-unselected-track-outline-color: transparent; } html { --mdc-switch-selected-focus-state-layer-color: #ffb74d; --mdc-switch-selected-handle-color: #ffb74d; --mdc-switch-selected-hover-state-layer-color: #ffb74d; --mdc-switch-selected-pressed-state-layer-color: #ffb74d; --mdc-switch-selected-focus-handle-color: #ffcc80; --mdc-switch-selected-hover-handle-color: #ffcc80; --mdc-switch-selected-pressed-handle-color: #ffcc80; --mdc-switch-selected-focus-track-color: #fb8c00; --mdc-switch-selected-hover-track-color: #fb8c00; --mdc-switch-selected-pressed-track-color: #fb8c00; --mdc-switch-selected-track-color: #fb8c00; --mdc-switch-disabled-selected-handle-color: #000; --mdc-switch-disabled-selected-icon-color: #212121; --mdc-switch-disabled-selected-track-color: #f5f5f5; --mdc-switch-disabled-unselected-handle-color: #000; --mdc-switch-disabled-unselected-icon-color: #212121; --mdc-switch-disabled-unselected-track-color: #f5f5f5; --mdc-switch-handle-surface-color: #fff; --mdc-switch-selected-icon-color: #212121; --mdc-switch-unselected-focus-handle-color: #fafafa; --mdc-switch-unselected-focus-state-layer-color: #f5f5f5; --mdc-switch-unselected-focus-track-color: #616161; --mdc-switch-unselected-handle-color: #9e9e9e; --mdc-switch-unselected-hover-handle-color: #fafafa; --mdc-switch-unselected-hover-state-layer-color: #f5f5f5; --mdc-switch-unselected-hover-track-color: #616161; --mdc-switch-unselected-icon-color: #212121; --mdc-switch-unselected-pressed-handle-color: #fafafa; --mdc-switch-unselected-pressed-state-layer-color: #f5f5f5; --mdc-switch-unselected-pressed-track-color: #616161; --mdc-switch-unselected-track-color: #616161; --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mdc-switch-disabled-label-text-color: rgba(255, 255, 255, 0.5); } html .mat-mdc-slide-toggle { --mat-switch-label-text-color: white; } html .mat-mdc-slide-toggle.mat-accent { --mdc-switch-selected-focus-state-layer-color: #ffd54f; --mdc-switch-selected-handle-color: #ffd54f; --mdc-switch-selected-hover-state-layer-color: #ffd54f; --mdc-switch-selected-pressed-state-layer-color: #ffd54f; --mdc-switch-selected-focus-handle-color: #ffe082; --mdc-switch-selected-hover-handle-color: #ffe082; --mdc-switch-selected-pressed-handle-color: #ffe082; --mdc-switch-selected-focus-track-color: #ffb300; --mdc-switch-selected-hover-track-color: #ffb300; --mdc-switch-selected-pressed-track-color: #ffb300; --mdc-switch-selected-track-color: #ffb300; } html .mat-mdc-slide-toggle.mat-warn { --mdc-switch-selected-focus-state-layer-color: #e57373; --mdc-switch-selected-handle-color: #e57373; --mdc-switch-selected-hover-state-layer-color: #e57373; --mdc-switch-selected-pressed-state-layer-color: #e57373; --mdc-switch-selected-focus-handle-color: #ef9a9a; --mdc-switch-selected-hover-handle-color: #ef9a9a; --mdc-switch-selected-pressed-handle-color: #ef9a9a; --mdc-switch-selected-focus-track-color: #e53935; --mdc-switch-selected-hover-track-color: #e53935; --mdc-switch-selected-pressed-track-color: #e53935; --mdc-switch-selected-track-color: #e53935; } html { --mdc-switch-state-layer-size: 40px; } html { --mdc-radio-disabled-selected-icon-opacity: 0.38; --mdc-radio-disabled-unselected-icon-opacity: 0.38; --mdc-radio-state-layer-size: 40px; } .mat-mdc-radio-button.mat-primary { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #ffa726; --mdc-radio-selected-hover-icon-color: #ffa726; --mdc-radio-selected-icon-color: #ffa726; --mdc-radio-selected-pressed-icon-color: #ffa726; --mat-radio-ripple-color: white; --mat-radio-checked-ripple-color: #ffa726; --mat-radio-disabled-label-color: rgba(255, 255, 255, 0.5); --mat-radio-label-text-color: white; } .mat-mdc-radio-button.mat-accent { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #ffd54f; --mdc-radio-selected-hover-icon-color: #ffd54f; --mdc-radio-selected-icon-color: #ffd54f; --mdc-radio-selected-pressed-icon-color: #ffd54f; --mat-radio-ripple-color: white; --mat-radio-checked-ripple-color: #ffd54f; --mat-radio-disabled-label-color: rgba(255, 255, 255, 0.5); --mat-radio-label-text-color: white; } .mat-mdc-radio-button.mat-warn { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #f44336; --mdc-radio-selected-hover-icon-color: #f44336; --mdc-radio-selected-icon-color: #f44336; --mdc-radio-selected-pressed-icon-color: #f44336; --mat-radio-ripple-color: white; --mat-radio-checked-ripple-color: #f44336; --mat-radio-disabled-label-color: rgba(255, 255, 255, 0.5); --mat-radio-label-text-color: white; } html { --mdc-radio-state-layer-size: 40px; --mat-radio-touch-target-display: block; } html { --mdc-slider-active-track-height: 6px; --mdc-slider-active-track-shape: 9999px; --mdc-slider-handle-height: 20px; --mdc-slider-handle-shape: 50%; --mdc-slider-handle-width: 20px; --mdc-slider-inactive-track-height: 4px; --mdc-slider-inactive-track-shape: 9999px; --mdc-slider-with-overlap-handle-outline-width: 1px; --mdc-slider-with-tick-marks-active-container-opacity: 0.6; --mdc-slider-with-tick-marks-container-shape: 50%; --mdc-slider-with-tick-marks-container-size: 2px; --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6; --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mat-slider-value-indicator-width: auto; --mat-slider-value-indicator-height: 32px; --mat-slider-value-indicator-caret-display: block; --mat-slider-value-indicator-border-radius: 4px; --mat-slider-value-indicator-padding: 0 12px; --mat-slider-value-indicator-text-transform: none; --mat-slider-value-indicator-container-transform: translateX(-50%); } html { --mdc-slider-handle-color: #ffa726; --mdc-slider-focus-handle-color: #ffa726; --mdc-slider-hover-handle-color: #ffa726; --mdc-slider-active-track-color: #ffa726; --mdc-slider-inactive-track-color: #ffa726; --mdc-slider-with-tick-marks-inactive-container-color: #ffa726; --mdc-slider-with-tick-marks-active-container-color: rgba(0, 0, 0, 0.87); --mdc-slider-disabled-active-track-color: #fff; --mdc-slider-disabled-handle-color: #fff; --mdc-slider-disabled-inactive-track-color: #fff; --mdc-slider-label-container-color: #fff; --mdc-slider-label-label-text-color: #000; --mdc-slider-with-overlap-handle-outline-color: #fff; --mdc-slider-with-tick-marks-disabled-container-color: #fff; --mat-slider-ripple-color: #ffa726; --mat-slider-hover-state-layer-color: rgba(255, 167, 38, 0.05); --mat-slider-focus-state-layer-color: rgba(255, 167, 38, 0.2); --mat-slider-value-indicator-opacity: 0.9; } html .mat-accent { --mdc-slider-handle-color: #ffd54f; --mdc-slider-focus-handle-color: #ffd54f; --mdc-slider-hover-handle-color: #ffd54f; --mdc-slider-active-track-color: #ffd54f; --mdc-slider-inactive-track-color: #ffd54f; --mdc-slider-with-tick-marks-inactive-container-color: #ffd54f; --mdc-slider-with-tick-marks-active-container-color: rgba(0, 0, 0, 0.87); --mat-slider-ripple-color: #ffd54f; --mat-slider-hover-state-layer-color: rgba(255, 213, 79, 0.05); --mat-slider-focus-state-layer-color: rgba(255, 213, 79, 0.2); } html .mat-warn { --mdc-slider-handle-color: #f44336; --mdc-slider-focus-handle-color: #f44336; --mdc-slider-hover-handle-color: #f44336; --mdc-slider-active-track-color: #f44336; --mdc-slider-inactive-track-color: #f44336; --mdc-slider-with-tick-marks-inactive-container-color: #f44336; --mdc-slider-with-tick-marks-active-container-color: white; --mat-slider-ripple-color: #f44336; --mat-slider-hover-state-layer-color: rgba(244, 67, 54, 0.05); --mat-slider-focus-state-layer-color: rgba(244, 67, 54, 0.2); } html { --mat-menu-container-shape: 4px; --mat-menu-divider-bottom-spacing: 0; --mat-menu-divider-top-spacing: 0; --mat-menu-item-spacing: 16px; --mat-menu-item-icon-size: 24px; --mat-menu-item-leading-spacing: 16px; --mat-menu-item-trailing-spacing: 16px; --mat-menu-item-with-icon-leading-spacing: 16px; --mat-menu-item-with-icon-trailing-spacing: 16px; --mat-menu-base-elevation-level: 8; } html { --mat-menu-item-label-text-color: white; --mat-menu-item-icon-color: white; --mat-menu-item-hover-state-layer-color: rgba(255, 255, 255, 0.08); --mat-menu-item-focus-state-layer-color: rgba(255, 255, 255, 0.08); --mat-menu-container-color: #424242; --mat-menu-divider-color: rgba(255, 255, 255, 0.12); } html { --mdc-list-list-item-container-shape: 0; --mdc-list-list-item-leading-avatar-shape: 50%; --mdc-list-list-item-container-color: transparent; --mdc-list-list-item-selected-container-color: transparent; --mdc-list-list-item-leading-avatar-color: transparent; --mdc-list-list-item-leading-icon-size: 24px; --mdc-list-list-item-leading-avatar-size: 40px; --mdc-list-list-item-trailing-icon-size: 24px; --mdc-list-list-item-disabled-state-layer-color: transparent; --mdc-list-list-item-disabled-state-layer-opacity: 0; --mdc-list-list-item-disabled-label-text-opacity: 0.38; --mdc-list-list-item-disabled-leading-icon-opacity: 0.38; --mdc-list-list-item-disabled-trailing-icon-opacity: 0.38; --mat-list-active-indicator-color: transparent; --mat-list-active-indicator-shape: 4px; } html { --mdc-list-list-item-label-text-color: white; --mdc-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7); --mdc-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-disabled-label-text-color: white; --mdc-list-list-item-disabled-leading-icon-color: white; --mdc-list-list-item-disabled-trailing-icon-color: white; --mdc-list-list-item-hover-label-text-color: white; --mdc-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-focus-label-text-color: white; --mdc-list-list-item-hover-state-layer-color: white; --mdc-list-list-item-hover-state-layer-opacity: 0.08; --mdc-list-list-item-focus-state-layer-color: white; --mdc-list-list-item-focus-state-layer-opacity: 0.24; } .mdc-list-item__start, .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #ffa726; --mdc-radio-selected-hover-icon-color: #ffa726; --mdc-radio-selected-icon-color: #ffa726; --mdc-radio-selected-pressed-icon-color: #ffa726; } .mat-accent .mdc-list-item__start, .mat-accent .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #ffd54f; --mdc-radio-selected-hover-icon-color: #ffd54f; --mdc-radio-selected-icon-color: #ffd54f; --mdc-radio-selected-pressed-icon-color: #ffd54f; } .mat-warn .mdc-list-item__start, .mat-warn .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #f44336; --mdc-radio-selected-hover-icon-color: #f44336; --mdc-radio-selected-icon-color: #f44336; --mdc-radio-selected-pressed-icon-color: #f44336; } .mat-mdc-list-option { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #ffa726; --mdc-checkbox-selected-hover-icon-color: #ffa726; --mdc-checkbox-selected-icon-color: #ffa726; --mdc-checkbox-selected-pressed-icon-color: #ffa726; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #ffa726; --mdc-checkbox-selected-hover-state-layer-color: #ffa726; --mdc-checkbox-selected-pressed-state-layer-color: #ffa726; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .mat-mdc-list-option.mat-accent { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #ffd54f; --mdc-checkbox-selected-hover-icon-color: #ffd54f; --mdc-checkbox-selected-icon-color: #ffd54f; --mdc-checkbox-selected-pressed-icon-color: #ffd54f; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #ffd54f; --mdc-checkbox-selected-hover-state-layer-color: #ffd54f; --mdc-checkbox-selected-pressed-state-layer-color: #ffd54f; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .mat-mdc-list-option.mat-warn { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #f44336; --mdc-checkbox-selected-hover-icon-color: #f44336; --mdc-checkbox-selected-icon-color: #f44336; --mdc-checkbox-selected-pressed-icon-color: #f44336; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #f44336; --mdc-checkbox-selected-hover-state-layer-color: #f44336; --mdc-checkbox-selected-pressed-state-layer-color: #f44336; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text, .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start, .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text, .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start { color: #ffa726; } .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start, .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content, .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end { opacity: 1; } html { --mdc-list-list-item-one-line-container-height: 48px; --mdc-list-list-item-two-line-container-height: 64px; --mdc-list-list-item-three-line-container-height: 88px; --mat-list-list-item-leading-icon-start-space: 16px; --mat-list-list-item-leading-icon-end-space: 32px; } .mdc-list-item__start, .mdc-list-item__end { --mdc-radio-state-layer-size: 40px; } .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line { height: 56px; } .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines { height: 72px; } html { --mat-paginator-container-text-color: rgba(255, 255, 255, 0.87); --mat-paginator-container-background-color: #424242; --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.54); --mat-paginator-disabled-icon-color: rgba(255, 255, 255, 0.12); } html { --mat-paginator-container-size: 56px; --mat-paginator-form-field-container-height: 40px; --mat-paginator-form-field-container-vertical-padding: 8px; --mat-paginator-touch-target-display: block; } html { --mdc-secondary-navigation-tab-container-height: 48px; --mdc-tab-indicator-active-indicator-height: 2px; --mdc-tab-indicator-active-indicator-shape: 0; --mat-tab-header-divider-color: transparent; --mat-tab-header-divider-height: 0; } .mat-mdc-tab-group, .mat-mdc-tab-nav-bar { --mdc-tab-indicator-active-indicator-color: #ffa726; --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, 0.5); --mat-tab-header-pagination-icon-color: white; --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-label-text-color: #ffa726; --mat-tab-header-active-ripple-color: #ffa726; --mat-tab-header-inactive-ripple-color: #ffa726; --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-focus-label-text-color: #ffa726; --mat-tab-header-active-hover-label-text-color: #ffa726; --mat-tab-header-active-focus-indicator-color: #ffa726; --mat-tab-header-active-hover-indicator-color: #ffa726; } .mat-mdc-tab-group.mat-accent, .mat-mdc-tab-nav-bar.mat-accent { --mdc-tab-indicator-active-indicator-color: #ffd54f; --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, 0.5); --mat-tab-header-pagination-icon-color: white; --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-label-text-color: #ffd54f; --mat-tab-header-active-ripple-color: #ffd54f; --mat-tab-header-inactive-ripple-color: #ffd54f; --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-focus-label-text-color: #ffd54f; --mat-tab-header-active-hover-label-text-color: #ffd54f; --mat-tab-header-active-focus-indicator-color: #ffd54f; --mat-tab-header-active-hover-indicator-color: #ffd54f; } .mat-mdc-tab-group.mat-warn, .mat-mdc-tab-nav-bar.mat-warn { --mdc-tab-indicator-active-indicator-color: #f44336; --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, 0.5); --mat-tab-header-pagination-icon-color: white; --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-label-text-color: #f44336; --mat-tab-header-active-ripple-color: #f44336; --mat-tab-header-inactive-ripple-color: #f44336; --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-focus-label-text-color: #f44336; --mat-tab-header-active-hover-label-text-color: #f44336; --mat-tab-header-active-focus-indicator-color: #f44336; --mat-tab-header-active-hover-indicator-color: #f44336; } .mat-mdc-tab-group.mat-background-primary, .mat-mdc-tab-nav-bar.mat-background-primary { --mat-tab-header-with-background-background-color: #ffa726; --mat-tab-header-with-background-foreground-color: rgba(0, 0, 0, 0.87); } .mat-mdc-tab-group.mat-background-accent, .mat-mdc-tab-nav-bar.mat-background-accent { --mat-tab-header-with-background-background-color: #ffd54f; --mat-tab-header-with-background-foreground-color: rgba(0, 0, 0, 0.87); } .mat-mdc-tab-group.mat-background-warn, .mat-mdc-tab-nav-bar.mat-background-warn { --mat-tab-header-with-background-background-color: #f44336; --mat-tab-header-with-background-foreground-color: white; } .mat-mdc-tab-header { --mdc-secondary-navigation-tab-container-height: 48px; } html { --mdc-checkbox-disabled-selected-checkmark-color: #fff; --mdc-checkbox-selected-focus-state-layer-opacity: 0.16; --mdc-checkbox-selected-hover-state-layer-opacity: 0.04; --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16; --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16; --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04; --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16; } html { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #ffd54f; --mdc-checkbox-selected-hover-icon-color: #ffd54f; --mdc-checkbox-selected-icon-color: #ffd54f; --mdc-checkbox-selected-pressed-icon-color: #ffd54f; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #ffd54f; --mdc-checkbox-selected-hover-state-layer-color: #ffd54f; --mdc-checkbox-selected-pressed-state-layer-color: #ffd54f; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; --mat-checkbox-disabled-label-color: rgba(255, 255, 255, 0.5); --mat-checkbox-label-text-color: white; } .mat-mdc-checkbox.mat-primary { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #ffa726; --mdc-checkbox-selected-hover-icon-color: #ffa726; --mdc-checkbox-selected-icon-color: #ffa726; --mdc-checkbox-selected-pressed-icon-color: #ffa726; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #ffa726; --mdc-checkbox-selected-hover-state-layer-color: #ffa726; --mdc-checkbox-selected-pressed-state-layer-color: #ffa726; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .mat-mdc-checkbox.mat-warn { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #f44336; --mdc-checkbox-selected-hover-icon-color: #f44336; --mdc-checkbox-selected-icon-color: #f44336; --mdc-checkbox-selected-pressed-icon-color: #f44336; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #f44336; --mdc-checkbox-selected-hover-state-layer-color: #f44336; --mdc-checkbox-selected-pressed-state-layer-color: #f44336; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } html { --mdc-checkbox-state-layer-size: 40px; --mat-checkbox-touch-target-display: block; } html { --mdc-text-button-container-shape: 4px; --mdc-text-button-keep-touch-target: false; --mdc-filled-button-container-shape: 4px; --mdc-filled-button-keep-touch-target: false; --mdc-protected-button-container-shape: 4px; --mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-outlined-button-keep-touch-target: false; --mdc-outlined-button-outline-width: 1px; --mdc-outlined-button-container-shape: 4px; --mat-text-button-horizontal-padding: 8px; --mat-text-button-with-icon-horizontal-padding: 8px; --mat-text-button-icon-spacing: 8px; --mat-text-button-icon-offset: 0; --mat-filled-button-horizontal-padding: 16px; --mat-filled-button-icon-spacing: 8px; --mat-filled-button-icon-offset: -4px; --mat-protected-button-horizontal-padding: 16px; --mat-protected-button-icon-spacing: 8px; --mat-protected-button-icon-offset: -4px; --mat-outlined-button-horizontal-padding: 15px; --mat-outlined-button-icon-spacing: 8px; --mat-outlined-button-icon-offset: -4px; } html { --mdc-text-button-label-text-color: white; --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); --mat-text-button-state-layer-color: white; --mat-text-button-disabled-state-layer-color: white; --mat-text-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-text-button-hover-state-layer-opacity: 0.08; --mat-text-button-focus-state-layer-opacity: 0.24; --mat-text-button-pressed-state-layer-opacity: 0.24; --mdc-filled-button-container-color: #424242; --mdc-filled-button-label-text-color: white; --mdc-filled-button-disabled-container-color: rgba(255, 255, 255, 0.12); --mdc-filled-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); --mat-filled-button-state-layer-color: white; --mat-filled-button-disabled-state-layer-color: white; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-filled-button-hover-state-layer-opacity: 0.08; --mat-filled-button-focus-state-layer-opacity: 0.24; --mat-filled-button-pressed-state-layer-opacity: 0.24; --mdc-protected-button-container-color: #424242; --mdc-protected-button-label-text-color: white; --mdc-protected-button-disabled-container-color: rgba(255, 255, 255, 0.12); --mdc-protected-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); --mat-protected-button-state-layer-color: white; --mat-protected-button-disabled-state-layer-color: white; --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-protected-button-hover-state-layer-opacity: 0.08; --mat-protected-button-focus-state-layer-opacity: 0.24; --mat-protected-button-pressed-state-layer-opacity: 0.24; --mdc-outlined-button-disabled-outline-color: rgba(255, 255, 255, 0.12); --mdc-outlined-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); --mdc-outlined-button-label-text-color: white; --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12); --mat-outlined-button-state-layer-color: white; --mat-outlined-button-disabled-state-layer-color: white; --mat-outlined-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-outlined-button-hover-state-layer-opacity: 0.08; --mat-outlined-button-focus-state-layer-opacity: 0.24; --mat-outlined-button-pressed-state-layer-opacity: 0.24; } .mat-mdc-button.mat-primary { --mdc-text-button-label-text-color: #ffa726; --mat-text-button-state-layer-color: #ffa726; --mat-text-button-ripple-color: rgba(255, 167, 38, 0.1); } .mat-mdc-button.mat-accent { --mdc-text-button-label-text-color: #ffd54f; --mat-text-button-state-layer-color: #ffd54f; --mat-text-button-ripple-color: rgba(255, 213, 79, 0.1); } .mat-mdc-button.mat-warn { --mdc-text-button-label-text-color: #f44336; --mat-text-button-state-layer-color: #f44336; --mat-text-button-ripple-color: rgba(244, 67, 54, 0.1); } .mat-mdc-unelevated-button.mat-primary { --mdc-filled-button-container-color: #ffa726; --mdc-filled-button-label-text-color: black; --mat-filled-button-state-layer-color: black; --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1); } .mat-mdc-unelevated-button.mat-accent { --mdc-filled-button-container-color: #ffd54f; --mdc-filled-button-label-text-color: black; --mat-filled-button-state-layer-color: black; --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1); } .mat-mdc-unelevated-button.mat-warn { --mdc-filled-button-container-color: #f44336; --mdc-filled-button-label-text-color: white; --mat-filled-button-state-layer-color: white; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1); } .mat-mdc-raised-button.mat-primary { --mdc-protected-button-container-color: #ffa726; --mdc-protected-button-label-text-color: black; --mat-protected-button-state-layer-color: black; --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1); } .mat-mdc-raised-button.mat-accent { --mdc-protected-button-container-color: #ffd54f; --mdc-protected-button-label-text-color: black; --mat-protected-button-state-layer-color: black; --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1); } .mat-mdc-raised-button.mat-warn { --mdc-protected-button-container-color: #f44336; --mdc-protected-button-label-text-color: white; --mat-protected-button-state-layer-color: white; --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1); } .mat-mdc-outlined-button.mat-primary { --mdc-outlined-button-label-text-color: #ffa726; --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12); --mat-outlined-button-state-layer-color: #ffa726; --mat-outlined-button-ripple-color: rgba(255, 167, 38, 0.1); } .mat-mdc-outlined-button.mat-accent { --mdc-outlined-button-label-text-color: #ffd54f; --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12); --mat-outlined-button-state-layer-color: #ffd54f; --mat-outlined-button-ripple-color: rgba(255, 213, 79, 0.1); } .mat-mdc-outlined-button.mat-warn { --mdc-outlined-button-label-text-color: #f44336; --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12); --mat-outlined-button-state-layer-color: #f44336; --mat-outlined-button-ripple-color: rgba(244, 67, 54, 0.1); } html { --mdc-text-button-container-height: 36px; --mdc-filled-button-container-height: 36px; --mdc-protected-button-container-height: 36px; --mdc-outlined-button-container-height: 36px; --mat-text-button-touch-target-display: block; --mat-filled-button-touch-target-display: block; --mat-protected-button-touch-target-display: block; --mat-outlined-button-touch-target-display: block; } html { --mdc-icon-button-icon-size: 24px; } html { --mdc-icon-button-icon-color: inherit; --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5); --mat-icon-button-state-layer-color: white; --mat-icon-button-disabled-state-layer-color: white; --mat-icon-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-icon-button-hover-state-layer-opacity: 0.08; --mat-icon-button-focus-state-layer-opacity: 0.24; --mat-icon-button-pressed-state-layer-opacity: 0.24; } html .mat-mdc-icon-button.mat-primary { --mdc-icon-button-icon-color: #ffa726; --mat-icon-button-state-layer-color: #ffa726; --mat-icon-button-ripple-color: rgba(255, 167, 38, 0.1); } html .mat-mdc-icon-button.mat-accent { --mdc-icon-button-icon-color: #ffd54f; --mat-icon-button-state-layer-color: #ffd54f; --mat-icon-button-ripple-color: rgba(255, 213, 79, 0.1); } html .mat-mdc-icon-button.mat-warn { --mdc-icon-button-icon-color: #f44336; --mat-icon-button-state-layer-color: #f44336; --mat-icon-button-ripple-color: rgba(244, 67, 54, 0.1); } html { --mat-icon-button-touch-target-display: block; } .mat-mdc-icon-button.mat-mdc-button-base { --mdc-icon-button-state-layer-size: 48px; width: var(--mdc-icon-button-state-layer-size); height: var(--mdc-icon-button-state-layer-size); padding: 12px; } html { --mdc-fab-container-shape: 50%; --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mdc-fab-small-container-shape: 50%; --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mdc-extended-fab-container-height: 48px; --mdc-extended-fab-container-shape: 24px; --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); } html { --mdc-fab-container-color: #424242; --mat-fab-foreground-color: white; --mat-fab-state-layer-color: white; --mat-fab-disabled-state-layer-color: white; --mat-fab-ripple-color: rgba(255, 255, 255, 0.1); --mat-fab-hover-state-layer-opacity: 0.08; --mat-fab-focus-state-layer-opacity: 0.24; --mat-fab-pressed-state-layer-opacity: 0.24; --mat-fab-disabled-state-container-color: rgba(255, 255, 255, 0.12); --mat-fab-disabled-state-foreground-color: rgba(255, 255, 255, 0.5); --mdc-fab-small-container-color: #424242; --mat-fab-small-foreground-color: white; --mat-fab-small-state-layer-color: white; --mat-fab-small-disabled-state-layer-color: white; --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1); --mat-fab-small-hover-state-layer-opacity: 0.08; --mat-fab-small-focus-state-layer-opacity: 0.24; --mat-fab-small-pressed-state-layer-opacity: 0.24; --mat-fab-small-disabled-state-container-color: rgba(255, 255, 255, 0.12); --mat-fab-small-disabled-state-foreground-color: rgba(255, 255, 255, 0.5); } html .mat-mdc-fab.mat-primary { --mdc-fab-container-color: #ffa726; --mat-fab-foreground-color: black; --mat-fab-state-layer-color: black; --mat-fab-ripple-color: rgba(0, 0, 0, 0.1); } html .mat-mdc-fab.mat-accent { --mdc-fab-container-color: #ffd54f; --mat-fab-foreground-color: black; --mat-fab-state-layer-color: black; --mat-fab-ripple-color: rgba(0, 0, 0, 0.1); } html .mat-mdc-fab.mat-warn { --mdc-fab-container-color: #f44336; --mat-fab-foreground-color: white; --mat-fab-state-layer-color: white; --mat-fab-ripple-color: rgba(255, 255, 255, 0.1); } html .mat-mdc-mini-fab.mat-primary { --mdc-fab-small-container-color: #ffa726; --mat-fab-small-foreground-color: black; --mat-fab-small-state-layer-color: black; --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1); } html .mat-mdc-mini-fab.mat-accent { --mdc-fab-small-container-color: #ffd54f; --mat-fab-small-foreground-color: black; --mat-fab-small-state-layer-color: black; --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1); } html .mat-mdc-mini-fab.mat-warn { --mdc-fab-small-container-color: #f44336; --mat-fab-small-foreground-color: white; --mat-fab-small-state-layer-color: white; --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1); } html { --mat-fab-touch-target-display: block; --mat-fab-small-touch-target-display: block; } html { --mdc-snackbar-container-shape: 4px; } html { --mdc-snackbar-container-color: #d9d9d9; --mdc-snackbar-supporting-text-color: rgba(66, 66, 66, 0.87); --mat-snack-bar-button-color: rgba(0, 0, 0, 0.87); } html { --mat-table-row-item-outline-width: 1px; } html { --mat-table-background-color: #424242; --mat-table-header-headline-color: white; --mat-table-row-item-label-text-color: white; --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12); } html { --mat-table-header-container-height: 56px; --mat-table-footer-container-height: 52px; --mat-table-row-item-container-height: 52px; } html { --mdc-circular-progress-active-indicator-width: 4px; --mdc-circular-progress-size: 48px; } html { --mdc-circular-progress-active-indicator-color: #ffa726; } html .mat-accent { --mdc-circular-progress-active-indicator-color: #ffd54f; } html .mat-warn { --mdc-circular-progress-active-indicator-color: #f44336; } html { --mat-badge-container-shape: 50%; --mat-badge-container-size: unset; --mat-badge-small-size-container-size: unset; --mat-badge-large-size-container-size: unset; --mat-badge-legacy-container-size: 22px; --mat-badge-legacy-small-size-container-size: 16px; --mat-badge-legacy-large-size-container-size: 28px; --mat-badge-container-offset: -11px 0; --mat-badge-small-size-container-offset: -8px 0; --mat-badge-large-size-container-offset: -14px 0; --mat-badge-container-overlap-offset: -11px; --mat-badge-small-size-container-overlap-offset: -8px; --mat-badge-large-size-container-overlap-offset: -14px; --mat-badge-container-padding: 0; --mat-badge-small-size-container-padding: 0; --mat-badge-large-size-container-padding: 0; } html { --mat-badge-background-color: #ffa726; --mat-badge-text-color: rgba(0, 0, 0, 0.87); --mat-badge-disabled-state-background-color: #6e6e6e; --mat-badge-disabled-state-text-color: rgba(255, 255, 255, 0.5); } .mat-badge-accent { --mat-badge-background-color: #ffd54f; --mat-badge-text-color: rgba(0, 0, 0, 0.87); } .mat-badge-warn { --mat-badge-background-color: #f44336; --mat-badge-text-color: white; } html { --mat-bottom-sheet-container-shape: 4px; } html { --mat-bottom-sheet-container-text-color: white; --mat-bottom-sheet-container-background-color: #424242; } html { --mat-legacy-button-toggle-height: 36px; --mat-legacy-button-toggle-shape: 2px; --mat-legacy-button-toggle-focus-state-layer-opacity: 1; --mat-standard-button-toggle-shape: 4px; --mat-standard-button-toggle-hover-state-layer-opacity: 0.04; --mat-standard-button-toggle-focus-state-layer-opacity: 0.12; } html { --mat-legacy-button-toggle-text-color: rgba(255, 255, 255, 0.5); --mat-legacy-button-toggle-state-layer-color: rgba(255, 255, 255, 0.12); --mat-legacy-button-toggle-selected-state-text-color: rgba(255, 255, 255, 0.7); --mat-legacy-button-toggle-selected-state-background-color: #212121; --mat-legacy-button-toggle-disabled-state-text-color: rgba(255, 255, 255, 0.3); --mat-legacy-button-toggle-disabled-state-background-color: black; --mat-legacy-button-toggle-disabled-selected-state-background-color: #424242; --mat-standard-button-toggle-text-color: white; --mat-standard-button-toggle-background-color: #424242; --mat-standard-button-toggle-state-layer-color: white; --mat-standard-button-toggle-selected-state-background-color: #212121; --mat-standard-button-toggle-selected-state-text-color: white; --mat-standard-button-toggle-disabled-state-text-color: rgba(255, 255, 255, 0.3); --mat-standard-button-toggle-disabled-state-background-color: #424242; --mat-standard-button-toggle-disabled-selected-state-text-color: white; --mat-standard-button-toggle-disabled-selected-state-background-color: #424242; --mat-standard-button-toggle-divider-color: #595959; } html { --mat-standard-button-toggle-height: 48px; } html { --mat-datepicker-calendar-container-shape: 4px; --mat-datepicker-calendar-container-touch-shape: 4px; --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } html { --mat-datepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-selected-state-background-color: #ffa726; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(255, 167, 38, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-focus-state-background-color: rgba(255, 167, 38, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(255, 167, 38, 0.3); --mat-datepicker-toggle-active-state-icon-color: #ffa726; --mat-datepicker-calendar-date-in-range-state-background-color: rgba(255, 167, 38, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e; --mat-datepicker-toggle-icon-color: white; --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7); --mat-datepicker-calendar-period-button-text-color: white; --mat-datepicker-calendar-period-button-icon-color: white; --mat-datepicker-calendar-navigation-button-icon-color: white; --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12); --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7); --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.5); --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(255, 255, 255, 0.3); --mat-datepicker-calendar-date-text-color: white; --mat-datepicker-calendar-date-outline-color: transparent; --mat-datepicker-calendar-date-disabled-state-text-color: rgba(255, 255, 255, 0.5); --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.24); --mat-datepicker-range-input-separator-color: white; --mat-datepicker-range-input-disabled-state-separator-color: rgba(255, 255, 255, 0.5); --mat-datepicker-range-input-disabled-state-text-color: rgba(255, 255, 255, 0.5); --mat-datepicker-calendar-container-background-color: #424242; --mat-datepicker-calendar-container-text-color: white; } .mat-datepicker-content.mat-accent { --mat-datepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-selected-state-background-color: #ffd54f; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(255, 213, 79, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-focus-state-background-color: rgba(255, 213, 79, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(255, 213, 79, 0.3); --mat-datepicker-calendar-date-in-range-state-background-color: rgba(255, 213, 79, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e; } .mat-datepicker-content.mat-warn { --mat-datepicker-calendar-date-selected-state-text-color: white; --mat-datepicker-calendar-date-selected-state-background-color: #f44336; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: white; --mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, 0.3); --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e; } .mat-datepicker-toggle-active.mat-accent { --mat-datepicker-toggle-active-state-icon-color: #ffd54f; } .mat-datepicker-toggle-active.mat-warn { --mat-datepicker-toggle-active-state-icon-color: #f44336; } .mat-calendar-controls { --mat-icon-button-touch-target-display: none; } .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base { --mdc-icon-button-state-layer-size: 40px; width: var(--mdc-icon-button-state-layer-size); height: var(--mdc-icon-button-state-layer-size); padding: 8px; } html { --mat-divider-width: 1px; } html { --mat-divider-color: rgba(255, 255, 255, 0.12); } html { --mat-expansion-container-shape: 4px; --mat-expansion-legacy-header-indicator-display: inline-block; --mat-expansion-header-indicator-display: none; } html { --mat-expansion-container-background-color: #424242; --mat-expansion-container-text-color: white; --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12); --mat-expansion-header-hover-state-layer-color: rgba(255, 255, 255, 0.04); --mat-expansion-header-focus-state-layer-color: rgba(255, 255, 255, 0.04); --mat-expansion-header-disabled-state-text-color: rgba(255, 255, 255, 0.3); --mat-expansion-header-text-color: white; --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7); --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7); } html { --mat-expansion-header-collapsed-state-height: 48px; --mat-expansion-header-expanded-state-height: 64px; } html { --mat-icon-color: inherit; } .mat-icon.mat-primary { --mat-icon-color: #ffa726; } .mat-icon.mat-accent { --mat-icon-color: #ffd54f; } .mat-icon.mat-warn { --mat-icon-color: #f44336; } html { --mat-sidenav-container-shape: 0; --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); --mat-sidenav-container-width: auto; } html { --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12); --mat-sidenav-container-background-color: #424242; --mat-sidenav-container-text-color: white; --mat-sidenav-content-background-color: #303030; --mat-sidenav-content-text-color: white; --mat-sidenav-scrim-color: rgba(189, 189, 189, 0.6); } html { --mat-stepper-header-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-selected-state-icon-background-color: #ffa726; --mat-stepper-header-selected-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-done-state-icon-background-color: #ffa726; --mat-stepper-header-done-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-edit-state-icon-background-color: #ffa726; --mat-stepper-header-edit-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-container-color: #424242; --mat-stepper-line-color: rgba(255, 255, 255, 0.12); --mat-stepper-header-hover-state-layer-color: rgba(255, 255, 255, 0.04); --mat-stepper-header-focus-state-layer-color: rgba(255, 255, 255, 0.04); --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7); --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7); --mat-stepper-header-selected-state-label-text-color: white; --mat-stepper-header-error-state-label-text-color: #f44336; --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7); --mat-stepper-header-error-state-icon-foreground-color: #f44336; --mat-stepper-header-error-state-icon-background-color: transparent; } html .mat-step-header.mat-accent { --mat-stepper-header-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-selected-state-icon-background-color: #ffd54f; --mat-stepper-header-selected-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-done-state-icon-background-color: #ffd54f; --mat-stepper-header-done-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-edit-state-icon-background-color: #ffd54f; --mat-stepper-header-edit-state-icon-foreground-color: rgba(0, 0, 0, 0.87); } html .mat-step-header.mat-warn { --mat-stepper-header-icon-foreground-color: white; --mat-stepper-header-selected-state-icon-background-color: #f44336; --mat-stepper-header-selected-state-icon-foreground-color: white; --mat-stepper-header-done-state-icon-background-color: #f44336; --mat-stepper-header-done-state-icon-foreground-color: white; --mat-stepper-header-edit-state-icon-background-color: #f44336; --mat-stepper-header-edit-state-icon-foreground-color: white; } html { --mat-stepper-header-height: 72px; } html { --mat-sort-arrow-color: #c6c6c6; } html { --mat-toolbar-container-background-color: #212121; --mat-toolbar-container-text-color: white; } .mat-toolbar.mat-primary { --mat-toolbar-container-background-color: #ffa726; --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87); } .mat-toolbar.mat-accent { --mat-toolbar-container-background-color: #ffd54f; --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87); } .mat-toolbar.mat-warn { --mat-toolbar-container-background-color: #f44336; --mat-toolbar-container-text-color: white; } html { --mat-toolbar-standard-height: 64px; --mat-toolbar-mobile-height: 56px; } html { --mat-tree-container-background-color: #424242; --mat-tree-node-text-color: white; } html { --mat-tree-node-min-height: 48px; } [data-theme=light] { --mat-ripple-color: rgba(0, 0, 0, 0.1); --mat-option-selected-state-label-text-color: #ffa726; --mat-option-label-text-color: rgba(0, 0, 0, 0.87); --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04); --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87); --mat-full-pseudo-checkbox-selected-icon-color: #ffd54f; --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0; --mat-minimal-pseudo-checkbox-selected-checkmark-color: #ffd54f; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0; --mat-app-background-color: #fafafa; --mat-app-text-color: rgba(0, 0, 0, 0.87); --mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); --mdc-elevated-card-container-shape: 4px; --mdc-outlined-card-container-shape: 4px; --mdc-outlined-card-outline-width: 1px; --mdc-elevated-card-container-color: white; --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mdc-outlined-card-container-color: white; --mdc-outlined-card-outline-color: rgba(0, 0, 0, 0.12); --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54); --mdc-linear-progress-active-indicator-height: 4px; --mdc-linear-progress-track-height: 4px; --mdc-linear-progress-track-shape: 0; --mdc-plain-tooltip-container-shape: 4px; --mdc-plain-tooltip-supporting-text-line-height: 16px; --mdc-plain-tooltip-container-color: #616161; --mdc-plain-tooltip-supporting-text-color: #fff; --mdc-filled-text-field-active-indicator-height: 1px; --mdc-filled-text-field-focus-active-indicator-height: 2px; --mdc-filled-text-field-container-shape: 4px; --mdc-outlined-text-field-outline-width: 1px; --mdc-outlined-text-field-focus-outline-width: 2px; --mdc-outlined-text-field-container-shape: 4px; --mdc-filled-text-field-caret-color: #ffa726; --mdc-filled-text-field-focus-active-indicator-color: #ffa726; --mdc-filled-text-field-focus-label-text-color: rgba(255, 167, 38, 0.87); --mdc-filled-text-field-container-color: whitesmoke; --mdc-filled-text-field-disabled-container-color: #fafafa; --mdc-filled-text-field-label-text-color: rgba(0, 0, 0, 0.6); --mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6); --mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mdc-filled-text-field-input-text-color: rgba(0, 0, 0, 0.87); --mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38); --mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6); --mdc-filled-text-field-error-hover-label-text-color: #f44336; --mdc-filled-text-field-error-focus-label-text-color: #f44336; --mdc-filled-text-field-error-label-text-color: #f44336; --mdc-filled-text-field-error-caret-color: #f44336; --mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, 0.42); --mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, 0.06); --mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, 0.87); --mdc-filled-text-field-error-active-indicator-color: #f44336; --mdc-filled-text-field-error-focus-active-indicator-color: #f44336; --mdc-filled-text-field-error-hover-active-indicator-color: #f44336; --mdc-outlined-text-field-caret-color: #ffa726; --mdc-outlined-text-field-focus-outline-color: #ffa726; --mdc-outlined-text-field-focus-label-text-color: rgba(255, 167, 38, 0.87); --mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, 0.6); --mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6); --mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, 0.87); --mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38); --mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6); --mdc-outlined-text-field-error-caret-color: #f44336; --mdc-outlined-text-field-error-focus-label-text-color: #f44336; --mdc-outlined-text-field-error-label-text-color: #f44336; --mdc-outlined-text-field-error-hover-label-text-color: #f44336; --mdc-outlined-text-field-outline-color: rgba(0, 0, 0, 0.38); --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.06); --mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, 0.87); --mdc-outlined-text-field-error-focus-outline-color: #f44336; --mdc-outlined-text-field-error-hover-outline-color: #f44336; --mdc-outlined-text-field-error-outline-color: #f44336; --mat-form-field-focus-select-arrow-color: rgba(255, 167, 38, 0.87); --mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, 0.38); --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87); --mat-form-field-error-text-color: #f44336; --mat-form-field-select-option-text-color: inherit; --mat-form-field-select-disabled-option-text-color: GrayText; --mat-form-field-leading-icon-color: unset; --mat-form-field-disabled-leading-icon-color: unset; --mat-form-field-trailing-icon-color: unset; --mat-form-field-disabled-trailing-icon-color: unset; --mat-form-field-error-focus-trailing-icon-color: unset; --mat-form-field-error-hover-trailing-icon-color: unset; --mat-form-field-error-trailing-icon-color: unset; --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54); --mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, 0.38); --mat-form-field-hover-state-layer-opacity: 0.04; --mat-form-field-focus-state-layer-opacity: 0.08; --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mat-select-panel-background-color: white; --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87); --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38); --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6); --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54); --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38); --mat-select-focused-arrow-color: rgba(255, 167, 38, 0.87); --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87); --mat-autocomplete-container-shape: 4px; --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mat-autocomplete-background-color: white; --mdc-dialog-container-shape: 4px; --mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); --mat-dialog-container-max-width: 80vw; --mat-dialog-container-small-max-width: 80vw; --mat-dialog-container-min-width: 0; --mat-dialog-actions-alignment: start; --mat-dialog-actions-padding: 8px; --mat-dialog-content-padding: 20px 24px; --mat-dialog-with-actions-content-padding: 20px 24px; --mat-dialog-headline-padding: 0 24px 9px; --mdc-dialog-container-color: white; --mdc-dialog-subhead-color: rgba(0, 0, 0, 0.87); --mdc-dialog-supporting-text-color: rgba(0, 0, 0, 0.6); --mdc-switch-disabled-selected-icon-opacity: 0.38; --mdc-switch-disabled-track-opacity: 0.12; --mdc-switch-disabled-unselected-icon-opacity: 0.38; --mdc-switch-handle-height: 20px; --mdc-switch-handle-shape: 10px; --mdc-switch-handle-width: 20px; --mdc-switch-selected-icon-size: 18px; --mdc-switch-track-height: 14px; --mdc-switch-track-shape: 7px; --mdc-switch-track-width: 36px; --mdc-switch-unselected-icon-size: 18px; --mdc-switch-selected-focus-state-layer-opacity: 0.12; --mdc-switch-selected-hover-state-layer-opacity: 0.04; --mdc-switch-selected-pressed-state-layer-opacity: 0.1; --mdc-switch-unselected-focus-state-layer-opacity: 0.12; --mdc-switch-unselected-hover-state-layer-opacity: 0.04; --mdc-switch-unselected-pressed-state-layer-opacity: 0.1; --mdc-switch-selected-focus-state-layer-color: #fb8c00; --mdc-switch-selected-handle-color: #fb8c00; --mdc-switch-selected-hover-state-layer-color: #fb8c00; --mdc-switch-selected-pressed-state-layer-color: #fb8c00; --mdc-switch-selected-focus-handle-color: #e65100; --mdc-switch-selected-hover-handle-color: #e65100; --mdc-switch-selected-pressed-handle-color: #e65100; --mdc-switch-selected-focus-track-color: #ffb74d; --mdc-switch-selected-hover-track-color: #ffb74d; --mdc-switch-selected-pressed-track-color: #ffb74d; --mdc-switch-selected-track-color: #ffb74d; --mdc-switch-disabled-selected-handle-color: #424242; --mdc-switch-disabled-selected-icon-color: #fff; --mdc-switch-disabled-selected-track-color: #424242; --mdc-switch-disabled-unselected-handle-color: #424242; --mdc-switch-disabled-unselected-icon-color: #fff; --mdc-switch-disabled-unselected-track-color: #424242; --mdc-switch-handle-surface-color: #fff; --mdc-switch-selected-icon-color: #fff; --mdc-switch-unselected-focus-handle-color: #212121; --mdc-switch-unselected-focus-state-layer-color: #424242; --mdc-switch-unselected-focus-track-color: #e0e0e0; --mdc-switch-unselected-handle-color: #616161; --mdc-switch-unselected-hover-handle-color: #212121; --mdc-switch-unselected-hover-state-layer-color: #424242; --mdc-switch-unselected-hover-track-color: #e0e0e0; --mdc-switch-unselected-icon-color: #fff; --mdc-switch-unselected-pressed-handle-color: #212121; --mdc-switch-unselected-pressed-state-layer-color: #424242; --mdc-switch-unselected-pressed-track-color: #e0e0e0; --mdc-switch-unselected-track-color: #e0e0e0; --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mdc-switch-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mdc-radio-disabled-selected-icon-opacity: 0.38; --mdc-radio-disabled-unselected-icon-opacity: 0.38; --mdc-radio-state-layer-size: 40px; --mdc-slider-active-track-height: 6px; --mdc-slider-active-track-shape: 9999px; --mdc-slider-handle-height: 20px; --mdc-slider-handle-shape: 50%; --mdc-slider-handle-width: 20px; --mdc-slider-inactive-track-height: 4px; --mdc-slider-inactive-track-shape: 9999px; --mdc-slider-with-overlap-handle-outline-width: 1px; --mdc-slider-with-tick-marks-active-container-opacity: 0.6; --mdc-slider-with-tick-marks-container-shape: 50%; --mdc-slider-with-tick-marks-container-size: 2px; --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6; --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mat-slider-value-indicator-width: auto; --mat-slider-value-indicator-height: 32px; --mat-slider-value-indicator-caret-display: block; --mat-slider-value-indicator-border-radius: 4px; --mat-slider-value-indicator-padding: 0 12px; --mat-slider-value-indicator-text-transform: none; --mat-slider-value-indicator-container-transform: translateX(-50%); --mdc-slider-handle-color: #ffa726; --mdc-slider-focus-handle-color: #ffa726; --mdc-slider-hover-handle-color: #ffa726; --mdc-slider-active-track-color: #ffa726; --mdc-slider-inactive-track-color: #ffa726; --mdc-slider-with-tick-marks-inactive-container-color: #ffa726; --mdc-slider-with-tick-marks-active-container-color: rgba(0, 0, 0, 0.87); --mdc-slider-disabled-active-track-color: #000; --mdc-slider-disabled-handle-color: #000; --mdc-slider-disabled-inactive-track-color: #000; --mdc-slider-label-container-color: #000; --mdc-slider-label-label-text-color: #fff; --mdc-slider-with-overlap-handle-outline-color: #fff; --mdc-slider-with-tick-marks-disabled-container-color: #000; --mat-slider-ripple-color: #ffa726; --mat-slider-hover-state-layer-color: rgba(255, 167, 38, 0.05); --mat-slider-focus-state-layer-color: rgba(255, 167, 38, 0.2); --mat-slider-value-indicator-opacity: 0.6; --mat-menu-container-shape: 4px; --mat-menu-divider-bottom-spacing: 0; --mat-menu-divider-top-spacing: 0; --mat-menu-item-spacing: 16px; --mat-menu-item-icon-size: 24px; --mat-menu-item-leading-spacing: 16px; --mat-menu-item-trailing-spacing: 16px; --mat-menu-item-with-icon-leading-spacing: 16px; --mat-menu-item-with-icon-trailing-spacing: 16px; --mat-menu-base-elevation-level: 8; --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87); --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87); --mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-menu-container-color: white; --mat-menu-divider-color: rgba(0, 0, 0, 0.12); --mdc-list-list-item-container-shape: 0; --mdc-list-list-item-leading-avatar-shape: 50%; --mdc-list-list-item-container-color: transparent; --mdc-list-list-item-selected-container-color: transparent; --mdc-list-list-item-leading-avatar-color: transparent; --mdc-list-list-item-leading-icon-size: 24px; --mdc-list-list-item-leading-avatar-size: 40px; --mdc-list-list-item-trailing-icon-size: 24px; --mdc-list-list-item-disabled-state-layer-color: transparent; --mdc-list-list-item-disabled-state-layer-opacity: 0; --mdc-list-list-item-disabled-label-text-opacity: 0.38; --mdc-list-list-item-disabled-leading-icon-opacity: 0.38; --mdc-list-list-item-disabled-trailing-icon-opacity: 0.38; --mat-list-active-indicator-color: transparent; --mat-list-active-indicator-shape: 4px; --mdc-list-list-item-label-text-color: rgba(0, 0, 0, 0.87); --mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54); --mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-disabled-label-text-color: black; --mdc-list-list-item-disabled-leading-icon-color: black; --mdc-list-list-item-disabled-trailing-icon-color: black; --mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87); --mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87); --mdc-list-list-item-hover-state-layer-color: black; --mdc-list-list-item-hover-state-layer-opacity: 0.04; --mdc-list-list-item-focus-state-layer-color: black; --mdc-list-list-item-focus-state-layer-opacity: 0.12; --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87); --mat-paginator-container-background-color: white; --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54); --mat-paginator-disabled-icon-color: rgba(0, 0, 0, 0.12); --mdc-secondary-navigation-tab-container-height: 48px; --mdc-tab-indicator-active-indicator-height: 2px; --mdc-tab-indicator-active-indicator-shape: 0; --mat-tab-header-divider-color: transparent; --mat-tab-header-divider-height: 0; --mdc-checkbox-disabled-selected-checkmark-color: #fff; --mdc-checkbox-selected-focus-state-layer-opacity: 0.16; --mdc-checkbox-selected-hover-state-layer-opacity: 0.04; --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16; --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16; --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04; --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16; --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #ffd54f; --mdc-checkbox-selected-hover-icon-color: #ffd54f; --mdc-checkbox-selected-icon-color: #ffd54f; --mdc-checkbox-selected-pressed-icon-color: #ffd54f; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #ffd54f; --mdc-checkbox-selected-hover-state-layer-color: #ffd54f; --mdc-checkbox-selected-pressed-state-layer-color: #ffd54f; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; --mat-checkbox-disabled-label-color: rgba(0, 0, 0, 0.38); --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87); --mdc-text-button-container-shape: 4px; --mdc-text-button-keep-touch-target: false; --mdc-filled-button-container-shape: 4px; --mdc-filled-button-keep-touch-target: false; --mdc-protected-button-container-shape: 4px; --mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-outlined-button-keep-touch-target: false; --mdc-outlined-button-outline-width: 1px; --mdc-outlined-button-container-shape: 4px; --mat-text-button-horizontal-padding: 8px; --mat-text-button-with-icon-horizontal-padding: 8px; --mat-text-button-icon-spacing: 8px; --mat-text-button-icon-offset: 0; --mat-filled-button-horizontal-padding: 16px; --mat-filled-button-icon-spacing: 8px; --mat-filled-button-icon-offset: -4px; --mat-protected-button-horizontal-padding: 16px; --mat-protected-button-icon-spacing: 8px; --mat-protected-button-icon-offset: -4px; --mat-outlined-button-horizontal-padding: 15px; --mat-outlined-button-icon-spacing: 8px; --mat-outlined-button-icon-offset: -4px; --mdc-text-button-label-text-color: black; --mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mat-text-button-state-layer-color: black; --mat-text-button-disabled-state-layer-color: black; --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-text-button-hover-state-layer-opacity: 0.04; --mat-text-button-focus-state-layer-opacity: 0.12; --mat-text-button-pressed-state-layer-opacity: 0.12; --mdc-filled-button-container-color: white; --mdc-filled-button-label-text-color: black; --mdc-filled-button-disabled-container-color: rgba(0, 0, 0, 0.12); --mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mat-filled-button-state-layer-color: black; --mat-filled-button-disabled-state-layer-color: black; --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-filled-button-hover-state-layer-opacity: 0.04; --mat-filled-button-focus-state-layer-opacity: 0.12; --mat-filled-button-pressed-state-layer-opacity: 0.12; --mdc-protected-button-container-color: white; --mdc-protected-button-label-text-color: black; --mdc-protected-button-disabled-container-color: rgba(0, 0, 0, 0.12); --mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mat-protected-button-state-layer-color: black; --mat-protected-button-disabled-state-layer-color: black; --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-protected-button-hover-state-layer-opacity: 0.04; --mat-protected-button-focus-state-layer-opacity: 0.12; --mat-protected-button-pressed-state-layer-opacity: 0.12; --mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, 0.12); --mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mdc-outlined-button-label-text-color: black; --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12); --mat-outlined-button-state-layer-color: black; --mat-outlined-button-disabled-state-layer-color: black; --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-outlined-button-hover-state-layer-opacity: 0.04; --mat-outlined-button-focus-state-layer-opacity: 0.12; --mat-outlined-button-pressed-state-layer-opacity: 0.12; --mdc-icon-button-icon-size: 24px; --mdc-icon-button-icon-color: inherit; --mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, 0.38); --mat-icon-button-state-layer-color: black; --mat-icon-button-disabled-state-layer-color: black; --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-icon-button-hover-state-layer-opacity: 0.04; --mat-icon-button-focus-state-layer-opacity: 0.12; --mat-icon-button-pressed-state-layer-opacity: 0.12; --mdc-fab-container-shape: 50%; --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mdc-fab-small-container-shape: 50%; --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mdc-extended-fab-container-height: 48px; --mdc-extended-fab-container-shape: 24px; --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mdc-fab-container-color: white; --mat-fab-foreground-color: black; --mat-fab-state-layer-color: black; --mat-fab-disabled-state-layer-color: black; --mat-fab-ripple-color: rgba(0, 0, 0, 0.1); --mat-fab-hover-state-layer-opacity: 0.04; --mat-fab-focus-state-layer-opacity: 0.12; --mat-fab-pressed-state-layer-opacity: 0.12; --mat-fab-disabled-state-container-color: rgba(0, 0, 0, 0.12); --mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, 0.38); --mdc-fab-small-container-color: white; --mat-fab-small-foreground-color: black; --mat-fab-small-state-layer-color: black; --mat-fab-small-disabled-state-layer-color: black; --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1); --mat-fab-small-hover-state-layer-opacity: 0.04; --mat-fab-small-focus-state-layer-opacity: 0.12; --mat-fab-small-pressed-state-layer-opacity: 0.12; --mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, 0.12); --mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, 0.38); --mdc-snackbar-container-shape: 4px; --mdc-snackbar-container-color: #333333; --mdc-snackbar-supporting-text-color: rgba(255, 255, 255, 0.87); --mat-snack-bar-button-color: #ffd54f; --mat-table-row-item-outline-width: 1px; --mat-table-background-color: white; --mat-table-header-headline-color: rgba(0, 0, 0, 0.87); --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87); --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12); --mdc-circular-progress-active-indicator-width: 4px; --mdc-circular-progress-size: 48px; --mdc-circular-progress-active-indicator-color: #ffa726; --mat-badge-container-shape: 50%; --mat-badge-container-size: unset; --mat-badge-small-size-container-size: unset; --mat-badge-large-size-container-size: unset; --mat-badge-legacy-container-size: 22px; --mat-badge-legacy-small-size-container-size: 16px; --mat-badge-legacy-large-size-container-size: 28px; --mat-badge-container-offset: -11px 0; --mat-badge-small-size-container-offset: -8px 0; --mat-badge-large-size-container-offset: -14px 0; --mat-badge-container-overlap-offset: -11px; --mat-badge-small-size-container-overlap-offset: -8px; --mat-badge-large-size-container-overlap-offset: -14px; --mat-badge-container-padding: 0; --mat-badge-small-size-container-padding: 0; --mat-badge-large-size-container-padding: 0; --mat-badge-background-color: #ffa726; --mat-badge-text-color: rgba(0, 0, 0, 0.87); --mat-badge-disabled-state-background-color: #b9b9b9; --mat-badge-disabled-state-text-color: rgba(0, 0, 0, 0.38); --mat-bottom-sheet-container-shape: 4px; --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87); --mat-bottom-sheet-container-background-color: white; --mat-legacy-button-toggle-height: 36px; --mat-legacy-button-toggle-shape: 2px; --mat-legacy-button-toggle-focus-state-layer-opacity: 1; --mat-standard-button-toggle-shape: 4px; --mat-standard-button-toggle-hover-state-layer-opacity: 0.04; --mat-standard-button-toggle-focus-state-layer-opacity: 0.12; --mat-legacy-button-toggle-text-color: rgba(0, 0, 0, 0.38); --mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, 0.12); --mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.54); --mat-legacy-button-toggle-selected-state-background-color: #e0e0e0; --mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26); --mat-legacy-button-toggle-disabled-state-background-color: #eeeeee; --mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd; --mat-standard-button-toggle-text-color: rgba(0, 0, 0, 0.87); --mat-standard-button-toggle-background-color: white; --mat-standard-button-toggle-state-layer-color: black; --mat-standard-button-toggle-selected-state-background-color: #e0e0e0; --mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26); --mat-standard-button-toggle-disabled-state-background-color: white; --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd; --mat-standard-button-toggle-divider-color: #e0e0e0; --mat-datepicker-calendar-container-shape: 4px; --mat-datepicker-calendar-container-touch-shape: 4px; --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); --mat-datepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-selected-state-background-color: #ffa726; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(255, 167, 38, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-focus-state-background-color: rgba(255, 167, 38, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(255, 167, 38, 0.3); --mat-datepicker-toggle-active-state-icon-color: #ffa726; --mat-datepicker-calendar-date-in-range-state-background-color: rgba(255, 167, 38, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e; --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-period-button-text-color: black; --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12); --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.38); --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, 0.18); --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-outline-color: transparent; --mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, 0.38); --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.24); --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87); --mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, 0.38); --mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, 0.38); --mat-datepicker-calendar-container-background-color: white; --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87); --mat-divider-width: 1px; --mat-divider-color: rgba(0, 0, 0, 0.12); --mat-expansion-container-shape: 4px; --mat-expansion-legacy-header-indicator-display: inline-block; --mat-expansion-header-indicator-display: none; --mat-expansion-container-background-color: white; --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87); --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12); --mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, 0.26); --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87); --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54); --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54); --mat-icon-color: inherit; --mat-sidenav-container-shape: 0; --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); --mat-sidenav-container-width: auto; --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12); --mat-sidenav-container-background-color: white; --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87); --mat-sidenav-content-background-color: #fafafa; --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87); --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6); --mat-stepper-header-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-selected-state-icon-background-color: #ffa726; --mat-stepper-header-selected-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-done-state-icon-background-color: #ffa726; --mat-stepper-header-done-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-edit-state-icon-background-color: #ffa726; --mat-stepper-header-edit-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-container-color: white; --mat-stepper-line-color: rgba(0, 0, 0, 0.12); --mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54); --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54); --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-error-state-label-text-color: #f44336; --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54); --mat-stepper-header-error-state-icon-foreground-color: #f44336; --mat-stepper-header-error-state-icon-background-color: transparent; --mat-sort-arrow-color: #757575; --mat-toolbar-container-background-color: whitesmoke; --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87); --mat-tree-container-background-color: white; --mat-tree-node-text-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-accent { --mat-option-selected-state-label-text-color: #ffd54f; --mat-option-label-text-color: rgba(0, 0, 0, 0.87); --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04); } [data-theme=light] .mat-warn { --mat-option-selected-state-label-text-color: #f44336; --mat-option-label-text-color: rgba(0, 0, 0, 0.87); --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04); } [data-theme=light] .mat-primary { --mat-full-pseudo-checkbox-selected-icon-color: #ffa726; --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0; --mat-minimal-pseudo-checkbox-selected-checkmark-color: #ffa726; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0; } [data-theme=light] .mat-accent { --mat-full-pseudo-checkbox-selected-icon-color: #ffd54f; --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0; --mat-minimal-pseudo-checkbox-selected-checkmark-color: #ffd54f; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0; } [data-theme=light] .mat-warn { --mat-full-pseudo-checkbox-selected-icon-color: #f44336; --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0; --mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0; } [data-theme=light] .mat-mdc-progress-bar { --mdc-linear-progress-active-indicator-color: #ffa726; --mdc-linear-progress-track-color: rgba(255, 167, 38, 0.25); } [data-theme=light] .mat-mdc-progress-bar.mat-accent { --mdc-linear-progress-active-indicator-color: #ffd54f; --mdc-linear-progress-track-color: rgba(255, 213, 79, 0.25); } [data-theme=light] .mat-mdc-progress-bar.mat-warn { --mdc-linear-progress-active-indicator-color: #f44336; --mdc-linear-progress-track-color: rgba(244, 67, 54, 0.25); } [data-theme=light] .mat-mdc-form-field.mat-accent { --mdc-filled-text-field-caret-color: #ffd54f; --mdc-filled-text-field-focus-active-indicator-color: #ffd54f; --mdc-filled-text-field-focus-label-text-color: rgba(255, 213, 79, 0.87); --mdc-outlined-text-field-caret-color: #ffd54f; --mdc-outlined-text-field-focus-outline-color: #ffd54f; --mdc-outlined-text-field-focus-label-text-color: rgba(255, 213, 79, 0.87); --mat-form-field-focus-select-arrow-color: rgba(255, 213, 79, 0.87); } [data-theme=light] .mat-mdc-form-field.mat-warn { --mdc-filled-text-field-caret-color: #f44336; --mdc-filled-text-field-focus-active-indicator-color: #f44336; --mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, 0.87); --mdc-outlined-text-field-caret-color: #f44336; --mdc-outlined-text-field-focus-outline-color: #f44336; --mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, 0.87); --mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, 0.87); } [data-theme=light] .mat-mdc-form-field.mat-accent { --mat-select-panel-background-color: white; --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87); --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38); --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6); --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54); --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38); --mat-select-focused-arrow-color: rgba(255, 213, 79, 0.87); --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87); } [data-theme=light] .mat-mdc-form-field.mat-warn { --mat-select-panel-background-color: white; --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87); --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38); --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6); --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54); --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38); --mat-select-focused-arrow-color: rgba(244, 67, 54, 0.87); --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87); } [data-theme=light] .mat-mdc-standard-chip { --mdc-chip-container-shape-radius: 16px; --mdc-chip-with-avatar-avatar-shape-radius: 14px; --mdc-chip-with-avatar-avatar-size: 28px; --mdc-chip-with-icon-icon-size: 18px; --mdc-chip-outline-width: 0; --mdc-chip-outline-color: transparent; --mdc-chip-disabled-outline-color: transparent; --mdc-chip-focus-outline-color: transparent; --mdc-chip-hover-state-layer-opacity: 0.04; --mdc-chip-with-avatar-disabled-avatar-opacity: 1; --mdc-chip-flat-selected-outline-width: 0; --mdc-chip-selected-hover-state-layer-opacity: 0.04; --mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1; --mdc-chip-with-icon-disabled-icon-opacity: 1; --mat-chip-disabled-container-opacity: 0.4; --mat-chip-trailing-action-opacity: 0.54; --mat-chip-trailing-action-focus-opacity: 1; --mat-chip-trailing-action-state-layer-color: transparent; --mat-chip-selected-trailing-action-state-layer-color: transparent; --mat-chip-trailing-action-hover-state-layer-opacity: 0; --mat-chip-trailing-action-focus-state-layer-opacity: 0; } [data-theme=light] .mat-mdc-standard-chip { --mdc-chip-disabled-label-text-color: #212121; --mdc-chip-elevated-container-color: #e0e0e0; --mdc-chip-elevated-selected-container-color: #e0e0e0; --mdc-chip-elevated-disabled-container-color: #e0e0e0; --mdc-chip-flat-disabled-selected-container-color: #e0e0e0; --mdc-chip-focus-state-layer-color: black; --mdc-chip-hover-state-layer-color: black; --mdc-chip-selected-hover-state-layer-color: black; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: black; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: #212121; --mdc-chip-selected-label-text-color: #212121; --mdc-chip-with-icon-icon-color: #212121; --mdc-chip-with-icon-disabled-icon-color: #212121; --mdc-chip-with-icon-selected-icon-color: #212121; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121; --mdc-chip-with-trailing-icon-trailing-icon-color: #212121; --mat-chip-selected-disabled-trailing-icon-color: #212121; --mat-chip-selected-trailing-icon-color: #212121; } [data-theme=light] .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, [data-theme=light] .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary { --mdc-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-elevated-container-color: #ffa726; --mdc-chip-elevated-selected-container-color: #ffa726; --mdc-chip-elevated-disabled-container-color: #ffa726; --mdc-chip-flat-disabled-selected-container-color: #ffa726; --mdc-chip-focus-state-layer-color: black; --mdc-chip-hover-state-layer-color: black; --mdc-chip-selected-hover-state-layer-color: black; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: black; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-selected-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, [data-theme=light] .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent { --mdc-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-elevated-container-color: #ffd54f; --mdc-chip-elevated-selected-container-color: #ffd54f; --mdc-chip-elevated-disabled-container-color: #ffd54f; --mdc-chip-flat-disabled-selected-container-color: #ffd54f; --mdc-chip-focus-state-layer-color: black; --mdc-chip-hover-state-layer-color: black; --mdc-chip-selected-hover-state-layer-color: black; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: black; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-selected-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, [data-theme=light] .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn { --mdc-chip-disabled-label-text-color: white; --mdc-chip-elevated-container-color: #f44336; --mdc-chip-elevated-selected-container-color: #f44336; --mdc-chip-elevated-disabled-container-color: #f44336; --mdc-chip-flat-disabled-selected-container-color: #f44336; --mdc-chip-focus-state-layer-color: black; --mdc-chip-hover-state-layer-color: black; --mdc-chip-selected-hover-state-layer-color: black; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: black; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: white; --mdc-chip-selected-label-text-color: white; --mdc-chip-with-icon-icon-color: white; --mdc-chip-with-icon-disabled-icon-color: white; --mdc-chip-with-icon-selected-icon-color: white; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white; --mdc-chip-with-trailing-icon-trailing-icon-color: white; --mat-chip-selected-disabled-trailing-icon-color: white; --mat-chip-selected-trailing-icon-color: white; } [data-theme=light] .mat-mdc-slide-toggle { --mat-switch-disabled-selected-handle-opacity: 0.38; --mat-switch-disabled-unselected-handle-opacity: 0.38; --mat-switch-unselected-handle-size: 20px; --mat-switch-selected-handle-size: 20px; --mat-switch-pressed-handle-size: 20px; --mat-switch-with-icon-handle-size: 20px; --mat-switch-selected-handle-horizontal-margin: 0; --mat-switch-selected-with-icon-handle-horizontal-margin: 0; --mat-switch-selected-pressed-handle-horizontal-margin: 0; --mat-switch-unselected-handle-horizontal-margin: 0; --mat-switch-unselected-with-icon-handle-horizontal-margin: 0; --mat-switch-unselected-pressed-handle-horizontal-margin: 0; --mat-switch-visible-track-opacity: 1; --mat-switch-hidden-track-opacity: 1; --mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1); --mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1); --mat-switch-track-outline-width: 1px; --mat-switch-track-outline-color: transparent; --mat-switch-selected-track-outline-width: 1px; --mat-switch-selected-track-outline-color: transparent; --mat-switch-disabled-unselected-track-outline-width: 1px; --mat-switch-disabled-unselected-track-outline-color: transparent; } [data-theme=light] .mat-mdc-slide-toggle { --mat-switch-label-text-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-mdc-slide-toggle.mat-accent { --mdc-switch-selected-focus-state-layer-color: #ffb300; --mdc-switch-selected-handle-color: #ffb300; --mdc-switch-selected-hover-state-layer-color: #ffb300; --mdc-switch-selected-pressed-state-layer-color: #ffb300; --mdc-switch-selected-focus-handle-color: #ff6f00; --mdc-switch-selected-hover-handle-color: #ff6f00; --mdc-switch-selected-pressed-handle-color: #ff6f00; --mdc-switch-selected-focus-track-color: #ffd54f; --mdc-switch-selected-hover-track-color: #ffd54f; --mdc-switch-selected-pressed-track-color: #ffd54f; --mdc-switch-selected-track-color: #ffd54f; } [data-theme=light] .mat-mdc-slide-toggle.mat-warn { --mdc-switch-selected-focus-state-layer-color: #e53935; --mdc-switch-selected-handle-color: #e53935; --mdc-switch-selected-hover-state-layer-color: #e53935; --mdc-switch-selected-pressed-state-layer-color: #e53935; --mdc-switch-selected-focus-handle-color: #b71c1c; --mdc-switch-selected-hover-handle-color: #b71c1c; --mdc-switch-selected-pressed-handle-color: #b71c1c; --mdc-switch-selected-focus-track-color: #e57373; --mdc-switch-selected-hover-track-color: #e57373; --mdc-switch-selected-pressed-track-color: #e57373; --mdc-switch-selected-track-color: #e57373; } [data-theme=light] .mat-mdc-radio-button.mat-primary { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #ffa726; --mdc-radio-selected-hover-icon-color: #ffa726; --mdc-radio-selected-icon-color: #ffa726; --mdc-radio-selected-pressed-icon-color: #ffa726; --mat-radio-ripple-color: black; --mat-radio-checked-ripple-color: #ffa726; --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38); --mat-radio-label-text-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-mdc-radio-button.mat-accent { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #ffd54f; --mdc-radio-selected-hover-icon-color: #ffd54f; --mdc-radio-selected-icon-color: #ffd54f; --mdc-radio-selected-pressed-icon-color: #ffd54f; --mat-radio-ripple-color: black; --mat-radio-checked-ripple-color: #ffd54f; --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38); --mat-radio-label-text-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-mdc-radio-button.mat-warn { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #f44336; --mdc-radio-selected-hover-icon-color: #f44336; --mdc-radio-selected-icon-color: #f44336; --mdc-radio-selected-pressed-icon-color: #f44336; --mat-radio-ripple-color: black; --mat-radio-checked-ripple-color: #f44336; --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38); --mat-radio-label-text-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-accent { --mdc-slider-handle-color: #ffd54f; --mdc-slider-focus-handle-color: #ffd54f; --mdc-slider-hover-handle-color: #ffd54f; --mdc-slider-active-track-color: #ffd54f; --mdc-slider-inactive-track-color: #ffd54f; --mdc-slider-with-tick-marks-inactive-container-color: #ffd54f; --mdc-slider-with-tick-marks-active-container-color: rgba(0, 0, 0, 0.87); --mat-slider-ripple-color: #ffd54f; --mat-slider-hover-state-layer-color: rgba(255, 213, 79, 0.05); --mat-slider-focus-state-layer-color: rgba(255, 213, 79, 0.2); } [data-theme=light] .mat-warn { --mdc-slider-handle-color: #f44336; --mdc-slider-focus-handle-color: #f44336; --mdc-slider-hover-handle-color: #f44336; --mdc-slider-active-track-color: #f44336; --mdc-slider-inactive-track-color: #f44336; --mdc-slider-with-tick-marks-inactive-container-color: #f44336; --mdc-slider-with-tick-marks-active-container-color: white; --mat-slider-ripple-color: #f44336; --mat-slider-hover-state-layer-color: rgba(244, 67, 54, 0.05); --mat-slider-focus-state-layer-color: rgba(244, 67, 54, 0.2); } [data-theme=light] .mdc-list-item__start, [data-theme=light] .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #ffa726; --mdc-radio-selected-hover-icon-color: #ffa726; --mdc-radio-selected-icon-color: #ffa726; --mdc-radio-selected-pressed-icon-color: #ffa726; } [data-theme=light] .mat-accent .mdc-list-item__start, [data-theme=light] .mat-accent .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #ffd54f; --mdc-radio-selected-hover-icon-color: #ffd54f; --mdc-radio-selected-icon-color: #ffd54f; --mdc-radio-selected-pressed-icon-color: #ffd54f; } [data-theme=light] .mat-warn .mdc-list-item__start, [data-theme=light] .mat-warn .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #f44336; --mdc-radio-selected-hover-icon-color: #f44336; --mdc-radio-selected-icon-color: #f44336; --mdc-radio-selected-pressed-icon-color: #f44336; } [data-theme=light] .mat-mdc-list-option { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #ffa726; --mdc-checkbox-selected-hover-icon-color: #ffa726; --mdc-checkbox-selected-icon-color: #ffa726; --mdc-checkbox-selected-pressed-icon-color: #ffa726; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #ffa726; --mdc-checkbox-selected-hover-state-layer-color: #ffa726; --mdc-checkbox-selected-pressed-state-layer-color: #ffa726; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } [data-theme=light] .mat-mdc-list-option.mat-accent { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #ffd54f; --mdc-checkbox-selected-hover-icon-color: #ffd54f; --mdc-checkbox-selected-icon-color: #ffd54f; --mdc-checkbox-selected-pressed-icon-color: #ffd54f; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #ffd54f; --mdc-checkbox-selected-hover-state-layer-color: #ffd54f; --mdc-checkbox-selected-pressed-state-layer-color: #ffd54f; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } [data-theme=light] .mat-mdc-list-option.mat-warn { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #f44336; --mdc-checkbox-selected-hover-icon-color: #f44336; --mdc-checkbox-selected-icon-color: #f44336; --mdc-checkbox-selected-pressed-icon-color: #f44336; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #f44336; --mdc-checkbox-selected-hover-state-layer-color: #f44336; --mdc-checkbox-selected-pressed-state-layer-color: #f44336; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } [data-theme=light] .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text, [data-theme=light] .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start, [data-theme=light] .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text, [data-theme=light] .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start { color: #ffa726; } [data-theme=light] .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start, [data-theme=light] .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content, [data-theme=light] .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end { opacity: 1; } [data-theme=light] .mat-mdc-tab-group, [data-theme=light] .mat-mdc-tab-nav-bar { --mdc-tab-indicator-active-indicator-color: #ffa726; --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38); --mat-tab-header-pagination-icon-color: black; --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-label-text-color: #ffa726; --mat-tab-header-active-ripple-color: #ffa726; --mat-tab-header-inactive-ripple-color: #ffa726; --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-focus-label-text-color: #ffa726; --mat-tab-header-active-hover-label-text-color: #ffa726; --mat-tab-header-active-focus-indicator-color: #ffa726; --mat-tab-header-active-hover-indicator-color: #ffa726; } [data-theme=light] .mat-mdc-tab-group.mat-accent, [data-theme=light] .mat-mdc-tab-nav-bar.mat-accent { --mdc-tab-indicator-active-indicator-color: #ffd54f; --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38); --mat-tab-header-pagination-icon-color: black; --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-label-text-color: #ffd54f; --mat-tab-header-active-ripple-color: #ffd54f; --mat-tab-header-inactive-ripple-color: #ffd54f; --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-focus-label-text-color: #ffd54f; --mat-tab-header-active-hover-label-text-color: #ffd54f; --mat-tab-header-active-focus-indicator-color: #ffd54f; --mat-tab-header-active-hover-indicator-color: #ffd54f; } [data-theme=light] .mat-mdc-tab-group.mat-warn, [data-theme=light] .mat-mdc-tab-nav-bar.mat-warn { --mdc-tab-indicator-active-indicator-color: #f44336; --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38); --mat-tab-header-pagination-icon-color: black; --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-label-text-color: #f44336; --mat-tab-header-active-ripple-color: #f44336; --mat-tab-header-inactive-ripple-color: #f44336; --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-focus-label-text-color: #f44336; --mat-tab-header-active-hover-label-text-color: #f44336; --mat-tab-header-active-focus-indicator-color: #f44336; --mat-tab-header-active-hover-indicator-color: #f44336; } [data-theme=light] .mat-mdc-tab-group.mat-background-primary, [data-theme=light] .mat-mdc-tab-nav-bar.mat-background-primary { --mat-tab-header-with-background-background-color: #ffa726; --mat-tab-header-with-background-foreground-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-mdc-tab-group.mat-background-accent, [data-theme=light] .mat-mdc-tab-nav-bar.mat-background-accent { --mat-tab-header-with-background-background-color: #ffd54f; --mat-tab-header-with-background-foreground-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-mdc-tab-group.mat-background-warn, [data-theme=light] .mat-mdc-tab-nav-bar.mat-background-warn { --mat-tab-header-with-background-background-color: #f44336; --mat-tab-header-with-background-foreground-color: white; } [data-theme=light] .mat-mdc-checkbox.mat-primary { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #ffa726; --mdc-checkbox-selected-hover-icon-color: #ffa726; --mdc-checkbox-selected-icon-color: #ffa726; --mdc-checkbox-selected-pressed-icon-color: #ffa726; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #ffa726; --mdc-checkbox-selected-hover-state-layer-color: #ffa726; --mdc-checkbox-selected-pressed-state-layer-color: #ffa726; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } [data-theme=light] .mat-mdc-checkbox.mat-warn { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #f44336; --mdc-checkbox-selected-hover-icon-color: #f44336; --mdc-checkbox-selected-icon-color: #f44336; --mdc-checkbox-selected-pressed-icon-color: #f44336; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #f44336; --mdc-checkbox-selected-hover-state-layer-color: #f44336; --mdc-checkbox-selected-pressed-state-layer-color: #f44336; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } [data-theme=light] .mat-mdc-button.mat-primary { --mdc-text-button-label-text-color: #ffa726; --mat-text-button-state-layer-color: #ffa726; --mat-text-button-ripple-color: rgba(255, 167, 38, 0.1); } [data-theme=light] .mat-mdc-button.mat-accent { --mdc-text-button-label-text-color: #ffd54f; --mat-text-button-state-layer-color: #ffd54f; --mat-text-button-ripple-color: rgba(255, 213, 79, 0.1); } [data-theme=light] .mat-mdc-button.mat-warn { --mdc-text-button-label-text-color: #f44336; --mat-text-button-state-layer-color: #f44336; --mat-text-button-ripple-color: rgba(244, 67, 54, 0.1); } [data-theme=light] .mat-mdc-unelevated-button.mat-primary { --mdc-filled-button-container-color: #ffa726; --mdc-filled-button-label-text-color: black; --mat-filled-button-state-layer-color: black; --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1); } [data-theme=light] .mat-mdc-unelevated-button.mat-accent { --mdc-filled-button-container-color: #ffd54f; --mdc-filled-button-label-text-color: black; --mat-filled-button-state-layer-color: black; --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1); } [data-theme=light] .mat-mdc-unelevated-button.mat-warn { --mdc-filled-button-container-color: #f44336; --mdc-filled-button-label-text-color: white; --mat-filled-button-state-layer-color: white; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1); } [data-theme=light] .mat-mdc-raised-button.mat-primary { --mdc-protected-button-container-color: #ffa726; --mdc-protected-button-label-text-color: black; --mat-protected-button-state-layer-color: black; --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1); } [data-theme=light] .mat-mdc-raised-button.mat-accent { --mdc-protected-button-container-color: #ffd54f; --mdc-protected-button-label-text-color: black; --mat-protected-button-state-layer-color: black; --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1); } [data-theme=light] .mat-mdc-raised-button.mat-warn { --mdc-protected-button-container-color: #f44336; --mdc-protected-button-label-text-color: white; --mat-protected-button-state-layer-color: white; --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1); } [data-theme=light] .mat-mdc-outlined-button.mat-primary { --mdc-outlined-button-label-text-color: #ffa726; --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12); --mat-outlined-button-state-layer-color: #ffa726; --mat-outlined-button-ripple-color: rgba(255, 167, 38, 0.1); } [data-theme=light] .mat-mdc-outlined-button.mat-accent { --mdc-outlined-button-label-text-color: #ffd54f; --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12); --mat-outlined-button-state-layer-color: #ffd54f; --mat-outlined-button-ripple-color: rgba(255, 213, 79, 0.1); } [data-theme=light] .mat-mdc-outlined-button.mat-warn { --mdc-outlined-button-label-text-color: #f44336; --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12); --mat-outlined-button-state-layer-color: #f44336; --mat-outlined-button-ripple-color: rgba(244, 67, 54, 0.1); } [data-theme=light] .mat-mdc-icon-button.mat-primary { --mdc-icon-button-icon-color: #ffa726; --mat-icon-button-state-layer-color: #ffa726; --mat-icon-button-ripple-color: rgba(255, 167, 38, 0.1); } [data-theme=light] .mat-mdc-icon-button.mat-accent { --mdc-icon-button-icon-color: #ffd54f; --mat-icon-button-state-layer-color: #ffd54f; --mat-icon-button-ripple-color: rgba(255, 213, 79, 0.1); } [data-theme=light] .mat-mdc-icon-button.mat-warn { --mdc-icon-button-icon-color: #f44336; --mat-icon-button-state-layer-color: #f44336; --mat-icon-button-ripple-color: rgba(244, 67, 54, 0.1); } [data-theme=light] .mat-mdc-fab.mat-primary { --mdc-fab-container-color: #ffa726; --mat-fab-foreground-color: black; --mat-fab-state-layer-color: black; --mat-fab-ripple-color: rgba(0, 0, 0, 0.1); } [data-theme=light] .mat-mdc-fab.mat-accent { --mdc-fab-container-color: #ffd54f; --mat-fab-foreground-color: black; --mat-fab-state-layer-color: black; --mat-fab-ripple-color: rgba(0, 0, 0, 0.1); } [data-theme=light] .mat-mdc-fab.mat-warn { --mdc-fab-container-color: #f44336; --mat-fab-foreground-color: white; --mat-fab-state-layer-color: white; --mat-fab-ripple-color: rgba(255, 255, 255, 0.1); } [data-theme=light] .mat-mdc-mini-fab.mat-primary { --mdc-fab-small-container-color: #ffa726; --mat-fab-small-foreground-color: black; --mat-fab-small-state-layer-color: black; --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1); } [data-theme=light] .mat-mdc-mini-fab.mat-accent { --mdc-fab-small-container-color: #ffd54f; --mat-fab-small-foreground-color: black; --mat-fab-small-state-layer-color: black; --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1); } [data-theme=light] .mat-mdc-mini-fab.mat-warn { --mdc-fab-small-container-color: #f44336; --mat-fab-small-foreground-color: white; --mat-fab-small-state-layer-color: white; --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1); } [data-theme=light] .mat-accent { --mdc-circular-progress-active-indicator-color: #ffd54f; } [data-theme=light] .mat-warn { --mdc-circular-progress-active-indicator-color: #f44336; } [data-theme=light] .mat-badge-accent { --mat-badge-background-color: #ffd54f; --mat-badge-text-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-badge-warn { --mat-badge-background-color: #f44336; --mat-badge-text-color: white; } [data-theme=light] .mat-datepicker-content.mat-accent { --mat-datepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-selected-state-background-color: #ffd54f; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(255, 213, 79, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-focus-state-background-color: rgba(255, 213, 79, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(255, 213, 79, 0.3); --mat-datepicker-calendar-date-in-range-state-background-color: rgba(255, 213, 79, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e; } [data-theme=light] .mat-datepicker-content.mat-warn { --mat-datepicker-calendar-date-selected-state-text-color: white; --mat-datepicker-calendar-date-selected-state-background-color: #f44336; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: white; --mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, 0.3); --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e; } [data-theme=light] .mat-datepicker-toggle-active.mat-accent { --mat-datepicker-toggle-active-state-icon-color: #ffd54f; } [data-theme=light] .mat-datepicker-toggle-active.mat-warn { --mat-datepicker-toggle-active-state-icon-color: #f44336; } [data-theme=light] .mat-icon.mat-primary { --mat-icon-color: #ffa726; } [data-theme=light] .mat-icon.mat-accent { --mat-icon-color: #ffd54f; } [data-theme=light] .mat-icon.mat-warn { --mat-icon-color: #f44336; } [data-theme=light] .mat-step-header.mat-accent { --mat-stepper-header-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-selected-state-icon-background-color: #ffd54f; --mat-stepper-header-selected-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-done-state-icon-background-color: #ffd54f; --mat-stepper-header-done-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-edit-state-icon-background-color: #ffd54f; --mat-stepper-header-edit-state-icon-foreground-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-step-header.mat-warn { --mat-stepper-header-icon-foreground-color: white; --mat-stepper-header-selected-state-icon-background-color: #f44336; --mat-stepper-header-selected-state-icon-foreground-color: white; --mat-stepper-header-done-state-icon-background-color: #f44336; --mat-stepper-header-done-state-icon-foreground-color: white; --mat-stepper-header-edit-state-icon-background-color: #f44336; --mat-stepper-header-edit-state-icon-foreground-color: white; } [data-theme=light] .mat-toolbar.mat-primary { --mat-toolbar-container-background-color: #ffa726; --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-toolbar.mat-accent { --mat-toolbar-container-background-color: #ffd54f; --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-toolbar.mat-warn { --mat-toolbar-container-background-color: #f44336; --mat-toolbar-container-text-color: white; } :root { --ngx-bg-canvas: var(--surface-page); --ngx-bg-surface: var(--surface-card); --ngx-bg-surface-sunken: var(--surface-sidebar); --ngx-bg-hover: var(--surface-hover); --ngx-bg-selected: var(--surface-active); --ngx-text-primary: var(--text-primary); --ngx-text-secondary: var(--text-secondary); --ngx-text-tertiary: var(--text-tertiary); --ngx-interactive-primary: var(--brand); --ngx-interactive-primary-hover: var(--brand-hover); --ngx-interactive-primary-active: var(--brand-active); --ngx-interactive-on-primary: var(--text-on-brand); --ngx-border-subtle: var(--border-subtle); --ngx-border-brand: var(--brand); --ngx-border-brand-subtle: var(--brand-soft); --ngx-font-body: var(--font-sans); --ngx-font-mono: var(--font-mono); --ngx-feedback-success: var(--money-in); --ngx-feedback-success-bg: rgba(63,207,142,0.12); --ngx-feedback-danger: var(--money-out); --ngx-feedback-danger-bg: rgba(242,105,109,0.12); --ngx-feedback-warning: #F5C951; --ngx-feedback-warning-bg: rgba(245,201,81,0.12); --ngx-feedback-info: #6FB4F5; --ngx-feedback-info-bg: rgba(111,180,245,0.12); --ngx-text-disabled: #3D3D45; --ngx-brand-primary: var(--brand); --ngx-brand-secondary: var(--brand); --ngx-bg-surface-raised: #1E1E22; --ngx-bg-selected-strong: rgba(255,255,255,0.12); --ngx-bg-elevated: rgba(255,255,255,0.06); --ngx-shadow-sm: var(--shadow-card); --ngx-shadow-md: var(--shadow-raised); --ngx-shadow-lg: var(--shadow-overlay); --ngx-glass-bg-thin: #18181B; --ngx-glass-border: rgba(255,255,255,0.07); --ngx-blur-md: 0px; --bg-primary: var(--ngx-bg-canvas); --bg-secondary: var(--ngx-bg-surface-sunken); --bg-card: var(--ngx-bg-surface); --bg-card-hover: var(--ngx-bg-hover); --bg-input: var(--ngx-bg-surface-sunken); --border-color: var(--ngx-border-subtle); --border-color-light: var(--ngx-border-subtle); --text-primary: var(--ngx-text-primary); --text-secondary: var(--ngx-text-secondary); --text-muted: var(--ngx-text-tertiary); --color-primary: var(--ngx-interactive-primary); --color-primary-rgb: 247, 149, 32; --color-primary-light: var(--ngx-interactive-primary-hover); --color-primary-dark: var(--ngx-interactive-primary-active); --color-accent: var(--ngx-interactive-primary); --color-gradient: linear-gradient(135deg, #DE7E0E 0%, #F79520 100%); --color-gradient-soft: linear-gradient(135deg, rgba(247,149,32,0.18) 0%, rgba(247,149,32,0.08) 100%); --color-success: var(--ngx-feedback-success); --color-danger: var(--ngx-feedback-danger); --color-warning: var(--ngx-feedback-warning); --color-info: var(--ngx-feedback-info); --shadow-card: var(--ngx-shadow-sm); --shadow-elevated: var(--ngx-shadow-lg); --glow-cyan: 0 0 24px rgba(247,149,32,0.10); --glow-indigo: 0 0 24px rgba(247,149,32,0.08); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --sidebar-width: 252px; --header-height: 60px; --bg-header: #121214; } [data-theme=light] { --ngx-bg-canvas: #F7F7F9; --ngx-bg-surface: #FFFFFF; --ngx-bg-surface-sunken: #ECECF1; --ngx-bg-hover: rgba(18,18,20,0.04); --ngx-bg-selected: rgba(18,18,20,0.06); --ngx-text-primary: #121214; --ngx-text-secondary: #45454D; --ngx-text-tertiary: #6C6C76; --ngx-border-subtle: rgba(18,18,20,0.08); --ngx-shadow-sm: 0 1px 2px rgba(18,18,20,0.05), 0 2px 8px rgba(18,18,20,0.04); --ngx-shadow-lg: 0 12px 40px rgba(18,18,20,0.16), 0 2px 8px rgba(18,18,20,0.08); --ngx-glass-bg-thin: #FFFFFF; --ngx-glass-border: rgba(18,18,20,0.08); --bg-header: #FFFFFF; } :root { --mdc-filled-text-field-container-color: var(--bg-input); --mdc-filled-text-field-input-text-color: var(--text-primary); --mdc-filled-text-field-label-text-color: var(--text-secondary); --mdc-filled-text-field-disabled-container-color: var(--bg-secondary); --mdc-outlined-text-field-input-text-color: var(--text-primary); --mdc-outlined-text-field-label-text-color: var(--text-secondary); --mat-form-field-container-text-color: var(--text-primary); --mat-select-trigger-text-color: var(--text-primary); --mat-select-placeholder-text-color: var(--text-muted); --mat-option-label-text-color: var(--text-primary); --mat-option-selected-state-label-text-color: var(--color-primary); --mat-option-hover-state-layer-color: rgba(247, 149, 32, 0.08); --mat-autocomplete-background-color: var(--bg-card); --mat-menu-container-color: var(--bg-card); --mat-menu-item-label-text-color: var(--text-primary); --mat-menu-item-icon-color: var(--text-secondary); --mat-menu-divider-color: var(--border-color); --mat-menu-item-hover-state-layer-color: rgba(247, 149, 32, 0.08); --mat-table-background-color: var(--bg-card); --mat-table-header-headline-color: var(--text-secondary); --mat-table-row-item-label-text-color: var(--text-primary); --mat-table-row-item-outline-color: var(--border-color); --mat-table-header-row-hover-state-layer-color: transparent; --mat-table-row-hover-state-layer-color: rgba(255, 255, 255, 0.03); --mdc-dialog-container-color: var(--ngx-bg-surface); --mdc-dialog-subhead-color: var(--text-primary); --mdc-dialog-supporting-text-color: var(--text-secondary); --mdc-dialog-container-shape: 16px; --mat-paginator-container-background-color: var(--bg-card); --mat-paginator-container-text-color: var(--text-secondary); --mat-paginator-select-trigger-text-color: var(--text-primary); --mat-tab-header-label-text-color: var(--text-secondary); --mat-tab-header-active-label-text-color: var(--color-primary); --mat-tab-header-active-indicator-color: var(--color-primary); --mat-tab-header-active-focus-label-text-color: var(--color-primary); --mat-tab-header-active-hover-label-text-color: var(--color-primary-light); --mat-expansion-container-background-color: var(--bg-card); --mat-expansion-container-text-color: var(--text-primary); --mat-expansion-header-text-color: var(--text-primary); --mat-expansion-header-description-color: var(--text-secondary); --mat-expansion-header-indicator-color: var(--text-secondary); --mdc-chip-label-text-color: var(--text-primary); --mdc-chip-container-color: var(--bg-input); --mdc-plain-tooltip-container-color: var(--bg-card-hover); --mdc-plain-tooltip-supporting-text-color: var(--text-primary); --mdc-switch-unselected-track-color: var(--bg-card-hover); --mdc-switch-unselected-handle-color: var(--text-muted); --mdc-switch-selected-track-color: rgba(247, 149, 32, 0.45); --mdc-switch-selected-handle-color: var(--color-primary); --mdc-checkbox-unselected-icon-color: var(--text-secondary); --mdc-checkbox-selected-icon-color: var(--color-primary); --mdc-checkbox-selected-checkmark-color: #000000; --mdc-radio-unselected-icon-color: var(--text-secondary); --mdc-radio-selected-icon-color: var(--color-primary); --mdc-icon-button-icon-color: var(--text-secondary); --mat-standard-button-toggle-text-color: var(--text-secondary); --mat-standard-button-toggle-background-color: var(--bg-input); --mat-standard-button-toggle-selected-state-text-color: var(--color-primary); --mat-standard-button-toggle-selected-state-background-color: rgba(247, 149, 32, 0.15); --mat-standard-button-toggle-divider-color: var(--border-color); --mat-standard-button-toggle-state-layer-color: rgba(247, 149, 32, 0.08); --mat-button-toggle-text-color: var(--text-secondary); --mat-button-toggle-background-color: var(--bg-input); --mat-button-toggle-selected-state-text-color: var(--color-primary); --mat-button-toggle-selected-state-background-color: rgba(247, 149, 32, 0.15); --mat-button-toggle-divider-color: var(--border-color); --mat-button-toggle-hover-state-layer-color: rgba(247, 149, 32, 0.08); --mat-divider-color: var(--border-color); --mat-sort-arrow-color: var(--text-muted); --mat-badge-background-color: var(--color-primary); --mat-badge-text-color: #000000; --mdc-snackbar-container-color: var(--bg-card-hover); --mdc-snackbar-supporting-text-color: var(--text-primary); --mat-snack-bar-button-color: var(--color-primary); } [data-theme=light] { --mdc-filled-text-field-container-color: var(--bg-input); --mdc-filled-text-field-input-text-color: var(--text-primary); --mdc-filled-text-field-label-text-color: var(--text-secondary); --mdc-outlined-text-field-input-text-color: var(--text-primary); --mdc-outlined-text-field-label-text-color: var(--text-secondary); --mat-form-field-container-text-color: var(--text-primary); --mat-select-trigger-text-color: var(--text-primary); --mat-option-label-text-color: var(--text-primary); --mat-autocomplete-background-color: var(--surface-overlay); --mat-menu-container-color: var(--surface-overlay); --mat-menu-item-label-text-color: var(--text-primary); --mat-table-background-color: var(--surface-card); --mat-table-header-headline-color: var(--text-secondary); --mat-table-row-item-label-text-color: var(--text-primary); --mdc-dialog-container-color: var(--surface-overlay); --mdc-dialog-subhead-color: var(--text-primary); --mdc-dialog-supporting-text-color: var(--text-secondary); --mat-paginator-container-background-color: var(--surface-card); --mat-paginator-container-text-color: var(--text-secondary); --mat-expansion-container-background-color: var(--surface-card); --mat-expansion-container-text-color: var(--text-primary); --mat-expansion-header-text-color: var(--text-primary); --mdc-chip-container-color: var(--bg-input); --mdc-switch-unselected-track-color: #DDDDDD; --mdc-switch-unselected-handle-color: #999999; --mat-badge-text-color: #FFFFFF; --mdc-checkbox-selected-checkmark-color: #FFFFFF; --mdc-outlined-text-field-outline-color: rgba(0, 0, 0, 0.23); --mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, 0.87); --mdc-outlined-text-field-focus-outline-color: var(--ngx-interactive-primary); --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.12); --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54); --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.23); --mat-select-focused-arrow-color: var(--ngx-interactive-primary); --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87); --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6); --mat-option-label-text-color: rgba(0, 0, 0, 0.87); --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87); --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-table-row-hover-state-layer-color: rgba(0, 0, 0, 0.04); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; } body { font-family: var(--ngx-font-body); color: var(--ngx-text-primary); background: var(--ngx-bg-canvas); transition: background-color 180ms cubic-bezier(0.2, 0.7, 0.3, 1), color 180ms cubic-bezier(0.2, 0.7, 0.3, 1); } [data-theme=light] body { background: var(--ngx-bg-canvas); } a { color: var(--color-primary); text-decoration: none; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border-color-light); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } .mat-mdc-snack-bar-container.snackbar-error { --mdc-snackbar-container-color: var(--color-danger); --mdc-snackbar-supporting-text-color: white; } .mat-mdc-snack-bar-container.snackbar-success { --mdc-snackbar-container-color: var(--color-success); --mdc-snackbar-supporting-text-color: white; } .mat-mdc-dialog-container .mdc-dialog__surface { border: 1px solid var(--ngx-border-subtle) !important; border-radius: 16px !important; box-shadow: var(--ngx-shadow-lg) !important; } mat-dialog-actions, .mat-mdc-dialog-actions { padding: 14px 20px !important; border-top: 1px solid var(--ngx-border-subtle); gap: 10px; justify-content: flex-end; background: var(--ngx-bg-canvas); } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline { --mdc-outlined-text-field-container-shape: 10px; --mdc-outlined-text-field-outline-color: rgba(255, 255, 255, 0.18); --mdc-outlined-text-field-hover-outline-color: rgba(255, 255, 255, 0.28); --mdc-outlined-text-field-focus-outline-color: var(--ngx-interactive-primary); --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.45); --mat-select-disabled-arrow-color: rgba(255, 255, 255, 0.2); --mat-select-focused-arrow-color: var(--ngx-interactive-primary); --mdc-outlined-text-field-input-text-color: var(--ngx-text-primary); --mdc-outlined-text-field-input-text-size: 13.5px; --mdc-outlined-text-field-label-text-color: var(--ngx-text-secondary); --mdc-outlined-text-field-focus-label-text-color: var(--ngx-interactive-primary); --mdc-outlined-text-field-disabled-outline-color: rgba(255,255,255,0.06); --mat-form-field-container-height: 42px; --mat-form-field-container-vertical-padding: 10px; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__leading, .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__trailing, .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__leading, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__trailing, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch { border-color: rgba(255, 255, 255, 0.18); } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__leading, .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__trailing, .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__leading, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__trailing, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch { border-color: var(--ngx-interactive-primary) !important; border-width: 1px !important; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline { filter: drop-shadow(0 0 3px rgba(247, 149, 32, 0.25)); } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-floating-label, .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline mat-label, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-floating-label, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline mat-label { font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; color: var(--ngx-text-secondary) !important; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline--notched .mdc-notched-outline__notch, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline--notched .mdc-notched-outline__notch { border-top: 1px solid rgba(255, 255, 255, 0.18) !important; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow { color: rgba(255, 255, 255, 0.5) !important; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-select-arrow, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-select-arrow { color: var(--ngx-interactive-primary) !important; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value-text, .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-placeholder, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value-text, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-placeholder { font-size: 13.5px !important; color: var(--ngx-text-primary) !important; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-placeholder, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-placeholder { color: var(--ngx-text-tertiary) !important; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline input.mat-mdc-input-element, .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline textarea.mat-mdc-input-element, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline input.mat-mdc-input-element, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline textarea.mat-mdc-input-element { font-size: 13.5px !important; color: var(--ngx-text-primary) !important; caret-color: var(--ngx-interactive-primary) !important; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper { margin-top: 2px; } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-error, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-error { font-size: 11.5px; color: var(--ngx-feedback-danger); } .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint, .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint { font-size: 11.5px; color: var(--ngx-text-tertiary); } .mat-mdc-dialog-content .mat-mdc-radio-button, .mat-mdc-dialog-surface .mat-mdc-radio-button { --mdc-radio-selected-icon-color: var(--ngx-interactive-primary); --mdc-radio-selected-focus-icon-color: var(--ngx-interactive-primary); --mdc-radio-selected-hover-icon-color: var(--ngx-interactive-primary); --mdc-radio-selected-pressed-icon-color: var(--ngx-interactive-primary); --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.2); --mdc-radio-unselected-hover-icon-color: rgba(255, 255, 255, 0.35); --mat-radio-label-text-color: var(--ngx-text-primary); --mat-radio-label-text-size: 13.5px; --mat-radio-label-text-weight: 400; } .mat-mdc-dialog-content .mat-mdc-radio-button .mat-mdc-radio-touch-target, .mat-mdc-dialog-surface .mat-mdc-radio-button .mat-mdc-radio-touch-target { width: 32px; height: 32px; } .mat-mdc-dialog-content .mat-mdc-slide-toggle, .mat-mdc-dialog-surface .mat-mdc-slide-toggle { --mdc-switch-selected-track-color: var(--ngx-interactive-primary); --mdc-switch-selected-handle-color: white; --mdc-switch-selected-focus-track-color: var(--ngx-interactive-primary); --mdc-switch-selected-hover-track-color: var(--ngx-interactive-primary); --mat-switch-label-text-color: var(--ngx-text-primary); } .mat-mdc-dialog-content .mat-mdc-checkbox, .mat-mdc-dialog-surface .mat-mdc-checkbox { --mdc-checkbox-selected-icon-color: var(--ngx-interactive-primary); --mdc-checkbox-selected-checkmark-color: #1C1207; --mdc-checkbox-selected-focus-icon-color: var(--ngx-interactive-primary); --mdc-checkbox-selected-hover-icon-color: var(--ngx-interactive-primary); --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.25); --mat-checkbox-label-text-color: var(--ngx-text-primary); } .mat-mdc-select-arrow { color: rgba(255, 255, 255, 0.45) !important; } [data-theme=light] .mat-mdc-select-arrow { color: rgba(0, 0, 0, 0.54) !important; } [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline { --mdc-outlined-text-field-outline-color: rgba(0, 0, 0, 0.23); --mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, 0.87); --mdc-outlined-text-field-focus-outline-color: var(--ngx-interactive-primary); --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.12); --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54); --mat-select-focused-arrow-color: var(--ngx-interactive-primary); } [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__leading, [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__trailing, [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__leading, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__trailing, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch { border-color: rgba(0, 0, 0, 0.23); } [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline--notched .mdc-notched-outline__notch, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline--notched .mdc-notched-outline__notch { border-top: 1px solid rgba(0, 0, 0, 0.23) !important; } [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow { color: rgba(0, 0, 0, 0.54) !important; } [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__leading, [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__trailing, [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__leading, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__trailing, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch { border-color: var(--ngx-interactive-primary) !important; } [data-theme=light] .mat-mdc-dialog-content .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-select-arrow, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-select-arrow { color: var(--ngx-interactive-primary) !important; } [data-theme=light] .mat-mdc-dialog-content .mat-mdc-radio-button, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-radio-button { --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87); } [data-theme=light] .mat-mdc-dialog-content .mat-mdc-checkbox, [data-theme=light] .mat-mdc-dialog-surface .mat-mdc-checkbox { --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); } .cdk-overlay-container .mat-mdc-select-panel { background: var(--ngx-bg-surface) !important; border: 1px solid var(--ngx-border-subtle); border-radius: 10px !important; box-shadow: var(--ngx-shadow-lg) !important; } .cdk-overlay-container .mat-mdc-select-panel .mat-mdc-option { font-size: 13.5px !important; color: var(--ngx-text-primary) !important; } .cdk-overlay-container .mat-mdc-select-panel .mat-mdc-option:hover, .cdk-overlay-container .mat-mdc-select-panel .mat-mdc-option.mat-mdc-option-active { background: var(--ngx-bg-hover) !important; } .cdk-overlay-container .mat-mdc-select-panel .mat-mdc-option.mdc-list-item--selected { color: var(--ngx-interactive-primary) !important; background: rgba(247, 149, 32, 0.08) !important; } .cdk-overlay-container .mat-mdc-autocomplete-panel { background: var(--ngx-bg-surface) !important; border: 1px solid var(--ngx-border-subtle); border-radius: 10px !important; } .cdk-overlay-container .mat-datepicker-content { background: var(--ngx-bg-surface) !important; border: 1px solid var(--ngx-border-subtle) !important; border-radius: 14px !important; box-shadow: var(--ngx-shadow-lg) !important; } .cdk-overlay-container .mat-datepicker-content .mat-calendar-body-cell-content { color: var(--ngx-text-primary) !important; } .cdk-overlay-container .mat-datepicker-content .mat-calendar-body-selected { background: var(--ngx-interactive-primary) !important; color: #1C1207 !important; } .cdk-overlay-container .mat-datepicker-content .mat-calendar-body-today { border-color: var(--ngx-interactive-primary) !important; } .cdk-overlay-container .mat-datepicker-content .mat-calendar-body-cell:hover > .mat-calendar-body-cell-content { background: var(--ngx-bg-hover) !important; } .cdk-overlay-container .mat-datepicker-content .mat-icon-button, .cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button, .cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button { color: var(--ngx-text-secondary) !important; } .cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button { color: var(--ngx-text-primary) !important; } .cdk-overlay-container .mat-datepicker-content .mat-calendar-arrow { fill: var(--ngx-text-secondary) !important; } .category-select-panel { min-width: 260px !important; max-width: 320px !important; } .category-select-panel .mat-mdc-option { white-space: normal !important; line-height: 1.4 !important; height: auto !important; min-height: 48px !important; padding-top: 8px !important; padding-bottom: 8px !important; } .category-select-panel .mdc-list-item__primary-text { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } .mat-mdc-table { background: var(--bg-card) !important; } .mat-mdc-header-cell { background: var(--bg-card) !important; color: var(--text-secondary) !important; font-weight: 600 !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: 0.07em; border-bottom-color: var(--border-color) !important; height: 46px; } .mat-mdc-cell { color: var(--text-primary) !important; font-size: 13px !important; border-bottom-color: var(--border-color) !important; height: 46px; } .mat-mdc-row { height: 46px; transition: background 120ms ease; } .mat-mdc-row:hover .mat-mdc-cell { background: var(--ngx-bg-hover) !important; } .mat-mdc-cell.value-cell, .mat-mdc-cell .money, .mat-mdc-cell .valor-cell, td.mat-column-valor, td.mat-column-valorTotal, td.mat-column-valorPago, td.mat-column-saldo, td.mat-column-value { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace !important; font-size: 13px !important; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .mat-mdc-paginator { font-size: 12px !important; background: var(--bg-card) !important; border-top: 1px solid var(--border-color); } .mat-mdc-paginator .mat-mdc-select-value-text, .mat-mdc-paginator .mat-mdc-paginator-range-label { font-size: 12px !important; } .gradient-text { background: var(--color-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-primary, .mat-mdc-raised-button.mat-primary, .mat-mdc-raised-button:not([color]) { background: #F79520 !important; color: #1C1207 !important; border-radius: 8px !important; border: none !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(247, 149, 32, 0.28) !important; transition: box-shadow 0.18s ease, background 0.18s ease !important; } .btn-primary:hover:not(:disabled), .mat-mdc-raised-button.mat-primary:hover:not(:disabled), .mat-mdc-raised-button:not([color]):hover:not(:disabled) { background: #FCA94A !important; box-shadow: 0 4px 16px rgba(247, 149, 32, 0.45) !important; } .btn-primary:disabled, .mat-mdc-raised-button.mat-primary:disabled, .mat-mdc-raised-button:not([color]):disabled { opacity: 0.45 !important; box-shadow: none !important; } .badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; border: 1px solid currentColor; } .badge.badge-in, .badge.badge-success, .badge.badge-active { background: var(--ngx-feedback-success-bg); color: var(--ngx-feedback-success); } .badge.badge-out, .badge.badge-danger { background: var(--ngx-feedback-danger-bg); color: var(--ngx-feedback-danger); } .badge.badge-warning { background: var(--ngx-feedback-warning-bg); color: var(--ngx-feedback-warning); } .badge.badge-info { background: var(--ngx-feedback-info-bg); color: var(--ngx-feedback-info); } .badge.badge-inactive, .badge.badge-cancelado { background: var(--ngx-bg-hover); color: var(--ngx-text-tertiary); border-color: rgba(255, 255, 255, 0.12); } body.values-hidden .hero-amount, body.values-hidden .hero-stat-value, body.values-hidden .metric-value, body.values-hidden .card-variation, body.values-hidden .month-label ~ td, body.values-hidden .mobile-item-value, body.values-hidden .tot-value, body.values-hidden .mobile-value, body.values-hidden .summary-card .value, body.values-hidden .invoices-totalizadores .valor, body.values-hidden .totalizador-card .valor, body.values-hidden .stat-card__value, body.values-hidden .cell-money, body.values-hidden .mobile-valor-total, body.values-hidden .mobile-valor-pago, body.values-hidden .overdue-valor, body.values-hidden .alertas-valor, body.values-hidden .strip-total, body.values-hidden .valor-cell, body.values-hidden .valor-cell .cell-mono, body.values-hidden .text-success:not(.badge):not(.badge-in):not(.badge-success):not(mat-icon):not(.mfa-icon), body.values-hidden .text-danger:not(.badge):not(.badge-out):not(.badge-danger):not(mat-icon) { color: transparent !important; -webkit-user-select: none; user-select: none; position: relative; transition: color 0.15s ease; } body.values-hidden .hero-amount::after, body.values-hidden .hero-stat-value::after, body.values-hidden .metric-value::after, body.values-hidden .card-variation::after, body.values-hidden .month-label ~ td::after, body.values-hidden .mobile-item-value::after, body.values-hidden .tot-value::after, body.values-hidden .mobile-value::after, body.values-hidden .summary-card .value::after, body.values-hidden .invoices-totalizadores .valor::after, body.values-hidden .totalizador-card .valor::after, body.values-hidden .stat-card__value::after, body.values-hidden .cell-money::after, body.values-hidden .mobile-valor-total::after, body.values-hidden .mobile-valor-pago::after, body.values-hidden .overdue-valor::after, body.values-hidden .alertas-valor::after, body.values-hidden .strip-total::after, body.values-hidden .valor-cell::after, body.values-hidden .valor-cell .cell-mono::after, body.values-hidden .text-success:not(.badge):not(.badge-in):not(.badge-success):not(mat-icon):not(.mfa-icon)::after, body.values-hidden .text-danger:not(.badge):not(.badge-out):not(.badge-danger):not(mat-icon)::after { content: "••••••"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; color: var(--ngx-text-tertiary, #666) !important; font-size: 0.85em; letter-spacing: 2px; pointer-events: none; } body.values-hidden .dash-subchart-body .x.axis .tick text { display: none !important; } body.values-hidden ngx-tooltip-content, body.values-hidden .ngx-charts-tooltip-content, body.values-hidden .chart-tooltip { visibility: hidden !important; pointer-events: none !important; } .nb-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nb-card:hover { border-color: var(--border-color-light); box-shadow: var(--shadow-card); } .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .page-header h2 { margin: 0; color: var(--ngx-text-primary); font-size: 20px; font-weight: 700; letter-spacing: -0.2px; } .page-header .header-actions { display: flex; align-items: center; gap: 12px; } .no-sub ::ng-deep .mat-mdc-form-field-subscript-wrapper { display: none; } h2[mat-dialog-title] { background: transparent !important; color: var(--ngx-text-primary) !important; margin: 0 !important; padding: 16px 20px !important; border-bottom: 1px solid var(--ngx-border-subtle); border-radius: 0 !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.1px; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; } h2[mat-dialog-title]::before { display: none !important; } h2[mat-dialog-title] .dialog-title-text { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } h2[mat-dialog-title] mat-icon:not(.dialog-close-icon) { color: var(--ngx-interactive-primary) !important; font-size: 20px; width: 20px; height: 20px; } h2[mat-dialog-title] .dialog-close-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ngx-text-secondary); flex-shrink: 0; padding: 0; transition: background var(--ngx-duration-fast, 120ms) var(--ngx-ease-out, ease), color var(--ngx-duration-fast, 120ms) var(--ngx-ease-out, ease); } h2[mat-dialog-title] .dialog-close-btn:hover { background: var(--ngx-bg-hover); color: var(--ngx-text-primary); } h2[mat-dialog-title] .dialog-close-btn mat-icon, h2[mat-dialog-title] .dialog-close-btn .dialog-close-icon { font-size: 20px; width: 20px; height: 20px; line-height: 20px; } .marca-count-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--ngx-interactive-on-primary); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; line-height: 1; margin-left: 2px; } .mat-mdc-dialog-container { --mdc-dialog-container-shape: 12px; } .ngx-dialog .mat-mdc-dialog-surface > * { display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important; } h2[mat-dialog-title] { flex-shrink: 0; } .mat-mdc-dialog-content { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; max-height: none !important; padding-top: 16px !important; } .mat-mdc-dialog-surface .mat-mdc-form-field-hint, .mat-mdc-dialog-surface .mat-mdc-form-field-error, .mat-mdc-dialog-surface .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper, .mat-mdc-dialog-surface .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper { font-size: 9px !important; line-height: 1.3 !important; } .mat-mdc-dialog-content .mat-mdc-form-field { --mdc-filled-text-field-container-color: var(--ngx-bg-canvas); --mdc-filled-text-field-focus-active-indicator-color: var(--ngx-interactive-primary); --mdc-filled-text-field-label-text-color: var(--ngx-text-secondary); --mdc-filled-text-field-input-text-color: var(--ngx-text-primary); } .mat-mdc-dialog-actions { flex-shrink: 0 !important; padding: 14px 20px !important; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--ngx-border-subtle); background: var(--ngx-bg-canvas); } @media (max-width: 600px) { .ngx-dialog { width: 96vw !important; max-width: 96vw !important; } h2[mat-dialog-title] { padding: 12px 12px 12px 16px !important; font-size: 15px !important; } } @media (max-width: 480px) { .page-header { flex-wrap: wrap; gap: 10px; } .page-header h2 { font-size: 18px; } } @keyframes sk-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } @keyframes sk-fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: sk-fadein 0.25s ease forwards; } .sk { background: linear-gradient(90deg, var(--bg-card-hover) 25%, rgba(255, 255, 255, 0.055) 50%, var(--bg-card-hover) 75%); background-size: 600px 100%; animation: sk-shimmer 1.5s infinite linear; border-radius: 6px; display: block; } [data-theme=light] .sk { background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.06) 75%); background-size: 600px 100%; } .menu-item-danger { color: var(--ngx-feedback-danger) !important; } .menu-item-danger mat-icon { color: var(--ngx-feedback-danger) !important; } @media (max-width: 768px) { .mat-mdc-button-base, .mat-mdc-icon-button, .mat-mdc-raised-button, .mat-mdc-outlined-button, .mat-mdc-stroked-button, .mat-mdc-flat-button, .mat-mdc-fab, .mat-mdc-mini-fab, button:not(.dialog-close-btn):not(.collapse-btn):not(.logo-mark-btn) { min-height: 44px; min-width: 44px; } .mat-mdc-form-field .mat-mdc-text-field-wrapper, .mat-mdc-form-field input.mat-mdc-input-element, input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], input[type=url], input[type=date], input[type=datetime-local], select, textarea { min-height: 44px; } } button.mat-mdc-icon-button, button.mat-mdc-icon-button.mat-mdc-button-base { display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle; } button.mat-mdc-icon-button .mat-mdc-button-touch-target, button.mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target { display: none; } .mat-mdc-button .mdc-button__label, .mat-mdc-raised-button .mdc-button__label, .mat-mdc-outlined-button .mdc-button__label, .mat-mdc-flat-button .mdc-button__label, .mat-mdc-unelevated-button .mdc-button__label { display: inline-flex !important; align-items: center !important; gap: 4px; } button[mat-button], button[mat-stroked-button], button[mat-flat-button], button[mat-raised-button] { display: inline-flex !important; align-items: center !important; vertical-align: middle; } /* Seletor de destinatários da aba E-mails do Editar Cliente (client-form). Escopado sob .email-recipients para não vazar. */ .email-recipients { margin: 4px 0 12px; } .email-recipients .recipients-hint { font-size: 14px; color: var(--text-secondary); margin: 0 0 8px; } .email-recipients .group-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; } .email-recipients .group-label mat-icon { font-size: 16px; width: 16px; height: 16px; } .email-recipients .recipient-item { padding: 4px 0; } .email-recipients .recipient-item .recipient-name, .email-recipients .recipient-item .recipient-email { display: block; } .email-recipients .recipient-item .recipient-name { font-weight: 500; } .email-recipients .recipient-item .recipient-email { font-size: 12px; color: var(--text-secondary); } /* Fix Material 15 datepicker ghost-click bug: When transitioning from month/year view to day view, the same click event lands on a day cell. Blocking pointer-events briefly after each view change prevents the ghost click from selecting an unwanted day. */ .cdk-overlay-container .mat-datepicker-content .mat-calendar-body-cell { animation: datepicker-cell-enable 0.28s; } @keyframes datepicker-cell-enable { 0%, 60% { pointer-events: none; } 61%, 100% { pointer-events: auto; } } /*# sourceMappingURL=styles.css.map*/