:root { --tc-02: #8998af; --tc-11: #3f8dfd; --tc-21: #85daf9; --tc-31: #2dba5c; /*--tc-41: #e3ee2b;*/ --tc-51: #f2d42f; --tc-61: #f26b2f; /* Светлые оттенки (50–400) — подходят для фонов, подложек и элементов интерфейса. Средние оттенки (500–700) — основной цвет, используется для текстов, заголовков, иконок. Темные оттенки (750–950) — акцентные элементы, контрастные кнопки, границы. */ /* Уровень - Применение 50 - Очень светлый фон, нейтральный фон для UI 100 - Светлый фон, подложки 200 - Блоки информации, карточки 300 - Чекбоксы, второстепенный текст 400 - Границы, декоративные элементы 500 - Основной цвет 600 - Основной цвет при ховере 700 - Кнопки, активные элементы 800 - Тексты, заголовки 900 - Заголовки, важные акценты 950 - Глубокий акцент, кнопки призыва к действию */ /* Применение цветовой палитры в веб-дизайне Фоновые цвета Основной фон: #F1F3F6 (50) или #DCE0E8 (100) Фоновые карточки: #C5CCD9 (200) Границы и разделители: #99A5BB (400) Тексты Основной текст: #3D3E5E (900) (оптимальная читаемость) Второстепенный текст: #667691 (700) Заголовки: #292A44 (950) (лучший контраст) Кнопки Основные кнопки (CTA): #667691 (700) Hover-эффект: #7787A0 (600) Деактивированные кнопки: #C5CCD9 (200) Ссылки Обычные ссылки: #545882 (800) Hover-эффект: #667691 (700) Иконки и графические элементы Основные иконки: #8998AF (500) Дополнительные акценты: #3D3E5E (900) */ /* Создай палитру 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 на основе цвета --color-purple-500: oklch(62% 0.21 290); Создай палитру оттенков, в формате CSS плюс rgb, как Tailwind, с шагом 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 на основе цвета --color-emerald-500: #10B981; */ --color-blue-500: #3B82F6; --color-indigo-500: #6366F1; --color-purple-500: #A855F7; --color-pink-500: #EC4899; --color-red-500: #EF4444; --color-orange-500: #F97316; --color-yellow-500: #EAB308; --color-green-500: #22C55E; --color-teal-500: #14B8A6; --color-cyan-500: #06B6D4; --color-black-500: #000; --color-white-500: #FFF; --color-gray-500: #6B7280; --color-emerald-500: #10B981; --bs-gray-50: #f3f5f7; --bs-gray-50-rgb: 243, 245, 247; --bs-gray-100: #dadfe6; --bs-gray-100-rgb: 218, 223, 230; --bs-gray-200: #c9d0da; --bs-gray-200-rgb: 201, 208, 218; --bs-gray-300: #b0bac9; --bs-gray-300-rgb: 176, 186, 201; --bs-gray-400: #a1adbf; --bs-gray-400-rgb: 161, 173, 191; --bs-gray-500: #8998af; --bs-gray-500-rgb: 137, 152, 175; --bs-gray-600: #7d8a9f; --bs-gray-600-rgb: 125, 138, 159; --bs-gray-700: #616c7c; --bs-gray-700-rgb: 97, 108, 124; --bs-gray-800: #4b5460; --bs-gray-800-rgb: 75, 84, 96; --bs-gray-900: #3a404a; --bs-gray-900-rgb: 58, 64, 74; --bs-gray-950: #22252b; --bs-gray-950-rgb: 34, 37, 43; --bs-blue-50: #EFF6FF; --bs-blue-50-rgb: 239, 246, 255; --bs-blue-100: #DBEAFE; --bs-blue-100-rgb: 219, 234, 254; --bs-blue-200: #BFDBFE; --bs-blue-200-rgb: 191, 219, 254; --bs-blue-300: #93C5FD; --bs-blue-300-rgb: 147, 197, 253; --bs-blue-400: #60A5FA; --bs-blue-400-rgb: 96, 165, 250; --bs-blue-500: #3B82F6; --bs-blue-500-rgb: 59, 130, 246; --bs-blue-600: #2563EB; --bs-blue-600-rgb: 37, 99, 235; --bs-blue-700: #1D4ED8; --bs-blue-700-rgb: 29, 78, 216; --bs-blue-800: #1E40AF; --bs-blue-800-rgb: 30, 64, 175; --bs-blue-900: #1E3A8A; --bs-blue-900-rgb: 30, 58, 138; --bs-blue-950: #172554; --bs-blue-950-rgb: 23, 37, 84; --bs-indigo-50: #EEF2FF; --bs-indigo-50-rgb: 238, 242, 255; --bs-indigo-100: #E0E7FF; --bs-indigo-100-rgb: 224, 231, 255; --bs-indigo-200: #C7D2FE; --bs-indigo-200-rgb: 199, 210, 254; --bs-indigo-300: #A5B4FC; --bs-indigo-300-rgb: 165, 180, 252; --bs-indigo-400: #818CF8; --bs-indigo-400-rgb: 129, 140, 248; --bs-indigo-500: #6366F1; --bs-indigo-500-rgb: 99, 102, 241; --bs-indigo-600: #4F46E5; --bs-indigo-600-rgb: 79, 70, 229; --bs-indigo-700: #4338CA; --bs-indigo-700-rgb: 67, 56, 202; --bs-indigo-800: #3730A3; --bs-indigo-800-rgb: 55, 48, 163; --bs-indigo-900: #312E81; --bs-indigo-900-rgb: 49, 46, 129; --bs-indigo-950: #1E1B4B; --bs-indigo-950-rgb: 30, 27, 75; --bs-purple-50: #FAF5FF; --bs-purple-50-rgb: 250, 245, 255; --bs-purple-100: #F3E8FF; --bs-purple-100-rgb: 243, 232, 255; --bs-purple-200: #E9D5FF; --bs-purple-200-rgb: 233, 213, 255; --bs-purple-300: #D8B4FE; --bs-purple-300-rgb: 216, 180, 254; --bs-purple-400: #C084FC; --bs-purple-400-rgb: 192, 132, 252; --bs-purple-500: #A855F7; --bs-purple-500-rgb: 168, 85, 247; --bs-purple-600: #9333EA; --bs-purple-600-rgb: 147, 51, 234; --bs-purple-700: #7E22CE; --bs-purple-700-rgb: 126, 34, 206; --bs-purple-800: #6B21A8; --bs-purple-800-rgb: 107, 33, 168; --bs-purple-900: #581C87; --bs-purple-900-rgb: 88, 28, 135; --bs-purple-950: #3B0764; --bs-purple-950-rgb: 59, 7, 100; --bs-pink-50: #FDF2F8; --bs-pink-50-rgb: 253, 242, 248; --bs-pink-100: #FCE7F3; --bs-pink-100-rgb: 252, 231, 243; --bs-pink-200: #FBCFE8; --bs-pink-200-rgb: 251, 207, 232; --bs-pink-300: #F9A8D4; --bs-pink-300-rgb: 249, 168, 212; --bs-pink-400: #F472B6; --bs-pink-400-rgb: 244, 114, 182; --bs-pink-500: #EC4899; --bs-pink-500-rgb: 236, 72, 153; --bs-pink-600: #DB2777; --bs-pink-600-rgb: 219, 39, 119; --bs-pink-700: #BE185D; --bs-pink-700-rgb: 190, 24, 93; --bs-pink-800: #9D174D; --bs-pink-800-rgb: 157, 23, 77; --bs-pink-900: #831843; --bs-pink-900-rgb: 131, 24, 67; --bs-pink-950: #500724; --bs-pink-950-rgb: 80, 7, 36; --bs-red-50: #FEF2F2; --bs-red-50-rgb: 254, 242, 242; --bs-red-100: #FEE2E2; --bs-red-100-rgb: 254, 226, 226; --bs-red-200: #FECACA; --bs-red-200-rgb: 254, 202, 202; --bs-red-300: #FCA5A5; --bs-red-300-rgb: 252, 165, 165; --bs-red-400: #F87171; --bs-red-400-rgb: 248, 113, 113; --bs-red-500: #EF4444; --bs-red-500-rgb: 239, 68, 68; --bs-red-600: #DC2626; --bs-red-600-rgb: 220, 38, 38; --bs-red-700: #B91C1C; --bs-red-700-rgb: 185, 28, 28; --bs-red-800: #991B1B; --bs-red-800-rgb: 153, 27, 27; --bs-red-900: #7F1D1D; --bs-red-900-rgb: 127, 29, 29; --bs-red-950: #450A0A; --bs-red-950-rgb: 69, 10, 10; --bs-orange-50: #FFF7ED; --bs-orange-50-rgb: 255, 247, 237; --bs-orange-100: #FFEDD5; --bs-orange-100-rgb: 255, 237, 213; --bs-orange-200: #FED7AA; --bs-orange-200-rgb: 254, 215, 170; --bs-orange-300: #FDBA74; --bs-orange-300-rgb: 253, 186, 116; --bs-orange-400: #FB923C; --bs-orange-400-rgb: 251, 146, 60; --bs-orange-500: #F97316; --bs-orange-500-rgb: 249, 115, 22; --bs-orange-600: #EA580C; --bs-orange-600-rgb: 234, 88, 12; --bs-orange-700: #C2410C; --bs-orange-700-rgb: 194, 65, 12; --bs-orange-800: #9A3412; --bs-orange-800-rgb: 154, 52, 18; --bs-orange-900: #7C2D12; --bs-orange-900-rgb: 124, 45, 18; --bs-orange-950: #431407; --bs-orange-950-rgb: 67, 20, 7; --bs-yellow-50: #FEFCE8; --bs-yellow-50-rgb: 254, 252, 232; --bs-yellow-100: #FEF9C3; --bs-yellow-100-rgb: 254, 249, 195; --bs-yellow-200: #FEF08A; --bs-yellow-200-rgb: 254, 240, 138; --bs-yellow-300: #FDE047; --bs-yellow-300-rgb: 253, 224, 71; --bs-yellow-400: #FACC15; --bs-yellow-400-rgb: 250, 204, 21; --bs-yellow-500: #EAB308; --bs-yellow-500-rgb: 234, 179, 8; --bs-yellow-600: #CA8A04; --bs-yellow-600-rgb: 202, 138, 4; --bs-yellow-700: #A16207; --bs-yellow-700-rgb: 161, 98, 7; --bs-yellow-800: #854D0E; --bs-yellow-800-rgb: 133, 77, 14; --bs-yellow-900: #713F12; --bs-yellow-900-rgb: 113, 63, 18; --bs-yellow-950: #422006; --bs-yellow-950-rgb: 66, 32, 6; --bs-green-50: #f0fdf4; --bs-green-50-rgb: 240, 253, 244; --bs-green-100: #dcfce7; --bs-green-100-rgb: 220, 252, 231; --bs-green-200: #bbf7d0; --bs-green-200-rgb: 187, 247, 208; --bs-green-300: #86efac; --bs-green-300-rgb: 134, 239, 172; --bs-green-400: #4ade80; --bs-green-400-rgb: 74, 222, 128; --bs-green-500: #22c55e; --bs-green-500-rgb: 34, 197, 94; --bs-green-600: #16a34a; --bs-green-600-rgb: 22, 163, 74; --bs-green-700: #15803d; --bs-green-700-rgb: 21, 128, 61; --bs-green-800: #166534; --bs-green-800-rgb: 22, 101, 52; --bs-green-900: #14532d; --bs-green-900-rgb: 20, 83, 45; --bs-green-950: #0f5132; --bs-green-950-rgb: 15, 81, 50; --bs-teal-50: #f0fdfa; --bs-teal-50-rgb: 240, 253, 250; --bs-teal-100: #ccfbf1; --bs-teal-100-rgb: 204, 251, 241; --bs-teal-200: #99f6e4; --bs-teal-200-rgb: 153, 246, 228; --bs-teal-300: #5eead4; --bs-teal-300-rgb: 94, 234, 212; --bs-teal-400: #2dd4bf; --bs-teal-400-rgb: 45, 212, 191; --bs-teal-500: #14b8a6; --bs-teal-500-rgb: 20, 184, 166; --bs-teal-600: #0d9488; --bs-teal-600-rgb: 13, 148, 136; --bs-teal-700: #0f766e; --bs-teal-700-rgb: 15, 118, 110; --bs-teal-800: #115e59; --bs-teal-800-rgb: 17, 94, 89; --bs-teal-900: #134e4a; --bs-teal-900-rgb: 19, 78, 74; --bs-teal-950: #042f2e; --bs-teal-950-rgb: 4, 47, 46; --bs-cyan-50: #ecfeff; --bs-cyan-50-rgb: 236, 254, 255; --bs-cyan-100: #cffafe; --bs-cyan-100-rgb: 207, 250, 254; --bs-cyan-200: #a5f3fc; --bs-cyan-200-rgb: 165, 243, 252; --bs-cyan-300: #67e8f9; --bs-cyan-300-rgb: 103, 232, 249; --bs-cyan-400: #22d3ee; --bs-cyan-400-rgb: 34, 211, 238; --bs-cyan-500: #06b6d4; --bs-cyan-500-rgb: 6, 182, 212; --bs-cyan-600: #0891b2; --bs-cyan-600-rgb: 8, 145, 178; --bs-cyan-700: #0e7490; --bs-cyan-700-rgb: 14, 116, 144; --bs-cyan-800: #155e75; --bs-cyan-800-rgb: 21, 94, 117; --bs-cyan-900: #164e63; --bs-cyan-900-rgb: 22, 78, 99; --bs-cyan-950: #134e4a; --bs-cyan-950-rgb: 19, 78, 74; --bs-emerald-50: #ecfdf5; --bs-emerald-50-rgb: 236, 253, 245; --bs-emerald-100: #d1fae5; --bs-emerald-100-rgb: 209, 250, 229; --bs-emerald-200: #a7f3d0; --bs-emerald-200-rgb: 167, 243, 208; --bs-emerald-300: #6ee7b7; --bs-emerald-300-rgb: 110, 231, 183; --bs-emerald-400: #34d399; --bs-emerald-400-rgb: 52, 211, 153; --bs-emerald-500: #10b981; --bs-emerald-500-rgb: 16, 185, 129; --bs-emerald-600: #059669; --bs-emerald-600-rgb: 5, 150, 105; --bs-emerald-700: #047857; --bs-emerald-700-rgb: 4, 120, 87; --bs-emerald-800: #065f46; --bs-emerald-800-rgb: 6, 95, 70; --bs-emerald-900: #064e3b; --bs-emerald-900-rgb: 6, 78, 59; --bs-emerald-950: #022c22; --bs-emerald-950-rgb: 2, 44, 34; --bs-blue: var(--bs-blue-500); --bs-blue-rgb: var(--bs-blue-500-rgb); --bs-green: var(--bs-green-500); --bs-green-rgb: var(--bs-green-500-rgb); --bs-cyan: var(--bs-cyan-500); --bs-cyan-rgb: var(--bs-cyan-500-rgb); --bs-yellow: var(--bs-yellow-500); --bs-yellow-rgb: var(--bs-yellow-500-rgb); --bs-red: var(--bs-red-500); --bs-red-rgb: var(--bs-red-500-rgb); --bs-indigo: var(--bs-indigo-500); --bs-indigo-rgb: var(--bs-indigo-500-rgb); --bs-purple: var(--bs-purple-500); --bs-purple-rgb: var(--bs-purple-500-rgb); --bs-pink: var(--bs-pink-500); --bs-pink-rgb: var(--bs-pink-500-rgb); --bs-orange: var(--bs-orange-500); --bs-orange-rgb: var(--bs-orange-500-rgb); --bs-teal: var(--bs-teal-500); --bs-teal-rgb: var(--bs-teal-500-rgb); --bs-black: #000; --bs-black-rgb: 0, 0, 0; --bs-white: #fff; --bs-white-rgb: 255, 255, 255; --bs-gray: var(--bs-gray-500); --bs-gray-dark: var(--bs-gray-950); --bs-primary-50: var(--bs-blue-50); --bs-primary-50-rgb: var(--bs-blue-50-rgb); --bs-primary-100: var(--bs-blue-100); --bs-primary-100-rgb: var(--bs-blue-100-rgb); --bs-primary-200: var(--bs-blue-200); --bs-primary-200-rgb: var(--bs-blue-200-rgb); --bs-primary-300: var(--bs-blue-300); --bs-primary-300-rgb: var(--bs-blue-300-rgb); --bs-primary-400: var(--bs-blue-400); --bs-primary-400-rgb: var(--bs-blue-400-rgb); --bs-primary: var(--bs-blue-500); --bs-primary-rgb: var(--bs-blue-500-rgb); --bs-primary-600: var(--bs-blue-600); --bs-primary-600-rgb: var(--bs-blue-600-rgb); --bs-primary-700: var(--bs-blue-700); --bs-primary-700-rgb: var(--bs-blue-700-rgb); --bs-primary-800: var(--bs-blue-800); --bs-primary-800-rgb: var(--bs-blue-800-rgb); --bs-primary-900: var(--bs-blue-900); --bs-primary-900-rgb: var(--bs-blue-900-rgb); --bs-primary-950: var(--bs-blue-950); --bs-primary-950-rgb: var(--bs-blue-950-rgb); --bs-secondary-50: var(--bs-gray-50); --bs-secondary-50-rgb: var(--bs-gray-50-rgb); --bs-secondary-100: var(--bs-gray-100); --bs-secondary-100-rgb: var(--bs-gray-100-rgb); --bs-secondary-200: var(--bs-gray-200); --bs-secondary-200-rgb: var(--bs-gray-200-rgb); --bs-secondary-300: var(--bs-gray-300); --bs-secondary-300-rgb: var(--bs-gray-300-rgb); --bs-secondary-400: var(--bs-gray-400); --bs-secondary-400-rgb: var(--bs-gray-400-rgb); --bs-secondary: var(--bs-gray-500); --bs-secondary-rgb: var(--bs-gray-500-rgb); --bs-secondary-600: var(--bs-gray-600); --bs-secondary-600-rgb: var(--bs-gray-600-rgb); --bs-secondary-700: var(--bs-gray-700); --bs-secondary-700-rgb: var(--bs-gray-700-rgb); --bs-secondary-800: var(--bs-gray-800); --bs-secondary-800-rgb: var(--bs-gray-800-rgb); --bs-secondary-900: var(--bs-gray-900); --bs-secondary-900-rgb: var(--bs-gray-900-rgb); --bs-secondary-950: var(--bs-gray-950); --bs-secondary-950-rgb: var(--bs-gray-950-rgb); --bs-success-50: var(--bs-green-50); --bs-success-50-rgb: var(--bs-green-50-rgb); --bs-success-100: var(--bs-green-100); --bs-success-100-rgb: var(--bs-green-100-rgb); --bs-success-200: var(--bs-green-200); --bs-success-200-rgb: var(--bs-green-200-rgb); --bs-success-300: var(--bs-green-300); --bs-success-300-rgb: var(--bs-green-300-rgb); --bs-success-400: var(--bs-green-400); --bs-success-400-rgb: var(--bs-green-400-rgb); --bs-success: var(--bs-green-500); --bs-success-rgb: var(--bs-green-500-rgb); --bs-success-600: var(--bs-green-600); --bs-success-600-rgb: var(--bs-green-600-rgb); --bs-success-700: var(--bs-green-700); --bs-success-700-rgb: var(--bs-green-700-rgb); --bs-success-800: var(--bs-green-800); --bs-success-800-rgb: var(--bs-green-800-rgb); --bs-success-900: var(--bs-green-900); --bs-success-900-rgb: var(--bs-green-900-rgb); --bs-success-950: var(--bs-green-950); --bs-success-950-rgb: var(--bs-green-950-rgb); --bs-info-50: var(--bs-cyan-50); --bs-info-50-rgb: var(--bs-cyan-50-rgb); --bs-info-100: var(--bs-cyan-100); --bs-info-100-rgb: var(--bs-cyan-100-rgb); --bs-info-200: var(--bs-cyan-200); --bs-info-200-rgb: var(--bs-cyan-200-rgb); --bs-info-300: var(--bs-cyan-300); --bs-info-300-rgb: var(--bs-cyan-300-rgb); --bs-info-400: var(--bs-cyan-400); --bs-info-400-rgb: var(--bs-cyan-400-rgb); --bs-info: var(--bs-cyan-500); --bs-info-rgb: var(--bs-cyan-500-rgb); --bs-info-600: var(--bs-cyan-600); --bs-info-600-rgb: var(--bs-cyan-600-rgb); --bs-info-700: var(--bs-cyan-700); --bs-info-700-rgb: var(--bs-cyan-700-rgb); --bs-info-800: var(--bs-cyan-800); --bs-info-800-rgb: var(--bs-cyan-800-rgb); --bs-info-900: var(--bs-cyan-900); --bs-info-900-rgb: var(--bs-cyan-900-rgb); --bs-info-950: var(--bs-cyan-950); --bs-info-950-rgb: var(--bs-cyan-950-rgb); --bs-warning-50: var(--bs-yellow-50); --bs-warning-50-rgb: var(--bs-yellow-50-rgb); --bs-warning-100: var(--bs-yellow-100); --bs-warning-100-rgb: var(--bs-yellow-100-rgb); --bs-warning-200: var(--bs-yellow-200); --bs-warning-200-rgb: var(--bs-yellow-200-rgb); --bs-warning-300: var(--bs-yellow-300); --bs-warning-300-rgb: var(--bs-yellow-300-rgb); --bs-warning-400: var(--bs-yellow-400); --bs-warning-400-rgb: var(--bs-yellow-400-rgb); --bs-warning: var(--bs-yellow-500); --bs-warning-rgb: var(--bs-yellow-500-rgb); --bs-warning-600: var(--bs-yellow-600); --bs-warning-600-rgb: var(--bs-yellow-600-rgb); --bs-warning-700: var(--bs-yellow-700); --bs-warning-700-rgb: var(--bs-yellow-700-rgb); --bs-warning-800: var(--bs-yellow-800); --bs-warning-800-rgb: var(--bs-yellow-800-rgb); --bs-warning-900: var(--bs-yellow-900); --bs-warning-900-rgb: var(--bs-yellow-900-rgb); --bs-warning-950: var(--bs-yellow-950); --bs-warning-950-rgb: var(--bs-yellow-950-rgb); --bs-danger-50: var(--bs-red-50); --bs-danger-50-rgb: var(--bs-red-50-rgb); --bs-danger-100: var(--bs-red-100); --bs-danger-100-rgb: var(--bs-red-100-rgb); --bs-danger-200: var(--bs-red-200); --bs-danger-200-rgb: var(--bs-red-200-rgb); --bs-danger-300: var(--bs-red-300); --bs-danger-300-rgb: var(--bs-red-300-rgb); --bs-danger-400: var(--bs-red-400); --bs-danger-400-rgb: var(--bs-red-400-rgb); --bs-danger: var(--bs-red-500); --bs-danger-rgb: var(--bs-red-500-rgb); --bs-danger-600: var(--bs-red-600); --bs-danger-600-rgb: var(--bs-red-600-rgb); --bs-danger-700: var(--bs-red-700); --bs-danger-700-rgb: var(--bs-red-700-rgb); --bs-danger-800: var(--bs-red-800); --bs-danger-800-rgb: var(--bs-red-800-rgb); --bs-danger-900: var(--bs-red-900); --bs-danger-900-rgb: var(--bs-red-900-rgb); --bs-danger-950: var(--bs-red-950); --bs-danger-950-rgb: var(--bs-red-950-rgb); --bs-light: var(--bs-gray-50); --bs-light-rgb: var(--bs-gray-50-rgb); --bs-dark: var(--bs-gray-950); --bs-dark-rgb: var(--bs-gray-950-rgb); --bs-primary-text-emphasis: var(--bs-primary-700); --bs-primary-text-emphasis-rgb: var(--bs-primary-800-rgb); --bs-primary-bg-subtle: var(--bs-primary-50); --bs-primary-border-subtle: var(--bs-primary-200); --bs-secondary-text-emphasis: var(--bs-secondary-700); --bs-secondary-text-emphasis-rgb: var(--bs-secondary-800-rgb); --bs-secondary-bg-subtle: var(--bs-secondary-50); --bs-secondary-border-subtle: var(--bs-secondary-200); --bs-success-text-emphasis: var(--bs-success-700); --bs-success-text-emphasis-rgb: var(--bs-success-800-rgb); --bs-success-bg-subtle: var(--bs-success-50); --bs-success-border-subtle: var(--bs-success-200); --bs-info-text-emphasis: var(--bs-info-800); --bs-info-text-emphasis-rgb: var(--bs-info-800-rgb); --bs-info-bg-subtle: var(--bs-info-100); --bs-info-border-subtle: var(--bs-info-200); --bs-warning-text-emphasis: var(--bs-warning-700); --bs-warning-text-emphasis-rgb: var(--bs-warning-800-rgb); --bs-warning-bg-subtle: var(--bs-warning-50); --bs-warning-border-subtle: var(--bs-warning-200); --bs-danger-text-emphasis: var(--bs-danger-700); --bs-danger-text-emphasis-rgb: var(--bs-danger-800-rgb); --bs-danger-bg-subtle: var(--bs-danger-50); --bs-danger-border-subtle: var(--bs-danger-200); --bs-light-text-emphasis: var(--bs-gray-600); --bs-light-text-emphasis-rgb: var(--bs-gray-700-rgb); --bs-light-bg-subtle: var(--bs-white); --bs-light-border-subtle: var(--bs-gray-100); --bs-dark-text-emphasis: var(--bs-white); --bs-dark-text-emphasis-rgb: var(--bs-white-rgb); --bs-dark-bg-subtle: var(--bs-gray-700); --bs-dark-border-subtle: var(--bs-gray-900); --bs-font-sans-serif: 'Mulish', 'Nunito Sans', 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /*--bs-font-sans-serif: 'Mulish', 'Nunito Sans', 'Montserrat', ui-sans-serif, system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/ --bs-body-color: var(--bs-dark); --bs-body-color-rgb: var(--bs-dark-rgb); --bs-body-bg: var(--bs-white); --bs-body-bg-rgb: var(--bs-white-rgb); --bs-emphasis-color: var(--bs-dark); --bs-emphasis-color-rgb: var(--bs-secondary-rgb); --bs-secondary-color: var(--bs-secondary); --bs-secondary-color-rgb: var(--bs-secondary-rgb); --bs-secondary-bg: var(--bs-light); --bs-secondary-bg-rgb: var(--bs-light-rgb); --bs-tertiary-color: rgba(var(--bs-dark-rgb), 0.5); --bs-tertiary-color-rgb: var(--bs-dark-rgb); --bs-tertiary-bg: var(--bs-light); --bs-tertiary-bg-rgb: var(--bs-light-rgb); /*--bs-heading-color: var(--bs-gray-950);*/ --bs-link-color: var(--bs-primary); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-link-hover-color: var(--bs-primary-600); --bs-link-hover-color-rgb: var(--bs-primary-600-rgb); --bs-highlight-color: var(--bs-warning-900); --bs-highlight-bg: var(--bs-warning-100); --bs-border-color: rgba(var(--bs-gray-100-rgb), .75); /*--bs-border-color-translucent: rgba(0, 0, 0, 0.175);*/ --bs-border-radius: 0.75rem; --bs-border-radius-smr: 0.5rem; --bs-border-radius-sm: 0.625rem; --bs-border-radius-lg: 0.875rem; --bs-border-radius-xl: 1.125rem; --bs-border-radius-xxl: 2.25rem; --bs-box-shadow-sm: 0px 0.4px 0.5px rgba(var(--box-shadow-color), 0.042), 0px 1px 1.4px rgba(var(--box-shadow-color), 0.06), 0px 2.4px 3.3px rgba(var(--box-shadow-color), 0.078), 0px 8px 12px rgba(var(--box-shadow-color), 0.10); --bs-box-shadow: 0px 0.7px 1px rgba(var(--box-shadow-color), 0.042), 0px 2px 2.8px rgba(var(--box-shadow-color), 0.06), 0px 4.8px 6.6px rgba(var(--box-shadow-color), 0.078), 0px 16px 22px rgba(var(--box-shadow-color), 0.12); --bs-box-shadow-lg: inset 0px 0px 0px 3px rgba(var(--bs-white-rgb), 0.05), 0px 1px 2px rgba(var(--box-shadow-color), 0.063), 0px 4px 3px rgba(var(--box-shadow-color), 0.09), 0px 10px 8px rgba(var(--box-shadow-color), 0.117), 0px 26px 24px rgba(var(--box-shadow-color), 0.18); --box-shadow-color: var(--bs-secondary-rgb); /*--bs-box-shadow: 0px 24px 22px rgba(var(--bs-secondary-rgb), 0.0372022), 0px 8.5846px 8.03036px rgba(var(--bs-secondary-rgb), 0.0532451), 0px 4.77692px 3.89859px rgba(var(--bs-secondary-rgb), 0.0667549), 0px 2.63479px 1.91116px rgba(var(--bs-secondary-rgb), 0.0827978), 0px 1.15891px 0.755676px rgba(var(--bs-secondary-rgb), 0.12);*/ --bs-form-valid-color: var(--bs-success); --bs-form-valid-border-color: var(--bs-success); --bs-form-invalid-color: var(--bs-danger); --bs-form-invalid-border-color: var(--bs-danger); /*--scrollbar-track: transparent;*/ --scrollbar-track: rgba(var(--bs-gray-300-rgb), 0.15); --scrollbar-thumb: var(--bs-gray-400); --scrollbar-thumb-hover: var(--bs-gray-400); --navbar-h: 56px; --cont-fix-h-100vh: calc(100vh - var(--navbar-h)); --cont-fix-h-100pct: calc(100% - var(--navbar-h)); --font-size-20: 1.25rem; --font-size-18: 1.125rem; --font-size-14: 0.875rem; --font-size-12: 0.75rem; --font-size-10: 0.625rem; /*--backdrop-bg: rgba(32, 64, 112, 0.5);*/ --backdrop-bg: rgba(var(--bs-gray-900-rgb), 0.5); --backdrop-filter-blur-smlr: saturate(180%) blur(5px); --backdrop-filter-blur-sm: saturate(180%) blur(10px); --backdrop-filter-blur: saturate(180%) blur(20px); --transition-options-15: 0.15s ease-in-out; --transition-options-25: 0.25s ease-in-out; --transition-options-35: 0.35s ease-in-out; --transition-value-all: all 0.25s ease-in-out; --ui-box-shadow: /*0 2px 6px rgba(56, 73, 121, 0),*/ 0 2px 6px rgba(var(--ui-box-shadow-color), 0.02), 0 4px 12px rgba(var(--ui-box-shadow-color), 0.04), 0 8px 24px rgba(var(--ui-box-shadow-color), 0.06); --ui-box-shadow-color: var(--bs-secondary-800-rgb); --icon-chevron-right-fill: var(--bs-blue-200); --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 512'%3E%3Cpath fill='%2396b4ff' d='M282.3,226.8c13,13,13,38.9,0,51.8L61.6,502.3c-13,13-38.9,13-51.9,0c-13-13-13-38.9,0-51.8L204.4,256L9.7,61.6 c-13-13-13-38.9,0-51.8s38.9-13,51.9,0L282.3,226.8L282.3,226.8z'/%3E%3C/svg%3E"); --icon-chevron-right-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 512'%3E%3Cpath fill='%23fff' d='M282.3,226.8c13,13,13,38.9,0,51.8L61.6,502.3c-13,13-38.9,13-51.9,0c-13-13-13-38.9,0-51.8L204.4,256L9.7,61.6 c-13-13-13-38.9,0-51.8s38.9-13,51.9,0L282.3,226.8L282.3,226.8z'/%3E%3C/svg%3E"); --icon-chevron-right-dark-fill: var(--bs-gray-900); --icon-chevron-right-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 512'%3E%3Cpath fill='%23333846' d='M282.3,226.8c13,13,13,38.9,0,51.8L61.6,502.3c-13,13-38.9,13-51.9,0c-13-13-13-38.9,0-51.8L204.4,256L9.7,61.6 c-13-13-13-38.9,0-51.8s38.9-13,51.9,0L282.3,226.8L282.3,226.8z'/%3E%3C/svg%3E"); --icon-xmark-fill: var(--bs-gray-500); --icon-xmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 317.5 317.5'%3E%3Cpath fill='%237986a6' d='M290.4,312.9c6.2,6.2,16.3,6.2,22.5,0c6.2-6.2,6.2-16.3,0-22.5L181.2,158.7L312.9,27.1c6.2-6.2,6.2-16.3,0-22.5 c-6.2-6.2-16.3-6.2-22.5,0L158.7,136.3L27.1,4.6c-6.2-6.2-16.3-6.2-22.5,0s-6.2,16.3,0,22.5l131.7,131.7L4.6,290.4 c-6.2,6.2-6.2,16.3,0,22.5c6.2,6.2,16.3,6.2,22.5,0l131.7-131.7L290.4,312.9z'/%3E%3C/svg%3E"); --icon-xmark-light-fill: var(--bs-white); --icon-xmark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 317.5 317.5'%3E%3Cpath fill='%23fff' d='M290.4,312.9c6.2,6.2,16.3,6.2,22.5,0c6.2-6.2,6.2-16.3,0-22.5L181.2,158.7L312.9,27.1c6.2-6.2,6.2-16.3,0-22.5 c-6.2-6.2-16.3-6.2-22.5,0L158.7,136.3L27.1,4.6c-6.2-6.2-16.3-6.2-22.5,0s-6.2,16.3,0,22.5l131.7,131.7L4.6,290.4 c-6.2,6.2-6.2,16.3,0,22.5c6.2,6.2,16.3,6.2,22.5,0l131.7-131.7L290.4,312.9z'/%3E%3C/svg%3E"); --icon-xmark-dark-fill: var(--bs-gray-900); --icon-xmark-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 317.5 317.5'%3E%3Cpath fill='%23333846' d='M290.4,312.9c6.2,6.2,16.3,6.2,22.5,0c6.2-6.2,6.2-16.3,0-22.5L181.2,158.7L312.9,27.1c6.2-6.2,6.2-16.3,0-22.5 c-6.2-6.2-16.3-6.2-22.5,0L158.7,136.3L27.1,4.6c-6.2-6.2-16.3-6.2-22.5,0s-6.2,16.3,0,22.5l131.7,131.7L4.6,290.4 c-6.2,6.2-6.2,16.3,0,22.5c6.2,6.2,16.3,6.2,22.5,0l131.7-131.7L290.4,312.9z'/%3E%3C/svg%3E"); --icon-navbar-toggler-fill: var(--bs-gray-300); --icon-navbar-toggler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 132'%3E%3Cpath fill='%2393C5FD' d='M66,0c36.5,0,66,29.5,66,66s-29.5,66-66,66S0,102.5,0,66S29.5,0,66,0z M256,0c36.5,0,66,29.5,66,66 s-29.5,66-66,66s-66-29.5-66-66S219.5,0,256,0z M446,0c36.5,0,66,29.5,66,66s-29.5,66-66,66s-66-29.5-66-66S409.5,0,446,0z'/%3E%3C/svg%3E"); --icon-navbar-toggler-sidebar-fill: var(--bs-gray-300); --icon-navbar-toggler-sidebar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 440'%3E%3Cpath fill='%23a5aec3' d='M0,36C0,16.1,16.3,0,36.6,0h438.9C495.7,0,512,16.1,512,36s-16.3,36-36.6,36H36.6C16.3,72,0,55.9,0,36z M0,404 c0-19.9,16.3-36,36.6-36h438.9c20.2,0,36.6,16.1,36.6,36s-16.3,36-36.6,36H36.6C16.3,440,0,423.9,0,404z M0,220 c0-19.9,16.3-36,36.6-36h438.9c20.2,0,36.6,16.1,36.6,36s-16.3,36-36.6,36H36.6C16.3,256,0,239.9,0,220z'/%3E%3C/svg%3E"); --bs-form-select-bg-img: var(--icon-chevron-right-dark); /*--bs-form-select-bg-icon: url("");*/ --bs-btn-close-bg: var(--icon-xmark-dark); --sidebar-max-width: 300px; --contentbar-max-width: calc(100% - var(--sidebar-max-width)); } @media (min-width: 576px) { /* ---------------------------------------- scrollbar ---------------------------------------- */ * { /*scrollbar-width: thin;*/ /*scrollbar-color: var(--scrollbar-thumb) transparent;*/ } *:hover { /*scrollbar-color: var(--scrollbar-thumb-hover) transparent;*/ } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-track); border-radius: 1rem; /*transition: all 0.25s ease-in-out;*/ } *:hover::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } *::-webkit-scrollbar-corner { background-color: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); } *:hover::-webkit-scrollbar-thumb { /*background-color: var(--scrollbar-thumb-hover);*/ } } /* ------------------------------------------- body ------------------------------------------- */ * { hyphens: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: #eff6ff; /*background-color: var(--bs-green-50);*/ background-image: linear-gradient(to bottom right, #f9fafb 0%, #ffffff 50%, #eff6ff 100%); /*background-image: linear-gradient(0deg, #a1e5c0 0%, #a1e5c0 100%);*/ /*background-repeat: no-repeat;*/ /*background-position: center top;*/ /*background-size: cover;*/ /*background-attachment: fixed;*/ } /* ------------------------------------------- mh-100vh ------------------------------------------- */ .mh-100vh, html, body { min-height: 100vh; }